Side-by-side layout: controls 2/5, playable output 3/5

app.py

@@ -233,25 +233,22 @@ with gr.Blocks(title="Sprite Forge") as demo:
             """
         )
 
-        with gr.Row():
-            subject = gr.Textbox(
-                label="Character",
-                value=DEFAULT_SUBJECT,
-                placeholder="a scrappy alley cat in a bomber jacket",
-                scale=5,
-                container=True,
-            )
-            run = gr.Button("Generate", variant="primary", scale=1)
-
-        with gr.Accordion("Advanced", open=False):
-            with gr.Row():
-                uploaded = gr.Image(
-                    label="Or start from your own character",
-                    type="filepath",
-                    height=220,
-                    scale=1,
+        with gr.Row(equal_height=False):
+            # Controls left, the thing you actually came for on the right.
+            with gr.Column(scale=2):
+                subject = gr.Textbox(
+                    label="Character",
+                    value=DEFAULT_SUBJECT,
+                    placeholder="a scrappy alley cat in a bomber jacket",
+                    lines=2,
                 )
-                with gr.Column(scale=2):
+                run = gr.Button("Generate", variant="primary", size="lg")
+                gr.Examples(EXAMPLES, inputs=subject, label="Try a character")
+
+                with gr.Accordion("Advanced", open=False):
+                    uploaded = gr.Image(
+                        label="Or start from your own character", type="filepath", height=200
+                    )
                     selected_moves = gr.CheckboxGroup(
                         move_defs.LABELS, value=move_defs.DEFAULT_MOVES, label="Moves"
                     )
@@ -267,28 +264,29 @@ with gr.Blocks(title="Sprite Forge") as demo:
                             list(backends.CANVASES), value=backends.DEFAULT_CANVAS, label="Canvas"
                         )
                         seed = gr.Number(value=1234, label="Seed", precision=0)
-            with gr.Row():
-                duration = gr.Slider(
-                    2, 5, value=3, step=0.5, label="Clip seconds",
-                    info="H3 generates a 5s clip per move; 3s keeps each move punchy.",
-                )
-                steps = gr.Slider(4, 8, value=6, step=1, label="H3 steps")
-                playback_fps = gr.Slider(4, 24, value=12, step=1, label="Playback fps")
-                sprite_height = gr.Slider(64, 512, value=256, step=32, label="Max sprite height")
-            with gr.Row():
-                tolerance = gr.Slider(0.02, 0.30, value=0.10, step=0.01, label="Key tolerance")
-                softness = gr.Slider(0.01, 0.25, value=0.09, step=0.01, label="Edge softness")
-                despill = gr.Slider(0, 1, value=1.0, step=0.05, label="Despill")
-                despeckle = gr.Slider(0, 4, value=2, step=1, label="Despeckle")
-                shrink = gr.Slider(
-                    0, 0.5, value=0.2, step=0.05, label="Matte shrink",
-                    info="Chokes the matte inward. The clip is 4:2:0, so chroma bleeds ~1px past the real edge.",
-                )
-
-        demo_frame = gr.HTML(IDLE_PANEL, label="Playable")
-        status = gr.Markdown()
+                    with gr.Row():
+                        duration = gr.Slider(
+                            2, 5, value=3, step=0.5, label="Clip seconds",
+                            info="H3 does 5s per move; 3s keeps each move punchy.",
+                        )
+                        steps = gr.Slider(4, 8, value=6, step=1, label="H3 steps")
+                    with gr.Row():
+                        playback_fps = gr.Slider(4, 24, value=12, step=1, label="Playback fps")
+                        sprite_height = gr.Slider(64, 512, value=256, step=32, label="Max sprite height")
+                    with gr.Row():
+                        tolerance = gr.Slider(0.02, 0.30, value=0.10, step=0.01, label="Key tolerance")
+                        softness = gr.Slider(0.01, 0.25, value=0.09, step=0.01, label="Edge softness")
+                    with gr.Row():
+                        despill = gr.Slider(0, 1, value=1.0, step=0.05, label="Despill")
+                        despeckle = gr.Slider(0, 4, value=2, step=1, label="Despeckle")
+                        shrink = gr.Slider(
+                            0, 0.5, value=0.2, step=0.05, label="Matte shrink",
+                            info="Chokes the matte inward against 4:2:0 chroma bleed.",
+                        )
 
-        gr.Examples(EXAMPLES, inputs=subject, label="Try a character")
+            with gr.Column(scale=3):
+                demo_frame = gr.HTML(IDLE_PANEL, label="Playable")
+                status = gr.Markdown()
 
         with gr.Accordion("Sprite sheet, clips and downloads", open=False):
             with gr.Row():