Maach Buddy

• 

  how the recipes look like

• 

  what the results along with your picture look like

START

💡 Inspiration

South Asian fish markets offer incredible variety, but identifying species and knowing how to cook them can be challenging for home cooks. We wanted to bridge this gap by creating a tool that not only identifies fish but also provides practical cooking guidance through AI-generated recipes.

🎯 What it does

Maach Buddy takes a fish image and returns:

Species identification with confidence scores for 22 South Asian fish types A custom recipe generated by an AI language model (Qwen2.5-0.5B-Instruct) Visual confidence bars showing prediction probabilities

The app makes fish identification accessible to anyone with a smartphone camera, helping people make informed decisions at markets and cook unfamiliar species confidently.

🏗️ How we built it

Backend (Wasef's work):

FastAI for fish recognition model training Hugging Face Transformers for LLM integration Qwen2.5-0.5B-Instruct for recipe generation with 4-bit quantization Gradio for API deployment on Hugging Face Spaces

Frontend (Sahil's work):

Pure HTML/CSS/JS with ES6 modules (no frameworks) Gradio Client library for API integration with JS Responsive design with gradient animations and progress bars GitHub Pages deployment for free hosting The division of labor let us work in parallel - backend model training while I built the web interface.

🚧 Challenges we ran into

API Response Format: Gradio's Label component returns nested objects, not flat key-value pairs. Took multiple iterations to parse predictions correctly and avoid NaN values. LLM Memory Constraints: Had to implement 4-bit quantization to run the recipe generation model without running out of memory. Tight Deadline: Built the entire web app in under one hour, requiring rapid prototyping and minimal testing time. CORS & CDN Issues: Finding a stable CDN for Gradio Client that worked with ES6 modules took trial and error.

🏆 Accomplishments that we're proud of

We could have just settled for Gradio, but we didn't. While Gradio provides a perfectly functional interface, we pushed ourselves to:

Build a custom web frontend from scratch as a learning exercise Deploy on GitHub Pages to make it accessible without Hugging Face Space limitations Create a polished, production-ready UI with animations and responsive design Complete the frontend in one hour under pressure

This extra effort gave us hands-on experience with API integration, deployment workflows, and real-world web development constraints.

📚 What we learned

API Integration: How to work with Gradio's JavaScript client and parse ML model outputs Rapid Development: Building functional UIs quickly under time constraints Model Deployment: Hosting ML models on Hugging Face Spaces and connecting frontends LLM Optimization: Quantization techniques to run language models efficiently Collaboration: Splitting fullstack work between backend/frontend developers effectively

🔮 What's next for Maach Buddy

Expanded Species Database: Add fish from other regions (Mediterranean, Atlantic, Pacific) Nutritional Information: Display calories, protein, omega-3 content per species Recipe Customization: Let users specify cuisine style, dietary restrictions, cooking method Offline Mode: Cache model for local inference using TensorFlow.js Mobile App: Native iOS/Android versions with camera integration Community Features: User-submitted photos, recipe ratings, cooking tips Multi-language Support: Recipes in Bengali, Hindi, Tamil for South Asian users

END

Built With

• css
• fastai
• github
• gradio
• html
• javascript
• python
• qwen