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}

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",[],[221,254],{"_106":262,"_99":263,"_150":264,"_152":222,"_153":139,"_154":265,"_156":120,"_108":266,"_103":33,"_158":214,"_160":267,"_161":27,"_162":-5,"_163":268,"_102":269},"c227ce16-1f11-11f0-9067-569c3dd06744","style.css","c227cede-1f11-11f0-9067-569c3dd06744",10,["D",1745282158072],"/* Additional custom styles for FoodVision app */\n\n/* Pulse animation for the capture button */\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);\n }\n}\n\n.capture-btn {\n animation: pulse 2s infinite;\n}\n\n/* Fade in animation for analysis results */\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n#analysis-result > div {\n animation: fadeIn 0.5s ease-out;\n}\n\n/* Custom scrollbar for entries list */\n#entries-list {\n max-height: 400px;\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: rgba(79, 70, 229, 0.5) rgba(243, 244, 246, 1);\n}\n\n#entries-list::-webkit-scrollbar {\n width: 6px;\n}\n\n#entries-list::-webkit-scrollbar-track {\n background: rgba(243, 244, 246, 1);\n border-radius: 10px;\n}\n\n#entries-list::-webkit-scrollbar-thumb {\n background-color: rgba(79, 70, 229, 0.5);\n border-radius: 10px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n .camera-container {\n max-width: 100%;\n }\n \n .capture-btn {\n width: 60px;\n height: 60px;\n }\n \n .capture-btn::after {\n width: 46px;\n height: 46px;\n }\n}",[],[221,263],[221],{"_106":272,"_99":273,"_150":274,"_152":-5,"_153":139,"_154":275,"_156":120,"_108":276,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":277,"_102":294},"9224f306-1f11-11f0-9067-569c3dd06744","shared","512e86c1-da29-4daa-b466-7a39f6b51670",7,["D",1745282077520],[278,286],{"_106":279,"_99":210,"_150":280,"_152":274,"_153":139,"_154":281,"_156":120,"_108":282,"_103":33,"_158":214,"_160":283,"_161":27,"_162":-5,"_163":284,"_102":285},"cdbb9460-1f11-11f0-9067-569c3dd06744","cdbb9514-1f11-11f0-9067-569c3dd06744",13,["D",1745282177496],"# FoodVision Shared\n\nThis directory contains shared code that is used by both the frontend and backend.\n\n## Structure\n\n- `types.ts`: TypeScript interfaces and types used throughout the application\n\n## Types\n\n- `FoodAnalysisResult`: The result of analyzing a food image\n- `FoodEntryData`: Data structure for a food entry in the database\n- `StatsData`: Data structure for calorie statistics",[],[273,210],{"_106":287,"_99":288,"_150":289,"_152":274,"_153":139,"_154":275,"_156":120,"_108":290,"_103":33,"_158":177,"_160":291,"_161":27,"_162":-5,"_163":292,"_102":293},"9224c53e-1f11-11f0-9067-569c3dd06744","types.ts","9224c610-1f11-11f0-9067-569c3dd06744",["D",1745282077520],"// Shared types for both frontend and backend\n\nexport interface FoodAnalysisResult {\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\nexport interface FoodEntryData {\n id: number;\n user_id: string;\n timestamp: number;\n calories: number;\n description: string;\n tags: string;\n}\n\nexport interface StatsData {\n dailyCalories: { date: string; calories: number }[];\n totalCalories: number;\n averageCalories: number;\n commonTags: { tag: string; count: number }[];\n}",[],[273,288],[273],{"_106":296,"_99":210,"_150":297,"_152":-5,"_153":139,"_154":138,"_156":120,"_108":298,"_103":203,"_158":214,"_160":299,"_161":27,"_162":-5,"_163":300,"_102":301},"e8d5e682-1f12-11f0-a6ce-569c3dd06744","6e25a4aa-1f11-11f0-8cb6-569c3dd06744",["D",1745282652457],"# FoodVision - AI Food Tracking App\n\nA weight loss and fitness app that uses AI vision to analyze food images, calculate calories, and track your eating habits over time.\n\n## Features\n\n- 📸 Take pictures of your food\n- 🔍 AI-powered food recognition and calorie estimation\n- 🏷️ Automatic food tagging and description\n- 📊 Track your eating habits over time\n- 📱 Mobile-friendly interface\n\n## How It Works\n\n1. Upload a photo of your food\n2. The app uses Llama 4 Maverick vision AI to analyze the image\n3. Get instant feedback on calories, ingredients, and nutritional information\n4. View your eating history and trends over time\n\n## Technical Details\n\n- Backend: TypeScript with Hono framework\n- AI Vision: Llama 4 Maverick via Groq API\n- Database: SQLite for data storage\n- Frontend: HTML, CSS (Tailwind), and JavaScript with HTMX\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── schema.ts # Database schema\n│ │ └── queries.ts # Database queries\n│ ├── services/\n│ │ └── vision.ts # Groq API integration\n│ └── README.md # Backend documentation\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── app.js # Frontend logic\n│ ├── style.css # Custom styles\n│ ├── favicon.svg # Favicon\n│ └── README.md # Frontend documentation\n├── shared/\n│ ├── types.ts # Shared type definitions\n│ └── README.md # Shared code documentation\n└── index.ts # Main entry point\n```\n\n## Getting Started\n\n1. Visit the app URL\n2. Upload a food image or take a photo\n3. View the AI analysis of your food\n4. Track your progress over time\n\n## Environment Variables\n\nTo use this app, you'll need to set up one environment variable:\n- `GROQ_API_KEY`: Your API key for Groq (required for vision analysis)\n\nYou can set this in the Val Town environment variables section.\n\n## Troubleshooting\n\nIf you encounter any issues:\n\n1. Make sure your GROQ_API_KEY is set correctly\n2. Check that your browser allows camera access if using the photo capture feature\n3. Ensure your image is clear and well-lit for best analysis results",[],[210],{"_106":303,"_99":304,"_150":118,"_152":-5,"_153":139,"_154":122,"_156":120,"_108":305,"_103":155,"_158":306,"_160":307,"_161":27,"_162":-5,"_163":308,"_102":309},"ddcc30d4-1f12-11f0-ba55-569c3dd06744","index.ts",["D",1745282633941],"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { serveStatic } from \"https://esm.sh/@hono/node-server@1.4.0/serve-static\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { analyzeImage } from \"./backend/services/vision.ts\";\nimport { \n createFoodEntry, \n getFoodEntries, \n getStats,\n setupDatabase \n} from \"./backend/database/queries.ts\";\n\n// Initialize the app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Error:\", err);\n \n // Return a JSON error response\n return c.json({\n error: err.message || \"An unexpected error occurred\",\n success: false\n }, 500);\n});\n\n// Setup CORS\napp.use(\"*\", cors());\n\n// Initialize database on startup\napp.use(\"*\", async (c, next) => {\n await setupDatabase();\n await next();\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve favicon\napp.get(\"/favicon.ico\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\n// Serve index.html for root path\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API Routes\napp.post(\"/api/analyze\", async c => {\n try {\n const formData = await c.req.formData();\n const imageBase64 = formData.get(\"image\") as string;\n \n if (!imageBase64) {\n return c.json({ error: \"No image provided\" }, 400);\n }\n \n // Analyze the image\n const analysis = await analyzeImage(imageBase64);\n \n // Store the analysis in the database\n const userId = formData.get(\"userId\") || \"anonymous\";\n const entry = await createFoodEntry({\n userId: userId.toString(),\n imageData: imageBase64,\n calories: analysis.calories,\n description: analysis.description,\n tags: analysis.tags\n });\n \n return c.json({ success: true, analysis, entryId: entry.id });\n } catch (error) {\n console.error(\"Error analyzing image:\", error);\n return c.json({ error: \"Failed to analyze image\" }, 500);\n }\n});\n\napp.get(\"/api/entries\", async c => {\n const userId = c.req.query(\"userId\") || \"anonymous\";\n const limit = parseInt(c.req.query(\"limit\") || \"10\");\n const offset = parseInt(c.req.query(\"offset\") || \"0\");\n \n const entries = await getFoodEntries(userId, limit, offset);\n return c.json(entries);\n});\n\napp.get(\"/api/stats\", async c => {\n const userId = c.req.query(\"userId\") || \"anonymous\";\n const days = parseInt(c.req.query(\"days\") || \"7\");\n \n const stats = await getStats(userId, days);\n return c.json(stats);\n});\n\n// Export the app\nexport default app.fetch;",[],[304],"files",[147,165,171,181,190,197,208,219,226,234,243,252,261,271,278,286,295,302],"counts",{"_314":33,"_315":203,"_316":33,"_317":33},"pulls","branches","forks","envVars","contents",[320,323,326,329,332],{"_106":148,"_99":149,"_150":151,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":321,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":322},["D",1745282040857],[149],{"_106":220,"_99":221,"_150":222,"_152":-5,"_153":139,"_154":223,"_156":120,"_108":324,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":325},["D",1745282121725],[221],{"_106":272,"_99":273,"_150":274,"_152":-5,"_153":139,"_154":275,"_156":120,"_108":327,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":328},["D",1745282077520],[273],{"_106":296,"_99":210,"_150":297,"_152":-5,"_153":139,"_154":138,"_156":120,"_108":330,"_103":203,"_158":214,"_160":299,"_161":27,"_162":-5,"_102":331},["D",1745282652457],[210],{"_106":303,"_99":304,"_150":118,"_152":-5,"_153":139,"_154":122,"_156":120,"_108":333,"_103":155,"_158":306,"_160":307,"_161":27,"_162":-5,"_102":334},["D",1745282633941],[304],"upstream","screenshots",{"_338":339,"_340":341},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=24&url=https%3A%2F%2Fyawnxyz--76c1547e1f1111f0b2b0569c3dd06744.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=24&url=https%3A%2F%2Fyawnxyz--76c1547e1f1111f0b2b0569c3dd06744.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":345,"_349":350,"_522":33,"_523":27},{"_106":107,"_99":100,"_108":346,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":122,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":347,"_136":348},["D",1745281500162],{"_97":98,"_134":135},{"_103":138,"_99":43,"_106":139,"_140":107,"_141":-5,"_142":-5,"_143":-5,"_144":-5},"history",[351,356,361,366,371,380,388,393,401,409,417,422,430,435,440,445,450,458,468,476,486,491,502,509,515],{"_150":297,"_103":138,"_108":352,"_153":139,"_310":353},["D",1745282652457],[354],{"_106":296,"_153":139,"_150":297,"_99":210,"_160":299,"_158":214,"_103":203,"_152":-5,"_108":352,"_154":138,"_162":-5,"_156":120,"_161":27,"_102":355},[210],{"_150":118,"_103":122,"_108":357,"_153":139,"_310":358},["D",1745282633941],[359],{"_106":303,"_153":139,"_150":118,"_99":304,"_160":307,"_158":306,"_103":155,"_152":-5,"_108":357,"_154":122,"_162":-5,"_156":120,"_161":27,"_102":360},[304],{"_150":237,"_103":238,"_108":362,"_153":139,"_310":363},["D",1745282628619],[364],{"_106":235,"_153":139,"_150":237,"_99":236,"_160":240,"_158":177,"_103":155,"_152":222,"_108":362,"_154":238,"_162":-5,"_156":120,"_161":27,"_102":365},[221,236],{"_150":200,"_103":201,"_108":367,"_153":139,"_310":368},["D",1745282617402],[369],{"_106":198,"_153":139,"_150":200,"_99":199,"_160":204,"_158":177,"_103":203,"_152":193,"_108":367,"_154":201,"_162":-5,"_156":120,"_161":27,"_102":370},[149,192,199],{"_150":237,"_103":372,"_108":373,"_153":139,"_310":374},21,["D",1745282603052],[375],{"_106":376,"_153":139,"_150":237,"_99":236,"_160":377,"_158":177,"_103":378,"_152":222,"_108":373,"_154":372,"_162":-5,"_156":27,"_161":27,"_102":379},"cb62e230-1f12-11f0-849c-569c3dd06744","// 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 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 }\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});",[221,236],{"_150":255,"_103":256,"_108":389,"_153":139,"_310":390},["D",1745282586452],[391],{"_106":253,"_153":139,"_150":255,"_99":254,"_160":258,"_158":214,"_103":94,"_152":222,"_108":389,"_154":256,"_162":-5,"_156":120,"_161":27,"_102":392},[221,254],{"_150":118,"_103":394,"_108":395,"_153":139,"_310":396},18,["D",1745282579620],[397],{"_106":398,"_153":139,"_150":118,"_99":304,"_160":399,"_158":306,"_103":378,"_152":-5,"_108":395,"_154":394,"_162":-5,"_156":27,"_161":27,"_102":400},"bd6bca66-1f12-11f0-9aa4-569c3dd06744","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { serveStatic } from \"https://esm.sh/@hono/node-server@1.4.0/serve-static\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { analyzeImage } from \"./backend/services/vision.ts\";\nimport { \n createFoodEntry, \n getFoodEntries, \n getStats,\n setupDatabase \n} from \"./backend/database/queries.ts\";\n\n// Initialize the app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Error:\", err);\n throw err;\n});\n\n// Setup CORS\napp.use(\"*\", cors());\n\n// Initialize database on startup\napp.use(\"*\", async (c, next) => {\n await setupDatabase();\n await next();\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve favicon\napp.get(\"/favicon.ico\", c => serveFile(\"/frontend/favicon.svg\", import.meta.url));\n\n// Serve index.html for root path\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API Routes\napp.post(\"/api/analyze\", async c => {\n try {\n const formData = await c.req.formData();\n const imageBase64 = formData.get(\"image\") as string;\n \n if (!imageBase64) {\n return c.json({ error: \"No image provided\" }, 400);\n }\n \n // Analyze the image\n const analysis = await analyzeImage(imageBase64);\n \n // Store the analysis in the database\n const userId = formData.get(\"userId\") || \"anonymous\";\n const entry = await createFoodEntry({\n userId: userId.toString(),\n imageData: imageBase64,\n calories: analysis.calories,\n description: analysis.description,\n tags: analysis.tags\n });\n \n return c.json({ success: true, analysis, entryId: entry.id });\n } catch (error) {\n console.error(\"Error analyzing image:\", error);\n return c.json({ error: \"Failed to analyze image\" }, 500);\n }\n});\n\napp.get(\"/api/entries\", async c => {\n const userId = c.req.query(\"userId\") || \"anonymous\";\n const limit = parseInt(c.req.query(\"limit\") || \"10\");\n const offset = parseInt(c.req.query(\"offset\") || \"0\");\n \n const entries = await getFoodEntries(userId, limit, offset);\n return c.json(entries);\n});\n\napp.get(\"/api/stats\", async c => {\n const userId = c.req.query(\"userId\") || \"anonymous\";\n const days = parseInt(c.req.query(\"days\") || \"7\");\n \n const stats = await getStats(userId, days);\n return c.json(stats);\n});\n\n// Export the app\nexport default app.fetch;",[304],{"_150":237,"_103":402,"_108":403,"_153":139,"_310":404},17,["D",1745282570512],[405],{"_106":406,"_153":139,"_150":237,"_99":236,"_160":407,"_158":177,"_103":203,"_152":222,"_108":403,"_154":402,"_162":-5,"_156":27,"_161":27,"_102":408},"b7fd9b68-1f12-11f0-88ab-569c3dd06744","// 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\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 // Prepare form data\n const base64Data = dataUrl.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 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}

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",[221,254],{"_150":280,"_103":281,"_108":431,"_153":139,"_310":432},["D",1745282177496],[433],{"_106":279,"_153":139,"_150":280,"_99":210,"_160":283,"_158":214,"_103":33,"_152":274,"_108":431,"_154":281,"_162":-5,"_156":120,"_161":27,"_102":434},[273,210],{"_150":228,"_103":229,"_108":436,"_153":139,"_310":437},["D",1745282172689],[438],{"_106":227,"_153":139,"_150":228,"_99":210,"_160":231,"_158":214,"_103":33,"_152":222,"_108":436,"_154":229,"_162":-5,"_156":120,"_161":27,"_102":439},[221,210],{"_150":211,"_103":212,"_108":441,"_153":139,"_310":442},["D",1745282166323],[443],{"_106":209,"_153":139,"_150":211,"_99":210,"_160":215,"_158":214,"_103":33,"_152":151,"_108":441,"_154":212,"_162":-5,"_156":120,"_161":27,"_102":444},[149,210],{"_150":264,"_103":265,"_108":446,"_153":139,"_310":447},["D",1745282158072],[448],{"_106":262,"_153":139,"_150":264,"_99":263,"_160":267,"_158":214,"_103":33,"_152":222,"_108":446,"_154":265,"_162":-5,"_156":120,"_161":27,"_102":449},[221,263],{"_150":237,"_103":451,"_108":452,"_153":139,"_310":453},9,["D",1745282148763],[454],{"_106":455,"_153":139,"_150":237,"_99":236,"_160":456,"_158":177,"_103":33,"_152":222,"_108":452,"_154":451,"_162":-5,"_156":27,"_161":27,"_102":457},"bc9bd38e-1f11-11f0-8377-569c3dd06744","// 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\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 // Prepare form data\n const base64Data = dataUrl.split(',')[1];\n prepareImageForUpload(base64Data);\n };\n \n reader.readAsDataURL(file);\n }\n });\n \n // Prepare image for upload\n function prepareImageForUpload(base64Data) {\n // Create a Blob from the base64 data\n const byteCharacters = atob(base64Data);\n const byteArrays = [];\n \n for (let i = 0; i < byteCharacters.length; i++) {\n byteArrays.push(byteCharacters.charCodeAt(i));\n }\n \n const byteArray = new Uint8Array(byteArrays);\n const blob = new Blob([byteArray], { type: 'image/jpeg' });\n \n // Create a File object\n const file = new File([blob], 'food.jpg', { type: 'image/jpeg' });\n \n // Set the file in the form\n const dataTransfer = new DataTransfer();\n dataTransfer.items.add(file);\n imageData.files = dataTransfer.files;\n \n // Show the analysis form\n analysisForm.classList.remove('hidden');\n }\n \n // Handle form submission response\n document.body.addEventListener('htmx:afterSwap', (event) => {\n if (event.detail.target.id === 'analysis-result') {\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}

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",[221,254],{"_106":220,"_153":139,"_150":222,"_99":221,"_160":-5,"_158":159,"_103":33,"_152":-5,"_108":466,"_154":223,"_162":-5,"_156":120,"_161":27,"_102":467},["D",1745282121725],[221],{"_150":274,"_103":275,"_108":469,"_153":139,"_310":470},["D",1745282077520],[471,473],{"_106":272,"_153":139,"_150":274,"_99":273,"_160":-5,"_158":159,"_103":33,"_152":-5,"_108":469,"_154":275,"_162":-5,"_156":120,"_161":27,"_102":472},[273],{"_106":287,"_153":139,"_150":289,"_99":288,"_160":291,"_158":177,"_103":33,"_152":274,"_108":474,"_154":275,"_162":-5,"_156":120,"_161":27,"_102":475},["D",1745282077520],[273,288],{"_150":193,"_103":194,"_108":477,"_153":139,"_310":478},["D",1745282071114],[479,481],{"_106":191,"_153":139,"_150":193,"_99":192,"_160":-5,"_158":159,"_103":33,"_152":151,"_108":477,"_154":194,"_162":-5,"_156":120,"_161":27,"_102":480},[149,192],{"_106":482,"_153":139,"_150":200,"_99":199,"_160":483,"_158":177,"_103":33,"_152":193,"_108":484,"_154":194,"_162":-5,"_156":27,"_161":27,"_102":485},"8e53abf0-1f11-11f0-8667-569c3dd06744","// 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 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: `data:image/jpeg;base64,${base64Image}`\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}",["D",1745282071114],[149,192,199],{"_150":174,"_103":175,"_108":487,"_153":139,"_310":488},["D",1745282058151],[489],{"_106":172,"_153":139,"_150":174,"_99":173,"_160":178,"_158":177,"_103":33,"_152":168,"_108":487,"_154":175,"_162":-5,"_156":120,"_161":27,"_102":490},[149,167,173],{"_150":168,"_103":155,"_108":492,"_153":139,"_310":493},["D",1745282040857],[494,496,499],{"_106":166,"_153":139,"_150":168,"_99":167,"_160":-5,"_158":159,"_103":33,"_152":151,"_108":492,"_154":155,"_162":-5,"_156":120,"_161":27,"_102":495},[149,167],{"_106":148,"_153":139,"_150":151,"_99":149,"_160":-5,"_158":159,"_103":33,"_152":-5,"_108":497,"_154":155,"_162":-5,"_156":120,"_161":27,"_102":498},["D",1745282040857],[149],{"_106":182,"_153":139,"_150":184,"_99":183,"_160":186,"_158":177,"_103":33,"_152":168,"_108":500,"_154":155,"_162":-5,"_156":120,"_161":27,"_102":501},["D",1745282040857],[149,167,183],{"_150":118,"_103":378,"_108":503,"_153":139,"_310":504},["D",1745282033359],[505],{"_106":506,"_153":139,"_150":118,"_99":304,"_160":507,"_158":306,"_103":203,"_152":-5,"_108":503,"_154":378,"_162":-5,"_156":27,"_161":27,"_102":508},"77d2fa48-1f11-11f0-8951-569c3dd06744","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { serveStatic } from \"https://esm.sh/@hono/node-server@1.4.0/serve-static\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { analyzeImage } from \"./backend/services/vision.ts\";\nimport { \n createFoodEntry, \n getFoodEntries, \n getStats,\n setupDatabase \n} from \"./backend/database/queries.ts\";\n\n// Initialize the app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Error:\", err);\n throw err;\n});\n\n// Setup CORS\napp.use(\"*\", cors());\n\n// Initialize database on startup\napp.use(\"*\", async (c, next) => {\n await setupDatabase();\n await next();\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve index.html for root path\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API Routes\napp.post(\"/api/analyze\", async c => {\n try {\n const formData = await c.req.formData();\n const imageFile = formData.get(\"image\") as File;\n \n if (!imageFile) {\n return c.json({ error: \"No image provided\" }, 400);\n }\n \n // Convert the file to base64\n const arrayBuffer = await imageFile.arrayBuffer();\n const buffer = new Uint8Array(arrayBuffer);\n const base64Image = btoa(String.fromCharCode(...buffer));\n \n // Analyze the image\n const analysis = await analyzeImage(base64Image);\n \n // Store the analysis in the database\n const userId = formData.get(\"userId\") || \"anonymous\";\n const entry = await createFoodEntry({\n userId: userId.toString(),\n imageData: base64Image,\n calories: analysis.calories,\n description: analysis.description,\n tags: analysis.tags\n });\n \n return c.json({ success: true, analysis, entryId: entry.id });\n } catch (error) {\n console.error(\"Error analyzing image:\", error);\n return c.json({ error: \"Failed to analyze image\" }, 500);\n }\n});\n\napp.get(\"/api/entries\", async c => {\n const userId = c.req.query(\"userId\") || \"anonymous\";\n const limit = parseInt(c.req.query(\"limit\") || \"10\");\n const offset = parseInt(c.req.query(\"offset\") || \"0\");\n \n const entries = await getFoodEntries(userId, limit, offset);\n return c.json(entries);\n});\n\napp.get(\"/api/stats\", async c => {\n const userId = c.req.query(\"userId\") || \"anonymous\";\n const days = parseInt(c.req.query(\"days\") || \"7\");\n \n const stats = await getStats(userId, days);\n return c.json(stats);\n});\n\n// Export the app\nexport default app.fetch;",[304],{"_150":118,"_103":94,"_108":510,"_153":139,"_310":511},["D",1745282031569],[512],{"_106":513,"_153":139,"_150":118,"_99":304,"_160":507,"_158":177,"_103":33,"_152":-5,"_108":510,"_154":94,"_162":-5,"_156":27,"_161":27,"_102":514},"76c153ac-1f11-11f0-b2b0-569c3dd06744",[304],{"_150":297,"_103":203,"_108":516,"_153":139,"_310":517},["D",1745282017127],[518],{"_106":519,"_153":139,"_150":297,"_99":210,"_160":520,"_158":214,"_103":33,"_152":-5,"_108":516,"_154":203,"_162":-5,"_156":27,"_161":27,"_102":521},"6e25a3ec-1f11-11f0-8cb6-569c3dd06744","# FoodVision - AI Food Tracking App\n\nA weight loss and fitness app that uses AI vision to analyze food images, calculate calories, and track your eating habits over time.\n\n## Features\n\n- 📸 Take pictures of your food\n- 🔍 AI-powered food recognition and calorie estimation\n- 🏷️ Automatic food tagging and description\n- 📊 Track your eating habits over time\n- 📱 Mobile-friendly interface\n\n## How It Works\n\n1. Upload a photo of your food\n2. The app uses Llama 4 Maverick vision AI to analyze the image\n3. Get instant feedback on calories, ingredients, and nutritional information\n4. View your eating history and trends over time\n\n## Technical Details\n\n- Backend: TypeScript with Hono framework\n- AI Vision: Llama 4 Maverick via Groq API\n- Database: SQLite for data storage\n- Frontend: HTML, CSS (Tailwind), and JavaScript\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── schema.ts # Database schema\n│ │ └── queries.ts # Database queries\n│ ├── services/\n│ │ └── vision.ts # Groq API integration\n│ ├── routes/\n│ │ ├── analyze.ts # Food analysis endpoint\n│ │ ├── entries.ts # Food entries endpoints\n│ │ └── stats.ts # Statistics endpoints\n│ └── index.ts # Main entry point\n├── frontend/\n│ ├── components/\n│ │ ├── camera.js # Camera capture component\n│ │ ├── history.js # Food history component\n│ │ └── stats.js # Statistics component\n│ ├── index.html # Main HTML template\n│ ├── app.js # Frontend logic\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared type definitions\n```\n\n## Getting Started\n\n1. Visit the app URL\n2. Upload a food image or take a photo\n3. View the AI analysis of your food\n4. Track your progress over time",[210],"page","hasNext","routes/_app","actionData","errors"]

FoodVision

Capture Food

Recent Entries

Calorie Trends

{{analysis.description}}

Tags:

{{description}}

Common Foods:

FoodVision

Capture Food

Recent Entries

Calorie Trends

{{analysis.description}}

Tags:

{{description}}

Common Foods:

FoodVision

Capture Food

Recent Entries

Calorie Trends

{{analysis.description}}

Tags:

{{description}}

Common Foods:

History