Aura - AI Acoustic Perception System

Inspiration

Over 1.5 billion people worldwide experience some degree of hearing loss, making it challenging to stay aware of critical household sounds. Missing an alert like a smoke alarm, a baby crying, or a doorbell can pose severe safety risks. Aura was created to bridge this gap by transforming everyday environmental sounds into immediate, accessible visual feedback.

What it does

Aura is an AI-powered acoustic perception system that classifies real-time environmental audio signals and visualizes them on a sleek, intuitive dashboard.

• Signal Classification: Instantly detects critical sounds like Fire Sirens, Doorbells, and Infant Distress.
• Confidence Scoring: Calculates and displays AI accuracy metrics for every detected audio pattern.
• Tone Analysis: Analyzes audio pitch and urgency to deliver emotional context (e.g., Urgent / High Pitch vs. Calm / Ambient).
• Dynamic Spectrogram: Renders a real-time sound frequency visualizer for multi-sensory awareness.

How we built it

• Framework: Built with Next.js (App Router) for fast rendering and high performance.
• Styling: Custom glassmorphic UI using Tailwind CSS with smooth CSS animations.
• UI & Components: Developed with TypeScript for safety and Lucide React for icons.
• Acoustic Engine Logic: Configured dynamic status management (statusConfig) to transition UI theme colors and pulse states based on detected sound events.

Challenges we ran into

• Hydration Mismatches: Resolving SSR/Client rendering discrepancies caused by dynamic mathematical height calculations (Math.sin) in the spectrogram visualizer.
• UI Responsiveness: Ensuring high-contrast accessibility while maintaining a modern, commercial-grade dark-mode aesthetic.

Accomplishments that we're proud of

• Designed and shipped a fully functional, sleek, and accessible dashboard within the hackathon timeframe.
• Created a seamless sound simulation engine to easily test sound state transitions without physical hardware limitations.

What we learned

• Best practices for handling Next.js hydration issues with dynamically calculated visual UI components and how to design intuitive visual interfaces specifically tailored for accessibility and assistive technology users.

What's next for Aura

• Connecting Web Audio API for continuous background ambient sound streaming.
• Integrating WebSocket triggers to send immediate alerts to smartwatches and smartphones.
• Training custom micro-ML models to classify unique household sounds.

Built With

• css3
• github
• html5
• javascript
• lucideicons
• next.js
• react
• tailwindcss
• typesript