improve interface

app.py

@@ -22,6 +22,7 @@ MODELS = [
     "laion/CLIP-ViT-B-32-laion2B-s34B-b79K",
 ]
 
+
 def _fig_to_pil(fig) -> Image.Image:
     buf = io.BytesIO()
     fig.savefig(buf, format="png", bbox_inches="tight", dpi=160)
@@ -48,36 +49,61 @@ def _run(model_id: str, image: Optional[Image.Image], use_sample: bool, add_grid
     prompt_preview = viz.default_message(full_output=False)
     return imgs, prompt_preview
 
+def _resolve_and_run(model_pick, custom_model, image, use_sample, add_grid):
+    model_id = (custom_model or "").strip() or (model_pick or "").strip()
+    if not model_id:
+        raise gr.Error("Pick a model or enter one.")
+    return _run(model_id, image, use_sample, add_grid)
 
-with gr.Blocks(title="Transformers Processor Visualizer") as demo:
-    gr.Markdown("Switch models and see what the processor feeds them (uses the existing `ImageVisualizer`).")
-
-    with gr.Row():
-        model_id = gr.Dropdown(
-            label="Model repo_id",
-            choices=MODELS,
-            value=MODELS[0],
-            allow_custom_value=True,
-            filterable=True,
-        )
-        add_grid = gr.Checkbox(label="Show patch grid", value=True)
-        use_sample = gr.Checkbox(label="Use HF logo sample", value=True)
-
-    image = gr.Image(label="Upload custom image", type="pil", height=140, width=140, sources=["upload"])
+def _on_image_change(_):
+    return False  # uncheck "use sample" when a custom image is set
 
-    def _on_image_change(img):
-        return False  # uncheck the sample toggle when a custom image is set
+theme = gr.themes.Soft(primary_hue="orange", neutral_hue="gray")
 
-    image.change(_on_image_change, inputs=image, outputs=use_sample)
-    run_btn = gr.Button("Render")
+with gr.Blocks(title="Transformers Processor Visualizer", theme=theme) as demo:
+    gr.Markdown("### Visualize what a processor feeds a vision–text model (uses the existing `ImageVisualizer`).")
 
-    gallery = gr.Gallery(label="Processor output")
-    prompt = gr.Textbox(label="Compact chat template preview")
-    # Render on demand
-    run_btn.click(_run, inputs=[model_id, image, use_sample, add_grid], outputs=[gallery, prompt])
-
-    # Also render once on load with defaults so there is an example before clicking
-    demo.load(_run, inputs=[model_id, image, use_sample, add_grid], outputs=[gallery, prompt])
+    with gr.Row():
+        # LEFT: clickable models + custom field
+        with gr.Column(scale=1, min_width=260):
+            model_pick = gr.Radio(
+                label="Models",
+                choices=MODELS,
+                value=MODELS[0],
+                interactive=True,
+            )
+            custom_model = gr.Textbox(
+                label="Or type a model id",
+                placeholder="owner/repo",
+                lines=1,
+            )
+        # RIGHT: controls + outputs
+        with gr.Column(scale=3):
+            with gr.Row():
+                add_grid = gr.Checkbox(label="Show patch grid", value=True)
+                use_sample = gr.Checkbox(label="Use HF logo sample", value=True)
+            image = gr.Image(
+                label="Upload custom image",
+                type="pil",
+                height=140,
+                sources=["upload"],
+            )
+            gr.Markdown("### Render")
+            gallery = gr.Gallery(label="Processor output", columns=[1], height=900)
+            prompt = gr.Textbox(label="Compact chat template preview", lines=2)
+
+    # Reactive updates: change model, toggle options, upload -> update immediately
+    model_pick.change(_resolve_and_run, inputs=[model_pick, custom_model, image, use_sample, add_grid], outputs=[gallery, prompt])
+    custom_model.submit(_resolve_and_run, inputs=[model_pick, custom_model, image, use_sample, add_grid], outputs=[gallery, prompt])
+    add_grid.change(_resolve_and_run, inputs=[model_pick, custom_model, image, use_sample, add_grid], outputs=[gallery, prompt])
+    use_sample.change(_resolve_and_run, inputs=[model_pick, custom_model, image, use_sample, add_grid], outputs=[gallery, prompt])
+    image.change(_on_image_change, inputs=image, outputs=use_sample).then(
+        _resolve_and_run, inputs=[model_pick, custom_model, image, use_sample, add_grid], outputs=[gallery, prompt]
+    )
+
+    # Initial render so there is output before any interaction
+    demo.load(_resolve_and_run, inputs=[model_pick, custom_model, image, use_sample, add_grid], outputs=[gallery, prompt])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()
+