app.py

import gradio as gr
import pandas as pd

# Load menu data from Excel file
def load_menu(file_path="menu.xlsx"):
    menu_df = pd.read_excel(file_path)
    menu_df.columns = menu_df.columns.str.strip().str.lower()
    
    column_mapping = {
        "name": next((col for col in menu_df.columns if "name" in col), None),
        "price": next((col for col in menu_df.columns if "price" in col), None),
        "description": next((col for col in menu_df.columns if "description" in col), None),
        "image": next((col for col in menu_df.columns if "image" in col), None),
    }
    
    missing_columns = [key for key, col in column_mapping.items() if col is None]
    if missing_columns:
        raise ValueError(f"Excel file is missing one or more required columns: {missing_columns}")
    
    menu = []
    for _, row in menu_df.iterrows():
        menu.append({
            "name": row[column_mapping["name"]],
            "price": row[column_mapping["price"]],
            "description": row[column_mapping["description"]],
            "image": row[column_mapping["image"]],
        })
    return menu

# Initialize menu and cart
menu_data = load_menu("menu.xlsx")
cart = {}

def display_menu():
    """
    Render the menu dynamically.
    """
    menu_html = ""
    for item in menu_data:
        if item["name"] in cart:
            # Quantity selector if the item is already in the cart
            menu_html += f"""
            <div style="display: flex; align-items: center; margin-bottom: 15px; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                <img src="{item['image']}" alt="{item['name']}" style="width: 80px; height: 80px; border-radius: 5px; margin-right: 15px;">
                <div>
                    <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                    <p style="font-size: 12px; color: gray;">{item['description']}</p>
                </div>
                <div style="margin-left: auto; display: flex; align-items: center;">
                    <button onclick="update_quantity('{item['name']}', {cart[item['name']]['quantity'] - 1})" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px;">-</button>
                    <span style="margin: 0 10px;">{cart[item['name']]['quantity']}</span>
                    <button onclick="update_quantity('{item['name']}', {cart[item['name']]['quantity'] + 1})" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
                </div>
            </div>
            """
        else:
            # Add button if the item is not in the cart
            menu_html += f"""
            <div style="display: flex; align-items: center; margin-bottom: 15px; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                <img src="{item['image']}" alt="{item['name']}" style="width: 80px; height: 80px; border-radius: 5px; margin-right: 15px;">
                <div>
                    <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                    <p style="font-size: 12px; color: gray;">{item['description']}</p>
                </div>
                <button onclick="add_to_cart('{item['name']}')" style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; margin-left: auto;">Add</button>
            </div>
            """
    return menu_html

def add_to_cart(item_name):
    """
    Add an item to the cart.
    """
    if item_name in cart:
        cart[item_name]["quantity"] += 1
    else:
        for item in menu_data:
            if item["name"] == item_name:
                cart[item_name] = {
                    "name": item["name"],
                    "price": item["price"],
                    "quantity": 1
                }
                break
    return display_menu()

def update_quantity(item_name, new_quantity):
    """
    Update the quantity of an item in the cart.
    """
    if item_name in cart:
        if new_quantity <= 0:
            del cart[item_name]
        else:
            cart[item_name]["quantity"] = new_quantity
    return display_menu()

def view_cart():
    """
    Render the cart dynamically.
    """
    if not cart:
        return "Your cart is empty."
    
    cart_html = "<h3>Your Cart:</h3>"
    total_price = 0
    for item in cart.values():
        item_total = item["price"] * item["quantity"]
        total_price += item_total
        cart_html += f"""
        <div style="display: flex; align-items: center; margin-bottom: 15px; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
            <h4 style="margin: 0;">{item['name']}</h4>
            <div style="margin-left: auto; display: flex; align-items: center;">
                <button onclick="update_quantity('{item['name']}', {item['quantity'] - 1})" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px;">-</button>
                <span style="margin: 0 10px;">{item['quantity']}</span>
                <button onclick="update_quantity('{item['name']}', {item['quantity'] + 1})" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
            </div>
            <p style="margin: 0 0 0 15px;">${item_total:.2f}</p>
        </div>
        """
    cart_html += f"<h4>Total: ${total_price:.2f}</h4>"
    return cart_html

# Gradio Interface
with gr.Blocks() as demo:
    gr.Markdown("# Dynamic Food Menu")
    
    with gr.Row():
        menu_html = gr.HTML(value=display_menu())
        cart_html = gr.HTML(value=view_cart())
    
    demo.launch()