Update app.py

app.py

@@ -29,11 +29,11 @@ MAX_SEED = np.iinfo(np.int32).max
 TMP_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'tmp')
 MODES = [
     {"name": "Normal", "icon": "assets/app/normal.png", "render_key": "normal"},
-    {"name": "Clay render", "icon": "assets/app/clay.png", "render_key": "clay"},
-    {"name": "Base color", "icon": "assets/app/basecolor.png", "render_key": "base_color"},
-    {"name": "HDRI forest", "icon": "assets/app/hdri_forest.png", "render_key": "shaded_forest"},
-    {"name": "HDRI sunset", "icon": "assets/app/hdri_sunset.png", "render_key": "shaded_sunset"},
-    {"name": "HDRI courtyard", "icon": "assets/app/hdri_courtyard.png", "render_key": "shaded_courtyard"},
+    {"name": "Clay", "icon": "assets/app/clay.png", "render_key": "clay"},
+    {"name": "Color", "icon": "assets/app/basecolor.png", "render_key": "base_color"},
+    {"name": "Forest", "icon": "assets/app/hdri_forest.png", "render_key": "shaded_forest"},
+    {"name": "Sunset", "icon": "assets/app/hdri_sunset.png", "render_key": "shaded_sunset"},
+    {"name": "Courtyard", "icon": "assets/app/hdri_courtyard.png", "render_key": "shaded_courtyard"},
 ]
 STEPS = 8
 DEFAULT_MODE = 3
@@ -41,206 +41,349 @@ DEFAULT_STEP = 3
 
 
 css = """
-/* Overwrite Gradio Default Style */
-.stepper-wrapper {
-    padding: 0;
+/* ═══════════════════════════════════════════════════════════════
+   TRELLIS.2 — Modern Dark Theme
+   ═══════════════════════════════════════════════════════════════ */
+
+:root {
+    --accent: #6366f1;
+    --accent-hover: #818cf8;
+    --accent-glow: rgba(99, 102, 241, 0.3);
+    --surface-0: #0a0a0b;
+    --surface-1: #111113;
+    --surface-2: #1a1a1d;
+    --surface-3: #242428;
+    --border: rgba(255, 255, 255, 0.06);
+    --text-primary: #fafafa;
+    --text-secondary: rgba(255, 255, 255, 0.5);
+    --radius: 16px;
+    --radius-sm: 10px;
 }
 
-.stepper-container {
-    padding: 0;
-    align-items: center;
+/* Global Overrides */
+.gradio-container {
+    background: var(--surface-0) !important;
+    max-width: 1400px !important;
 }
 
-.step-button {
-    flex-direction: row;
+.dark {
+    --block-background-fill: var(--surface-1) !important;
+    --block-border-color: var(--border) !important;
+    --body-background-fill: var(--surface-0) !important;
+    --color-accent: var(--accent) !important;
 }
 
-.step-connector {
-    transform: none;
+/* Header */
+.app-header {
+    text-align: center;
+    padding: 40px 20px 30px;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 24px;
 }
 
-.step-number {
-    width: 16px;
-    height: 16px;
+.app-header h1 {
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-size: 2.5rem;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 0 0 8px 0;
 }
 
-.step-label {
-    position: relative;
-    bottom: 0;
+.app-header p {
+    color: var(--text-secondary);
+    font-size: 1rem;
+    margin: 0;
+    font-weight: 400;
 }
 
-.wrap.center.full {
-    inset: 0;
-    height: 100%;
+/* Panels */
+.panel {
+    background: var(--surface-1) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius) !important;
+    overflow: hidden;
 }
 
-.wrap.center.full.translucent {
-    background: var(--block-background-fill);
+.panel-title {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-secondary);
+    padding: 16px 20px 8px;
+    font-weight: 600;
 }
 
-.meta-text-center {
-    display: block !important;
-    position: absolute !important;
-    top: unset !important;
-    bottom: 0 !important;
-    right: 0 !important;
-    transform: unset !important;
+/* Upload Area */
+.upload-zone {
+    min-height: 280px !important;
+    border: 2px dashed var(--border) !important;
+    border-radius: var(--radius) !important;
+    background: var(--surface-2) !important;
+    transition: all 0.3s ease;
 }
 
-/* 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;
+.upload-zone:hover {
+    border-color: var(--accent) !important;
+    background: rgba(99, 102, 241, 0.05) !important;
 }
 
-.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;
+/* Buttons */
+.primary-btn {
+    background: var(--accent) !important;
+    border: none !important;
+    border-radius: var(--radius-sm) !important;
+    color: white !important;
+    font-weight: 600 !important;
+    padding: 14px 28px !important;
+    font-size: 0.95rem !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 4px 20px var(--accent-glow) !important;
 }
 
-.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%;
+.primary-btn:hover {
+    background: var(--accent-hover) !important;
+    transform: translateY(-1px);
+    box-shadow: 0 6px 30px var(--accent-glow) !important;
 }
 
-/* Row 1: Display Modes */
-.previewer-container .mode-row {
+.secondary-btn {
+    background: var(--surface-3) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-sm) !important;
+    color: var(--text-primary) !important;
+    font-weight: 500 !important;
+    transition: all 0.2s ease !important;
+}
+
+.secondary-btn:hover {
+    background: var(--surface-2) !important;
+    border-color: var(--accent) !important;
+}
+
+/* Sliders & Inputs */
+input[type="range"] {
+    accent-color: var(--accent) !important;
+}
+
+.wrap input, .wrap textarea {
+    background: var(--surface-2) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-sm) !important;
+    color: var(--text-primary) !important;
+}
+
+/* Radio Buttons */
+.gr-radio-row {
+    gap: 8px !important;
+}
+
+.gr-radio-row label {
+    background: var(--surface-2) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-sm) !important;
+    padding: 10px 18px !important;
+    transition: all 0.2s ease !important;
+}
+
+.gr-radio-row label:hover {
+    border-color: var(--accent) !important;
+}
+
+.gr-radio-row label.selected {
+    background: var(--accent) !important;
+    border-color: var(--accent) !important;
+}
+
+/* Accordion */
+.gr-accordion {
+    border: 1px solid var(--border) !important;
+    border-radius: var(--radius-sm) !important;
+    background: var(--surface-2) !important;
+}
+
+/* Walkthrough/Stepper */
+.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; }
+
+/* Loading States */
+.wrap.center.full { inset: 0; height: 100%; }
+.wrap.center.full.translucent { background: var(--surface-1); }
+
+/* ═══════════════════════════════════════════════════════════════
+   3D PREVIEWER COMPONENT
+   ═══════════════════════════════════════════════════════════════ */
+
+.previewer-container {
+    position: relative;
     width: 100%;
+    height: 650px;
     display: flex;
-    gap: 8px;
+    flex-direction: column;
+    align-items: center;
     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);
+    padding: 20px;
+    background: radial-gradient(ellipse at center, var(--surface-2) 0%, var(--surface-1) 100%);
+    border-radius: var(--radius);
 }
 
-/* Row 2: Display Image */
+/* Viewport */
 .previewer-container .display-row {
-    margin-bottom: 20px;
-    min-height: 400px;
+    flex: 1;
     width: 100%;
-    flex-grow: 1;
     display: flex;
     justify-content: center;
     align-items: center;
+    min-height: 0;
 }
+
 .previewer-container .previewer-main-image {
     max-width: 100%;
     max-height: 100%;
-    flex-grow: 1;
     object-fit: contain;
     display: none;
+    border-radius: var(--radius-sm);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
 }
+
 .previewer-container .previewer-main-image.visible {
     display: block;
+    animation: fadeIn 0.3s ease;
 }
 
-/* Row 3: Custom HTML Slider */
-.previewer-container .slider-row {
-    width: 100%;
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.98); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+/* Mode Selector */
+.previewer-container .mode-row {
     display: flex;
-    flex-direction: column;
-    align-items: center;
     gap: 10px;
-    padding: 0 10px;
+    margin-top: 20px;
+    padding: 8px;
+    background: var(--surface-0);
+    border-radius: 50px;
+    border: 1px solid var(--border);
+}
+
+.previewer-container .mode-btn {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    cursor: pointer;
+    opacity: 0.4;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 2px solid transparent;
+    object-fit: cover;
+}
+
+.previewer-container .mode-btn:hover {
+    opacity: 0.8;
+    transform: scale(1.1);
+}
+
+.previewer-container .mode-btn.active {
+    opacity: 1;
+    border-color: var(--accent);
+    transform: scale(1.15);
+    box-shadow: 0 0 20px var(--accent-glow);
+}
+
+/* Rotation Slider */
+.previewer-container .slider-row {
+    width: 100%;
+    max-width: 320px;
+    margin-top: 16px;
 }
 
 .previewer-container input[type=range] {
     -webkit-appearance: none;
     width: 100%;
-    max-width: 400px;
     background: transparent;
+    cursor: pointer;
 }
+
 .previewer-container input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
-    height: 8px;
-    cursor: pointer;
-    background: #ddd;
-    border-radius: 5px;
+    height: 6px;
+    background: var(--surface-0);
+    border-radius: 3px;
+    border: 1px solid var(--border);
 }
+
 .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;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    background: var(--accent);
+    margin-top: -7px;
+    box-shadow: 0 2px 10px var(--accent-glow);
+    transition: transform 0.15s ease;
 }
+
 .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;
+/* Empty State */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: var(--text-secondary);
+}
+
+.empty-state svg {
+    opacity: 0.3;
 }
 
+.empty-state p {
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+/* Block Label Override */
+.gradio-container .padded:has(.previewer-container) { padding: 0 !important; }
 .gradio-container:has(.previewer-container) [data-testid="block-label"] {
     position: absolute;
     top: 0;
     left: 0;
 }
+
+/* GLB Viewer */
+.model3d-container {
+    background: var(--surface-2) !important;
+    border-radius: var(--radius) !important;
+}
+
+/* Footer Note */
+.footer-note {
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    padding: 16px;
+    border-top: 1px solid var(--border);
+    margin-top: 24px;
+}
 """
 
 
 head = """
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+
 <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];
@@ -253,21 +396,11 @@ head = """
             }
         }
         
-        // 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');
@@ -275,23 +408,22 @@ head = """
         });
     }
     
-    // --- 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>
+    <div class="empty-state">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+            <line x1="12" y1="22.08" x2="12" y2="12"></line>
+        </svg>
+        <p>Upload an image to generate 3D</p>
+    </div>
 </div>
 """
 
@@ -324,10 +456,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 the input image."""
     has_alpha = False
     if input.mode == 'RGBA':
         alpha = np.array(input)[:, :, 3]
@@ -349,7 +478,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))
@@ -376,9 +505,6 @@ def unpack_state(state: dict) -> Tuple[SparseTensor, SparseTensor, int]:
 
 
 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
 
 
@@ -402,7 +528,6 @@ def image_to_3d(
     req: gr.Request,
     progress=gr.Progress(track_tqdm=True),
 ) -> str:
-    # --- Sampling ---
     outputs, latents = pipeline.run(
         image,
         seed=seed,
@@ -433,70 +558,32 @@ def image_to_3d(
         return_latent=True,
     )
     mesh = outputs[0]
-    mesh.simplify(16777216) # nvdiffrast limit
+    mesh.simplify(16777216)
     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
+    # Build HTML
     images_html = ""
     for m_idx, mode in enumerate(MODES):
         for s_idx in range(STEPS):
-            # ID Naming Convention: view-m{mode}-s{step}
             unique_id = f"view-m{m_idx}-s{s_idx}"
-            
-            # Logic: Only Mode 0, Step 0 is visible initially
             is_visible = (m_idx == DEFAULT_MODE and s_idx == DEFAULT_STEP)
             vis_class = "visible" if is_visible else ""
-            
-            # Image Source
             img_base64 = image_to_base64(Image.fromarray(images[mode['render_key']][s_idx]))
-            
-            # Render the Tag
-            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']}">
-        """
+        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-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>
-            </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">{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)">
+            <input type="range" min="0" max="{STEPS - 1}" value="{DEFAULT_STEP}" step="1" oninput="onSliderChange(this.value)">
         </div>
     </div>
     """
@@ -512,17 +599,6 @@ 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.
-    """
     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]
@@ -551,72 +627,104 @@ def extract_glb(
     return glb_path, glb_path
 
 
-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.
+# ═══════════════════════════════════════════════════════════════
+# GRADIO INTERFACE
+# ═══════════════════════════════════════════════════════════════
+
+with gr.Blocks(css=css, head=head, theme=gr.themes.Base(primary_hue="indigo"), delete_cache=(600, 600)) as demo:
+    
+    # Header
+    gr.HTML("""
+        <div class="app-header">
+            <h1>TRELLIS.2</h1>
+            <p>Transform any image into a high-quality 3D asset</p>
+        </div>
     """)
     
-    with gr.Row():
-        with gr.Column(scale=1, min_width=360):
-            image_prompt = gr.Image(label="Image Prompt", format="png", image_mode="RGBA", type="pil", height=400)
+    with gr.Row(equal_height=True):
+        # Left Panel — Controls
+        with gr.Column(scale=1, min_width=320):
             
-            resolution = gr.Radio(["512", "1024", "1536"], label="Resolution", value="1024")
-            seed = gr.Slider(0, MAX_SEED, label="Seed", value=0, step=1)
-            randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
-            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)
+            # Image Upload
+            image_prompt = gr.Image(
+                label="Input Image",
+                format="png",
+                image_mode="RGBA",
+                type="pil",
+                height=280,
+                elem_classes=["upload-zone"]
+            )
             
-            generate_btn = gr.Button("Generate")
+            # Main Controls
+            with gr.Group():
+                resolution = gr.Radio(
+                    ["512", "1024", "1536"],
+                    label="Resolution",
+                    value="1024",
+                    interactive=True
+                )
                 
-            with gr.Accordion(label="Advanced Settings", open=False):                
-                gr.Markdown("Stage 1: Sparse Structure Generation")
                 with gr.Row():
-                    ss_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance Strength", value=7.5, step=0.1)
-                    ss_guidance_rescale = gr.Slider(0.0, 1.0, label="Guidance Rescale", value=0.7, step=0.01)
-                    ss_sampling_steps = gr.Slider(1, 50, label="Sampling Steps", value=12, step=1)
+                    seed = gr.Number(label="Seed", value=0, precision=0, minimum=0, maximum=MAX_SEED)
+                    randomize_seed = gr.Checkbox(label="Random", value=True)
+            
+            # Generate Button
+            generate_btn = gr.Button("Generate 3D", variant="primary", elem_classes=["primary-btn"], size="lg")
+            
+            # Export Settings
+            with gr.Accordion("Export Settings", open=False):
+                decimation_target = gr.Slider(100000, 500000, label="Face Count", value=300000, step=10000)
+                texture_size = gr.Slider(1024, 4096, label="Texture Size", value=2048, step=512)
+            
+            # Advanced Settings
+            with gr.Accordion("Advanced Settings", open=False):
+                gr.Markdown("**Stage 1: Sparse Structure**")
+                with gr.Row():
+                    ss_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance", value=7.5, step=0.1)
+                    ss_sampling_steps = gr.Slider(1, 50, label="Steps", value=12, step=1)
+                with gr.Row():
+                    ss_guidance_rescale = gr.Slider(0.0, 1.0, label="Rescale", value=0.7, step=0.01)
                     ss_rescale_t = gr.Slider(1.0, 6.0, label="Rescale T", value=5.0, step=0.1)
-                gr.Markdown("Stage 2: Shape Generation")
+                    
+                gr.Markdown("**Stage 2: Shape**")
+                with gr.Row():
+                    shape_slat_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance", value=7.5, step=0.1)
+                    shape_slat_sampling_steps = gr.Slider(1, 50, label="Steps", value=12, step=1)
                 with gr.Row():
-                    shape_slat_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance Strength", value=7.5, step=0.1)
-                    shape_slat_guidance_rescale = gr.Slider(0.0, 1.0, label="Guidance Rescale", value=0.5, step=0.01)
-                    shape_slat_sampling_steps = gr.Slider(1, 50, label="Sampling Steps", value=12, step=1)
+                    shape_slat_guidance_rescale = gr.Slider(0.0, 1.0, label="Rescale", value=0.5, step=0.01)
                     shape_slat_rescale_t = gr.Slider(1.0, 6.0, label="Rescale T", value=3.0, step=0.1)
-                gr.Markdown("Stage 3: Material Generation")
+                    
+                gr.Markdown("**Stage 3: Material**")
+                with gr.Row():
+                    tex_slat_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance", value=1.0, step=0.1)
+                    tex_slat_sampling_steps = gr.Slider(1, 50, label="Steps", value=12, step=1)
                 with gr.Row():
-                    tex_slat_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance Strength", value=1.0, step=0.1)
-                    tex_slat_guidance_rescale = gr.Slider(0.0, 1.0, label="Guidance Rescale", value=0.0, step=0.01)
-                    tex_slat_sampling_steps = gr.Slider(1, 50, label="Sampling Steps", value=12, step=1)
-                    tex_slat_rescale_t = gr.Slider(1.0, 6.0, label="Rescale T", value=3.0, step=0.1)                
+                    tex_slat_guidance_rescale = gr.Slider(0.0, 1.0, label="Rescale", value=0.0, step=0.01)
+                    tex_slat_rescale_t = gr.Slider(1.0, 6.0, label="Rescale T", value=3.0, step=0.1)
 
-        with gr.Column(scale=10):
+        # Right Panel — Preview
+        with gr.Column(scale=2):
             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("*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.*")
+                    preview_output = gr.HTML(empty_html, label="3D Preview", show_label=False)
+                    extract_btn = gr.Button("Extract GLB", elem_classes=["secondary-btn"], size="lg")
                     
-        with gr.Column(scale=1, min_width=172):
-            examples = gr.Examples(
-                examples=[
-                    f'assets/example_image/{image}'
-                    for image in os.listdir("assets/example_image")
-                ],
-                inputs=[image_prompt],
-                fn=preprocess_image,
-                outputs=[image_prompt],
-                run_on_click=True,
-                examples_per_page=18,
-            )
+                with gr.Step("Export", id=1):
+                    glb_output = gr.Model3D(
+                        label="GLB Model",
+                        height=580,
+                        show_label=False,
+                        display_mode="solid",
+                        clear_color=(0.06, 0.06, 0.07, 1.0)
+                    )
+                    download_btn = gr.DownloadButton("Download GLB", elem_classes=["primary-btn"], size="lg")
+    
+    # Footer
+    gr.HTML('<div class="footer-note">GLB extraction may take 30+ seconds. Face count is limited for performance.</div>')
                     
     output_buf = gr.State()
-    
 
-    # Handlers
+    # Event Handlers
     demo.load(start_session)
     demo.unload(end_session)
     
@@ -650,14 +758,16 @@ with gr.Blocks(delete_cache=(600, 600)) as demo:
         inputs=[output_buf, decimation_target, texture_size],
         outputs=[glb_output, download_btn],
     )
-        
 
-# Launch the Gradio app
+
+# ═══════════════════════════════════════════════════════════════
+# LAUNCH
+# ═══════════════════════════════════════════════════════════════
+
 if __name__ == "__main__":
     os.makedirs(TMP_DIR, exist_ok=True)
 
-    # Construct ui components
-    btn_img_base64_strs = {}
+    # Load mode icons
     for i in range(len(MODES)):
         icon = Image.open(MODES[i]['icon'])
         MODES[i]['icon_base64'] = image_to_base64(icon)
@@ -683,4 +793,4 @@ if __name__ == "__main__":
         )),
     }
     
-    demo.launch(css=css, head=head)
+    demo.launch()