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});",[],[222,237],{"_107":245,"_99":246,"_151":247,"_153":223,"_154":140,"_155":248,"_157":121,"_109":249,"_104":33,"_159":215,"_161":250,"_162":27,"_163":-5,"_164":251,"_102":252},"b00ce698-1f12-11f0-a5c7-569c3dd06744","favicon.svg","b00ce756-1f12-11f0-a5c7-569c3dd06744",15,["D",1745282557191],"",[],[222,246],{"_107":254,"_99":255,"_151":256,"_153":223,"_154":140,"_155":257,"_157":121,"_109":258,"_104":94,"_159":215,"_161":259,"_162":27,"_163":-5,"_164":260,"_102":261},"c17ee034-1f12-11f0-b3e7-569c3dd06744","index.html","ac7e5184-1f11-11f0-88cc-569c3dd06744",19,["D",1745282586452],"\n\n\n \n \n FoodVision - AI Food Tracking\n \n \n \n \n \n \n \n \n \n \n 🍽️\"\n \n\n\n

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",[],[222,255],{"_107":263,"_99":264,"_151":265,"_153":223,"_154":140,"_155":266,"_157":121,"_109":267,"_104":33,"_159":215,"_161":268,"_162":27,"_163":-5,"_164":269,"_102":270},"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}",[],[222,264],[222],{"_107":273,"_99":274,"_151":275,"_153":-5,"_154":140,"_155":276,"_157":121,"_109":277,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":278,"_102":295},"9224f306-1f11-11f0-9067-569c3dd06744","shared","512e86c1-da29-4daa-b466-7a39f6b51670",7,["D",1745282077520],[279,287],{"_107":280,"_99":211,"_151":281,"_153":275,"_154":140,"_155":282,"_157":121,"_109":283,"_104":33,"_159":215,"_161":284,"_162":27,"_163":-5,"_164":285,"_102":286},"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",[],[274,211],{"_107":288,"_99":289,"_151":290,"_153":275,"_154":140,"_155":276,"_157":121,"_109":291,"_104":33,"_159":178,"_161":292,"_162":27,"_163":-5,"_164":293,"_102":294},"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}",[],[274,289],[274],{"_107":297,"_99":211,"_151":298,"_153":-5,"_154":140,"_155":139,"_157":121,"_109":299,"_104":204,"_159":215,"_161":300,"_162":27,"_163":-5,"_164":301,"_102":302},"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",[],[211],{"_107":304,"_99":305,"_151":119,"_153":-5,"_154":140,"_155":123,"_157":121,"_109":306,"_104":156,"_159":307,"_161":308,"_162":27,"_163":-5,"_164":309,"_102":310},"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;",[],[305],"files",[148,166,172,182,191,198,209,220,227,235,244,253,262,272,279,287,296,303],"counts",{"_315":33,"_316":204,"_317":33,"_318":33},"pulls","branches","forks","envVars","contents",[],{"_107":199,"_99":200,"_151":201,"_153":194,"_154":140,"_155":202,"_157":121,"_109":322,"_104":204,"_159":178,"_161":205,"_162":27,"_163":-5,"_102":323},["D",1745282617402],[150,193,200],"upstream","screenshots",{"_327":328,"_329":330},"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.code.$",{"_97":98,"_99":100,"_101":43,"_104":-7,"_102":103,"_105":334,"_146":338,"_311":393,"_215":394,"_319":396,"_324":-5,"_397":27,"_398":-5},{"_107":108,"_99":100,"_109":335,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":123,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":336,"_137":337},["D",1745281500162],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":-5,"_143":-5,"_144":-5,"_145":-5},[339,360,378,387,390],{"_107":149,"_99":150,"_151":152,"_153":-5,"_154":140,"_155":156,"_157":121,"_109":158,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":340,"_102":359},[341,350,356],{"_107":167,"_99":168,"_151":169,"_153":152,"_154":140,"_155":156,"_157":121,"_109":170,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":342,"_102":349},[343,346],{"_107":173,"_99":174,"_151":175,"_153":169,"_154":140,"_155":176,"_157":121,"_109":177,"_104":33,"_159":178,"_161":179,"_162":27,"_163":-5,"_164":344,"_102":345},[],[150,168,174],{"_107":183,"_99":184,"_151":185,"_153":169,"_154":140,"_155":156,"_157":121,"_109":186,"_104":33,"_159":178,"_161":187,"_162":27,"_163":-5,"_164":347,"_102":348},[],[150,168,184],[150,168],{"_107":192,"_99":193,"_151":194,"_153":152,"_154":140,"_155":195,"_157":121,"_109":196,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":351,"_102":355},[352],{"_107":199,"_99":200,"_151":201,"_153":194,"_154":140,"_155":202,"_157":121,"_109":203,"_104":204,"_159":178,"_161":205,"_162":27,"_163":-5,"_164":353,"_102":354},[],[150,193,200],[150,193],{"_107":210,"_99":211,"_151":212,"_153":152,"_154":140,"_155":213,"_157":121,"_109":214,"_104":33,"_159":215,"_161":216,"_162":27,"_163":-5,"_164":357,"_102":358},[],[150,211],[150],{"_107":221,"_99":222,"_151":223,"_153":-5,"_154":140,"_155":224,"_157":121,"_109":225,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":361,"_102":377},[362,365,368,371,374],{"_107":228,"_99":211,"_151":229,"_153":223,"_154":140,"_155":230,"_157":121,"_109":231,"_104":33,"_159":215,"_161":232,"_162":27,"_163":-5,"_164":363,"_102":364},[],[222,211],{"_107":236,"_99":237,"_151":238,"_153":223,"_154":140,"_155":239,"_157":121,"_109":240,"_104":156,"_159":178,"_161":241,"_162":27,"_163":-5,"_164":366,"_102":367},[],[222,237],{"_107":245,"_99":246,"_151":247,"_153":223,"_154":140,"_155":248,"_157":121,"_109":249,"_104":33,"_159":215,"_161":250,"_162":27,"_163":-5,"_164":369,"_102":370},[],[222,246],{"_107":254,"_99":255,"_151":256,"_153":223,"_154":140,"_155":257,"_157":121,"_109":258,"_104":94,"_159":215,"_161":259,"_162":27,"_163":-5,"_164":372,"_102":373},[],[222,255],{"_107":263,"_99":264,"_151":265,"_153":223,"_154":140,"_155":266,"_157":121,"_109":267,"_104":33,"_159":215,"_161":268,"_162":27,"_163":-5,"_164":375,"_102":376},[],[222,264],[222],{"_107":273,"_99":274,"_151":275,"_153":-5,"_154":140,"_155":276,"_157":121,"_109":277,"_104":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":379,"_102":386},[380,383],{"_107":280,"_99":211,"_151":281,"_153":275,"_154":140,"_155":282,"_157":121,"_109":283,"_104":33,"_159":215,"_161":284,"_162":27,"_163":-5,"_164":381,"_102":382},[],[274,211],{"_107":288,"_99":289,"_151":290,"_153":275,"_154":140,"_155":276,"_157":121,"_109":291,"_104":33,"_159":178,"_161":292,"_162":27,"_163":-5,"_164":384,"_102":385},[],[274,289],[274],{"_107":297,"_99":211,"_151":298,"_153":-5,"_154":140,"_155":139,"_157":121,"_109":299,"_104":204,"_159":215,"_161":300,"_162":27,"_163":-5,"_164":388,"_102":389},[],[211],{"_107":304,"_99":305,"_151":119,"_153":-5,"_154":140,"_155":123,"_157":121,"_109":306,"_104":156,"_159":307,"_161":308,"_162":27,"_163":-5,"_164":391,"_102":392},[],[305],[339,341,343,346,350,352,356,360,362,365,368,371,374,378,380,383,387,390],{"_107":199,"_99":200,"_151":201,"_153":194,"_154":140,"_155":202,"_157":121,"_109":322,"_104":204,"_159":178,"_161":205,"_162":27,"_163":-5,"_102":395},[150,193,200],[],"showCompareCallout","pull","routes/_app","actionData","errors"]

FoodVision

Capture Food

Recent Entries

Calorie Trends

{{analysis.description}}

Tags:

{{description}}

Common Foods: