💡 Inspiration Lumina AI was inspired by the common struggle of language learners and professionals who want to improve their writing without the constant disruption of switching between a chat app and a grammar checker. We wanted to create a "best of both worlds" experience: a friendly companion who keeps the conversation moving while silently acting as a professional editor in the background.
✨ What it does Lumina AI is a highly immersive, responsive web application that provides a real-time chat interface powered by Gemini 2.5 Flash.
Intelligent Conversing: It understands and responds to complex queries naturally. Proactive Editing: Every user message is analyzed. If an error is found, the bot provides a non-intrusive "Grammar Fix" section highlighting the correct syntax. Dynamic Customization: Users can switch between three distinct premium themes (Neon Nebula, Midnight Onyx, and Emerald Forest) to suit their environment and mood. 🛠️ How we built it The project was built using a focus on high-performance web standards and state-of-the-art AI:
Frontend: Vanilla HTML5 and CSS3 (utilizing custom variables for the theme system and @keyframes for the fluid background animations). Logic: Pure JavaScript (ES6+) with fetch to communicate with the Google Generative AI API. AI Engine: Integrated the Gemini 2.5 Flash model with custom system prompts to force structured JSON responses for consistent UI parsing. Design: Implemented Glassmorphism and a custom "lerped" cursor engine for a premium, high-end feel. 🚧 Challenges we ran into The biggest hurdle was API Versioning and Model Availability. As AI models evolve rapidly, we had to navigate multiple versions (v1 vs v1beta) and handle unexpected deprecations of older model aliases. Another challenge was ensuring that the AI strictly followed a JSON-only response format to avoid breaking the UI, which we solved by refining the instruction prompts and implementing robust fallback parsing logic.
🏆 Accomplishments that we're proud of Aesthetic Fluidity: We successfully built a UI that feels "alive" with moving background blobs and smooth cursor effects without sacrificing performance. The Correction Engine: Creating a prompt that allows the AI to be both a conversationalist and a teacher simultaneously. Theme Engineering: Building a CSS variable-based system that allows for instant, seamless color shifts across the entire application. 🧠 What we learned We learned deep lessons about the importance of flexible API integration and how to gracefully handle "hallucinations" or formatting errors from large language models. We also explored the power of Vanilla CSS, proving that you don't always need heavy frameworks to create a modern, stunning user interface.
🚀 What's next for Lumina AI Voice Integration: Implementing Web Speech API to allow users to talk to Lumina and receive spoken grammar feedback. Document Mode: A dedicated space where users can paste long essays for "Deep Scan" grammar auditing. User Profiles: Allowing users to save their "Grammar Growth" history to track common mistakes over time. Multi-Language Support: Expanding beyond English to help users fix grammar in Spanish, French, Japanese, and more.
Log in or sign up for Devpost to join the conversation.