Update app.py

app.py

@@ -102,109 +102,130 @@ def fetch_recipe_image(recipe_name):
     else:
         return "No matching recipe found. Please check the recipe name."
 
-# Gradio interface with updated vibrant colors and higher contrast for better readability
+# Gradio interface with updated professional design
 def main():
     with gr.Blocks(css="""
+        /* General Body Styling */
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #1c1c1c;  /* Dark background for high contrast */
+            background-color: #f5f5f5;  /* Light background */
             margin: 0;
             padding: 0;
-            color: #e0e0e0;  /* Light text for contrast */
+            color: #333;  /* Dark text */
         }
-        .chat-container {
-            max-width: 800px;
-            margin: 30px auto;
+
+        /* Header Styling */
+        .header {
+            background-color: #006064; /* Professional Blue */
+            color: white;
             padding: 20px;
-            background: #333333;  /* Dark gray background */
-            border-radius: 16px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-        }
-        .chat-header {
-            text-align: center;
-            font-size: 32px;
+            font-size: 24px;
             font-weight: bold;
-            color: #ff9800;  /* Orange for visibility */
+            text-align: center;
+            border-radius: 10px;
+        }
+
+        /* Card Style for Tabs */
+        .tab-container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            margin-top: 20px;
+        }
+
+        /* Card for each input section */
+        .card {
+            background-color: #ffffff;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
             margin-bottom: 20px;
         }
-        .chat-input {
+
+        .card-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: #006064;
+            margin-bottom: 10px;
+        }
+
+        /* Inputs and Buttons */
+        .input-text, .radio, .button {
             width: 100%;
-            padding: 14px;
+            padding: 12px;
+            border-radius: 8px;
+            border: 1px solid #ddd;
+            background-color: #f5f5f5;
+            color: #333;
             font-size: 16px;
-            border-radius: 12px;
-            border: 1px solid #ff9800;  /* Orange border */
-            margin-bottom: 15px;
-            background-color: #424242;  /* Dark input field */
-            color: #e0e0e0;  /* Light text */
         }
-        .chat-button {
-            background-color: #ff9800;
+
+        .input-text:focus, .radio:focus, .button:focus {
+            border-color: #006064;
+        }
+
+        .button {
+            background-color: #006064;
             color: white;
-            border: none;
-            padding: 12px 24px;
-            font-size: 16px;
-            border-radius: 12px;
+            font-weight: bold;
             cursor: pointer;
         }
-        .chat-button:hover {
-            background-color: #e65100;  /* Darker orange for hover */
+
+        .button:hover {
+            background-color: #004d40; /* Darker shade of blue on hover */
         }
-        .chat-output {
-            padding: 15px;
-            background: #424242;  /* Dark gray background for output */
-            border-radius: 10px;
-            border: 1px solid #616161;  /* Light gray border */
-            color: #e0e0e0;  /* Light text */
+
+        /* Output Box */
+        .output-box {
+            background-color: #ffffff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            font-size: 16px;
+            color: #333;
+            max-height: 350px;
+            overflow-y: auto;
             white-space: pre-wrap;
-            min-height: 120px;
         }
+
+        .output-box img {
+            max-width: 100%;
+            border-radius: 8px;
+        }
+
+        /* Tab Title */
         .tab-title {
-            font-weight: bold;
             font-size: 22px;
-            color: #ff9800;  /* Orange text for tab title */
-        }
-        .tab-button {
-            background-color: #616161;
-            color: #ff9800;
-            border: 1px solid #ff9800;
-            padding: 12px;
-            border-radius: 12px;
-        }
-        .tab-button:hover {
-            background-color: #ff5722;  /* Bright orange for tab button hover */
-        }
-        .icon {
-            font-size: 20px;
-            margin-right: 10px;
-        }
-        .gradio-container {
-            margin-top: 20px;
+            font-weight: bold;
+            color: #006064;
+            margin-bottom: 10px;
         }
     """) as app:
-
+        
         with gr.Tab("Recipe Generator"):
-            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>")
-            recipe_input = gr.Textbox(label="Enter Recipe Name or Ingredients", placeholder="e.g., Chicken curry or chicken, garlic, onions", elem_classes=["chat-input"])
-            selected_cuisine = gr.Radio(choices=cuisines, label="Cuisine", value="Indian")
-            selected_model = gr.Radio(choices=list(models.keys()), label="Model", value="Flan-T5 Small")
-            recipe_output = gr.Textbox(label="Recipe", lines=15, elem_classes=["chat-output"])
-            generate_button = gr.Button("Generate Recipe", elem_classes=["chat-button"])
-            generate_button.click(generate_recipe, inputs=[recipe_input, selected_model, selected_cuisine], outputs=recipe_output)
+            gr.HTML("<div class='header'>Recipe Generator</div>")
+            with gr.Column(visible=True):
+                with gr.Box(elem_classes=["tab-container"]):
+                    recipe_input = gr.Textbox(label="Enter Recipe Name or Ingredients", placeholder="e.g., Chicken curry or chicken, garlic, onions", elem_classes=["input-text"])
+                    selected_cuisine = gr.Radio(choices=cuisines, label="Cuisine", value="Indian", elem_classes=["radio"])
+                    selected_model = gr.Radio(choices=list(models.keys()), label="Model", value="Flan-T5 Small", elem_classes=["radio"])
+                    generate_button = gr.Button("Generate Recipe", elem_classes=["button"])
+                    recipe_output = gr.Textbox(label="Recipe", lines=15, elem_classes=["output-box"])
+
+                    generate_button.click(generate_recipe, inputs=[recipe_input, selected_model, selected_cuisine], outputs=recipe_output)
 
         with gr.Tab("Recipe Finder from Image"):
-            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>")
-            image_input = gr.Image(type="filepath", label="Upload an Image")
-            image_output = gr.Textbox(label="Recipe Details", lines=10, elem_classes=["chat-output"])
-            image_input.change(get_recipe_details, inputs=image_input, outputs=image_output)
+            gr.HTML("<div class='header'>Recipe Finder from Image</div>")
+            with gr.Column(visible=True):
+                with gr.Box(elem_classes=["tab-container"]):
+                    image_input = gr.Image(type="filepath", label="Upload an Image")
+                    image_output = gr.Textbox(label="Recipe Details", lines=10, elem_classes=["output-box"])
+                    image_input.change(get_recipe_details, inputs=image_input, outputs=image_output)
 
         with gr.Tab("Recipe Image Search"):
-            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>")
-            recipe_name_input = gr.Textbox(label="Recipe Name", placeholder="e.g., Mixed Sprouts in Chettinad Masala Recipe", elem_classes=["chat-input"])
-            recipe_image_output = gr.Image(label="Recipe Image")
-            fetch_image_button = gr.Button("Generate Image", elem_classes=["chat-button"])
-            fetch_image_button.click(fetch_recipe_image, inputs=recipe_name_input, outputs=recipe_image_output)
-
-    app.launch()
-
-if __name__ == "__main__":
-    main()
+            gr.HTML("<div class='header'>Recipe Image Search</div>")
+            with gr.Column(visible=True):
+                with gr.Box(elem_classes=["tab-container"]):
+                    recipe_name_input = gr.Textbox(label="Recipe Name", placeholder="e.g., Mixed Sprouts in Chettinad Masala Recipe", elem_classes=["input-text"])
+                    fetch_image_button