Update app.py

app.py

@@ -86,6 +86,7 @@ with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
 
     with gr.Row():
+        gr.HTML("<span style='font-size: 24px; cursor: pointer;'>🛒</span>")
         btn_cart = gr.Button("View Cart")
 
     cart_display = gr.HTML(value=display_cart())
@@ -97,13 +98,13 @@ with gr.Blocks() as demo:
 
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    gr.HTML("""
+    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: 400px;">
             <span onclick="closePopup()" style="position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 18px;">&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>
+            <p id="popup-image-url" style="margin-top: 10px; font-size: 14px; color: #666;"></p>
 
             <label for="popup-quantity" style="margin-top: 20px; display: block; text-align: left;">Quantity:</label>
             <input id="popup-quantity" type="number" min="1" value="1" style="width: 100%; margin-top: 10px; padding: 5px; border: 1px solid #ddd; border-radius: 5px;">
@@ -114,11 +115,11 @@ with gr.Blocks() as demo:
             <button onclick="submitPopup()" 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(name, description, price, image) {
+            function showPopup(name, description, price, imageUrl) {
                 document.getElementById('popup-title').textContent = name;
                 document.getElementById('popup-description').textContent = description;
                 document.getElementById('popup-price').textContent = price;
-                document.getElementById('popup-image').src = image;
+                document.getElementById('popup-image-url').textContent = imageUrl;
                 document.getElementById('popup').style.display = 'block';
             }