Spaces:

dilpreet77
/

model

Sleeping

App Files Files Community

dilpreet77 commited on Sep 22, 2025

Commit

6a5f05e

verified ·

1 Parent(s): 0a2f101

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +115 -107

templates/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -7,129 +7,137 @@
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
-  <!-- Tailwind CSS CDN (Play CDN for quick use) -->
   <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gradient-to-r from-yellow-50 via-yellow-100 to-yellow-50 min-h-screen flex items-center justify-center p-6">
-  <div class="container max-w-xl bg-white rounded-lg shadow-lg p-6 md:p-10">
-    <h1 class="text-center text-orange-600 text-3xl font-extrabold mb-8">Indian Food Flavor Profile Prediction</h1>
-    <form method="post" class="needs-validation" novalidate>
-      <!-- Ingredients -->
-      <div class="mb-4">
-        <label for="ingredients" class="form-label fw-semibold text-gray-700">Ingredients (comma separated):</label>
-        <textarea
-          id="ingredients"
-          name="ingredients"
-          rows="3"
-          required
-          placeholder="e.g., cumin, coriander, ginger"
-          class="form-control rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500"
-        ></textarea>
-        <div class="invalid-feedback">Please enter ingredients.</div>
-      </div>
-      <!-- Diet -->
-      <div class="mb-4">
-        <label for="diet" class="form-label fw-semibold text-gray-700">Diet:</label>
-        <select id="diet" name="diet" required class="form-select rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500">
-          <option value="" disabled selected>Select diet</option>
-          <option value="vegetarian">Vegetarian</option>
-          <option value="non vegetarian">Non Vegetarian</option>
-        </select>
-        <div class="invalid-feedback">Please select a diet.</div>
-      </div>
-      <!-- Course -->
-      <div class="mb-4">
-        <label for="course" class="form-label fw-semibold text-gray-700">Course:</label>
-        <select id="course" name="course" required class="form-select rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500">
-          <option value="" disabled selected>Select course</option>
-          <option value="dessert">Dessert</option>
-          <option value="main course">Main Course</option>
-          <option value="starter">Starter</option>
-          <option value="snack">Snack</option>
-        </select>
-        <div class="invalid-feedback">Please select a course.</div>
-      </div>
-      <!-- Region -->
-      <div class="mb-4">
-        <label for="region" class="form-label fw-semibold text-gray-700">Region:</label>
-        <select id="region" name="region" required class="form-select rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500">
-          <option value="" disabled selected>Select region</option>
-          <option value="East">East</option>
-          <option value="West">West</option>
-          <option value="North">North</option>
-          <option value="South">South</option>
-        </select>
-        <div class="invalid-feedback">Please select a region.</div>
-      </div>
-      <!-- Prep & Cook Time in Bootstrap Grid -->
-      <div class="row mb-4 g-3">
-        <div class="col-6">
-          <label for="prep_time" class="form-label fw-semibold text-gray-700">Preparation Time (minutes):</label>
-          <input
-            type="number"
-            min="0"
-            id="prep_time"
-            name="prep_time"
-            required
-            placeholder="e.g., 15"
-            class="form-control rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500" />
-          <div class="invalid-feedback">Please enter preparation time.</div>
         </div>
-        <div class="col-6">
-          <label for="cook_time" class="form-label fw-semibold text-gray-700">Cook Time (minutes):</label>
-          <input
-            type="number"
-            min="0"
-            id="cook_time"
-            name="cook_time"
-            required
-            placeholder="e.g., 30"
-            class="form-control rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500" />
-          <div class="invalid-feedback">Please enter cook time.</div>
         </div>
-      </div>
-      <button
-        type="submit"
-        class="w-full btn btn-lg btn-warning text-white font-bold hover:bg-orange-600 transition"
-      >
-        Predict Flavor Profile
-      </button>
-    </form>
-    {% if prediction %}
-      <div class="mt-6 p-5 bg-orange-100 border-l-4 border-orange-500 text-orange-800 font-semibold rounded shadow-lg text-center text-lg">
         Predicted Flavor Profile: {{ prediction }}
       </div>
-    {% endif %}
-  </div>
-  <!-- Bootstrap JS + Popper (for validation & components) -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/js/bootstrap.bundle.min.js"></script>
   <script>
