NutriPulse AI: Multimodal Wellness

• 

  NutriPulse AI

Inspiration

Millions of people struggle to track their nutrition consistently because traditional apps are full of friction , they require tedious manual entry, offer generic advice, and often lock data behind subscriptions. We wanted to build something that felt like magic: an app where you simply show your food to the camera, and an intelligent AI logs it instantly. We were inspired by the power of multimodal AI and wanted to prove that a high-end, completely secure wellness platform could be built entirely on the client side without needing a heavy backend.

What it does

NutriPulse AI is a secure, client-side intelligent wellness coach. Personalized Science:Onboarding uses your physical stats and the Harris-Benedict BMR equation to calculate precise daily calorie and macronutrient targets. Multimodal Vision Scanning: Drop a photo of your meal into the app, and DeepSeek v4 Pro instantly identifies the food, estimates portions, and logs the exact calories, protein, carbs, and fat. Interactive Analytics: Real-time HTML5 Canvas charts track your macronutrient ratios and a 7-day calorie trend bar chart. AI Nutrition Coach: A persistent sidebar assistant (powered by DeepSeek v4) that has full context of what you've eaten today and offers tailored, actionable dietary advice. Complete Privacy: The app runs entirely in your browser. All data, chat logs, and API keys are stored securely in localStorage—nothing is ever saved to a central database.

How we built it

We built NutriPulse AI focusing on maximum performance and privacy: Frontend: We used pure Semantic HTML5, CSS3 (featuring a modern monochrome glassmorphism UI), and Vanilla JavaScript (ES6+). No heavy frameworks. AI Integration: We utilized the incredibly fast Fireworks AI inference API, specifically tapping into DeepSeek v4 Pro for both our multimodal image scanning and our conversational nutrition coach. Data Visualization: We hand-coded our analytics engine using the native HTML5 Canvas 2D API to programmatically draw the macro pie charts and the 7-day trend graphs without relying on bloated external charting libraries.

Challenges we ran into

Handling base64 image encoding on the client side and structuring the multimodal API payloads correctly for DeepSeek v4 Pro was a significant hurdle. We also faced challenges managing state entirely in localStorage without a traditional database, which required us to build a robust custom state-management object in Vanilla JS to keep the charts, the food journal, and the chat history perfectly synchronized in real-time.

Accomplishments that we're proud of

We are incredibly proud of the user experience. The app feels premium, fast, and highly responsive. Getting the HTML5 Canvas charts to dynamically redraw and animate based on live AI responses—without a single page reload—feels like a massive win. We're also proud that we achieved full multimodal AI functionality while maintaining 100% user data privacy.

What we learned

We learned a lot about prompt engineering for multimodal vision models—specifically how to instruct the AI to return strictly formatted JSON data from an image so our JavaScript could parse it directly into the analytics charts. We also leveled up our skills in native Canvas drawing and CSS grid layouts.

What's next for NutriPulse AI: Multimodal Wellness

We plan to add a barcode scanner utilizing the device's native camera, implement a progressive web app (PWA) manifest so users can install it natively on their phones, and introduce multi-language support for the AI coach!

Built With

• canvas-api
• css3
• deepseek-v4
• fireworks-ai
• html5
• javascript
• localstorage