FoodVision Frontend

This directory contains the frontend code for the FoodVision app.

Structure

• index.html: Main HTML template
• app.js: Frontend JavaScript logic
• style.css: Additional custom styles

Features

• Camera integration for taking food photos
• File upload for existing food images
• Real-time food analysis with AI
• Food entry history display
• Calorie tracking and statistics

Technologies Used

• HTMX for AJAX requests and DOM updates
• Mustache for client-side templating
• Chart.js for data visualization
• Tailwind CSS for styling

How It Works

1. The user can either take a photo using their device camera or upload an existing image
2. The image is sent to the backend for analysis
3. The AI analyzes the image and returns information about the food
4. The results are displayed to the user
5. The entry is saved to the database for future reference
6. Statistics and history are updated automatically