<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: sana</title>
    <description>The latest articles on Forem by sana (@sanarahman).</description>
    <link>https://forem.com/sanarahman</link>
    <image>
      <url>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%2F2672875%2F48126c14-cdb9-4a8f-b9c0-ef3ef1621dca.png</url>
      <title>Forem: sana</title>
      <link>https://forem.com/sanarahman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sanarahman"/>
    <language>en</language>
    <item>
      <title>Hidden Realms: AI-Powered Find the Hidden Objects Game</title>
      <dc:creator>sana</dc:creator>
      <pubDate>Mon, 15 Sep 2025 03:21:19 +0000</pubDate>
      <link>https://forem.com/sanarahman/hidden-realms-ai-powered-find-the-hidden-objects-game-jod</link>
      <guid>https://forem.com/sanarahman/hidden-realms-ai-powered-find-the-hidden-objects-game-jod</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/google-ai-studio-2025-09-03"&gt;Google AI Studio Multimodal Challenge&lt;/a&gt;&lt;/em&gt;  &lt;/p&gt;

&lt;h2&gt;
  
  
  🎮 What I Built
&lt;/h2&gt;

&lt;p&gt;What if you could create your &lt;strong&gt;own hidden-object game&lt;/strong&gt; choose the art style, design the scene, and even decide how the clues are delivered? 🎮✨  &lt;/p&gt;

&lt;p&gt;That’s exactly what I built entirely with &lt;strong&gt;Google AI Studio&lt;/strong&gt; for the Multimodal Challenge: a game called &lt;em&gt;Hidden Realms&lt;/em&gt; where the &lt;strong&gt;player is also the creator&lt;/strong&gt;. Without writing code at that 😱&lt;/p&gt;

&lt;p&gt;Unlike traditional hidden object games that come pre-packaged with a limited number of scenes, art styles, and objects, &lt;strong&gt;Hidden Realms gives full creative control to the player&lt;/strong&gt;.  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Want a &lt;strong&gt;mystical forest&lt;/strong&gt; in watercolor? ✅
&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;sci-fi spaceship interior&lt;/strong&gt; in cyberpunk neon? ✅
&lt;/li&gt;
&lt;li&gt;Or even a &lt;strong&gt;simple dining hall in oil-painting style&lt;/strong&gt;? ✅
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With this applet, the &lt;strong&gt;player becomes the creator&lt;/strong&gt;, customizing the scene, environment, and art style before diving into the hidden-object challenge.  &lt;/p&gt;

&lt;p&gt;This idea came from my 13-year-old sister, who loves hidden-object games but was frustrated that she had to download multiple versions just to enjoy different art styles or scenes. She imagined a game where &lt;strong&gt;players control both the look and the experience&lt;/strong&gt; and Hidden Realms brings that vision to life.  &lt;/p&gt;




&lt;h2&gt;
  
  
  🎥 Demo
&lt;/h2&gt;

&lt;p&gt;Watch the gameplay demo here:&lt;br&gt;&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/Eq9e1yako8E"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;a href="https://hidden-realms-scene-generator-751274810520.us-west1.run.app/" rel="noopener noreferrer"&gt;Try out your imagination&lt;/a&gt; : It isn't just fun to watch its more fun to play.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Watercolor art mystical library&lt;br&gt;
&lt;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%2Fx1p98mztjng8fyaw3av5.jpg" class="article-body-image-wrapper"&gt;&lt;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%2Fx1p98mztjng8fyaw3av5.jpg" alt="Hidden realm pixel art"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pixel art Dinning Room&lt;br&gt;
&lt;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%2Fwe9g2hawiplg8ntpcj1u.png" class="article-body-image-wrapper"&gt;&lt;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%2Fwe9g2hawiplg8ntpcj1u.png" alt="watercolor art"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Realistic Modern Room &lt;br&gt;
&lt;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%2Fshuepie9tchxj41i7g9k.png" class="article-body-image-wrapper"&gt;&lt;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%2Fshuepie9tchxj41i7g9k.png" alt="Realistic Art Image"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SteamPunk MysteryRoom&lt;br&gt;
&lt;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%2Fhsq5md5psnoaaq7m9gyn.png" class="article-body-image-wrapper"&gt;&lt;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%2Fhsq5md5psnoaaq7m9gyn.png" alt=" "&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;not just these consider making your own imaginative world to wonder around and play with&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  How I Used Google AI Studio
&lt;/h2&gt;

