A lightweight, single-file web application that uses Google Gemini AI to extract and validate retail data from photos of packaged food.
- Multimodal Extraction: Extracts Mfg Date, Expiry Date, MRP, and Unit Sale Price from image URLs.
- Automatic Logic Validation: Detects and corrects swapped dates (e.g., if Mfg Date is listed after Expiry Date).
- Expiry Countdown: Automatically calculates days remaining until expiry and flags expired items in red.
- Minimalist Design: Built with vanilla HTML/JavaScript and CSS—no complex build tools required.
- A Google Gemini API Key. You can get one for free at Google AI Studio.
- A modern web browser (Chrome, Edge, or Safari).
- Download the Code: Save the
index.htmlfile to your computer. - Open in Browser: Double-click the file to open it in your preferred browser.
- Enter API Key: Paste your Gemini API key into the top input field.
- Provide Image URL: Paste a direct URL to an image of a food package (e.g., from an e-commerce site or Imgur).
- Extract: Click the "Extract & Validate Data" button.
The application is a single-file "Serverless" web app. Here are the three main technical pillars:
-
Multimodal Processing: Instead of traditional OCR (which often fails on curved or glossy packaging), it uses Gemini 2.5 Flash. The AI "looks" at the image and understands the context—distinguishing between a Manufacturing Date and an Expiry Date even if they aren't labeled clearly.
-
Logic Guardrails (Date Swapping): AI can sometimes misalign labels and dates. The script includes a logical check: if (dateMfg > dateExp). If the AI claims it was made after it expired, the code automatically swaps them back to ensure data integrity.
-
Real-time Validation: The script calculates the difference between today and the expiry_date. It uses CSS classes (.expired and .fresh) to give the user immediate visual feedback on whether the product is safe to use.
This application uses the fetch() API to grab images from URLs. Many websites block direct access to their images (CORS policy).
- For local testing: Use images from open sources like GitHub or Imgur.
- For production: In a real-world scenario, you would route these requests through a proxy server to bypass CORS restrictions.
- Model:
gemini-2.5-flash - Tech Stack: HTML5, CSS3, JavaScript (ES Modules)
- API:
@google/generative-aiSDK via ESM
Developed as a utility for smart shopping and pantry management.