Update app.py

app.py

@@ -33,7 +33,7 @@ def filter_menu(preference):
             </div>
             <div style=\"flex-shrink: 0; text-align: center;\">
                 <img src=\"{item['Image URL']}\" alt=\"{item['Dish Name']}\" style=\"width: 100px; height: 100px; border-radius: 8px; object-fit: cover; margin-bottom: 10px;\">
-                <button style=\"background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;\" onclick=\"openModal('{item['Dish Name']}', '{item['Price ($)']}', '{item['Description']}')\">Add</button>
+                <button style=\"background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;" onclick=\"openModal('{item['Dish Name']}', '{item['Price ($)']}', '{item['Description']}', '{item['Image URL']}')\">Add</button>
             </div>
         </div>
         """
@@ -68,12 +68,12 @@ modal_and_cart_js = """
         "Extra Onion & Lemon": 2,
         "Extra Fried Onion 4oz": 2
     };
-    function openModal(name, price, description) {
+    function openModal(name, price, description, image) {
         document.getElementById('modal').style.display = 'block';
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-price').innerText = price;
         document.getElementById('modal-description').innerText = description;
-        document.getElementById('modal-image').src = "";
+        document.getElementById('modal-image').src = image;
 
         const spiceLevelInputs = document.querySelectorAll('input[name="spice-level"]');
         spiceLevelInputs.forEach(input => input.checked = false);
@@ -143,7 +143,7 @@ def app():
 
         # Modal window for item customization
         modal_window = gr.HTML("""
-        <div id="modal" style="display: none; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -40%); width: 50%; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
+        <div id="modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; z-index: 1000;">
             <div style="text-align: right;">
                 <button onclick="closeModal()" style="background: none; border: none; font-size: 18px; cursor: pointer;">&times;</button>
             </div>