DynamicMenuApp3 / app.py
nagasurendra's picture
Update app.py
92b51ea verified
raw
history blame
4.33 kB
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()">&times;</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()