Upload app.py with huggingface_hub

app.py

@@ -13,89 +13,28 @@ from datetime import datetime
 import shutil
 import cv2
 from typing import *
+import torch
 import numpy as np
 from PIL import Image
 import base64
 import io
 import tempfile
-
-# Lazy imports - will be loaded when GPU is available
-torch = None
-SparseTensor = None
-Trellis2ImageTo3DPipeline = None
-EnvMap = None
-render_utils = None
-o_voxel = None
-
-# Global state - initialized on first GPU call
-pipeline = None
-envmap = None
-_initialized = False
-
-
-def _lazy_import():
-    """Import GPU-dependent modules. Must be called from within a @spaces.GPU function."""
-    global torch, SparseTensor, Trellis2ImageTo3DPipeline, EnvMap, render_utils, o_voxel
-    if torch is None:
-        import torch as _torch
-        torch = _torch
-    if SparseTensor is None:
-        from trellis2.modules.sparse import SparseTensor as _SparseTensor
-        SparseTensor = _SparseTensor
-    if Trellis2ImageTo3DPipeline is None:
-        from trellis2.pipelines import Trellis2ImageTo3DPipeline as _Trellis2ImageTo3DPipeline
-        Trellis2ImageTo3DPipeline = _Trellis2ImageTo3DPipeline
-    if EnvMap is None:
-        from trellis2.renderers import EnvMap as _EnvMap
-        EnvMap = _EnvMap
-    if render_utils is None:
-        from trellis2.utils import render_utils as _render_utils
-        render_utils = _render_utils
-    if o_voxel is None:
-        import o_voxel as _o_voxel
-        o_voxel = _o_voxel
-        # Patch postprocess module with local fix for cumesh.fill_holes() bug
-        import importlib.util
-        _local_pp = os.path.join(os.path.dirname(os.path.abspath(__file__)),
-                                 'o-voxel', 'o_voxel', 'postprocess.py')
-        if os.path.exists(_local_pp):
-            _spec = importlib.util.spec_from_file_location('o_voxel.postprocess', _local_pp)
-            _mod = importlib.util.module_from_spec(_spec)
-            _spec.loader.exec_module(_mod)
-            o_voxel.postprocess = _mod
-            import sys
-            sys.modules['o_voxel.postprocess'] = _mod
-
-
-def _initialize_pipeline():
-    """Initialize the pipeline and environment maps. Must be called from within a @spaces.GPU function."""
-    global pipeline, envmap, _initialized
-    if _initialized:
-        return
-
-    _lazy_import()
-
-    pipeline = Trellis2ImageTo3DPipeline.from_pretrained('microsoft/TRELLIS.2-4B')
-    pipeline.rembg_model = None
-    pipeline.low_vram = False
-    pipeline.cuda()
-
-    envmap = {
-        'forest': EnvMap(torch.tensor(
-            cv2.cvtColor(cv2.imread('assets/hdri/forest.exr', cv2.IMREAD_UNCHANGED), cv2.COLOR_BGR2RGB),
-            dtype=torch.float32, device='cuda'
-        )),
-        'sunset': EnvMap(torch.tensor(
-            cv2.cvtColor(cv2.imread('assets/hdri/sunset.exr', cv2.IMREAD_UNCHANGED), cv2.COLOR_BGR2RGB),
-            dtype=torch.float32, device='cuda'
-        )),
-        'courtyard': EnvMap(torch.tensor(
-            cv2.cvtColor(cv2.imread('assets/hdri/courtyard.exr', cv2.IMREAD_UNCHANGED), cv2.COLOR_BGR2RGB),
-            dtype=torch.float32, device='cuda'
-        )),
-    }
-
-    _initialized = True
+from trellis2.modules.sparse import SparseTensor
+from trellis2.pipelines import Trellis2ImageTo3DPipeline
+from trellis2.renderers import EnvMap
+from trellis2.utils import render_utils
+import o_voxel
+
+# Patch postprocess module with local fix for cumesh.fill_holes() bug
+import importlib.util
+_local_postprocess = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'o-voxel', 'o_voxel', 'postprocess.py')
+if os.path.exists(_local_postprocess):
+    import sys
+    _spec = importlib.util.spec_from_file_location('o_voxel.postprocess', _local_postprocess)
+    _mod = importlib.util.module_from_spec(_spec)
+    _spec.loader.exec_module(_mod)
+    o_voxel.postprocess = _mod
+    sys.modules['o_voxel.postprocess'] = _mod
 
 
 MAX_SEED = np.iinfo(np.int32).max
