Echo — Voice Mind Map

Speak your thoughts aloud and watch them become a living constellation of ideas. Echo transforms voice into a beautiful, breathing mind map powered by AI.

What it does

1. Record — Press the mic and speak your thoughts freely
2. Transcribe — Your speech is transcribed in real-time
3. Analyze — Claude extracts discrete ideas, clusters them by theme, and discovers hidden connections
4. Visualize — Ideas appear as glowing nodes in a D3 force-directed graph, grouped into ethereal clusters
5. Listen — Click any node to hear it read back with spatial audio (HRTF) based on its position

Tech Stack

Frontend:

• Vanilla JS (no framework)
• D3.js — Force-directed graph with cluster hulls, breathing animation
• Web Audio API — Spatial audio (HRTF panning), waveform visualization
• Canvas — Background particle system
• MediaRecorder API — Browser audio capture

Backend:

• FastAPI (Python)
• Anthropic Claude — Idea extraction, clustering, connection discovery
• ElevenLabs Scribe — Speech-to-text transcription
• Gemini TTS — Text-to-speech synthesis

Setup

Prerequisites

• Python 3.10+
• An Anthropic API key

Backend

pip install -r requirements.txt
export ANTHROPIC_API_KEY=your_key_here
python api_server.py

The server runs on http://localhost:8000.

Frontend

Serve the frontend files with any static server. The JS files expect the API at __PORT_8000__ — for local development, replace this with http://localhost:8000 in app.js and audio.js.

Note: The transcribe_audio.py and generate_audio.py modules use pplx.python.sdks.llm_api, a Perplexity-internal SDK for transcription and TTS. To run outside the Perplexity sandbox, you'll need to replace these with direct API calls to ElevenLabs and Google Gemini respectively.

Project Structure

index.html          — Main HTML shell
base.css            — CSS reset & foundation
style.css           — Visual design (dark theme, animations)
app.js              — App logic, mic toggle, recording flow
audio.js            — MediaRecorder, spatial audio, TTS, API calls
graph.js            — D3 force graph, clusters, breathing animation
particles.js        — Canvas background particle system
api_server.py       — FastAPI backend
transcribe_audio.py — Speech-to-text helper
generate_audio.py   — TTS helper

License

MIT

---

Created with Perplexity Computer