&lt;p&gt;I leveraged &lt;strong&gt;Google AI Studio&lt;/strong&gt; to build &lt;em&gt;Hidden Realms&lt;/em&gt;. Here’s how I used it:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Scene Generation with Imagen 4.0&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Transformed text prompts like &lt;em&gt;"A mystical library inside a giant tree"&lt;/em&gt; into rich, high-quality visual scenes.
&lt;/li&gt;
&lt;li&gt;Created immersive game boards instantly, without manual artwork.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Object Detection &amp;amp; Hint Creation with Gemini 2.5 Flash&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyzed the generated scene to detect hidden objects.
&lt;/li&gt;
&lt;li&gt;Generated creative hints for each object.
&lt;/li&gt;
&lt;li&gt;Provided precise coordinates in structured JSON, enabling automatic game logic.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Speech Hints using Browser Web Speech API&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Converted the AI-generated hints into spoken audio for a dynamic, interactive experience.
&lt;/li&gt;
&lt;li&gt;Enhanced immersion and accessibility for players.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Build Studio &amp;amp; One-Click Deployment&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The entire codebase was generated automatically using &lt;strong&gt;Google AI Studio’s Build feature&lt;/strong&gt;, so I didn’t have to write any manual code.
&lt;/li&gt;
&lt;li&gt;Deployment was completed in &lt;strong&gt;one click&lt;/strong&gt; using the Studio’s deploy feature, launching the application on &lt;strong&gt;Cloud Run&lt;/strong&gt; instantly.
&lt;/li&gt;
&lt;li&gt;This seamless workflow allowed the game to run online immediately, without complex setup or configuration.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;

&lt;h2&gt;
  
  
  Multimodal Features
&lt;/h2&gt;

&lt;p&gt;The app’s &lt;strong&gt;multimodal AI capabilities&lt;/strong&gt; make the game smart, interactive, and engaging:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Text → Image (Scene Generation)&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Imagen 4.0 turns written descriptions into detailed, immersive game worlds.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Image + Text → JSON (Object Detection &amp;amp; Clues)&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Gemini 2.5 Flash identifies objects, names them, creates playful hints, and provides bounding boxes.
&lt;/li&gt;
&lt;li&gt;Converts static images into fully interactive game boards automatically.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Text → Audio (Speech Hints)&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Browser reads AI-generated hints aloud using Web Speech API.
&lt;/li&gt;
&lt;li&gt;Adds an audio layer that enhances accessibility and engagement.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Seamless Multimodal Integration&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Combines vision, language, and structured data to create a game that feels alive.
&lt;/li&gt;
&lt;li&gt;Players enjoy a rich experience with visually stunning scenes, intelligent object recognition, and interactive audio guidance.
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;&lt;strong&gt;Effortless Build &amp;amp; Deployment&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Using &lt;strong&gt;Build Studio&lt;/strong&gt;, all code was auto-generated by the coding assistant.
&lt;/li&gt;
&lt;li&gt;One-click deployment via Google AI Studio ensures the application runs on &lt;strong&gt;Cloud Run&lt;/strong&gt; instantly, making it easy to share and play anywhere.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  🚀 Why It’s Different
&lt;/h2&gt;

&lt;p&gt;Traditional hidden object games are:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fixed in style 🎨
&lt;/li&gt;
&lt;li&gt;Limited in number of scenes 🌍
&lt;/li&gt;
&lt;li&gt;Pre-defined in difficulty ⚖️
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Hidden Realms breaks those boundaries&lt;/strong&gt;:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Infinite scenes, environments, and styles to explore.
&lt;/li&gt;
&lt;li&gt;Player-driven imagination as the game’s core.
&lt;/li&gt;
&lt;li&gt;Dynamic difficulty based on hints and object placement.&lt;/li&gt;
&lt;li&gt;Unlike most game projects that take time to configure, package, and deploy, Hidden Realms was live in &lt;strong&gt;seconds&lt;/strong&gt; thanks to Cloud Run. That means faster iteration, easier sharing, and almost no friction in testing new features.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This makes the game endlessly replayable and &lt;strong&gt;tailored to each player’s creativity&lt;/strong&gt;.  &lt;/p&gt;




&lt;h2&gt;
  
  
  🔮 Future Enhancements
&lt;/h2&gt;

