LabelLens

LabelLens is an AI-powered food label scanner that helps users decide whether a product fits their dietary needs (allergies, dietary preferences, and medical/health goals). Users save their preferences once, then upload a product/ingredient label image to get a personalized safety analysis and a history of past scans.

Key Features

• Personalized preferences: store allergies, dietary preferences, medical conditions, and health goals per user.
• Image-based scanning: drop/upload an image and receive extracted product info + ingredients.
• Conflict detection: ingredients are checked against saved preferences and flagged by severity.
• Nutrition + alternatives: estimates basic nutrition and suggests safer alternatives.
• History: view past scans and drill into prior results.

Tech Stack

• Frontend: React, TypeScript, TailwindCSS, Vite, Axios, React Router
• Backend: Python, FastAPI, Uvicorn, Pillow
• Auth/DB: Supabase (Auth + Postgres)
• AI: Google Gemini API (google-generativeai)

Repo Structure

backend/   # FastAPI API + Gemini pipeline + Supabase integration
frontend/  # React UI (Vite) + Supabase Auth client

How it Works (High Level)

The backend runs a 3-stage pipeline:

1. Vision analysis: extract product name/brand/ingredients from the image using Gemini.
2. Conflict analysis: compare ingredients against user preferences and mark the product safe/unsafe.
3. Nutrition & alternatives: estimate nutrition and suggest 2–3 alternatives; alternatives are cached by an ingredient hash.

One way to think about “risk” is a weighted sum of detected conflicts:

[ R = \sum_{i=1}^{n} w_i \cdot \mathbf{1}[\text{conflict}_i] ]

Requirements

• Node.js (recommended: 18+)
• Python (recommended: 3.10+)
• A Supabase project (URL + keys)
• A Gemini API key

Environment Variables

Backend (backend/.env)

Create backend/.env:

SUPABASE_URL="https://YOUR_PROJECT.supabase.co"
SUPABASE_SERVICE_KEY="YOUR_SUPABASE_SERVICE_ROLE_KEY"
GEMINI_API_KEY="YOUR_GEMINI_KEY"

Notes:

• SUPABASE_SERVICE_KEY is used server-side; do not expose it in the frontend.

Frontend (frontend/.env)

Create frontend/.env:

# Backend base URL (FastAPI)
VITE_API_URL="http://localhost:8000"

# Supabase (client-side)
VITE_SUPABASE_URL="https://YOUR_PROJECT.supabase.co"
VITE_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"

Local Development

Backend (FastAPI)

cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

Health checks:

• GET / → “LabelLens API is running”
• GET /health → { "status": "healthy" }

Frontend (React)

cd frontend
npm install
npm run dev

Open the Vite dev server URL shown in your terminal (typically http://localhost:5173).

API Overview

Base URL (local): http://localhost:8000

Users

• POST /users/ — create user + preferences
• GET /users/{user_id} — fetch user + preferences
• PUT /users/{user_id} — update preferences

Scanning

• POST /scan — scan a base64 image ({ image, user_id })
• POST /scan/upload — scan via multipart form upload (file, user_id)
• GET /scan/{scan_id} — fetch a scan by id

History

• GET /history/{user_id}?limit=50 — list scans (most recent first)
• GET /history/{user_id}/{scan_id} — get full detail for a specific scan

Supabase Data Model (Expected Tables)

The backend reads/writes these tables:

• users
  • user_id (string)
  • preferences (json)
  • created_at (string/timestamp)
  • updated_at (string/timestamp)
• scans
  • user_id (string)
  • product_name (string)
  • brand (string nullable)
  • safe (boolean)
  • conflicts (json array)
  • alternatives (json array)
  • nutrition (json)
  • timestamp (string/timestamp)
• cached_alternatives
  • ingredient_hash (string)
  • alternatives (json array)
  • created_at (string/timestamp)

Troubleshooting

CORS issues (common in deployment)

The backend currently uses permissive CORS settings. In real deployments, CORS can still fail depending on browser rules and whether credentials/cookies are involved.

If you see CORS errors:

• Set allow_origins to your exact frontend domain(s) (e.g., https://your-app.vercel.app) instead of ["*"].
• If you need credentials, avoid wildcard origins and ensure the frontend request includes credentials consistently.
• Verify preflight (OPTIONS) requests succeed and that the backend returns the expected Access-Control-* headers.

Frontend can’t reach backend

• Confirm VITE_API_URL points to your backend (local: http://localhost:8000).
• Confirm your backend is actually running on port 8000.

Deployment Notes

• Frontend: Vercel (typical)
• Backend: Railway (typical)

Make sure to:

• Configure environment variables in both platforms.
• Update VITE_API_URL to the deployed backend URL.
• Configure CORS origins to include the deployed frontend domain.

Built With

Python, TypeScript, JavaScript, HTML, CSS, FastAPI, React, TailwindCSS, Supabase, Gemini API