Spaces:
Sleeping
Sleeping
File size: 4,044 Bytes
ba4dd53 807b0c3 ba4dd53 807b0c3 ba4dd53 118d5fd 37e70db ba4dd53 0f06d66 118d5fd 37e70db 0f06d66 37e70db 0f06d66 807b0c3 0f06d66 807b0c3 37e70db 118d5fd 37e70db c6f513e 0f06d66 118d5fd 0d58d8b 0f06d66 4b578a2 6b86d43 118d5fd 0f06d66 4b578a2 118d5fd 0f06d66 f690d7c 6b86d43 4b578a2 0f06d66 7980609 37e70db 7980609 06b4e04 7980609 6b86d43 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import gradio as gr
import pandas as pd
# Function to load menu data
def load_menu():
try:
return pd.read_excel("menu.xlsx")
except Exception as e:
raise ValueError(f"Error loading menu file: {e}")
# Function to filter menu items
def filter_menu(preference):
menu_data = load_menu()
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 menu items
html_content = ""
for _, item in filtered_data.iterrows():
html_content += f"""
<div class="menu-card">
<div class="menu-card-content">
<h3>{item['Dish Name']}</h3>
<p>{item['Description']}</p>
<p><strong>${item['Price ($)']}</strong></p>
</div>
<div class="menu-card-actions">
<img src="{item['Image URL']}" alt="{item['Dish Name']}" class="menu-card-image">
<button class="add-button" onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')">Add</button>
</div>
</div>
"""
return html_content
# Main Gradio App
def app():
with gr.Blocks(css="style.css") as demo:
gr.Markdown("## Dynamic Menu with Preferences")
# Menu and Filter Section
preference_selector = gr.Radio(
choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
value="All",
label="Choose a Preference"
)
menu_output = gr.HTML(value=filter_menu("All"))
# Modal Logic Injected via HTML
modal_logic = 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>
""")
# Layout
with gr.Row():
preference_selector.change(filter_menu, inputs=[preference_selector], outputs=[menu_output])
with gr.Row():
menu_output
with gr.Row():
modal_logic
return demo
if __name__ == "__main__":
app().launch()
|