Replace native sliders with custom vertical sliders (side-by-side per group)

app.py

@@ -356,14 +356,15 @@ CSS = """
 #col-container { max-width: 1200px; margin: 0 auto; }
 .dark .gradio-container { color: var(--body-text-color); }
 
-/* Compact, vertically-stacked grouped sections. Each feature/parameter group
-   (Head Shape, Left Eye, Mouth, Neck, Gaze, Translation, ...) is rendered as
-   its own bordered section with a header row (group label + per-group Reset)
-   and its sliders stacked vertically underneath. */
+/* Compact grouped sections. Each feature/parameter group (Head Shape, Left
+   Eye, Mouth, Neck, Gaze, Translation, ...) is rendered as its own bordered
+   section with a header row (group label + per-group Reset) and its sliders
+   laid out side-by-side underneath (each slider is now a custom VERTICAL
+   slider, so several fit in one row instead of being stacked). */
 .gnm-group {
   border: 1px solid var(--border-color-primary);
   border-radius: 8px;
-  padding: 8px 10px 4px 10px;
+  padding: 8px 10px 8px 10px;
   margin-bottom: 10px;
   background: var(--block-background-fill);
 }
@@ -379,10 +380,21 @@ CSS = """
   font-size: 0.95rem;
   margin: 0;
 }
