Unified image input: single Gallery for 1+ images, no blending

app.py

@@ -104,205 +104,42 @@ DEFAULT_STEP = 3
 
 css = """
 /* Overwrite Gradio Default Style */
-.stepper-wrapper {
-    padding: 0;
-}
-
-.stepper-container {
-    padding: 0;
-    align-items: center;
-}
-
-.step-button {
-    flex-direction: row;
-}
-
-.step-connector {
-    transform: none;
-}
-
-.step-number {
-    width: 16px;
-    height: 16px;
-}
-
-.step-label {
-    position: relative;
-    bottom: 0;
-}
-
-.wrap.center.full {
-    inset: 0;
-    height: 100%;
-}
-
-.wrap.center.full.translucent {
-    background: var(--block-background-fill);
-}
-
-.meta-text-center {
-    display: block !important;
-    position: absolute !important;
-    top: unset !important;
-    bottom: 0 !important;
-    right: 0 !important;
-    transform: unset !important;
-}
+.stepper-wrapper { padding: 0; }
+.stepper-container { padding: 0; align-items: center; }
+.step-button { flex-direction: row; }
+.step-connector { transform: none; }
+.step-number { width: 16px; height: 16px; }
+.step-label { position: relative; bottom: 0; }
+.wrap.center.full { inset: 0; height: 100%; }
+.wrap.center.full.translucent { background: var(--block-background-fill); }
+.meta-text-center { display: block !important; position: absolute !important; top: unset !important; bottom: 0 !important; right: 0 !important; transform: unset !important; }
 
 /* Previewer */
-.previewer-container {
-    position: relative;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    width: 100%;
-    height: 722px;
-    margin: 0 auto;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.previewer-container .tips-icon {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 10;
-    border-radius: 10px;
-    color: #fff;
-    background-color: var(--color-accent);
-    padding: 3px 6px;
-    user-select: none;
-}
-
-.previewer-container .tips-text {
-    position: absolute;
-    right: 10px;
-    top: 50px;
-    color: #fff;
-    background-color: var(--color-accent);
-    border-radius: 10px;
-    padding: 6px;
-    text-align: left;
-    max-width: 300px;
-    z-index: 10;
-    transition: all 0.3s;
-    opacity: 0%;
-    user-select: none;
-}
-
-.previewer-container .tips-text p {
-    font-size: 14px;
-    line-height: 1.2;
-}
-
-.tips-icon:hover + .tips-text {
-    display: block;
-    opacity: 100%;
-}
-
-/* Row 1: Display Modes */
-.previewer-container .mode-row {
-    width: 100%;
-    display: flex;
-    gap: 8px;
-    justify-content: center;
-    margin-bottom: 20px;
-    flex-wrap: wrap;
-}
-.previewer-container .mode-btn {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    opacity: 0.5;
-    transition: all 0.2s;
-    border: 2px solid #ddd;
-    object-fit: cover;
-}
+.previewer-container { position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; width: 100%; height: 722px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.previewer-container .tips-icon { position: absolute; right: 10px; top: 10px; z-index: 10; border-radius: 10px; color: #fff; background-color: var(--color-accent); padding: 3px 6px; user-select: none; }
+.previewer-container .tips-text { position: absolute; right: 10px; top: 50px; color: #fff; background-color: var(--color-accent); border-radius: 10px; padding: 6px; text-align: left; max-width: 300px; z-index: 10; transition: all 0.3s; opacity: 0%; user-select: none; }
+.previewer-container .tips-text p { font-size: 14px; line-height: 1.2; }
+.tips-icon:hover + .tips-text { display: block; opacity: 100%; }
+.previewer-container .mode-row { width: 100%; display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
+.previewer-container .mode-btn { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; opacity: 0.5; transition: all 0.2s; border: 2px solid #ddd; object-fit: cover; }
 .previewer-container .mode-btn:hover { opacity: 0.9; transform: scale(1.1); }
-.previewer-container .mode-btn.active {
-    opacity: 1;
-    border-color: var(--color-accent);
-    transform: scale(1.1);
-}
-
-/* Row 2: Display Image */
-.previewer-container .display-row {
-    margin-bottom: 20px;
-    min-height: 400px;
-    width: 100%;
-    flex-grow: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.previewer-container .previewer-main-image {
-    max-width: 100%;
-    max-height: 100%;
-    flex-grow: 1;
-    object-fit: contain;
-    display: none;
-}
-.previewer-container .previewer-main-image.visible {
-    display: block;
-}
-
-/* Row 3: Custom HTML Slider */
-.previewer-container .slider-row {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    padding: 0 10px;
-}
-
-.previewer-container input[type=range] {
-    -webkit-appearance: none;
-    width: 100%;
-    max-width: 400px;
-    background: transparent;
-}
-.previewer-container input[type=range]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    cursor: pointer;
-    background: #ddd;
-    border-radius: 5px;
-}
-.previewer-container input[type=range]::-webkit-slider-thumb {
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    background: var(--color-accent);
-    cursor: pointer;
-    -webkit-appearance: none;
-    margin-top: -6px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-    transition: transform 0.1s;
-}
-.previewer-container input[type=range]::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
-}
-
-/* Overwrite Previewer Block Style */
-.gradio-container .padded:has(.previewer-container) {
-    padding: 0 !important;
-}
-
-.gradio-container:has(.previewer-container) [data-testid="block-label"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
+.previewer-container .mode-btn.active { opacity: 1; border-color: var(--color-accent); transform: scale(1.1); }
+.previewer-container .display-row { margin-bottom: 20px; min-height: 400px; width: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center; }
+.previewer-container .previewer-main-image { max-width: 100%; max-height: 100%; flex-grow: 1; object-fit: contain; display: none; }
+.previewer-container .previewer-main-image.visible { display: block; }
+.previewer-container .slider-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 10px; }
+.previewer-container input[type=range] { -webkit-appearance: none; width: 100%; max-width: 400px; background: transparent; }
+.previewer-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: #ddd; border-radius: 5px; }
+.previewer-container input[type=range]::-webkit-slider-thumb { height: 20px; width: 20px; border-radius: 50%; background: var(--color-accent); cursor: pointer; -webkit-appearance: none; margin-top: -6px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.1s; }
+.previewer-container input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+.gradio-container .padded:has(.previewer-container) { padding: 0 !important; }
+.gradio-container:has(.previewer-container) [data-testid="block-label"] { position: absolute; top: 0; left: 0; }
 """
 
 
 head = """
 <script>
     function refreshView(mode, step) {
-        // 1. Find current mode and step
         const allImgs = document.querySelectorAll('.previewer-main-image');
         for (let i = 0; i < allImgs.length; i++) {
             const img = allImgs[i];
@@ -314,46 +151,26 @@ head = """
                 break;
             }
         }
