Update app.py
Browse files
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
|
106 |
def main():
|
107 |
with gr.Blocks(css="""
|
|
|
108 |
body {
|
109 |
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
110 |
-
background-color: #
|
111 |
margin: 0;
|
112 |
padding: 0;
|
113 |
-
color: #
|
114 |
}
|
115 |
-
|
116 |
-
|
117 |
-
|
|
|
|
|
118 |
padding: 20px;
|
119 |
-
|
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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
128 |
margin-bottom: 20px;
|
129 |
}
|
130 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
131 |
width: 100%;
|
132 |
-
padding:
|
|
|
|
|
|
|
|
|
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 |
-
|
141 |
-
|
|
|
|
|
|
|
|
|
|
|
142 |
color: white;
|
143 |
-
|
144 |
-
padding: 12px 24px;
|
145 |
-
font-size: 16px;
|
146 |
-
border-radius: 12px;
|
147 |
cursor: pointer;
|
148 |
}
|
149 |
-
|
150 |
-
|
|
|
151 |
}
|
152 |
-
|
153 |
-
|
154 |
-
|
155 |
-
|
156 |
-
|
157 |
-
|
|
|
|
|
|
|
|
|
|
|
158 |
white-space: pre-wrap;
|
159 |
-
min-height: 120px;
|
160 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
161 |
.tab-title {
|
162 |
-
font-weight: bold;
|
163 |
font-size: 22px;
|
164 |
-
|
165 |
-
|
166 |
-
|
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='
|
187 |
-
|
188 |
-
|
189 |
-
|
190 |
-
|
191 |
-
|
192 |
-
|
|
|
|
|
|
|
193 |
|
194 |
with gr.Tab("Recipe Finder from Image"):
|
195 |
-
gr.HTML("<div class='
|
196 |
-
|
197 |
-
|
198 |
-
|
|
|
|
|
199 |
|
200 |
with gr.Tab("Recipe Image Search"):
|
201 |
-
gr.HTML("<div class='
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
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
|
|
|
|
|
|
|
|
|
|