Update app.py

app.py

@@ -98,7 +98,7 @@ popup_js = """
     function showPopup(name, description, price, image) {
         const popup = document.getElementById("custom-popup");
         const overlay = document.getElementById("overlay");
-        popup.innerHTML = 
+        popup.innerHTML = `
             <img src="${image}" alt="${name}" style="width: 200px; height: auto; border-radius: 10px; margin-bottom: 10px;">
             <h3 style="margin-top: 10px;">${name}</h3>
             <p>${description}</p>
@@ -106,25 +106,25 @@ popup_js = """
             
             <h4 style="margin-top: 20px;">Choose a Spice Level</h4>
             <div style="display: flex; flex-wrap: wrap; gap: 10px;">
-                ${["American Mild", "American Medium", "American Spicy", "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"].map(spice => 
+                ${["American Mild", "American Medium", "American Spicy", "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"].map(spice => `
                     <label style="margin-right: 10px;">
                         <input type="radio" name="spice" value="${spice}"> ${spice}
                     </label>
-                ).join("")}
+                `).join("")}
             </div>
             
             <h4 style="margin-top: 20px;">Choose Extras</h4>
             <div style="display: flex; flex-wrap: wrap; gap: 10px;">
-                ${["Extra Raitha 4oz + $1.00", "Extra Raitha 8oz + $2.00", "Extra Onion + $1.00", "Extra Onion & Lemon + $2.00"].map(extra => 
+                ${["Extra Raitha 4oz + $1.00", "Extra Raitha 8oz + $2.00", "Extra Onion + $1.00", "Extra Onion & Lemon + $2.00"].map(extra => `
                     <label style="margin-right: 10px;">
                         <input type="checkbox" name="extras" value="${extra}"> ${extra}
                     </label>
-                ).join("")}
+                `).join("")}
             </div>
             
             <button onclick="closePopup()" 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; margin-left: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
-        ;
+        `;
         popup.style.display = "block";
         overlay.style.display = "block";
     }
@@ -200,4 +200,4 @@ with gr.Blocks() as demo:
         outputs=dish_display
     )
 
-demo.launch()
+demo.launch()