-
-        // 2. Hide ALL images
-        // We select all elements with class 'previewer-main-image'
         allImgs.forEach(img => img.classList.remove('visible'));
-
-        // 3. Construct the specific ID for the current state
-        // Format: view-m{mode}-s{step}
         const targetId = 'view-m' + mode + '-s' + step;
         const targetImg = document.getElementById(targetId);
-
-        // 4. Show ONLY the target
-        if (targetImg) {
-            targetImg.classList.add('visible');
-        }
-
-        // 5. Update Button Highlights
+        if (targetImg) { targetImg.classList.add('visible'); }
         const allBtns = document.querySelectorAll('.mode-btn');
         allBtns.forEach((btn, idx) => {
             if (idx === mode) btn.classList.add('active');
             else btn.classList.remove('active');
         });
     }
-
-    // --- Action: Switch Mode ---
-    function selectMode(mode) {
-        refreshView(mode, -1);
-    }
-
-    // --- Action: Slider Change ---
-    function onSliderChange(val) {
-        refreshView(-1, parseInt(val));
-    }
+    function selectMode(mode) { refreshView(mode, -1); }
+    function onSliderChange(val) { refreshView(-1, parseInt(val)); }
 </script>
 """
 
 
-empty_html = f"""
+empty_html = """
 <div class="previewer-container">
-    <svg style=" opacity: .5; height: var(--size-5); color: var(--body-text-color);"
-    xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+    <svg style="opacity: .5; height: var(--size-5); color: var(--body-text-color);"
+    xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
 </div>
 """
 
@@ -387,10 +204,7 @@ def remove_background(input: Image.Image) -> Image.Image:
 
 
 def preprocess_image(input: Image.Image) -> Image.Image:
