Add Showcase tab: one-click real-world argument analysis gallery

app.py

@@ -55,6 +55,64 @@ CHIPS = [
     ),
 ]
 
+SHOWCASE_TEMPLATE = (
+    "Analyze this argument: extract the premises and the conclusion, translate them "
+    "into first-order logic, state whether the argument is valid, and name any fallacy.\n\n"
+    'Argument: "{argument}"'
+)
+
+SHOWCASE = [
+    {
+        "kicker": "Viral tweet",
+        "quote": "The streets are wet this morning, and rain always makes the streets wet. So it obviously rained last night.",
+        "hint": "Can wet streets prove rain?",
+    },
+    {
+        "kicker": "School board speech",
+        "quote": "If we let students retake this one exam, soon they will demand to retake every exam, and before long no grade at this school will mean anything.",
+        "hint": "Does one retake doom every grade?",
+    },
+    {
+        "kicker": "Supplement ad",
+        "quote": "Our formula is 100% natural, and nature knows best. That means it is completely safe for your body.",
+        "hint": "Does natural imply safe?",
+    },
+    {
+        "kicker": "Campaign rally",
+        "quote": "Either you support this bill or you don't care about public safety. You oppose the bill, so you don't care about public safety.",
+        "hint": "Are those really the only options?",
+    },
+    {
+        "kicker": "Toothpaste commercial",
+        "quote": "4 out of 5 dentists we surveyed recommend SparkleDent, and experts know best. You should switch to SparkleDent today.",
+        "hint": "What is the survey hiding?",
+    },
+    {
+        "kicker": "HR policy memo",
+        "quote": "Every employee who completes the security training receives a certificate. Sam completed the security training. Therefore Sam receives a certificate.",
+        "hint": "One of these six actually holds up.",
+    },
+]
+
+SHOWCASE_INTRO = """
+<div class="twil-showcase-intro">
+  <h2>Can TwIL spot the flaw?</h2>
+  <p>Six arguments from the wild. One click and TwIL extracts the premises, translates
+  them to first-order logic, and rules on validity. Five are broken — one holds up.</p>
+</div>
+"""
+
+
+def _card_html(case: dict) -> str:
+    return (
+        '<div class="twil-card-body">'
+        f'<div class="twil-card-kicker">{case["kicker"]}</div>'
+        f'<div class="twil-card-quote">&ldquo;{case["quote"]}&rdquo;</div>'
+        f'<div class="twil-card-hint">{case["hint"]}</div>'
+        "</div>"
+    )
+
+
 HEADER = """
 <div class="twil-header">
   <img class="twil-mark" src="/gradio_api/file=brand/AppiCon.svg" alt="webAI" />
@@ -387,6 +445,148 @@ footer, .footer, .built-with, .settings, .settings-bar, .show-api,
   color: var(--weba-muted);
   flex-shrink: 0;
 }
+
+/* Tabs shell: keep the chat layout filling the viewport */
+#twil-tabs {
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+#twil-tabs > .tab-wrapper,
+#twil-tabs .tab-container,
+#twil-tabs .tab-nav {
+  flex: 0 0 auto !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  justify-content: center !important;
+}
+#twil-tabs .tab-container button,
+#twil-tabs .tab-nav button {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 2px solid transparent !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  color: var(--weba-muted) !important;
+  font-size: 13px !important;
+  padding: 6px 14px !important;
+}
+#twil-tabs .tab-container button.selected,
+#twil-tabs .tab-nav button.selected {
+  color: var(--weba-fg) !important;
+  border-bottom-color: var(--weba-fg) !important;
+}
+#twil-tabs .tabitem {
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+#tab-chat > .gap, #tab-chat > .column,
+#tab-chat, #tab-chat .column:has(> div > #twil-chat) {
+  height: 100% !important;
+  min-height: 0 !important;
+}
+#tab-chat > .gap, #tab-chat > .column {
+  display: flex !important;
+  flex-direction: column !important;
+}
+#tab-chat .block:has(#twil-chat),
+#tab-chat div:has(> #twil-chat) {
+  flex: 1 1 auto !important;
+  min-height: 0 !important;
+  height: auto !important;
+}
+#tab-showcase {
+  overflow-y: auto !important;
+}
+
+/* Showcase cards */
+.twil-showcase-intro {
+  max-width: 768px;
+  margin: 8px auto 4px;
+  text-align: center;
+}
+.twil-showcase-intro h2 {
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  margin: 0 0 6px;
+  color: var(--weba-fg);
+}
+.twil-showcase-intro p {
+  margin: 0 0 8px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--weba-muted);
+}
+.twil-card-row {
+  max-width: 900px !important;
+  width: 100% !important;
+  margin: 6px auto !important;
+  display: flex !important;
+  gap: 12px !important;
+  align-items: stretch !important;
+  background: transparent !important;
+}
+.twil-card {
+  background: var(--weba-composer) !important;
+  border: 1px solid var(--weba-border) !important;
+  border-radius: 16px !important;
+  box-shadow: none !important;
+  padding: 16px !important;
+  gap: 10px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: space-between !important;
+  min-height: 170px !important;
+}
+.twil-card > * { background: transparent !important; }
+.twil-card-kicker {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--weba-muted);
+  margin-bottom: 8px;
+}
+.twil-card-quote {
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--weba-fg);
+  margin-bottom: 8px;
+}
+.twil-card-hint {
+  font-size: 12px;
+  color: var(--weba-muted);
+  font-style: italic;
+}
+.twil-card-btn {
+  height: 32px !important;
+  border-radius: 999px !important;
+  border: 1px solid var(--weba-border) !important;
+  background: var(--weba-secondary) !important;
+  color: var(--weba-fg) !important;
+  box-shadow: none !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  align-self: flex-start !important;
+  padding: 0 16px !important;
+  width: auto !important;
+  min-width: 0 !important;
+  flex: 0 0 auto !important;
+}
+.twil-card-btn:hover {
+  background: var(--weba-fg) !important;
+  color: var(--weba-canvas) !important;
+}
 """
 
 THEME = gr.themes.Base(
@@ -614,44 +814,57 @@ def generate_reply(history, max_new_tokens, temperature, top_p, enable_thinking)
 with gr.Blocks(fill_height=True, fill_width=True, elem_id="app-root") as demo:
     with gr.Column(elem_id="app-shell"):
         gr.HTML(HEADER)
-        chatbot = gr.Chatbot(
-            value=[],
-            placeholder=PLACEHOLDER,
-            label="",
-            show_label=False,
-            layout="bubble",
-            avatar_images=(None, str(AVATAR) if AVATAR.exists() else None),
-            allow_tags=["think"],
-            reasoning_tags=[(THINK_OPEN, THINK_CLOSE)],
-            buttons=None,
-            editable=False,
-            line_breaks=False,
-            elem_id="twil-chat",
-            scale=1,
-            height="100%",
-        )
-        with gr.Row(elem_id="chips-row") as chips_row:
-            chip_btns = [
-                gr.Button(label, variant="secondary", size="sm", elem_classes=["twil-chip"])
-                for label, _ in CHIPS
-            ]
-        with gr.Row(elem_id="composer-row"):
-            prompt = gr.Textbox(
-                placeholder="Ask webAI anything…",
-                show_label=False,
-                container=False,
-                lines=2,
-                max_lines=2,
-                elem_id="twil-input",
-                scale=8,
-            )
-            send = gr.Button("↑", elem_id="send-btn", scale=0)
-        with gr.Accordion("Parameters", open=False, elem_id="params-box"):
-            max_new_tokens = gr.Slider(256, 4096, value=2048, step=256, label="Max new tokens")
-            temperature = gr.Slider(0, 1.5, value=0, step=0.05, label="Temperature (0 = greedy)")
-            top_p = gr.Slider(0.1, 1.0, value=0.95, step=0.05, label="Top-p")
-            enable_thinking = gr.Checkbox(value=True, label="Enable thinking")
-        gr.HTML('<p class="twil-disclaimer">This is AI and it can make mistakes</p>')
+        with gr.Tabs(elem_id="twil-tabs") as tabs:
+            with gr.Tab("Chat", id="chat", elem_id="tab-chat"):
+                chatbot = gr.Chatbot(
+                    value=[],
+                    placeholder=PLACEHOLDER,
+                    label="",
+                    show_label=False,
+                    layout="bubble",
+                    avatar_images=(None, str(AVATAR) if AVATAR.exists() else None),
+                    allow_tags=["think"],
+                    reasoning_tags=[(THINK_OPEN, THINK_CLOSE)],
+                    buttons=None,
+                    editable=False,
+                    line_breaks=False,
+                    elem_id="twil-chat",
+                    scale=1,
+                    height="100%",
+                )
+                with gr.Row(elem_id="chips-row") as chips_row:
+                    chip_btns = [
+                        gr.Button(label, variant="secondary", size="sm", elem_classes=["twil-chip"])
+                        for label, _ in CHIPS
+                    ]
+                with gr.Row(elem_id="composer-row"):
+                    prompt = gr.Textbox(
+                        placeholder="Ask webAI anything…",
+                        show_label=False,
+                        container=False,
+                        lines=2,
+                        max_lines=2,
+                        elem_id="twil-input",
+                        scale=8,
+                    )
+                    send = gr.Button("↑", elem_id="send-btn", scale=0)
+                with gr.Accordion("Parameters", open=False, elem_id="params-box"):
+                    max_new_tokens = gr.Slider(256, 4096, value=2048, step=256, label="Max new tokens")
+                    temperature = gr.Slider(0, 1.5, value=0, step=0.05, label="Temperature (0 = greedy)")
+                    top_p = gr.Slider(0.1, 1.0, value=0.95, step=0.05, label="Top-p")
+                    enable_thinking = gr.Checkbox(value=True, label="Enable thinking")
+                gr.HTML('<p class="twil-disclaimer">This is AI and it can make mistakes</p>')
+            with gr.Tab("Showcase", id="showcase", elem_id="tab-showcase"):
+                gr.HTML(SHOWCASE_INTRO)
+                card_btns = []
+                for start in range(0, len(SHOWCASE), 3):
+                    with gr.Row(elem_classes=["twil-card-row"]):
+                        for case in SHOWCASE[start : start + 3]:
+                            with gr.Column(elem_classes=["twil-card"], scale=1, min_width=220):
+                                gr.HTML(_card_html(case))
+                                card_btns.append(
+                                    gr.Button("Analyze it", size="sm", elem_classes=["twil-card-btn"])
+                                )
 
     send.click(
         queue_message,
@@ -680,6 +893,24 @@ with gr.Blocks(fill_height=True, fill_width=True, elem_id="app-root") as demo:
     for btn, (_, template) in zip(chip_btns, CHIPS):
         btn.click(lambda t=template: t, outputs=prompt)
 
+    for btn, case in zip(card_btns, SHOWCASE):
+        case_prompt = SHOWCASE_TEMPLATE.format(argument=case["quote"])
+        btn.click(
+            lambda p=case_prompt: (p, gr.Tabs(selected="chat")),
+            outputs=[prompt, tabs],
+        ).then(
+            queue_message,
+            [prompt, chatbot],
+            [prompt, chatbot, chips_row],
+            show_progress="hidden",
+        ).then(
+            generate_reply,
+            [chatbot, max_new_tokens, temperature, top_p, enable_thinking],
+            chatbot,
+            concurrency_limit=1,
+            show_progress="minimal",
+        )
+
 if __name__ == "__main__":
     demo.launch(
         theme=THEME,