@@ -114,88 +53,56 @@ DEFAULT_STEP = 3
 
 
 css = """
-/* ColmapView Dark Theme */
-:root {
-    --bg-void: #0a0a0a;
-    --bg-primary: #0f0f0f;
-    --bg-secondary: #161616;
-    --bg-tertiary: #1e1e1e;
-    --bg-input: #1a1a1a;
-    --bg-elevated: #242424;
-    --bg-hover: #262626;
-    --text-primary: #e8e8e8;
-    --text-secondary: #8a8a8a;
-    --text-muted: #5a5a5a;
-    --border-subtle: #222222;
-    --border-color: #2a2a2a;
-    --border-light: #3a3a3a;
-    --accent: #b8b8b8;
-    --accent-hover: #d0d0d0;
-    --accent-dim: rgba(184, 184, 184, 0.12);
-    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
-    --radius: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+/* 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);
 }
 
-/* Global Overrides */
-.gradio-container { background: var(--bg-primary) !important; color: var(--text-primary) !important; font-family: var(--font-sans) !important; }
-.dark { background: var(--bg-primary) !important; }
-body { background: var(--bg-void) !important; color-scheme: dark; }
-
-/* Panels & Blocks */
-.block { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important; }
-.panel { background: var(--bg-secondary) !important; }
-
-/* Inputs */
-input, textarea, select { background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius) !important; }
-input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; outline: none !important; }
-
-/* Buttons */
-.primary { background: var(--accent) !important; color: var(--bg-void) !important; border: none !important; }
-.primary:hover { background: var(--accent-hover) !important; }
-.secondary { background: var(--bg-hover) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
-.secondary:hover { background: var(--bg-tertiary) !important; }
-button { transition: all 0.15s ease-out !important; }
-
-/* Labels & Text */
-label, .label-wrap { color: var(--text-secondary) !important; font-size: 0.875rem !important; }
-.prose { color: var(--text-primary) !important; }
-.prose h2 { color: var(--text-primary) !important; border: none !important; }
-
-/* Sliders */
-input[type="range"] { accent-color: var(--accent) !important; }
-
-/* Gallery */
-.gallery { background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; }
-
-/* Accordion */
-.accordion { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }
-
-/* Scrollbar */
-::-webkit-scrollbar { width: 12px; }
-::-webkit-scrollbar-track { background: var(--bg-secondary); }
-::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 9999px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
-
-/* Gradio Overrides */
-.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; background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; }
-.step-label { position: relative; bottom: 0; color: var(--text-secondary) !important; }
-.wrap.center.full { inset: 0; height: 100%; }
-.wrap.center.full.translucent { background: var(--bg-secondary); }
-.meta-text-center { display: block !important; position: absolute !important; top: unset !important; bottom: 0 !important; right: 0 !important; transform: unset !important; }
+.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: var(--font-sans);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     width: 100%;
     height: 722px;
     margin: 0 auto;
@@ -204,53 +111,148 @@ input[type="range"] { accent-color: var(--accent) !important; }
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: var(--bg-void);
-    border-radius: var(--radius-lg);
 }
+
 .previewer-container .tips-icon {
-    position: absolute; right: 10px; top: 10px; z-index: 10;
-    border-radius: var(--radius-md); color: var(--bg-void);
-    background-color: var(--accent); padding: 4px 8px;
-    user-select: none; font-size: 0.75rem; font-weight: 500;
+    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: 45px;
-    color: var(--text-primary); background-color: var(--bg-elevated);
-    border: 1px solid var(--border-light); border-radius: var(--radius-md);
-    padding: 8px 12px; text-align: left; max-width: 280px; z-index: 10;
-    transition: opacity 0.15s ease-out; opacity: 0; user-select: none;
-    box-shadow: var(--shadow-md);
+    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 .tips-text p { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); margin: 4px 0; }
-.tips-icon:hover + .tips-text { opacity: 1; }
-.previewer-container .mode-row { width: 100%; display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
 .previewer-container .mode-btn {
-    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
-    opacity: 0.5; transition: all 0.15s ease-out;
-    border: 2px solid var(--border-light); object-fit: cover;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: all 0.2s;
+    border: 2px solid var(--neutral-600, #555);
+    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: var(--neutral-700, #404040);
+    border-radius: 5px;
 }
-.previewer-container .mode-btn:hover { opacity: 0.85; transform: scale(1.1); border-color: var(--text-muted); }
-.previewer-container .mode-btn.active { opacity: 1; border-color: var(--accent); transform: scale(1.1); }
-.previewer-container .display-row { margin-bottom: 16px; 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: 8px; padding: 0 16px; }
-.previewer-container input[type=range] { -webkit-appearance: none; width: 100%; max-width: 400px; background: transparent; height: 20px; }
-.previewer-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: var(--bg-tertiary); border-radius: 9999px; }
 .previewer-container input[type=range]::-webkit-slider-thumb {
-    height: 12px; width: 12px; border-radius: 50%; background: var(--accent);
-    cursor: pointer; -webkit-appearance: none; margin-top: -4px;
-    box-shadow: var(--shadow-sm); transition: transform 0.1s ease-out;
+    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 input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); background: var(--accent-hover); }
-.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];
@@ -262,26 +264,46 @@ 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);
-        if (targetImg) { targetImg.classList.add('visible'); }
+
+        // 4. Show ONLY the target
+        if (targetImg) {
+            targetImg.classList.add('visible');
+        }
+
+        // 5. Update Button Highlights
         const allBtns = document.querySelectorAll('.mode-btn');
         allBtns.forEach((btn, idx) => {
             if (idx === mode) btn.classList.add('active');
             else btn.classList.remove('active');
         });
     }
-    function selectMode(mode) { refreshView(mode, -1); }
-    function onSliderChange(val) { refreshView(-1, parseInt(val)); }
+
+    // --- Action: Switch Mode ---
+    function selectMode(mode) {
+        refreshView(mode, -1);
+    }
+
+    // --- Action: Slider Change ---
+    function onSliderChange(val) {
+        refreshView(-1, parseInt(val));
+    }
 </script>
 """
 
 