-    """
-    Preprocess the input image.
-    """
-    # if has alpha channel, use it directly; otherwise, remove background
+    """Preprocess a single input image."""
     has_alpha = False
     if input.mode == 'RGBA':
         alpha = np.array(input)[:, :, 3]
@@ -412,7 +226,7 @@ def preprocess_image(input: Image.Image) -> Image.Image:
     size = max(bbox[2] - bbox[0], bbox[3] - bbox[1])
     size = int(size * 1)
     bbox = center[0] - size // 2, center[1] - size // 2, center[0] + size // 2, center[1] + size // 2
-    output = output.crop(bbox)  # type: ignore
+    output = output.crop(bbox)
     output = np.array(output).astype(np.float32) / 255
     output = output[:, :, :3] * output[:, :, 3:4]
     output = Image.fromarray((output * 255).astype(np.uint8))
@@ -420,13 +234,12 @@ def preprocess_image(input: Image.Image) -> Image.Image:
 
 
 def preprocess_images(images: List[Tuple[Image.Image, str]]) -> List[Image.Image]:
-    """
-    Preprocess a list of input images for multi-image conditioning.
-    Uses parallel processing for faster background removal.
-    """
-    images = [image[0] for image in images]
-    with ThreadPoolExecutor(max_workers=min(4, len(images))) as executor:
-        processed_images = list(executor.map(preprocess_image, images))
+    """Preprocess a list of input images. Uses parallel processing."""
+    if not images:
+        return []
+    imgs = [img[0] if isinstance(img, tuple) else img for img in images]
+    with ThreadPoolExecutor(max_workers=min(4, len(imgs))) as executor:
+        processed_images = list(executor.map(preprocess_image, imgs))
     return processed_images
 
 
@@ -451,47 +264,40 @@ def unpack_state(state: dict):
 
 
 def get_seed(randomize_seed: bool, seed: int) -> int:
-    """
-    Get the random seed.
-    """
     return np.random.randint(0, MAX_SEED) if randomize_seed else seed
 
 
-def prepare_multi_example() -> List[Image.Image]:
-    """
-    Prepare multi-image examples for the gallery.
-    """
-    multi_case = list(set([i.split('_')[0] for i in os.listdir("assets/example_multi_image")]))
+def prepare_examples() -> List[List[str]]:
+    """Prepare examples as lists of image paths (not concatenated)."""
+    example_dir = "assets/example_multi_image"
+    if not os.path.exists(example_dir):
+        return []
+    files = os.listdir(example_dir)
+    cases = list(set([f.split('_')[0] for f in files if '_' in f and f.endswith('.png')]))
+    examples = []
+    for case in sorted(cases):
+        case_images = []
+        for i in range(1, 10):  # Support up to 9 images per example
+            img_path = f'{example_dir}/{case}_{i}.png'
+            if os.path.exists(img_path):
+                case_images.append(img_path)
+        if case_images:
+            examples.append(case_images)
+    return examples
+
+
+def load_example(example_paths: List[str]) -> List[Image.Image]:
+    """Load example images from paths."""
     images = []
-    for case in multi_case:
-        _images = []
-        for i in range(1, 4):
-            img = Image.open(f'assets/example_multi_image/{case}_{i}.png')
-            W, H = img.size
-            img = img.resize((int(W / H * 512), 512))
-            _images.append(np.array(img))
-        images.append(Image.fromarray(np.concatenate(_images, axis=1)))
+    for path in example_paths:
+        img = Image.open(path)
+        images.append(img)
     return images
 
 
