File size: 4,037 Bytes
ba4dd53
 
 
807b0c3
ba4dd53
 
807b0c3
ba4dd53
 
 
0f06d66
37e70db
ba4dd53
0f06d66
 
 
 
 
 
 
 
 
 
37e70db
0f06d66
37e70db
0f06d66
 
807b0c3
 
 
 
0f06d66
 
 
807b0c3
37e70db
 
 
 
0f06d66
37e70db
c6f513e
0f06d66
 
0d58d8b
 
 
0f06d66
4b578a2
6b86d43
 
0f06d66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b578a2
0f06d66
 
 
f690d7c
6b86d43
4b578a2
0f06d66
7980609
37e70db
7980609
06b4e04
7980609
6b86d43
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
97
98
99
100
101
import gradio as gr
import pandas as pd

# Function to load menu data
def load_menu():
    try:
        return pd.read_excel("menu.xlsx")
    except Exception as e:
        raise ValueError(f"Error loading menu file: {e}")

# Function to filter and display menu items
def filter_menu(preference):
    menu_data = load_menu()
    if preference == "Halal/Non-Veg":
        filtered_data = menu_data[menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)]
    elif preference == "Vegetarian":
        filtered_data = menu_data[~menu_data["Ingredients"].str.contains("Chicken|Mutton|Fish|Prawns|Goat", case=False, na=False)]
    elif preference == "Guilt-Free":
        filtered_data = menu_data[menu_data["Description"].str.contains(r"Fat: ([0-9]|10)g", case=False, na=False)]
    else:  # Default to "All"
        filtered_data = menu_data

    # Generate HTML for the menu
    html_content = ""
    for _, item in filtered_data.iterrows():
        html_content += f"""
        <div class="menu-card">
            <div class="menu-card-content">
                <h3>{item['Dish Name']}</h3>
                <p>{item['Description']}</p>
                <p><strong>${item['Price ($)']}</strong></p>
            </div>
            <div class="menu-card-actions">
                <img src="{item['Image URL']}" alt="{item['Dish Name']}" class="menu-card-image">
                <button class="add-button" onclick="openModal('{item['Dish Name']}', '{item['Image URL']}', '{item['Description']}', '{item['Price ($)']}')">Add</button>
            </div>
        </div>
        """
    return html_content

# Main Gradio app
def app():
    with gr.Blocks(css="style.css") as demo:
        # Menu Filters
        gr.Markdown("## Dynamic Menu with Preferences")
        preference_selector = gr.Radio(
            choices=["All", "Vegetarian", "Halal/Non-Veg", "Guilt-Free"],
            value="All",
            label="Choose a Preference"
        )
        menu_output = gr.HTML(value=filter_menu("All"))

        # Modal Logic via HTML
        modal_logic = gr.HTML("""
        <div id="modal" class="modal">
            <div class="modal-content">
                <span class="close-button" onclick="closeModal()">&times;</span>
                <img id="modal-image" class="modal-image" />
                <h2 id="modal-name"></h2>
                <p id="modal-description"></p>
                <p id="modal-price"></p>
                <label for="spice-level">Choose Spice Level:</label>
                <select id="spice-level">
                    <option value="Mild">Mild</option>
                    <option value="Medium">Medium</option>
                    <option value="Spicy">Spicy</option>
                </select>
                <label for="quantity">Quantity:</label>
                <input type="number" id="quantity" value="1" min="1" />
                <textarea id="special-instructions" placeholder="Add special instructions here..."></textarea>
                <button class="modal-add-button">Add to Cart</button>
            </div>
        </div>
        <script>
            function openModal(name, image, description, price) {
                document.getElementById("modal").style.display = "block";
                document.getElementById("modal-image").src = image;
                document.getElementById("modal-name").innerText = name;
                document.getElementById("modal-description").innerText = description;
                document.getElementById("modal-price").innerText = price;
            }
            function closeModal() {
                document.getElementById("modal").style.display = "none";
            }
        </script>
        """)

        # App Layout
        with gr.Row():
            preference_selector.change(filter_menu, inputs=[preference_selector], outputs=[menu_output])
        with gr.Row():
            menu_output
        with gr.Row():
            modal_logic

    return demo


if __name__ == "__main__":
    app().launch()