-/* Tighten vertical spacing between stacked sliders inside a group. */
-.gnm-group .gnm-sliders .gr-slider,
-.gnm-group .gnm-sliders > div {
-  margin-bottom: 2px;
+/* Sliders row: wrap the vertical sliders side-by-side within the group. */
+.gnm-sliders {
+  flex-wrap: wrap !important;
+  gap: 4px !important;
+  align-items: flex-start !important;
+}
+/* Each vertical slider is a narrow HTML block; let it size to its content
+   rather than expanding to fill the row. */
+.gnm-vslider {
+  flex: 0 0 auto !important;
+  min-width: 0 !important;
+  width: auto !important;
+  border: none !important;
+  padding: 0 !important;
+  background: transparent !important;
 }
 /* Small, unobtrusive per-group reset button. */
 .gnm-reset-btn {
@@ -393,6 +405,75 @@ CSS = """
   font-size: 0.8rem !important;
   line-height: 1.4 !important;
 }
+
+/* --- Custom vertical slider look (matches native Gradio slider styling) --- */
+.vslider-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 62px;
+  padding: 4px 2px 2px 2px;
+  user-select: none;
+  -webkit-user-select: none;
+  box-sizing: border-box;
+}
+.vslider-label {
+  font-size: 0.72rem;
+  line-height: 1.05;
+  text-align: center;
+  color: var(--body-text-color);
+  min-height: 2.1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 4px;
+  overflow-wrap: anywhere;
+}
+.vslider-value {
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--body-text-color-subdued);
+  margin-bottom: 4px;
+}
+.vslider-track {
+  position: relative;
+  width: 6px;
+  height: 150px;
+  border-radius: 3px;
+  background: var(--slider-color, var(--neutral-200, #d1d5db));
+  cursor: pointer;
+  touch-action: none;
+}
+.dark .vslider-track {
+  background: var(--neutral-600, #4b5563);
+}
+/* Filled portion (from bottom up to the handle). */
+.vslider-fill {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: 3px;
+  background: var(--slider-color, var(--color-accent, #ff7c00));
+}
+.vslider-handle {
+  position: absolute;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-accent, #ff7c00);
+  border: 2px solid var(--background-fill-primary, #fff);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+  transform: translate(-50%, 50%);
+  cursor: grab;
+}
+.vslider-handle:active { cursor: grabbing; }
+.vslider-minmax {
+  font-size: 0.62rem;
+  color: var(--body-text-color-subdued);
+  margin-top: 3px;
+}
 """
 
 INTRO = """
@@ -402,11 +483,169 @@ INTRO = """
 """
 
 
-def _slider(label, minimum, maximum, value=0.0, step=None):
-    kw = dict(label=label, minimum=minimum, maximum=maximum, value=value)
-    if step is not None:
-        kw["step"] = step
-    return gr.Slider(**kw)
+# ---------------------------------------------------------------------------
+# Custom VERTICAL slider component.
+#
+# gr.Slider only renders horizontally, so we build a drop-in vertical slider as
+# an interactive custom HTML component (gr.HTML with html_template + js_on_load).
+# It behaves like a native slider — it has a label, honours min/max/step, has a
+# draggable handle and a live numeric value readout — but it is oriented
+# vertically so several sliders sit side-by-side within a group. Its component
+# value is the plain numeric slider value, so it plugs straight into the same
+# `.change()` / reset / Examples wiring the native sliders used.
+#
+# html_template is a *static* markup skeleton (it does NOT reference ${value},
+# so Gradio keeps the same DOM element across value updates); js_on_load wires
+# the drag interaction (writes `props.value` -> fires `.change()`) and a
+# `watch('value')` callback that repaints the handle/readout when the value is
+# set externally (reset buttons, Examples, initial load).
+# ---------------------------------------------------------------------------
+VSLIDER_TEMPLATE = (
+    '<div class="vslider-root">'
+    '<div class="vslider-label">__LABEL__</div>'
+    '<div class="vslider-value">0</div>'
+    '<div class="vslider-track">'
+    '<div class="vslider-fill"></div>'
+    '<div class="vslider-handle"></div>'
+    "</div>"
+    '<div class="vslider-minmax">__MIN__ … __MAX__</div>'
+    "</div>"
+)
+
+VSLIDER_JS_ON_LOAD = """
+(function () {
+  const MIN = __MIN__, MAX = __MAX__, STEP = __STEP__;
+  const root   = element.querySelector(".vslider-root");
+  const track  = element.querySelector(".vslider-track");
+  const fill   = element.querySelector(".vslider-fill");
+  const handle = element.querySelector(".vslider-handle");
+  const valEl  = element.querySelector(".vslider-value");
+  if (!root || !track || !handle) return;
+
+  function decimals() {
+    const s = String(STEP);
+    const i = s.indexOf(".");
+    return i < 0 ? 0 : (s.length - i - 1);
+  }
+  const DEC = decimals();
+
+  function clampSnap(v) {
+    if (STEP > 0) v = Math.round((v - MIN) / STEP) * STEP + MIN;
+    v = Math.min(MAX, Math.max(MIN, v));
+    // Kill floating-point fuzz from the snap.
+    return parseFloat(v.toFixed(Math.max(DEC, 6)));
+  }
+
+  function fmt(v) { return Number(v).toFixed(DEC); }
+
+  // Paint the handle / fill / readout for a value WITHOUT firing change.
+  function paint(v) {
+    v = Math.min(MAX, Math.max(MIN, Number(v)));
+    const frac = (MAX > MIN) ? (v - MIN) / (MAX - MIN) : 0;   // 0=bottom,1=top
+    const h = track.clientHeight;
+    handle.style.bottom = (frac * h) + "px";
+    fill.style.height = (frac * h) + "px";
+    if (valEl) valEl.textContent = fmt(clampSnap(v));
+  }
+
+  function currentValue() {
+    let v = props.value;
+    if (v === null || v === undefined || v === "") return MIN < 0 && MAX > 0 ? 0 : MIN;
+    v = parseFloat(v);
+    if (isNaN(v)) return MIN < 0 && MAX > 0 ? 0 : MIN;
+    return v;
+  }
+
+  // Map a pointer Y position to a value (top of track = MAX, bottom = MIN).
+  function valueFromEvent(clientY) {
+    const rect = track.getBoundingClientRect();
+    let frac = (rect.bottom - clientY) / rect.height;
+    frac = Math.min(1, Math.max(0, frac));
+    return clampSnap(MIN + frac * (MAX - MIN));
+  }
+
+  let dragging = false;
+
+  function setFromPointer(clientY) {
+    const nv = valueFromEvent(clientY);
+    paint(nv);
+    if (nv !== parseFloat(props.value)) {
+      props.value = nv;            // fires .change() -> recompute mesh
+    }
+  }
+
+  track.addEventListener("pointerdown", (e) => {
+    dragging = true;
+    try { track.setPointerCapture(e.pointerId); } catch (err) {}
+    setFromPointer(e.clientY);
+    e.preventDefault();
+  });
+  track.addEventListener("pointermove", (e) => {
+    if (!dragging) return;
+    setFromPointer(e.clientY);
+    e.preventDefault();
+  });
+  function endDrag(e) {
+    if (!dragging) return;
+    dragging = false;
+    try { track.releasePointerCapture(e.pointerId); } catch (err) {}
+  }
+  track.addEventListener("pointerup", endDrag);
+  track.addEventListener("pointercancel", endDrag);
+
+  // Repaint when the value is set from Python (reset / Examples / load).
+  watch("value", () => paint(currentValue()));
+
+  // Initial paint (handle geometry needs the track laid out first).
+  (function ready() {
+    if (!track.clientHeight) { setTimeout(ready, 30); return; }
+    paint(currentValue());
+  })();
+})();
+"""
+
+
+def _js_num(x):
+    """Format a Python number as a JS numeric literal."""
+    return repr(float(x))
+
+
+def _vslider(label, minimum, maximum, value=0.0, step=None):
+    """Create a custom vertical slider (drop-in replacement for gr.Slider).
+
+    Returns a gr.HTML component whose value is the numeric slider value. The
+    per-instance label / min / max / step are baked into its template and JS.
+    """
+    step_val = step if step is not None else 0.0
+    tmpl = (
+        VSLIDER_TEMPLATE
+        .replace("__LABEL__", str(label))
+        .replace("__MIN__", _fmt_bound(minimum))
+        .replace("__MAX__", _fmt_bound(maximum))
+    )
+    js = (
+        VSLIDER_JS_ON_LOAD
+        .replace("__MIN__", _js_num(minimum))
+        .replace("__MAX__", _js_num(maximum))
+        .replace("__STEP__", _js_num(step_val))
+    )
+    return gr.HTML(
+        value=float(value),
+        html_template=tmpl,
+        js_on_load=js,
+        elem_classes="gnm-vslider",
+        container=False,
+    )
+
+
+def _fmt_bound(x):
+    """Pretty-print a min/max bound for the template (drop trailing .0)."""
+    xf = float(x)
+    return str(int(xf)) if xf == int(xf) else str(xf)
+
+
+# Backwards-compatible alias: everything downstream builds sliders via _slider.
+_slider = _vslider
 
 
 # Collects (reset_button, [sliders]) pairs so each group's reset is wired to
@@ -418,7 +657,7 @@ def _group_section(title, build_sliders):
     """Render one feature/parameter group as a compact, bordered section.
 
     The section has a header (group label + a per-group ↺ Reset button) and its
-    sliders stacked vertically underneath. `build_sliders` is a zero-arg
+    (vertical) sliders laid out side-by-side underneath. `build_sliders` is a zero-arg
     callable that creates and returns the group's list of sliders (in order).
     The per-group reset button is registered in GROUP_RESETS and wired later to
     reset only this group's sliders back to their defaults.
@@ -430,7 +669,7 @@ def _group_section(title, build_sliders):
                 "↺ Reset", variant="secondary", size="sm",
                 elem_classes="gnm-reset-btn", scale=0, min_width=0,
             )
-        with gr.Column(elem_classes="gnm-sliders"):
+        with gr.Row(elem_classes="gnm-sliders"):
             group_sliders = build_sliders()
     GROUP_RESETS.append((reset, group_sliders))
     return group_sliders