Update demo_release.py

demo_release.py

@@ -365,8 +365,6 @@ def box_selector_html() -> str:
 """
 
                            
-                                 
-                           
 CAMERA_EXAMPLE_SAMPLES = [
     {
         "image": "images/example_1.jpg",
@@ -495,6 +493,52 @@ def pil_to_data_url(image: Image.Image) -> str:
     img_str = base64.b64encode(buf.getvalue()).decode()
     return f"data:image/png;base64,{img_str}"
 
+def build_camera_preview_html(image: Optional[Image.Image]) -> str:
+    if image is None:
+        return """
+        <div style="
+            width: 100%;
+            height: 320px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #d8e1ee;
+            border-radius: 12px;
+            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+            color: #64748b;
+            font-size: 14px;
+        ">
+            Input image preview will appear here.
+        </div>
+        """
+    data_url = pil_to_data_url(image)
+    return f"""
+    <div style="
+        width: 100%;
+        height: 320px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #d8e1ee;
+        border-radius: 12px;
+        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+        overflow: hidden;
+    ">
+        <img
+            src="{data_url}"
+            alt="Input preview"
+            style="
+                max-width: 100%;
+                max-height: 100%;
+                width: auto;
+                height: auto;
+                object-fit: contain;
+                display: block;
+            "
+        />
+    </div>
+    """
+
 def _build_conversation_instruction(y_rot: float, x_rot: float, d_delta: int, rng: random.Random) -> str:
     instr = natural_template_rot_only.format(x_rot=x_rot, y_rot=y_rot)
     if d_delta < 0:
@@ -2723,7 +2767,7 @@ def create_demo(
         if pil_image is None:
             return (
                 None,
-                None,
+                build_camera_preview_html(None),
                 gr.update(value=default_camera_value(), imageUrl=None),
                 0.0,
                 0.0,
@@ -2734,7 +2778,7 @@ def create_demo(
         data_url = selector_source_data_url(pil_image)
         return (
             pil_image,
-            pil_image,
+            build_camera_preview_html(pil_image),
             gr.update(value=default_camera_value(), imageUrl=data_url),
             0.0,
             0.0,
@@ -2752,7 +2796,7 @@ def create_demo(
     def reset_camera_upload():
         return (
             None,
-            None,
+            build_camera_preview_html(None),
             gr.update(value=default_camera_value(), imageUrl=None),
             0.0,
             0.0,
@@ -2769,7 +2813,7 @@ def create_demo(
         if idx < 0 or idx >= len(examples_full):
             return (
                 None,
-                None,
+                build_camera_preview_html(None),
                 gr.update(value=default_camera_value(), imageUrl=None),
                 0.0,
                 0.0,
@@ -2782,7 +2826,7 @@ def create_demo(
         if pil_image is None:
             return (
                 None,
-                None,
+                build_camera_preview_html(None),
                 gr.update(value=default_camera_value(), imageUrl=None),
                 0.0,
                 0.0,
@@ -2797,7 +2841,7 @@ def create_demo(
         data_url = selector_source_data_url(pil_image)
         return (
             pil_image,
-            pil_image,
+            build_camera_preview_html(pil_image),
             gr.update(value={"yaw": yaw, "pitch": pitch, "zoom_delta": zoom_delta}, imageUrl=data_url),
             yaw,
             pitch,
@@ -3001,11 +3045,9 @@ def create_demo(
                         elem_id="se_upload_image_camera_file",
                     )
                     camera_clear_btn = gr.Button("Clear Input", size="sm")
-                camera_input_preview = gr.Image(
-                    label="Input Image",
-                    type="pil",
-                    interactive=False,
-                    height=320,
+                gr.Markdown("### Input Image")
+                camera_input_preview = gr.HTML(
+                    value=build_camera_preview_html(None),
                     elem_id="se_upload_image_camera_preview",
                 )
                 camera_prompt_box = gr.Textbox(
@@ -3042,7 +3084,23 @@ def create_demo(
                 )
 
                 if examples_full:
-                    gr.Markdown("### 🖼️ Camera Control Examples")
+                    gr.HTML(
+                        """
+                        <div style="
+                            display:flex;
+                            align-items:center;
+                            gap:10px;
+                            margin: 6px 0 10px 0;
+                            font-size: 1.25rem;
+                            font-weight: 700;
+                            line-height: 1.2;
+                            color: var(--body-text-color);
+                        ">
+                            <span style="font-size: 1.05em; line-height: 1;">🖼️</span>
+                            <span>Camera Control Examples</span>
+                        </div>
+                        """
+                    )
                     with gr.Row():
                         for idx, example_item in enumerate(examples_full):
                             example_name = Path(str(example_item[0])).name
@@ -3051,7 +3109,6 @@ def create_demo(
                                 fn=lambda i=idx: load_camera_example_by_index(i),
                                 inputs=None,
                                 outputs=[camera_original_image_state, camera_input_preview, camera_3d, yaw_slider, pitch_slider, zoom_slider, display_line, camera_prompt_box],
-                                queue=False,
                             )
 
                 camera_prompt_box.render()