Update app.py

app.py

@@ -112,7 +112,7 @@ with gr.Blocks() as demo:
                        border-radius: 5px; cursor: pointer;">Add to Cart</button>
     </div>
     <script>
-        function showPopup(image, title, description, price) {
+        function showPopup(image, title, description, price) {{
             document.getElementById('popup-image').src = image;
             document.getElementById('popup-title').textContent = title;
             document.getElementById('popup-description').textContent = description;
@@ -120,20 +120,20 @@ with gr.Blocks() as demo:
 
             // Display the popup
             document.getElementById('popup').style.display = 'block';
-        }
-        function closePopup() {
+        }}
+        function closePopup() {{
             document.getElementById('popup').style.display = 'none';
-        }
-        function addToCart() {
+        }}
+        function addToCart() {{
             const extras = Array.from(document.querySelectorAll('input[name=extras]:checked'))
                                 .map(extra => extra.value)
                                 .join(", ");
             alert("Item added to cart with extras: " + extras);
             closePopup();
-        }
+        }}
     </script>
 """)
-demo.launch()
+
 
     # Button click events
     btn_all.click(
@@ -149,48 +149,4 @@ demo.launch()
         outputs=dish_display
     )
 
-demo.launch()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;">
-        <span onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px;">&times;</span>
-
-        <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>
-        
-        <h4 style="text-align: left; margin-top: 20px;">Choose Extras</h4>
-        <div style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
-            <label style="margin-right: 10px;"><input type="checkbox" name="extras" value="Extra Raitha"> Extra Raitha</label>
-            <label style="margin-right: 10px;"><input type="checkbox" name="extras" value="Extra Salan"> Extra Salan</label>
-        </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>
-    </div>
-    <script>
-        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;
-
-            // Display the popup
-            document.getElementById('popup').style.display = 'block';
-        }
-        function closePopup() {
-            document.getElementById('popup').style.display = 'none';
-        }
-        function addToCart() {
-            const extras = Array.from(document.querySelectorAll('input[name=extras]:checked'))
-                                .map(extra => extra.value)
-                                .join(", ");
-            alert("Item added to cart with extras: " + extras);
-            closePopup();
-        }
-    </script>
-""")
-
 demo.launch()