File size: 3,884 Bytes
f65f970
 
 
 
8fb83ea
 
f5513ef
34938c5
 
 
 
f5513ef
 
 
34938c5
 
 
f5513ef
34938c5
 
 
 
 
 
 
 
f5513ef
34938c5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c0caa98
 
 
 
 
 
34938c5
c0caa98
 
34938c5
 
 
 
f5513ef
 
 
c0caa98
9b01074
c0caa98
 
 
 
 
9b01074
34938c5
 
 
 
 
f65f970
c0caa98
34938c5
9b01074
c0caa98
34938c5
f5513ef
34938c5
 
c0caa98
34938c5
 
 
 
 
 
 
 
 
 
 
9b01074
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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()