Upload folder using huggingface_hub

app.py

@@ -51,6 +51,7 @@ import json
 import logging
 import math
 import re
+import textwrap
 from dataclasses import dataclass
 from pathlib import Path
 from typing import Any
@@ -618,17 +619,20 @@ def render_card(method: str, spec: BenchmarkSpec) -> str:
     else:
         bench_html = f'<div class="bench muted">No reviews yet (no {esc(spec.label)} benchmark results).</div>'
 
-    # The description is clamped to three lines by CSS. Texts long enough to likely be clamped get a button that
-    # shows the full text in an overlay, using the native HTML popover API -- a real centered overlay with backdrop
-    # and click-outside dismissal, without any JS or Gradio event machinery.
+    # Overlong descriptions are truncated and get a "Show more" toggle that expands them in place, like overlong
+    # YouTube comments: a hidden checkbox placed before the paragraph selects which of the two text spans is shown,
+    # and the toggle's text, through CSS sibling selectors (see the .more-toggle rules) -- no JS or Gradio event
+    # machinery needed. Truncating by character count server-side (instead of a CSS line clamp) keeps the toggle
+    # and the truncation in sync: the toggle exists if and only if there is hidden text to reveal.
     description = info["description"]
+    desc_html = esc(description)
+    toggle_html = ""
     more_html = ""
-    if len(description) > 160:
-        more_html = (
-            f'<button class="more-link" popovertarget="desc-{esc(method)}">Show full description</button>'
-            f'<div popover id="desc-{esc(method)}" class="desc-popover">'
-            f"<h4>{esc(method)}</h4><p>{esc(description)}</p></div>"
-        )
+    if len(description) > 200:
+        short = textwrap.shorten(description, width=160, placeholder=" …")
+        desc_html = f'<span class="desc-short">{esc(short)}</span><span class="desc-full">{esc(description)}</span>'
+        toggle_html = f'<input type="checkbox" id="more-{esc(method)}" class="more-toggle">'
+        more_html = f'<label for="more-{esc(method)}" class="more-link"></label>'
 
     paper_url = info.get("paper_url")  # .get: tolerate a data.json built before paper links were added
     paper_html = (
@@ -640,7 +644,8 @@ def render_card(method: str, spec: BenchmarkSpec) -> str:
     return f"""
     <article class="card">
       {banner_html(method)}
-      <p class="description">{esc(description)}</p>
+      {toggle_html}
+      <p class="description">{desc_html}</p>
       {more_html}
       <div class="badges"><span class="chip category">{esc(CATEGORY_LABELS.get(category, category))}</span>{badges}</div>
       <div class="quant-row">{quant_html}</div>
@@ -907,8 +912,8 @@ def build_comparison(methods: list[str]) -> str:
 
 
 def build_receipt(methods: list[str]) -> str:
-    """The order confirmation opened by the pay button: a floating window (the same native popover mechanism as the
-    full-description overlays on the cards) showing a shop-style receipt with the crossed-out fantasy prices."""
+    """The order confirmation opened by the pay button: a floating window (a native HTML popover, rendered in the
+    browser's top layer) showing a shop-style receipt with the crossed-out fantasy prices."""
     if methods:
         rows = "".join(
             f"<tr><td>{esc(method)}</td><td><s>${fantasy_price(method):.2f}</s></td>"
@@ -975,8 +980,7 @@ CSS = """
 .explorer .monogram { width: 2.2rem; height: 2.2rem; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center;
   justify-content: center; color: #fff; font-weight: 800; font-size: 0.95rem;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
-.explorer .description { margin: 0; color: var(--x-muted); font-size: 0.86rem; display: -webkit-box;
-  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.explorer .description { margin: 0; color: var(--x-muted); font-size: 0.86rem; }
 .explorer .badges, .explorer .quant-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
 .explorer .badge { font-size: 0.74rem; padding: 0.12rem 0.45rem; border-radius: 999px; white-space: nowrap; }
 .explorer .badge.yes { color: var(--x-yes); background: var(--x-yes-bg); }
@@ -998,20 +1002,23 @@ CSS = """
 .explorer .cta.secondary { background: var(--x-surface-2); color: var(--x-text);
   border: 1px solid var(--x-border); }
 
-/* "show full description" button and its overlay (native HTML popover, rendered in the browser's top layer) */
-.explorer .more-link { background: none; border: none; color: var(--x-accent); cursor: pointer; padding: 0;
-  font-size: 0.8rem; text-align: left; }
-.explorer .desc-popover { max-width: min(540px, 90vw); padding: 1.2rem 1.4rem; border: 1px solid var(--x-border);
-  border-radius: 12px; background: var(--x-surface); color: var(--x-text); }
-.explorer .desc-popover h4 { margin: 0 0 0.6rem; font-size: 1.3rem; }
-.explorer .desc-popover p { margin: 0; line-height: 1.55; }
-.explorer .desc-popover::backdrop { background: rgba(0, 0, 0, 0.45); }
-
-/* The pay button's order receipt -- like the description overlay, a native popover in the browser's top layer.
-   Both popovers are re-centered explicitly: the browser stylesheet would center them via `margin: auto`, but
-   Gradio's styles interfere with that, leaving the popover stuck at the viewport edge. Centering via
-   top/left/transform (with !important) depends on fewer properties and survives the interference. */
-.explorer .desc-popover, .explorer .receipt-popover { position: fixed !important; top: 50% !important;
+/* The "Show more" toggle of overlong descriptions: a hidden checkbox before the description paragraph selects
+   which of the two text spans (truncated or full) is shown, and the label's text flips between "Show more" and
+   "Show less", like overlong YouTube comments. The checkbox is hidden via our own CSS instead of the `hidden`
+   attribute, which does not survive Gradio's HTML handling. */
+.explorer .more-toggle { display: none !important; }
+.explorer .more-link { color: var(--x-accent); cursor: pointer; font-size: 0.8rem; }
+.explorer .more-link::after { content: "Show more"; }
+.explorer .more-toggle:checked ~ .more-link::after { content: "Show less"; }
+.explorer .desc-full { display: none; }
+.explorer .more-toggle:checked ~ .description .desc-short { display: none; }
+.explorer .more-toggle:checked ~ .description .desc-full { display: inline; }
+
+/* The pay button's order receipt, a native popover in the browser's top layer. It is re-centered explicitly: the
+   browser stylesheet would center it via `margin: auto`, but Gradio's styles interfere with that, leaving the
+   popover stuck at the viewport edge. Centering via top/left/transform (with !important) depends on fewer
+   properties and survives the interference. */
+.explorer .receipt-popover { position: fixed !important; top: 50% !important;
   left: 50% !important; bottom: auto !important; right: auto !important; margin: 0 !important;
   transform: translate(-50%, -50%); max-height: 85vh; overflow-y: auto; }
 .explorer .receipt-popover { min-width: min(480px, 92vw); padding: 1.6rem 2rem; border: 1px solid var(--x-border);