Update app.py

app.py

@@ -1,89 +1,14 @@
 import gradio as gr
 
+# Menu data
 menu_data = [
-    {"name": "Veg Burger", "category": "VEGAN",
+    {"name": "Vegetable Biryani", "category": "VEGAN",
      "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_burger.jpg",
-     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
-     "price": "$8.99"},
-    {"name": "Chicken Biryani", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/chicken_biryani.jpg",
-     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
-     "price": "$12.99"},
-    {"name": "Paneer Butter Masala", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/paneer_butter_masala.jpg",
-     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
-     "price": "$10.99"},
-    {"name": "Beef Steak", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/beef_steak.jpg",
-     "description": "Juicy beef steak served with mashed potatoes and grilled vegetables.",
-     "price": "$15.99"},
-    {"name": "Mushroom Soup", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/mushroom_soup.jpg",
-     "description": "Creamy mushroom soup with fresh herbs.",
-     "price": "$7.99"},
-    {"name": "Tandoori Chicken", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/tandoori_chicken.jpg",
-     "description": "Grilled chicken marinated in yogurt and spices, cooked in a tandoor.",
-     "price": "$11.99"},
-    {"name": "Grilled Veggies", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/grilled_veggies.jpg",
-     "description": "A healthy mix of grilled seasonal vegetables with olive oil.",
-     "price": "$9.99"},
-    {"name": "Butter Naan", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/butter_naan.jpg",
-     "description": "Soft and buttery flatbread, perfect to pair with any curry.",
-     "price": "$2.99"},
-    {"name": "Fish Curry", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/fish_curry.jpg",
-     "description": "Fresh fish cooked in a spicy and tangy curry.",
+     "description": "An Indian dish made to be thoroughly enjoyed by anyone who eats it. Made with the best basmati rice and a perfect blend of spices, cooked in original dum style.",
      "price": "$13.99"},
-    {"name": "Vegetable Salad", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/vegetable_salad.jpg",
-     "description": "A mix of fresh greens, tomatoes, cucumbers, and a light dressing.",
-     "price": "$6.99"},
-    {"name": "Veg Spring Rolls", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_spring_rolls.jpg",
-     "description": "Crispy spring rolls filled with fresh vegetables.",
-     "price": "$5.99"},
-    {"name": "Chicken Kebab", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/chicken_kebab.jpg",
-     "description": "Juicy chicken kebabs grilled to perfection with a mix of spices.",
-     "price": "$9.99"},
-    {"name": "Dal Makhani", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/dal_makhani.jpg",
-     "description": "Rich and creamy black lentils slow-cooked with spices.",
-     "price": "$8.99"},
-    {"name": "Lamb Curry", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/lamb_curry.jpg",
-     "description": "Tender lamb pieces cooked in a flavorful curry sauce.",
-     "price": "$14.99"},
-    {"name": "Mixed Veg Curry", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/mixed_veg_curry.jpg",
-     "description": "A medley of fresh vegetables cooked in a lightly spiced curry.",
-     "price": "$9.99"},
-    {"name": "Chicken Wings", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/chicken_wings.jpg",
-     "description": "Crispy chicken wings tossed in a tangy sauce.",
-     "price": "$12.99"},
-    {"name": "Aloo Paratha", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/aloo_paratha.jpg",
-     "description": "Indian flatbread stuffed with spiced mashed potatoes.",
-     "price": "$3.99"},
-    {"name": "Egg Curry", "category": "HALAL",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/egg_curry.jpg",
-     "description": "Boiled eggs cooked in a spiced tomato gravy.",
-     "price": "$9.99"},
-    {"name": "Chickpea Salad", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/chickpea_salad.jpg",
-     "description": "A refreshing salad made with chickpeas, fresh vegetables, and herbs.",
-     "price": "$7.99"}
 ]
 
-
-# The rest of the code remains unchanged
-
-
-
+# Spice levels and extras
 spice_levels = ["American Mild", "American Medium", "American Spicy", 
                 "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"]
 extras = [
@@ -142,46 +67,53 @@ with gr.Blocks() as demo:
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
     # JavaScript for managing the pop-up
-    gr.HTML("""
-        <div id="popup" style="display: none; position: fixed; background-color: white; 
-                               padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
-                               z-index: 1000; text-align: center; width: 300px;">
+    gr.HTML(f"""
+        <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
+                              background-color: white; padding: 20px; border-radius: 10px; 
+                              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center; width: 500px;">
             <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
             <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
             <p id="popup-description" style="margin-top: 10px; font-size: 16px; color: #666;"></p>
             <p id="popup-price" style="margin-top: 10px; font-size: 16px; color: #444;"></p>
             
-            <button onclick="closePopup()" 
-                    style="margin-top: 20px; padding: 10px 20px; background-color: #28a745; 
-                           color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
-        </div>
+            <h4 style="text-align: left; margin-top: 20px;">Choose a spice level</h4>
+            <div id="spice-levels-container" style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
+    """ + "".join([f'<label style="margin-right: 10px; display: block;"><input type="radio" name="spice" value="{spice}" style="margin-right: 5px;">{spice}</label>' for spice in spice_levels]) + """
+            </div>
+
+            <h4 style="text-align: left; margin-top: 20px;">Choose Extras</h4>
+            <div id="extras-container" style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
+    """ + "".join([f'<label style="margin-right: 10px; display: block;"><input type="checkbox" name="extras" value="{extra["name"]}" style="margin-right: 5px;">{extra["name"]} + {extra["price"]}</label>' for extra in extras]) + """
+            </div>
 
+            <button onclick="addToCart()" 
+                    style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; 
+                           border-radius: 5px; cursor: pointer;">Add to Cart</button>
+            <button onclick="closePopup()" style="margin-top: 20px; padding: 10px 20px; background-color: #28a745; 
+                                                  color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
+        </div>
         <script>
-            function showPopup(event, image, title, description, price) {
-                const popup = document.getElementById('popup');
-                const popupImage = document.getElementById('popup-image');
-                const popupTitle = document.getElementById('popup-title');
-                const popupDescription = document.getElementById('popup-description');
-                const popupPrice = document.getElementById('popup-price');
-
-                // Set popup content
-                popupImage.src = image;
-                popupTitle.textContent = title;
-                popupDescription.textContent = description;
-                popupPrice.textContent = "Price: " + price;
-
-                // Position popup near the clicked button
-                const rect = event.target.getBoundingClientRect();
-                popup.style.left = `${rect.left}px`;
-                popup.style.top = `${rect.bottom + 10}px`; // Add some space below the button
-
-                // Display popup
-                popup.style.display = 'block';
+            let selectedSpice = null;
+            let selectedExtras = [];
+
+            function showPopup(image, title, description, price) {
+                document.getElementById('popup-image').src = image;
+                document.getElementById('popup-title').textContent = title;
+                document.getElementById('popup-description').textContent = description;
+                document.getElementById('popup-price').textContent = "Price: " + price;
+
+                document.getElementById('popup').style.display = 'block';
             }
 
             function closePopup() {
-                const popup = document.getElementById('popup');
-                popup.style.display = 'none';
+                document.getElementById('popup').style.display = 'none';
+            }
+
+            function addToCart() {
+                const spice = document.querySelector('input[name=spice]:checked')?.value || "No spice selected";
+                const extras = Array.from(document.querySelectorAll('input[name=extras]:checked')).map(input => input.value);
+                alert(Added with spice level: ${spice}, and extras: ${extras.join(", ")});
+                closePopup();
             }
         </script>
     """)
@@ -201,3 +133,6 @@ with gr.Blocks() as demo:
     )
 
 demo.launch()
+
+ChatGPT said:
+ChatGPT