Add per-group Reset buttons and grouped vertical slider layout

app.py

@@ -355,6 +355,44 @@ VIEWER_JS_ON_LOAD = (
 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. */
+.gnm-group {
+  border: 1px solid var(--border-color-primary);
+  border-radius: 8px;
+  padding: 8px 10px 4px 10px;
+  margin-bottom: 10px;
+  background: var(--block-background-fill);
+}
+.gnm-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  gap: 8px;
+}
+.gnm-group-title {
+  font-weight: 600;
+  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;
+}
+/* Small, unobtrusive per-group reset button. */
+.gnm-reset-btn {
+  flex: 0 0 auto !important;
+  min-width: 0 !important;
+  width: auto !important;
+  padding: 2px 10px !important;
+  font-size: 0.8rem !important;
+  line-height: 1.4 !important;
+}
 """
 
 INTRO = """
@@ -371,6 +409,33 @@ def _slider(label, minimum, maximum, value=0.0, step=None):
     return gr.Slider(**kw)
 
 
+# Collects (reset_button, [sliders]) pairs so each group's reset is wired to
+# only its own sliders after the full slider list exists.
+GROUP_RESETS = []
+
+
+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
+    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.
+    """
+    with gr.Column(elem_classes="gnm-group"):
+        with gr.Row(elem_classes="gnm-group-header"):
+            gr.HTML(f'<span class="gnm-group-title">{title}</span>')
+            reset = gr.Button(
+                "↺ Reset", variant="secondary", size="sm",
+                elem_classes="gnm-reset-btn", scale=0, min_width=0,
+            )
+        with gr.Column(elem_classes="gnm-sliders"):
+            group_sliders = build_sliders()
+    GROUP_RESETS.append((reset, group_sliders))
+    return group_sliders
+
+
 with gr.Blocks(title="GNM Head") as demo:
     with gr.Column(elem_id="col-container"):
         gr.Markdown(INTRO)
@@ -389,14 +454,21 @@ with gr.Blocks(title="GNM Head") as demo:
                             "First 10 components of the linear **identity** "
                             "basis (head shape). Typical range −3 … +3."
                         )
-                        with gr.Row():
+
+                        def _build_head_shape():
+                            sliders = []
                             for k in range(NUM_IDENTITY):
-                                identity_sliders.append(
+                                sliders.append(
                                     _slider(
                                         f"Head shape {k + 1}",
                                         -3.0, 3.0, 0.0, 0.05,
                                     )
                                 )
+                            return sliders
+
+                        identity_sliders = _group_section(
+                            "Head Shape", _build_head_shape
+                        )
 
                     with gr.Tab("Expression"):
                         gr.Markdown(
@@ -404,9 +476,9 @@ with gr.Blocks(title="GNM Head") as demo:
                             "per region. Typical range −3 … +3."
                         )
                         for group_name, group_idx in EXPRESSION_GROUPS.items():
-                            with gr.Row():
-                                gr.Markdown(f"**{group_name}**")
-                            with gr.Row():
+                            def _build_expr(group_name=group_name,
+                                            group_idx=group_idx):
+                                sliders = []
                                 for j in range(len(group_idx)):
                                     # Single-component groups (e.g. pupil
                                     # dilation) don't need a component number.
@@ -415,11 +487,14 @@ with gr.Blocks(title="GNM Head") as demo:
                                         if len(group_idx) == 1
                                         else f"{group_name} {j + 1}"
                                     )
-                                    expression_sliders.append(
-                                        _slider(
-                                            label, -3.0, 3.0, 0.0, 0.05,
-                                        )
+                                    sliders.append(
+                                        _slider(label, -3.0, 3.0, 0.0, 0.05)
                                     )
+                                return sliders
+
+                            expression_sliders += _group_section(
+                                group_name, _build_expr
+                            )
 
                     with gr.Tab("Pose"):
                         gr.Markdown(
@@ -428,29 +503,36 @@ with gr.Blocks(title="GNM Head") as demo:
                             "vergence control)."
                         )
                         for joint, limits in POSE_LIMITS.items():
-                            with gr.Row():
-                                gr.Markdown(f"**{joint.capitalize()}**")
-                            with gr.Row():
+                            def _build_pose(limits=limits):
+                                sliders = []
                                 for name, limit in limits.items():
-                                    pose_sliders.append(
-                                        _slider(
-                                            name, -limit, limit, 0, 1
-                                        )
+                                    sliders.append(
+                                        _slider(name, -limit, limit, 0, 1)
                                     )
+                                return sliders
+
+                            pose_sliders += _group_section(
+                                joint.capitalize(), _build_pose
+                            )
 
                     with gr.Tab("Translation"):
                         gr.Markdown("Global **translation** of the whole head (meters).")
-                        with gr.Row():
+
+                        def _build_translation():
+                            sliders = []
                             for d in [
                                 "X (left/right)",
                                 "Y (up/down)",
                                 "Z (forward/back)",
                             ]:
-                                translation_sliders.append(
+                                sliders.append(
                                     _slider(d, -0.2, 0.2, 0.0, 0.01)
                                 )
+                            return sliders
 
-                reset_btn = gr.Button("↺ Reset all sliders", variant="secondary")
+                        translation_sliders = _group_section(
+                            "Translation", _build_translation
+                        )
 
             # --- Viewer ---------------------------------------------------
             # The custom Three.js viewer IS the output component. Its value is
@@ -486,13 +568,27 @@ with gr.Blocks(title="GNM Head") as demo:
                 show_progress="hidden",
             )
 
-        def _reset():
-            return [0.0] * len(all_sliders)
-
-        reset_btn.click(_reset, inputs=None, outputs=all_sliders).then(
-            fn=positions_json, inputs=all_sliders, outputs=viewer,
-            show_progress="hidden",
-        )
+        # Per-group Reset: each group has its own ↺ Reset button that resets
+        # ONLY that group's sliders back to their defaults, then recomputes the
+        # mesh from the full (partially-reset) slider vector. There is no
+        # single global reset.
+        def _make_group_reset(sliders):
+            defaults = [s.value for s in sliders]
+
+            def _reset_group():
+                return defaults if len(defaults) != 1 else defaults[0]
+
+            return _reset_group
+
+        for reset_btn, group_sliders in GROUP_RESETS:
+            reset_btn.click(
+                _make_group_reset(group_sliders),
+                inputs=None,
+                outputs=group_sliders,
+            ).then(
+                fn=positions_json, inputs=all_sliders, outputs=viewer,
+                show_progress="hidden",
+            )
 
         # Presets: full rows (every slider gets a concrete value, no None).
         # Offsets into the flat slider vector:
@@ -514,18 +610,17 @@ with gr.Blocks(title="GNM Head") as demo:
 
         # Expression slider slots (flat order): left eye 0-2, right eye 3-5,
         # mouth 6-12, tongue 13-16 (13=tongue_mean, 14-16=tongue_000..002),
-        # pupil dilation 17. Expression sliders are clamped to [-3, 3].
-        # Measured directions on this model:
+        # pupil dilation 17. Measured directions on this model:
         #   mouth slot 6 negative  -> jaw drops / mouth opens
         #   tongue slot 14 positive + tongue_mean slot 13 negative -> tongue out
         #   eye slot 0 (left) / slot 3 (right): positive -> eye wide, negative -> closed
         presets = [
             # 1) Open mouth with the tongue sticking out.
-            _preset(expression={6: -3.0, 13: -3.0, 14: 3.0}),
+            _preset(expression={6: -5.0, 13: -3.0, 14: 3.0}),
             # 2) Surprised: eyes wide open + mouth dropped open.
-            _preset(expression={0: 3.0, 3: 3.0, 6: -3.0}),
+            _preset(expression={0: 4.0, 3: 4.0, 6: -3.0}),
             # 3) Wink: left eye closed, right eye left neutral.
-            _preset(expression={0: -3.0}),
+            _preset(expression={0: -5.0}),
         ]
 
         gr.Examples(