diff --git a/app.py b/app.py
index 2a3928e1897e28ac9c85f8527aad31c683ac9a5f..0ad403b0260bcc99a5663df5d21eb0e7400e6429 100644
--- a/app.py
+++ b/app.py
@@ -15,7 +15,8 @@ from typing import *
import torch
import numpy as np
from PIL import Image
-import tempfile
+import base64
+import io
from trellis2.modules.sparse import SparseTensor
from trellis2.pipelines import Trellis2ImageTo3DPipeline
from trellis2.renderers import EnvMap
@@ -25,7 +26,247 @@ import o_voxel
MAX_SEED = np.iinfo(np.int32).max
TMP_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'tmp')
-os.makedirs(TMP_DIR, exist_ok=True)
+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 {
+ 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;
+}
+
+/* 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);
+}
+"""
+
+
+head = """
+
+"""
+
+
+empty_html = f"""
+
+"""
+
+
+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):
@@ -38,19 +279,20 @@ def end_session(req: gr.Request):
shutil.rmtree(user_dir)
-def remove_background(input: Image.Image) -> Image.Image:
- with tempfile.NamedTemporaryFile(suffix='.png') as f:
- input = input.convert('RGB')
- input.save(f.name)
- output = rmbg_client.predict(handle_file(f.name), api_name="/image")[0][0]
- output = Image.open(output)
- return output
+def remove_background(input: Image.Image, user_dir: str) -> Image.Image:
+ input = input.convert('RGB')
+ os.makedirs(user_dir, exist_ok=True)
+ input.save(os.path.join(user_dir, 'input.png'))
+ output = rmbg_client.predict(handle_file(os.path.join(user_dir, 'input.png')), api_name="/image")[0][0]
+ output = Image.open(output)
+ return output
-def preprocess_image(input: Image.Image) -> Image.Image:
+def preprocess_image(input: Image.Image, req: gr.Request,) -> Image.Image:
"""
Preprocess the input image.
"""
+ user_dir = os.path.join(TMP_DIR, str(req.session_hash))
# if has alpha channel, use it directly; otherwise, remove background
has_alpha = False
if input.mode == 'RGBA':
@@ -64,7 +306,7 @@ def preprocess_image(input: Image.Image) -> Image.Image:
if has_alpha:
output = input
else:
- output = remove_background(input)
+ output = remove_background(input, user_dir)
output_np = np.array(output)
alpha = output_np[:, :, 3]
bbox = np.argwhere(alpha > 0.8 * 255)
@@ -126,24 +368,7 @@ def image_to_3d(
req: gr.Request,
progress=gr.Progress(track_tqdm=True),
) -> str:
- """
- Convert an image to a 3D model.
-
- Args:
- image (Image.Image): The input image.
- seed (int): The random seed.
- ss_guidance_strength (float): The guidance strength for sparse structure generation.
- ss_sampling_steps (int): The number of sampling steps for sparse structure generation.
- shape_slat_guidance_strength (float): The guidance strength for shape slat generation.
- shape_slat_sampling_steps (int): The number of sampling steps for shape slat generation.
- tex_slat_guidance_strength (float): The guidance strength for texture slat generation.
- tex_slat_sampling_steps (int): The number of sampling steps for texture slat generation.
-
- Returns:
- str: The path to the preview video of the 3D model.
- str: The path to the 3D model.
- """
- user_dir = os.path.join(TMP_DIR, str(req.session_hash))
+ # --- Sampling ---
outputs, latents = pipeline.run(
image,
seed=seed,
@@ -175,13 +400,66 @@ def image_to_3d(
)
mesh = outputs[0]
mesh.simplify(16777216) # nvdiffrast limit
- images = render_utils.make_pbr_vis_frames(
- render_utils.render_snapshot(mesh, resolution=1024, r=2, fov=36, envmap=envmap),
- resolution=1024
- )
+ images = render_utils.render_snapshot(mesh, resolution=1024, r=2, fov=36, nviews=STEPS, envmap=envmap)
state = pack_state(latents)
torch.cuda.empty_cache()
- return state, [Image.fromarray(image) for image in images]
+
+ # --- 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"""
+ 
+ """
+
+ # 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"""
+ 
+ """
+
+ # Assemble the full component
+ full_html = f"""
+
+
+
+ {images_html}
+
+
+
+
+ {btns_html}
+
+
+
+
+
+
+