As a creative technologist with a background in architecture and human-computer interaction, I’ve always been fascinated by where design meets emerging technologies. My latest project, HouseID, really brings this passion to life, transforming user photos into unique architectural designs.
The Vision Behind HouseID
The concept for HouseID was born out of an idea I had for an Art+AI competition, specifically designed for a museum exhibition. The initial goal was to let museum visitors scan their faces and see them turn into buildings, hoping to make them feel more involved in how architecture is created and experienced. My collaborator, Elizabeth Christoforetti, and I further developed the concept. We aimed to challenge the traditional ‘architect-as-director’ model, and instead create a more collaborative space where the user, AI, and architect could all contribute to the design. Beyond the big picture, I’m genuinely fascinated by how unique everyone’s faces are—the cultural differences, the fashion quirks. I used to spend days drawing very precise portraits, and I got curious: can I capture that data and transform it in some way?
My first attempt involved significant manual work, translating facial features (smile, dimensions, distances, and thicknesses) into building lines using p5.js. The result was white line drawings on black backgrounds that would then get translated into an image based on Boston’s architectural townhouses with the old AI model pix2pixHD. While the journey from concept to execution was incredibly rewarding, the final buildings didn’t quite deliver the impactful results we’d hoped for—they looked almost identical, failing to capture the unique fashion sense or individual nuances.
After watching Google I/O, I was inspired by the new tools shown that could help developers like me. It felt like the right time to revisit the idea and aim for something more advanced and that can be shared digitally (not just experienced in a museum exhibit).
Left Image Reference: Andrea Piacquadio - Pexels
Why Firebase Studio?
I had experimented with different development tools, but they were consistently throwing errors when I tried to use them for mobile development. Because my goal was to create something mobile-friendly, I realized I needed some kind of backend support to handle the long prompts I was using for processing the images. That’s when I started looking for a backend coding tool, and I discovered Firebase Studio. I also really wanted to use Imagen 3 and Gemini Flash 2.5 because they gave me the best results.
The Benefits of Building with Firebase Studio
Firebase Studio really streamlined how I built HouseID. Here are some of the big advantages I found:
- Backend Support: Having Firebase Studio generate the code to handle the backend was absolutely crucial. It allowed me to process those complex images and long prompts, which made the app work smoothly on mobile – something I couldn’t do before.
- Smooth Payment Integration: Setting up the token management and payment features, including integrating Stripe, was surprisingly very smooth and I had almost zero debugging to do, which was fantastic.
- Google Login: While I initially had some hiccups with email login, getting Google login to work was successful in the end.
- Prototyper vs Code view: I found the prototyper view incredibly valuable for requesting specific features, mainly because of the immediate results and easy version reverts. The code view was also really helpful for manual tasks, like editing uploaded images or making direct code changes. I appreciated having a separate Gemini chat within the code view; it was a great guide for debugging the more hands-on work, unlike the prototyper view where Gemini handled everything behind the scenes.
- Publish Feature: Hitting that publish button and seeing it instantly become a live website with its own URL in just five minutes was pretty delightful. It became my go-to for testing things that just wouldn’t work locally, especially those Google sign-in issues I mentioned
Left Image Reference: Cihan Oğuzmetin - Pexels
Left Image Reference: Tainá Bernard - Pexels
Amazing Results
I managed to build HouseID in just a couple of weeks - the prior version took me 6 months to build and the result was far less impressive. The app is designed to be very easy to use: you upload a photo of yourself with distinct facial features or style showing (it can be of a person, or even a pet!), and the app generates a unique building that takes inspiration from the image – things like the colors, textures, and even facial features. The app also gives you a little summary of the person’s “ambiance” (like “serene, sophisticated, artistic”) and a more detailed description of the generated building. You can save the images you create and look at a gallery of past creations. Plus, I’ve got a token-based payment system in place.
I’m honestly very happy that a tool like Firebase Studio exists, especially with that crucial Gemini code generation for backend support. I think it’s an amazing tool that will unlock true innovation from people who never considered themselves developers.
Left Image Reference: Anna Tarazevich - Pexels
Recommendations for developers
- Crafting an Effective PRD: When you’re ready to build with Firebase Studio, especially when incorporating AI, think of your Product Requirements Document (PRD) as your guiding star. I’ve learned a few things that can make this process much smoother:
- Focus Your Requests: Instead of throwing everything into one giant PRD prompt, I’ve found it’s far more effective to break down your requests. Try to include one complex task and a few smaller ones in your initial list. Once that challenging task is successfully implemented, then you can move on to your next set of requests in the chat.
- Summarize Your App Upfront: Start by giving a quick, two-to-three sentence summary of what your app is all about. I discovered this is important because if you start with the user flow and explain your app too late in the prompt, the AI can misinterpret your requests. Setting the context early helps the AI understand the purpose behind your features.
- Be Explicit with AI Prompts: If your web tool or service needs to communicate with an LLM (like Gemini), make sure to spell out the exact prompt you want the AI to use within quotation marks. Leaving this out for interpretation may not give you the desired results.
- Leverage Multiple AI Assistants for Debugging: I recommend getting a second (or third, or fourth!) opinion when debugging. I used Gemini extensively—in both the prototyper view and the code view, plus a separate chat tab for out-of-context recommendations. When it came time to deploy on a custom URL, the AI assistant in the Firebase Console was incredibly helpful too. Different AI tools can offer unique insights and solutions, so it’s worth exploring them.
One final recommendation
Test out your ideas and simply enjoy the process. These tools are opening up so many incredible avenues for innovation that it’d be a missed opportunity not to jump in and experiment, even if you don’t have the “perfect business idea”.
Good luck developing your app! I’m happy to answer any more questions about my process or if you just want to talk: romysayah@gmail.com.
Try it out here: https://thehouse.id/ or build your own app with Firebase Studio!
