Bubli

Inspiration

In today’s digital age, the environment we spend the most time in is not physical but virtual. From working to socializing, our screens have become our constant companions. Yet, the virtual spaces we interact with are often static, and they don’t reflect our evolving emotional needs. We wanted to change that with Bubli. Our mission is to provide a safe, reflective, and engaging space where individuals can feel accompanied and understood. Bubli isn’t just about interacting with a screen; it’s about creating a virtual friend who can adapt to your mood, ask you thought-provoking questions, and create a calming environment that feels truly personal.

What it does

Bubli generates interactive and customizable UI components based on your current mood. Whether you're feeling joyful or introspective, Bubli’s interface adapts to reflect your state of mind. It combines soothing visuals with carefully curated music, creating a serene and immersive space for self-reflection. At the heart of Bubli is a unique virtual time capsule where users can reflect on daily prompts and store their thoughts like an online diary. These entries become a personal archive, allowing you to look back on your emotional journey.

How we built it

We built Bubli using a combination of React for dynamic front-end rendering and Express.js for backend processing. The LLaMA model is integrated via OpenRouter’s API, enabling AI-driven generation of both the UI components and reflective questions. TailwindCSS provides fluid, responsive styling that allows the interface to change according to the user's emotional input. We also incorporated calming background music tailored to the user’s mood to create a peaceful environment for introspection.

Challenges we ran into

Building a space that dynamically reflects both emotional and functional needs was challenging. We had to ensure that the AI model could interpret moods and generate corresponding UI elements while maintaining a cohesive design. Managing state in React, especially when dealing with live AI-generated updates, presented performance and rendering issues that we overcame through optimization.

Accomplishments that we're proud of

We are incredibly proud of the way Bubli dynamically adapts the UI based on user moods, creating a space that feels truly alive. The integration of reflective prompts adds a layer of emotional depth, allowing users to engage in daily self-reflection. Our virtual time capsule concept turned out better than we imagined, giving users a digital space to record and revisit their emotional journey over time.

What we learned

Throughout this project, we learned the complexities of merging AI-driven interfaces with user-generated content. We deepened our understanding of how AI can be used not just to automate tasks, but to create meaningful, personalized experiences. Additionally, this project taught us about the importance of smooth transitions in dynamic UI design, especially when responding to real-time inputs from an AI system.

What's next for Bubli

Our vision for Bubli doesn’t stop here. In the future, we plan to expand the emotional range of the AI model, allowing it to recognize and respond to a wider spectrum of human feelings. We’ll also integrate more multimedia elements, including animations and soundscapes, to create an even richer sensory experience. Additionally, we aim to build deeper insights into the reflective prompts, allowing users to track emotional patterns over time and reflect on their growth.

Built With

• fastapi
• firebase
• mongodb
• natural-language-processing
• sdk-ai
• three.js
• vite.js