update requirements.

app.py

@@ -0,0 +1,208 @@
+import gradio as gr
+
+# --- Placeholder image paths (local files in same repo) ---
+CAT_IMG_URL = "https://placekitten.com/256/256"  # swap with local cat if you want
+UNICORN_WITH_HORN_PATH = "unicorn_with_horn.png"
+UNICORN_NO_HORN_PATH = "unicorn_without_horn.png"
+
+# --- Dummy callbacks ---
+
+def steer_spectacles(strength: float):
+    """
+    Placeholder: given a steering strength, return (left_img, right_img).
+    Later you can replace this with your actual spectacles-mapping logic.
+    """
+    return CAT_IMG_URL, CAT_IMG_URL
+
+def run_ablation(layer_name: str, strength: float):
+    """
+    Placeholder ablation function: currently just returns None.
+    Replace with your actual ablation pipeline and return an image.
+    """
+    # TODO: hook layer_name + strength into your UNet / transformer ablation
+    return None
+
+
+with gr.Blocks() as demo:
+    # Inject CSS via HTML so it works on older Gradio versions
+    gr.HTML("""
+    <style>
+    .tooltip-bubble {
+      position: relative;
+      display: inline-block;
+      cursor: help;
+      padding: 4px 8px;
+      border-radius: 6px;
+      border: 1px solid #ccc;
+      font-size: 0.85rem;
+      margin: 4px;
+    }
+    .tooltip-bubble .tooltip-text {
+      visibility: hidden;
+      width: 260px;
+      background-color: #111;
+      color: #fff;
+      text-align: left;
+      border-radius: 8px;
+      padding: 8px 10px;
+      position: absolute;
+      z-index: 10;
+      bottom: 125%;
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+    .tooltip-bubble .tooltip-text::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #111 transparent transparent transparent;
+    }
+    .tooltip-bubble:hover .tooltip-text {
+      visibility: visible;
+      opacity: 1;
+    }
+    </style>
+    """)
+
+    gr.Markdown("# Steering & Ablation UI Skeleton")
+
+    # ----------------- 1. Cat spectacles steering -----------------
+    with gr.Group():
+        gr.Markdown("## Steer: Add Spectacles via Mapping")
+
+        with gr.Row():
+            cat_left = gr.Image(
+                value=CAT_IMG_URL,
+                label="Original cat",
+                interactive=False,
+                show_label=True
+            )
+            cat_right = gr.Image(
+                value=CAT_IMG_URL,
+                label="Steered cat (with spectacles)",
+                interactive=False,
+                show_label=True
+            )
+
+        steer_slider = gr.Slider(
+            minimum=0.0,
+            maximum=1.0,
+            value=0.0,
+            step=0.05,
+            label="Steer (add spectacles via mapping)",
+            info="Placeholder: hook into your spectacles-mapping call."
+        )
+
+        steer_slider.change(
+            fn=steer_spectacles,
+            inputs=steer_slider,
+            outputs=[cat_left, cat_right]
+        )
+
+    # ----------------- 2. Unicorns with / without horns -----------------
+    with gr.Group():
+        gr.Markdown("## Unicorns: With vs Without Horn")
+
+        with gr.Row():
+            unicorn_with = gr.Image(
+                value=UNICORN_WITH_HORN_PATH,
+                label="Unicorn with horn",
+                interactive=False,
+                show_label=True
+            )
+            unicorn_without = gr.Image(
+                value=UNICORN_NO_HORN_PATH,
+                label="Unicorn without horn",
+                interactive=False,
+                show_label=True
+            )
+
+    # ----------------- 3. Ablation experiment -----------------
+    with gr.Group():
+        gr.Markdown("## Ablation Experiment")
+
+        with gr.Row():
+            # Controls
+            with gr.Column(scale=1):
+                layer_dropdown = gr.Dropdown(
+                    choices=[
+                        "UNet.block_1",
+                        "UNet.block_2",
+                        "UNet.attn_mid",
+                        "TextEncoder.layer_5",
+                    ],
+                    value="UNet.block_1",
+                    label="Layer / module to ablate",
+                    info="Populate with your actual layer names."
+                )
+
+                ablation_strength = gr.Slider(
+                    minimum=0.0,
+                    maximum=1.0,
+                    value=0.0,
+                    step=0.05,
+                    label="Ablation strength",
+                    info="0 = no ablation, 1 = full ablation."
+                )
+
+            # Output + explanation
+            with gr.Column(scale=1):
+                ablation_output = gr.Image(
+                    value=None,
+                    label="Ablated output (placeholder)",
+                    interactive=False
+                )
+
+                gr.HTML("""
+                <div>
+                    <p>
+                        This panel is for an <strong>ablation experiment</strong>:
+                        you remove or zero-out parts of the network and see how the
+                        generated image changes.
+                    </p>
+                    <div class="tooltip-bubble">
+                        Baseline vs ablated
+                        <span class="tooltip-text">
+                            In the real experiment, you would compare the original image
+                            to this ablated one to see which visual attributes the
+                            selected layer controls.
+                        </span>
+                    </div>
+                    <div class="tooltip-bubble">
+                        Layer selection
+                        <span class="tooltip-text">
+                            Different layers control different levels of abstraction:
+                            early blocks affect global layout, mid blocks affect object
+                            structure, and late blocks refine texture and style.
+                        </span>
+                    </div>
+                    <div class="tooltip-bubble">
+                        Ablation strength
+                        <span class="tooltip-text">
+                            Ablation strength could interpolate from no ablation (0.0),
+                            to partial noise / zeroing (0.5), to fully removing the
+                            layer's contribution (1.0).
+                        </span>
+                    </div>
+                </div>
+                """)
+
+        # Wire up the (dummy) ablation callback
+        layer_dropdown.change(
+            fn=run_ablation,
+            inputs=[layer_dropdown, ablation_strength],
+            outputs=ablation_output,
+        )
+        ablation_strength.change(
+            fn=run_ablation,
+            inputs=[layer_dropdown, ablation_strength],
+            outputs=ablation_output,
+        )
+
+demo.launch()

requirements.txt

@@ -0,0 +1 @@
+gradio==4.44.1