Update app.py

app.py

@@ -137,37 +137,36 @@ def extract_price(price_str: str) -> float:
     match = re.search(r"\d+[.,]?\d*", price_str or "")
     return float(match.group().replace(",", ".")) if match else 0.0
 
-
+# 自定义样式：隐藏底部栏
 css_hide_footer = """
 <style>
   footer, .svelte-1ipelgc { display: none !important; }
 </style>
 """
 
-css_custom_tabs = """
-<style>
-.svelte-tabs-container {
-  flex-wrap: nowrap !important;
-  overflow-x: auto !important;
-  justify-content: center !important;
-  gap: 10px !important;
-}
-.svelte-tabs-tab {
-  font-size: 13px !important;
-  padding: 6px 12px !important;
-  white-space: nowrap !important;
-}
-.svelte-tabs-container::-webkit-scrollbar {
-  display: none;
-}
-</style>
-"""
-
-# in demo:
-gr.HTML(css_hide_footer + css_custom_tabs)
-
-
-
+def render_section(category):
+    """根据所选菜单分类渲染菜品列表"""
+    section_html = ""
+    for item in menu.get(category, []):
+        image_html = f"<img src='{item.get('image', '')}' alt='{item.get('name', '')}' style='height:90px;width:120px;border-radius:8px;'/>"
+        name = item.get("name", "")
+        desc = item.get("description", "")
+        price = item.get("price", "")
+        price_html = f"<span style='font-size:1.1em;font-weight:bold;color:green;'>{price}</span>"
+        block = f"""
+        <div style='margin-bottom: 20px;'>
+          <div style='display: flex; gap: 12px;'>
+            <div>{image_html}</div>
+            <div>
+              <div><strong>{name}</strong></div>
+              <div>{desc}</div>
+              <div>{price_html}</div>
+            </div>
+          </div>
+        </div>
+        """
+        section_html += block
+    return section_html
 
 with gr.Blocks() as demo:
     gr.Markdown("# 🍜🥢 EAT EAT Cafe & Bistro")
@@ -175,30 +174,18 @@ with gr.Blocks() as demo:
     gr.Markdown(
         "Your task: One starter containing mushroom，One main course containing beef；One drink that is the cheapest on the menu."
     )
-	
-	
-    cart_state = gr.State({})
-    button_refs = []
-    with gr.Tabs():
-        for section, items in menu.items():
-            with gr.TabItem(section):
-                for item in items:
-                    with gr.Row():
-                        with gr.Column(scale=1):
-                            gr.HTML(
-                                f"<img src='{item.get('image', '')}' alt='{item.get('name', '')}' "
-                                "style='height:90px;width:120px;border-radius:8px;'/>"
-                            )
-                        with gr.Column(scale=4):
-                            name = item.get("name", "")
-                            desc = item.get("description", "")
-                            price_str = item.get("price", "")
-                            price_html = f"<span style='font-size:1.1em;font-weight:bold;color:green;'>{price_str}</span>"
-                            gr.Markdown(
-                                f"**{name}**\n\n{desc}\n\n{price_html}",
-                                show_label=False,
-                            )
 
+    selected_category = gr.State("Starters")
+    menu_display = gr.HTML(render_section("Starters"))
+
+    with gr.Row():
+        for cat in menu.keys():
+            gr.Button(cat).click(
+                lambda c=cat: (c, render_section(c)),
+                outputs=[selected_category, menu_display],
+            )
+
+    menu_display.render()
 
 if __name__ == "__main__":
     demo.launch()