-def split_image(image: Image.Image) -> List[Image.Image]:
-    """
-    Split a concatenated image into multiple views.
-    """
-    image = np.array(image)
-    alpha = image[..., 3]
-    alpha = np.any(alpha > 0, axis=0)
-    start_pos = np.where(~alpha[:-1] & alpha[1:])[0].tolist()
-    end_pos = np.where(alpha[:-1] & ~alpha[1:])[0].tolist()
-    images = []
-    for s, e in zip(start_pos, end_pos):
-        images.append(Image.fromarray(image[:, s:e+1]))
-    return [preprocess_image(image) for image in images]
-
-
 @spaces.GPU(duration=120)
 def image_to_3d(
-    image: Image.Image,
+    images: List[Tuple[Image.Image, str]],
     seed: int,
     resolution: str,
     ss_guidance_strength: float,
@@ -506,19 +312,24 @@ def image_to_3d(
     tex_slat_guidance_rescale: float,
     tex_slat_sampling_steps: int,
     tex_slat_rescale_t: float,
+    multiimage_algo: Literal["multidiffusion", "stochastic"],
     req: gr.Request,
     progress=gr.Progress(track_tqdm=True),
-    multiimages: List[Tuple[Image.Image, str]] = None,
-    is_multiimage: bool = False,
-    multiimage_algo: Literal["multidiffusion", "stochastic"] = "stochastic",
 ) -> str:
     # Initialize pipeline on first call
     _initialize_pipeline()
 
+    # Extract images from gallery format
+    if not images:
+        raise gr.Error("Please upload at least one image")
+
+    imgs = [img[0] if isinstance(img, tuple) else img for img in images]
+
     # --- Sampling ---
-    if not is_multiimage:
+    if len(imgs) == 1:
+        # Single image mode
         outputs, latents = pipeline.run(
-            image,
+            imgs[0],
             seed=seed,
             preprocess_image=False,
             sparse_structure_sampler_params={
@@ -547,8 +358,9 @@ def image_to_3d(
             return_latent=True,
         )
     else:
+        # Multi-image mode
         outputs, latents = pipeline.run_multi_image(
-            [image[0] for image in multiimages],
+            imgs,
             seed=seed,
             preprocess_image=False,
             sparse_structure_sampler_params={
@@ -577,29 +389,24 @@ def image_to_3d(
             return_latent=True,
             mode=multiimage_algo,
         )
+
     mesh = outputs[0]
-    mesh.simplify(16777216)  # nvdiffrast limit
-    images = render_utils.render_snapshot(mesh, resolution=1024, r=2, fov=36, nviews=STEPS, envmap=envmap)
+    mesh.simplify(16777216)
+    render_images = render_utils.render_snapshot(mesh, resolution=1024, r=2, fov=36, nviews=STEPS, envmap=envmap)
     state = pack_state(latents)
     torch.cuda.empty_cache()
 
     # --- HTML Construction ---
-    # The Stack of 48 Images - encode in parallel for speed
     def encode_preview_image(args):
         m_idx, s_idx, render_key = args
-        img_base64 = image_to_base64(Image.fromarray(images[render_key][s_idx]))
+        img_base64 = image_to_base64(Image.fromarray(render_images[render_key][s_idx]))
         return (m_idx, s_idx, img_base64)
 
-    encode_tasks = [
-        (m_idx, s_idx, mode['render_key'])
-        for m_idx, mode in enumerate(MODES)
-        for s_idx in range(STEPS)
-    ]
+    encode_tasks = [(m_idx, s_idx, mode['render_key']) for m_idx, mode in enumerate(MODES) for s_idx in range(STEPS)]
 
     with ThreadPoolExecutor(max_workers=8) as executor:
         encoded_results = list(executor.map(encode_preview_image, encode_tasks))
 
-    # Build HTML from encoded results
     encoded_map = {(m, s): b64 for m, s, b64 in encoded_results}
     images_html = ""
     for m_idx, mode in enumerate(MODES):
@@ -608,54 +415,29 @@ def image_to_3d(
             is_visible = (m_idx == DEFAULT_MODE and s_idx == DEFAULT_STEP)
             vis_class = "visible" if is_visible else ""
             img_base64 = encoded_map[(m_idx, s_idx)]
+            images_html += f'<img id="{unique_id}" class="previewer-main-image {vis_class}" src="{img_base64}" loading="eager">'
 
-            images_html += f"""
-                <img id="{unique_id}"
-                     class="previewer-main-image {vis_class}"
-                     src="{img_base64}"
-                     loading="eager">
-            """
-
-    # Button Row HTML
     btns_html = ""
     for idx, mode in enumerate(MODES):
         active_class = "active" if idx == DEFAULT_MODE else ""
-        # Note: onclick calls the JS function defined in Head
-        btns_html += f"""
-            <img src="{mode['icon_base64']}"
-                 class="mode-btn {active_class}"
-                 onclick="selectMode({idx})"
-                 title="{mode['name']}">
-        """
-
-    # Assemble the full component
+        btns_html += f'<img src="{mode["icon_base64"]}" class="mode-btn {active_class}" onclick="selectMode({idx})" title="{mode["name"]}">'
+
     full_html = f"""
     <div class="previewer-container">
         <div class="tips-wrapper">
-            <div class="tips-icon">💡Tips</div>
+            <div class="tips-icon">Tips</div>
             <div class="tips-text">
-                <p>● <b>Render Mode</b> - Click on the circular buttons to switch between different render modes.</p>
-                <p>● <b>View Angle</b> - Drag the slider to change the view angle.</p>
+                <p>Render Mode - Click buttons to switch render modes.</p>
+                <p>View Angle - Drag slider to change view.</p>
             </div>
         </div>
-
-        <!-- Row 1: Viewport containing 48 static <img> tags -->
-        <div class="display-row">
-            {images_html}
-        </div>
-
-        <!-- Row 2 -->
-        <div class="mode-row" id="btn-group">
-            {btns_html}
-        </div>
-
-        <!-- Row 3: Slider -->
+        <div class="display-row">{images_html}</div>
+        <div class="mode-row" id="btn-group">{btns_html}</div>
         <div class="slider-row">
             <input type="range" id="custom-slider" min="0" max="{STEPS - 1}" value="{DEFAULT_STEP}" step="1" oninput="onSliderChange(this.value)">
         </div>
     </div>
     """
-
     return state, full_html
 
 
@@ -667,24 +449,12 @@ def extract_glb(
     req: gr.Request,
     progress=gr.Progress(track_tqdm=True),
 ) -> Tuple[str, str]:
-    """
-    Extract a GLB file from the 3D model.
-
-    Args:
-        state (dict): The state of the generated 3D model.
-        decimation_target (int): The target face count for decimation.
-        texture_size (int): The texture resolution.
-
-    Returns:
-        str: The path to the extracted GLB file.
-    """
-    # Initialize pipeline on first call
     _initialize_pipeline()
 
     user_dir = os.path.join(TMP_DIR, str(req.session_hash))
     shape_slat, tex_slat, res = unpack_state(state)
     mesh = pipeline.decode_latent(shape_slat, tex_slat, res)[0]
-    mesh.simplify(16777216)  # nvdiffrast limit
+    mesh.simplify(16777216)
     glb = o_voxel.postprocess.to_glb(
         vertices=mesh.vertices,
         faces=mesh.faces,
@@ -711,22 +481,22 @@ def extract_glb(
 
 with gr.Blocks(delete_cache=(600, 600)) as demo:
     gr.Markdown("""
-    ## Image to 3D Asset with [TRELLIS.2](https://microsoft.github.io/TRELLIS.2)
-    * Upload an image (preferably with an alpha-masked foreground object) and click Generate to create a 3D asset.
-    * Click Extract GLB to export and download the generated GLB file if you're satisfied with the result. Otherwise, try another time.
+    ## Multi-View Image to 3D with [TRELLIS.2](https://microsoft.github.io/TRELLIS.2)
+    Upload one or more images of an object and click Generate to create a 3D asset.
+    Multiple views from different angles will produce better results.
     """)
 
     with gr.Row():
         with gr.Column(scale=1, min_width=360):
-            with gr.Tabs() as input_tabs:
-                with gr.Tab(label="Single Image", id=0) as single_image_input_tab:
-                    image_prompt = gr.Image(label="Image Prompt", format="png", image_mode="RGBA", type="pil", height=400)
-                with gr.Tab(label="Multiple Images", id=1) as multiimage_input_tab:
-                    multiimage_prompt = gr.Gallery(label="Image Prompt", format="png", type="pil", height=400, columns=3)
-                    gr.Markdown("""
-                        Input different views of the object in separate images.
-                        *NOTE: this is an experimental algorithm without training a specialized model. It may not produce the best results for all images, especially those having different poses or inconsistent details.*
-                    """)
+            image_prompt = gr.Gallery(
+                label="Input Images (upload 1 or more views)",
+                format="png",
+                type="pil",
+                height=400,
+                columns=3,
+                object_fit="contain"
+            )
+            gr.Markdown("*Upload multiple views of the same object for better 3D reconstruction.*")
 
             resolution = gr.Radio(["512", "1024", "1536"], label="Resolution", value="1024")
             seed = gr.Slider(0, MAX_SEED, label="Seed", value=0, step=1)
@@ -734,7 +504,7 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
             decimation_target = gr.Slider(100000, 500000, label="Decimation Target", value=300000, step=10000)
             texture_size = gr.Slider(1024, 4096, label="Texture Size", value=2048, step=1024)
 
-            generate_btn = gr.Button("Generate")
+            generate_btn = gr.Button("Generate", variant="primary")
 
             with gr.Accordion(label="Advanced Settings", open=False):
                 gr.Markdown("Stage 1: Sparse Structure Generation")
@@ -765,51 +535,34 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
                 with gr.Step("Extract", id=1):
                     glb_output = gr.Model3D(label="Extracted GLB", height=724, show_label=True, display_mode="solid", clear_color=(0.25, 0.25, 0.25, 1.0))
                     download_btn = gr.DownloadButton(label="Download GLB")
-            gr.Markdown("*We are actively working on improving the speed of GLB extraction. Currently, it may take half a minute or more and face count is limited.*")
-
-        with gr.Column(scale=1, min_width=172) as multiimage_example:
-            examples_multi = gr.Examples(
-                examples=prepare_multi_example(),
-                label="Multi Image Examples",
-                inputs=[image_prompt],
-                fn=split_image,
-                outputs=[multiimage_prompt],
-                run_on_click=True,
-                examples_per_page=8,
-            )
+            gr.Markdown("*GLB extraction may take 30+ seconds.*")
+
+        with gr.Column(scale=1, min_width=200):
+            gr.Markdown("### Examples")
+            # Create example buttons that load images into gallery
+            example_data = prepare_examples()
+            for i, example_paths in enumerate(example_data[:12]):  # Limit to 12 examples
+                case_name = os.path.basename(example_paths[0]).split('_')[0]
+                btn = gr.Button(f"{case_name} ({len(example_paths)} views)", size="sm")
+                btn.click(
+                    fn=lambda paths=example_paths: load_example(paths),
+                    outputs=[image_prompt]
+                )
 
-    is_multiimage = gr.State(False)
     output_buf = gr.State()
 
-
     # Handlers
     demo.load(start_session)
     demo.unload(end_session)
 
-    single_image_input_tab.select(
-        lambda: False,
-        outputs=[is_multiimage]
-    )
-    multiimage_input_tab.select(
-        lambda: True,
-        outputs=[is_multiimage]
-    )
-
     image_prompt.upload(
-        preprocess_image,
+        preprocess_images,
         inputs=[image_prompt],
         outputs=[image_prompt],
     )
-    multiimage_prompt.upload(
-        preprocess_images,
-        inputs=[multiimage_prompt],
-        outputs=[multiimage_prompt],
-    )
 
     generate_btn.click(
-        get_seed,
-        inputs=[randomize_seed, seed],
-        outputs=[seed],
+        get_seed, inputs=[randomize_seed, seed], outputs=[seed],
     ).then(
         lambda: gr.Walkthrough(selected=0), outputs=walkthrough
     ).then(
@@ -819,7 +572,7 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
             ss_guidance_strength, ss_guidance_rescale, ss_sampling_steps, ss_rescale_t,
             shape_slat_guidance_strength, shape_slat_guidance_rescale, shape_slat_sampling_steps, shape_slat_rescale_t,
             tex_slat_guidance_strength, tex_slat_guidance_rescale, tex_slat_sampling_steps, tex_slat_rescale_t,
-            multiimage_prompt, is_multiimage, multiimage_algo
+            multiimage_algo
         ],
         outputs=[output_buf, preview_output],
     )
@@ -833,12 +586,9 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
     )
 
 
-# Launch the Gradio app
 if __name__ == "__main__":
     os.makedirs(TMP_DIR, exist_ok=True)
 
-    # Construct ui components (CPU-only, no GPU needed)
-    btn_img_base64_strs = {}
     for i in range(len(MODES)):
         icon = Image.open(MODES[i]['icon'])
         MODES[i]['icon_base64'] = image_to_base64(icon)