Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>eath | AI Nutrition Tracker</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col font-inter"> | |
| <header class="bg-[#111116] text-white py-4 shadow-md"> | |
| <div class="max-w-7xl mx-auto px-6 flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <img src="eathstartup.png" alt="eath Logo" class="h-10 w-auto object-contain"> | |
| <span class="text-3xl font-bold tracking-tight">eath</span> | |
| </div> | |
| <nav class="hidden md:flex gap-6 text-sm font-medium text-gray-300"> | |
| <a href="#" class="hover:text-white transition">About eath</a> | |
| <a href="#" class="hover:text-white transition">Features</a> | |
| <a href="#" class="hover:text-white transition">Team</a> | |
| <a href="#" class="hover:text-white transition">Contact us</a> | |
| <a href="#" class="hover:text-white transition">Privacy</a> | |
| </nav> | |
| <div class="flex items-center gap-4"> | |
| <button class="text-gray-400 hover:text-white"><i class="fa-solid fa-moon"></i></button> | |
| <div | |
| class="bg-gray-800 px-3 py-1 rounded text-sm flex items-center gap-2 cursor-pointer border border-gray-700"> | |
| <span>🇺🇸</span> <i class="fa-solid fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="flex-grow max-w-7xl mx-auto px-6 py-10 w-full grid grid-cols-1 lg:grid-cols-12 gap-8"> | |
| <section class="lg:col-span-5 bg-white p-8 rounded-2xl shadow-sm border border-gray-100 flex flex-col gap-8"> | |
| <h2 class="text-xl font-bold text-gray-800 border-b pb-3"><i | |
| class="fa-solid fa-sliders text-brand mr-2"></i> Analysis Engine</h2> | |
| <div> | |
| <label class="block text-sm font-bold text-gray-700 mb-2">Select Architecture</label> | |
| <select id="modelSelector" | |
| class="w-full bg-gray-50 border border-gray-200 text-gray-700 rounded-lg p-3 outline-none focus:border-brand transition"> | |
| <option value="yolo_x">YOLO-X Large (>90% Top-1 Accuracy)</option> | |
| <option value="yolo_s">YOLO-S Small (Edge Optimized)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="block text-sm font-bold text-gray-700">Portion Size</label> | |
| <span id="portionLabel" | |
| class="text-sm font-bold text-brand bg-brand-light px-3 py-1 rounded-full">100 g</span> | |
| </div> | |
| <input type="range" id="portionSlider" min="50" max="500" step="50" value="100" | |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| <div id="dropZone" | |
| class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:bg-gray-50 transition relative overflow-hidden group"> | |
| <input type="file" id="fileInput" accept="image/*" | |
| class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" /> | |
| <div id="uploadUI" class="flex flex-col items-center pointer-events-none"> | |
| <div | |
| class="w-16 h-16 bg-brand-light text-brand rounded-full flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform"> | |
| <i class="fa-solid fa-camera"></i> | |
| </div> | |
| <p class="text-gray-800 font-bold">Drop food image here</p> | |
| <p class="text-gray-400 text-sm mt-1">PNG, JPG up to 5MB</p> | |
| </div> | |
| <img id="imagePreview" src="" alt="Preview" | |
| class="hidden absolute inset-0 w-full h-full object-cover z-0" /> | |
| </div> | |
| <button id="analyzeBtn" | |
| class="w-full bg-brand hover:bg-brand-dark text-white font-bold py-4 rounded-xl shadow-md transition flex justify-center items-center gap-2"> | |
| <i class="fa-solid fa-microchip"></i> Analyze Dish | |
| </button> | |
| </section> | |
| <section class="lg:col-span-7 flex flex-col gap-6"> | |
| <div id="welcomeState" | |
| class="h-full bg-white rounded-2xl shadow-sm border border-gray-100 flex flex-col items-center justify-center p-12 text-center"> | |
| <div class="w-24 h-24 bg-gray-50 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fa-solid fa-utensils text-4xl text-gray-300"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Ready for Inference</h3> | |
| <p class="text-gray-500 max-w-sm">Upload an image to trigger the YOLO architecture. The system will | |
| cross-reference the USDA databases to extract macros and ingredients.</p> | |
| </div> | |
| <div id="loadingState" | |
| class="hidden h-full bg-white rounded-2xl shadow-sm border border-gray-100 flex flex-col items-center justify-center p-12"> | |
| <div class="custom-loader mb-6"></div> | |
| <h3 class="text-xl font-bold text-gray-800">Processing Image...</h3> | |
| <p class="text-gray-500 text-sm">Running tensor operations & fetching database.</p> | |
| </div> | |
| <div id="resultsState" class="hidden flex flex-col gap-6"> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 relative overflow-hidden"> | |
| <div | |
| class="absolute top-0 right-0 bg-brand text-white text-xs font-bold px-4 py-1 rounded-bl-xl shadow-sm"> | |
| <span id="badgeModel">YOLO</span> | |
| </div> | |
| <p class="text-xs text-gray-500 font-bold uppercase tracking-widest mb-1">Detected Object</p> | |
| <h2 id="resDishName" class="text-4xl font-black text-gray-800 mb-4 tracking-tight">--</h2> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="font-bold text-gray-600">Model Confidence</span> | |
| <span id="resConfText" class="font-bold text-brand">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-100 rounded-full h-3"> | |
| <div id="resConfBar" class="bg-brand h-3 rounded-full progress-anim" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-bold text-gray-800"><i | |
| class="fa-solid fa-chart-pie text-brand mr-2"></i> Macros</h3> | |
| <span class="text-xs font-bold bg-gray-100 text-gray-600 px-2 py-1 rounded"><span | |
| id="resPortion">100</span>g</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50"> | |
| <div id="resKcal" class="text-2xl font-black text-gray-800">--</div> | |
| <div class="text-xs font-bold text-gray-500">KCAL</div> | |
| </div> | |
| <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50"> | |
| <div id="resProt" class="text-2xl font-black text-gray-800">--</div> | |
| <div class="text-xs font-bold text-gray-500">PROT (g)</div> | |
| </div> | |
| <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50"> | |
| <div id="resFat" class="text-2xl font-black text-gray-800">--</div> | |
| <div class="text-xs font-bold text-gray-500">FAT (g)</div> | |
| </div> | |
| <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50"> | |
| <div id="resCarb" class="text-2xl font-black text-gray-800">--</div> | |
| <div class="text-xs font-bold text-gray-500">CARBS (g)</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 flex flex-col"> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4"><i | |
| class="fa-solid fa-clipboard-list text-brand mr-2"></i> Likely Ingredients</h3> | |
| <div | |
| class="bg-gray-50 rounded-xl border border-gray-100 p-4 flex-grow overflow-y-auto max-h-48"> | |
| <ul id="ingredientsList" class="text-sm text-gray-600 space-y-2 list-disc pl-4"> | |
| </ul> | |
| <div id="noIngredientsMsg" class="hidden text-sm text-gray-400 italic text-center mt-4"> | |
| No specific ingredient data found for this dish. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="js/script.js"></script> | |
| </body> | |
| </html> |