Support URL parameters

app.py

@@ -170,8 +170,68 @@ def gradio_visualize(tiler_mn_str, tv_layout_str, dpi, max_rows, max_cols):
         return fig
 
 
-# Create Gradio interface
-with gr.Blocks(title="CuTe TV Layout Visualizer") as demo:
+# Create Gradio interface with URL parameter support
+with gr.Blocks(title="CuTe TV Layout Visualizer", js="""
+function() {
+    const params = new URLSearchParams(window.location.search);
+
+    // Get all parameter elements
+    const inputs = {
+        'tiler_mn': params.get('tiler_mn'),
+        'tv_layout': params.get('tv_layout'),
+        'dpi': params.get('dpi'),
+        'max_rows': params.get('max_rows'),
+        'max_cols': params.get('max_cols')
+    };
+
+    // Update input fields if parameters exist
+    setTimeout(() => {
+        if (inputs.tiler_mn) {
+            const elem = document.querySelector('#tiler_mn textarea, #tiler_mn input');
+            if (elem) {
+                elem.value = decodeURIComponent(inputs.tiler_mn);
+                elem.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        if (inputs.tv_layout) {
+            const elem = document.querySelector('#tv_layout textarea, #tv_layout input');
+            if (elem) {
+                elem.value = decodeURIComponent(inputs.tv_layout);
+                elem.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        if (inputs.dpi) {
+            const elem = document.querySelector('#dpi input');
+            if (elem) {
+                elem.value = inputs.dpi;
+                elem.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        if (inputs.max_rows) {
+            const elem = document.querySelector('#max_rows input');
+            if (elem) {
+                elem.value = inputs.max_rows;
+                elem.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+        if (inputs.max_cols) {
+            const elem = document.querySelector('#max_cols input');
+            if (elem) {
+                elem.value = inputs.max_cols;
+                elem.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+
+        // Auto-trigger visualization if any params exist
+        if (Object.values(inputs).some(v => v !== null)) {
+            setTimeout(() => {
+                const btn = document.querySelector('button.primary');
+                if (btn) btn.click();
+            }, 500);
+        }
+    }, 1000);
+}
+""") as demo:
     gr.Markdown("# CuTe TV Layout Visualizer")
     gr.Markdown("Visualize thread/value (T/V) layouts for CuTe tensor operations.")
 
@@ -181,19 +241,21 @@ with gr.Blocks(title="CuTe TV Layout Visualizer") as demo:
             tiler_mn = gr.Textbox(
                 label="Tiler Dimensions (M, N)",
                 value="(8, 8)",
-                placeholder="(8, 8)"
+                placeholder="(8, 8)",
+                elem_id="tiler_mn"
             )
             tv_layout = gr.Textbox(
                 label="TV Layout",
                 value="((2, 2, 2), (2, 2, 2)):((1, 16, 4), (8, 2, 32))",
-                lines=2
+                lines=2,
+                elem_id="tv_layout"
             )
 
-            dpi = gr.Number(label="DPI", value=200, precision=0)
-            max_rows = gr.Number(label="Max Rows (leave empty for no limit)", value=None, precision=0)
-            max_cols = gr.Number(label="Max Cols (leave empty for no limit)", value=None, precision=0)
+            dpi = gr.Number(label="DPI", value=200, precision=0, elem_id="dpi")
+            max_rows = gr.Number(label="Max Rows (leave empty for no limit)", value=None, precision=0, elem_id="max_rows")
+            max_cols = gr.Number(label="Max Cols (leave empty for no limit)", value=None, precision=0, elem_id="max_cols")
 
-            visualize_btn = gr.Button("Visualize", variant="primary")
+            visualize_btn = gr.Button("Visualize", variant="primary", elem_classes=["primary"])
 
         with gr.Column():
             output_plot = gr.Plot(label="TV Layout Visualization")