Spaces:
Sleeping
Sleeping
File size: 3,178 Bytes
046ab00 94360b6 046ab00 78d8d23 e9b814a 046ab00 78d8d23 e9b814a 046ab00 78d8d23 e9b814a 046ab00 78d8d23 e9b814a 046ab00 e9b814a 94360b6 e9b814a 5799b52 94360b6 5799b52 94360b6 30d7cba 94360b6 30d7cba e9b814a 30d7cba 94360b6 30d7cba 78d8d23 94360b6 5799b52 046ab00 94360b6 046ab00 5799b52 |
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 102 103 104 105 106 |
import gradio as gr
# Popcorn data
popcorn_data = [
{
"name": "Cheese Popcorn",
"image": "static/Flavours/Cheese popcorn.jpg",
"prices": {
"Small": "₹199",
"Medium": "₹349",
"Large": "₹499"
}
},
{
"name": "Caramel Popcorn",
"image": "static/Flavours/Caramel popcorn.jpg",
"prices": {
"Small": "₹249",
"Medium": "₹399",
"Large": "₹599"
}
},
{
"name": "Butter Popcorn",
"image": "static/Flavours/Butter popcorn.jpg",
"prices": {
"Small": "₹149",
"Medium": "₹299",
"Large": "₹399"
}
},
{
"name": "Spicy Popcorn",
"image": "static/Flavours/Spicy popcorn.jpg",
"prices": {
"Small": "₹249",
"Medium": "₹449",
"Large": "₹649"
}
},
]
def display_price(prices, size):
return f"<div class='popcorn-price'>{prices[size]}</div>"
with gr.Blocks(css="""
.main-container {
background: linear-gradient(to right, #fff3e0, #ffe0b2);
padding: 40px;
border-radius: 20px;
}
..app-header h1 {
text-align: center;
color: #d35400; /* Rich orange */
font-size: 48px !important; /* Make it big */
font-weight: 900 !important; /* Make it bold */
margin-bottom: 30px;
font-family: 'Segoe UI', sans-serif;
}
.popcorn-card {
border: 2px solid #ffcc00;
border-radius: 15px;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
background-color: #ffffffcc;
margin: 10px;
}
.popcorn-price {
color: #ff6600;
font-weight: bold;
font-size: 18px;
margin-top: 10px;
}
.popcorn-name {
font-size: 20px;
font-weight: bold;
color: #333;
margin-top: 10px;
}
""") as demo:
with gr.Column(elem_classes="main-container"):
gr.Markdown("<h1 class='app-header'>🍿 Welcome to the Popcorn Gallery</h1>")
for i in range(0, len(popcorn_data), 2):
with gr.Row():
for item in popcorn_data[i:i+2]:
with gr.Column(elem_classes="popcorn-card"):
gr.Image(value=item["image"], label=item["name"], height=200)
gr.Markdown(f"<div class='popcorn-name'>{item['name']}</div>")
size_dropdown = gr.Dropdown(
choices=list(item["prices"].keys()),
value="Small",
label="Select Size"
)
price_display = gr.Markdown(
value=f"<div class='popcorn-price'>{item['prices']['Small']}</div>"
)
size_dropdown.change(
fn=display_price,
inputs=[gr.State(item["prices"]), size_dropdown],
outputs=price_display
)
demo.launch() |