-    // Example Bootstrap form validation script
     (() => {
-      'use strict'
-      const forms = document.querySelectorAll('.needs-validation')
       Array.from(forms).forEach(form => {
         form.addEventListener('submit', event => {
           if (!form.checkValidity()) {
-            event.preventDefault()
-            event.stopPropagation()
           }
-          form.classList.add('was-validated')
-        }, false)
-      })
-    })()
   </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en" >
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <!-- Bootstrap CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <!-- Tailwind CSS CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body {
+      background: linear-gradient(135deg, #fff8f0, #ffe8cc);
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    /* Smooth input focus ring */
+    input:focus, select:focus, textarea:focus {
+      outline: none !important;
+      box-shadow: 0 0 8px rgba(230, 126, 34, 0.6);
+      border-color: #e67e22 !important;
+      transition: box-shadow 0.3s ease;
+    }
+    /* Placeholder styling */
+    ::placeholder {
+      color: #d35400;
+      opacity: 0.7;
+    }
+    /* Button hover transition */
+    .btn-warning:hover {
+      background-color: #e76f20 !important;
+      box-shadow: 0 4px 15px rgba(231, 111, 32, 0.5);
+    }
+    /* Card shadow on hover */
+    .card:hover {
+      box-shadow: 0 15px 30px rgba(230, 126, 34, 0.2);
+      transition: box-shadow 0.3s ease;
+    }
+  </style>
 </head>
+<body>
+  <main class="min-vh-100 d-flex align-items-center justify-content-center p-4">
+    <div class="card shadow rounded-4 p-5 w-100" style="max-width: 540px; background:#fff9f1;">
+      <h1 class="text-center text-4xl font-extrabold mb-5 text-orange-600">Indian Food Flavor Profile Prediction</h1>
+      <form method="post" class="needs-validation" novalidate>
+        <!-- Ingredients -->
+        <div class="mb-4">
+          <label for="ingredients" class="form-label fw-semibold fs-6 text-secondary">Ingredients (comma separated):</label>
+          <textarea id="ingredients" name="ingredients" rows="3" required placeholder="e.g., cumin, coriander, ginger" class="form-control rounded-3 border-2 border-warning"></textarea>
+          <div class="invalid-feedback">Please enter ingredients.</div>
+        </div>
+        <!-- Diet -->
+        <div class="mb-4">
+          <label for="diet" class="form-label fw-semibold fs-6 text-secondary">Diet:</label>
+          <select id="diet" name="diet" required class="form-select rounded-3 border-2 border-warning">
+            <option value="" disabled selected>Select diet</option>
+            <option value="vegetarian">Vegetarian</option>
+            <option value="non vegetarian">Non Vegetarian</option>
+          </select>
+          <div class="invalid-feedback">Please select a diet.</div>
         </div>
+        <!-- Course -->
+        <div class="mb-4">
+          <label for="course" class="form-label fw-semibold fs-6 text-secondary">Course:</label>
+          <select id="course" name="course" required class="form-select rounded-3 border-2 border-warning">
+            <option value="" disabled selected>Select course</option>
+            <option value="dessert">Dessert</option>
+            <option value="main course">Main Course</option>
+            <option value="starter">Starter</option>
+            <option value="snack">Snack</option>
+          </select>
+          <div class="invalid-feedback">Please select a course.</div>
+        </div>
+        <!-- Region -->
+        <div class="mb-4">
+          <label for="region" class="form-label fw-semibold fs-6 text-secondary">Region:</label>
+          <select id="region" name="region" required class="form-select rounded-3 border-2 border-warning">
+            <option value="" disabled selected>Select region</option>
+            <option value="East">East</option>
+            <option value="West">West</option>
+            <option value="North">North</option>
+            <option value="South">South</option>
+          </select>
+          <div class="invalid-feedback">Please select a region.</div>
         </div>
+        <!-- Prep & Cook Time -->
+        <div class="row mb-4 g-3">
+          <div class="col-6">
+            <label for="prep_time" class="form-label fw-semibold fs-6 text-secondary">Preparation Time (minutes):</label>
+            <input id="prep_time" type="number" name="prep_time" min="0" required placeholder="e.g., 15" class="form-control rounded-3 border-2 border-warning" />
+            <div class="invalid-feedback">Please enter preparation time.</div>
+          </div>
+          <div class="col-6">
+            <label for="cook_time" class="form-label fw-semibold fs-6 text-secondary">Cook Time (minutes):</label>
+            <input id="cook_time" type="number" name="cook_time" min="0" required placeholder="e.g., 30" class="form-control rounded-3 border-2 border-warning" />
+            <div class="invalid-feedback">Please enter cook time.</div>
+          </div>
+        </div>
+        <button type="submit" class="btn btn-warning w-100 py-3 fs-5 fw-bold shadow-sm">Predict Flavor Profile</button>
+      </form>
+      {% if prediction %}
+      <div class="mt-5 p-4 rounded-3 bg-orange-50 border-l-4 border-warning text-warning fs-5 text-center shadow-sm fw-semibold">
         Predicted Flavor Profile: {{ prediction }}
       </div>
+      {% endif %}
+    </div>
+  </main>
+  <!-- Bootstrap JS Bundle -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/js/bootstrap.bundle.min.js"></script>
   <script>
+    // Bootstrap form validation
     (() => {
+      'use strict';
+      const forms = document.querySelectorAll('.needs-validation');
       Array.from(forms).forEach(form => {
         form.addEventListener('submit', event => {
           if (!form.checkValidity()) {
+            event.preventDefault();
+            event.stopPropagation();
           }
+          form.classList.add('was-validated');
+        }, false);
+      });
+    })();
   </script>
 </body>
 </html>