move examples

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -177,4 +177,4 @@ tmp/
 .vscode/
 .gradio/
 .cursor/
-*.mp4
+temp_*

assets/examples/a4c_decoded.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ac03378eb37b461050c952e3766044e7dabeb4e1d55068f9ad07f990d6b1e05a
+size 313650

assets/examples/a4c_latent.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f854cbd44e2e151098de2699875c8eb582254e61e782394f5c002522cd0ac644
+size 249646

assets/examples/plax_decoded.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d91827182f647975cc68dd09ee0e927285b90ea6c408e8b190a75077fda0281e
+size 216872

assets/examples/plax_latent.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:18c6b8c86ca1c2acd16d37097bed855d84ef58d0cfd7ad8392d2d967a5bdec57
+size 171456

assets/examples/psax_decoded.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04eaa3f6827cd111915fe32fbc379db1033b74d72bfbd89361deb3dde4e06011
+size 199467

assets/examples/psax_latent.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cf9f1c520f74f5142a49bcc476b98f81fb854946a2d24f0a27ff43182a83a097
+size 232138

demo.py

@@ -668,6 +668,108 @@ def load_view_mask(view):
 
 
 def create_demo():
+    # Define all components first
+    mask_input = gr.ImageEditor(
+        label="Binary Mask",
+        height=400,
+        width=400,
+        image_mode="L",
+        type="numpy",
+        brush=gr.Brush(
+            colors=["#ffffff"],
+            color_mode="fixed",
+            default_size=20,
+            default_color="#ffffff",
+        ),
+        eraser=gr.Eraser(default_size=20),
+        show_download_button=True,
+        sources=[],
+        canvas_size=(400, 400),
+        fixed_canvas=True,
+        layers=False,
+        render=False,
+    )
+
+    class_selection = gr.Radio(
+        choices=["A4C", "PSAX", "PLAX"],
+        label="View Class",
+        value="A4C",
+        render=False,
+    )
+
+    sampling_steps = gr.Slider(
+        minimum=1,
+        maximum=200,
+        value=100,
+        step=1,
+        label="Number of Sampling Steps",
+        render=False,
+    )
+
+    ef_slider = gr.Slider(
+        minimum=0,
+        maximum=100,
+        value=65,
+        label="Ejection Fraction (%)",
+        render=False,
+    )
+
+    animation_steps = gr.Slider(
+        minimum=1,
+        maximum=200,
+        value=100,
+        step=1,
+        label="Number of Sampling Steps",
+        render=False,
+    )
+
+    cfg_slider = gr.Slider(
+        minimum=0,
+        maximum=10,
+        value=1,
+        step=1,
+        label="Classifier-Free Guidance Scale",
+        render=False,
+    )
+
+    latent_image_display = gr.Image(
+        label="Latent Image",
+        type="numpy",
+        height=400,
+        width=400,
+        render=False,
+    )
+
+    decoded_image_display = gr.Image(
+        label="Decoded Image",
+        type="numpy",
+        height=400,
+        width=400,
+        render=False,
+    )
+
+    privacy_status = gr.Markdown(render=False)
+
+    filtered_latent_display = gr.Image(
+        label="Filtered Latent Image",
+        type="numpy",
+        height=400,
+        width=400,
+        render=False,
+    )
+
+    latent_animation_display = gr.Video(
+        label="Latent Video",
+        format="mp4",
+        render=False,
+    )
+
+    decoded_animation_display = gr.Video(
+        label="Decoded Video",
+        format="mp4",
+        render=False,
+    )
+
     # Define the theme and layout
     with gr.Blocks(theme=gr.themes.Soft()) as demo:
         gr.Markdown("# EchoFlow Demo")
