FoodVision

AI-powered food tracking for your health journey

\n\n

Capture Food

\n \n

\n $\"Food$ \n \n

\n \n \n \n

\n \n

Calorie Trends

\n \n \n \n \n \n \n \n \n \n\n",[],[259,261],"b00ce698-1f12-11f0-a5c7-569c3dd06744","favicon.svg","b00ce756-1f12-11f0-a5c7-569c3dd06744",15,["D",1745282557191],"",[],[259,270],"daa0813a-1f12-11f0-a162-569c3dd06744","app.js","bc9bd456-1f11-11f0-8377-569c3dd06744",23,["D",1745282628619],"// FoodVision App Frontend Logic\n\ndocument.addEventListener('DOMContentLoaded', () => {\n // DOM Elements\n const startCameraBtn = document.getElementById('start-camera');\n const uploadImageBtn = document.getElementById('upload-image');\n const fileInput = document.getElementById('file-input');\n const cameraView = document.getElementById('camera-view');\n const cameraCanvas = document.getElementById('camera-canvas');\n const captureBtn = document.getElementById('capture-btn');\n const cameraOverlay = document.querySelector('.camera-overlay');\n const previewImage = document.getElementById('preview-image');\n const analysisForm = document.getElementById('analysis-form');\n const imageData = document.getElementById('image-data');\n \n // Camera stream reference\n let stream = null;\n \n // Start camera\n startCameraBtn.addEventListener('click', async () => {\n try {\n stream = await navigator.mediaDevices.getUserMedia({ \n video: { facingMode: 'environment' },\n audio: false \n });\n \n cameraView.srcObject = stream;\n cameraView.classList.remove('hidden');\n cameraOverlay.classList.remove('hidden');\n previewImage.classList.add('hidden');\n analysisForm.classList.add('hidden');\n \n // Show capture button\n captureBtn.parentElement.classList.remove('hidden');\n } catch (error) {\n console.error('Error accessing camera:', error);\n alert('Could not access camera. Please check permissions or try uploading an image instead.');\n }\n });\n \n // Capture photo\n captureBtn.addEventListener('click', () => {\n // Set canvas dimensions to match video\n cameraCanvas.width = cameraView.videoWidth;\n cameraCanvas.height = cameraView.videoHeight;\n \n // Draw video frame to canvas\n const context = cameraCanvas.getContext('2d');\n context.drawImage(cameraView, 0, 0, cameraCanvas.width, cameraCanvas.height);\n \n // Convert to data URL\n const dataUrl = cameraCanvas.toDataURL('image/jpeg');\n \n // Stop camera stream\n if (stream) {\n stream.getTracks().forEach(track => track.stop());\n stream = null;\n }\n \n // Hide camera view and show preview\n cameraView.classList.add('hidden');\n cameraOverlay.classList.add('hidden');\n previewImage.src = dataUrl;\n previewImage.classList.remove('hidden');\n \n // Prepare form data - extract base64 data without the prefix\n const base64Data = dataUrl.split(',')[1];\n prepareImageForUpload(base64Data);\n });\n \n // Handle image upload\n uploadImageBtn.addEventListener('click', () => {\n fileInput.click();\n });\n \n fileInput.addEventListener('change', (e) => {\n if (e.target.files && e.target.files[0]) {\n const file = e.target.files[0];\n const reader = new FileReader();\n \n reader.onload = (event) => {\n const dataUrl = event.target.result;\n previewImage.src = dataUrl;\n previewImage.classList.remove('hidden');\n cameraView.classList.add('hidden');\n cameraOverlay.classList.add('hidden');\n \n // Extract base64 data without the prefix\n const base64Data = dataUrl.toString().split(',')[1];\n prepareImageForUpload(base64Data);\n };\n \n reader.readAsDataURL(file);\n }\n });\n \n // Prepare image for upload\n function prepareImageForUpload(base64Data) {\n // Show the analysis form\n analysisForm.classList.remove('hidden');\n \n // Set the base64 data as a value in a hidden input\n // This is a workaround since we can't directly set files programmatically\n const dataInput = document.getElementById('image-data');\n dataInput.value = base64Data;\n }\n \n // Handle form submission response\n document.body.addEventListener('htmx:afterSwap', (event) => {\n if (event.detail.target.id === 'analysis-result') {\n try {\n const response = JSON.parse(event.detail.xhr.response);\n \n if (response.success) {\n // Render the analysis using the template\n const template = document.getElementById('analysis-template').innerHTML;\n const rendered = Mustache.render(template, response);\n event.detail.target.innerHTML = rendered;\n \n // Refresh entries list\n document.getElementById('entries-list').setAttribute('hx-trigger', 'load');\n htmx.process(document.getElementById('entries-list'));\n \n // Refresh stats\n document.getElementById('stats-container').setAttribute('hx-trigger', 'load');\n htmx.process(document.getElementById('stats-container'));\n } else {\n event.detail.target.innerHTML = `\n