&lt;p&gt;Looking ahead, here are some exciting ways AI could push this further:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🕹️ &lt;strong&gt;Adaptive Difficulty&lt;/strong&gt; → AI could adjust difficulty based on player performance.
&lt;/li&gt;
&lt;li&gt;🌐 &lt;strong&gt;Multiplayer Mode&lt;/strong&gt; → Challenge friends to find objects in the same generated world.
&lt;/li&gt;
&lt;li&gt;📱 &lt;strong&gt;Cross-Device Play&lt;/strong&gt; → Extend gameplay seamlessly across mobile, VR, and AR.
&lt;/li&gt;
&lt;li&gt;🎭 &lt;strong&gt;Character Integration&lt;/strong&gt; → Add NPCs generated by AI to provide interactive clues.
&lt;/li&gt;
&lt;li&gt;🧠 &lt;strong&gt;Personalized Narratives&lt;/strong&gt; → AI weaves a storyline around the hidden-object gameplay for RPG-like immersion.
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🕹️ AI + Gaming: A New Era
&lt;/h2&gt;

&lt;p&gt;Hidden Realms is just one example of how &lt;strong&gt;AI can transform gaming&lt;/strong&gt;. Beyond just automation and tools, AI is enabling &lt;strong&gt;creative co-design&lt;/strong&gt;, where &lt;strong&gt;players become creators&lt;/strong&gt;.  &lt;/p&gt;

&lt;p&gt;I believe AI will reshape the future of gaming by:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Enabling &lt;strong&gt;infinite replayability&lt;/strong&gt; through procedural + AI generation.
&lt;/li&gt;
&lt;li&gt;Supporting &lt;strong&gt;personalized gaming experiences&lt;/strong&gt; where every player’s journey is unique.
&lt;/li&gt;
&lt;li&gt;Lowering the barrier to &lt;strong&gt;game development&lt;/strong&gt;, so anyone can imagine and play their own creations.
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  ✨ Final Thoughts
&lt;/h2&gt;

&lt;p&gt;What started as my sister’s simple wish—&lt;strong&gt;“Why can’t I choose my own scenes and art styles in hidden object games?”&lt;/strong&gt;—turned into a working applet built in less than a day using &lt;strong&gt;Google AI Studio&lt;/strong&gt;.  &lt;/p&gt;

&lt;p&gt;This project demonstrates how &lt;strong&gt;accessible, powerful, and fast&lt;/strong&gt; AI game development has become. And it’s only the beginning!  &lt;/p&gt;




&lt;p&gt;I would really like to thank &lt;strong&gt;Google AI Studio&lt;/strong&gt; for providing such an amazing platform where apps can be built and deployed without writing a single line of code. I would definitely suggest to try Google Ai Studio, and bring your imagine to life.&lt;/p&gt;

&lt;p&gt;And a big thanks to the &lt;strong&gt;Google AI Studio Multimodal Challenge&lt;/strong&gt; for giving me the opportunity to try something so imaginative and bring it to life. 🚀.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>googleaichallenge</category>
      <category>ai</category>
      <category>gemini</category>
    </item>
    <item>
      <title>TubeForge - From Video to Knowledge: AI-Powered Notes, Blogs, and Quizzes Instantly</title>
      <dc:creator>sana</dc:creator>
      <pubDate>Wed, 10 Sep 2025 23:31:40 +0000</pubDate>
      <link>https://forem.com/sanarahman/tubeforge-from-video-to-knowledge-ai-powered-notes-blogs-and-quizzes-instantly-4bmc</link>
      <guid>https://forem.com/sanarahman/tubeforge-from-video-to-knowledge-ai-powered-notes-blogs-and-quizzes-instantly-4bmc</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/google-ai-studio-2025-09-03"&gt;Google AI Studio Multimodal Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built TubeForge, a multimodal applet that transforms any YouTube video into structured, interactive content.&lt;br&gt;
With just a URL, the app automatically generates either:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Study Notes → Professionally formatted, textbook-style markdown notes with hierarchical headings, flowcharts, diagrams, tables, and highlighted key terms. It also allows learners to generate quizzes for self-testing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Blog Posts → Polished, ready-to-publish articles with a strong hook, clear structure, and SEO-friendly formatting. The app automatically generates cover images, inline visuals, and shareable social media posts (LinkedIn + Twitter) to promote the blog.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This solves the challenge of turning raw video content into usable knowledge products. Whether for studying, content creation, or social media amplification.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://tubeforge-751274810520.us-west1.run.app/" rel="noopener noreferrer"&gt;Link To Demo&lt;/a&gt;&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/88OPrr-c7jQ"&gt;
  &lt;/iframe&gt;
