Update app.py

app.py

@@ -1,6 +1,5 @@
 import gradio as gr
 
-# Menu data
 menu_data = [
     {"name": "Veg Burger", "category": "VEGAN",
      "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_burger.jpg",
@@ -61,19 +60,30 @@ menu_data = [
      "description": "A refreshing salad made with chickpeas, fresh vegetables, and herbs."}
 ]
 
-# Function to generate row-style dish cards
+# The rest of the code remains unchanged
+
+
+def filter_dishes(category):
+    if category == "ALL":
+        return menu_data
+    return [dish for dish in menu_data if dish["category"] == category]
+
+# Function to generate dish cards
 def display_dishes(category):
-    filtered_dishes = [dish for dish in menu_data if category == "ALL" or dish["category"] == category]
-    html_content = "<div style='display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;'>"
+    filtered_dishes = filter_dishes(category)
+    html_content = "<div style='display: flex; flex-direction: column; align-items: center; width: 100%;'>"
     for dish in filtered_dishes:
         html_content += f"""
-        <div style='width: 220px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; 
-                    background-color: #f9f9f9; text-align: center; cursor: pointer;'
-             onclick="showPopup(event, '{dish['image']}', '{dish['name']}', '{dish['description']}')">
+        <div style='margin: 10px; display: flex; align-items: center; justify-content: space-between; 
+                    width: 80%; padding: 10px; border: 1px solid #ddd; border-radius: 10px; 
+                    background-color: #f9f9f9; cursor: pointer;'
+             onclick="showPopup('{dish['image']}', '{dish['name']}', '{dish['description']}')">
+            <div style='flex: 1; margin-right: 20px;'>
+                <h4 style='font-size: 18px; color: #444; margin: 0;'>{dish['name']}</h4>
+                <p style='font-size: 14px; color: #666; margin: 5px 0;'>{dish['description']}</p>
+            </div>
             <img src='{dish['image']}' alt='{dish['name']}' 
-                 style='width: 100%; height: 140px; object-fit: cover; border-radius: 10px;'>
-            <h4 style='margin: 10px 0; color: #444;'>{dish['name']}</h4>
-            <p style='color: #666; font-size: 14px;'>{dish['description']}</p>
+                 style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px;'>
         </div>
         """
     html_content += "</div>"
@@ -81,22 +91,25 @@ def display_dishes(category):
 
 # Main Gradio App
 with gr.Blocks() as demo:
-    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Restaurant Menu 🍛</h1>")
+    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
 
-    # Category Buttons
+    # Buttons for category selection
     with gr.Row():
         btn_all = gr.Button("ALL")
         btn_vegan = gr.Button("VEGAN")
         btn_halal = gr.Button("HALAL")
 
-    # Dish display area
+    # Dish display
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # Pop-up HTML and JavaScript
+    # JavaScript for managing the pop-up
     gr.HTML("""
-    <div id="popup" style="display: none; position: fixed; justify-content:center; align-items:center; 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: 300px;">
+    <div id="popup" style="display: none; position: fixed;cursor: pointer;-webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; left: 50%; transform: translate(-50%, 100%);
+                          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;">
         <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>
@@ -104,49 +117,25 @@ with gr.Blocks() as demo:
                                               color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
     </div>
     <script>
-        // Show the pop-up at the cursor's position
-        function showPopup(event, image, title, description) {
-            const popup = document.getElementById('popup');
-            const popupImage = document.getElementById('popup-image');
-            const popupTitle = document.getElementById('popup-title');
-            const popupDescription = document.getElementById('popup-description');
-
-            // Update the pop-up content
-            popupImage.src = image;
-            popupTitle.textContent = title;
-            popupDescription.textContent = description;
+        function showPopup(image, title, description) {
+            document.getElementById('popup-image').src = image;
+            document.getElementById('popup-title').textContent = title;
+            document.getElementById('popup-description').textContent = description;
 
-            // Set the pop-up position based on cursor location
-            const popupWidth = 300;  // Width of the pop-up
-            const xOffset = 10;     // Offset to avoid overlapping cursor
-            const yOffset = 20;     // Offset to place pop-up below the cursor
-            let xPos = event.pageX + xOffset;
-            let yPos = event.pageY + yOffset;
-
-            // Prevent the pop-up from going off the screen
-            if (xPos + popupWidth > window.innerWidth) {
-                xPos = window.innerWidth - popupWidth - xOffset;
-            }
-            if (yPos + popup.offsetHeight > window.innerHeight) {
-                yPos = window.innerHeight - popup.offsetHeight - yOffset;
-            }
-
-            popup.style.left = `${xPos}px`;
-            popup.style.top = `${yPos}px`;
+            // Adjust the popup to always appear at the top of the viewport
+            const popup = document.getElementById('popup');
+            popup.style.top = window.pageYOffset + 'px';
             popup.style.display = 'block';
         }
-
-        // Close the pop-up
         function closePopup() {
-            const popup = document.getElementById('popup');
-            popup.style.display = 'none';
+            document.getElementById('popup').style.display = 'none';
         }
     </script>
     """)
 
-    # Button actions for filtering
+    # Button click events
     btn_all.click(lambda: gr.update(value=display_dishes("ALL")), outputs=dish_display)
     btn_vegan.click(lambda: gr.update(value=display_dishes("VEGAN")), outputs=dish_display)
     btn_halal.click(lambda: gr.update(value=display_dishes("HALAL")), outputs=dish_display)
 
-demo.launch()
+demo.launch()