Update app.py

app.py

@@ -133,93 +133,49 @@ menu = {
     ],
 }
 
-# 样式：隐藏footer + 优化导航栏
 css = """
 <style>
-  footer, .svelte-1ipelgc { display: none !important; }
+footer, .svelte-1ipelgc { display: none !important; }
 
-  .custom-nav {
-    display: flex;
-    overflow-x: auto;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-    margin-bottom: 10px;
-    padding: 5px 0;
-    gap: 6px;
-  }
-
-  .custom-nav button {
-    flex: 1 0 auto;
-    font-size: 14px;
-    padding: 6px 12px;
-    border-radius: 12px;
-    border: 1px solid #ccc;
-    background: #f5f5f5;
-    cursor: pointer;
+/* 调整tab样式防止折叠 */
+.tabs.svelte-1ipelgc {
+    flex-wrap: nowrap !important;
+    overflow-x: auto !important;
+    gap: 4px !important;
+}
+.tabitem.svelte-1ipelgc {
+    font-size: 14px !important;
+    padding: 6px 10px !important;
     white-space: nowrap;
-  }
-
-  .custom-nav::-webkit-scrollbar {
-    display: none;
-  }
+}
 </style>
 """
 
-# 渲染菜品
-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)
-    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]
+    gr.Markdown(
+        "Your task: One starter containing mushroom, One main course containing beef; One drink that is the cheapest on the menu."
     )
 
-    output.render()
+    with gr.Tabs():
+        for category, items in menu.items():
+            with gr.TabItem(category):
+                for item in items:
+                    with gr.Row():
+                        with gr.Column(scale=1):
+                            gr.HTML(
+                                f"<img src='{item.get('image', '')}' style='height:90px;width:120px;border-radius:8px;'/>"
+                            )
+                        with gr.Column(scale=4):
+                            name = item.get("name", "")
+                            desc = item.get("description", "")
+                            price = item.get("price", "")
+                            gr.Markdown(
+                                f"**{name}**\n\n{desc}\n\n<span style='color:green;font-weight:bold'>{price}</span>",
+                                show_label=False,
+                            )
 
 if __name__ == "__main__":
     demo.launch()