Gemma Pizza - Food Analysis Web App

Gemma Pizza is an AI-powered Web Application that analyzes food images directly in your browser. By leveraging the state-of-the-art Gemma 4 E2B multimodal model via Transformers.js, this application runs entirely on-device to estimate calories, identify food names, and list key ingredients.

Features

• 100% On-Device Processing: No data is sent to external servers. Your food photos are analyzed locally using Web Workers, WebGPU, and WebAssembly.
• Multimodal AI: Uses onnx-community/gemma-4-E2B-it-ONNX to natively process images and output natural language analysis.
• Webcam Support: Instantly take a picture of your food using your MacBook's camera.
• Drag & Drop / Upload: Easily upload existing food photos from your device.
• Premium UI: Sleek, glassmorphism-inspired dark mode interface.
• Real-time Streaming: Watch the AI analyze and type out the ingredients and calories in real-time without freezing the UI.

---

Installation & Setup

This project is built with React, TypeScript, and Vite.

1. Clone or Navigate to the project folder:

   cd /Users/jaichang/Desktop/gemma_pizza
   

2. Install Dependencies:

   npm install
   

3. Run Development Server:

   npm run dev
   

   This command will start the Vite dev server. Open your browser and navigate to http://localhost:5173 to view the application.

4. Build for Production:

   npm run build
   

   This compiles the React code and outputs the final optimized files into the dist/ directory, ready to be deployed to Vercel, Netlify, or GitHub Pages.

---

Usage

1. First-Time Setup: When you open the page, the application will automatically start downloading the Gemma-4-E2B model weights via the Web Worker. This is a one-time download (a few gigabytes) and is saved directly to your browser's local cache. Wait for the progress bar to complete and the "Model ready!" status to appear.
2. Take or Upload a Photo:
   • Click the upload area to select a photo from your computer.
   • Or click Open Web Camera, allow the camera permissions, and capture your food live!
3. Click Analyze Food and wait for the AI to stream back the food's name, estimated calories, and ingredient list.

---

Technical Stack

• Model: onnx-community/gemma-4-E2B-it-ONNX
• Inference Engine: @huggingface/transformers (v3 API)
• Frontend: React 18, Vite, TypeScript, Vanilla CSS
• Architecture: Single Page Application (SPA) with Web Workers