Spaces:
Build error
Build error
| import gradio as gr | |
| # Step 1: Define food items | |
| food_items = [ | |
| { | |
| "name": "Samosa", | |
| "price": "$10", | |
| "description": "Crispy fried pastry filled with spiced potatoes and peas. Serves 1. [Energy: 200 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 3g, Fat: 10g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/Potato-Samosa.jpg" | |
| }, | |
| { | |
| "name": "Onion Pakoda", | |
| "price": "$14", | |
| "description": "Deep-fried onion fritters seasoned with herbs and spices. Serves 2. [Energy: 250 kcal, Protein: 6g, Carbohydrates: 30g, Fiber: 4g, Fat: 12g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/onion-pakoda.jpg" | |
| }, | |
| { | |
| "name": "Paneer Tikka", | |
| "price": "$15", | |
| "description": "Grilled paneer cubes marinated in spices. Serves 1. [Energy: 300 kcal, Protein: 15g, Carbohydrates: 10g, Fiber: 2g, Fat: 20g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/paneer-tikka.jpg" | |
| }, | |
| { | |
| "name": "Veg Biryani", | |
| "price": "$12", | |
| "description": "Aromatic rice cooked with vegetables and spices. Serves 1. [Energy: 350 kcal, Protein: 8g, Carbohydrates: 50g, Fiber: 5g, Fat: 12g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/veg-biryani.jpg" | |
| }, | |
| { | |
| "name": "Chicken Curry", | |
| "price": "$16", | |
| "description": "Tender chicken pieces cooked in a spicy curry. Serves 1. [Energy: 400 kcal, Protein: 25g, Carbohydrates: 10g, Fiber: 2g, Fat: 25g, Sugar: 3g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/chicken-curry.jpg" | |
| }, | |
| { | |
| "name": "Masala Dosa", | |
| "price": "$10", | |
| "description": "Thin rice crepe stuffed with spiced potato filling. Serves 1. [Energy: 300 kcal, Protein: 6g, Carbohydrates: 45g, Fiber: 4g, Fat: 8g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/masala-dosa.jpg" | |
| }, | |
| { | |
| "name": "Idli", | |
| "price": "$8", | |
| "description": "Steamed rice cakes served with chutney and sambar. Serves 2. [Energy: 200 kcal, Protein: 4g, Carbohydrates: 40g, Fiber: 3g, Fat: 1g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/idli.jpg" | |
| }, | |
| { | |
| "name": "Medu Vada", | |
| "price": "$9", | |
| "description": "Crispy fried lentil donuts served with chutney. Serves 2. [Energy: 250 kcal, Protein: 7g, Carbohydrates: 30g, Fiber: 4g, Fat: 10g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/medu-vada.jpg" | |
| }, | |
| { | |
| "name": "Pav Bhaji", | |
| "price": "$12", | |
| "description": "Spicy mashed vegetables served with buttered bread. Serves 1. [Energy: 400 kcal, Protein: 10g, Carbohydrates: 50g, Fiber: 6g, Fat: 15g, Sugar: 4g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/pav-bhaji.jpg" | |
| }, | |
| { | |
| "name": "Chole Bhature", | |
| "price": "$14", | |
| "description": "Spicy chickpea curry served with deep-fried bread. Serves 1. [Energy: 500 kcal, Protein: 15g, Carbohydrates: 60g, Fiber: 7g, Fat: 20g, Sugar: 3g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/chole-bhature.jpg" | |
| }, | |
| { | |
| "name": "Dal Tadka", | |
| "price": "$11", | |
| "description": "Yellow lentils cooked with spices and tempered with ghee. Serves 1. [Energy: 300 kcal, Protein: 10g, Carbohydrates: 30g, Fiber: 6g, Fat: 12g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/dal-tadka.jpg" | |
| }, | |
| { | |
| "name": "Butter Chicken", | |
| "price": "$18", | |
| "description": "Creamy chicken curry made with butter and spices. Serves 1. [Energy: 450 kcal, Protein: 28g, Carbohydrates: 10g, Fiber: 2g, Fat: 30g, Sugar: 4g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/butter-chicken.jpg" | |
| }, | |
| { | |
| "name": "Tandoori Roti", | |
| "price": "$5", | |
| "description": "Whole wheat flatbread cooked in a tandoor. Serves 1. [Energy: 150 kcal, Protein: 4g, Carbohydrates: 25g, Fiber: 3g, Fat: 2g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/tandoori-roti.jpg" | |
| }, | |
| { | |
| "name": "Garlic Naan", | |
| "price": "$7", | |
| "description": "Leavened flatbread topped with garlic and butter. Serves 1. [Energy: 200 kcal, Protein: 5g, Carbohydrates: 30g, Fiber: 2g, Fat: 5g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/garlic-naan.jpg" | |
| }, | |
| { | |
| "name": "Matar Paneer", | |
| "price": "$13", | |
| "description": "Cottage cheese and peas cooked in a tomato-based gravy. Serves 1. [Energy: 350 kcal, Protein: 12g, Carbohydrates: 20g, Fiber: 4g, Fat: 25g, Sugar: 3g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/matar-paneer.jpg" | |
| }, | |
| { | |
| "name": "Aloo Paratha", | |
| "price": "$10", | |
| "description": "Stuffed flatbread with spiced potato filling. Serves 1. [Energy: 300 kcal, Protein: 7g, Carbohydrates: 45g, Fiber: 5g, Fat: 10g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/aloo-paratha.jpg" | |
| }, | |
| { | |
| "name": "Rasgulla", | |
| "price": "$6", | |
| "description": "Soft and spongy cheese balls soaked in sugar syrup. Serves 1. [Energy: 150 kcal, Protein: 3g, Carbohydrates: 30g, Fiber: 0g, Fat: 2g, Sugar: 25g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/rasgulla.jpg" | |
| }, | |
| { | |
| "name": "Gulab Jamun", | |
| "price": "$7", | |
| "description": "Deep-fried dough balls soaked in sugar syrup. Serves 1. [Energy: 180 kcal, Protein: 2g, Carbohydrates: 35g, Fiber: 0g, Fat: 5g, Sugar: 30g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/gulab-jamun.jpg" | |
| }, | |
| { | |
| "name": "Kheer", | |
| "price": "$8", | |
| "description": "Creamy rice pudding flavored with cardamom and nuts. Serves 1. [Energy: 200 kcal, Protein: 4g, Carbohydrates: 30g, Fiber: 1g, Fat: 8g, Sugar: 20g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/kheer.jpg" | |
| }, | |
| { | |
| "name": "Mango Lassi", | |
| "price": "$5", | |
| "description": "Refreshing yogurt-based mango drink. Serves 1. [Energy: 150 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 1g, Fat: 3g, Sugar: 20g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/mango-lassi.jpg" | |
| }, | |
| { | |
| "name": "Masala Chai", | |
| "price": "$4", | |
| "description": "Spiced Indian tea made with milk and spices. Serves 1. [Energy: 100 kcal, Protein: 2g, Carbohydrates: 15g, Fiber: 0g, Fat: 3g, Sugar: 10g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/masala-chai.jpg" | |
| }, | |
| { | |
| "name": "Pani Puri", | |
| "price": "$8", | |
| "description": "Crispy hollow puris filled with tangy flavored water. Serves 1. [Energy: 150 kcal, Protein: 4g, Carbohydrates: 20g, Fiber: 2g, Fat: 5g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/pani-puri.jpg" | |
| }, | |
| { | |
| "name": "Sev Puri", | |
| "price": "$9", | |
| "description": "Crispy puris topped with chutneys, onions, and sev. Serves 1. [Energy: 180 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 3g, Fat: 6g, Sugar: 3g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/sev-puri.jpg" | |
| }, | |
| { | |
| "name": "Dhokla", | |
| "price": "$7", | |
| "description": "Soft and spongy steamed savory cake made from fermented batter. Serves 1. [Energy: 120 kcal, Protein: 6g, Carbohydrates: 15g, Fiber: 2g, Fat: 4g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/dhokla.jpg" | |
| }, | |
| { | |
| "name": "Bhindi Masala", | |
| "price": "$12", | |
| "description": "Spicy stir-fried okra with onions and tomatoes. Serves 1. [Energy: 200 kcal, Protein: 4g, Carbohydrates: 15g, Fiber: 4g, Fat: 12g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/bhindi-masala.jpg" | |
| }, | |
| { | |
| "name": "Palak Paneer", | |
| "price": "$13", | |
| "description": "Cottage cheese cubes in a creamy spinach gravy. Serves 1. [Energy: 300 kcal, Protein: 10g, Carbohydrates: 15g, Fiber: 3g, Fat: 20g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/palak-paneer.jpg" | |
| }, | |
| { | |
| "name": "Vegetable Pulao", | |
| "price": "$11", | |
| "description": "Fragrant rice cooked with mixed vegetables and spices. Serves 1. [Energy: 300 kcal, Protein: 6g, Carbohydrates: 50g, Fiber: 4g, Fat: 10g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/vegetable-pulao.jpg" | |
| }, | |
| { | |
| "name": "Aloo Gobi", | |
| "price": "$10", | |
| "description": "Potatoes and cauliflower cooked with spices. Serves 1. [Energy: 250 kcal, Protein: 5g, Carbohydrates: 20g, Fiber: 5g, Fat: 15g, Sugar: 1g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/aloo-gobi.jpg" | |
| }, | |
| { | |
| "name": "Rajma", | |
| "price": "$12", | |
| "description": "Red kidney beans cooked in a flavorful tomato gravy. Serves 1. [Energy: 300 kcal, Protein: 10g, Carbohydrates: 40g, Fiber: 7g, Fat: 8g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/rajma.jpg" | |
| }, | |
| { | |
| "name": "Kachori", | |
| "price": "$7", | |
| "description": "Spiced lentil-filled crispy fried snack. Serves 1. [Energy: 200 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 3g, Fat: 10g, Sugar: 2g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/kachori.jpg" | |
| }, | |
| { | |
| "name": "Shahi Paneer", | |
| "price": "$14", | |
| "description": "Rich and creamy paneer curry with a royal taste. Serves 1. [Energy: 400 kcal, Protein: 12g, Carbohydrates: 15g, Fiber: 2g, Fat: 30g, Sugar: 3g]", | |
| "image": "https://huggingface.co/spaces/DSatishchandra/DynamicFoodMenu/raw/main/images/shahi-paneer.jpg" | |
| } | |
| ] | |
| # Step 2: Generate HTML for food items | |
| def generate_food_menu(): | |
| html_content = "<div style=\"display: flex; flex-direction: column; gap: 10px;\">" | |
| for item in food_items: | |
| html_content += f""" | |
| <div class=\"menu-item\" style=\"display: flex; justify-content: space-between; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 10px;\"> | |
| <div style=\"flex: 1;\"> | |
| <h3 style=\"margin: 0;\">{item['name']}</h3> | |
| <p style=\"margin: 0; color: #555;\">{item['price']}</p> | |
| <p style=\"margin: 0; color: #777; font-size: 14px;\">{item['description']}</p> | |
| </div> | |
| <img src=\"{item['image']}\" alt=\"{item['name']}\" class=\"menu-image\" style=\"width: 100px; height: 80px; object-fit: cover; border-radius: 5px; margin-right: 10px; cursor: pointer;\" onclick=\"openPopup('{item['name']}', '{item['price']}', '{item['description']}', '{item['image']}')\"> | |
| <button class=\"add-btn\" style=\"background-color: green; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer;\" onclick=\"openPopup('{item['name']}', '{item['price']}', '{item['description']}', '{item['image']}')\">Add</button> | |
| </div> | |
| """ | |
| html_content += "</div>" | |
| return html_content | |
| # Step 3: Add JavaScript for the pop-up | |
| popup_js = """ | |
| <script> | |
| function openPopup(name, price, description, image) { | |
| document.getElementById('popup-name').innerText = name; | |
| document.getElementById('popup-price').innerText = price; | |
| document.getElementById('popup-description').innerText = description; | |
| document.getElementById('popup-image').src = image; | |
| document.getElementById('popup').style.display = 'block'; | |
| } | |
| function closePopup() { | |
| document.getElementById('popup').style.display = 'none'; | |
| } | |
| </script> | |
| """ | |
| # Step 4: Build the Gradio Interface | |
| with gr.Blocks() as demo: | |
| with gr.Row(): | |
| gr.HTML(generate_food_menu()) # Render food menu | |
| gr.HTML(""" | |
| <div id=\"popup\" class=\"popup\" style=\"display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); max-width:90%; width:600px; max-height:90%; overflow-y:auto; background:rgba(255, 255, 255, 0.95); display:flex; flex-direction: column; justify-content:center; align-items:center; border-radius: 15px; padding: 20px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);\"> | |
| <button onclick=\"closePopup()\" style=\"position:absolute; top:10px; right:10px; background:none; border:none; font-size:20px; cursor:pointer;\">×</button> | |
| <div class=\"popup-content\" style=\"background:#fff; padding:20px; border-radius:15px; width:100%; text-align:center;\"> | |
| <img id=\"popup-image\" src=\"\" alt=\"Food Image\" style=\"width:100%; height:auto; border-radius:10px;\"> | |
| <h2 id=\"popup-name\" style=\"margin: 15px 0;\"></h2> | |
| <p id=\"popup-price\" style=\"margin: 0; font-size: 16px; color: #333;\"></p> | |
| <p id=\"popup-description\" style=\"margin: 10px 0; font-size: 14px; color: #666;\"></p> | |
| <div style=\"margin: 10px 0; text-align: left;\"> | |
| <h4 style=\"margin-bottom: 5px;\">Choose a spice level:</h4> | |
| <p style=\"font-size: 12px; color: #777; margin: 0 0 10px;\">Required - Choose 1.</p> | |
| <div style=\"display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;\"> | |
| <label><input type=\"radio\" name=\"spice-level\"> American Mild</label> | |
| <label><input type=\"radio\" name=\"spice-level\"> American Medium</label> | |
| <label><input type=\"radio\" name=\"spice-level\"> American Spicy</label> | |
| <label><input type=\"radio\" name=\"spice-level\"> Indian Mid</label> | |
| <label><input type=\"radio\" name=\"spice-level\"> Indian Medium</label> | |
| <label><input type=\"radio\" name=\"spice-level\"> Indian Spicy</label> | |
| <label><input type=\"radio\" name=\"spice-level\"> Indian Very Spicy</label> | |
| </div> | |
| <h4 style=\"margin-top: 15px;\">Biryani Extra's</h4> | |
| <p style=\"font-size: 12px; color: #777; margin: 0 0 10px;\">Optional - Choose as many as you like.</p> | |
| <div style=\"display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;\"> | |
| <label><input type=\"checkbox\"> Extra Raitha 4oz + $1.00</label> | |
| <label><input type=\"checkbox\"> Extra Raitha 8oz + $2.00</label> | |
| <label><input type=\"checkbox\"> Extra Salan 4oz + $1.00</label> | |
| <label><input type=\"checkbox\"> Extra Salan 8oz + $2.00</label> | |
| <label><input type=\"checkbox\"> Extra Onion + $1.00</label> | |
| <label><input type=\"checkbox\"> Extra Onion & Lemon + $2.00</label> | |
| <label><input type=\"checkbox\"> Extra Fried Onion 4oz + $2.00</label> | |
| </div> | |
| <h4 style=\"margin-top: 15px;\">Special instructions</h4> | |
| <textarea placeholder=\"Add any requests here.\" style=\"width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ddd;\"></textarea> | |
| <h4 style=\"margin-top: 15px;\">Quantity</h4> | |
| <div style=\"display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 15px;\"> | |
| <button style=\"padding: 5px 10px; font-size: 16px;\">-</button> | |
| <input type=\"number\" value=\"1\" min=\"1\" style=\"width: 50px; text-align: center;\"> | |
| <button style=\"padding: 5px 10px; font-size: 16px;\">+</button> | |
| </div> | |
| </div> | |
| <button style=\"margin-top:20px; padding:10px 20px; background:purple; color:#fff; border:none; border-radius:5px; cursor:pointer;\">Add to Bag</button> | |
| </div> | |
| </div> | |
| """) | |
| gr.HTML(popup_js) # Inject JavaScript | |
| demo.launch() | |