Update the demo viewers, click markers and examples

WebGL viewers with a point-size control (default 5), click markers sized by the framed scene, example images kept in memory, and the CO3D car and couch examples removed.

README.md

@@ -23,7 +23,7 @@ On first launch the Space downloads the checkpoint from [`uva-cv-lab/Click3R`](h
 
 ## Examples
 
-The demo has 25 example pairs. Errors are relative pose errors in degrees.
+The demo has 23 example pairs. Errors are relative pose errors in degrees.
 
 **From the paper.** Bicycle (Figure 1, CO3D) and Railing (Figure 4, BlendedMVS). Their clicks are transcribed from the figures.
 
@@ -46,7 +46,6 @@ The demo has 25 example pairs. Errors are relative pose errors in degrees.
 | CO3D toy truck | 1 | 170.4° | 161.7° | 3.4° |
 | CO3D umbrella | 1 | 74.1° | 161.7° | 3.1° |
 | CO3D cake | 1 | 40.7° | 38.9° | 3.6° |
-| CO3D couch | 1 | 37.9° | 62.1° | 10.6° |
 | CO3D teddy bear | 2 | 124.1° | 127.3° | 2.6° |
 | CO3D handbag | 3 | 73.1° | 172.5° | 3.9° |
 | DTU scan 29 | 1 | 135.5° | 78.4° | 8.8° |
@@ -55,7 +54,6 @@ The demo has 25 example pairs. Errors are relative pose errors in degrees.
 | BlendedMVS houses | 1 | 75.1° | 178.8° | 6.1° |
 | BlendedMVS town | 2 | 93.1° | 133.0° | 2.8° |
 | BlendedMVS village | 1 | 65.3° | 177.6° | 0.6° |
-| CO3D car | 1 | 178.0° | 175.9° | 2.8° |
 | CO3D smartphone | 2 | 180.0° | 179.1° | 3.7° |
 | WildRGB-D flower pot | 1 | 67.7° | 72.4° | 8.0° |
 | ETH3D courtyard | 1 | 88.1° | 89.4° | 1.3° |

assets/examples/manifest.json

@@ -1558,146 +1558,6 @@
       "attribution": "CO3D dataset contributors / Meta",
       "license_source": "https://ai.meta.com/datasets/co3d-downloads/"
     },
