Poonawala commited on
Commit
73961e4
·
verified ·
1 Parent(s): 1bab79f

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +98 -77
app.py CHANGED
@@ -102,109 +102,130 @@ def fetch_recipe_image(recipe_name):
102
  else:
103
  return "No matching recipe found. Please check the recipe name."
104
 
105
- # Gradio interface with updated vibrant colors and higher contrast for better readability
106
  def main():
107
  with gr.Blocks(css="""
 
108
  body {
109
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
110
- background-color: #1c1c1c; /* Dark background for high contrast */
111
  margin: 0;
112
  padding: 0;
113
- color: #e0e0e0; /* Light text for contrast */
114
  }
115
- .chat-container {
116
- max-width: 800px;
117
- margin: 30px auto;
 
 
118
  padding: 20px;
119
- background: #333333; /* Dark gray background */
120
- border-radius: 16px;
121
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
122
- }
123
- .chat-header {
124
- text-align: center;
125
- font-size: 32px;
126
  font-weight: bold;
127
- color: #ff9800; /* Orange for visibility */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  margin-bottom: 20px;
129
  }
130
- .chat-input {
 
 
 
 
 
 
 
 
 
131
  width: 100%;
132
- padding: 14px;
 
 
 
 
133
  font-size: 16px;
134
- border-radius: 12px;
135
- border: 1px solid #ff9800; /* Orange border */
136
- margin-bottom: 15px;
137
- background-color: #424242; /* Dark input field */
138
- color: #e0e0e0; /* Light text */
139
  }
140
- .chat-button {
141
- background-color: #ff9800;
 
 
 
 
 
142
  color: white;
143
- border: none;
144
- padding: 12px 24px;
145
- font-size: 16px;
146
- border-radius: 12px;
147
  cursor: pointer;
148
  }
149
- .chat-button:hover {
150
- background-color: #e65100; /* Darker orange for hover */
 
151
  }
152
- .chat-output {
153
- padding: 15px;
154
- background: #424242; /* Dark gray background for output */
155
- border-radius: 10px;
156
- border: 1px solid #616161; /* Light gray border */
157
- color: #e0e0e0; /* Light text */
 
 
 
 
 
158
  white-space: pre-wrap;
159
- min-height: 120px;
160
  }
 
 
 
 
 
 
 
161
  .tab-title {
162
- font-weight: bold;
163
  font-size: 22px;
164
- color: #ff9800; /* Orange text for tab title */
165
- }
166
- .tab-button {
167
- background-color: #616161;
168
- color: #ff9800;
169
- border: 1px solid #ff9800;
170
- padding: 12px;
171
- border-radius: 12px;
172
- }
173
- .tab-button:hover {
174
- background-color: #ff5722; /* Bright orange for tab button hover */
175
- }
176
- .icon {
177
- font-size: 20px;
178
- margin-right: 10px;
179
- }
180
- .gradio-container {
181
- margin-top: 20px;
182
  }
183
  """) as app:
184
-
185
  with gr.Tab("Recipe Generator"):
186
- gr.HTML("<div class='chat-container'><div class='chat-header'><i class='icon'>🍽</i>Recipe Generator</div><p class='tab-title'>Enter a recipe name or ingredients, select a cuisine and model, and get structured recipe instructions!</p></div>")
187
- recipe_input = gr.Textbox(label="Enter Recipe Name or Ingredients", placeholder="e.g., Chicken curry or chicken, garlic, onions", elem_classes=["chat-input"])
188
- selected_cuisine = gr.Radio(choices=cuisines, label="Cuisine", value="Indian")
189
- selected_model = gr.Radio(choices=list(models.keys()), label="Model", value="Flan-T5 Small")
190
- recipe_output = gr.Textbox(label="Recipe", lines=15, elem_classes=["chat-output"])
191
- generate_button = gr.Button("Generate Recipe", elem_classes=["chat-button"])
192
- generate_button.click(generate_recipe, inputs=[recipe_input, selected_model, selected_cuisine], outputs=recipe_output)
 
 
 
193
 
194
  with gr.Tab("Recipe Finder from Image"):
195
- gr.HTML("<div class='chat-container'><div class='chat-header'><i class='icon'>📸</i>Recipe Finder from Image</div><p class='tab-title'>Upload an image of a dish to find a matching recipe.</p></div>")
196
- image_input = gr.Image(type="filepath", label="Upload an Image")
197
- image_output = gr.Textbox(label="Recipe Details", lines=10, elem_classes=["chat-output"])
198
- image_input.change(get_recipe_details, inputs=image_input, outputs=image_output)
 
 
199
 
200
  with gr.Tab("Recipe Image Search"):
201
- gr.HTML("<div class='chat-container'><div class='chat-header'><i class='icon'>📷</i>Recipe Image Search</div><p class='tab-title'>Enter the name of a recipe to view its image.</p></div>")
202
- recipe_name_input = gr.Textbox(label="Recipe Name", placeholder="e.g., Mixed Sprouts in Chettinad Masala Recipe", elem_classes=["chat-input"])
203
- recipe_image_output = gr.Image(label="Recipe Image")
204
- fetch_image_button = gr.Button("Generate Image", elem_classes=["chat-button"])
205
- fetch_image_button.click(fetch_recipe_image, inputs=recipe_name_input, outputs=recipe_image_output)
206
-
207
- app.launch()
208
-
209
- if __name__ == "__main__":
210
- main()
 
