Update app.py

app.py

@@ -50,109 +50,66 @@ spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
 portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
 
 # Function to filter dishes based on category
-def filter_dishes(category):
-    if category == "ALL":
-        return menu_data
-    return [dish for dish in menu_data if dish["category"] == category]
-
-# Function to display dishes with images
-def display_dishes(category):
-    filtered_dishes = filter_dishes(category)
-    html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
-    for dish in filtered_dishes:
-        html_content += f"""
-        <div style='margin: 10px; text-align: center; cursor: pointer; border: 1px solid #ddd; 
-                    padding: 10px; border-radius: 10px; width: 200px; background-color: #f9f9f9;'
-             onclick='selectDish(\"{dish['name']}\")'>
-            <img src='{dish['image']}' alt='{dish['name']}' 
-                 style='width: 180px; height: 120px; object-fit: cover; border-radius: 10px;'>
-            <h4 style='margin-top: 10px; font-size: 16px; color: #444;'>{dish['name']}</h4>
-        </div>
-        """
-    html_content += "</div>"
-    return html_content
-
-# Function to fetch details of the selected dish
 def get_dish_details(dish_name):
     if dish_name in dish_data:
         main_image = dish_data[dish_name]["main"]
-        return main_image, dish_name, "Select a portion size and spice level below:"
-    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available."
+        return main_image, dish_name, "Select portion size and spice level below:", gr.update(visible=True)
+    return None, "Unknown Dish", "No description available.", gr.update(visible=False)
 
-# Function to display the portion size image
+# Function to display portion size image
 def display_portion(dish_name, portion):
     if dish_name in dish_data:
-        return dish_data[dish_name].get(portion, None)
+        return dish_data[dish_name].get(portion.lower(), None)
     return None
 
 # Function to simulate placing an order
 def place_order(dish_name, spice_level, portion_size):
     return f"✅ Order Confirmed: '{dish_name}' with {spice_level} spice level and {portion_size} portion size."
 
-# Main Gradio App
+# Gradio App
 with gr.Blocks() as demo:
-    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
+    gr.Markdown("# Food Ordering System")
 
-    # Buttons for category selection
-    gr.Markdown("### Select a Category")
+    # Dish selection buttons
     with gr.Row():
-        btn_all = gr.Button("ALL")
-        btn_vegan = gr.Button("VEGAN")
-        btn_halal = gr.Button("HALAL")
-
-    # Dish display section
-    gr.Markdown("### Available Dishes")
-    dish_display = gr.HTML(value=display_dishes("ALL"))
-
-    # Popup for Dish Details
-    with gr.Modal("Dish Details") as dish_modal:
-        dish_image = gr.Image(label="Dish Image", height=200, width=200)
-        dish_name = gr.Textbox(label="Dish Name", interactive=False)
+        for dish in dish_data.keys():
+            gr.Button(dish).click(
+                fn=get_dish_details,
+                inputs=[gr.Textbox(value=dish, visible=False)],
+                outputs=[
+                    gr.Image(label="Dish Image"),
+                    gr.Text(label="Dish Name"),
+                    gr.Text(label="Dish Description"),
+                    gr.Row(visible=False),
+                ],
+            )
+
+    # Dish details section (simulated modal)
+    with gr.Row(visible=False) as details_section:
+        dish_image = gr.Image(label="Dish Image")
         with gr.Column():
+            dish_name = gr.Textbox(label="Dish Name", interactive=False)
+            dish_description = gr.Textbox(label="Dish Description", interactive=False)
             spice_dropdown = gr.Radio(label="Select Spice Level", choices=spice_options, value="🌶 Medium")
-            portion_dropdown = gr.Radio(label="Select Portion Size", choices=["small", "medium", "large"], value="medium")
+            portion_dropdown = gr.Radio(label="Select Portion Size", choices=portion_options, value="Medium")
             portion_image = gr.Image(label="Portion Size Image")
 
-    # Place Order Button inside Modal
+    # Event: Update portion size image
+    portion_dropdown.change(
+        fn=display_portion,
+        inputs=[dish_name, portion_dropdown],
+        outputs=portion_image,
+    )
+
+    # Place Order button
     place_order_btn = gr.Button("Place Order")
     order_status = gr.Textbox(label="Order Status", interactive=False)
 
-    # Event: Update dish display for selected category
-    def update_dishes(category):
-        return gr.update(value=display_dishes(category))
-
-    btn_all.click(fn=lambda: update_dishes("ALL"), outputs=dish_display)
-    btn_vegan.click(fn=lambda: update_dishes("VEGAN"), outputs=dish_display)
-    btn_halal.click(fn=lambda: update_dishes("HALAL"), outputs=dish_display)
-
-    # Event: Show dish details in the modal when a dish is selected
-    def show_dish_details(dish_name):
-        image, name, description = get_dish_details(dish_name)
-        dish_modal.show()
-        return image, name, description
-
-    # Hidden input to receive dish name from JavaScript
-    selected_dish_name = gr.Textbox(visible=False)
-    selected_dish_name.change(fn=show_dish_details, inputs=selected_dish_name,
-                              outputs=[dish_image, dish_name, dish_modal])
-
-    # Event: Display portion size image
-    portion_dropdown.change(fn=display_portion, inputs=[selected_dish_name, portion_dropdown], outputs=portion_image)
-
-    # Event: Place order button
-    place_order_btn.click(fn=place_order, 
-                          inputs=[dish_name, spice_dropdown, portion_dropdown], 
-                          outputs=order_status)
-
-    # Inject JavaScript to handle clicks and pass dish names
-    gr.HTML("""
-    <script>
-    function selectDish(dishName) {
-        let input = document.querySelector('input[aria-label="selected_dish_name"]');
-        input.value = dishName;
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-    }
-    </script>
-    """)
+    # Event: Place order
+    place_order_btn.click(
+        fn=place_order,
+        inputs=[dish_name, spice_dropdown, portion_dropdown],
+        outputs=order_status,
+    )
 
-demo.launch()
+demo.launch()