app.py

import gradio as gr

import os
# Load optional environment variables from .env file if it exists
if os.path.exists('.env'):
    with open('.env') as f:
        for line in f:
            line = line.strip()
            if line and not line.startswith('#') and '=' in line:
                key, value = line.split('=', 1)
                os.environ[key.strip()] = value.strip().strip('"')

os.environ['OPENCV_IO_ENABLE_OPENEXR'] = '1'
os.environ["PYTORCH_CUDA_ALLOC_CONF"] = "expandable_segments:True"
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
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


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"},
]
STEPS = 8
DEFAULT_MODE = 3
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;
}

/* 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 .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;
}
"""


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];
            if (img.classList.contains('visible')) {
                const id = img.id;
                const [_, m, s] = id.split('-');
                if (mode === -1) mode = parseInt(m.slice(1));
                if (step === -1) step = parseInt(s.slice(1));
                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
        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));
    }
</script>
"""


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" 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>
"""


def image_to_base64(image):
    buffered = io.BytesIO()
    image = image.convert("RGB")
    image.save(buffered, format="jpeg", quality=85)
    img_str = base64.b64encode(buffered.getvalue()).decode()
    return f"data:image/jpeg;base64,{img_str}"


def start_session(req: gr.Request):
    user_dir = os.path.join(TMP_DIR, str(req.session_hash))
    os.makedirs(user_dir, exist_ok=True)
    
    
def end_session(req: gr.Request):
    user_dir = os.path.join(TMP_DIR, str(req.session_hash))
    shutil.rmtree(user_dir)


def preprocess_image(image: Image.Image) -> Image.Image:
    """
    Preprocess the input image.

    Args:
        image (Image.Image): The input image.

    Returns:
        Image.Image: The preprocessed image.
    """
    processed_image = pipeline.preprocess_image(image)
    return processed_image


def pack_state(latents: Tuple[SparseTensor, SparseTensor, int]) -> dict:
    shape_slat, tex_slat, res = latents
    return {
        'shape_slat_feats': shape_slat.feats.cpu().numpy(),
        'tex_slat_feats': tex_slat.feats.cpu().numpy(),
        'coords': shape_slat.coords.cpu().numpy(),
        'res': res,
    }
    
    
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(),
    )
    tex_slat = shape_slat.replace(torch.from_numpy(state['tex_slat_feats']).cuda())
    return shape_slat, tex_slat, state['res']


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 image_to_3d(
    image: Image.Image,
    multi_images: List[Image.Image],
    use_multi_image: bool,
    multi_image_mode: str,
    seed: int,
    resolution: str,
    ss_guidance_strength: float,
    ss_guidance_rescale: float,
    ss_sampling_steps: int,
    ss_rescale_t: float,
    shape_slat_guidance_strength: float,
    shape_slat_guidance_rescale: float,
    shape_slat_sampling_steps: int,
    shape_slat_rescale_t: float,
    tex_slat_guidance_strength: float,
    tex_slat_guidance_rescale: float,
    tex_slat_sampling_steps: int,
    tex_slat_rescale_t: float,
    req: gr.Request,
    progress=gr.Progress(track_tqdm=True),
) -> str:
    """
    Generate a 3D model from single or multiple images.

    Args:
        image (Image.Image): Single input image (used when use_multi_image is False).
        multi_images (List[Image.Image]): List of input images for multi-view generation.
        use_multi_image (bool): Whether to use multi-image mode.
        multi_image_mode (str): Fusion mode for multi-image conditioning.
            - 'stochastic': Cycles through images sequentially (memory efficient)
            - 'multidiffusion': Averages predictions from all images (higher quality)
        seed (int): Random seed for generation.
        resolution (str): Output resolution ('512', '1024', or '1536').
        ss_guidance_strength (float): Guidance strength for sparse structure sampling.
        ss_guidance_rescale (float): Guidance rescale for sparse structure sampling.
        ss_sampling_steps (int): Number of sampling steps for sparse structure.
        ss_rescale_t (float): Rescale parameter for sparse structure sampling.
        shape_slat_guidance_strength (float): Guidance strength for shape latent sampling.
        shape_slat_guidance_rescale (float): Guidance rescale for shape latent sampling.
        shape_slat_sampling_steps (int): Number of sampling steps for shape latent.
        shape_slat_rescale_t (float): Rescale parameter for shape latent sampling.
        tex_slat_guidance_strength (float): Guidance strength for texture latent sampling.
        tex_slat_guidance_rescale (float): Guidance rescale for texture latent sampling.
        tex_slat_sampling_steps (int): Number of sampling steps for texture latent.
        tex_slat_rescale_t (float): Rescale parameter for texture latent sampling.
        req (gr.Request): Gradio request object.
        progress (gr.Progress): Gradio progress tracker.

    Returns:
        str: JSON string containing rendered images and model state.
    """
    # --- Check if multi-image mode is enabled ---
    if use_multi_image:
        if multi_images is None or len(multi_images) == 0:
            raise gr.Error("Please upload images in the Multi-Image gallery before generating")

        # Multi-image processing - ensure all images are PIL Images
        images_to_process = []
        for idx, img in enumerate(multi_images):
            if img is not None:
                # Handle different formats Gradio might return
                if isinstance(img, tuple):
                    # Gallery returns (PIL.Image, caption/metadata)
                    img = img[0]  # Extract the image from the tuple
                elif isinstance(img, dict) and 'name' in img:
                    # Gradio sometimes returns dict with 'name' key pointing to file path
                    img_path = img['name']
                    img = Image.open(img_path)
                elif isinstance(img, str):
                    # File path string
                    img = Image.open(img)
                elif isinstance(img, np.ndarray):
                    # NumPy array
                    img = Image.fromarray(img)

                # Verify we have a PIL Image
                if not isinstance(img, Image.Image):
                    continue

                images_to_process.append(img)

        if len(images_to_process) == 0:
            raise gr.Error("No valid images could be processed. Please check the image format.")

        # Get conditioning from multiple images
        torch.manual_seed(seed)
        pipeline_type = {
            "512": "512",
            "1024": "1024_cascade",
            "1536": "1536_cascade",
        }[resolution]

        # Process each image and stack along batch dimension
        cond_list_512 = [pipeline.get_cond([img], 512)['cond'] for img in images_to_process]
        stacked_cond_512 = torch.cat(cond_list_512, dim=0)
        cond_512 = {
            'cond': stacked_cond_512,
            'neg_cond': torch.zeros_like(stacked_cond_512[:1])
        }

        cond_1024 = None
        if resolution != '512':
            cond_list_1024 = [pipeline.get_cond([img], 1024)['cond'] for img in images_to_process]
            stacked_cond_1024 = torch.cat(cond_list_1024, dim=0)
            cond_1024 = {
                'cond': stacked_cond_1024,
                'neg_cond': torch.zeros_like(stacked_cond_1024[:1])
            }

        # Sample sparse structure
        ss_res = {'512': 32, '1024': 64, '1024_cascade': 32, '1536_cascade': 32}[pipeline_type]
        with pipeline.inject_sampler_multi_image('sparse_structure_sampler', len(images_to_process), ss_sampling_steps, mode=multi_image_mode):
            coords = pipeline.sample_sparse_structure(
                cond_512, ss_res,
                num_samples=1,
                sampler_params={
                    "steps": ss_sampling_steps,
                    "guidance_strength": ss_guidance_strength,
                    "guidance_rescale": ss_guidance_rescale,
                    "rescale_t": ss_rescale_t,
                }
            )

        # Sample shape latent
        if pipeline_type == '512':
            with pipeline.inject_sampler_multi_image('shape_slat_sampler', len(images_to_process), shape_slat_sampling_steps, mode=multi_image_mode):
                shape_slat = pipeline.sample_shape_slat(
                    cond_512, pipeline.models['shape_slat_flow_model_512'],
                    coords, {
                        "steps": shape_slat_sampling_steps,
                        "guidance_strength": shape_slat_guidance_strength,
                        "guidance_rescale": shape_slat_guidance_rescale,
                        "rescale_t": shape_slat_rescale_t,
                    }
                )
            tex_cond = cond_512
            tex_model = pipeline.models['tex_slat_flow_model_512']
            res = 512
        elif pipeline_type == '1024':
            with pipeline.inject_sampler_multi_image('shape_slat_sampler', len(images_to_process), shape_slat_sampling_steps, mode=multi_image_mode):
                shape_slat = pipeline.sample_shape_slat(
                    cond_1024, pipeline.models['shape_slat_flow_model_1024'],
                    coords, {
                        "steps": shape_slat_sampling_steps,
                        "guidance_strength": shape_slat_guidance_strength,
                        "guidance_rescale": shape_slat_guidance_rescale,
                        "rescale_t": shape_slat_rescale_t,
                    }
                )
            tex_cond = cond_1024
            tex_model = pipeline.models['tex_slat_flow_model_1024']
            res = 1024
        elif pipeline_type in ['1024_cascade', '1536_cascade']:
            target_res = 1024 if pipeline_type == '1024_cascade' else 1536
            with pipeline.inject_sampler_multi_image('shape_slat_sampler', len(images_to_process), shape_slat_sampling_steps, mode=multi_image_mode):
                shape_slat, res = pipeline.sample_shape_slat_cascade(
                    cond_512, cond_1024,
                    pipeline.models['shape_slat_flow_model_512'],
                    pipeline.models['shape_slat_flow_model_1024'],
                    512, target_res,
                    coords, {
                        "steps": shape_slat_sampling_steps,
                        "guidance_strength": shape_slat_guidance_strength,
                        "guidance_rescale": shape_slat_guidance_rescale,
                        "rescale_t": shape_slat_rescale_t,
                    },
                    max_num_tokens=49152
                )
            tex_cond = cond_1024
            tex_model = pipeline.models['tex_slat_flow_model_1024']

        # Sample texture latent
        with pipeline.inject_sampler_multi_image('tex_slat_sampler', len(images_to_process), tex_slat_sampling_steps, mode=multi_image_mode):
            tex_slat = pipeline.sample_tex_slat(
                tex_cond, tex_model,
                shape_slat, {
                    "steps": tex_slat_sampling_steps,
                    "guidance_strength": tex_slat_guidance_strength,
                    "guidance_rescale": tex_slat_guidance_rescale,
                    "rescale_t": tex_slat_rescale_t,
                }
            )

        latents = (shape_slat, tex_slat, res)
        outputs = pipeline.decode_latent(shape_slat, tex_slat, res)
    else:
        # Single-image processing
        if image is None:
            raise gr.Error("No image provided")

        outputs, latents = pipeline.run(
            image,
            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,
        )

    mesh = outputs[0]
    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
    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">
            """
    
    # 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
    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="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


def extract_glb(
    state: dict,
    decimation_target: int,
    texture_size: int,
    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]
    glb = o_voxel.postprocess.to_glb(
        vertices=mesh.vertices,
        faces=mesh.faces,
        attr_volume=mesh.attrs,
        coords=mesh.coords,
        attr_layout=pipeline.pbr_attr_layout,
        grid_size=res,
        aabb=[[-0.5, -0.5, -0.5], [0.5, 0.5, 0.5]],
        decimation_target=decimation_target,
        texture_size=texture_size,
        remesh=True,
        remesh_band=1,
        remesh_project=0,
        use_tqdm=True,
    )
    now = datetime.now()
    timestamp = now.strftime("%Y-%m-%dT%H%M%S") + f".{now.microsecond // 1000:03d}"
    os.makedirs(user_dir, exist_ok=True)
    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("""
    ## Image to 3D Asset with [TRELLIS.2](https://microsoft.github.io/TRELLIS.2)
    * **Single Image Mode**: Upload one image and click Generate to create a 3D asset.
    * **Multi-Image Mode**: Enable multi-image mode and upload multiple views for better 3D reconstruction.
    * Click Extract GLB to export and download the generated GLB file if you're satisfied with the result.
    * **Default settings are optimized for defect detection and anomaly inspection** (high resolution, detail preservation, multi-view consistency).
    """)

    with gr.Row():
        with gr.Column(scale=1, min_width=360):
            # Mode selector
            use_multi_image = gr.Checkbox(label="Enable Multi-Image Mode", value=False)

            # Single image input
            image_prompt = gr.Image(
                label="Single Image Input",
                format="png",
                image_mode="RGBA",
                type="pil",
                height=400,
                visible=True
            )

            # Multi-image gallery
            multi_image_prompt = gr.Gallery(
                label="Multi-Image Input (Upload 2-8 views)",
                format="png",
                type="pil",
                height=400,
                columns=4,
                visible=False
            )

            # Multi-image fusion mode
            multi_image_mode = gr.Radio(
                ["stochastic", "multidiffusion"],
                label="Multi-Image Fusion Mode",
                value="multidiffusion",
                info="Stochastic: cycles through images (fast). Multidiffusion: averages all images (slower, better quality)",
                visible=False
            )

            resolution = gr.Radio(["512", "1024", "1536"], label="Resolution", value="1024")
            seed = gr.Slider(0, MAX_SEED, label="Seed", value=42, step=1)
            randomize_seed = gr.Checkbox(label="Randomize Seed", value=False)
            decimation_target = gr.Slider(100000, 1000000, label="Decimation Target", value=900000, step=10000)
            texture_size = gr.Slider(1024, 4096, label="Texture Size", value=4096, step=1024)

            generate_btn = gr.Button("Generate")
                
            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=8.5, step=0.1)
                    ss_guidance_rescale = gr.Slider(0.0, 1.0, label="Guidance Rescale", value=0.75, step=0.01)
                    ss_sampling_steps = gr.Slider(1, 50, label="Sampling Steps", value=18, step=1)
                    ss_rescale_t = gr.Slider(1.0, 6.0, label="Rescale T", value=5.0, step=0.1)
                gr.Markdown("Stage 2: Shape Generation")
                with gr.Row():
                    shape_slat_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance Strength", value=8.5, step=0.1)
                    shape_slat_guidance_rescale = gr.Slider(0.0, 1.0, label="Guidance Rescale", value=0.6, step=0.01)
                    shape_slat_sampling_steps = gr.Slider(1, 50, label="Sampling Steps", value=18, step=1)
                    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")
                with gr.Row():
                    tex_slat_guidance_strength = gr.Slider(1.0, 10.0, label="Guidance Strength", value=4.0, step=0.1)
                    tex_slat_guidance_rescale = gr.Slider(0.0, 1.0, label="Guidance Rescale", value=0.3, step=0.01)
                    tex_slat_sampling_steps = gr.Slider(1, 50, label="Sampling Steps", value=18, step=1)
                    tex_slat_rescale_t = gr.Slider(1.0, 6.0, label="Rescale T", value=3.0, step=0.1)                

        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")
                    
        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,
            )
                    
    output_buf = gr.State()
    

    # Handlers
    demo.load(start_session)
    demo.unload(end_session)

    # Toggle visibility based on mode
    def toggle_multi_image_mode(enabled):
        """
        Toggle visibility of UI components based on multi-image mode selection.

        Args:
            enabled (bool): Whether multi-image mode is enabled.

        Returns:
            dict: Dictionary of Gradio component updates for visibility toggling.
        """
        return {
            image_prompt: gr.Image(visible=not enabled),
            multi_image_prompt: gr.Gallery(visible=enabled),
            multi_image_mode: gr.Radio(visible=enabled)
        }

    use_multi_image.change(
        toggle_multi_image_mode,
        inputs=[use_multi_image],
        outputs=[image_prompt, multi_image_prompt, multi_image_mode]
    )

    image_prompt.upload(
        preprocess_image,
        inputs=[image_prompt],
        outputs=[image_prompt],
    )

    generate_btn.click(
        get_seed,
        inputs=[randomize_seed, seed],
        outputs=[seed],
    ).then(
        lambda: gr.Walkthrough(selected=0), outputs=walkthrough
    ).then(
        image_to_3d,
        inputs=[
            image_prompt, multi_image_prompt, use_multi_image, multi_image_mode,
            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,
        ],
        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],
    )
        

# 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)

    pipeline = Trellis2ImageTo3DPipeline.from_pretrained('microsoft/TRELLIS.2-4B')
    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(server_name="0.0.0.0", server_port=7860, css=css, head=head)