&lt;br&gt;
&lt;a href="https://youtu.be/88OPrr-c7jQ" rel="noopener noreferrer"&gt;Watch Tubeforge Demo on YouTube&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;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%2Fuib44n6oo70wo6dvam53.png" class="article-body-image-wrapper"&gt;&lt;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%2Fuib44n6oo70wo6dvam53.png" alt="TubeForge"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;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%2Frdrx8unrpfgbqa38cw1p.png" class="article-body-image-wrapper"&gt;&lt;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%2Frdrx8unrpfgbqa38cw1p.png" alt="Google Ai studio"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;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%2Fm3xl5x2vwzi7ubbskilm.png" class="article-body-image-wrapper"&gt;&lt;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%2Fm3xl5x2vwzi7ubbskilm.png" alt="Ai video analyzer"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Used Google AI Studio
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. 💬 Chat Module First&lt;/strong&gt;&lt;br&gt;
I started by explaining my entire idea in Google AI Studio’s chat. I described the design, the number of inputs, the type of outputs, the formatting rules, and even what to avoid. The chat module crafted a complete project document with suggestions and API integration details.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. 🏗️ Build Feature Magic&lt;/strong&gt;&lt;br&gt;
I fed that document into the build feature, and it spun up a first version of my application — already styled and functional. It was surprisingly close to perfect from the start.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. 🎨 Tweaks &amp;amp; Styling&lt;/strong&gt;&lt;br&gt;
All I really changed were some colors and tiny UI details. The content flow was already set up by the chat design, so only minimal adjustments were needed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4.🛠️ Coding Assistant on Demand&lt;/strong&gt; &lt;br&gt;
Whenever I wanted a tweak (“move this button,” “adjust this logic”), the coding assistant instantly made the changes. No manual wiring, no headaches.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. 🚀 Deployment in One Click&lt;/strong&gt;&lt;br&gt;
Finally, I hit the Deploy to Cloud Run button. Within minutes, my app was live, no Docker setup, no configs. Google AI Studio handled everything.&lt;/p&gt;

&lt;h2&gt;
  
  
  Multimodal Features
&lt;/h2&gt;

&lt;p&gt;YouTube Forge combines multiple modalities and APIs into one cohesive experience:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Video Understanding:&lt;/strong&gt;  &lt;em&gt;Gemini 2.5 Flash&lt;/em&gt; processes YouTube videos directly and extracts structured knowledge.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Image Generation:&lt;/strong&gt;  &lt;em&gt;Gemini and Imagen&lt;/em&gt; generated prompts create flowcharts, diagrams, and infographics for study notes.&lt;/p&gt;

&lt;p&gt;Blog posts get a stunning header image + relevant inline visuals via &lt;em&gt;Imagen.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Text + Media Fusion:&lt;/strong&gt; Markdown output with embedded base64 images for seamless visuals in notes and blogs.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Quiz Generation:&lt;/strong&gt; Automatic creation of multiple-choice and short-answer quizzes for self-assessment with &lt;em&gt;Gemini 2.5 Flash&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Social Media Posts:&lt;/strong&gt; &lt;em&gt;Gemini generates&lt;/em&gt; ready-to-use LinkedIn and Twitter posts with hashtags and hooks.&lt;/p&gt;

&lt;p&gt;By combining video, text, and images, the app creates a richer learning and publishing experience.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;✨Building this was surprisingly smooth—the AI Studio assistant + Cloud Run integration made it feel like I had a full dev team working with me.&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>devchallenge</category>
      <category>googleaichallenge</category>
      <category>ai</category>
      <category>gemini</category>
    </item>
    <item>
      <title>"Pixie", End-to-End Voice-Driven Website Builder (n8n + Bright Data) — AI Agents Challenge submission</title>
      <dc:creator>sana</dc:creator>
      <pubDate>Mon, 01 Sep 2025 01:16:14 +0000</pubDate>
      <link>https://forem.com/sanarahman/ai-agents-challenge-submission-pixie-end-to-end-voice-driven-website-builder-n8n-bright-d3l</link>
      <guid>https://forem.com/sanarahman/ai-agents-challenge-submission-pixie-end-to-end-voice-driven-website-builder-n8n-bright-d3l</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/brightdata-n8n-2025-08-13"&gt;AI Agents Challenge powered by n8n and Bright Data&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Pixie&lt;/strong&gt;, A fully automated voice-driven website redesign pipeline that accepts a spoken or typed requirement, scrapes the target site, generates a structured Product Requirements Document (PRD), and automatically creates or updates a prototype website on Lovable.dev, then emails the result to the user. &lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/1ZJU-guI7Tw"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  n8n Workflow
