Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import pandas as pd | |
| # Function to load the menu data from Excel | |
| def load_menu(): | |
| menu_file = "menu.xlsx" # Ensure this file exists in the same directory | |
| try: | |
| return pd.read_excel(menu_file) | |
| except Exception as e: | |
| raise ValueError(f"Error loading menu file: {e}") | |
| # Function to filter menu items based on preference | |
| def filter_menu(preference): | |
| # Load menu data | |
| menu_data = load_menu() | |
| # Define filter conditions | |
| if preference == "Halal/Non-Veg": | |
| filtered_data = menu_data[menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)] | |
| elif preference == "Vegetarian": | |
| filtered_data = menu_data[~menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)] | |
| elif preference == "Guilt-Free": | |
| filtered_data = menu_data[menu_data["Description"].str.contains(r"Fat: ([0-9]|10)g", case=False, na=False)] | |
| else: # Default to "All" | |
| filtered_data = menu_data | |
| # Generate HTML for the menu | |
| html_content = "" | |
| for _, item in filtered_data.iterrows(): | |
| html_content += f""" | |
| <div class="menu-card"> | |
| <div class="menu-card-details"> | |
| <h3>{item['Dish Name']}</h3> | |
| <p>${item['Price ($)']}</p> | |
| <p>{item['Description']}</p> | |
| </div> | |
| <div class="menu-card-actions"> | |
| <img src="{item['Image URL']}" alt="{item['Dish Name']}" class="menu-card-image"> | |
| <button onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')" class="add-button">Add</button> | |
| </div> | |
| </div> | |
| """ | |
| return html_content | |
| # Gradio app definition | |
| def app(): | |
| with gr.Blocks(css="style.css") as demo: | |
| gr.Markdown("## Dynamic Menu with Preferences") | |
| # Radio button for selecting preference | |
| selected_preference = gr.Radio( | |
| choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"], | |
| value="All", | |
| label="Choose a Preference", | |
| ) | |
| # Output area for menu items | |
| menu_output = gr.HTML(value=filter_menu("All")) | |
| # Modal window (hidden by default) | |
| modal_window = gr.HTML(""" | |
| <div id="modal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-button" onclick="closeModal()">×</span> | |
| <img id="modal-image" class="modal-image" /> | |
| <h2 id="modal-name"></h2> | |
| <p id="modal-description"></p> | |
| <p id="modal-price"></p> | |
| <label for="spice-level">Choose Spice Level:</label> | |
| <select id="spice-level"> | |
| <option value="Mild">Mild</option> | |
| <option value="Medium">Medium</option> | |
| <option value="Spicy">Spicy</option> | |
| </select> | |
| <label for="quantity">Quantity:</label> | |
| <input type="number" id="quantity" value="1" min="1" /> | |
| <textarea id="special-instructions" placeholder="Add special instructions here..."></textarea> | |
| <button class="modal-add-button">Add to Cart</button> | |
| </div> | |
| </div> | |
| <script> | |
| function openModal(name, image, description, price) { | |
| document.getElementById("modal").style.display = "block"; | |
| document.getElementById("modal-image").src = image; | |
| document.getElementById("modal-name").innerText = name; | |
| document.getElementById("modal-description").innerText = description; | |
| document.getElementById("modal-price").innerText = price; | |
| } | |
| function closeModal() { | |
| document.getElementById("modal").style.display = "none"; | |
| } | |
| </script> | |
| """) | |
| # Interactivity | |
| selected_preference.change(filter_menu, inputs=[selected_preference], outputs=[menu_output]) | |
| # Layout | |
| with gr.Row(): | |
| selected_preference | |
| with gr.Row(): | |
| menu_output | |
| with gr.Row(): | |
| modal_window | |
| return demo | |
| # Run the app | |
| if __name__ == "__main__": | |
| demo = app() | |
| demo.launch() | |