Tell the Tale
A visual storytelling web app that turns a short prompt into a multi-scene illustrated picture book — text and image generated together, with human-in-the-loop editing and a rubric-driven evaluation pipeline.
The live product — turn a prompt into an illustrated, multi-scene story.
From a one-line prompt to a picture book
Tell the Tale is a visual storytelling web app built for HGSE’s T567: Becoming AI Literate for the Future of Education — a two-week J-Term where every concept had to land in a real system by the end of each class day. The product takes a short story seed (a topic, a tone, an audience age) and returns a multi-scene illustrated narrative: text and image generated together, laid out like a scrollable picture book, with a human in the loop at every scene.
The build was a no-code project on top of Lovable, with a structured-output evaluation rubric, a multimodal pipeline, and an agentic scene-planning loop. What shipped is less a finished consumer product and more a working demonstration that AI literacy is built by shipping — each syllabus topic (prompting, evaluation, RAG, multimodal, agents, robustness, human-in-the-loop) became a concrete, testable part of the system.
What shipped in two weeks
A deployed Lovable app at tellthetale.lovable.app — prompt in, picture book out, in under a minute per story.
Prompting, evaluation, RAG, multimodal, agents, robustness, and human-in-the-loop — each became a working part of the system.
From v0.1 on Day 1 to a Gallery Walk–ready system on Day 10, with a visible evolution track in the progress deck.
Text and image generated and checked together, scene by scene, with a regenerate-and-revise loop under human control.
My Role
Sole builder. Concept, prompt design, no-code system architecture on Lovable, multimodal pipeline, evaluation rubric, and the day-to-day decisions about what to keep, what to cut, and what to retry. T567 was a group course, but the project ship was individual.
Tell the Tale, running
The product is a Lovable-built web app that turns a short story prompt into a multi-scene visual narrative — generated text interleaved with generated imagery, scrolling like a picture book. The full live build is embedded below.
How the system turns a prompt into a picture book
The product is not a single prompt. It is a small pipeline: plan the scenes, draft the text, generate the image, check alignment, and let the reader fix what the model got wrong.
Story plan, not just a prompt
The user writes a short seed (a topic, a tone, an age range). The system first generates a structured scene plan — a list of scenes, each with a beat, a setting, and a visual direction. Structured outputs (JSON) mean the plan is inspectable, editable, and testable before any image is generated.
Text and image, generated together
For each scene, the system drafts the passage and the image prompt in parallel, then renders the illustration. The image prompt is grounded in the scene’s setting and characters, not in a free-form caption, so the generated image stays aligned with the text.
Rubric-driven check, then a re-roll
A small evaluation pass scores each scene on narrative coherence, image–text alignment, and age appropriateness. If a scene falls below the threshold on any axis, the system re-rolls the image with a tighter prompt — or surfaces a warning so the human reader can decide.
The human is the editor
Every scene has regenerate, rewrite, and tone controls. The reader can fix a passage, swap an illustration, or change the whole arc. The system never publishes a story without a human pass — the AI is the first draft, the reader is the author.
What I shipped, mapped to the course
HGSE T567 — Becoming AI Literate for the Future of Education — was a two-week J-Term where every concept had to land in a real system by the end of the day. The map below shows which syllabus skill each part of Tell the Tale came from.
Prompting & foundations
The whole product is a prompt. Story seed, tone, and audience are the first three controls — and the rest of the system is shaped by how those prompts are structured and tested.
Evaluation mindset
I built a rubric that scores each generated scene on narrative coherence, image-text alignment, and age appropriateness. Manual test cases first, then structured outputs so the rubric could be automated.
RAG (knowledge grounding)
Stories can be grounded in a chosen world — folktales, a historical period, a science topic. The system retrieves reference material so generated scenes stay accurate to the chosen context.
Multimodal inputs & outputs
Text-out and image-out per scene, plus an optional voice-narration pass. A child or a teacher can also upload a drawing as a visual seed for a scene.
Agentic workflows
A scene is not one call. The system plans the scenes, drafts the text, generates the image, then checks the image against the text and re-generates if the alignment is weak. Think → Act → Observe.
Robustness & error handling
Falls back to a text-only scene when image generation fails, retries with a stricter prompt when the first image breaks the age-rating, and validates every output against the rubric before showing it.
Human-in-the-loop
Every scene has a regenerate button, a tone slider, and a "rewrite this passage" affordance. The teacher or parent is the final reviewer — the AI never publishes a story without a human pass.
The full story, artifact by artifact
Three artifacts carry the project: the progress deck (how the idea evolved across the 10-day build), the final presentation (the polished pitch to the class), and a short demo video (the product in motion). Each is embedded below so the page itself tells the story.
From v0.1 to the Gallery Walk
The working deck I used to track the build day by day — prompts I tried, scenes I cut, multimodal interactions I added, and the final system evaluation.
Open slides →Picture books, generated
The final class presentation — the problem, the system design, the prompt and multimodal pipeline, the evaluation rubric, and what I learned about AI literacy from shipping the product.
Open presentation →A 90-second walkthrough
The product in action — a single prompt becomes a multi-scene illustrated story, with editable scenes, regenerated imagery, and a readable picture-book layout.
Open video →What I learned about AI literacy by shipping
T567 framed AI literacy as a practice, not a reading list. Tell the Tale is what that looked like for me: ten days, seven techniques, one working system.
- Evaluation is the real product. The moment I had a rubric, the system got better faster. Without it, every change felt random; with it, I could tell whether a new prompt was an improvement or a regression.
- Multimodal is harder than it looks. A great image with a mediocre caption is a worse story than a mediocre image with a great caption. The system has to score the pair, not the parts.
- Agents are a debugging surface. Think → Act → Observe loops are powerful, but every loop is a place for a hallucination or a tool error to land. Robustness and human-in-the-loop are not optional — they are the loop.
- No-code changes the cadence. Lovable let me try a new prompt structure at 11pm and have a working version by 11:20pm. That speed is what made the iterative evaluation possible.
- AI literacy is built by shipping. I learned more about prompting, RAG, and agents by wiring them into a product than I would have by reading about them. The course design — every concept ships the same day — is the right design.