-
-
Landing Page - Introduction to EchoBridge features and mission
-
Login Page
-
Mirror Page - Testing face detection and voice input features
-
Mirror Page - Results of face detection and voice input analysis
-
Overload Page - Overload detector testing
-
Overload Page - Overload detector alert and breathing guide
-
Overload Page - Overload detector output
-
Overload Page - Generated de-escalation message for partner
-
Practice Page - Selecting partner or custom situation
-
Practice Page - Room chat
-
Practice Page - Session feedback
-
Practice Page - Session feedback
-
Settings Page
Inspiration
About one in five people is neurodivergent, according to a 2020 estimate by psychologist Nancy Doyle, and more than half of Gen Z (53%) say they identify as neurodivergent. Many of them face a hidden struggle: they can't always tell what they're feeling, and what they say often comes out wrong, even when they don't mean it to. This isn't because they don't care about others. It's a real brain-based gap called alexithymia. It affects about half of autistic people, compared to just 5% of neurotypical people, and shows up in 20 to 40% of adults with ADHD. In short, it's a communication problem, not an empathy problem.
The tools that exist today don't really work. Some are too clinical, made by therapists for therapy rather than for how people actually experience their own emotions. Others cost too much, hidden behind paywalls in therapy apps. And the rest are too basic, just mood trackers that ask "how do you feel?", which doesn't help when the real problem is not knowing the answer to that question in the first place.
We asked a simple question: What if technology could help you understand your own emotions in real time, and then help you say what you actually mean?
That question became EchoBridge.
What it does
EchoBridge is a free, browser-based tool with three core features:
1. Emotion Mirror — Combines three inputs (your words, your voice, and your facial expression) to help you understand what you are feeling. Instead of telling you "you ARE angry," it suggests: "this might feel like frustration, or maybe exhaustion." It offers alternatives, not diagnoses. For someone with alexithymia who struggles to name their own emotions, having options is far more helpful than being told.
The system calculates a combined emotion score using a weighted multi-modal approach:
$$E_{final} = w_t \cdot E_{text} + w_v \cdot E_{voice} + w_f \cdot E_{face}$$
where \(w_t = 0.4\), \(w_v = 0.25\), \(w_f = 0.35\) are weights for text, voice, and face respectively. This ensures no single modality dominates, because neurodivergent individuals often express emotions differently across channels.
If your words came out too sharp, the Mirror rewrites them in a gentler tone you can copy and send.
2. Overload Detector — Monitors your speech patterns in real time. When sentences get shorter, speech speeds up, and volume rises, those are early signs of sensory overload. The person experiencing it often cannot tell until it is too late.
The system tracks an overload risk score based on:
$$R_{overload} = \alpha \cdot \frac{V_{current}}{V_{baseline}} + \beta \cdot WPM_{ratio} + \gamma \cdot (1 - L_{sentence})$$
where \(V\) is voice volume, \(WPM\) is words per minute, and \(L_{sentence}\) is normalized sentence length. When \(R_{overload}\) crosses a threshold, the system gently intervenes and generates a ready-to-send message like: "I need a moment to process. Can we continue in two minutes?"
Because when you are overwhelmed, the last thing you can do is calmly explain that you are overwhelmed. EchoBridge does that for you.
3. Practice Mode — Lets you rehearse difficult social conversations with an AI that plays the other person (a teacher, a boss, a new friend). Social conversations have unwritten rules, and for neurodivergent youth, those rules are invisible. After each practice session, you receive structured feedback on your tone, clarity, and areas to improve. No judgment, just honest coaching.
How we built it
The architecture follows one rule: keep the sensitive stuff on the user's device. Face detection runs entirely in-browser using face-api.js, so no webcam frames ever leave the phone or laptop. Voice transcription uses the browser's built-in Web Speech API, and volume analysis runs through the Web Audio API. The only data that travels to our server is the text transcript, and only when the user explicitly asks for an emotion analysis or a gentler rewrite.
The frontend is a React app bundled with Vite, deployed on Netlify, and installable as a PWA. We spent significant time on the UI because for this user group, aesthetics are not decoration, they are accessibility. Calm earth-tone colors, smooth transitions instead of sudden changes, generous spacing, and a layout that adapts gracefully from a 27-inch monitor down to a 5-inch phone screen. The design decision we are proudest of: the app uses a sidebar navigation on desktop but automatically switches to a bottom tab bar on mobile, because reaching the top of a phone screen while holding it one-handed is a genuine barrier to use.
The backend is a Python FastAPI server on Render. It orchestrates two AI services: Groq API running Llama 3.1 for conversational AI (tone rewriting, practice conversations, overload coaching, and feedback), and HuggingFace's RoBERTa GoEmotions model for fine-grained emotion classification. We chose Llama 3.1 through Groq because it responds fast enough to feel real-time, and its conversational tone feels natural rather than clinical. RoBERTa GoEmotions gives us 28 distinct emotion labels instead of just "happy/sad/angry," which is essential when you are building for people who need nuanced emotional vocabulary, not oversimplified labels.
The real engineering challenge was the multi-modal pipeline. Three signals come in at different times and different confidence levels:
$$S_{combined} = \sum_{i=1}^{3} w_i \cdot C_i \cdot E_i$$
where \(E_i\) is the emotion signal from each modality (text, voice, face), \(C_i\) is the confidence score of that modality, and \(w_i\) is a learned weight. Text carries the heaviest weight (\(w_t = 0.4\)) because words carry the most intentional meaning. Face carries \(w_f = 0.35\) and voice carries \(w_v = 0.25\). But here is the key insight: a neurodivergent person might have a completely flat facial expression while feeling intense emotion inside. So when face confidence \(C_{face}\) is low, the system automatically redistributes weight to text and voice instead of penalizing the user for not "looking" emotional enough.
Authentication and user preferences are handled by Supabase (email, Google OAuth, and profile storage). The entire stack is free-tier friendly: Netlify for frontend, Render for backend, Supabase for auth. We wanted to prove that a genuinely useful mental health tool does not need a venture-capital budget to exist.
Challenges we ran into
Mobile microphone conflicts. On Android Chrome, the Web Speech API and getUserMedia (for volume visualization) both try to access the microphone simultaneously. Only one can win. We solved this by detecting mobile devices and skipping getUserMedia entirely on phones, letting SpeechRecognition manage its own audio pipeline. Volume visualization is desktop-only; speech recognition works everywhere.
Emotion is not binary. Early versions returned a single emotion label. Neurodivergent users told us this felt wrong, even invalidating. The real challenge was designing a system that says "this might be sadness, or maybe exhaustion, or tiredness" without being vague or unhelpful. We solved this with a weighted multi-modal score and a confidence-ranked list of alternative emotions.
Sensory-safe UI on every screen size. Building a calming interface that also works on a 5-inch phone screen was harder than expected. Dropdown menus got hidden behind navigation bars, touch targets were too small, and animations that felt smooth on desktop felt overwhelming on mobile. Every pixel had to be tested on real devices.
Accomplishments that we're proud of
The Emotion Mirror actually works in real time. You speak, and within seconds you see your emotion analyzed across three modalities with gentle, non-judgmental language.
The Overload Detector catches what the user cannot. In testing, it correctly identified escalating distress patterns before the speaker was consciously aware of them.
The entire face detection system runs in-browser with zero data sent to any server. For a user group that is already vulnerable, privacy is not a feature. It is a requirement.
EchoBridge works on laptops, mobile browsers, and can be installed as a PWA directly from the home screen. No app store, no download, no barrier.
Every feature follows one principle: suggest, don't dictate. The system never tells you what you feel. It helps you figure it out yourself.
What we learned
"Designed with, not for" is not just a slogan. When we listened to neurodivergent voices, they told us things we never would have guessed. For example: showing a single emotion label feels accusatory, not helpful. That insight changed our entire UI.
Accessibility is not a checklist. It is a way of thinking. Calm colors, gentle language, and the ability to copy-paste a message when you cannot type one yourself: these are not nice-to-haves. For this user group, they are essential.
Multi-modal AI is powerful, but only when the modalities are weighted correctly. A neurodivergent person might have a flat facial expression while feeling intense emotion inside. The system must not penalize that.
What's next for EchoBridge
- Multi-language support so neurodivergent youth worldwide can use EchoBridge in their native language.
- Session history and progress tracking so users can see how their communication confidence grows over time.
- Therapist/educator dashboard that allows trusted adults to review practice sessions (with user consent) and provide additional support.
- Offline PWA mode so the core features work without an internet connection.
- Community-driven emotion vocabulary where neurodivergent users can contribute their own emotion words and descriptions, building a dictionary that actually reflects how they experience feelings.
Built With
- css
- face-api.js
- fastapi
- groq
- huggingface
- javascript
- netlify
- pwa
- python
- react
- recharts
- render
- supabase
- vite
- web-audio-api
- web-speech-api
Log in or sign up for Devpost to join the conversation.