app.py

import gradio as gr
from simple_salesforce import Salesforce

# Salesforce Connection
sf = Salesforce(username='[email protected]', password='Sati@1020', security_token='sSSjyhInIsUohKpG8sHzty2q')

# Fetch menu items from Salesforce
def fetch_menu_items():
    query = "SELECT Id, Name, Price__c, Description__c, Image1__c, Section__c, Veg_NonVeg__c FROM Menu_Item__c"
    results = sf.query(query)['records']
    return results

# Fetch add-ons from Salesforce
def fetch_add_ons():
    query = "SELECT Name, Price__c, Menu_Item__c FROM Add_Ons__c"
    results = sf.query(query)['records']
    return results

# Generate menu HTML
def generate_menu_html(menu_items, add_ons):
    add_ons_by_item = {}
    for add_on in add_ons:
        item_id = add_on['Menu_Item__c']
        if item_id not in add_ons_by_item:
            add_ons_by_item[item_id] = []
        add_ons_by_item[item_id].append(f"{add_on['Name']} (+${add_on['Price__c']})")

    html = ""
    sections = {item['Section__c'] for item in menu_items}
    for section in sections:
        html += f"<h2>{section}</h2><div style='display: flex; flex-wrap: wrap;'>"
        for item in [i for i in menu_items if i['Section__c'] == section]:
            add_ons_list = add_ons_by_item.get(item['Id'], [])
            add_ons_html = "<br>".join(add_ons_list)
            html += f"""
            <div style='width: 250px; margin: 10px; border: 1px solid #ccc; border-radius: 8px; padding: 10px;'>
                <img src='{item['Image1__c']}' alt='{item['Name']}' style='width: 100%; height: 150px; object-fit: cover;'>
                <h3>{item['Name']}</h3>
                <p>{item['Description__c']}</p>
                <p>Price: ${item['Price__c']}</p>
                <button onclick="openPopup('{item['Id']}', '{item['Name']}', '{item['Price__c']}', '{item['Image1__c']}', `{add_ons_html}`)">Customize & Add</button>
            </div>
            """
        html += "</div>"
    return html

# JavaScript for popup functionality
popup_script = """
<script>
    function openPopup(id, name, price, image, addOnsHtml) {
        const popup = document.getElementById('popup');
        popup.style.display = 'block';
        popup.style.width = '400px';
        popup.style.height = '600px';
        popup.style.margin = 'auto';
        document.getElementById('popup-title').innerText = name;
        document.getElementById('popup-price').innerText = `$${price}`;
        document.getElementById('popup-image').src = image;
        document.getElementById('popup-addons').innerHTML = addOnsHtml;
    }

    function closePopup() {
        document.getElementById('popup').style.display = 'none';
    }
</script>
"""

# Gradio App
menu_items = fetch_menu_items()
add_ons = fetch_add_ons()
menu_html = generate_menu_html(menu_items, add_ons)

with gr.Blocks() as app:
    with gr.Row():
        gr.HTML("<h1 style='text-align: center;'>Welcome to Biryani Hub</h1>")

    with gr.Row():
        gr.HTML("<div>Filter Preference: <input type='radio' name='filter' value='All' checked> All <input type='radio' name='filter' value='Veg'> Veg <input type='radio' name='filter' value='Non-Veg'> Non-Veg</div>")

    with gr.Row():
        gr.HTML(menu_html)

    # Popup
    gr.HTML("""
    <div id='popup' style='display: none; position: fixed; top: 20%; left: 50%; transform: translate(-50%, -20%); background: white; border: 1px solid #ccc; border-radius: 8px; padding: 20px; z-index: 1000;'>
        <img id='popup-image' src='' style='width: 100%; height: 200px; object-fit: cover;'>
        <h2 id='popup-title'></h2>
        <p id='popup-price'></p>
        <textarea id='popup-instructions' placeholder='Special Instructions' style='width: 100%; height: 80px;'></textarea>
        <div id='popup-addons'></div>
        <button onclick='closePopup()'>Close</button>
    </div>
    """ + popup_script)

app.launch()