Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Food Analyzer — NutriVision</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"/> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> | |
| <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,400&display=swap" rel="stylesheet"/> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <nav class="nav" id="navbar"> | |
| <div class="nav__inner"> | |
| <a href="/" class="nav__logo"> | |
| <span class="logo-icon">🥗</span> | |
| <span class="logo-text">NutriVision</span> | |
| </a> | |
| <ul class="nav__links"> | |
| <li><a href="/" class="nav__link">Home</a></li> | |
| <li><a href="/analyzer" class="nav__link nav__link--active">Analyzer</a></li> | |
| <li><a href="/about" class="nav__link">About</a></li> | |
| </ul> | |
| <a href="/analyzer" class="nav__cta btn btn--sm">Analyze Food →</a> | |
| <button class="hamburger" id="hamburger"><span></span><span></span><span></span></button> | |
| </div> | |
| </nav> | |
| <div class="mobile-menu" id="mobileMenu"> | |
| <a href="/" class="mobile-link">Home</a> | |
| <a href="/analyzer" class="mobile-link">Analyzer</a> | |
| <a href="/about" class="mobile-link">About</a> | |
| </div> | |
| <!-- PAGE --> | |
| <div class="page-wrap"> | |
| <!-- PAGE HEADER --> | |
| <div class="page-hero"> | |
| <div class="orb orb--a" style="opacity:.4"></div> | |
| <div class="orb orb--b" style="opacity:.3"></div> | |
| <div class="container" style="position:relative;z-index:2;text-align:center"> | |
| <h1 class="page-title">🔬 Food Analyzer</h1> | |
| <p class="page-sub">Upload a food image & fill your profile for a personalised AI nutrition report</p> | |
| </div> | |
| </div> | |
| <div class="container analyzer-layout"> | |
| <!-- ══════════════════ FORM CARD ══════════════════ --> | |
| <div class="form-card" id="formCard"> | |
| <form id="analyzerForm" autocomplete="off"> | |
| <!-- UPLOAD --> | |
| <div class="upload-zone" id="uploadZone"> | |
| <input type="file" id="imgInput" name="image" accept="image/*" hidden required/> | |
| <div class="upload-placeholder" id="uploadPlaceholder"> | |
| <div class="upload-icon-wrap">📸</div> | |
| <h3>Drop food image here</h3> | |
| <p>or click to browse · PNG, JPG, JPEG, WebP · Max 16 MB</p> | |
| </div> | |
| <div class="upload-preview" id="uploadPreview" style="display:none"> | |
| <img id="previewImg" src="" alt="Food preview"/> | |
| <button type="button" id="removeImg" class="remove-btn" title="Remove image">✕</button> | |
| </div> | |
| </div> | |
| <!-- PROFILE --> | |
| <div class="profile-block"> | |
| <h3 class="block-title">👤 Your Health Profile</h3> | |
| <div class="form-grid"> | |
| <div class="field"> | |
| <label>Age</label> | |
| <input type="number" name="age" value="25" min="1" max="120" required/> | |
| </div> | |
| <div class="field"> | |
| <label>Gender</label> | |
| <select name="gender" required> | |
| <option value="Male">Male</option> | |
| <option value="Female">Female</option> | |
| <option value="Other">Other</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label>Height (cm)</label> | |
| <input type="number" name="height" value="170" min="100" max="250" step="0.1" required/> | |
| </div> | |
| <div class="field"> | |
| <label>Weight (kg)</label> | |
| <input type="number" name="weight" value="70" min="30" max="300" step="0.1" required/> | |
| </div> | |
| <div class="field"> | |
| <label>Dietary Preference</label> | |
| <select name="preference" required> | |
| <option value="Vegetarian">🥬 Vegetarian</option> | |
| <option value="Non-Vegetarian">🍗 Non-Vegetarian</option> | |
| <option value="Vegan">🌱 Vegan</option> | |
| <option value="Eggetarian">🥚 Eggetarian</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label>Health Condition</label> | |
| <select name="condition"> | |
| <option value="None">None</option> | |
| <option value="Diabetes">Diabetes</option> | |
| <option value="Obesity">Obesity</option> | |
| <option value="Hypertension">High Blood Pressure</option> | |
| <option value="Heart Disease">Heart Disease</option> | |
| <option value="Arthritis">Arthritis</option> | |
| <option value="PCOD">PCOD / PCOS</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn btn--primary btn--full" id="submitBtn"> | |
| <span id="btnText">🔬 Analyze Food</span> | |
| <span id="btnSpinner" style="display:none" class="btn-spinner"></span> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- ══════════════════ RESULTS ══════════════════ --> | |
| <div class="results-panel" id="resultsPanel" style="display:none"> | |
| <!-- DETECTED FOOD BANNER --> | |
| <div class="result-banner" id="resultBanner"> | |
| <div class="result-banner__icon">🍽️</div> | |
| <div class="result-banner__info"> | |
| <span class="result-banner__label">Detected Food</span> | |
| <h2 id="r_food">—</h2> | |
| <div class="result-banner__meta"> | |
| <span class="confidence-chip" id="r_confidence">—</span> | |
| <span class="source-chip" id="r_source">—</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- BMI STRIP --> | |
| <div class="bmi-strip" id="bmiStrip"> | |
| <div class="bmi-item"> | |
| <span class="bmi-label">📏 Your BMI</span> | |
| <span class="bmi-val" id="r_bmi">—</span> | |
| </div> | |
| <div class="bmi-sep"></div> | |
| <div class="bmi-item"> | |
| <span class="bmi-label">Category</span> | |
| <span class="bmi-cat" id="r_bmiCat">—</span> | |
| </div> | |
| </div> | |
| <!-- NUTRITION --> | |
| <div class="result-card" id="nutritionCard"> | |
| <h3 class="result-card__title">📊 Nutritional Breakdown</h3> | |
| <div class="nutrition-grid" id="r_nutrition"> | |
| <!-- filled by JS --> | |
| </div> | |
| </div> | |
| <!-- HEALTH BENEFITS --> | |
| <div class="result-card" id="benefitsCard"> | |
| <h3 class="result-card__title">🌿 Health Benefits</h3> | |
| <ul class="benefits-list" id="r_benefits"> | |
| <!-- filled by JS --> | |
| </ul> | |
| </div> | |
| <!-- PORTION ADVICE --> | |
| <div class="result-card result-card--amber" id="portionCard"> | |
| <h3 class="result-card__title">🥄 Recommended Portion Size</h3> | |
| <p class="portion-text" id="r_portion">—</p> | |
| </div> | |
| <!-- HEALTH CONTEXT --> | |
| <div class="result-card result-card--pink" id="contextCard" style="display:none"> | |
| <h3 class="result-card__title">💡 Why This Matters For You</h3> | |
| <p id="r_context">—</p> | |
| </div> | |
| <!-- ALTERNATIVES --> | |
| <div class="result-card result-card--teal" id="altCard" style="display:none"> | |
| <h3 class="result-card__title">🔄 Healthier Alternatives</h3> | |
| <p class="alt-intro">Based on your health profile, consider these alternatives:</p> | |
| <div class="alt-list" id="r_alternatives"> | |
| <!-- filled by JS --> | |
| </div> | |
| </div> | |
| <!-- ACTIONS --> | |
| <div class="result-actions"> | |
| <button class="btn btn--outline" onclick="resetAnalyzer()">🔄 Analyze Another Food</button> | |
| <button class="btn btn--ghost-sm" onclick="window.scrollTo({top:0,behavior:'smooth'})">↑ Back to Top</button> | |
| </div> | |
| </div> | |
| </div><!-- /.analyzer-layout --> | |
| </div><!-- /.page-wrap --> | |
| <!-- LOADING OVERLAY --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loading-box"> | |
| <div class="loading-spinner"></div> | |
| <h3>🧠 AI is Analyzing…</h3> | |
| <p id="loadingStep">Running 3 vision models…</p> | |
| <div class="loading-steps"> | |
| <div class="lstep" id="lstep1">🔍 Detecting food with 3 models</div> | |
| <div class="lstep" id="lstep2">📊 Generating nutrition report</div> | |
| <div class="lstep" id="lstep3">💡 Personalizing insights</div> | |
| <div class="lstep" id="lstep4">✅ Finalizing results</div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="footer" style="margin-top:auto"> | |
| <div class="container"> | |
| <div class="footer-bottom" style="border:none;padding:1.5rem 0"> | |
| <p>© 2026 NutriVision — Built with ❤️ by Harika & Deepika & Nageswari</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |