Upload app.py with huggingface_hub

app.py

@@ -103,88 +103,92 @@ DEFAULT_STEP = 3
 
 
 css = """
-/* ColmapView Dark Theme */
+/* ColmapView Dark Theme - Color Overrides */
 :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;
-}
-
-/* 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; }
+body, .gradio-container, .dark {
+    background: var(--bg-primary) !important;
+    color: var(--text-primary) !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; }
+.block {
+    background: var(--bg-secondary) !important;
+    border-color: var(--border-color) !important;
+}
+
+input, textarea, select {
+    background: var(--bg-tertiary) !important;
+    border-color: var(--border-color) !important;
+    color: var(--text-primary) !important;
+}
+
+label, .label-wrap {
+    color: var(--text-secondary) !important;
+}
+
+/* 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;
+    background: var(--bg-tertiary) !important;
+    border-color: 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;
+}
 
 /* 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;
@@ -194,52 +198,168 @@ input[type="range"] { accent-color: var(--accent) !important; }
     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: var(--bg-void);
+    background-color: var(--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);
-}
-.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; }
+    position: absolute;
+    right: 10px;
+    top: 50px;
+    color: var(--text-primary);
+    background-color: var(--bg-tertiary);
+    border: 1px solid var(--border-light);
+    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;
+    color: var(--text-secondary);
+}
+
+.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: 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;
-}
-.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; }
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    cursor: pointer;
+    opacity: 0.5;
+    transition: all 0.2s;
+    border: 2px solid var(--border-light);
+    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(--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(--bg-tertiary);
+    border-radius: 5px;
+}
 .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(--accent);
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -6px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+    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;
 }
-.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; }
+
+.gradio-container:has(.previewer-container) [data-testid="block-label"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* Gallery styling */
+.gallery {
+    background: var(--bg-tertiary) !important;
+    border-color: var(--border-color) !important;
+}
+
+/* Accordion */
+.accordion {
+    background: var(--bg-secondary) !important;
+    border-color: var(--border-color) !important;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 10px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary); }
+::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
 """
 
 
 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];
@@ -251,18 +371,36 @@ head = """
                 break;
             }
         }
+
+        // 2. Hide ALL images
         allImgs.forEach(img => img.classList.remove('visible'));
+
+        // 3. Construct the specific ID for the current state
         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>
 """
 
@@ -368,7 +506,7 @@ def get_seed(randomize_seed: bool, seed: int) -> int:
 
 
 def prepare_examples() -> List[List[str]]:
-    """Prepare examples as lists of image paths (not concatenated)."""
+    """Prepare multi-image examples as lists of image paths."""
     example_dir = "assets/example_multi_image"
     if not os.path.exists(example_dir):
         return []
@@ -377,7 +515,7 @@ def prepare_examples() -> List[List[str]]:
     examples = []
     for case in sorted(cases):
         case_images = []
-        for i in range(1, 10):  # Support up to 9 images per example
+        for i in range(1, 10):
             img_path = f'{example_dir}/{case}_{i}.png'
             if os.path.exists(img_path):
                 case_images.append(img_path)
@@ -497,24 +635,13 @@ def image_to_3d(
     torch.cuda.empty_cache()
 
     # --- HTML Construction ---
-    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]))
-        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)]
-
-    with ThreadPoolExecutor(max_workers=8) as executor:
-        encoded_results = list(executor.map(encode_preview_image, encode_tasks))
-
-    encoded_map = {(m, s): b64 for m, s, b64 in encoded_results}
     images_html = ""
     for m_idx, mode in enumerate(MODES):
         for s_idx in range(STEPS):
             unique_id = f"view-m{m_idx}-s{s_idx}"
             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)]
+            img_base64 = image_to_base64(Image.fromarray(render_images[mode['render_key']][s_idx]))
             images_html += f'<img id="{unique_id}" class="previewer-main-image {vis_class}" src="{img_base64}" loading="eager">'
 
     btns_html = ""
@@ -581,22 +708,22 @@ def extract_glb(
 
 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.
+    ## Multi-View Image to 3D Asset with [TRELLIS.2](https://microsoft.github.io/TRELLIS.2)
+    * Upload one or more images and click Generate to create a 3D asset.
+    * Multiple views from different angles will produce better results.
+    * Click Extract GLB to export and download the generated GLB file.
     """)
 
     with gr.Row():
         with gr.Column(scale=1, min_width=360):
             image_prompt = gr.Gallery(
-                label="Input Images (upload 1 or more views)",
+                label="Input Images",
                 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)
@@ -604,7 +731,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", variant="primary")
+            generate_btn = gr.Button("Generate")
 
             with gr.Accordion(label="Advanced Settings", open=False):
                 gr.Markdown("Stage 1: Sparse Structure Generation")
@@ -637,11 +764,10 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
                     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
+        with gr.Column(scale=1, min_width=172):
+            gr.Markdown("### Multi-View Examples")
             example_data = prepare_examples()
-            for i, example_paths in enumerate(example_data[:12]):  # Limit to 12 examples
+            for i, example_paths in enumerate(example_data[:12]):
                 case_name = os.path.basename(example_paths[0]).split('_')[0]
                 btn = gr.Button(f"{case_name} ({len(example_paths)} views)", size="sm")
                 btn.click(