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",[],[121,141],"b00ce698-1f12-11f0-a5c7-569c3dd06744","favicon.svg","b00ce756-1f12-11f0-a5c7-569c3dd06744",15,["D",1745282557191],"",[],[121,150],"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});",[],[121,158],"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",[],[121,89],"7c4ae3ba-1f11-11f0-97fe-569c3dd06744",["D",1745282040857],[176,177,178],[59],{"_35":68,"_13":60,"_38":41,"_40":69,"_42":43,"_44":45,"_46":47,"_48":202,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_85":203,"_18":204},{"_35":186,"_13":187,"_38":188,"_40":69,"_42":43,"_44":189,"_46":47,"_48":190,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_85":191,"_18":192},{"_35":179,"_13":89,"_38":180,"_40":69,"_42":43,"_44":181,"_46":47,"_48":182,"_17":50,"_51":24,"_53":183,"_55":56,"_57":-5,"_85":184,"_18":185},"c712e578-1f11-11f0-a3db-569c3dd06744","c712e622-1f11-11f0-a3db-569c3dd06744",11,["D",1745282166323],"# FoodVision Backend\n\nThis directory contains the backend code for the FoodVision app.\n\n## Structure\n\n- `database/`: Database schema and queries\n - `schema.ts`: Defines the database tables and types\n - `queries.ts`: Contains functions for interacting with the database\n- `services/`: External service integrations\n - `vision.ts`: Integration with Groq API for Llama 4 Maverick vision\n- `index.ts`: Main entry point for the HTTP API\n\n## API Endpoints\n\n- `POST /api/analyze`: Analyze a food image\n - Accepts: `multipart/form-data` with `image` file and optional `userId`\n - Returns: Analysis results including calories, description, and tags\n\n- `GET /api/entries`: Get food entry history\n - Query params: `userId` (optional), `limit` (optional), `offset` (optional)\n - Returns: List of food entries\n\n- `GET /api/stats`: Get calorie statistics\n - Query params: `userId` (optional), `days` (optional)\n - Returns: Daily calories, total calories, average calories, and common tags\n\n## Environment Variables\n\n- `GROQ_API_KEY`: API key for Groq (required for vision analysis)",[],[59,89],"8e53d22e-1f11-11f0-8667-569c3dd06744","services","1034177d-c3fe-449d-955b-1df766ac5aad",6,["D",1745282071114],[193],[59,187],{"_35":194,"_13":195,"_38":196,"_40":188,"_42":43,"_44":197,"_46":47,"_48":198,"_17":93,"_51":52,"_53":199,"_55":56,"_57":-5,"_85":200,"_18":201},"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}",[],[59,187,195],["D",1745282040857],[205,206],[59,60],{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":210,"_17":50,"_51":52,"_53":66,"_55":56,"_57":-5,"_85":211,"_18":212},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":207,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_85":208,"_18":209},["D",1745282040857],[],[59,60,37],["D",1745282058151],[],[59,60,62],"3a02404e-1f10-11f0-bea3-569c3dd06744",["D",1745281500162],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_265":261},"org",{"_11":12,"_259":-5,"_260":261,"_222":223,"_262":263,"_264":56},"branch",{"_17":91,"_13":16,"_35":43,"_251":213,"_252":-5,"_253":-5,"_254":-5,"_255":-5,"_256":-5,"_257":14,"_258":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":213,"_13":14,"_48":353,"_215":-5,"_216":56,"_217":218,"_219":218,"_220":-5,"_221":-5,"_222":223,"_224":80,"_225":47,"_226":-5,"_227":81,"_228":50,"_229":230,"_231":-5,"_232":-5,"_233":-5,"_234":-5,"_235":236,"_237":236,"_238":239,"_240":239,"_241":239,"_242":236,"_243":236,"_244":354,"_246":355,"_248":356,"_250":56},[299,306,312,315,316],"files",[299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316],"counts",{"_290":50,"_291":93,"_292":50,"_32":293,"_294":295},[286,287],{"_35":68,"_13":60,"_38":41,"_40":69,"_42":43,"_44":45,"_46":47,"_48":70,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_18":285},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[59,60],{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":65,"_17":50,"_51":52,"_53":66,"_55":56,"_57":-5,"_18":289},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":288},[59,60,37],[59,60,62],"pulls","branches","forks",{"_296":50,"_298":50},"connections",{"_296":50,"_297":50},"count","unfilledCount","emptyCount",{"_35":172,"_13":59,"_38":69,"_40":-5,"_42":43,"_44":45,"_46":47,"_48":173,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_85":351,"_18":352},{"_35":68,"_13":60,"_38":41,"_40":69,"_42":43,"_44":45,"_46":47,"_48":202,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_85":349,"_18":350},{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":210,"_17":50,"_51":52,"_53":66,"_55":56,"_57":-5,"_85":347,"_18":348},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":207,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_85":345,"_18":346},{"_35":186,"_13":187,"_38":188,"_40":69,"_42":43,"_44":189,"_46":47,"_48":190,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_85":343,"_18":344},{"_35":194,"_13":195,"_38":196,"_40":188,"_42":43,"_44":197,"_46":47,"_48":198,"_17":93,"_51":52,"_53":199,"_55":56,"_57":-5,"_85":341,"_18":342},{"_35":179,"_13":89,"_38":180,"_40":69,"_42":43,"_44":181,"_46":47,"_48":182,"_17":50,"_51":24,"_53":183,"_55":56,"_57":-5,"_85":339,"_18":340},{"_35":120,"_13":121,"_38":122,"_40":-5,"_42":43,"_44":123,"_46":47,"_48":124,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_85":337,"_18":338},{"_35":165,"_13":89,"_38":166,"_40":122,"_42":43,"_44":167,"_46":47,"_48":168,"_17":50,"_51":24,"_53":169,"_55":56,"_57":-5,"_85":335,"_18":336},{"_35":157,"_13":158,"_38":159,"_40":122,"_42":43,"_44":160,"_46":47,"_48":161,"_17":45,"_51":52,"_53":162,"_55":56,"_57":-5,"_85":333,"_18":334},{"_35":149,"_13":150,"_38":151,"_40":122,"_42":43,"_44":152,"_46":47,"_48":153,"_17":50,"_51":24,"_53":154,"_55":56,"_57":-5,"_85":331,"_18":332},{"_35":140,"_13":141,"_38":142,"_40":122,"_42":43,"_44":143,"_46":47,"_48":144,"_17":145,"_51":24,"_53":146,"_55":56,"_57":-5,"_85":329,"_18":330},{"_35":132,"_13":133,"_38":134,"_40":122,"_42":43,"_44":135,"_46":47,"_48":136,"_17":50,"_51":24,"_53":137,"_55":56,"_57":-5,"_85":327,"_18":328},{"_35":97,"_13":98,"_38":99,"_40":-5,"_42":43,"_44":100,"_46":47,"_48":101,"_17":50,"_51":71,"_53":-5,"_55":56,"_57":-5,"_85":325,"_18":326},{"_35":113,"_13":89,"_38":114,"_40":99,"_42":43,"_44":115,"_46":47,"_48":116,"_17":50,"_51":24,"_53":117,"_55":56,"_57":-5,"_85":323,"_18":324},{"_35":106,"_13":107,"_38":108,"_40":99,"_42":43,"_44":100,"_46":47,"_48":109,"_17":50,"_51":52,"_53":110,"_55":56,"_57":-5,"_85":321,"_18":322},{"_35":88,"_13":89,"_38":90,"_40":-5,"_42":43,"_44":91,"_46":47,"_48":92,"_17":93,"_51":24,"_53":94,"_55":56,"_57":-5,"_85":319,"_18":320},{"_35":78,"_13":79,"_38":80,"_40":-5,"_42":43,"_44":81,"_46":47,"_48":82,"_17":45,"_51":83,"_53":84,"_55":56,"_57":-5,"_85":317,"_18":318},[],[79],[],[89],[],[98,107],[],[98,89],[313,314],[98],[],[121,133],[],[121,141],[],[121,150],[],[121,158],[],[121,89],[307,308,309,310,311],[121],[],[59,89],[],[59,187,195],[304],[59,187],[],[59,60,37],[],[59,60,62],[301,302],[59,60],[300,303,305],[59],["D",1745281500162],{"_11":12,"_265":261},{"_11":12,"_259":-5,"_260":261,"_222":223,"_262":263,"_264":56},{"_17":91,"_13":16,"_35":43,"_251":213,"_252":-5,"_253":-5,"_254":-5,"_255":-5,"_256":-5,"_257":14,"_258":12},"ctx",{"_244":-5,"_282":390,"_391":392,"_393":394,"_395":56,"_396":56,"_397":56,"_398":47,"_399":-5,"_400":-7,"_401":-7,"_402":50,"_403":56,"_404":56,"_405":-5,"_406":56,"_407":56,"_408":56,"_409":-5},"ENV",{"_361":362,"_363":364,"_365":16,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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: