πŸŒŒπŸ”­πŸ€πŸ€– SoulScape with Gemini: Unveiling the Cosmos Within Your Emotions βœ¨πŸ’«

πŸŒŒπŸ”­πŸ€πŸ€– SoulScape with Gemini: Unveiling the Cosmos Within Your Emotions βœ¨πŸ’«


This post is my submission for DEV Education Track: Build Apps with Google AI Studio.



What I Built



My app I set out to build

I wanted to experiment with Gemini’s Imagen feature to generate dynamic backgrounds, then I remembered the many hours I once spent hard‑coding 80+ weather images for a side project 😭. That blend of image magic and personal storytelling sparked SoulScape QuoteCanvas: an app that asks users for their current state of mind, guides them through a short reflection, and then produces a touching, relevant quoteβ€―+β€―image combo that feels crafted just for them πŸ’žπŸ’˜.



My main/first prompt

🌱: β€œYou are an AI mood mapper. Take the user’s input and:  
1. Ask the user how they’re feeling in a few words.  
2. Generate a brief, uplifting quote based on their response.  
3. Create a simple image description featuring a friendly robot mascot.  
4. Choose colors and visual elements that reflect their mood.  
5. Combine the quote and image into a shareable card format.
Enter fullscreen mode

Exit fullscreen mode



Features I used

  • Imagen for high‑quality, symbolic visuals
  • Gemini Build to wire up the prompt β†’ app generation in minutes
  • Three‑stage AI Personas (poet + concept artist + positivity therapist) for depth and consistency
  • React & TypeScript for a responsive, modern SPA
  • Tailwind CSS for a clean, accessible design



🎬 Demo



πŸ“Έ Screenshots

Landing page with a galaxy backdrop and friendly robot icon guiding the user to begin.

The five-step reflective form, each question fading in to set a calm, focused tone.

Final quoteβ€―+β€―image output: a tiny robot at a crossroads with dawn-kissed skies and the poetic affirmation.




πŸ”— Live Link

Or dive in live, upload your resume or start fresh:

Check it out here:- πŸ‘‡(checkout the image)

Description




My Experience



My Key takeaways

  • Structured Prompts Create Safety: Guiding users through a CBT‑inspired questionnaire built trust and kept them focused.
  • Persona‑Driven AI Yields Cohesion: Splitting β€œpoet” and β€œconcept artist” roles gave the app a consistent voice and vision.
  • User Experience Matters as Much as Models: Thoughtful animations, loading messages, and layout turned technical magic into an emotional journey.



My learnings

  • AI as Director, Not Just Creator: Using Gemini to craft image prompts before handing them off to Imagen resulted in visuals rich with metaphor, something a single-step pipeline couldn’t match.
  • Empathy by Design: Small UI details (fading questions, loader text) can transform wait time into a moment of calm anticipation.
  • Rapid Prototyping with Gemini Build: I spun up a fully deployed, interactive app in under an hour, the proof that text‑to‑app workflows are game‑changing for developers.



What was surprising to me

I found that using clear guidelines (tiny robot mascot, ethereal style, three‑phrase loader) actually helped the Gemini Build agent stay on track, resulting in outputs that felt both cohesive and personal.




Final Thoughts

SoulScape QuoteCanvas taught me that building with AI isn’t just about models and data, but rather it’s about crafting experiences that honor the user’s journey. By combining reflective prompts, persona‑driven AI, and a soothing UI, I created a space where vulnerability becomes art.

I can’t wait to see what you build with Build Apps with Google AI Studio, whether it’s a mindfulness canvas, a recipe helper, or something entirely new. Your next idea could spark someone’s own constellation of strength.

Ready to turn your prompts into powerful, empathetic apps? Let’s build together and earn that Gemini Builder badge!

Thank you for your successful journey from that quiet ache to the first spark of joy, SoulScape was built just for this moment: an app that holds your hand through every shade of feeling, turning your vulnerability into light. πŸŒ‘πŸŒšβž‘οΈπŸŒ›πŸŒβœ¨πŸ’›

cute girl gif



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *