Life Canvas

Life Canvas uses AI to instantly transform your cherished memories into a breathtaking, interactive web timeline. Turn your life's journey into a beautiful masterpiece you can share with everyone.

Comment

Inspiration

We capture thousands of photos and videos throughout our lives, but many of these meaningful moments eventually become buried in camera rolls, cloud storage, and social media feeds. We wanted to create something more meaningful than another place to store files. Life Canvas was inspired by the idea of turning scattered memories into a story that people can experience, preserve, and share. Our vision is to help individuals, families, couples, businesses, schools, nonprofits, and communities document the journeys and milestones that matter to them. Whether it is a child's childhood, a family's history, someone's personal journey, or an organization's growth, Life Canvas turns individual moments into a connected visual story.

What it does

Life Canvas uses AI to transform memories into beautiful, interactive timelines. Users can upload photos, videos, and information about important moments, and Life Canvas organizes them chronologically into an engaging digital timeline. Instead of simply displaying uploaded files, the AI generates thoughtful, context-aware reflections that help bring each memory to life. Users can explore their story by year and important milestones and share their finished timeline with others. The platform is designed to support many types of stories—from personal and family memories to organizational histories, school milestones, community events, and other meaningful journeys.

How we built it

Drawing on a familiar serverless architecture, we built the backend entirely on Firebase (Cloud Functions, Firestore, and Cloud Storage).

The core engine is driven by the Google Gen AI SDK utilizing gemini-2.5-flash. Instead of a standard single-prompt generation, we designed a multi-turn, autonomous Agent loop. The Agent is equipped with two custom tools:

  1. fetch_user_memories: Retrieves and chronologically sorts the user's Firestore memory data.
  2. validate_canvas_code: A strict self-reflection tool that parses the generated raw HTML to ensure all visual constraints are met.

Once the Agent successfully generates and validates the code, the payload is saved directly to Firebase Cloud Storage, returning a public URL to the user. User subscriptions and tier limits are managed securely via Stripe webhooks and Checkout/Portal sessions.

Challenges we ran into

The biggest hurdle was ensuring the LLM strictly adhered to precise UI and logic constraints. Early iterations would often hallucinate class names, use "Age" instead of the required "Year: YYYY" chapter headers, or "forget" to include the required FontAwesome scripts and social icons (X, Facebook, Instagram) in the share modal.

Relying on a single prompt wasn't enough. We had to engineer a strict validation pipeline. By creating the validate_canvas_code tool, we forced the LLM into a bounded loop. If the model outputs code missing a specific fa-brands icon or fails the "Year" vs "Age" check, the function throws an exact error back to the model, forcing a correction before the canvas is finalized.

Accomplishments that we're proud of

We are proud of the self-correcting AI loop. Building an agent that writes frontend code (HTML, CSS, Vanilla JS) is one thing, but building an agent that tests its own code against a strict rubric before delivering it to the user ensures a near-zero failure rate in the UI.

By bounding the agent to a maximum of t = 5 iterations, where P(v) is the probability of a valid output on a single turn, we exponentially increased the cumulative probability of a flawless generation:

P(Success) = 1 - (1 - P(v))^t

This probabilistic approach to prompt engineering guarantees high-fidelity glassmorphism designs without breaking the app's rendering logic.

What we learned

We learned that when using LLMs for deterministic code generation, providing the model with a "compiler-like" feedback loop is significantly more effective than simply expanding the system instructions. Giving the AI the ability to dynamically fetch database records (fetch_user_memories) and test its own output fundamentally shifted the architecture from a standard "chatbot" wrapper to a true autonomous micro-developer.

What's next for Life Canvas

The next step is expanding the canvas customization options. We plan to introduce varied UI themes (beyond the midnight glassmorphism) that the AI can dynamically select based on the emotional tone of the user's memories. Additionally, we aim to integrate OAuth so users can publish their AI-generated milestones directly to their social feeds without leaving the Life Canvas environment.

Built With

Share this project:

Updates