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() | |