Update cart_tab.py

cart_tab.py

@@ -1,9 +1,5 @@
-import gradio as gr
-
-# Initialize cart as a global variable
 cart = []
 
-# Function to add items to the cart
 def add_to_cart(item_name, spice_level, extras):
     cart.append({
         "item_name": item_name,
@@ -12,7 +8,6 @@ def add_to_cart(item_name, spice_level, extras):
     })
     return f"{item_name} added to cart!"
 
-# Function to display cart items
 def display_cart():
     if not cart:
         return "Your cart is empty."
@@ -21,135 +16,3 @@ def display_cart():
         cart_content += f"<li>{item['item_name']} - Spice Level: {item['spice_level']} - Extras: {', '.join(item['extras'])}</li>"
     cart_content += "</ul>"
     return cart_content
-
-menu_data = [
-    {"name": "Veg Burger", "category": "VEGAN",
-     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_burger.jpg",
-     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
-     "price": "$8.99"},
-    # Add other menu items here
-]
-
-# JavaScript for popup modal
-popup_js = """
-<script>
-    function showPopup(name, description, price, image) {
-        const popup = document.getElementById("custom-popup");
-        const overlay = document.getElementById("overlay");
-        popup.innerHTML = `
-            <img src="${image}" alt="${name}" style="width: 100%; height: 250px; border-radius: 10px; margin-bottom: 10px;">
-            <h3 style="margin-top: 10px;">${name}</h3>
-            <p>${description}</p>
-            <p style="font-weight: bold;">Price: ${price}</p>
-            <h4 style="margin-top: 20px;">Choose a Spice Level</h4>
-            <select id="spice-level" style="width: 100%; padding: 5px;">
-                <option value="American Mild">American Mild</option>
-                <option value="American Medium">American Medium</option>
-                <option value="American Spicy">American Spicy</option>
-                <option value="Indian Mild">Indian Mild</option>
-                <option value="Indian Medium">Indian Medium</option>
-                <option value="Indian Spicy">Indian Spicy</option>
-                <option value="Indian Very Spicy">Indian Very Spicy</option>
-            </select>
-            <h4 style="margin-top: 20px;">Choose Extras</h4>
-            <div>
-                <label><input type="checkbox" name="extras" value="Extra Raitha 4oz"> Extra Raitha 4oz</label><br>
-                <label><input type="checkbox" name="extras" value="Extra Raitha 8oz"> Extra Raitha 8oz</label><br>
-                <label><input type="checkbox" name="extras" value="Extra Onion"> Extra Onion</label><br>
-                <label><input type="checkbox" name="extras" value="Extra Onion & Lemon"> Extra Onion & Lemon</label><br>
-            </div>
-            <button onclick="addToCart('${name}')" style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
-            <button onclick="closePopup()" style="margin-top: 20px; margin-left: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
-        `;
-        popup.style.display = "block";
-        overlay.style.display = "block";
-    }
-
-    function closePopup() {
-        const popup = document.getElementById("custom-popup");
-        const overlay = document.getElementById("overlay");
-        popup.style.display = "none";
-        overlay.style.display = "none";
-    }
-
-    function addToCart(name) {
-        const spiceLevel = document.getElementById("spice-level").value;
-        const extras = Array.from(document.querySelectorAll("input[name='extras']:checked")).map(el => el.value);
-        google.colab.kernel.invokeFunction('notebook.add_to_cart', [name, spiceLevel, extras], {});
-        closePopup();
-    }
-</script>
-"""
-
-# HTML for popup modal
-popup_html = """
-<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 999;"></div>
-<div id="custom-popup" 
-     style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; max-width: 400px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; text-align: center;">
-</div>
-"""
-
-# Generate dish cards
-def display_dishes(category):
-    html_content = "<div style='display: flex; flex-direction: column; gap: 20px; width: 80%; margin: 0 auto;'>"
-    for dish in menu_data:
-        if category == "ALL" or dish["category"] == category:
-            html_content += f"""
-            <div style='display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;'>
-                <div style='flex: 3; text-align: left;'>
-                    <h3 style='margin: 0; font-size: 20px;'>{dish['name']}</h3>
-                    <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
-                    <p style='margin: 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
-                </div>
-                <div style='flex: 1; text-align: center;'>
-                    <img src='{dish['image']}' alt='{dish['name']}' style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px;'>
-                    <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')" 
-                            style='margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
-                        Add
-                    </button>
-                </div>
-            </div>
-            """
-    html_content += "</div>"
-    return html_content
-
-# Main Gradio App
-with gr.Blocks() as demo:
-    gr.HTML(popup_html)  # Add the popup container and overlay
-    gr.HTML(popup_js)    # Add the JavaScript
-
-    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
-
-    with gr.Tabs():
-        with gr.Tab("Menu"):
-            with gr.Row():
-                btn_all = gr.Button("ALL")
-                btn_vegan = gr.Button("VEGAN")
-                btn_halal = gr.Button("HALAL")
-
-            dish_display = gr.HTML(value=display_dishes("ALL"))
-
-            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
-            )
-
-        with gr.Tab("Cart"):
-            cart_display = gr.HTML(value=display_cart())
-            gr.Button("Refresh Cart").click(
-                lambda: gr.update(value=display_cart()),
-                outputs=cart_display
-            )
-
-# Register function for JavaScript callback
-demo.add_to_cart = add_to_cart
-
-demo.launch()