@@ -689,6 +791,153 @@ def create_demo():
         """
         )
 
+        def load_example(
+            mask,
+            view,
+            steps,
+            ef,
+            anim_steps,
+            cfg,
+            latent,
+            decoded,
+            status,
+            filtered,
+            latent_vid,
+            decoded_vid,
+        ):
+            # This function will be called when an example is clicked
+            # It returns all values in order they should be loaded into components
+            return [
+                mask,
+                view,
+                steps,
+                ef,
+                anim_steps,
+                cfg,
+                latent,
+                decoded,
+                status,
+                filtered,
+                latent_vid,
+                decoded_vid,
+            ]
+
+        # Add examples using the components
+        examples = gr.Examples(
+            examples=[
+                # Example 1: A4C view
+                [
+                    # Inputs
+                    {
+                        "background": np.zeros((400, 400), dtype=np.uint8),
+                        "layers": [
+                            np.array(
+                                Image.open("assets/a4c_seg.png")
+                                .convert("L")
+                                .resize((400, 400))
+                            )
+                        ],
+                        "composite": np.array(
+                            Image.open("assets/a4c_seg.png")
+                            .convert("L")
+                            .resize((400, 400))
+                        ),
+                    },
+                    "A4C",  # view
+                    100,  # sampling steps
+                    65,  # EF slider
+                    100,  # animation steps
+                    1.0,  # cfg scale
+                    # Pre-computed outputs
+                    Image.open("assets/examples/a4c_latent.png"),  # latent image
+                    Image.open("assets/examples/a4c_decoded.png"),  # decoded image
+                    "✅ **Success:** Generated image passed privacy check.",  # privacy status
+                    Image.open("assets/examples/a4c_filtered.png"),  # filtered latent
+                    "assets/examples/a4c_latent.mp4",  # latent animation
+                    "assets/examples/a4c_decoded.mp4",  # decoded animation
+                ],
+                # Example 2: PSAX view
+                [
+                    # Inputs
+                    {
+                        "background": np.zeros((400, 400), dtype=np.uint8),
+                        "layers": [
+                            np.array(
+                                Image.open("assets/psax_seg.png")
+                                .convert("L")
+                                .resize((400, 400))
+                            )
+                        ],
+                        "composite": np.array(
+                            Image.open("assets/psax_seg.png")
+                            .convert("L")
+                            .resize((400, 400))
+                        ),
+                    },
+                    "PSAX",  # view
+                    100,  # sampling steps
+                    65,  # EF slider
+                    100,  # animation steps
+                    1.0,  # cfg scale
+                    # Pre-computed outputs
+                    Image.open("assets/examples/psax_latent.png"),  # latent image
+                    Image.open("assets/examples/psax_decoded.png"),  # decoded image
+                    "✅ **Success:** Generated image passed privacy check.",  # privacy status
+                    Image.open("assets/examples/psax_filtered.png"),  # filtered latent
+                    "assets/examples/psax_latent.mp4",  # latent animation
+                    "assets/examples/psax_decoded.mp4",  # decoded animation
+                ],
+                # Example 3: PLAX view
+                [
+                    # Inputs
+                    {
+                        "background": np.zeros((400, 400), dtype=np.uint8),
+                        "layers": [
+                            np.array(
+                                Image.open("assets/plax_seg.png")
+                                .convert("L")
+                                .resize((400, 400))
+                            )
+                        ],
+                        "composite": np.array(
+                            Image.open("assets/plax_seg.png")
+                            .convert("L")
+                            .resize((400, 400))
+                        ),
+                    },
+                    "PLAX",  # view
+                    100,  # sampling steps
+                    65,  # EF slider
+                    100,  # animation steps
+                    1.0,  # cfg scale
+                    # Pre-computed outputs
+                    Image.open("assets/examples/plax_latent.png"),  # latent image
+                    Image.open("assets/examples/plax_decoded.png"),  # decoded image
+                    "✅ **Success:** Generated image passed privacy check.",  # privacy status
+                    Image.open("assets/examples/plax_filtered.png"),  # filtered latent
+                    "assets/examples/plax_latent.mp4",  # latent animation
+                    "assets/examples/plax_decoded.mp4",  # decoded animation
+                ],
+            ],
+            inputs=[
+                mask_input,
+                class_selection,
+                sampling_steps,
+                ef_slider,
+                animation_steps,
+                cfg_slider,
+                latent_image_display,
+                decoded_image_display,
+                privacy_status,
+                filtered_latent_display,
+                latent_animation_display,
+                decoded_animation_display,
+            ],
+            fn=load_example,
+            label="Click on an example to see the results immediately.",
+            examples_per_page=3,
+        )
+
         # Main container with 4 columns
         with gr.Row():
             # Column 1: Latent Image Generation
@@ -701,7 +950,6 @@ def create_demo():
                 with gr.Row():
                     # Input mask (binary image)
                     with gr.Column(scale=1):
-                        # gr.Markdown("#### Mask Condition")
                         gr.Markdown("Draw the LV mask (white = region of interest)")
                         # Create a black background for the canvas
                         black_background = np.zeros((400, 400), dtype=np.uint8)
@@ -730,59 +978,16 @@ def create_demo():
                             # Fall back to empty canvas
                             editor_value = black_background
 
-                        mask_input = gr.ImageEditor(
-                            label="Binary Mask",
-                            height=400,
-                            width=400,
-                            image_mode="L",
-                            value=editor_value,
-                            type="numpy",
-                            brush=gr.Brush(
-                                colors=["#ffffff"],
-                                color_mode="fixed",
-                                default_size=20,
-                                default_color="#ffffff",
-                            ),
-                            eraser=gr.Eraser(default_size=20),
-                            # show_label=False,
-                            show_download_button=True,
-                            sources=[],
-                            canvas_size=(400, 400),
-                            fixed_canvas=True,
-                            layers=False,  # Enable layers to make the mask editable
-                        )
-
-                        # # Class selection
-                        # with gr.Column(scale=1):
-                        # gr.Markdown("#### View Condition")
-                        class_selection = gr.Radio(
-                            choices=["A4C", "PSAX", "PLAX"],
-                            label="View Class",
-                            value="A4C",
-                        )
-
-                        # gr.Markdown("#### Sampling Steps")
-                        sampling_steps = gr.Slider(
-                            minimum=1,
-                            maximum=200,
-                            value=100,
-                            step=1,
-                            label="Number of Sampling Steps",
-                            info="Higher values = better quality but slower generation",
-                        )
+                        mask_input.value = editor_value
+                        mask_input.render()
+                        class_selection.render()
+                        sampling_steps.render()
 
                 # Generate button
                 generate_btn = gr.Button("Generate Latent Image", variant="primary")
 
                 # Display area for latent image (grayscale visualization)
-                latent_image_display = gr.Image(
-                    label="Latent Image",
-                    type="numpy",
-                    height=400,
-                    width=400,
-                    show_download_button=True,
-                    interactive=False,  # Cannot be uploaded/edited
-                )
+                latent_image_display.render()
 
                 # Decode button (initially disabled)
                 decode_btn = gr.Button(
@@ -792,14 +997,7 @@ def create_demo():
                 )
 
                 # Display area for decoded image
-                decoded_image_display = gr.Image(
-                    label="Decoded Image",
-                    type="numpy",
-                    height=400,
-                    width=400,
-                    show_download_button=True,
-                    interactive=False,  # Cannot be uploaded/edited
-                )
+                decoded_image_display.render()
 
             # Column 2: Privacy Filter
             with gr.Column():
@@ -817,12 +1015,10 @@ def create_demo():
                 )
 
                 # Display area for privacy result status
-                privacy_status = gr.Markdown("No image processed yet")
+                privacy_status.render()
 
                 # Display area for privacy-filtered latent image
-                filtered_latent_display = gr.Image(
-                    label="Filtered Latent Image", type="numpy", height=400, width=400
-                )
+                filtered_latent_display.render()
 
             # Column 3: Animation
             with gr.Column():
@@ -832,33 +1028,9 @@ def create_demo():
                 gr.Markdown("### Latent Video Generation")
 
                 # Ejection Fraction slider
-                ef_slider = gr.Slider(
-                    minimum=0,
-                    maximum=100,
-                    value=65,
-                    label="Ejection Fraction (%)",
-                    info="Higher values = stronger contraction",
-                )
-
-                # Add sampling steps slider for animation
-                animation_steps = gr.Slider(
-                    minimum=1,
-                    maximum=200,
-                    value=100,
-                    step=1,
-                    label="Number of Sampling Steps",
-                    info="Higher values = better quality but slower generation",
-                )
-
-                # Add CFG slider
-                cfg_slider = gr.Slider(
-                    minimum=0,
-                    maximum=10,
-                    value=1,
-                    step=1,
-                    label="Classifier-Free Guidance Scale",
-                    # info="Higher values = better quality but slower generation",
-                )
+                ef_slider.render()
+                animation_steps.render()
+                cfg_slider.render()
 
                 # Animate button
                 animate_btn = gr.Button(
@@ -866,9 +1038,7 @@ def create_demo():
                 )
 
                 # Display area for latent animation (grayscale)
-                latent_animation_display = gr.Video(
-                    label="Latent Video", format="mp4", autoplay=True, loop=True
-                )
+                latent_animation_display.render()
 
             # Column 4: Video Decoding
             with gr.Column():
@@ -883,9 +1053,7 @@ def create_demo():
                 )
 
                 # Display area for decoded animation
-                decoded_animation_display = gr.Video(
-                    label="Decoded Video", format="mp4", autoplay=True, loop=True
-                )
+                decoded_animation_display.render()
 
         # Hidden state variables to store the full latent representations
         latent_image_state = gr.State(None)
@@ -985,121 +1153,6 @@ def create_demo():
             queue=True,
         )
 
-        # Add examples
-        gr.Examples(
-            examples=[
-                # Example 1: A4C view
-                [
-                    # Inputs
-                    {
-                        "background": np.zeros((400, 400), dtype=np.uint8),
-                        "layers": [
-                            np.array(
-                                Image.open("assets/a4c_seg.png")
-                                .convert("L")
-                                .resize((400, 400))
-                            )
-                        ],
-                        "composite": np.array(
-                            Image.open("assets/a4c_seg.png")
-                            .convert("L")
-                            .resize((400, 400))
-                        ),
-                    },
-                    "A4C",  # view
-                    100,  # sampling steps
-                    65,  # EF slider
-                    100,  # animation steps
-                    1.0,  # cfg scale
-                    # Pre-computed outputs
-                    Image.open("assets/examples/a4c_latent.png"),  # latent image
-                    Image.open("assets/examples/a4c_decoded.png"),  # decoded image
-                    "✅ **Success:** Generated image passed privacy check.",  # privacy status
-                    Image.open("assets/examples/a4c_filtered.png"),  # filtered latent
-                    "assets/examples/a4c_latent.mp4",  # latent animation
-                    "assets/examples/a4c_decoded.mp4",  # decoded animation
-                ],
-                # Example 2: PSAX view
-                [
-                    # Inputs
-                    {
-                        "background": np.zeros((400, 400), dtype=np.uint8),
-                        "layers": [
-                            np.array(
-                                Image.open("assets/psax_seg.png")
-                                .convert("L")
-                                .resize((400, 400))
-                            )
-                        ],
-                        "composite": np.array(
-                            Image.open("assets/psax_seg.png")
-                            .convert("L")
-                            .resize((400, 400))
-                        ),
-                    },
-                    "PSAX",  # view
-                    150,  # sampling steps
-                    75,  # EF slider
-                    150,  # animation steps
-                    2.0,  # cfg scale
-                    # Pre-computed outputs
-                    Image.open("assets/examples/psax_latent.png"),  # latent image
-                    Image.open("assets/examples/psax_decoded.png"),  # decoded image
-                    "✅ **Success:** Generated image passed privacy check.",  # privacy status
-                    Image.open("assets/examples/psax_filtered.png"),  # filtered latent
-                    "assets/examples/psax_latent.mp4",  # latent animation
-                    "assets/examples/psax_decoded.mp4",  # decoded animation
-                ],
-                # Example 3: PLAX view
-                [
-                    # Inputs
-                    {
-                        "background": np.zeros((400, 400), dtype=np.uint8),
-                        "layers": [
-                            np.array(
-                                Image.open("assets/plax_seg.png")
-                                .convert("L")
-                                .resize((400, 400))
-                            )
-                        ],
-                        "composite": np.array(
-                            Image.open("assets/plax_seg.png")
-                            .convert("L")
-                            .resize((400, 400))
-                        ),
-                    },
-                    "PLAX",  # view
-                    200,  # sampling steps
-                    55,  # EF slider
-                    200,  # animation steps
-                    3.0,  # cfg scale
-                    # Pre-computed outputs
-                    Image.open("assets/examples/plax_latent.png"),  # latent image
-                    Image.open("assets/examples/plax_decoded.png"),  # decoded image
-                    "✅ **Success:** Generated image passed privacy check.",  # privacy status
-                    Image.open("assets/examples/plax_filtered.png"),  # filtered latent
-                    "assets/examples/plax_latent.mp4",  # latent animation
-                    "assets/examples/plax_decoded.mp4",  # decoded animation
-                ],
-            ],
-            inputs=[
-                mask_input,
-                class_selection,
-                sampling_steps,
-                ef_slider,
-                animation_steps,
-                cfg_slider,
-                latent_image_display,
-                decoded_image_display,
-                privacy_status,
-                filtered_latent_display,
-                latent_animation_display,
-                decoded_animation_display,
-            ],
-            label="Example Configurations",
-            examples_per_page=3,
-        )
-
     return demo