Error: ${response.error}

\n `;\n }\n } catch (error) {\n console.error('Error parsing response:', error);\n event.detail.target.innerHTML = `\n

Error processing response: ${error.message}

\n `;\n }\n }\n \n // Handle entries list\n if (event.detail.target.id === 'entries-list') {\n const entries = JSON.parse(event.detail.xhr.response);\n \n // Process entries data\n const processedEntries = entries.map(entry => {\n const date = new Date(entry.timestamp * 1000);\n return {\n ...entry,\n formattedDate: date.toLocaleDateString(),\n tagsList: entry.tags.split(',')\n };\n });\n \n // Render the entries template\n const template = document.getElementById('entries-template').innerHTML;\n const rendered = Mustache.render(template, processedEntries);\n event.detail.target.innerHTML = rendered;\n }\n \n // Handle stats\n if (event.detail.target.id === 'stats-container') {\n const stats = JSON.parse(event.detail.xhr.response);\n \n // Render the stats template\n const template = document.getElementById('stats-template').innerHTML;\n const rendered = Mustache.render(template, stats);\n event.detail.target.innerHTML = rendered;\n \n // Create chart if we have data\n if (stats.dailyCalories && stats.dailyCalories.length > 0) {\n const ctx = document.getElementById('calories-chart').getContext('2d');\n \n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: stats.dailyCalories.map(d => d.date),\n datasets: [{\n label: 'Calories',\n data: stats.dailyCalories.map(d => d.calories),\n backgroundColor: 'rgba(79, 70, 229, 0.6)',\n borderColor: 'rgba(79, 70, 229, 1)',\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: 'Calories'\n }\n },\n x: {\n title: {\n display: true,\n text: 'Date'\n }\n }\n }\n }\n });\n }\n }\n });\n});",[],[259,278],"cade5494-1f11-11f0-8377-569c3dd06744","cade555c-1f11-11f0-8377-569c3dd06744",12,["D",1745282172689],"# FoodVision Frontend\n\nThis directory contains the frontend code for the FoodVision app.\n\n## Structure\n\n- `index.html`: Main HTML template\n- `app.js`: Frontend JavaScript logic\n- `style.css`: Additional custom styles\n\n## Features\n\n- Camera integration for taking food photos\n- File upload for existing food images\n- Real-time food analysis with AI\n- Food entry history display\n- Calorie tracking and statistics\n\n## Technologies Used\n\n- HTMX for AJAX requests and DOM updates\n- Mustache for client-side templating\n- Chart.js for data visualization\n- Tailwind CSS for styling\n\n## How It Works\n\n1. The user can either take a photo using their device camera or upload an existing image\n2. The image is sent to the backend for analysis\n3. The AI analyzes the image and returns information about the food\n4. The results are displayed to the user\n5. The entry is saved to the database for future reference\n6. Statistics and history are updated automatically",[],[259,92],"ac7e7d30-1f11-11f0-88cc-569c3dd06744",8,["D",1745282121725],[204,205,206,207,208],[259],["D",1745282166323],[],[18,92],"d3f0c71e-1f12-11f0-becc-569c3dd06744","vision.ts","8e53aca4-1f11-11f0-8667-569c3dd06744",22,["D",1745282617402],"// Vision service for analyzing food images using Llama 4 Maverick via Groq API\n\ninterface FoodAnalysis {\n calories: number;\n description: string;\n tags: string[];\n nutritionalInfo?: {\n protein?: number;\n carbs?: number;\n fat?: number;\n fiber?: number;\n };\n}\n\n// Analyze a food image using Groq API with Llama 4 Maverick\nexport async function analyzeImage(base64Image: string): Promise {\n const apiKey = Deno.env.get(\"GROQ_API_KEY\");\n \n if (!apiKey) {\n throw new Error(\"GROQ_API_KEY environment variable is not set\");\n }\n \n try {\n // Ensure the base64 string is properly formatted for the API\n const imageUrl = base64Image.startsWith('data:') \n ? base64Image \n : `data:image/jpeg;base64,${base64Image}`;\n \n const response = await fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`\n },\n body: JSON.stringify({\n model: \"meta-llama/llama-4-maverick-17b-128e-instruct\",\n messages: [\n {\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: \"Analyze this food image. Identify what food items are present, estimate the calories, and provide descriptive tags. Return the result as a JSON object with the following fields: calories (number), description (string), tags (array of strings), and nutritionalInfo (object with protein, carbs, fat, fiber in grams). Be as accurate as possible with the calorie estimation based on portion size.\"\n },\n {\n type: \"image_url\",\n image_url: {\n url: imageUrl\n }\n }\n ]\n }\n ],\n temperature: 0.2,\n max_completion_tokens: 1024,\n response_format: { type: \"json_object\" }\n })\n });\n \n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Groq API error: ${response.status} ${errorText}`);\n }\n \n const result = await response.json();\n const content = result.choices[0].message.content;\n \n // Parse the JSON response\n const analysis = JSON.parse(content);\n \n // Ensure we have the expected format\n return {\n calories: analysis.calories || 0,\n description: analysis.description || \"Unknown food\",\n tags: analysis.tags || [],\n nutritionalInfo: analysis.nutritionalInfo || {}\n };\n } catch (error) {\n console.error(\"Error analyzing image:\", error);\n \n // Return a fallback response\n return {\n calories: 0,\n description: \"Could not analyze the image\",\n tags: [\"error\"],\n nutritionalInfo: {}\n };\n }\n}",[],[18,82,301],["D",1745282071114],[201],[18,82],"7c4adb7c-1f11-11f0-97fe-569c3dd06744","schema.ts","7c4adc30-1f11-11f0-97fe-569c3dd06744",["D",1745282040857],"// Database schema for the food tracking app\n\n// Table names - use versioning to handle schema changes\nexport const TABLES = {\n FOOD_ENTRIES: \"food_entries_v1\",\n USERS: \"users_v1\"\n};\n\n// SQL statements to create tables\nexport const CREATE_USERS_TABLE = `\nCREATE TABLE IF NOT EXISTS ${TABLES.USERS} (\n id TEXT PRIMARY KEY,\n name TEXT,\n email TEXT,\n created_at INTEGER DEFAULT (unixepoch())\n)\n`;\n\nexport const CREATE_FOOD_ENTRIES_TABLE = `\nCREATE TABLE IF NOT EXISTS ${TABLES.FOOD_ENTRIES} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id TEXT NOT NULL,\n timestamp INTEGER DEFAULT (unixepoch()),\n image_data TEXT NOT NULL,\n calories INTEGER,\n description TEXT,\n tags TEXT,\n FOREIGN KEY (user_id) REFERENCES ${TABLES.USERS} (id)\n)\n`;\n\n// Types for database entities\nexport interface User {\n id: string;\n name?: string;\n email?: string;\n created_at: number;\n}\n\nexport interface FoodEntry {\n id: number;\n user_id: string;\n timestamp: number;\n image_data: string;\n calories: number;\n description: string;\n tags: string;\n}\n\nexport interface FoodEntryInput {\n userId: string;\n imageData: string;\n calories: number;\n description: string;\n tags: string[];\n}\n\nexport interface FoodStats {\n dailyCalories: { date: string; calories: number }[];\n totalCalories: number;\n averageCalories: number;\n commonTags: { tag: string; count: number }[];\n}",[],[18,66,312],"86990d88-1f11-11f0-aa48-569c3dd06744","queries.ts","86990e1e-1f11-11f0-aa48-569c3dd06744",5,["D",1745282058151],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { \n TABLES, \n CREATE_USERS_TABLE, \n CREATE_FOOD_ENTRIES_TABLE,\n FoodEntry,\n FoodEntryInput,\n FoodStats\n} from \"./schema.ts\";\n\n// Initialize the database\nexport async function setupDatabase() {\n // Create tables if they don't exist\n await sqlite.execute(CREATE_USERS_TABLE);\n await sqlite.execute(CREATE_FOOD_ENTRIES_TABLE);\n \n // Create anonymous user if it doesn't exist\n await sqlite.execute(\n `INSERT OR IGNORE INTO ${TABLES.USERS} (id, name) VALUES (?, ?)`,\n [\"anonymous\", \"Anonymous User\"]\n );\n}\n\n// Create a new food entry\nexport async function createFoodEntry(input: FoodEntryInput): Promise<{ id: number }> {\n // Ensure user exists\n await sqlite.execute(\n `INSERT OR IGNORE INTO ${TABLES.USERS} (id, name) VALUES (?, ?)`,\n [input.userId, `User ${input.userId}`]\n );\n \n // Insert the food entry\n const result = await sqlite.execute(\n `INSERT INTO ${TABLES.FOOD_ENTRIES} \n (user_id, image_data, calories, description, tags) \n VALUES (?, ?, ?, ?, ?)`,\n [\n input.userId,\n input.imageData,\n input.calories,\n input.description,\n input.tags.join(\",\")\n ]\n );\n \n return { id: result.lastInsertId };\n}\n\n// Get food entries for a user\nexport async function getFoodEntries(\n userId: string,\n limit: number = 10,\n offset: number = 0\n): Promise[]> {\n const entries = await sqlite.execute(\n `SELECT id, user_id, timestamp, calories, description, tags\n FROM ${TABLES.FOOD_ENTRIES}\n WHERE user_id = ?\n ORDER BY timestamp DESC\n LIMIT ? OFFSET ?`,\n [userId, limit, offset]\n );\n \n return entries.rows.map(row => ({\n id: row.id,\n user_id: row.user_id,\n timestamp: row.timestamp,\n calories: row.calories,\n description: row.description,\n tags: row.tags\n }));\n}\n\n// Get a single food entry by ID\nexport async function getFoodEntry(id: number): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.FOOD_ENTRIES} WHERE id = ?`,\n [id]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n return result.rows[0] as FoodEntry;\n}\n\n// Get statistics for a user\nexport async function getStats(userId: string, days: number = 7): Promise {\n // Calculate the timestamp for 'days' ago\n const daysAgoTimestamp = Math.floor(Date.now() / 1000) - (days * 24 * 60 * 60);\n \n // Get daily calories\n const dailyCaloriesResult = await sqlite.execute(\n `SELECT \n date(timestamp, 'unixepoch') as date,\n SUM(calories) as calories\n FROM ${TABLES.FOOD_ENTRIES}\n WHERE user_id = ? AND timestamp >= ?\n GROUP BY date(timestamp, 'unixepoch')\n ORDER BY date`,\n [userId, daysAgoTimestamp]\n );\n \n const dailyCalories = dailyCaloriesResult.rows.map(row => ({\n date: row.date,\n calories: row.calories\n }));\n \n // Get total and average calories\n const caloriesStatsResult = await sqlite.execute(\n `SELECT \n SUM(calories) as total,\n AVG(calories) as average\n FROM ${TABLES.FOOD_ENTRIES}\n WHERE user_id = ? AND timestamp >= ?`,\n [userId, daysAgoTimestamp]\n );\n \n const totalCalories = caloriesStatsResult.rows[0]?.total || 0;\n const averageCalories = Math.round(caloriesStatsResult.rows[0]?.average || 0);\n \n // Get common tags\n const tagsResult = await sqlite.execute(\n `SELECT \n value as tag,\n COUNT(*) as count\n FROM ${TABLES.FOOD_ENTRIES},\n json_each('[\"' || replace(tags, ',', '\",\"') || '\"]')\n WHERE user_id = ? AND timestamp >= ?\n GROUP BY value\n ORDER BY count DESC\n LIMIT 5`,\n [userId, daysAgoTimestamp]\n );\n \n const commonTags = tagsResult.rows.map(row => ({\n tag: row.tag,\n count: row.count\n }));\n \n return {\n dailyCalories,\n totalCalories,\n averageCalories,\n commonTags\n };\n}",[],[18,66,319],["D",1745282040857],[198,199],[18,66],["D",1745282040857],[197,200,202],[18],["D",1745281500162],{"_11":12,"_143":72},{"_11":12,"_139":-5,"_71":72,"_31":70,"_140":141,"_142":30},{"_41":130,"_13":16,"_35":38,"_131":95,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":14,"_138":12},"ctx",{"_54":-5,"_162":369,"_370":371,"_372":373,"_374":30,"_375":30,"_376":30,"_377":24,"_378":-5,"_379":-7,"_380":-7,"_381":26,"_382":30,"_383":30,"_384":-5,"_385":30,"_386":30,"_387":30,"_388":-5},"ENV",{"_340":341,"_342":343,"_344":16,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

FoodVision

Capture Food

Recent Entries

Calorie Trends

{{analysis.description}}

Tags:

{{description}}

Common Foods:

History · backend