Inspiration
Education tools often feel stuck in the past—static text, boring interfaces, and rigid logic. We asked ourselves: "What if a calculator felt like something from a sci-fi movie?" Inspired by the immersive "Iron Man" HUD interfaces and the rapid advancement of Generative AI, we wanted to build a tool that didn't just solve problems but made the process feel magical. We wanted to bridge the gap between complex handwritten math and instant digital understanding, creating a "Joint Venture" of design and intelligence.
What it does
MathLicK is a 3D-powered AI Math Architect. a.Visual Intelligence: Users can upload a photo of any math problem (handwritten or printed). b.Smart Analysis: The system uses Google's Gemini 2.0 Flash model to "see" the image and break it down. c.Step-by-Step Solutions: It doesn't just give the answer; it explains the logic using clear LaTeX formatting. d.Immersive UI: All of this happens inside a responsive, glassmorphic 3D environment that reacts to user interaction.
How we built it
This project was a collaborative effort by Anubhav Sinha, Vivek Bharti, and Prakhar Anand. a.Frontend: We built a custom 3D engine using CSS3 Perspective and Glassmorphism to give depth to the UI. The interface features floating glass cards and neon gradients. b.AI Integration: We utilized the Google Gemini API (Model: gemini-2.0-flash-exp). This was crucial for its multimodal capabilities (processing both text and images simultaneously). c.Math Rendering: We implemented MathJax to render complex mathematical symbols dynamically and Marked.js to parse the AI's markdown responses into clean HTML. d.Logic: The core logic handles Base64 image conversion to streamline the upload process directly to the Gemini API.
Challenges we ran into
The "Glass" Aesthetic: Getting the backdrop-filter and transparency levels right so the text remained readable while maintaining the 3D depth was a significant design challenge. Prompt Engineering: We had to fine-tune the system prompt to ensure MathLicK didn't just give the answer, but provided "3 distinct methods" and used strict LaTeX formatting for clean output. Image Handling: Converting client-side images to the specific Base64 format required by the API without crashing the browser on large files took several iterations to perfect.
Accomplishments that we're proud of
a.Taming the Edge of AI: We successfully integrated the cutting-edge Gemini 2.0 Flash Experimental model. While many projects stick to older, safer models, we took the risk to use the latest tech for faster, smarter, and more multimodal responses. b.Seamless "Snap & Solve": We built a frictionless pipeline where a user can upload a raw image, have it converted to Base64, processed by AI, and returned as a beautifully formatted step-by-step guide in seconds.
What we learned
a.Multimodal is the Future: We learned that text is just one part of the equation. By working with Gemini's vision capabilities, we understood the immense potential (and slight complexity) of bridging the analog world (handwritten notes) with digital intelligence. b.Collaborative Velocity: Working as a trio (Anubhav, Vivek, Prakhar), we learned how to play to our strengths—balancing Anubhav's innovation, Vivek's architecture, and Prakhar's strategy—to ship a polished product in a short amount of time.
What's next for MathLicK
Voice Interaction: Adding speech-to-text so users can "talk" to the solver. History Mode: Saving past problems to local storage. Graphing: Integrating a graphing library to plot the functions MathLicK solves in real-time.
Log in or sign up for Devpost to join the conversation.