Update app.py

app.py

@@ -8,118 +8,90 @@ def load_menu():
     except Exception as e:
         raise ValueError(f"Error loading menu file: {e}")
 
-# Generate the menu content
+# Function to filter and display menu items
 def filter_menu(preference):
     menu_data = load_menu()
-    # Filter logic remains the same
-    # Generating menu HTML
+    if preference == "Halal/Non-Veg":
+        filtered_data = menu_data[menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)]
+    elif preference == "Vegetarian":
+        filtered_data = menu_data[~menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)]
+    elif preference == "Guilt-Free":
+        filtered_data = menu_data[menu_data["Description"].str.contains(r"Fat: ([0-9]|10)g", case=False, na=False)]
+    else:  # Default to "All"
+        filtered_data = menu_data
+
+    # Generate HTML for the menu
     html_content = ""
-    for _, item in menu_data.iterrows():
+    for _, item in filtered_data.iterrows():
         html_content += f"""
-        <div class="menu-item">
-            <div class="menu-details">
+        <div class="menu-card">
+            <div class="menu-card-content">
                 <h3>{item['Dish Name']}</h3>
                 <p>{item['Description']}</p>
                 <p><strong>${item['Price ($)']}</strong></p>
             </div>
-            <div class="menu-actions">
-                <img src="{item['Image URL']}" alt="{item['Dish Name']}" class="menu-img">
-                <button class="add-button" onclick="showModal('{item['Dish Name']}')">Add</button>
+            <div class="menu-card-actions">
+                <img src="{item['Image URL']}" alt="{item['Dish Name']}" class="menu-card-image">
+                <button class="add-button" onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')">Add</button>
             </div>
         </div>
         """
     return html_content
 
-# Get dish details for the modal
-def get_dish_details(dish_name):
-    menu_data = load_menu()
-    try:
-        dish = menu_data[menu_data["Dish Name"] == dish_name].iloc[0]
-        return (
-            dish["Image URL"],
-            dish["Dish Name"],
-            dish["Description"],
-            f"${dish['Price ($)']}"
-        )
-    except IndexError:
-        raise ValueError(f"Dish '{dish_name}' not found!")
-
-# Gradio App
+# Main Gradio app
 def app():
     with gr.Blocks(css="style.css") as demo:
-        # Menu Filtering Section
+        # Menu Filters
+        gr.Markdown("## Dynamic Menu with Preferences")
         preference_selector = gr.Radio(
             choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
             value="All",
-            label="Filter Menu"
+            label="Choose a Preference"
         )
         menu_output = gr.HTML(value=filter_menu("All"))
 
-        # Modal Window (initially hidden)
-        modal = gr.Column(visible=False, elem_classes=["modal"])
-        modal_image = gr.Image(label="Dish Image")
-        modal_name = gr.Markdown()
-        modal_description = gr.Markdown()
-        modal_price = gr.Markdown()
-        spice_level = gr.Radio(choices=["Mild", "Medium", "Spicy"], label="Choose Spice Level")
-        extras = gr.CheckboxGroup(choices=["Extra Raita", "Extra Salan", "Extra Fried Onion"], label="Choose Extras")
-        quantity = gr.Number(value=1, label="Quantity", interactive=True)
-        special_instructions = gr.Textbox(label="Special Instructions", placeholder="Add any requests...")
-        add_to_cart_button = gr.Button("Add to Cart")
-        close_modal_button = gr.Button("Close")
-
-        # Cart Section
-        cart_state = gr.State([])
-        cart_output = gr.HTML(value="Your cart is empty.")
-
-        # Handlers
-        def show_modal(dish_name):
-            img, name, desc, price = get_dish_details(dish_name)
-            return (
-                gr.update(visible=True),
-                img,
-                f"### {name}",
-                desc,
-                price
-            )
-
-        def close_modal():
-            return gr.update(visible=False)
-
-        def add_to_cart(name, spice, extras, qty, instructions, cart):
-            cart.append({
-                "name": name,
-                "spice_level": spice,
-                "extras": extras,
-                "quantity": qty,
-                "instructions": instructions
-            })
-            cart_html = "<br>".join(
-                [f"{item['quantity']}x {item['name']} ({item['spice_level']})" for item in cart]
-            )
-            return cart, cart_html
-
-        # Events
-        preference_selector.change(filter_menu, inputs=[preference_selector], outputs=[menu_output])
-        close_modal_button.click(close_modal, outputs=[modal])
-        add_to_cart_button.click(add_to_cart, inputs=[modal_name, spice_level, extras, quantity, special_instructions, cart_state], outputs=[cart_state, cart_output])
+        # Modal Logic via HTML
+        modal_logic = gr.HTML("""
+        <div id="modal" class="modal">
+            <div class="modal-content">
+                <span class="close-button" onclick="closeModal()">&times;</span>
+                <img id="modal-image" class="modal-image" />
+                <h2 id="modal-name"></h2>
+                <p id="modal-description"></p>
+                <p id="modal-price"></p>
+                <label for="spice-level">Choose Spice Level:</label>
+                <select id="spice-level">
+                    <option value="Mild">Mild</option>
+                    <option value="Medium">Medium</option>
+                    <option value="Spicy">Spicy</option>
+                </select>
+                <label for="quantity">Quantity:</label>
+                <input type="number" id="quantity" value="1" min="1" />
+                <textarea id="special-instructions" placeholder="Add special instructions here..."></textarea>
+                <button class="modal-add-button">Add to Cart</button>
+            </div>
+        </div>
+        <script>
+            function openModal(name, image, description, price) {
+                document.getElementById("modal").style.display = "block";
+                document.getElementById("modal-image").src = image;
+                document.getElementById("modal-name").innerText = name;
+                document.getElementById("modal-description").innerText = description;
+                document.getElementById("modal-price").innerText = price;
+            }
+            function closeModal() {
+                document.getElementById("modal").style.display = "none";
+            }
+        </script>
+        """)
 
-        # Layout
+        # App Layout
+        with gr.Row():
+            preference_selector.change(filter_menu, inputs=[preference_selector], outputs=[menu_output])
         with gr.Row():
             menu_output
-        with modal:
-            modal_image
-            modal_name
-            modal_description
-            modal_price
-            spice_level
-            extras
-            quantity
-            special_instructions
-            add_to_cart_button
-            close_modal_button
         with gr.Row():
-            cart_output
+            modal_logic
 
     return demo