The latest articles on Forem by Nolan Dinh (@dinh_ngocphuc_fb6532918e). https://forem.com/dinh_ngocphuc_fb6532918e https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3095407%2F5ded1feb-9ac0-4118-ae13-6c172a804abc.png https://forem.com/dinh_ngocphuc_fb6532918e en Nolan Dinh Sat, 05 Jul 2025 09:46:17 +0000 https://forem.com/dinh_ngocphuc_fb6532918e/design-your-dream-room-with-ai-my-app-built-with-google-ai-studio-1naa https://forem.com/dinh_ngocphuc_fb6532918e/design-your-dream-room-with-ai-my-app-built-with-google-ai-studio-1naa <p><em>This post is my submission for <a href="https://dev.to/deved/build-apps-with-google-ai-studio">DEV Education Track: Build Apps with Google AI Studio</a>.</em></p> <h2> What I Built </h2> <p>I set out to build an AI-powered interior design app that generates realistic room images based on user inputs like room type, style, color theme, and special features. I used Google AI Studio with Imagen for image generation, Gemini for collecting user data, and built the frontend with React, TypeScript, and Tailwind CSS; additional features include image download, share options, and a history of generated results.</p> <p>Here is the prompt I used in Google AI Studio:</p> <blockquote> <p>Create a React + TypeScript + TailwindCSS app that generates realistic interior design images using Google Imagen based on user-selected room type, style, color theme, and optional features, with Gemini-assisted input, image download, sharing options, and generation history.</p> </blockquote> <h2> Demo </h2> <p><a href="https://github.com/phucdinhh/interior-designer-ai" rel="noopener noreferrer">Github URL</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8kp33a6vktkjkedw7v2l.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8kp33a6vktkjkedw7v2l.png" alt=" " width="800" height="465"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxu9ko5syug4wutkadn6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftxu9ko5syug4wutkadn6.png" alt=" " width="800" height="468"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhzswpwu79ci76m7dark.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhzswpwu79ci76m7dark.png" alt=" " width="800" height="466"></a></p> <h2> My Experience </h2> <p>Working through the track, I learned how to effectively integrate Google’s AI tools—Imagen and Gemini—into a real-world application, especially how prompt design directly impacts the quality of generated images. I was surprised by how smoothly Gemini handled structured data collection and how Imagen could generate visually compelling results with just a few key parameters, making complex design generation accessible with minimal user input.</p> deved learngoogleaistudio ai gemini