EchoDepict

EchoDepict gives data a voice. Our multi-agent AI turns complex information into interactive, narrated audio, unlocking insights for the visually impaired and auditory learners everywhere.

Comment

## Inspiration

In a world saturated with visual data, we saw a profound accessibility gap. For millions with visual impairments and for the vast number of auditory learners, the insights locked in charts and graphs are often out of reach. We were inspired by a simple yet powerful question: "What does data sound like?" Our motivation was to shatter the barrier of visual-only data interpretation and create a new, multi-sensory channel for understanding. EchoDepict was born from this desire to give data a voice, pioneering a more inclusive and intuitive way for anyone to connect with the stories hidden in information.

## What it does

EchoDepict is an innovative multi-agent AI system that transforms complex data and abstract concepts into rich, interactive, and narrated audio soundscapes. It's a full-stack web application that allows users to either upload structured .csv data or describe a concept in plain text.

Our system then deploys a team of three autonomous AI agents in a sophisticated workflow:

  1. The Analyzer Agent: Intelligently dissects the input to identify key trends, patterns, outliers, and thematic elements.
  2. The Composer Agent: Takes this analysis and makes autonomous, creative decisions to translate the data's structure and sentiment into a unique musical composition.
  3. The Narrator Agent: Synthesizes the analysis and the composition to generate a synchronized, human-readable script that explains the soundscape in real-time.

The result is a rich, interactive audio-visual experience where users can listen to the story in their data, making complex information intuitive, engaging, and accessible.

## How we built it

EchoDepict is built on a modern, robust technology stack designed for a seamless user experience and powerful AI processing.

  • Frontend: Next.js, React, TypeScript, and Tailwind CSS for a responsive and aesthetic UI.
  • Audio Synthesis & Visualization: We used the Web Audio API and Tone.js to handle real-time audio generation and create the dynamic "Horizon Line" visualizer on an HTML <canvas>.
  • UI Components: The interface was built using the excellent shadcn/ui component library.
  • AI Orchestration & Backend: We leveraged Firebase Genkit to define, orchestrate, and manage our multi-agent AI workflow as serverless flows.
  • AI Model: The intelligence of all three agents is powered by Google's Gemini model.
  • Deployment & Monitoring: The application is deployed on Vercel and monitored using Vercel Analytics & Speed Insights.

## Challenges we ran into

Building a multi-agent system from scratch presented significant challenges. Orchestrating the seamless flow of information from the Analyzer to the Composer and Narrator required robust error handling and precise data parsing, especially when dealing with the creative and sometimes unpredictable outputs of the LLM. Another major hurdle was the frontend performance; generating real-time audio and a synchronized canvas animation in the browser demanded careful state management and optimization to ensure a smooth, glitch-free user experience. We also overcame several browser-specific security policies related to the Web Audio API to ensure reliable playback.

## Accomplishments that we're proud of

We are incredibly proud of successfully creating a fully functional multi-agent AI system where each agent performs a distinct, autonomous role in a collaborative workflow. This architecture is a direct and powerful implementation of the hackathon's "Agentic AI" theme. Building the unique, brandable "Horizon Line" audio visualizer from scratch was a significant technical achievement that gives our project a memorable identity. Above all, we are proud to have built a tool that is not just technically innovative but also has a clear and profound potential for social good by making data more accessible.

## What we learned

This hackathon was a deep dive into the practical application of Agentic AI. We gained invaluable experience in:

  • AI Orchestration: Structuring and debugging a sequential, multi-agent workflow using Firebase Genkit.
  • Prompt Engineering: Crafting highly specific prompts for different tasks—analytical, creative, and narrative—and ensuring reliable JSON output.
  • Real-Time Frontend Development: Mastering the complexities of the Web Audio API with Tone.js and synchronizing it with a React-based UI for a seamless user experience.
  • Full-Stack Responsiveness: Building a polished and professional interface that works flawlessly across all devices.

## What's next for EchoDepict

We see a bright future for EchoDepict and have a clear roadmap for its evolution:

  • Enhanced Composer Agent: We plan to expand the Composer's musical vocabulary with a wider range of instruments, scales, and genres.
  • Caching & Performance: Implementing a caching layer for AI results will reduce API calls for identical inputs, making the platform faster and more scalable.
  • Real-Time Collaboration: We envision a feature where teams can listen to and analyze data soundscapes together in a shared, real-time environment.

Built With

Share this project:

Updates