Hugging Face's logo

Spaces:
dilpreet77
/
model
Sleeping

App Files Community
dilpreet77 commited on
Commit
0a2f101
·
verified ·
1 Parent(s): f46ba78

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +124 -37
templates/index.html CHANGED
@@ -1,48 +1,135 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8" />
5
- <title>Flavor Profile Prediction</title>
 
 
 
 
 
 
 
6
  </head>
7
- <body>
8
- <h1>Indian Food Flavor Profile Prediction</h1>
9
- <form method="post">
10
- <label>Ingredients (comma separated):</label><br/>
11
- <textarea name="ingredients" rows="3" cols="50" required></textarea><br/><br/>
12
 
13
- <label>Diet:</label>
14
- <select name="diet" required>
15
- <option value="vegetarian">vegetarian</option>
16
- <option value="non vegetarian">non vegetarian</option>
17
- </select><br/><br/>
18
-
19
- <label>Course:</label>
20
- <select name="course" required>
21
- <option value="dessert">dessert</option>
22
- <option value="main course">main course</option>
23
- <option value="starter">starter</option>
24
- <option value="snack">snack</option>
25
- </select><br/><br/>
26
-
27
- <label>Region:</label>
28
- <select name="region" required>
29
- <option value="East">East</option>
30
- <option value="West">West</option>
31
- <option value="North">North</option>
32
- <option value="South">South</option>
33
- </select><br/><br/>
34
-
35
- <label>Preparation Time (minutes):</label>
36
- <input type="number" name="prep_time" min="0" required /><br/><br/>
37
-
38
- <label>Cook Time (minutes):</label>
39
- <input type="number" name="cook_time" min="0" required /><br/><br/>
40
-
41
- <input type="submit" value="Predict Flavor Profile" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
42
  </form>
43
 
44
  {% if prediction %}
45
- <h2>Predicted Flavor Profile: {{ prediction }}</h2>
 
 
46
  {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  </body>
48
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Flavor Profile Prediction</title>
7
+
8
+ <!-- Bootstrap CSS -->
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
10
+ <!-- Tailwind CSS CDN (Play CDN for quick use) -->
11
+ <script src="https://cdn.tailwindcss.com"></script>
12
+
13
  </head>
14
+ <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">
 
 
 
 
15
 
16
+ <div class="container max-w-xl bg-white rounded-lg shadow-lg p-6 md:p-10">
17
+ <h1 class="text-center text-orange-600 text-3xl font-extrabold mb-8">Indian Food Flavor Profile Prediction</h1>
18
+
19
+ <form method="post" class="needs-validation" novalidate>
20
+
21
+ <!-- Ingredients -->
22
+ <div class="mb-4">
23
+ <label for="ingredients" class="form-label fw-semibold text-gray-700">Ingredients (comma separated):</label>
24
+ <textarea
25
+ id="ingredients"
26
+ name="ingredients"
27
+ rows="3"
28
+ required
29
+ placeholder="e.g., cumin, coriander, ginger"
30
+ class="form-control rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500"
31
+ ></textarea>
32
+ <div class="invalid-feedback">Please enter ingredients.</div>
33
+ </div>
34
+
35
+ <!-- Diet -->
36
+ <div class="mb-4">
37
+ <label for="diet" class="form-label fw-semibold text-gray-700">Diet:</label>
38
+ <select id="diet" name="diet" required class="form-select rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500">
39
+ <option value="" disabled selected>Select diet</option>
40
+ <option value="vegetarian">Vegetarian</option>
41
+ <option value="non vegetarian">Non Vegetarian</option>
42
+ </select>
43
+ <div class="invalid-feedback">Please select a diet.</div>
44
+ </div>
45
+
46
+ <!-- Course -->
47
+ <div class="mb-4">
48
+ <label for="course" class="form-label fw-semibold text-gray-700">Course:</label>
49
+ <select id="course" name="course" required class="form-select rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500">
50
+ <option value="" disabled selected>Select course</option>
51
+ <option value="dessert">Dessert</option>
52
+ <option value="main course">Main Course</option>
53
+ <option value="starter">Starter</option>
54
+ <option value="snack">Snack</option>
55
+ </select>
56
+ <div class="invalid-feedback">Please select a course.</div>
57
+ </div>
58
+
59
+ <!-- Region -->
60
+ <div class="mb-4">
61
+ <label for="region" class="form-label fw-semibold text-gray-700">Region:</label>
62
+ <select id="region" name="region" required class="form-select rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500">
63
+ <option value="" disabled selected>Select region</option>
64
+ <option value="East">East</option>
65
+ <option value="West">West</option>
66
+ <option value="North">North</option>
67
+ <option value="South">South</option>
68
+ </select>
69
+ <div class="invalid-feedback">Please select a region.</div>
70
+ </div>
71
+
72
+ <!-- Prep & Cook Time in Bootstrap Grid -->
73
+ <div class="row mb-4 g-3">
74
+ <div class="col-6">
75
+ <label for="prep_time" class="form-label fw-semibold text-gray-700">Preparation Time (minutes):</label>
76
+ <input
77
+ type="number"
78
+ min="0"
79
+ id="prep_time"
80
+ name="prep_time"
81
+ required
82
+ placeholder="e.g., 15"
83
+ class="form-control rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500" />
84
+ <div class="invalid-feedback">Please enter preparation time.</div>
85
+ </div>
86
+ <div class="col-6">
87
+ <label for="cook_time" class="form-label fw-semibold text-gray-700">Cook Time (minutes):</label>
88
+ <input
89
+ type="number"
90
+ min="0"
91
+ id="cook_time"
92
+ name="cook_time"
93
+ required
94
+ placeholder="e.g., 30"
95
+ class="form-control rounded-md border-orange-400 focus:ring-orange-300 focus:border-orange-500" />
96
+ <div class="invalid-feedback">Please enter cook time.</div>
97
+ </div>
98
+ </div>
99
+
100
+ <button
101
+ type="submit"
102
+ class="w-full btn btn-lg btn-warning text-white font-bold hover:bg-orange-600 transition"
103
+ >
104
+ Predict Flavor Profile
105
+ </button>
106
  </form>
107
 
108
  {% if prediction %}
109
+ <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">
110
+ Predicted Flavor Profile: {{ prediction }}
111
+ </div>
112
  {% endif %}
113
+ </div>
114
+
115
+ <!-- Bootstrap JS + Popper (for validation & components) -->
116
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.4.1/dist/js/bootstrap.bundle.min.js"></script>
117
+ <script>
118
+ // Example Bootstrap form validation script
119
+ (() => {
120
+ 'use strict'
121
+ const forms = document.querySelectorAll('.needs-validation')
122
+ Array.from(forms).forEach(form => {
123
+ form.addEventListener('submit', event => {
124
+ if (!form.checkValidity()) {
125
+ event.preventDefault()
126
+ event.stopPropagation()
127
+ }
128
+ form.classList.add('was-validated')
129
+ }, false)
130
+ })
131
+ })()
132
+ </script>
133
+
134
  </body>
135
  </html>