&lt;/h3&gt;

&lt;p&gt;I’m attaching the full n8n workflow JSON export &lt;a href="https://gist.github.com/SanaRahman/75585a02f6fd9f5ad6e908270b19e6c1" rel="noopener noreferrer"&gt;View full n8n workflow on GitHub Gist&lt;/a&gt; so the judges can review and even run it themselves. This single file contains the entire end-to-end pipeline — from the webhook trigger to Bright Data scraping, AI agent, Lovable automation, and Gmail updates.&lt;/p&gt;

&lt;p&gt;To make it easier to visualize, I’ve also added a few screenshots below:&lt;/p&gt;

&lt;p&gt;Workflow overview — all nodes in one view.&lt;br&gt;
&lt;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%2Fp9jczfp0ttvnsfe1q0t3.png" class="article-body-image-wrapper"&gt;&lt;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%2Fp9jczfp0ttvnsfe1q0t3.png" alt="n-8-n workflow"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Bright Data node — showing how it’s configured with Web Unlocker.&lt;br&gt;
&lt;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%2Fsnocbmz5y50elgsbo6sq.png" class="article-body-image-wrapper"&gt;&lt;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%2Fsnocbmz5y50elgsbo6sq.png" alt="BrightData node"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;AI Agent — showing how the PRD is passed into Lovable and message for the Voice Agent.&lt;br&gt;
&lt;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%2Fl35hlpmf5i3iqpbrsudq.png" class="article-body-image-wrapper"&gt;&lt;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%2Fl35hlpmf5i3iqpbrsudq.png" alt="AI Agent"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Technical Implementation
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Voice input — User speaks requirements via ElevenLabs, which passes the transcript into an n8n webhook.&lt;/li&gt;
&lt;li&gt;Extract URL — A code node pulls out the target website URL and design instructions from the user’s request.&lt;/li&gt;
&lt;li&gt;Scrape the Website — Bright Data Verified Node fetches the site’s HTML reliably, handling geo/anti-bot restrictions with Web Unlocker.&lt;/li&gt;
&lt;li&gt;Extract HTML Elements — A parsing node structures the raw HTML into JSON (headings, images, meta tags, tables, and links).&lt;/li&gt;
&lt;li&gt;Merge — User design ideas are combined with the structured website data.&lt;/li&gt;
&lt;li&gt;AI Agent — A LangChain-powered agent generates a detailed PRD using both inputs, then forwards it to the Website Maker. It is explicitly instructed to 
(1) create the PRD
(2) call the Website Maker
(3) provide webhook progress updates.&lt;/li&gt;
&lt;li&gt;Website Maker: Uses Airtop commands to control Lovable.dev:

&lt;ol&gt;
&lt;li&gt;opens a session 
2.submits the PRD
3.polls until the project URL with a valid project ID is retrieved
On success or failure, it sends both an email and a webhook update&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Bright Data Verified Node
&lt;/h3&gt;

&lt;p&gt;Bright Data was used to reliably fetch the target website HTML in the Scrape the Website step. With web_unlocker1 and country=us, it ensured accurate rendering and avoided client-side blocking. The scraped HTML was then parsed in Extract HTML Elements to build the structured payload for PRD generation.&lt;br&gt;
What I found really helpful is that Bright Data can be used in many ways, as it works seamlessly for any custom URL.&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Problem Solved:&lt;/strong&gt;&lt;br&gt;
Building websites is usually slow and full of back-and-forth. With my pipeline, I turn a simple idea or voice instruction into a live prototype in just a few agent calls—speeding up web design like never before&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Challenges &amp;amp; Solutions:&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Reliable HTML extraction: Bright Data + Web Unclocker handled even custom sites effortlessly, their databases cover Amazon, Facebook, and more.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Deterministic automation: Strict agent system prompts (PRD → website_maker → webhook → URL extraction) keep flows predictable&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Learnings:&lt;/strong&gt;
Agent is super easy: just give the URL and changes perfect for frontend prototyping with customers. I tried something new and it works smoothly!!!!
Thanks to n8n &amp;amp; Bright Data, automation is now faster, reliable, and accessible. &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>devchallenge</category>
      <category>n8nbrightdatachallenge</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
