app.py

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", "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.", "price": 8.99},
    {"name": "Chicken Biryani", "category": "HALAL", "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/chicken_biryani.jpg", "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.", "price": 12.99},
]

# Cart management
cart = []

def add_item_to_cart(item_name, price, extras="None"):
    for item in cart:
        if item['name'] == item_name and item['extras'] == extras:
            item['count'] += 1
            return update_cart()
    cart.append({"name": item_name, "price": price, "extras": extras, "count": 1})
    return update_cart()

def remove_item_from_cart(item_name):
    for item in cart:
        if item['name'] == item_name:
            item['count'] -= 1
            if item['count'] == 0:
                cart.remove(item)
            break
    return update_cart()

def clear_cart():
    global cart
    cart = []
    return update_cart()

def update_cart():
    if not cart:
        return "<p>Your cart is empty.</p>"
    cart_html = "<table style='width:100%; border-collapse:collapse;'><tr><th>Item</th><th>Extras</th><th>Price</th><th>Count</th><th>Total</th></tr>"
    total_price = 0
    for item in cart:
        item_total = item['price'] * item['count']
        total_price += item_total
        cart_html += f"<tr><td>{item['name']}</td><td>{item['extras']}</td><td>${item['price']}</td><td>{item['count']}</td><td>${item_total:.2f}</td></tr>"
    cart_html += f"<tr><td colspan='4' style='text-align:right;'><strong>Total</strong></td><td><strong>${total_price:.2f}</strong></td></tr></table>"
    return cart_html

# Function to filter dishes by category
def filter_dishes(category):
    if category == "ALL":
        return menu_data
    return [dish for dish in menu_data if dish["category"] == category]

# Function to display dishes
def display_dishes(category="ALL"):
    filtered_dishes = filter_dishes(category)
    html_content = "<div style='display: flex; flex-wrap: wrap; gap: 10px;'>"
    for dish in filtered_dishes:
        html_content += f"""
        <div style='border: 1px solid #ddd; padding: 10px; border-radius: 5px; width: 200px;'>
            <img src='{dish['image']}' alt='{dish['name']}' style='width: 100%; height: 150px; object-fit: cover; border-radius: 5px;'>
            <h4>{dish['name']}</h4>
            <p>{dish['description']}</p>
            <p><strong>Price:</strong> ${dish['price']}</p>
            <button onclick="addToCart('{dish['name']}', {dish['price']})" style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 3px;'>Add to Cart</button>
        </div>
        """
    html_content += "</div>"
    return html_content

# Main Gradio App
with gr.Blocks() as demo:
    gr.HTML("<h1 style='text-align: center;'>Dynamic Menu with Cart</h1>")

    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())

    btn_all.click(lambda: display_dishes("ALL"), outputs=dish_display)
    btn_vegan.click(lambda: display_dishes("VEGAN"), outputs=dish_display)
    btn_halal.click(lambda: display_dishes("HALAL"), outputs=dish_display)

    cart_display = gr.HTML(value="<p>Your cart is empty.</p>")

    def add_to_cart_handler(item_name, price):
        return add_item_to_cart(item_name, price)

    gr.HTML("""
        <div id='cart-icon' style='position: fixed; top: 10px; right: 10px; cursor: pointer;'>
            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Shopping_cart_icon.svg/512px-Shopping_cart_icon.svg.png' alt='Cart' style='width: 40px;' onclick='toggleCartPopup()'>
        </div>
        <div id='cart-popup' style='display: none; position: fixed; top: 50px; right: 10px; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; height: auto; max-height: 80vh; overflow-y: auto;'>
            <span onclick='toggleCartPopup()' style='position: absolute; top: 10px; right: 15px; font-size: 20px; font-weight: bold; cursor: pointer;'>&times;</span>
            <div id='cart-content' style='margin-bottom: 10px;'>Your cart is empty.</div>
            <button onclick='placeOrder()' style='margin-top: 10px; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; display: block; width: 100%;'>Place Order</button>
        </div>

        <script>
            function toggleCartPopup() {
                const popup = document.getElementById('cart-popup');
                popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
            }

            function addToCart(name, price) {
                fetch('/run/predict', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ data: [name, price] })
                    console.log(name)
                }).then(response => response.json()).then(data => {
                    document.getElementById('cart-content').innerHTML = data.data;
                    alert(`${name} has been added to your cart.`);
                });
            }

            function placeOrder() {
                alert('Your order has been placed!');
                toggleCartPopup();
            }
        </script>
    """)

    demo.launch()