|
|
|
|
|
import gradio as gr |
|
|
|
|
|
|
|
|
menu = [ |
|
|
{ |
|
|
"name": "Roti", |
|
|
"image": "https://via.placeholder.com/150?text=Roti", |
|
|
"nutrition": "Calories: 70 | Protein: 2g | Carbs: 15g" |
|
|
}, |
|
|
{ |
|
|
"name": "Paneer Butter Masala", |
|
|
"image": "https://via.placeholder.com/150?text=Paneer+Butter+Masala", |
|
|
"nutrition": "Calories: 450 | Protein: 15g | Carbs: 20g | Fat: 35g" |
|
|
}, |
|
|
{ |
|
|
"name": "Chicken Curry", |
|
|
"image": "https://via.placeholder.com/150?text=Chicken+Curry", |
|
|
"nutrition": "Calories: 300 | Protein: 25g | Carbs: 5g | Fat: 20g" |
|
|
}, |
|
|
{ |
|
|
"name": "Vegetable Biryani", |
|
|
"image": "https://via.placeholder.com/150?text=Vegetable+Biryani", |
|
|
"nutrition": "Calories: 250 | Protein: 5g | Carbs: 45g | Fat: 5g" |
|
|
}, |
|
|
] |
|
|
|
|
|
def display_menu(): |
|
|
"""Generate HTML for menu items with hover effects.""" |
|
|
html_content = """ |
|
|
<style> |
|
|
.menu-item { |
|
|
display: inline-block; |
|
|
margin: 20px; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
} |
|
|
.menu-item img { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
border-radius: 10px; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
.menu-item img:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.menu-item .nutrition { |
|
|
position: absolute; |
|
|
bottom: 10px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
visibility: hidden; |
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
color: white; |
|
|
padding: 5px 10px; |
|
|
border-radius: 5px; |
|
|
font-size: 12px; |
|
|
white-space: nowrap; |
|
|
} |
|
|
.menu-item:hover .nutrition { |
|
|
visibility: visible; |
|
|
} |
|
|
</style> |
|
|
<div> |
|
|
""" |
|
|
for item in menu: |
|
|
html_content += f""" |
|
|
<div class="menu-item"> |
|
|
<img src="{item['image']}" alt="{item['name']}"> |
|
|
<p>{item['name']}</p> |
|
|
<div class="nutrition">{item['nutrition']}</div> |
|
|
</div> |
|
|
""" |
|
|
html_content += "</div>" |
|
|
return html_content |
|
|
|
|
|
with gr.Blocks() as demo: |
|
|
gr.Markdown("# Welcome to Our Food Menu") |
|
|
gr.Markdown(display_menu(), elem_id="menu-display") |
|
|
|
|
|
demo.launch() |
|
|
|
|
|
|
