VisionArch
- 11 Devlogs
- 92 Total hours
AI-powered architectural visualization
AI-powered architectural visualization
TIME FOR DEVLOG> was busy so I slowed down.
Fixed: The Puter consent popup was getting shown to all visitors, instantly Discovered that the getCurrentUser() function is executing puter.auth.getUser() every time the page loads, for every single visitor, including those who haven’t signed in at all. This was triggering the Puter consent modal asking whether the user consents to seeing “this site uses Puter”. Fixed by adding an additional call to puter.auth.isSignedIn(), a synchronous function that doesn’t require network access, which checks if a session already exists. Users who aren’t logged in get directed straight to the homepage now.
Fixed: Regeneration with a different style required a refresh.
This was due to double invocation of the setCurrentImage() method, which overrode the just-completed AI-rendered image with the stored hosted URL. Removed the redundant call, so that the UI respects the freshly generated image. Improved the “no text in renders” requirement.
Some renders featured room labels like “Bathroom” or “Bedroom”. Re-wrote the prompt to the AI, putting text-removal above all other rules, emphasizing that the room label informs furniture choices but should not be present itself, and instructing the AI to include the self-check step in the result.
Added README Credits, features, tech stack, architecture notes, local development instructions, Vercel deployment instructions.
Next: going through the whole app end-to-end once more - code and UI - before calling this fully submitted
WHAT’S NEW
Projects no longer have to stay stuck as “Residence 1239812737128.” Now you can simply click the title in the visualizer, and it becomes editable, just edit and hit enter to save.
I also added a Floor plan template on draw page because not everyone wants to start from a blank canvas, so I added 5 starter templates (Studio, 1-Bedroom, 2-Bedroom, Open Loft, Family Home) built with tldraw’s shape API. One click loads a labeled room layout onto the canvas, which you can edit and all before generating the 3D render. Additionally, I added a hint for new users, so they immediately understand that they need to draw and generate instead of just thinking it’s blank canvas not knowing what to do.
Fixed: logged-out visitors couldn’t see Community at all
This is an issue that had a greater depth than it appeared to be. All calls made through the workers.exec() of Puter’s automatically attach the user’s session to the call. Although, this thoroughly works for authenticated actions, any calls made by un-logged-in users will not execute properly, even on routes that are not required to be authenticated on the server side. The read-only endpoints (public project list, and comments) were switched to plain fetch() calls, as they do not require a user session to execute in any way. Therefore, un-logged-in users can now browse the Community and view designs.
Fixed: voting did nothing when logged out
Similar to the above issue, there were simply no active buttons for guests to ‘vote’ at all. Now, when an un-logged-in visitor clicks on the Upvote / Downvote button (or tries to comment), it now brings up the Puter sign-in pop-up automatically. So, it allows for a real call to action rather than a ‘dead click’.
WHAT’S NEW:
Not everyone has a floor plan image lying around, so I added a full drawing canvas using tldraw. You can now sketch a layout freehand, with shapes and text, then hit “Generate 3D Render” and it feeds straight into the same AI pipeline as an uploaded image.
I recently discovered that my style picker feature (Modern/Minimalist/Industrial/Luxury) created random styled images as opposed to rendering the correct object from the actual floor plan and thus would just replace my existing prompt with a new one capable of producing an appropriate render. To remedy this issue, I created short style modifiers that will all be appending themselves to a single base prompt. As a result, there are now clear differences between Modern/Industrial/Luxury styles, and the base wall geometric shapes are maintained no matter which style is used. Still need to improve upon the Minimalist-style image as it still looks so close to the other styles due to its similarity with the original base aesthetic.
It’s been a TOUGH coding day :>
WHAT’ NEW:
Share/unshare system allows users to share files from their local ‘Storage’ with other users and vice versa. I learned that Puter’s data model has separate user (for their own files) and me (for shared/app files), which has taken me a number of attempts to understand.
Added a confirmation dialog with custom styling to the delete function instead of a boring confirmation dialog.
In the works are an upvote/downvote and threaded comment feature to allow users to vote on designs in the community similar to Reddit’s.
Biggest debugging lesson of the day: CORS preflight requests need to define OPTIONS handlers on all routes, not just those that need CORS. One example was an attempt to resolve a CORS Access-Control-Allow-Methods header, which took so long to debug.
The pull request adds image export functionality and a before/after comparison slider to the visualizer route, expands WebP upload support, and introduces the react-compare-slider dependency. Configuration files and memory tracking are updated accordingly.
Changes:
Image Export & Comparison UI - Added HandleExport function to trigger PNG downloads of currentImage; introduced ReactCompareSlider UI panel to display before (sourceimage) and after (currentimage) comparison with conditional rendering; added react-compare-slider dependency.
Upload Enchantment - Expanded accepted file types to include .webp format alongside existing .jpg, jpeg, and .png support.
Workspace & Development Tracking - Rebalanced IDE ChangeListManager entries; added two new trajectory analysis entries documenting plans for handling sensitive env file history and cross-origin image downloads.
This pull request introduces a backend project management system via a new Puter worker module that provides REST APIs for persisting, listing, and retrieving design projects. The frontend is updated to load projects on startup, handle project creation with persistence, and enable navigation between project visualization with stateful project data.
Next, I’m planning on doing a comparison between before and after.
A new AI-powered 3D visualization feature is introduced with fetchAsDataUrl and generate3DView functions in lib/ai/action.ts that integrate with puter.ai for image generation. The Visualizer route is enhanced with state management, automatic generation flow, and a complete UI redesign including navigation, project metadata render area and loading states.
I Implemented project persistence and retrieval functionality by introducing hosting utilities for image uploads, a project creation action that prepares and saves project data with hosted assets, enables dynamic project listing on the home page, and updates the visualizer to consume project state from router navigation.
I faced multiple Errors where when I drag n drop a PNG file the loading freezes which took time to fix but made it work.
The goal is to create a whole 3D architectural render of this boring 2D design.
and also design this page itself and make it nicer.
Added a Projects list section, so everything is saved under that.
I’ve been dealing with a bunch of errors that I’m fixing, took me time to find that specific error.
Working on Hosting-Images in a branch and thinking of other ideas to come up with.
This is my first big project that I did, so that may be the reason I’m facing many problems. However, everything is going good so far.
Hope it becomes good when I have the end webpage.
In the video, I’ve made it to be able to upload your floor plan by drag and drop or simply clicking like what was shown in the video.
I’ve faced some errors with branches mixing up. Also, next step will be hosting images.
I’m working on an architectural 3D design where you can upload your floor plan and edit it. Currently I did the Homepage and I’m working on being able to upload your floor plan.