-empty_html = """
+empty_html = f"""
 <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"><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" 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>
 </div>
 """
 
@@ -315,7 +337,10 @@ def remove_background(input: Image.Image) -> Image.Image:
 
 
 def preprocess_image(input: Image.Image) -> Image.Image:
-    """Preprocess a single input image."""
+    """
+    Preprocess the input image.
+    """
+    # if has alpha channel, use it directly; otherwise, remove background
     has_alpha = False
     if input.mode == 'RGBA':
         alpha = np.array(input)[:, :, 3]
@@ -332,29 +357,42 @@ def preprocess_image(input: Image.Image) -> Image.Image:
     output_np = np.array(output)
     alpha = output_np[:, :, 3]
     bbox = np.argwhere(alpha > 0.8 * 255)
+    if bbox.size == 0:
+        # No visible pixels, center the image in a square
+        size = max(output.size)
+        square = Image.new('RGB', (size, size), (0, 0, 0))
+        output_rgb = output.convert('RGB') if output.mode == 'RGBA' else output
+        square.paste(output_rgb, ((size - output.width) // 2, (size - output.height) // 2))
+        return square
     bbox = np.min(bbox[:, 1]), np.min(bbox[:, 0]), np.max(bbox[:, 1]), np.max(bbox[:, 0])
     center = (bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2
     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)
-    output = np.array(output).astype(np.float32) / 255
-    output = output[:, :, :3] * output[:, :, 3:4]
-    output = Image.fromarray((output * 255).astype(np.uint8))
+    output = output.crop(bbox)  # type: ignore
+    output_np = np.array(output).astype(np.float32)
+    rgb = output_np[:, :, :3]
+    alpha = output_np[:, :, 3:4] / 255.0
+    # Use threshold to avoid darkening foreground pixels with slightly transparent alpha
+    # Pixels with alpha > 0.5 keep their full RGB, pixels below are blacked out
+    mask = (alpha > 0.5).astype(np.float32)
+    rgb = rgb * mask
+    output = Image.fromarray(rgb.astype(np.uint8))
     return output
 
 
 def preprocess_images(images: List[Tuple[Image.Image, str]]) -> List[Image.Image]:
-    """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))
+    """
+    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))
     return processed_images
 
 
-def pack_state(latents):
+def pack_state(latents: Tuple[SparseTensor, SparseTensor, int]) -> dict:
     shape_slat, tex_slat, res = latents
     return {
         'shape_slat_feats': shape_slat.feats.cpu().numpy(),
@@ -364,8 +402,7 @@ def pack_state(latents):
     }
 
 
-def unpack_state(state: dict):
-    _lazy_import()
+def unpack_state(state: dict) -> Tuple[SparseTensor, SparseTensor, int]:
     shape_slat = SparseTensor(
         feats=torch.from_numpy(state['shape_slat_feats']).cuda(),
         coords=torch.from_numpy(state['coords']).cuda(),
@@ -375,40 +412,81 @@ 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_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')]))
+def prepare_multi_example() -> List[str]:
+    """
+    Prepare multi-image examples. Returns list of image paths.
+    Shows only the first view as representative thumbnail.
+    """
+    multi_case = sorted(set([i.split('_')[0] for i in os.listdir("assets/example_multi_image")]))
     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)
+    for case in multi_case:
+        first_img = f'assets/example_multi_image/{case}_1.png'
+        if os.path.exists(first_img):
+            examples.append(first_img)
     return examples
 
 
-def load_example(example_paths: List[str]) -> List[Image.Image]:
-    """Load example images from paths."""
+def load_multi_example(image) -> List[Image.Image]:
+    """Load all views for a multi-image case by matching the input image."""
+    if image is None:
+        return []
+
+    # Convert to PIL Image if needed
+    if isinstance(image, np.ndarray):
+        image = Image.fromarray(image)
+
+    # Convert to RGB for consistent comparison
+    input_rgb = np.array(image.convert('RGB'))
+
+    # Find matching case by comparing with first images
+    example_dir = "assets/example_multi_image"
+    case_names = sorted(set([f.rsplit('_', 1)[0] for f in os.listdir(example_dir) if f.endswith('.png')]))
+
+    for case_name in case_names:
+        first_img_path = f'{example_dir}/{case_name}_1.png'
+        if os.path.exists(first_img_path):
+            first_img = Image.open(first_img_path).convert('RGB')
+            first_rgb = np.array(first_img)
+
+            # Compare images (check if same shape and content)
+            if input_rgb.shape == first_rgb.shape and np.array_equal(input_rgb, first_rgb):
+                # Found match, load all views (without preprocessing - will be done on Generate)
+                images = []
+                for i in range(1, 7):
+                    img_path = f'{example_dir}/{case_name}_{i}.png'
+                    if os.path.exists(img_path):
+                        img = Image.open(img_path).convert('RGBA')
+                        images.append(img)
+                if images:
+                    return images
+
+    # No match found, return the single image
+    return [image.convert('RGBA') if image.mode != 'RGBA' else image]
+
+
+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 path in example_paths:
-        img = Image.open(path)
-        images.append(img)
-    return 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(
-    images: List[Tuple[Image.Image, str]],
     seed: int,
     resolution: str,
     ss_guidance_strength: float,
@@ -423,103 +501,74 @@ def image_to_3d(
     tex_slat_guidance_rescale: float,
     tex_slat_sampling_steps: int,
     tex_slat_rescale_t: float,
+    multiimages: List[Tuple[Image.Image, str]],
     multiimage_algo: Literal["multidiffusion", "stochastic"],
     tex_multiimage_algo: Literal["multidiffusion", "stochastic"],
     req: gr.Request,
     progress=gr.Progress(track_tqdm=True),
 ) -> str:
-    # Initialize pipeline on first call
-    _initialize_pipeline()
+    if not multiimages:
+        raise gr.Error("Please upload images or select an example first.")
 
-    # 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]
+    # Preprocess images (background removal, cropping, etc.)
+    images = [image[0] for image in multiimages]
+    processed_images = [preprocess_image(img) for img in images]
 
     # --- Sampling ---
-    if len(imgs) == 1:
-        # Single image mode
-        outputs, latents = pipeline.run(
-            imgs[0],
-            seed=seed,
-            preprocess_image=False,
-            sparse_structure_sampler_params={
-                "steps": ss_sampling_steps,
-                "guidance_strength": ss_guidance_strength,
-                "guidance_rescale": ss_guidance_rescale,
-                "rescale_t": ss_rescale_t,
-            },
-            shape_slat_sampler_params={
-                "steps": shape_slat_sampling_steps,
-                "guidance_strength": shape_slat_guidance_strength,
-                "guidance_rescale": shape_slat_guidance_rescale,
-                "rescale_t": shape_slat_rescale_t,
-            },
-            tex_slat_sampler_params={
-                "steps": tex_slat_sampling_steps,
-                "guidance_strength": tex_slat_guidance_strength,
-                "guidance_rescale": tex_slat_guidance_rescale,
-                "rescale_t": tex_slat_rescale_t,
-            },
-            pipeline_type={
-                "512": "512",
-                "1024": "1024_cascade",
-                "1536": "1536_cascade",
-            }[resolution],
-            return_latent=True,
-        )
-    else:
-        # Multi-image mode
-        outputs, latents = pipeline.run_multi_image(
-            imgs,
-            seed=seed,
-            preprocess_image=False,
-            sparse_structure_sampler_params={
-                "steps": ss_sampling_steps,
-                "guidance_strength": ss_guidance_strength,
-                "guidance_rescale": ss_guidance_rescale,
-                "rescale_t": ss_rescale_t,
-            },
-            shape_slat_sampler_params={
-                "steps": shape_slat_sampling_steps,
-                "guidance_strength": shape_slat_guidance_strength,
-                "guidance_rescale": shape_slat_guidance_rescale,
-                "rescale_t": shape_slat_rescale_t,
-            },
-            tex_slat_sampler_params={
-                "steps": tex_slat_sampling_steps,
-                "guidance_strength": tex_slat_guidance_strength,
-                "guidance_rescale": tex_slat_guidance_rescale,
-                "rescale_t": tex_slat_rescale_t,
-            },
-            pipeline_type={
-                "512": "512",
-                "1024": "1024_cascade",
-                "1536": "1536_cascade",
-            }[resolution],
-            return_latent=True,
-            mode=multiimage_algo,
-            tex_mode=tex_multiimage_algo,
-        )
-
+    outputs, latents = pipeline.run_multi_image(
+        processed_images,
+        seed=seed,
+        preprocess_image=False,
+        sparse_structure_sampler_params={
+            "steps": ss_sampling_steps,
+            "guidance_strength": ss_guidance_strength,
+            "guidance_rescale": ss_guidance_rescale,
+            "rescale_t": ss_rescale_t,
+        },
+        shape_slat_sampler_params={
+            "steps": shape_slat_sampling_steps,
+            "guidance_strength": shape_slat_guidance_strength,
+            "guidance_rescale": shape_slat_guidance_rescale,
+            "rescale_t": shape_slat_rescale_t,
+        },
+        tex_slat_sampler_params={
+            "steps": tex_slat_sampling_steps,
+            "guidance_strength": tex_slat_guidance_strength,
+            "guidance_rescale": tex_slat_guidance_rescale,
+            "rescale_t": tex_slat_rescale_t,
+        },
+        pipeline_type={
+            "512": "512",
+            "1024": "1024_cascade",
+            "1536": "1536_cascade",
+        }[resolution],
+        return_latent=True,
+        mode=multiimage_algo,
+        tex_mode=tex_multiimage_algo,
+    )
     mesh = outputs[0]
-    mesh.simplify(16777216)
-    render_images = render_utils.render_snapshot(mesh, resolution=1024, r=2, fov=36, nviews=STEPS, envmap=envmap)
+    mesh.simplify(16777216)  # nvdiffrast limit
+    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(render_images[render_key][s_idx]))
+        img_base64 = image_to_base64(Image.fromarray(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):
@@ -528,29 +577,54 @@ 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 ""
-        btns_html += f'<img src="{mode["icon_base64"]}" class="mode-btn {active_class}" onclick="selectMode({idx})" title="{mode["name"]}">'
-
+        # 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
     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>Render Mode - Click buttons to switch render modes.</p>
-                <p>View Angle - Drag slider to change view.</p>
+                <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>
             </div>
         </div>
-        <div class="display-row">{images_html}</div>
-        <div class="mode-row" id="btn-group">{btns_html}</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="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
 
 
@@ -561,13 +635,22 @@ def extract_glb(
     texture_size: int,
     req: gr.Request,
     progress=gr.Progress(track_tqdm=True),
-) -> Tuple[str, str]:
-    _initialize_pipeline()
+) -> 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.
+    """
     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)
