Update app.py

app.py

@@ -1,22 +1,34 @@
 import gradio as gr
 
-# Menu data
+# Data Module
 menu_data = [
-    {"name": "Veg Burger", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg",
-     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato."},
-    {"name": "Chicken Biryani", "category": "HALAL",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg",
-     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces."},
-    {"name": "Paneer Butter Masala", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg",
-     "description": "Paneer cooked in a rich and creamy tomato-based gravy."},
+    {
+        "name": "Veg Burger",
+        "category": "VEGAN",
+        "image": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg",
+        "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato."
+    },
+    {
+        "name": "Chicken Biryani",
+        "category": "HALAL",
+        "image": "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg",
+        "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces."
+    },
+    {
+        "name": "Paneer Butter Masala",
+        "category": "VEGAN",
+        "image": "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg",
+        "description": "Paneer cooked in a rich and creamy tomato-based gravy."
+    },
 ]
 
-# Function to display dishes
-def display_dishes():
+# HTML Rendering Module
+def render_dish_grid(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; justify-content: center;'>"
-    for dish in menu_data:
+    for dish in filtered_dishes:
         html_content += f"""
         <div style='margin: 10px; text-align: center; cursor: pointer; border: 1px solid #ddd; 
                     padding: 10px; border-radius: 10px; width: 200px; background-color: #f9f9f9;'
@@ -29,56 +41,75 @@ def display_dishes():
     html_content += "</div>"
     return html_content
 
-# Function to show details of a selected dish
+# Business Logic Module
 def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
             return gr.update(visible=True), dish["image"], dish["name"], dish["description"]
     return gr.update(visible=False), "", "Dish Not Found", "No description available."
 
-# Function to close the pop-up
 def close_popup():
     return gr.update(visible=False)
 
-# Gradio App
-with gr.Blocks() as demo:
-    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Menu 🍛</h1>")
-    
-    # JavaScript for dish selection
-    gr.HTML("""
-    <script>
-    function selectDish(dishName) {
-        let input = document.querySelector('input[aria-label="selected_dish_name"]');
-        if (input) {
-            input.value = dishName;
-            input.dispatchEvent(new Event('input', { bubbles: true }));
-        }
-    }
-    </script>
-    """)
+# Gradio App Module
+def create_app():
+    with gr.Blocks() as demo:
+        gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Menu 🍛</h1>")
 
-    gr.Markdown("### Available Dishes")
-    dish_display = gr.HTML(value=display_dishes())
+        # JavaScript for dish selection
+        gr.HTML("""
+        <script>
+        function selectDish(dishName) {
+            let input = document.querySelector('input[aria-label="selected_dish_name"]');
+            if (input) {
+                input.value = dishName;
+                input.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        </script>
+        """)
 
-    # Pop-up for dish details
-    popup = gr.Group(visible=False)
-    with popup:
+        gr.Markdown("### Select a Category")
         with gr.Row():
-            dish_image = gr.Image()
-            with gr.Column():
-                dish_name = gr.Textbox(label="Dish Name", interactive=False)
-                dish_description = gr.Textbox(label="Description", interactive=False)
-        close_button = gr.Button("Close")
+            btn_all = gr.Button("ALL")
+            btn_vegan = gr.Button("VEGAN")
+            btn_halal = gr.Button("HALAL")
+
+        gr.Markdown("### Available Dishes")
+        dish_display = gr.HTML(value=render_dish_grid("ALL"))
+
+        # Pop-up for dish details
+        popup = gr.Group(visible=False)
+        with popup:
+            with gr.Row():
+                dish_image = gr.Image()
+                with gr.Column():
+                    dish_name = gr.Textbox(label="Dish Name", interactive=False)
+                    dish_description = gr.Textbox(label="Description", interactive=False)
+            close_button = gr.Button("Close")
+
+        # Hidden textbox to handle JavaScript -> Python communication
+        selected_dish_name = gr.Textbox(visible=False)
+        selected_dish_name.change(
+            fn=get_dish_details,
+            inputs=selected_dish_name,
+            outputs=[popup, dish_image, dish_name, dish_description]
+        )
+
+        # Close button functionality
+        close_button.click(fn=close_popup, outputs=popup)
+
+        # Update category buttons
+        def update_dish_grid(category):
+            return gr.update(value=render_dish_grid(category))
 
-    # Hidden textbox to handle JavaScript -> Python communication
-    selected_dish_name = gr.Textbox(visible=False)
-    selected_dish_name.change(
-        fn=get_dish_details,
-        inputs=selected_dish_name,
-        outputs=[popup, dish_image, dish_name, dish_description]
-    )
+        btn_all.click(fn=lambda: update_dish_grid("ALL"), outputs=dish_display)
+        btn_vegan.click(fn=lambda: update_dish_grid("VEGAN"), outputs=dish_display)
+        btn_halal.click(fn=lambda: update_dish_grid("HALAL"), outputs=dish_display)
 
-    # Close button functionality
-    close_button.click(fn=close_popup, outputs=popup)
+    return demo
 
-demo.launch()
+# Main Execution
+if __name__ == "__main__":
+    app = create_app()
+    app.launch()