Echoes

An enchanted AI biography builder that transforms life stories into an interactive living scroll, preserving legacies through magical storytelling and immersive visualization.

Comment

Inspiration

I was inspired by the fading art of oral storytelling and the desire to preserve family histories in a way that feels tangible and emotional rather than digital and sterile. I wanted to combine the nostalgia of ancient manuscripts and scrapbooks with modern Generative AI and WebGL to create a "Memory Palace" where users don't just store data, but experience their legacy as a living artifact. The concept of a "Royal Biographer" emerged from my love for fantasy aesthetics and the belief that every person's life story deserves to be treated with elegance and reverence.

What it does

Echoes is an interactive web application that acts as a personal archivist. I built it to allow users to share memories via text, voice, images, and videos through a conversational interface with an AI "Royal Biographer." The system processes these raw inputs and weaves them into elegant, structured narratives. These stories are then visualized on a dynamic 3D Living Scroll—a parchment-like timeline where memories appear as polaroids, stickers, and handwritten notes. I also implemented a Full-Screen Scrapbook Editor, allowing users to manually arrange their memories on an infinite canvas, creating a personalized digital heirloom that can be exported or shared.

How we built it

I architected Echoes as a full-stack application leveraging cutting-edge AI and 3D web technologies:

  • Frontend: I used Next.js 14 with TypeScript for the core framework, Tailwind CSS for styling, and React Three Fiber (R3F) to build the interactive 3D Living Scroll and particle systems. I implemented react-rnd for the free-form drag-and-drop scrapbook editor.
  • Backend: I built a FastAPI server in Python to handle async operations. I integrated DeepSeek-R1 via Replicate API to power the "Royal Biographer" persona, enabling streaming chat responses and narrative structuring without the high costs of proprietary models.
  • Database & Storage: I utilized AWS DynamoDB (On-Demand) for scalable, serverless storage of biography structures and AWS S3 for secure media hosting with presigned URLs.
  • AI Integration: I engineered a dual-stream AI pipeline: one for real-time conversational streaming (SSE) and another for batch narrative generation that formats raw chat logs into structured JSON for the 3D visualization.

Challenges we ran into

  • 3D Texture Rendering: I struggled with mapping dynamic HTML/CSS content onto a 3D cylinder geometry in Three.js. Text appeared blurry and images didn't align correctly. I solved this by implementing a high-resolution offscreen Canvas texture generator that redraws on every state change and applies proper DPI scaling.
  • Streaming Latency: Integrating DeepSeek-R1 via Replicate introduced latency in the chat stream. I optimized this by implementing Server-Sent Events (SSE) with a custom parser and adding optimistic UI updates so the interface felt instant even while waiting for tokens.
  • State Synchronization: Keeping the chat history, 3D scroll preview, and scrapbook editor in sync was complex. I built a centralized Zustand store with debounced auto-saving to ensure no memory was lost during rapid interactions.
  • Aesthetic Consistency: Achieving the "magical artifact" look required extensive custom CSS and shader work. Standard UI libraries looked too modern, so I wrote custom Tailwind plugins and GLSL shaders for gold metallic effects and parchment textures.

Accomplishments that we're proud of

  • I successfully created a fully functional 3D Living Scroll that updates in real-time based on AI-generated narratives, bridging the gap between LLM text output and spatial visualization.
  • I built a unique "Scrapbook Editor" mode that allows non-technical users to curate their own legacy layout, transforming the app from a passive viewer into an active creative tool.
  • I integrated DeepSeek-R1 effectively to create a distinct "Royal Biographer" persona that maintains character consistency across long conversations, proving that open-weight models can deliver premium user experiences.
  • I deployed a production-ready full-stack architecture on Vercel and Render with AWS infrastructure, ensuring the app is scalable and secure within a hackathon timeframe.

What we learned

  • I learned that spatial interfaces significantly increase emotional engagement with personal data; seeing a memory as a physical object on a scroll feels different than reading it in a list.
  • I gained deep expertise in hybrid AI workflows, understanding when to use streaming for conversation versus batch processing for structured content generation.
  • I discovered the importance of texture mapping optimization in WebGL; rendering text on 3D surfaces requires careful management of canvas resolution and update cycles to maintain performance.
  • I learned that aesthetic cohesion is a technical challenge; maintaining a consistent "magical" theme across 2D UI, 3D scenes, and AI outputs required a unified design system and strict component guidelines.

What's next for Echoes

  • Multi-User Collaboration: I plan to add family sharing features where multiple users can contribute to the same timeline, merging their perspectives into a single legacy.
  • Voice Cloning & Audio Memories: I want to integrate voice synthesis so the "Royal Biographer" can read stories aloud in a custom voice, and allow users to upload audio clips that visualize as soundwaves on the scroll.
  • AR Legacy Viewing: I intend to use WebXR to let users project their Living Scroll into their physical space using AR, turning their phone into a window into their family history.
  • Physical Book Export: I aim to partner with print-on-demand services to offer high-quality printed versions of the digital scroll, bridging the digital-physical divide completely.

Built With

Share this project:

Updates