Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| # Extended menu data with dish details | |
| menu_data = [ | |
| {"name": "Veg Burger", "category": "VEGAN", | |
| "image": "https://tse4.mm.bing.net/th?id=OIP.D-CrCFm5OSRi_pzqlRjfXQHaE8&pid=Api&P=0&h=180", | |
| "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"} | |
| ] | |
| # Define available dishes and their portion sizes with image paths | |
| dish_data = { | |
| "Veg Burger": { | |
| "main": "pizza_main.jpg", | |
| "small": "pizza_small.jpg", | |
| "medium": "pizza_medium.jpg", | |
| "large": "pizza_large.jpg", | |
| }, | |
| "Chicken Biryani": { | |
| "main": "pizza_main.jpg", | |
| "small": "pizza_small.jpg", | |
| "medium": "pizza_medium.jpg", | |
| "large": "pizza_large.jpg", | |
| }, | |
| "Paneer Butter Masala": { | |
| "main": "pizza_main.jpg", | |
| "small": "pizza_small.jpg", | |
| "medium": "pizza_medium.jpg", | |
| "large": "pizza_large.jpg", | |
| }, | |
| } | |
| 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 below:" | |
| return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available." | |
| # Function to display the portion size image | |
| def display_portion(dish_name, portion): | |
| if dish_name in dish_data: | |
| return dish_data[dish_name].get(portion, 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 | |
| with gr.Blocks() as demo: | |
| gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>") | |
| # Buttons for category selection | |
| gr.Markdown("### Select a Category") | |
| 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")) | |
| # 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=["small", "medium", "large"], value="medium") | |
| portion_image = gr.Image(label="Portion Size 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 when a dish is selected | |
| def show_dish_details(dish_name): | |
| image, name, description = get_dish_details(dish_name) | |
| 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_description]) | |
| # 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> | |
| """) | |
| demo.launch() | |