Update app.py

app.py

@@ -133,60 +133,93 @@ menu = {
     ],
 }
 
-
-css_fix_tabs = """
+# 样式：隐藏footer + 优化导航栏
+css = """
 <style>
   footer, .svelte-1ipelgc { display: none !important; }
-  .gr-tab-label {
-    font-size: 13px !important;
-    padding: 6px 10px !important;
+
+  .custom-nav {
+    display: flex;
+    overflow-x: auto;
     white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 10px;
+    padding: 5px 0;
+    gap: 6px;
   }
-  .gr-tabs > div:first-child {
-    flex-wrap: nowrap !important;
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+
+  .custom-nav button {
+    flex: 1 0 auto;
+    font-size: 14px;
+    padding: 6px 12px;
+    border-radius: 12px;
+    border: 1px solid #ccc;
+    background: #f5f5f5;
+    cursor: pointer;
+    white-space: nowrap;
   }
-  .gr-tabs > div:first-child::-webkit-scrollbar {
+
+  .custom-nav::-webkit-scrollbar {
     display: none;
   }
 </style>
 """
 
-def render_item(item):
-    return gr.Row(
-        [
-            gr.Column(
-                [gr.HTML(
-                    f"<img src='{item['image']}' alt='{item['name']}' style='height:90px;width:120px;border-radius:8px;' />"
-                )],
-                scale=1,
-            ),
-            gr.Column(
-                [
-                    gr.Markdown(
-                        f"**{item['name']}**\n\n{item['description']}\n\n"
-                        f"<span style='font-size:1.1em;font-weight:bold;color:green;'>{item['price']}</span>",
-                        show_label=False,
-                    )
-                ],
-                scale=4,
-            ),
-        ]
-    )
+# 渲染菜品
+def render_section(category):
+    html = ""
+    for item in menu.get(category, []):
+        html += f"""
+        <div style='margin-bottom: 20px;'>
+            <div style='display: flex; gap: 12px;'>
+                <div><img src="{item['image']}" style="width:100px;height:80px;border-radius:8px;"></div>
+                <div>
+                    <strong>{item['name']}</strong><br>
+                    {item['description']}<br>
+                    <span style="color:green;font-weight:bold;">{item['price']}</span>
+                </div>
+            </div>
+        </div>
+        """
+    return html
 
+# 主界面
 with gr.Blocks() as demo:
     gr.Markdown("# 🍜🥢 EAT EAT Cafe & Bistro")
-    gr.HTML(css_fix_tabs)
-    gr.Markdown(
-        "Your task: One starter containing mushroom，One main course containing beef；One drink that is the cheapest on the menu."
+    gr.HTML(css)
+    gr.Markdown("Your task: One starter with mushroom, one beef main course, one cheapest drink.")
+
+    current = gr.State("Starters")
+    output = gr.HTML(render_section("Starters"))
+
+    with gr.Row(elem_id="nav-bar"):
+        gr.HTML('<div class="custom-nav">' +
+                ''.join([
+                    f'<button onclick="selectCategory(\'{cat}\')">{cat}</button>'
+                    for cat in menu.keys()
+                ]) +
+                '</div>')
+
+    # 用 JS 与 Python 通信
+    gr.HTML("""
+    <script>
+      function selectCategory(cat) {
+        document.querySelector('textarea[data-testid="component-markdown"]').value = cat;
+        document.querySelector('button[data-testid="component-button"]').click();
+      }
+    </script>
+    """)
+
+    hidden_input = gr.Textbox(visible=False)
+    trigger = gr.Button("Load Section", visible=False)
+
+    trigger.click(
+        lambda c: (c, render_section(c)),
+        inputs=[hidden_input],
+        outputs=[current, output]
     )
 
-    with gr.Tabs():
-        for section, items in menu.items():
-            with gr.TabItem(section):
-                for item in items:
-                    render_item(item)
+    output.render()
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()