+    mesh.simplify(16777216)  # nvdiffrast limit
     glb = o_voxel.postprocess.to_glb(
         vertices=mesh.vertices,
         faces=mesh.faces,
@@ -589,27 +672,30 @@ def extract_glb(
     glb_path = os.path.join(user_dir, f'sample_{timestamp}.glb')
     glb.export(glb_path, extension_webp=True)
     torch.cuda.empty_cache()
-    return glb_path, glb_path
-
-
-with gr.Blocks(delete_cache=(600, 600)) as demo:
-    gr.Markdown("""
-    ## 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.
+    return glb_path
+
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="orange", neutral_hue="slate")) as demo:
+    gr.HTML("""
+    <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 10px;">
+        <a href="https://www.opsiclear.com" target="_blank">
+            <img src="https://www.opsiclear.com/assets/logos/Logo_v2_compact_name.svg" alt="OpsiClear" style="height: 80px;">
+        </a>
+        <div>
+            <h2 style="margin: 0;">Multi-View to 3D with <a href="https://microsoft.github.io/TRELLIS.2" target="_blank">TRELLIS.2</a></h2>
+            <ul style="margin: 5px 0; padding-left: 20px;">
+                <li>Upload multiple images from different viewpoints to create a 3D asset with multi-image conditioning.</li>
+                <li>Click an example below to load a pre-made multi-view set, or upload your own images.</li>
+                <li>Click <b>Generate</b> to create the 3D model, then <b>Extract GLB</b> to export.</li>
+                <li style="color: #e67300;"><b>⚠️ Note:</b> Generation quality is highly sensitive to parameters. Adjust settings in Advanced Settings if results are unsatisfactory.</li>
+            </ul>
+        </div>
+    </div>
     """)
 
     with gr.Row():
         with gr.Column(scale=1, min_width=360):
-            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.*")
+            multiimage_prompt = gr.Gallery(label="Multi-View Images", format="png", type="pil", height=400, columns=3)
 
             resolution = gr.Radio(["512", "1024", "1536"], label="Resolution", value="1024")
             seed = gr.Slider(0, MAX_SEED, label="Seed", value=0, step=1)
@@ -617,8 +703,6 @@ 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", variant="primary")
-
             with gr.Accordion(label="Advanced Settings", open=False):
                 gr.Markdown("Stage 1: Sparse Structure Generation")
                 with gr.Row():
@@ -642,71 +726,88 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
                 tex_multiimage_algo = gr.Radio(["stochastic", "multidiffusion"], label="Texture Algorithm", value="multidiffusion")
 
         with gr.Column(scale=10):
-            with gr.Walkthrough(selected=0) as walkthrough:
-                with gr.Step("Preview", id=0):
-                    preview_output = gr.HTML(empty_html, label="3D Asset Preview", show_label=True, container=True)
-                    extract_btn = gr.Button("Extract GLB")
-                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("*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]
-                )
+            preview_output = gr.HTML(empty_html, label="3D Asset Preview", show_label=True, container=True)
+            glb_output = gr.Model3D(label="Extracted GLB", height=400, show_label=True, display_mode="solid", clear_color=(0.25, 0.25, 0.25, 1.0), visible=False)
+
+            with gr.Row():
+                generate_btn = gr.Button("Generate", variant="primary")
+                extract_btn = gr.Button("Extract GLB")
+
+            example_image = gr.Image(visible=False)  # Hidden component for examples
+            examples_multi = gr.Examples(
+                examples=prepare_multi_example(),
+                inputs=[example_image],
+                fn=load_multi_example,
+                outputs=[multiimage_prompt],
+                run_on_click=True,
+                cache_examples=False,
+                examples_per_page=50,
+            )
 
     output_buf = gr.State()
 
+
     # Handlers
     demo.load(start_session)
     demo.unload(end_session)
-
-    image_prompt.upload(
+    multiimage_prompt.upload(
         preprocess_images,
-        inputs=[image_prompt],
-        outputs=[image_prompt],
+        inputs=[multiimage_prompt],
+        outputs=[multiimage_prompt],
     )
 
     generate_btn.click(
-        get_seed, inputs=[randomize_seed, seed], outputs=[seed],
-    ).then(
-        lambda: gr.Walkthrough(selected=0), outputs=walkthrough
+        get_seed,
+        inputs=[randomize_seed, seed],
+        outputs=[seed],
     ).then(
         image_to_3d,
         inputs=[
-            image_prompt, seed, resolution,
+            seed, resolution,
             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_algo, tex_multiimage_algo
+            multiimage_prompt, multiimage_algo, tex_multiimage_algo
         ],
         outputs=[output_buf, preview_output],
     )
 
     extract_btn.click(
-        lambda: gr.Walkthrough(selected=1), outputs=walkthrough
-    ).then(
         extract_glb,
         inputs=[output_buf, decimation_target, texture_size],
-        outputs=[glb_output, download_btn],
+        outputs=[glb_output],
     )
 
 
+# Launch the Gradio app
 if __name__ == "__main__":
     os.makedirs(TMP_DIR, exist_ok=True)
 
+    # Construct ui components
+    btn_img_base64_strs = {}
     for i in range(len(MODES)):
         icon = Image.open(MODES[i]['icon'])
         MODES[i]['icon_base64'] = image_to_base64(icon)
 
     rmbg_client = Client("briaai/BRIA-RMBG-2.0")
+    pipeline = Trellis2ImageTo3DPipeline.from_pretrained('microsoft/TRELLIS.2-4B')
+    pipeline.rembg_model = None
+    pipeline.low_vram = False
+    pipeline.cuda()
+
+    envmap = {
+        'forest': EnvMap(torch.tensor(
+            cv2.cvtColor(cv2.imread('assets/hdri/forest.exr', cv2.IMREAD_UNCHANGED), cv2.COLOR_BGR2RGB),
+            dtype=torch.float32, device='cuda'
+        )),
+        'sunset': EnvMap(torch.tensor(
+            cv2.cvtColor(cv2.imread('assets/hdri/sunset.exr', cv2.IMREAD_UNCHANGED), cv2.COLOR_BGR2RGB),
+            dtype=torch.float32, device='cuda'
+        )),
+        'courtyard': EnvMap(torch.tensor(
+            cv2.cvtColor(cv2.imread('assets/hdri/courtyard.exr', cv2.IMREAD_UNCHANGED), cv2.COLOR_BGR2RGB),
+            dtype=torch.float32, device='cuda'
+        )),
+    }
 
     demo.launch(css=css, head=head)