-    {
-      "id": "co3d_couch",
-      "title": "CO3D couch \u00b7 one click pair",
-      "pair_id": "CO3D/couch/590_88849_175666/frame000133.jpg|frame000172.jpg",
-      "image1": "co3d_couch/view1.png",
-      "image2": "co3d_couch/view2.png",
-      "coordinate_space": "normalized 224x224 model crop",
-      "correspondences": [
-        {
-          "x1": 0.7410714285714286,
-          "y1": 0.07589285714285714,
-          "x2": 0.43251184054783415,
-          "y2": 0.16654603821890696
-        }
-      ],
-      "source": "Automatic example search, 2026-11-05",
-      "source_dataset": "CO3D",
-      "source_sequence": "couch/590_88849_175666",
-      "source_frames": [
-        "frame000133",
-        "frame000172"
-      ],
-      "suggested_click_source": "Ground-truth correspondences at corners visible in both views, chosen automatically; not human clicks",
-      "checkpoint": "prompt3r_trained_without_occlusion_best.pth",
-      "verification": "GPU replay passed, 2026-11-05; float32, symmetrized PnP metrics; prompt token offset 0.0; +-2 px click jitter stays below 20 degrees",
-      "K1": [
-        [
-          371.4941101074219,
-          0.0,
-          111.0
-        ],
-        [
-          0.0,
-          371.4941101074219,
-          111.82941436767578
-        ],
-        [
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "K2": [
-        [
-          369.1937561035156,
-          0.0,
-          111.0
-        ],
-        [
-          0.0,
-          369.1937561035156,
-          111.66470336914062
-        ],
-        [
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "img_size1": [
-        224,
-        224
-      ],
-      "img_size2": [
-        224,
-        224
-      ],
-      "pose1_c2w": [
-        [
-          0.625900149345398,
-          0.756680965423584,
-          -0.1888994425535202,
-          1.830051302909851
-        ],
-        [
-          -0.5032391548156738,
-          0.5768808126449585,
-          0.6433963775634766,
-          -2.332740306854248
-        ],
-        [
-          0.5958182215690613,
-          -0.30764031410217285,
-          0.7418612241744995,
-          -0.779137372970581
-        ],
-        [
-          0.0,
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "pose2_c2w": [
-        [
-          -0.9677540063858032,
-          0.17060181498527527,
-          0.18532992899417877,
-          0.44929206371307373
-        ],
-        [
-          0.1873876452445984,
-          -0.004104661755263805,
-          0.9822774529457092,
-          -4.026187896728516
-        ],
-        [
-          0.16833904385566711,
-          0.9853315353393555,
-          -0.027996370568871498,
-          2.496816873550415
-        ],
-        [
-          0.0,
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "release_metrics": {
-        "pair_id": "CO3D/couch/590_88849_175666/frame000133.jpg|frame000172.jpg",
-        "num_clicks": 1,
-        "dust3r": {
-          "rotation_error_deg": 37.86177062988281,
-          "translation_error_deg": 23.619871139526367
-        },
-        "click3r_no_clicks": {
-          "rotation_error_deg": 62.11467361450195,
-          "translation_error_deg": 33.67499923706055
-        },
-        "click3r_clicks": {
-          "rotation_error_deg": 10.642072677612305,
-          "translation_error_deg": 3.9270527362823486
-        }
-      },
-      "release_checkpoint_sha256": "7e882702da087cb214a101a45fa6c8a098aaefc5ce952511076b518e09decc78",
-      "asset_license": "CC-BY-NC-4.0",
-      "attribution": "CO3D dataset contributors / Meta",
-      "license_source": "https://ai.meta.com/datasets/co3d-downloads/"
-    },
     {
       "id": "co3d_teddybear",
       "title": "CO3D teddy bear \u00b7 two click pairs",
@@ -2878,146 +2738,6 @@
       "attribution": "Yao Yao et al., BlendedMVS (CVPR 2020)",
       "license_source": "https://github.com/YoYo000/BlendedMVS#license"
     },
-    {
-      "id": "co3d_car",
-      "title": "CO3D car \u00b7 one click pair",
-      "pair_id": "CO3D/car/590_88856_176024/frame000124.jpg|frame000181.jpg",
-      "image1": "co3d_car/view1.png",
-      "image2": "co3d_car/view2.png",
-      "coordinate_space": "normalized 224x224 model crop",
-      "correspondences": [
-        {
-          "x1": 0.9553571428571429,
-          "y1": 0.46875,
-          "x2": 0.2703523976462228,
-          "y2": 0.5817365646362305
-        }
-      ],
-      "source": "Automatic example search, 2026-11-05; chosen by the authors",
-      "source_dataset": "CO3D",
-      "source_sequence": "car/590_88856_176024",
-      "source_frames": [
-        "frame000124",
-        "frame000181"
-      ],
-      "suggested_click_source": "Ground-truth correspondences at corners visible in both views, chosen automatically; not human clicks",
-      "checkpoint": "prompt3r_trained_without_occlusion_best.pth",
-      "verification": "GPU replay passed, 2026-11-05; float32, symmetrized PnP metrics; prompt token offset 0.0; +-2 px click jitter stays below 20 degrees",
-      "K1": [
-        [
-          380.17340087890625,
-          0.0,
-          111.65774536132812
-        ],
-        [
-          0.0,
-          380.17340087890625,
-          111.15774536132812
-        ],
-        [
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "K2": [
-        [
-          379.39739990234375,
-          0.0,
-          111.5
-        ],
-        [
-          0.0,
-          379.39739990234375,
-          111.15774536132812
-        ],
-        [
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "img_size1": [
-        224,
-        224
-      ],
-      "img_size2": [
-        224,
-        224
-      ],
-      "pose1_c2w": [
-        [
-          -0.7206673622131348,
-          -0.051977626979351044,
-          0.6913297772407532,
-          -4.461040019989014
-        ],
-        [
-          0.18991735577583313,
-          0.9442387819290161,
-          0.2689693570137024,
-          -1.0833290815353394
-        ],
-        [
-          -0.6667607426643372,
-          0.32513293623924255,
-          -0.6706106066703796,
-          3.9138236045837402
-        ],
-        [
-          0.0,
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "pose2_c2w": [
-        [
-          0.9098760485649109,
-          -0.038672517985105515,
-          0.4130738377571106,
-          -2.6405954360961914
-        ],
-        [
-          0.04088924825191498,
-          0.9991576075553894,
-          0.0034758830443024635,
-          0.6790323257446289
-        ],
-        [
-          -0.41286030411720276,
-          0.013727656565606594,
-          0.9106909036636353,
-          -6.602734565734863
-        ],
-        [
-          0.0,
-          0.0,
-          0.0,
-          1.0
-        ]
-      ],
-      "release_metrics": {
-        "pair_id": "CO3D/car/590_88856_176024/frame000124.jpg|frame000181.jpg",
-        "num_clicks": 1,
-        "dust3r": {
-          "rotation_error_deg": 177.95828247070312,
-          "translation_error_deg": 77.63292694091797
-        },
-        "click3r_no_clicks": {
-          "rotation_error_deg": 175.9438018798828,
-          "translation_error_deg": 77.01041412353516
-        },
-        "click3r_clicks": {
-          "rotation_error_deg": 2.8129944801330566,
-          "translation_error_deg": 0.18974563479423523
-        }
-      },
-      "release_checkpoint_sha256": "7e882702da087cb214a101a45fa6c8a098aaefc5ce952511076b518e09decc78",
-      "asset_license": "CC-BY-NC-4.0",
-      "attribution": "CO3D dataset contributors / Meta",
-      "license_source": "https://ai.meta.com/datasets/co3d-downloads/"
-    },
     {
       "id": "co3d_smartphone",
       "title": "CO3D smartphone \u00b7 two click pairs",

click3r/demo/app.py

@@ -60,13 +60,15 @@ from click3r.demo.session import (
     session_edit as session_edit,
     session_scope as session_scope,
 )
+from click3r.demo.display import ReconstructionViewer, point_size_control
 from click3r.demo.views import prepare_model_view
 from click3r.demo.results import ReconstructionResult
 
 DEBUG = False
 DISPLAY_LONG_SIDE = 640  # Pixels; small inputs would otherwise be hard to click.
-CLICK_MARKER_POINTS = 150  # Scene points inside a 3D click marker.
+CLICK_MARKER_SCALE = 0.03  # 3D click marker radius per unit of framed scene size.
 VIEWER_FOV = 0.8  # Radians; vertical field of view of Gradio's 3D viewer.
+EXAMPLE_IMAGES = {}  # Decoded example inputs by resolved path, filled by load_examples.
 # Optional comparison models are imported lazily by their load functions.
 VGGT_MODEL_NAME = "facebook/VGGT-1B"
 PI3_MODEL_NAME = "yyfz233/Pi3X"
@@ -993,27 +995,39 @@ def sample_world_points_at_prompts(
         return None, None
 
 
-def click_marker_radius(scene, clicks):
-    """Marker radius from the point density at the clicks, unaffected by far outliers."""
-    points = []
+def scene_clouds(scene):
+    """World-frame vertices of the reconstructed points or mesh, by geometry name."""
+    clouds = {}
     for node in scene.graph.nodes_geometry:
         transform, name = scene.graph[node]
-        vertices = np.asarray(scene.geometry[name].vertices)
-        if len(vertices) > CLICK_MARKER_POINTS:
-            points.append(trimesh.transform_points(vertices, transform))
-    points = np.concatenate(points)
-    return np.median(
-        [
-            np.partition(np.linalg.norm(points - click, axis=1), CLICK_MARKER_POINTS)[
-                CLICK_MARKER_POINTS
-            ]
-            for click in clicks
-        ]
-    )
+        geometry = scene.geometry[name]
+        if isinstance(geometry, trimesh.PointCloud) or len(geometry.vertices) > 5000:
+            clouds[name] = trimesh.transform_points(
+                np.asarray(geometry.vertices), transform
+            )
+    return clouds
+
+
+def inlier_bounds(points):
+    """Median point and the distance beyond which display points count as outliers."""
+    center = np.median(points, axis=0)
+    return center, 2 * np.percentile(np.linalg.norm(points - center, axis=1), 90)
+
+
+def click_marker_radius(scene):
+    """Marker radius as a fixed share of the scene size the viewer frames.
+
+    Sizing by the point density at the clicks made markers large wherever a model
+    reconstructed the clicked surface sparsely, so views and examples differed.
+    """
+    points = np.concatenate(list(scene_clouds(scene).values()))
+    center, limit = inlier_bounds(points)
+    distance = np.linalg.norm(points - center, axis=1)
+    return CLICK_MARKER_SCALE * np.percentile(distance[distance <= limit], 75)
 
 
 def frame_model_for_viewer(model_path):
-    """Drop far outliers from a display model and return its viewer update.
+    """Drop far outliers and embed the initial camera orbit in the display GLB.
 
     The viewer aims at the center of the model's bounding box from 1.1 times its
     diagonal, so a few far points leave the scene small and off center. Removing
@@ -1022,17 +1036,8 @@ def frame_model_for_viewer(model_path):
     if not model_path:
         return model_path
     scene = trimesh.load(model_path)
-    clouds = {}
-    for node in scene.graph.nodes_geometry:
-        transform, name = scene.graph[node]
-        geometry = scene.geometry[name]
-        if isinstance(geometry, trimesh.PointCloud) or len(geometry.vertices) > 5000:
-            clouds[name] = trimesh.transform_points(
-                np.asarray(geometry.vertices), transform
-            )
-    points = np.concatenate(list(clouds.values()))
-    center = np.median(points, axis=0)
-    limit = 2 * np.percentile(np.linalg.norm(points - center, axis=1), 90)
+    clouds = scene_clouds(scene)
+    center, limit = inlier_bounds(np.concatenate(list(clouds.values())))
     kept = []
     for name, vertices in clouds.items():
         keep = np.linalg.norm(vertices - center, axis=1) <= limit
@@ -1045,12 +1050,15 @@ def frame_model_for_viewer(model_path):
         else:
             geometry.update_vertices(keep)
         kept.append(vertices[keep])
-    scene.export(model_path)
     target = scene.bounds.mean(axis=0)
     radius = np.percentile(
         np.linalg.norm(np.concatenate(kept) - target, axis=1), 75
     ) / np.tan(VIEWER_FOV / 2)
-    return gr.update(value=model_path, camera_position=(None, None, float(radius)))
+    # GLB scene extras survive Gradio's file-cache normalization. Custom fields
+    # added to FileData itself are discarded by that normalization.
+    scene.metadata["camera_position"] = [None, None, float(radius)]
+    scene.export(model_path)
+    return model_path
 
 
 def overlay_correspondences_on_model(
@@ -1082,8 +1090,7 @@ def overlay_correspondences_on_model(
         radius = click_marker_radius(
             base_scene
             if isinstance(base_scene, trimesh.Scene)
-            else trimesh.Scene(base_scene),
-            np.concatenate([sampled_pts1, sampled_pts2]),
+            else trimesh.Scene(base_scene)
         )
 
         debug_log(f"Sphere radius: {radius:.4f}")
@@ -1317,95 +1324,11 @@ def display_size(image):
     return round(image.width * scale), round(image.height * scale)
 
 
-def add_crop_region_overlay(image, target_size=224):
-    """
-    Add semi-transparent overlay to show regions that will be cropped out.
-    Only the center square region (short_side × short_side) is valid for prompts.
-
-    Args:
-        image: PIL Image
-        target_size: Target size for DUSt3R (default 224)
-
-    Returns:
-        PIL Image with overlay
-    """
+def prepare_display_image(image):
+    """Resize an input for clicking without adding a crop border or shading."""
     if image is None:
         return None
-
-    img_copy = image.resize(display_size(image), Image.LANCZOS)
-    W, H = img_copy.size
-
-    # Calculate resize and crop according to DUSt3R's logic
-    S = max(W, H)
-    long_edge_size = round(target_size * max(W / H, H / W))
-    W_resized = round(W * long_edge_size / S)
-    H_resized = round(H * long_edge_size / S)
-
-    # Center crop coordinates
-    cx, cy = W_resized // 2, H_resized // 2
-    half = min(cx, cy)
-    crop_x_start = cx - half
-    crop_y_start = cy - half
-    crop_x_end = cx + half
-    crop_y_end = cy + half
-
-    # Scale back to original image coordinates
-    scale_x = W / W_resized
-    scale_y = H / H_resized
-
-    crop_x_start_orig = int(crop_x_start * scale_x)
-    crop_y_start_orig = int(crop_y_start * scale_y)
-    crop_x_end_orig = int(crop_x_end * scale_x)
-    crop_y_end_orig = int(crop_y_end * scale_y)
-
-    # Create semi-transparent overlay
-    overlay = Image.new("RGBA", img_copy.size, (0, 0, 0, 0))
-    draw = ImageDraw.Draw(overlay)
-
-    # Draw semi-transparent gray rectangles for invalid regions
-    mask_color = (128, 128, 128, 120)  # Gray with 47% opacity
-
-    # Top region (if any)
-    if crop_y_start_orig > 0:
-        draw.rectangle([0, 0, W, crop_y_start_orig], fill=mask_color)
-
-    # Bottom region (if any)
-    if crop_y_end_orig < H:
-        draw.rectangle([0, crop_y_end_orig, W, H], fill=mask_color)
-
-    # Left region (if any)
-    if crop_x_start_orig > 0:
-        draw.rectangle(
-            [0, crop_y_start_orig, crop_x_start_orig, crop_y_end_orig], fill=mask_color
-        )
-
-    # Right region (if any)
-    if crop_x_end_orig < W:
-        draw.rectangle(
-            [crop_x_end_orig, crop_y_start_orig, W, crop_y_end_orig], fill=mask_color
-        )
-
-    # Draw border around valid region
-    border_color = (255, 165, 0, 180)  # Orange with transparency
-    draw.rectangle(
-        [
-            crop_x_start_orig,
-            crop_y_start_orig,
-            crop_x_end_orig - 1,
-            crop_y_end_orig - 1,
-        ],
-        outline=border_color,
-        width=3,
-    )
-
-    # Convert base image to RGBA and composite
-    if img_copy.mode != "RGBA":
-        img_copy = img_copy.convert("RGBA")
-
-    img_with_overlay = Image.alpha_composite(img_copy, overlay)
-
-    # Convert back to RGB
-    return img_with_overlay.convert("RGB")
+    return image.resize(display_size(image), Image.LANCZOS)
 
 
 def add_click_marker(image, x_norm, y_norm, color="red", radius=8, pair_id=None):
@@ -1463,6 +1386,18 @@ def add_click_marker(image, x_norm, y_norm, color="red", radius=8, pair_id=None)
         return image
 
 
+def read_input_image(path):
+    """Apply the EXIF orientation of phone photos, as DUSt3R's load_images does."""
+    return ImageOps.exif_transpose(Image.open(path)).convert("RGB")
+
+
+def open_input_image(path):
+    """An input image, from memory for the bundled examples."""
+    if path in EXAMPLE_IMAGES:
+        return EXAMPLE_IMAGES[path].copy()
+    return read_input_image(path)
+
+
 def update_images_display(files):
     """Update the displayed images when files are uploaded."""
 
@@ -1478,10 +1413,8 @@ def update_images_display(files):
         return None, None, "Please upload exactly two images."
 
     try:
-        # Apply the EXIF orientation of phone photos, as DUSt3R's load_images does.
         _session()["uploaded_images"] = [
-            ImageOps.exif_transpose(Image.open(getattr(f, "name", f))).convert("RGB")
-            for f in files[:2]
+            open_input_image(getattr(f, "name", f)) for f in files[:2]
         ]
         _session()["current_image_pair"] = [
             _session()["uploaded_images"][0],
@@ -1494,14 +1427,13 @@ def update_images_display(files):
             f"Loaded {len(_session().uploaded_images)} images, sizes: {[img.size for img in _session().uploaded_images]}"
         )
 
-        # Add crop region overlay to show valid prompt area
-        img1_display = add_crop_region_overlay(_session()["current_image_pair"][0])
-        img2_display = add_crop_region_overlay(_session()["current_image_pair"][1])
+        img1_display = prepare_display_image(_session()["current_image_pair"][0])
+        img2_display = prepare_display_image(_session()["current_image_pair"][1])
 
         return (
             img1_display,
             img2_display,
-            "Click matching points in both images. Choose points inside the orange crop border.",
+            "Click matching points in both images.",
         )
     except Exception as e:
         debug_log(f"Error loading images: {e}")
@@ -1537,15 +1469,13 @@ def augment_second_image():
 
         debug_log(f"Augmentation toggled: {_session().image_augmented}")
 
-        # Add crop region overlay
-        img1_display = add_crop_region_overlay(_session()["current_image_pair"][0])
-        img2_display = add_crop_region_overlay(_session()["current_image_pair"][1])
+        img1_display = prepare_display_image(_session()["current_image_pair"][0])
+        img2_display = prepare_display_image(_session()["current_image_pair"][1])
 
         return (
             img1_display,
             img2_display,
-            f"{status}\nCorrespondences cleared. Click new points.\n"
-            "⚠️ Gray overlay = invalid prompt region, Orange border = valid area",
+            f"{status}\nCorrespondences cleared. Click new points.",
         )
     except Exception as e:
         debug_log(f"Error in augment_second_image: {e}")
@@ -1607,9 +1537,8 @@ def add_correspondence_point(x_norm, y_norm, image_idx):
             pairs.append(((p1["x"], p1["y"]), (p2["x"], p2["y"])))
 
         # Create marked versions of images
-        # First add crop region overlay to show valid prompt area
-        img1_marked = add_crop_region_overlay(_session()["current_image_pair"][0])
-        img2_marked = add_crop_region_overlay(_session()["current_image_pair"][1])
+        img1_marked = prepare_display_image(_session()["current_image_pair"][0])
+        img2_marked = prepare_display_image(_session()["current_image_pair"][1])
 
         # Add markers to image 1 - each pair gets same color
         for i, point in enumerate(img1_points):
@@ -1640,8 +1569,6 @@ def add_correspondence_point(x_norm, y_norm, image_idx):
         # Generate status text
         aug_status = " [FLIPPED 180°]" if _session()["image_augmented"] else ""
         status_text = "Matching colors mark correspondence pairs\n"
-        status_text += "⚠️ Gray overlay = invalid prompt region (will be cropped)\n"
-        status_text += "   Orange border = valid prompt area\n"
         status_text += f"Image 2 status: {aug_status}\n"
         status_text += f"Total clicks: {len(_session().correspondence_points)}\n"
         status_text += f"Image 1 points: {len(img1_points)}\n"
@@ -1801,20 +1728,15 @@ def clear_correspondences():
 
     if _session()["current_image_pair"][0] is not None:
         aug_status = " [FLIPPED 180°]" if _session()["image_augmented"] else ""
-        debug_log(
-            "Cleared correspondences, returning original images with crop overlay"
-        )
+        debug_log("Cleared correspondences, returning unmarked images")
 
-        # Add crop region overlay
-        img1_display = add_crop_region_overlay(_session()["current_image_pair"][0])
-        img2_display = add_crop_region_overlay(_session()["current_image_pair"][1])
+        img1_display = prepare_display_image(_session()["current_image_pair"][0])
+        img2_display = prepare_display_image(_session()["current_image_pair"][1])
 
         return (
             img1_display,
             img2_display,
-            f"Cleared all correspondence points.\n"
-            f"⚠️ Gray overlay = invalid prompt region, Orange border = valid area\n"
-            f"Image 2: {aug_status}",
+            f"Cleared all correspondence points.\nImage 2: {aug_status}",
         )
     else:
         return None, None, "No images loaded."
@@ -2962,8 +2884,8 @@ def load_examples(manifest_path):
     for record in records:
         for key in ("image1", "image2"):
             record[key] = str((manifest_path.parent / record[key]).resolve())
-            if not Path(record[key]).is_file():
-                raise FileNotFoundError(record[key])
+            # Decode once at startup; reopening files per selection is slow on network disks.
+            EXAMPLE_IMAGES[record[key]] = read_input_image(record[key])
     return records
 
 
@@ -3057,37 +2979,51 @@ def create_interface(
         gr.Markdown(
             "# Click3R\nChoose an example or upload two images. Reconstruct first, then click matching points in the two images and reconstruct again. Matching colors identify each correspondence."
         )
-        with gr.Row():
+        with gr.Row(equal_height=True):
             example_picker = gr.Dropdown(
                 choices=[(e["title"], e["id"]) for e in examples],
                 label="Example pair",
                 value=examples[0]["id"] if examples else None,
             )
+            files = gr.File(
+                label="Upload your image pair",
+                file_count="multiple",
+                file_types=["image"],
+                type="filepath",
+            )
+        with gr.Row():
             suggested_button = gr.Button("Add suggested clicks")
-        files = gr.File(
-            label="Upload your image pair",
-            file_count="multiple",
-            file_types=["image"],
-            type="filepath",
-        )
         with gr.Row():
             left = gr.Image(label="Image 1", type="pil", interactive=False)
             right = gr.Image(label="Image 2", type="pil", interactive=False)
-        status = gr.Textbox(label="Correspondences", interactive=False, lines=4)
+        status = gr.Textbox(
+            label="Correspondences", interactive=False, lines=4, visible=False
+        )
         with gr.Row():
             clear = gr.Button("Clear clicks")
             run = gr.Button("Reconstruct", variant="primary")
         with gr.Accordion("Display settings", open=False):
             confidence = gr.Slider(0, 99, value=10, label="Confidence percentile")
             camera_size = gr.Slider(0.05, 0.5, value=0.2, label="Camera size")
+            point_size_control()
             pointcloud = gr.Checkbox(value=True, label="Point cloud")
             overlay = gr.Checkbox(value=True, label="Show clicks in 3D")
+            show_info = gr.Checkbox(value=False, label="Show information panels")
         with gr.Row():
-            original = gr.Model3D(
-                label="DUSt3R", height=560, visible=original_model is not None
+            original = ReconstructionViewer(
+                label="DUSt3R",
+                visible=original_model is not None,
             )
-            prompted = gr.Model3D(label="Click3R", height=560)
-        results = gr.Textbox(label="Reconstruction", interactive=False, lines=4)
+            prompted = ReconstructionViewer(label="Click3R")
+        results = gr.Textbox(
+            label="Reconstruction", interactive=False, lines=4, visible=False
+        )
+        show_info.change(
+            lambda visible: (gr.update(visible=visible), gr.update(visible=visible)),
+            [show_info],
+            [status, results],
+            queue=False,
+        )
         outputs = [left, right, status, state]
         edit_queue = dict(concurrency_limit=1, concurrency_id="session_edits")
         # Only user changes count: an upload clears the picker without reloading.
@@ -3131,7 +3067,11 @@ def main():
         "--examples", default=str(Path(REPO_ROOT) / "assets/examples/manifest.json")
     )
     parser.add_argument("--server-name", default="127.0.0.1")
-    parser.add_argument("--server-port", type=int, default=7860)
+    parser.add_argument(
+        "--server-port",
+        type=int,
+        help="Default: the first free port from 7860",
+    )
     parser.add_argument("--share", action="store_true")
     parser.add_argument("--debug", action="store_true")
     args = parser.parse_args()

click3r/demo/display.py

@@ -0,0 +1,124 @@
+"""Reconstruction viewers and display controls for the interactive demo."""
+
+from functools import lru_cache
+import json
+from pathlib import Path
+import re
+
+import gradio as gr
+from gradio.data_classes import FileData
+
+DEFAULT_POINT_SIZE = 5  # Pixels; size 1 leaves visible gaps between points.
+
+
+@lru_cache(maxsize=1)
+def viewer_javascript():
+    """Use the Babylon viewer distributed with the pinned Gradio installation."""
+    assets = Path(gr.__file__).parent / "templates/frontend/assets"
+    library = next(
+        asset
+        for asset in assets.glob("lib-*.js")
+        if "CreateViewerForCanvas" in asset.read_text()
+    )
+    dependencies = re.findall(r'from["\']\./([^"\']+\.js)["\']', library.read_text())
+    return (
+        Path(__file__)
+        .with_name("viewer.js")
+        .read_text()
+        .replace("__VIEWER_LIBRARY__", json.dumps(library.name))
+        .replace("__VIEWER_DEPENDENCIES__", json.dumps(dependencies))
+        .replace("__DEFAULT_POINT_SIZE__", json.dumps(DEFAULT_POINT_SIZE))
+    )
+
+
+class ReconstructionViewer(gr.HTML):
+    """A downloadable GLB viewer with explicit WebGL point-size support.
+
+    Babylon's default engine selection can choose WebGPU, whose point primitives
+    have fixed size. Use its public viewer API with WebGL and retain Gradio's
+    FileData processing and the framing metadata embedded in the GLB.
+    """
+
+    data_model = FileData
+
+    def __init__(self, *, label, visible=True, **props):
+        super().__init__(
+            value=None,
+            label=label,
+            visible=visible,
+            scale=1,
+            min_width=160,
+            elem_classes="click3r-reconstruction",
+            html_template="""
+                <div class="viewer">
+                    <div class="toolbar">
+                        <span class="title">${label}</span>
+                        <button class="reset" type="button" aria-label="Reset view">Reset view</button>
+                        <a class="download" aria-label="Download reconstruction" download>Download</a>
+                        <button class="fullscreen" type="button" aria-label="Fullscreen">Fullscreen</button>
+                    </div>
+                    <canvas aria-label="${label} reconstruction"></canvas>
+                    <div class="notice" role="status">Run reconstruction to view the scene.</div>
+                </div>
+            """,
+            css_template="""
+                .viewer { position: relative; height: 560px; overflow: hidden;
+                    border: 1px solid var(--border-color-primary);
+                    border-radius: var(--block-radius); background: white; }
+                .viewer:fullscreen { height: 100vh; }
+                canvas { display: block; width: 100%; height: 100%; touch-action: none; }
+                .toolbar { position: absolute; top: 0; left: 0; right: 0; z-index: 1;
+                    display: flex; align-items: center; gap: 8px; padding: 5px 8px;
+                    background: var(--background-fill-primary); font-size: 12px; }
+                .title { flex: 1; }
+                button, a { cursor: pointer; color: var(--body-text-color);
+                    background: transparent; border: 0; padding: 2px;
+                    font: inherit; text-decoration: none; }
+                a:not([href]) { pointer-events: none; opacity: 0.5; }
+                .notice { position: absolute; inset: 40px 16px 16px; display: grid;
+                    place-items: center; text-align: center; pointer-events: none;
+                    color: var(--body-text-color-subdued); }
+                .notice[hidden] { display: none; }
+            """,
+            js_on_load=viewer_javascript(),
+            **props,
+        )
+
+    def preprocess(self, payload):
+        return payload.path if payload is not None else None
+
+    def postprocess(self, value):
+        if value is None:
+            return None
+        return FileData(path=str(value), orig_name=Path(value).name)
+
+    def api_info(self):
+        return gr.components.Component.api_info(self)
+
+
+def point_size_control():
+    """Update both WebGL viewers without rerunning reconstruction."""
+    slider = gr.Slider(
+        1,
+        10,
+        value=DEFAULT_POINT_SIZE,
+        step=0.5,
+        label="Point size (px)",
+        info="Larger points fill visual gaps in both 3D views.",
+    )
+    controller = gr.HTML(
+        value=DEFAULT_POINT_SIZE,
+        html_template="",
+        js_on_load="""
+            function update() {
+                document.getElementById("click3r-point-size").dataset.size = props.value;
+                document.dispatchEvent(new CustomEvent("click3r:point-size", {detail: props.value}));
+            }
+            watch("value", update);
+            update();
+        """,
+        elem_id="click3r-point-size",
+        visible="hidden",
+    )
+    slider.input(None, [slider], [controller], js="(size) => size", queue=False)
+    return slider

click3r/demo/viewer.js

@@ -0,0 +1,131 @@
+// WebGPU point primitives have fixed size. Request WebGL through Babylon's
+// public viewer API so the point-size control works in Chromium and Arc too.
+const root = (window.gradio_config.root || location.origin).replace(/\/$/, "");
+// Fetch dependencies together rather than discovering them over serial requests.
+const preloaded = new Set(Array.from(
+    document.querySelectorAll('link[rel="modulepreload"]'), link => link.href,
+));
+for (const name of __VIEWER_DEPENDENCIES__) {
+    const url = `${root}/assets/${name}`;
+    if (preloaded.has(url)) continue;
+    const link = document.createElement("link");
+    link.rel = "modulepreload";
+    link.href = url;
+    document.head.appendChild(link);
+    preloaded.add(url);
+}
+const library = import(`${root}/assets/` + __VIEWER_LIBRARY__);
+const canvas = element.querySelector("canvas");
+const notice = element.querySelector(".notice");
+const download = element.querySelector(".download");
+let details;
+let pointSize = Number(document.getElementById("click3r-point-size")?.dataset.size || __DEFAULT_POINT_SIZE__);
+let version = 0;
+let loadedURL;
+let initialCamera;
+let disposed = false;
+
+function applyPointSize() {
+    if (!details) return;
+    for (const material of details.scene.materials) {
+        if (material.pointsCloud) material.pointSize = pointSize;
+    }
+    // Schedule a complete frame through the viewer, including begin/end-frame.
+    details.markSceneMutated();
+}
+
+function applyCamera(position) {
+    if (!details || !position) return;
+    const camera = details.camera;
+    if (position[0] != null) camera.alpha = position[0] * Math.PI / 180;
+    if (position[1] != null) camera.beta = position[1] * Math.PI / 180;
+    if (position[2] != null) camera.radius = position[2];
+    // Match Gradio's orbit controls.
+    camera.lowerRadiusLimit = 0.1;
+    camera.wheelPrecision = 250 / camera.radius;
+    camera.panningSensibility = 10000 / camera.radius;
+    camera.storeState();
+    details.markSceneMutated();
+}
+
+async function cameraPosition(blob) {
+    const header = new DataView(await blob.slice(0, 20).arrayBuffer());
+    if (header.getUint32(0, true) !== 0x46546c67) return null;
+    const length = header.getUint32(12, true);
+    const gltf = JSON.parse(await blob.slice(20, 20 + length).text());
+    return gltf.scenes?.[gltf.scene || 0]?.extras?.camera_position;
+}
+
+// Initialize while the user selects images; avoid first-use renderer startup.
+const ready = library.then(async ({CreateViewerForCanvas}) => {
+    const viewer = await CreateViewerForCanvas(canvas, {
+        engine: "WebGL",
+        clearColor: [1, 1, 1, 1],
+        useRightHandedSystem: true,
+        cameraAutoOrbit: {enabled: false},
+        onInitialized: value => { details = value; },
+    });
+    return viewer;
+});
+
+async function showModel() {
+    const current = ++version;
+    const file = props.value;
+    if (!file) {
+        canvas.style.visibility = "hidden";
+        notice.hidden = false;
+        notice.textContent = "Run reconstruction to view the scene.";
+        download.removeAttribute("href");
+        return;
+    }
+    const url = file.url;
+    try {
+        const viewer = await ready;
+        if (disposed || current !== version) return;
+        if (url !== loadedURL) {
+            notice.hidden = false;
+            notice.textContent = "Loading reconstruction…";
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`Model download failed: ${response.status}`);
+            const blob = await response.blob();
+            if (disposed || current !== version) return;
+            initialCamera = await cameraPosition(blob);
+            await viewer.loadModel(new File([blob], file.orig_name || "reconstruction.glb"));
+            if (disposed || current !== version) return;
+            loadedURL = url;
+        }
+        canvas.style.visibility = "visible";
+        notice.hidden = true;
+        download.href = url;
+        download.download = file.orig_name || "reconstruction.glb";
+        applyPointSize();
+        applyCamera(initialCamera);
+    } catch (error) {
+        notice.hidden = false;
+        notice.textContent = "The 3D view could not load. Please try reconstructing again.";
+        console.error("Reconstruction viewer:", error);
+    }
+}
+
+function updatePointSize(event) {
+    pointSize = Number(event.detail);
+    applyPointSize();
+}
+document.addEventListener("click3r:point-size", updatePointSize);
+element.querySelector(".reset").addEventListener("click", () => {
+    details?.camera.restoreState();
+    details?.markSceneMutated();
+});
+element.querySelector(".fullscreen").addEventListener("click", () => {
+    if (document.fullscreenElement) void document.exitFullscreen();
+    else void element.querySelector(".viewer").requestFullscreen();
+});
+watch("value", () => { void showModel(); });
+void showModel();
+const cleanup = setInterval(() => {
+    if (element.isConnected) return;
+    disposed = true;
+    clearInterval(cleanup);
+    document.removeEventListener("click3r:point-size", updatePointSize);
+    void ready.then(viewer => { viewer.dispose(); });
+}, 1000);