Create app.py

app.py

@@ -0,0 +1,59 @@
+import gradio as gr
+import json
+
+
+# Load menu data
+def load_menu_data():
+    with open("data/menu.json", "r") as file:
+        return json.load(file)
+
+
+# Function to render the popup card
+def render_popup(item):
+    return f"""
+    <div class='popup'>
+        <div class='popup-header'>
+            <h2>{item['name']}</h2>
+            <button class='close-btn' onclick="closePopup()">×</button>
+        </div>
+        <img src='{item['image']}' alt='{item['name']}' class='popup-image'>
+        <p>{item['description']}</p>
+        <div class='nutrition-info'>
+            <p><strong>Nutrition:</strong> {item['nutrition']}</p>
+        </div>
+        <button class='add-btn'>Add to Order (${item['price']})</button>
+    </div>
+    """
+
+
+# Gradio UI
+def menu_ui():
+    menu_data = load_menu_data()
+
+    with gr.Blocks(css="assets/style.css") as app:
+        gr.Markdown("<h1>Dynamic Menu with Preferences</h1>")
+        
+        # Preferences Section
+        with gr.Row():
+            gr.Radio(["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"], label="Choose a Preference", value="All")
+        
+        # Menu Items
+        menu_items = gr.Markdown()
+        
+        for item in menu_data:
+            with gr.Row():
+                with gr.Column(scale=3):
+                    gr.Markdown(f"**{item['name']}**  \n${item['price']}  \n{item['description']}")
+                with gr.Column(scale=1):
+                    gr.Image(item['image'], elem_id="food-image")
+                    gr.Button("Add").click(lambda x=item: render_popup(x), outputs=menu_items)
+
+        # Popup card
+        menu_items.render()
+
+    return app
+
+
+# Run the app
+if __name__ == "__main__":
+    menu_ui().launch()