Create app.py

app.py

@@ -0,0 +1,102 @@
+import gradio as gr
+
+# Extended menu data with dish details
+menu_data = [
+    {"name": "Veg Burger", "category": "VEGAN",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg",
+     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
+     "spice_level": "Medium", "portion_size": "Regular"},
+    {"name": "Chicken Biryani", "category": "HALAL",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg",
+     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
+     "spice_level": "High", "portion_size": "Large"},
+    {"name": "Paneer Butter Masala", "category": "VEGAN",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg",
+     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
+     "spice_level": "Mild", "portion_size": "Medium"},
+    {"name": "Beef Steak", "category": "HALAL",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/d/d5/Beef_Steak.jpg",
+     "description": "Juicy beef steak served with mashed potatoes and grilled vegetables.",
+     "spice_level": "Medium", "portion_size": "Large"},
+    {"name": "Mushroom Soup", "category": "VEGAN",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3c/Mushroom_Soup.jpg",
+     "description": "Creamy mushroom soup with fresh herbs.",
+     "spice_level": "Mild", "portion_size": "Small"}
+]
+
+spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
+portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
+
+# Function to display dishes dynamically
+def display_dishes():
+    html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
+    for dish in menu_data:
+        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 get dish details
+def get_dish_details(dish_name):
+    for dish in menu_data:
+        if dish["name"] == dish_name:
+            return dish["image"], dish["name"], dish["description"], spice_options[1], portion_options[1]
+    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available.", "🌶 Medium", "🍽 Medium"
+
+# 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."
+
+# Gradio App
+with gr.Blocks() as demo:
+    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
+
+    # Display available dishes
+    dish_display = gr.HTML(value=display_dishes())
+
+    # Dish Details Section
+    gr.Markdown("### Dish Details")
+    with gr.Row():
+        dish_image = gr.Image(label="Dish Image", height=200, width=200)
+        with gr.Column():
+            dish_name = gr.Textbox(label="Dish Name", interactive=False)
+            dish_description = gr.Textbox(label="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=portion_options, value="🍽 Medium")
+            place_order_btn = gr.Button("Place Order")
+            order_status = gr.Textbox(label="Order Status", interactive=False)
+
+    # Event to show dish details
+    def update_dish_details(dish_name):
+        return get_dish_details(dish_name)
+
+    # Hidden textbox to capture JavaScript input
+    selected_dish_name = gr.Textbox(visible=False)
+    selected_dish_name.change(
+        fn=update_dish_details, 
+        inputs=selected_dish_name, 
+        outputs=[dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown]
+    )
+
+    # Place Order Event
+    place_order_btn.click(fn=place_order, inputs=[dish_name, spice_dropdown, portion_dropdown], outputs=order_status)
+
+    # JavaScript to select dish and trigger event
+    gr.HTML("""
+    <script>
+    function selectDish(dishName) {
+        const input = document.querySelector('input[aria-label="selected_dish_name"]');
+        input.value = dishName;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    </script>
+    """)
+
+demo.launch()