LoveTales

LoveTales

Comment

LoveTales AI 📖❤️

LoveTales AI is an interactive storytelling platform that turns your relationship memories into personalized, illustrated storybooks using the power of Google's Gemini models.

Inspiration

We wanted to move beyond generic greeting cards and photo albums. The inspiration behind LoveTales came from the desire to give people a way to immortalize their unique love stories—whether for anniversaries, weddings, or just because. We envisioned a tool where technology acts as a bard, weaving personal anecdotes into a cohesive narrative artfully illustrated to look like a published book.

What it does

LoveTales AI is a web application that guides users through a simple wizard to create a custom storybook:

  1. Character Creation: Users input details about themselves and their partner (names, appearance, pronouns) to ensure the AI knows who the stars of the story are.
  2. Story Crafting: Users provide an occasion (e.g., "5th Anniversary"), key memories, and a desired "vibe" (e.g., Romantic, Funny, Whimsical).
  3. Style Selection: Users choose an artistic style for the illustrations, such as Watercolor, Disney 3D, or Studio Ghibli style.
  4. AI Generation:
    • It generates a 5-chapter story with a coherent narrative arc.
    • It creates consistent, high-quality illustrations for the cover and every chapter.
    • It offers lifelike audio narration for a "read-to-me" experience.
  5. Consumption & Export: Users can flip through their digital book, listen to the story, and export it as a formatted PDF for printing.

How we built it

The application is built with a modern frontend stack and deeply integrated with the Google Gemini API:

  • Frontend: React (v19) with TypeScript for a robust UI, styled with Tailwind CSS for a beautiful, responsive design.
  • AI Models (via @google/genai):
    • Gemini 3 Flash: Used for the core logic—generating the story structure, chapters, and detailed image prompts in a strict JSON format.
    • Gemini 2.5 Flash Image: Used to generate the cover art and chapter illustrations based on the detailed prompts created by the text model.
    • Gemini 2.5 Flash TTS: Powering the "Listen" feature to narrate the story with high-quality, lifelike speech.
  • PDF Generation: Used jspdf to programmatically render the text and images into a downloadable A4 PDF format.
  • State Management: Implemented a background generation queue in React to allow users to start reading the text immediately while heavy assets (images/audio) generate asynchronously.

Challenges we ran into

  • Character Consistency: AI image generators often struggle to keep characters looking the same across different scenes. We solved this by programmatically injecting specific physical descriptions (hair color, eye color, etc.) into every single image prompt generated by the text model.
  • Asset Latency: Generating 6 images and audio for a full story takes time. We had to architect the app to decouple the "Reading" view from the "Generation" process, allowing images to pop in as they complete without blocking the user interface.
  • Strict JSON Output: Getting a Large Language Model to output complex, nested JSON for story chapters reliably was a challenge. We utilized Gemini's responseSchema and responseMimeType configuration to enforce strict output structures.

Accomplishments that we're proud of

  • The "Magic" Factor: The moment the cover image loads and the story title appears feels genuinely magical.
  • Seamless Multimodal Experience: We successfully combined text, image, and audio generation into a single, cohesive interface that doesn't feel like a tech demo, but a finished product.
  • Real-time PDF Export: Generating a print-ready PDF entirely on the client side that includes dynamic text layout and AI-generated imagery.

What we learned

  • Prompt Engineering is Key: The quality of the output is directly tied to how well we describe the task to Gemini. separating the "Story Writer" persona from the "Art Director" persona within the prompt yielded the best results.
  • Gemini's Versatility: Using a single SDK (@google/genai) to handle text, images, and audio simplified our architecture significantly compared to stitching together APIs from different providers.

What's next for LoveTales

  • Physical Book Ordering: We have a "Coming Soon" placeholder for ordering a hardcover version. We plan to integrate with a print-on-demand API to ship real books to users.
  • Editor Mode: Allowing users to tweak the text or request a "re-roll" on specific images they aren't perfectly happy with.
  • Multi-language Support: enabling users to generate stories in their native languages to share with family members across the world.

Built With

Share this project:

Updates