Hugging Face's logo

Spaces:
DSatishchandra
/
DynamicMenuApp
Sleeping

App Files Community
2

Update templates/index.html

#2
by geethareddy - opened
base: refs/heads/main
←
from: refs/pr/2
Discussion Files changed
+110
-64
Files changed (1) hide show
  1. templates/index.html +110 -64
templates/index.html CHANGED
@@ -1,66 +1,112 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Dynamic Menu</title>
7
- <link rel="stylesheet" href="/static/styles.css">
8
- <script>
9
- // Function to handle pop-up
10
- function openPopup(dishName) {
11
- fetch("/menu_item", {
12
- method: "POST",
13
- headers: { "Content-Type": "application/json" },
14
- body: JSON.stringify({ dish_name: dishName }),
15
- })
16
- .then(response => response.json())
17
- .then(data => {
18
- if (data.error) {
19
- alert(data.error);
20
- } else {
21
- const popup = document.getElementById("popup");
22
- popup.innerHTML = `
23
- <h2>${data["Dish Name"]}</h2>
24
- <img src="${data["Image URL"]}" alt="${data["Dish Name"]}">
25
- <p><strong>Description:</strong> ${data["Description"]}</p>
26
- <p><strong>Ingredients:</strong> ${data["Ingredients"]}</p>
27
- <p><strong>Allergen Info:</strong> ${data["Allergen Info"]}</p>
28
- <p><strong>Recommended Items:</strong> ${data["Recommended Items"]}</p>
29
- <p><strong>Spice Levels:</strong> ${data["Spice Levels"]}</p>
30
- <button onclick="closePopup()">Close</button>
31
- `;
32
- popup.style.display = "block";
33
- }
34
- });
35
- }
36
 
37
- // Function to close the pop-up
38
- function closePopup() {
39
- document.getElementById("popup").style.display = "none";
 
 
 
 
 
 
 
 
40
  }
41
- </script>
42
- </head>
43
- <body>
44
- <h1>Dynamic Menu</h1>
45
- <div id="menu-container">
46
- {% for category, items in menu.items() %}
47
- <div class="menu-category">
48
- <h2>{{ category }}</h2>
49
- <div class="menu-items">
50
- {% for item in items %}
51
- <div class="menu-item">
52
- <img src="{{ item['Image URL'] }}" alt="{{ item['Dish Name'] }}">
53
- <h3>{{ item['Dish Name'] }}</h3>
54
- <p>${{ item['Price'] }}</p>
55
- <button onclick="openPopup('{{ item['Dish Name'] }}')">Add</button>
56
- </div>
57
- {% endfor %}
58
- </div>
59
- </div>
60
- {% endfor %}
61
- </div>
62
-
63
- <!-- Pop-Up Modal -->
64
- <div id="popup" class="popup"></div>
65
- </body>
66
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+ import pandas as pd
3
+
4
+ # Load menu data
5
+ menu_data = pd.read_excel("menu.xlsx")
6
+
7
+ # Function to handle pop-up and cart updates
8
+ cart = []
9
+
10
+
11
+ def show_item_details(item_name):
12
+ item = menu_data[menu_data["Dish Name"] == item_name].iloc[0]
13
+ return (
14
+ item["Image URL"],
15
+ item["Dish Name"],
16
+ item["Price ($)"],
17
+ item["Description"],
18
+ )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
 
20
+
21
+ def add_to_cart(item_name, quantity, spice_level, extras, special_instructions):
22
+ item = menu_data[menu_data["Dish Name"] == item_name].iloc[0]
23
+ cart.append(
24
+ {
25
+ "name": item_name,
26
+ "price": item["Price ($)"],
27
+ "quantity": quantity,
28
+ "spice_level": spice_level,
29
+ "extras": extras,
30
+ "special_instructions": special_instructions,
31
  }
32
+ )
33
+ return f"Added {item_name} to cart."
34
+
35
+
36
+ def get_cart():
37
+ return pd.DataFrame(cart)
38
+
39
+
40
+ def clear_cart():
41
+ global cart
42
+ cart = []
43
+ return "Cart cleared."
44
+
45
+
46
+ # Gradio UI
47
+ def app():
48
+ with gr.Blocks() as demo:
49
+ gr.Markdown("### Dynamic Menu with Preferences")
50
+
51
+ # Menu Section
52
+ with gr.Row():
53
+ preference = gr.Radio(
54
+ ["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
55
+ label="Choose a Preference",
56
+ )
57
+
58
+ # Display Menu Items
59
+ with gr.Row():
60
+ menu_output = gr.Column()
61
+
62
+ # Pop-up Modal
63
+ with gr.Modal() as popup:
64
+ popup_image = gr.Image()
65
+ popup_name = gr.Textbox(label="Dish Name", interactive=False)
66
+ popup_price = gr.Textbox(label="Price ($)", interactive=False)
67
+ popup_description = gr.Textbox(label="Description", interactive=False)
68
+ spice_level = gr.Radio(
69
+ [
70
+ "American Mild",
71
+ "American Medium",
72
+ "American Spicy",
73
+ "Indian Mild",
74
+ "Indian Medium",
75
+ "Indian Spicy",
76
+ ],
77
+ label="Choose a Spice Level",
78
+ )
79
+ extras = gr.CheckboxGroup(
80
+ ["Extra Raita 4oz", "Extra Raita 8oz", "Extra Onion", "Extra Lemon"],
81
+ label="Extras",
82
+ )
83
+ special_instructions = gr.Textbox(label="Special Instructions")
84
+ quantity = gr.Slider(1, 10, value=1, step=1, label="Quantity")
85
+ add_button = gr.Button("Add to Cart")
86
+
87
+ # Cart Section
88
+ with gr.Row():
89
+ cart_output = gr.Dataframe(headers=["Item", "Quantity", "Price"], value=[])
90
+ checkout_button = gr.Button("Checkout")
91
+ clear_button = gr.Button("Clear Cart")
92
+
93
+ # Handlers
94
+ preference.change(filter_menu, inputs=[preference], outputs=[menu_output])
95
+ add_button.click(
96
+ add_to_cart,
97
+ inputs=[
98
+ popup_name,
99
+ quantity,
100
+ spice_level,
101
+ extras,
102
+ special_instructions,
103
+ ],
104
+ outputs=[cart_output],
105
+ )
106
+ clear_button.click(clear_cart, outputs=[cart_output])
107
+
108
+ return demo
109
+
110
+
111
+ if __name__ == "__main__":
112
+ app().launch()