Fix Gradio 6 JSON and CSS handling

app.py

@@ -63,9 +63,7 @@ def inference(pipeline_config, inputs, inference_kwargs=None):
     except Exception as e:
         return json.dumps({"error": f"Inference failed: {e}"})
 
-with gr.Blocks(
-    title="Dynamic Transformers Pipeline API",
-    css="""
+APP_CSS = """
     /* Force body/Blocks to allow scrolling */
     .gradio-container {
         max-height: none !important;
@@ -80,7 +78,8 @@ with gr.Blocks(
         max-height: 300px;
     }
     """
-) as demo:
+
+with gr.Blocks(title="Dynamic Transformers Pipeline API") as demo:
     gr.Markdown("# 🚀 Dynamic Transformers Pipeline API\nZero-GPU. Pass any `transformers.pipeline` config via JSON.")
 
     with gr.Row():
@@ -91,7 +90,7 @@ with gr.Blocks(
             )
             inp = gr.JSON(
                 label="inputs",
-                value="The future of AI is",
+                value='"The future of AI is"',
             )
             ikw = gr.JSON(
                 label="inference_kwargs",
@@ -104,6 +103,52 @@ with gr.Blocks(
 
     btn.click(inference, [pcfg, inp, ikw], out)
 
+    # Computed examples (not cached, run live on click)
+    gr.Markdown("## 📝 Examples (click to compute live)")
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("**Text Generation**")
+            ex1_btn = gr.Button("Run: SmolLM2 text-gen", size="sm")
+            ex1_out = gr.JSON(label="result")
+
+        with gr.Column():
+            gr.Markdown("**Zero-Shot Classification**")
+            ex2_btn = gr.Button("Run: zero-shot", size="sm")
+            ex2_out = gr.JSON(label="result")
+
+        with gr.Column():
+            gr.Markdown("**Token Classification (Privacy Filter)**")
+            ex3_btn = gr.Button("Run: privacy-filter", size="sm")
+            ex3_out = gr.JSON(label="result")
+
+    ex1_btn.click(
+        fn=lambda: inference(
+            {"task": "text-generation", "model": "HuggingFaceTB/SmolLM2-135M-Instruct"},
+            "The future of AI is",
+            {"max_new_tokens": 50},
+        ),
+        inputs=None,
+        outputs=ex1_out,
+    )
+    ex2_btn.click(
+        fn=lambda: inference(
+            {"task": "zero-shot-classification", "model": "facebook/bart-large-mnli"},
+            "This is a contract about data privacy and user rights.",
+            {"candidate_labels": ["legal", "finance", "technology", "sports"]},
+        ),
+        inputs=None,
+        outputs=ex2_out,
+    )
+    ex3_btn.click(
+        fn=lambda: inference(
+            {"task": "token-classification", "model": "openai/privacy-filter"},
+            "My name is Alice Smith",
+            {},
+        ),
+        inputs=None,
+        outputs=ex3_out,
+    )
+
     gr.Markdown("## API Example")
     gr.Code("""from gradio_client import Client
 
@@ -115,4 +160,4 @@ print(client.predict(
     api_name="/inference"
 ))""", language="python")
 
-demo.launch()
+demo.launch(css=APP_CSS)