-
-
The primary goal was to allow users to connect their audio devices seamlessly. As shown in your interface bot show more user-friendly
-
his stage is successfully launching the YouTube music component, serving as the foundation for the broader "Vibe Hub" experience.
-
By using a "Launch" button, the app bypasses browser pop-up blockers that previously prevented the secondary site from appearing.
-
Each question provides three distinct option allowing the AI to build a comprehensive "Mood Profile" rather than guess from single sentence.
-
. This project introduces a dedicated login screen featuring a sleek, dark-themed UI that matches the Spotify aesthetic.
Inspiration
I wanted to build a tool that doesn't just ask "What do you want to hear?" but instead understands how you feel. Inspired by the sleek, dark aesthetic of Spotify, MoodStream was born to bridge the gap between emotional state and music discovery without the need for manual searching.
What it does
MoodStream is an offline-first AI companion that curates your musical vibe through conversation. Instead of browsing endless playlists, users answer a series of 4–5 intuitive questions.
How we built it
The app is built as a Progressive Web App (PWA) for true offline capability. Frontend: Crafted with a "Spotify-inspired" dark theme using CSS Flexbox and custom properties. Logic: JavaScript-based state machine handles the multi-step questionnaire. AI/ML: We utilized Transformers.js to run a DistilBERT emotion detection model entirely in the browser. Persistence: Implemented a Service Worker to cache the ML model weights and app assets, ensuring it works without an internet connection after the first load.
Challenges we ran into
The biggest hurdle was Service Worker path management on GitHub Pages. Moving from a local environment to a sub-directory required a deep dive into relative vs. absolute paths to ensure the UI icons and scripts loaded correctly. We also faced limitations with the Web Bluetooth API; while we initially wanted to automate headphone connections, we learned that browser security protocols prioritize user privacy, leading us to pivot toward a smoother "pairing guide" approach.
Accomplishments that we're proud of
Successfully running a heavy NLP model on the client side without a backend server. Achieving a 100% responsive, high-end dark mode UI that feels like a native mobile app. Building a search-generation logic that eliminates the "404 Not Found" errors common with hardcoded music links.
What we learned
We gained significant experience in the PWA lifecycle, specifically how to manage large asset caching (ML models) via Service Workers. We also learned that in UX design, sometimes a "smart search" (YouTube) is more robust and user-friendly than a "direct link" (Spotify), as it provides fresher content and fewer broken paths.
What's next for MoodStream
We plan to implement the Web Audio API to visualize the music's frequency directly in the chat bubbles. We are also looking into "Vibe History," using IndexedDB to let users see how their mood trends have changed over a week of listening.
Log in or sign up for Devpost to join the conversation.