102
  else:
103
  return "No matching recipe found. Please check the recipe name."
104
 
105
+ # Gradio interface with updated professional design
106
  def main():
107
  with gr.Blocks(css="""
108
+ /* General Body Styling */
109
  body {
110
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
111
+ background-color: #f5f5f5; /* Light background */
112
  margin: 0;
113
  padding: 0;
114
+ color: #333; /* Dark text */
115
  }
116
+
117
+ /* Header Styling */
118
+ .header {
119
+ background-color: #006064; /* Professional Blue */
120
+ color: white;
121
  padding: 20px;
122
+ font-size: 24px;
 
 
 
 
 
 
123
  font-weight: bold;
124
+ text-align: center;
125
+ border-radius: 10px;
126
+ }
127
+
128
+ /* Card Style for Tabs */
129
+ .tab-container {
130
+ background-color: white;
131
+ padding: 20px;
132
+ border-radius: 8px;
133
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
134
+ margin-top: 20px;
135
+ }
136
+
137
+ /* Card for each input section */
138
+ .card {
139
+ background-color: #ffffff;
140
+ padding: 15px;
141
+ border-radius: 8px;
142
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
143
  margin-bottom: 20px;
144
  }
145
+
146
+ .card-title {
147
+ font-size: 18px;
148
+ font-weight: bold;
149
+ color: #006064;
150
+ margin-bottom: 10px;
151
+ }
152
+
153
+ /* Inputs and Buttons */
154
+ .input-text, .radio, .button {
155
  width: 100%;
156
+ padding: 12px;
157
+ border-radius: 8px;
158
+ border: 1px solid #ddd;
159
+ background-color: #f5f5f5;
160
+ color: #333;
161
  font-size: 16px;
 
 
 
 
 
162
  }
163
+
164
+ .input-text:focus, .radio:focus, .button:focus {
165
+ border-color: #006064;
166
+ }
167
+
168
+ .button {
169
+ background-color: #006064;
170
  color: white;
171
+ font-weight: bold;
 
 
 
172
  cursor: pointer;
173
  }
174
+
175
+ .button:hover {
176
+ background-color: #004d40; /* Darker shade of blue on hover */
177
  }
178
+
179
+ /* Output Box */
180
+ .output-box {
181
+ background-color: #ffffff;
182
+ padding: 20px;
183
+ border-radius: 8px;
184
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
185
+ font-size: 16px;
186
+ color: #333;
187
+ max-height: 350px;
188
+ overflow-y: auto;
189
  white-space: pre-wrap;
 
190
  }
191
+
192
+ .output-box img {
193
+ max-width: 100%;
194
+ border-radius: 8px;
195
+ }
196
+
197
+ /* Tab Title */
198
  .tab-title {
 
199
  font-size: 22px;
200
+ font-weight: bold;
201
+ color: #006064;
202
+ margin-bottom: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
203
  }
204
  """) as app:
205
+
206
  with gr.Tab("Recipe Generator"):
207
+ gr.HTML("<div class='header'>Recipe Generator</div>")
208
+ with gr.Column(visible=True):
209
+ with gr.Box(elem_classes=["tab-container"]):
210
+ recipe_input = gr.Textbox(label="Enter Recipe Name or Ingredients", placeholder="e.g., Chicken curry or chicken, garlic, onions", elem_classes=["input-text"])
211
+ selected_cuisine = gr.Radio(choices=cuisines, label="Cuisine", value="Indian", elem_classes=["radio"])
212
+ selected_model = gr.Radio(choices=list(models.keys()), label="Model", value="Flan-T5 Small", elem_classes=["radio"])
213
+ generate_button = gr.Button("Generate Recipe", elem_classes=["button"])
214
+ recipe_output = gr.Textbox(label="Recipe", lines=15, elem_classes=["output-box"])
215
+
216
+ generate_button.click(generate_recipe, inputs=[recipe_input, selected_model, selected_cuisine], outputs=recipe_output)
217
 
218
  with gr.Tab("Recipe Finder from Image"):
219
+ gr.HTML("<div class='header'>Recipe Finder from Image</div>")
220
+ with gr.Column(visible=True):
221
+ with gr.Box(elem_classes=["tab-container"]):
222
+ image_input = gr.Image(type="filepath", label="Upload an Image")
223
+ image_output = gr.Textbox(label="Recipe Details", lines=10, elem_classes=["output-box"])
224
+ image_input.change(get_recipe_details, inputs=image_input, outputs=image_output)
225
 
226
  with gr.Tab("Recipe Image Search"):
227
+ gr.HTML("<div class='header'>Recipe Image Search</div>")
228
+ with gr.Column(visible=True):
229
+ with gr.Box(elem_classes=["tab-container"]):
230
+ recipe_name_input = gr.Textbox(label="Recipe Name", placeholder="e.g., Mixed Sprouts in Chettinad Masala Recipe", elem_classes=["input-text"])
231
+ fetch_image_button