Upload 98 files

.gitattributes

@@ -33,3 +33,36 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/1.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/10.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/11.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/12.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/13.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/2.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/3.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/4.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/5.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/6.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/7.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/8.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/9.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/comp-close.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/comp-open1.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/comp-open2.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/pipeline.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/images/teaser.png filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/1.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/10.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/11.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/12.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/13.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/2.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/3.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/4.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/5.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/6.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/7.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/8.mp4 filter=lfs diff=lfs merge=lfs -text
+docs/assets/videos/9.mp4 filter=lfs diff=lfs merge=lfs -text
+inputs/coarse_mesh/1.glb filter=lfs diff=lfs merge=lfs -text
+inputs/image/1.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,256 @@
+import argparse
+import gc
+import os
+import sys
+
+import gradio as gr
+import torch
+import spaces
+from omegaconf import OmegaConf
+
+# Add project root to path so we can run from anywhere
+sys.path.append(os.path.dirname(os.path.abspath(__file__)))
+
+from ultrashape.rembg import BackgroundRemover
+from ultrashape.utils.misc import instantiate_from_config
+from ultrashape.surface_loaders import SharpEdgeSurfaceLoader
+from ultrashape.utils import voxelize_from_point
+from ultrashape.pipelines import UltraShapePipeline
+
+# Global variables to cache the model
+MODEL_CACHE = {}
+
+
+def get_pipeline_cached(config_path, ckpt_path, device='cuda', low_vram=False):
+    # Check if we have a valid cached pipeline for this checkpoint
+    if "pipeline" in MODEL_CACHE and MODEL_CACHE.get("ckpt_path") == ckpt_path:
+        print("Using cached pipeline...")
+        return MODEL_CACHE["pipeline"], MODEL_CACHE["config"]
+
+    # Clear old cache if it exists (e.g. different checkpoint)
+    if MODEL_CACHE:
+        print("Clearing old model cache...")
+        MODEL_CACHE.clear()
+        gc.collect()
+        torch.cuda.empty_cache()
+
+    print(f"Loading config from {config_path}...")
+    config = OmegaConf.load(config_path)
+
+    print("Instantiating VAE...")
+    vae = instantiate_from_config(config.model.params.vae_config)
+
+    print("Instantiating DiT...")
+    dit = instantiate_from_config(config.model.params.dit_cfg)
+
+    print("Instantiating Conditioner...")
+    conditioner = instantiate_from_config(config.model.params.conditioner_config)
+
+    print("Instantiating Scheduler & Processor...")
+    scheduler = instantiate_from_config(config.model.params.scheduler_cfg)
+    image_processor = instantiate_from_config(config.model.params.image_processor_cfg)
+
+    print(f"Loading weights from {ckpt_path}...")
+    weights = torch.load(ckpt_path, map_location='cpu')
+
+    vae.load_state_dict(weights['vae'], strict=True)
+    dit.load_state_dict(weights['dit'], strict=True)
+    conditioner.load_state_dict(weights['conditioner'], strict=True)
+
+    vae.eval().to(device)
+    dit.eval().to(device)
+    conditioner.eval().to(device)
+
+    if hasattr(vae, 'enable_flashvdm_decoder'):
+        vae.enable_flashvdm_decoder()
+
+    print("Creating Pipeline...")
+    pipeline = UltraShapePipeline(
+        vae=vae,
+        model=dit,
+        scheduler=scheduler,
+        conditioner=conditioner,
+        image_processor=image_processor
+    )
+
+    if low_vram:
+        pipeline.enable_model_cpu_offload()
+
+    MODEL_CACHE["pipeline"] = pipeline
+    MODEL_CACHE["config"] = config
+    MODEL_CACHE["ckpt_path"] = ckpt_path
+
+    return pipeline, config
+
+
+@spaces.GPU
+def predict(
+        image_input,
+        mesh_input,
+        steps,
+        scale,
+        octree_res,
+        num_latents,
+        chunk_size,
+        seed,
+        remove_bg,
+        ckpt_path,
+        low_vram
+):
+    # Aggressive memory cleanup at start
+    gc.collect()
+    torch.cuda.empty_cache()
+
+    try:
+        device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+        
+        # Resolve config path relative to this script
+        base_dir = os.path.dirname(os.path.abspath(__file__))
+        config_path = os.path.join(base_dir, "configs", "infer_dit_refine.yaml")
+
+        if not os.path.exists(config_path):
+            raise gr.Error(f"Config not found at {config_path}")
+            
+        if not os.path.exists(ckpt_path):
+            raise gr.Error(f"Checkpoint not found at '{ckpt_path}'. Please provide a valid checkpoint path or download the model weights.")
+
+        pipeline, config = get_pipeline_cached(config_path, ckpt_path, device, low_vram)
+
+        voxel_res = config.model.params.vae_config.params.voxel_query_res
+
+        print(f"Initializing Surface Loader (Token Num: {num_latents})...")
+        loader = SharpEdgeSurfaceLoader(
+            num_sharp_points=204800,
+            num_uniform_points=204800,
+        )
+
+        print(f"Processing inputs...")
+        if image_input is None:
+            raise gr.Error("Image input is required")
+        if mesh_input is None:
+            raise gr.Error("Mesh input is required")
+
+        image = image_input.convert("RGBA")
+
+        if remove_bg or image.mode != 'RGBA':
+            rembg = BackgroundRemover()
+            image = rembg(image)
+
+        # Handle mesh input - Gradio Model3D returns path to file
+        surface = loader(mesh_input, normalize_scale=scale).to(device, dtype=torch.float16)
+        pc = surface[:, :, :3]  # [B, N, 3]
+
+        # Voxelize
+        _, voxel_idx = voxelize_from_point(pc, num_latents, resolution=voxel_res)
+
+        print("Running diffusion process...")
+        gen_device = "cpu" if low_vram else device
+        generator = torch.Generator(gen_device).manual_seed(int(seed))
+
+        with torch.autocast(device_type="cuda", dtype=torch.bfloat16):
+            mesh_out_list, _ = pipeline(
+                image=image,
+                voxel_cond=voxel_idx,
+                generator=generator,
+                box_v=1.0,
+                mc_level=0.0,
+                octree_resolution=int(octree_res),
+                num_chunks=int(chunk_size),
+                num_inference_steps=int(steps)
+            )
+
+        # Save output
+        output_dir = os.path.join(base_dir, "outputs_gradio")
+        os.makedirs(output_dir, exist_ok=True)
+        base_name = "output"
+        save_path = os.path.join(output_dir, f"{base_name}_refined.glb")
+
+        mesh_out = mesh_out_list[0]
+        mesh_out.export(save_path)
+        print(f"Successfully saved to {save_path}")
+
+        return save_path
+
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        raise gr.Error(str(e))
+    finally:
+        # Aggressive memory cleanup at end
+        gc.collect()
+        torch.cuda.empty_cache()
+
+
+def main():
+    parser = argparse.ArgumentParser(description="UltraShape Gradio App")
+    parser.add_argument("--ckpt", type=str, default="checkpoints/ultrashape.pt", help="Path to split checkpoint (.pt)")
+    parser.add_argument("--share", action="store_true", help="Share the gradio app")
+    parser.add_argument("--low_vram", action="store_true", help="Optimize for low VRAM usage")
+
+    args = parser.parse_args()
+
+    # Define a clean & modern Gradio Theme
+    custom_theme = gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="indigo",
+    ).set(
+        button_primary_background_fill="*primary_500",
+        button_primary_background_fill_hover="*primary_600",
+    )
+
+    # Define Gradio Interface
+    with gr.Blocks(title="UltraShape 1.0", theme=custom_theme) as demo:
+        gr.Markdown(
+            """
+            <div style="text-align: center;">
+                <h1>UltraShape 1.0</h1>
+                <h3>High-Fidelity 3D Shape Generation via Scalable Geometric Refinement</h3>
+                <p>Upload a reference image and a coarse mesh to generate a refined high-quality 3D shape.</p>
+            </div>
+            """
+        )
+
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("### Input Parameters")
+                image_input = gr.Image(type="pil", label="Reference Image", image_mode="RGBA")
+                mesh_input = gr.Model3D(label="Coarse Mesh (.glb, .obj)")
+                
+                with gr.Accordion("Advanced Options", open=False):
+                    steps = gr.Slider(minimum=1, maximum=200, value=50, step=1, label="Inference Steps (12-50)")
+                    scale = gr.Slider(minimum=0.1, maximum=2.0, value=0.99, label="Mesh Normalization Scale")
+                    octree_res = gr.Slider(minimum=64, maximum=2048, value=1024, step=64, label="Octree Resolution")
+                    num_latents = gr.Slider(minimum=1024, maximum=32768, value=32768, step=128,
+                                            label="Number of Latent Tokens (Decrease if OOM)")
+                    chunk_size = gr.Slider(minimum=512, maximum=10000, value=2048, step=512,
+                                           label="Chunk Size (Decrease if OOM)")
+                    seed = gr.Number(value=42, label="Random Seed")
+                    remove_bg = gr.Checkbox(label="Remove Background from Image", value=False)
+
+                run_btn = gr.Button("Generate Refined Shape", variant="primary", size="lg")
+
+            with gr.Column(scale=1):
+                gr.Markdown("### Refined Output")
+                output_model = gr.Model3D(label="High-Fidelity Mesh", interactive=False)
+                
+        gr.Markdown(
+            """
+            *Note: If you encounter Out-of-Memory (OOM) errors, try checking the 'Advanced Options' and lowering the `Number of Latent Tokens` (e.g., 8192) and `Chunk Size` (e.g., 2000), or run the app with the `--low_vram` flag.*
+            """
+        )
+
+        run_btn.click(
+            fn=lambda img, mesh, s, sc, oct, nml, chk, sd, rm: predict(
+                img, mesh, s, sc, oct, nml, chk, sd, rm, args.ckpt, args.low_vram
+            ),
+            inputs=[
+                image_input, mesh_input, steps, scale, octree_res, 
+                num_latents, chunk_size, seed, remove_bg
+            ],
+            outputs=[output_model]
+        )
+
+    demo.launch(share=args.share, server_name='0.0.0.0', server_port=7860)
+
+if __name__ == "__main__":
+    main()

configs/infer_dit_refine.yaml

@@ -0,0 +1,72 @@
+model:
+  target: ultrashape.pipelines.UltraShapePipeline
+  params:
+    # 1. VAE Config
+    vae_config:
+      target: ultrashape.models.autoencoders.ShapeVAE
+      params:
+        num_latents: &token_num 32768 # infer token_num
+        embed_dim: 64
+        num_freqs: 8
+        include_pi: false
+        heads: 16
+        width: 1024
+        point_feats: 4
+        num_encoder_layers: 8
+        num_decoder_layers: 16
+        pc_size: 409600 # num_s (204800) + num_u (204800)
+        pc_sharpedge_size: 0
+        downsample_ratio: 20
+        qkv_bias: false
+        qk_norm: true
+        scale_factor: 1.0039506158752403
+        geo_decoder_mlp_expand_ratio: 4
+        # geo_decoder_downsample_ratio: 1
+        geo_decoder_ln_post: true
+        enable_flashvdm: true
+        jitter_query: false
+        voxel_query: true
+        voxel_query_res: &voxel_query_res 128
+      
+    # 2. DiT Denoiser Config
+    dit_cfg:
+      target: ultrashape.models.denoisers.dit_mask.RefineDiT
+      params:
+        input_size: *token_num
+        in_channels: 64
+        hidden_size: 2048
+        context_dim: 1024
+        depth: 21
+        num_heads: 16
+        qk_norm: true
+        text_len: 1370
+        qk_norm_type: 'rms'
+        qkv_bias: false
+        num_moe_layers: 6
+        num_experts: 8
+        moe_top_k: 2
+        voxel_query_res: *voxel_query_res
+
+    # 3. Image Encoder Config
+    conditioner_config:
+      target: ultrashape.models.conditioner_mask.SingleImageEncoder
+      params:
+        drop_ratio: 0.0
+        main_image_encoder:
+            type: DinoImageEncoder 
+            kwargs:
+                version: 'facebook/dinov2-large' 
+                image_size: 1022
+                use_cls_token: true
+        
+    # 4. Scheduler Config
+    scheduler_cfg:
+      target: ultrashape.schedulers.FlowMatchEulerDiscreteScheduler
+      params:
+        num_train_timesteps: 1000
+
+    # 5. Image Processor
+    image_processor_cfg:
+      target: ultrashape.preprocessors.ImageProcessorV2
+      params: 
+        size: 1024

configs/train_dit_refine.yaml

@@ -0,0 +1,138 @@
+name: "UltraShape Refine DiT"
+
+training:
+  # ckpt_path:
+  steps: 10_0000_0000
+  use_amp: true
+  amp_type: "bf16"
+  base_lr: 1e-5
+  gradient_clip_val: 1.0
+  gradient_clip_algorithm: "norm"
+  every_n_train_steps: 2500
+  val_check_interval: 1000
+  limit_val_batches: 16
+  accumulate_grad_batches: 4
+
+dataset:
+  target: ultrashape.data.objaverse_dit.ObjaverseDataModule
+  params:
+    batch_size: 1
+    num_workers: 4
+    val_num_workers: 4
+
+    # data
+    training_data_list: data/data_list
+    sample_pcd_dir: data/sample
+    image_data_json: data/render.json
+
+    # image
+    image_size: &image_size 1022  # 518
+    mean: &mean [0.5, 0.5, 0.5]
+    std: &std [0.5, 0.5, 0.5]
+    padding: true
+
+    # input_pcd
+    pc_size: &pc_size 163840
+    pc_sharpedge_size: &pc_sharpedge_size 0
+    sharpedge_label: &sharpedge_label true
+    return_normal: true
+
+model:
+  target: ultrashape.models.diffusion.flow_matching_dit_trainer.Diffuser
+  params:
+    ckpt_path: ckpt/dit_step=XXX.ckpt
+    scale_by_std: false
+    z_scale_factor: &z_scale_factor 1.0039506158752403
+    torch_compile: false
+
+    vae_config:
+      target: ultrashape.models.autoencoders.ShapeVAE
+      from_pretrained: ckpt/vae_step=XXX.ckpt
+      params:
+        num_latents: &num_latents 8192  # 4096
+        embed_dim: 64
+        num_freqs: 8
+        include_pi: false
+        heads: 16
+        width: 1024
+        point_feats: 4
+        num_encoder_layers: 8
+        num_decoder_layers: 16
+        pc_size: *pc_size
+        pc_sharpedge_size: *pc_sharpedge_size
+        downsample_ratio: 20
+        qkv_bias: false
+        qk_norm: true
+        scale_factor: *z_scale_factor
+        geo_decoder_mlp_expand_ratio: 4
+        geo_decoder_downsample_ratio: 1
+        geo_decoder_ln_post: true
+        enable_flashvdm: true
+        jitter_query: false
+        voxel_query: true
+        voxel_query_res: 128
+
+    cond_config:
+      target: ultrashape.models.conditioner_mask.SingleImageEncoder
+      params:
+        drop_ratio: 0.1
+        # disable_drop: false
+        main_image_encoder:
+            type: DinoImageEncoder 
+            kwargs:
+                version: 'facebook/dinov2-large'
+                image_size: *image_size
+                use_cls_token: true
+
+    dit_cfg:
+      target: ultrashape.models.denoisers.dit_mask.RefineDiT
+      params:
+        input_size: *num_latents
+        in_channels: 64
+        hidden_size: 2048
+        context_dim: 1024
+        depth: 21
+        num_heads: 16
+        qk_norm: true
+        text_len: 5330  # 1370
+        qk_norm_type: 'rms'
+        qkv_bias: false
+        num_moe_layers: 6
+        num_experts: 8
+        moe_top_k: 2
+        
+    scheduler_cfg:
+      transport:
+        target: ultrashape.models.diffusion.transport.create_transport
+        params:
+          path_type: Linear
+          prediction: velocity
+      sampler:
+        target: ultrashape.models.diffusion.transport.Sampler
+        params: {}
+        ode_params:
+          sampling_method: euler
+          num_steps: &num_steps 50
+
+    optimizer_cfg:
+      optimizer:
+        target: torch.optim.AdamW
+        params:
+          betas: [0.9, 0.99]
+          eps: 1.e-6
+          weight_decay: 1.e-2
+
+      scheduler:
+        target: ultrashape.utils.trainings.lr_scheduler.LambdaWarmUpCosineFactorScheduler
+        params:
+          warm_up_steps: 500 # 5000
+          f_start: 1.e-6
+          f_min: 1.e-3
+          f_max: 1.0
+
+    pipeline_cfg:
+      target: ultrashape.pipelines.UltraShapePipeline
+
+    image_processor_cfg:
+      target: ultrashape.preprocessors.ImageProcessorV2
+      params: {}

configs/train_vae_refine.yaml

@@ -0,0 +1,89 @@
+name: "UltraShape Refine VAE"
+
+training:
+  # ckpt_path: 
+  steps: 10_0000_0000
+  use_amp: true
+  amp_type: "bf16"
+  base_lr: 1e-5
+  gradient_clip_val: 1.0
+  gradient_clip_algorithm: "norm"
+  every_n_train_steps: 2500
+  val_check_interval: 1000
+  limit_val_batches: 16
+
+dataset:
+  target: ultrashape.data.objaverse_vae.ObjaverseDataModule
+  params:
+    batch_size: 4
+    num_workers: 4
+    val_num_workers: 4
+
+    # data 
+    training_data_list: data/data_list
+    sample_pcd_dir: data/sample
+
+    # input_pcd
+    pc_size: &pc_size 163840
+    pc_sharpedge_size: &pc_sharpedge_size 0
+    sharpedge_label: &sharpedge_label true
+    return_normal: true
+
+    # sup_pcd
+    sup_near_uni_size: 100000
+    sup_near_sharp_size: 100000
+    sup_space_size: 100000
+    tsdf_threshold: 0.01
+
+model:
+  target: ultrashape.models.autoencoders.VAETrainer
+  params:
+    ckpt_path: ckpt/vae_step=15000.ckpt
+    torch_compile: false
+    save_dir: outputs/vae_recon
+    mc_res: 512
+    vae_config:
+      target: ultrashape.models.autoencoders.ShapeVAE
+      params:
+        num_latents: &num_latents 8192 # 4096
+        embed_dim: 64
+        num_freqs: 8
+        include_pi: false
+        heads: 16
+        width: 1024
+        point_feats: 4
+        num_encoder_layers: 8
+        num_decoder_layers: 16
+        pc_size: *pc_size
+        pc_sharpedge_size: *pc_sharpedge_size
+        downsample_ratio: 20
+        qkv_bias: false
+        qk_norm: true
+        geo_decoder_mlp_expand_ratio: 4
+        geo_decoder_downsample_ratio: 1
+        geo_decoder_ln_post: true
+        enable_flashvdm: true
+        jitter_query: true
+
+    optimizer_cfg:
+      optimizer:
+        target: torch.optim.AdamW
+        params:
+          betas: [0.9, 0.99]
+          eps: 1.e-6
+          weight_decay: 1.e-2
+
+      scheduler:
+        target: ultrashape.utils.trainings.lr_scheduler.LambdaWarmUpCosineFactorScheduler
+        params:
+          warm_up_steps: 500 # 5000
+          f_start: 1.e-6
+          f_min: 1.e-3
+          f_max: 1.0
+        
+    loss_cfg:
+      lambda_logits: 1.
+      lambda_kl: 0.001
+      # lambda_eik: -1.
+      # lambda_sn: -1.
+      # lambda_sign: -1.

docs/assets/videos/1.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cdb3e1c44128f6845b68c80d957d940acd61974007ef97a32090ec6d47b25eee
+size 1866665

docs/assets/videos/10.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:24c03137fbcde1b89954785570a1cfdde8ba98a2ea87895a144e250351aeb0a4
+size 1239537

docs/assets/videos/11.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:992621f458ea10b81185d771406da796694464217ecff38ed0942d2b2bb6be8a
+size 1760679

docs/assets/videos/12.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a12fd3f3d8b27dba0c3224e9e6eb44505bb321155557eef1721b3061c2454f1
+size 2014267

docs/assets/videos/13.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e6bad4d7050915cd2494b32dce84ce4263556c07fc89fe85dcec12e46fb958d1
+size 1510265

docs/assets/videos/2.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:79affbfd31d1f628b213fde17ecfe325fb50a35637ea45e450fe5488a98197d7
+size 1838655

docs/assets/videos/3.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e454e5e53f58c1143df86e652735f83f7ae5abf6091bee68a754e1ad40d70844
+size 1766589

docs/assets/videos/4.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cb5185a53c54e3a824928dbfe74aad6ac539eb9399e4712c09a487d623a8e52e
+size 2276016

docs/assets/videos/5.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b80db6768af638d3b95b4063323ade4eaf71d527eaca44112c6ce993acfb5775
+size 2169303

docs/assets/videos/6.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b723d0886b0356fe22be77304c083186c8df73c0a9e2bdf1692eb1cbad5c823a
+size 1446235

docs/assets/videos/7.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92cd398305ebe8f576f0a959c870fd4545e5d237d81883d0a2b4215e6a3289cd
+size 1599638

docs/assets/videos/8.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2248c2b1f97a47e33e49c287780ca57ba61f4804c07be55562da592bb783639a
+size 1749235

docs/assets/videos/9.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7c7be53dec92c8511399d08c2979d30ef59885d0ab3a1d95d682be683c922f00
+size 1119951

docs/carousel.css

@@ -0,0 +1,102 @@
+.x-carousel-tags {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    flex-wrap: wrap;
+}
+
+.x-carousel-tag {
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    color: #2a2a2a;
+    margin: 4px;
+    padding: 8px 16px;
+    text-align: center;
+}
+
+.x-carousel-tag:hover {
+    background-color: rgba(255, 255, 255, 1);
+    transform: translateY(-2px);
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 6px;
+}
+
+.x-carousel-tag.active { border-color: #666; background-color: rgba(255, 255, 255, 1); }
+
+.x-carousel-slider {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.x-carousel-slider-item {
+    max-width: 100%;
+    width: 100%;
+    flex: 1 0 0;
+}
+
+.x-carousel-nav {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.x-carousel-switch {
+    width: 50px;
+    height: 25px;
+    margin: 8px;
+    border-radius: 25px;
+    cursor: pointer;
+    user-select: none;
+    color: rgba(42, 42, 42, 0.4);
+    font-size: 24px;
+    font-weight: 500;
+    transition: all 0.25s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.x-carousel-switch:hover {
+    color: rgba(42, 42, 42, 0.8);
+    transform: scale(1.05);
+}
+
+.x-carousel-pages {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.x-carousel-page {
+    width: 10px;
+    height: 10px;
+    border-radius: 10px;
+    background: rgba(42, 42, 42, 0.2);
+    /* background: linear-gradient(107.54deg, #0078d4 .39%, #8661c5 51.23%, #ff9349 100%) fixed; */
+    margin: 0 3px;
+    cursor: pointer;
+    transition: all 0.25s ease;
+}
+
+.x-carousel-page:hover {
+    background: rgba(42, 42, 42, 0.5);
+}
+
+.x-carousel-page.x-carousel-page-active {
+    width: 12px;
+    height: 13px;
+}

docs/carousel.js

@@ -0,0 +1,249 @@
+/**
+ * Carousel functionality for research project page
+ * Handles navigation, filtering, and page indicators for carousel components
+ */
+
+(function() {
+    'use strict';
+
+    /**
+     * Initialize carousel functionality
+     * @param {string} carouselId - ID of the carousel container
+     */
+    function initCarousel(carouselId) {
+        const carousel = document.getElementById(carouselId);
+        if (!carousel) return;
+
+        const slider = carousel.querySelector('.x-carousel-slider');
+        const allItems = carousel.querySelectorAll('.x-carousel-slider-item');
+        const prevBtn = carousel.querySelector('.x-carousel-nav .x-carousel-switch:first-child');
+        const nextBtn = carousel.querySelector('.x-carousel-nav .x-carousel-switch:last-child');
+        const pages = carousel.querySelectorAll('.x-carousel-page');
+        const tags = carousel.querySelectorAll('.x-carousel-tag');
+
+        if (!slider || !allItems.length) return;
+
+        let currentIndex = 0;
+        let currentFilter = 'all'; // Current filter: 'all', 'class1', 'class2', 'class3'
+        let filteredItems = Array.from(allItems); // Currently visible items
+
+        /**
+         * Filter items by tag
+         * @param {string} filter - Filter value: 'all', 'class1', 'class2', 'class3'
+         */
+        function filterItems(filter) {
+            currentFilter = filter;
+            
+            // Filter items based on data-tag attribute
+            if (filter === 'all') {
+                filteredItems = Array.from(allItems);
+            } else {
+                filteredItems = Array.from(allItems).filter(item => {
+                    return item.getAttribute('data-tag') === filter;
+                });
+            }
+
+            // Reset to first item after filtering
+            currentIndex = 0;
+            
+            // Update visibility of all items
+            allItems.forEach(item => {
+                if (filteredItems.includes(item)) {
+                    item.style.display = 'block';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+
+            // Show first filtered item
+            goToSlide(0);
+            updatePages();
+        }
+
+        /**
+         * Navigate to a specific slide (within filtered items)
+         * @param {number} index - Index of the slide to show
+         */
+        function goToSlide(index) {
+            const totalItems = filteredItems.length;
+            currentIndex = Math.max(0, Math.min(index, totalItems - 1));
+
+            // Hide all filtered items
+            filteredItems.forEach(item => {
+                item.style.display = 'none';
+            });
+
+            // Show current item - use block instead of flex to preserve card's flex layout
+            if (filteredItems[currentIndex]) {
+                filteredItems[currentIndex].style.display = 'block';
+            }
+
+            updatePages();
+            updateButtons();
+        }
+
+        /**
+         * Update page indicators to reflect current slide
+         */
+        function updatePages() {
+            const totalItems = filteredItems.length;
+            pages.forEach((page, index) => {
+                if (index === currentIndex && index < totalItems) {
+                    page.classList.add('x-carousel-page-active');
+                } else {
+                    page.classList.remove('x-carousel-page-active');
+                }
+            });
+            
+            // Hide unused page indicators
+            pages.forEach((page, index) => {
+                if (index >= totalItems) {
+                    page.style.display = 'none';
+                } else {
+                    page.style.display = '';
+                }
+            });
+        }
+
+        /**
+         * Update navigation buttons state (enable/disable at boundaries)
+         */
+        function updateButtons() {
+            const totalItems = filteredItems.length;
+            if (prevBtn) {
+                prevBtn.style.opacity = currentIndex === 0 ? '0.3' : '1';
+                prevBtn.style.cursor = currentIndex === 0 ? 'not-allowed' : 'pointer';
+            }
+            if (nextBtn) {
+                nextBtn.style.opacity = currentIndex === totalItems - 1 ? '0.3' : '1';
+                nextBtn.style.cursor = currentIndex === totalItems - 1 ? 'not-allowed' : 'pointer';
+            }
+        }
+
+        /**
+         * Tag filtering (only for results-gen carousel)
+         */
+        if (tags.length && carouselId === 'results-gen') {
+            tags.forEach((tag) => {
+                tag.addEventListener('click', function() {
+                    const filter = tag.getAttribute('data-filter');
+                    if (!filter) return;
+                    
+                    // Remove active class from all tags
+                    tags.forEach(t => t.classList.remove('active'));
+                    // Add active class to clicked tag
+                    tag.classList.add('active');
+                    // Filter items
+                    filterItems(filter);
+                });
+            });
+        }
+
+        // Previous/Next buttons
+        if (prevBtn) {
+            prevBtn.addEventListener('click', function() {
+                if (currentIndex > 0) {
+                    goToSlide(currentIndex - 1);
+                }
+            });
+        }
+
+        if (nextBtn) {
+            nextBtn.addEventListener('click', function() {
+                const totalItems = filteredItems.length;
+                if (currentIndex < totalItems - 1) {
+                    goToSlide(currentIndex + 1);
+                }
+            });
+        }
+
+        // Page indicators - click to jump to specific slide
+        pages.forEach((page, index) => {
+            page.addEventListener('click', function() {
+                goToSlide(index);
+            });
+        });
+
+        // Initialize - filter to 'all' and show first item
+        filterItems('all');
+    }
+
+    // Initialize all carousels when DOM is ready
+    document.addEventListener('DOMContentLoaded', function() {
+        initCarousel('results-gen');
+        initCarousel('results-recon');
+    });
+})();
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    
+    // 1. 预先创建一个用于显示图片的容器（一开始隐藏）
+    const promptImgContainer = document.createElement('div');
+    promptImgContainer.id = 'glb-prompt-image-container';
+    promptImgContainer.style.cssText = `
+        position: fixed; 
+        bottom: 20px; 
+        right: 20px; 
+        width: 200px; 
+        height: 200px; 
+        z-index: 10000; /* 保证在最上层 */
+        display: none; /* 默认隐藏 */
+        background-color: white;
+        padding: 5px;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+        cursor: pointer; /* 提示可点击关闭 */
+    `;
+    
+    // 创建图片元素
+    const promptImg = document.createElement('img');
+    promptImg.style.cssText = `
+        width: 100%; 
+        height: 100%; 
+        object-fit: contain; 
+        display: block;
+    `;
+    promptImgContainer.appendChild(promptImg);
+
+    // 添加关闭提示文字（可选）
+    const closeTip = document.createElement('div');
+    closeTip.innerText = "Click to close";
+    closeTip.style.cssText = "position:absolute; top:-25px; right:0; color:white; font-size:12px; background:rgba(0,0,0,0.5); padding:2px 5px; border-radius:4px;";
+    promptImgContainer.appendChild(closeTip);
+
+    document.body.appendChild(promptImgContainer);
+
+    // 点击图片容器时，自己隐藏
+    promptImgContainer.addEventListener('click', function() {
+        this.style.display = 'none';
+    });
+
+
+    // 2. 为所有的 View GLB 按钮添加点击事件
+    const buttons = document.querySelectorAll('.x-button');
+    
+    buttons.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            // 获取 HTML 中定义的 data-prompt 属性 (assets/images/1.png)
+            const imgUrl = this.getAttribute('data-prompt');
+            
+            if (imgUrl) {
+                promptImg.src = imgUrl;
+                promptImgContainer.style.display = 'block'; // 显示图片
+            }
+        });
+    });
+
+    // 3. (可选) 如果你的 GLB 查看器有“关闭”按钮（例如 class 为 .close-viewer），
+    // 你需要在这里添加逻辑，让点击关闭查看器时，图片也跟着消失。
+    // 假设关闭按钮的类名是 .close-btn (你需要确认实际类名)
+    /*
+    const closeGlbBtn = document.querySelector('.close-btn-class-name');
+    if(closeGlbBtn) {
+        closeGlbBtn.addEventListener('click', () => {
+             promptImgContainer.style.display = 'none';
+        });
+    }
+    */
+});

docs/index copy.html

@@ -0,0 +1,788 @@
+<html lang="en"><head><style type="text/css">
+.anticon {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.anticon > * {
+  line-height: 1;
+}
+
+.anticon svg {
+  display: inline-block;
+}
+
+.anticon::before {
+  display: none;
+}
+
+.anticon .anticon-icon {
+  display: block;
+}
+
+.anticon[tabindex] {
+  cursor: pointer;
+}
+
+.anticon-spin::before,
+.anticon-spin {
+  display: inline-block;
+  -webkit-animation: loadingCircle 1s infinite linear;
+  animation: loadingCircle 1s infinite linear;
+}
+
+@-webkit-keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+</style>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>UltraShape 1.0: High-Fidelity 3D Shape Generation via Scalable Geometric Refinement</title>
+        <!-- TODO: Replace with UltraShape 1.0 favicon -->
+        <link rel="icon" href="assets/favicon.png">
+        <link rel="stylesheet" href="stylesheet.css">
+        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="window.css">
+        <link rel="stylesheet" href="carousel.css">
+        <link rel="stylesheet" href="main.css">
+        <link rel="stylesheet" href="pv.css">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
+        <script src="carousel.js" defer></script>
+    </head>
+    <body>
+        <div class="animated-gradient hero-expandable" style="width: 100%; height: 90vh; position: relative; overflow: hidden;">
+    
+            <img 
+                src="assets\images\teaser.png" 
+                alt="Hero background" 
+                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9;"
+            >
+            <div style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ffffff; padding: 80px 20px; text-align: center;">
+
+                <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Inter:wght@300;400&display=swap" rel="stylesheet">
+
+                <div style="font-family: 'Outfit', sans-serif;">
+                    
+                    <div style="
+                        font-size: 100px; 
+                        font-weight: 700; 
+                        margin-bottom: 24px; 
+                        background: linear-gradient(135deg, #ffffff 0%, #c3ecff 100%);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                        letter-spacing: -2px; 
+                        text-shadow: 0px 10px 30px rgba(0,0,0,0.3); 
+                    ">
+                        UltraShape 1.0
+                    </div>
+
+                    <div style="
+                        font-family: 'Inter', sans-serif;
+                        font-size: 60px; 
+                        font-weight: 600; 
+                        color: rgba(255, 255, 255, 0.9);
+                        margin-bottom: 48px; 
+                        max-width: 1200px; 
+                        line-height: 1.6;
+                        letter-spacing: 1px; 
+                    ">
+                        High-Fidelity 3D Shape Generation via Scalable Geometric Refinement
+                    </div>
+
+                </div>
+
+                <div style="font-size: 22px; font-weight: 400; margin-bottom: 48px; max-width: 1200px; line-height: 1.8; opacity: 0.95;">
+                    We introduce UltraShape-1.0, a scalable two-stage diffusion framework for high-quality 3D geometry generation, enhanced by an advanced data processing pipeline that ensures geometric details through watertight processing and quality filtering.
+                </div>
+                <div id="links" style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
+                    <div><a id="paper" href="https://arxiv.org/pdf/2512.21185">Tech Report</a></div>
+                    <div><a id="code" href="https://github.com/PKU-YuanGroup/UltraShape-1.0">Code</a></div>
+                    <div><a id="demo" href="#demo">Demo</a></div>
+                </div>
+            </div>
+        </div>
+
+        <div id="main" style="background: #faf9f7;">
+            <div class="x-section-title" style="text-align: center; margin-top: 80px;">Main Pipeline</div>
+            
+            <div style="background: #f8f9fa; padding: 80px 20px;">
+                <div style="max-width: 1200px; margin: 40px auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); position: relative; padding: 20px; background-color: #ffffff;">
+                    
+                    <img src="assets/images/pipeline.png?v=2" alt="Video cover" style="width: 100%; height: auto; display: block;">
+                    
+                    
+                </div>
+            </div>    
+
+            <div class="x-section-title"  style="text-align: center; margin-top: 50px;">Image to 3D Shape Generation</div>
+            <div id="results-gen">
+                <div class="x-carousel-tags">
+                    <!-- <div class="x-carousel-tag active" data-filter="all">All</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class1">Object</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class2">Multi-Object</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class3">Character</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class4">Car</div> -->
+                </div>
+                <div class="x-carousel-slider">
+                    <!-- Item 1 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/1.glb">
+                                View GLB
+                            </div>
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px; padding: 12px 24px; font-size: 24px;" data-glb="assets/meshs/1.glb" data-prompt="assets/images/1.png">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/1.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/1.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 2 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/2.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/2.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/2.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 3 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/3.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/3.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/3.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 4 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/4.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/4.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/4.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 5 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/5.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/5.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/5.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 6 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/6.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/6.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/6.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 7 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/7.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/7.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/7.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 8 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/8.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/8.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/8.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 9 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/9.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/9.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/9.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 10 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/10.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/10.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/10.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 11 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/11.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/11.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/11.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 12 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/12.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/12.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/12.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 13 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/13.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/13.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/13.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="x-carousel-nav">
+                    <div class="x-carousel-switch">&lt;</div>
+                    <div class="x-carousel-pages">
+                        <div class="x-carousel-page x-carousel-page-active"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                    </div>
+                    <div class="x-carousel-switch">&gt;</div>
+                </div>
+            </div>
+
+            <div class="x-section-title" style="text-align: center; margin-top: 150px;">Comparison of 3D Shape Generation</div>
+
+            <div id="results-recon" style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
+                <div class="x-carousel-slider">
+                    
+                    <!-- 第一张图 -->
+                    <div class="x-carousel-slider-item" style="flex-basis: calc(100% / 1);">
+                        <!-- 修改1：增加 display: flex; flex-direction: column; -->
+                        <div class="x-card" style="height: 86vh; background-color: #faf9f7; border-radius: 4px; display: flex; flex-direction: column; padding: 0 0 40px 0;">
+                            <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 24px; color: #333; flex-shrink: 0;">
+                                Comparison with Open-Source Models 1
+                            </div>
+                            <!-- 修改2：将图片高度改为 flex: 1 或 auto，去掉 height: 100% -->
+                            <div style="flex: 1; min-height: 0; padding: 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin: 0 20px 20px 20px; display: flex; align-items: center; justify-content: center;">
+                                <img 
+                                    src="assets/images/comp-open1.png" 
+                                    alt="Comparison with Open-Source Models 1"
+                                    style="max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 第二张图 -->
+                    <div class="x-carousel-slider-item" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 86vh; background-color: #faf9f7; border-radius: 4px; display: flex; flex-direction: column; padding: 0 0 40px 0;">
+                            <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 24px; color: #333; flex-shrink: 0;">
+                                Comparison with Open-Source Models 2
+                            </div>
+                            <div style="flex: 1; min-height: 0; padding: 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin: 0 20px 20px 20px; display: flex; align-items: center; justify-content: center;">
+                                <img 
+                                    src="assets/images/comp-open2.png" 
+                                    alt="Comparison with Open-Source Models 2"
+                                    style="max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;"
+                                >
+                            </div>
+                            <!-- <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 16px; color: #333;">
+                                Comparison with Open-Source Models 2
+                            </div> -->
+                        </div>
+                    </div>
+
+                    <!-- 第三张图 -->
+                    <div class="x-carousel-slider-item" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 86vh; background-color: #faf9f7; border-radius: 4px; display: flex; flex-direction: column; padding: 0 0 40px 0;">
+                            <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 24px; color: #333; flex-shrink: 0;">
+                                Comparison with Commercial Models
+                            </div>
+                            <div style="flex: 1; min-height: 0; padding: 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin: 0 20px 20px 20px; display: flex; align-items: center; justify-content: center;">
+                                <img 
+                                    src="assets/images/comp-close.png" 
+                                    alt="Comparison with Close Models 1"
+                                    style="max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;"
+                                >
+                            </div>
+                            <!-- <div class="x-img-caption" style="padding: 15px; text-align: center; background: #faf9f7; font-size: 16px; color: #333;">
+                                Comparison with Close Models 1
+                            </div> -->
+                        </div>
+                    </div>
+
+                </div>
+                
+                <div class="x-carousel-nav">
+                    <div class="x-carousel-switch">&lt;</div>
+                    <div class="x-carousel-pages">
+                        <div class="x-carousel-page x-carousel-page-active"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                    </div>
+                    <div class="x-carousel-switch">&gt;</div>
+                </div>
+            </div>
+
+            </div>
+            <div class="x-small-header" style="text-align: center; margin-top: -100px;">Citation</div>
+            <div class="bibtex-entry" style="max-width: 800px; width: 90%; margin: 20px auto; box-sizing: border-box; background-color: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+                <div class="line">
+                    <span class="value">@article{jia2025ultrashape,</span>
+                </div>
+                <div class="line">
+                    <span class="key">    title={</span>
+                    <span class="value">UltraShape 1.0: High-Fidelity 3D Shape Generation via Scalable Geometric Refinement},</span>
+                </div>
+                <div class="line">
+                    <span class="key">    author={</span>
+                    <span class="value">Jia, Tanghui and Yan, Dongyu and Hao, Dehao and Li, Yang and Zhang, Kaiyi and He, Xianyi and Li, Lanjiong and Chen, Jinnan and Jiang, Lutao and Yin, Qishen and Quan, Long and Chen, Ying-Cong and Yuan, Li},</span>
+                </div>
+                <div class="line">
+                    <span class="key">    journal={</span>
+                    <span class="value">arxiv preprint arXiv:2512.21185},</span>
+                </div>
+                <div class="line">
+                    <span class="key">    year={</span>
+                    <span class="value">2025}</span>
+                </div>
+                <div class="line">}</div>
+            </div>
+            <div style="height: 100px;"> </div>
+
+        </div>
+
+        <footer style="text-align: center; padding: 20px 0; color: #666; font-size: 14px;">
+            <p>
+                The website template was borrowed from <a href="https://microsoft.github.io/TRELLIS.2/" target="_blank">TRELLIS.2</a>.
+            </p>
+        </footer>
+
+        <!-- Scroll Down Indicator -->
+        <div id="scroll-indicator" class="scroll-indicator">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M7 13l5 5 5-5"></path>
+            </svg>
+        </div>
+
+    <div id="fullscreen">
+        <div id="window">
+            <div id="close">✕</div>
+            <div id="content"></div>
+        </div>
+    </div>
+        <script>
+            // Mouse-following gradient effect
+            document.addEventListener('DOMContentLoaded', function() {
+                const gradientEl = document.querySelector('.animated-gradient');
+                if (!gradientEl) return;
+
+                gradientEl.addEventListener('mousemove', function(e) {
+                    const rect = gradientEl.getBoundingClientRect();
+                    const x = ((e.clientX - rect.left) / rect.width) * 100;
+                    const y = ((e.clientY - rect.top) / rect.height) * 100;
+                    
+                    gradientEl.style.setProperty('--mouse-x', x + '%');
+                    gradientEl.style.setProperty('--mouse-y', y + '%');
+                });
+
+                // Reset to center when mouse leaves
+                gradientEl.addEventListener('mouseleave', function() {
+                    gradientEl.style.setProperty('--mouse-x', '50%');
+                    gradientEl.style.setProperty('--mouse-y', '50%');
+                });
+            });
+
+            // Scroll expand effect - hero section expands on scroll
+            (function() {
+                const hero = document.querySelector('.hero-expandable');
+                if (!hero) return;
+
+                const windowHeight = window.innerHeight;
+                const expandThreshold = windowHeight * 0.5; // Start expanding after scrolling 50vh
+                
+                function updateHero() {
+                    const scrollY = window.scrollY;
+                    
+                    if (scrollY === 0) {
+                        // Initial state - hero is 90vh (positioned lower, showing content below)
+                        hero.style.height = '90vh';
+                    } else if (scrollY <= expandThreshold) {
+                        // Expanding phase - hero grows from 90vh to 100vh
+                        const progress = scrollY / expandThreshold;
+                        const newHeight = 90 + (10 * progress);
+                        hero.style.height = newHeight + 'vh';
+                    } else {
+                        // Fully expanded - hero is 100vh
+                        hero.style.height = '100vh';
+                    }
+                }
+
+                // Initial state
+                hero.style.height = '90vh';
+                
+                // Throttle scroll for better performance
+                let ticking = false;
+                window.addEventListener('scroll', function() {
+                    if (!ticking) {
+                        window.requestAnimationFrame(function() {
+                            updateHero();
+                            ticking = false;
+                        });
+                        ticking = true;
+                    }
+                }, { passive: true });
+                
+                // Handle initial load
+                updateHero();
+            })();
+
+            // View GLB functionality
+            (function() {
+                const fullscreen = document.getElementById('fullscreen');
+                const windowEl = document.getElementById('window');
+                const closeBtn = document.getElementById('close');
+                const content = document.getElementById('content');
+
+                if (!fullscreen || !windowEl || !closeBtn || !content) return;
+
+                /**
+                 * Open fullscreen window with GLB model
+                 * @param {string} glbPath - Path to GLB file
+                 * @param {string} prompt - Input prompt text
+                 */
+                function openGLBViewer(glbPath, prompt) {
+                    // Create model-viewer element
+                    content.innerHTML = `
+                        <div style="display: flex; flex-wrap: wrap; align-items: start; justify-content: center;">
+                            <div class="modelviewer-container" style="width: 500px; height: 500px;">
+                                <model-viewer
+                                    src="${glbPath}"
+                                    alt="3D Model"
+                                    camera-controls
+                                    auto-rotate
+                                    interaction-policy="allow-when-focused"
+                                    reveal="auto"
+                                    style="width: 100%; height: 100%; background-color: #f5f5f5; display: block;"
+                                    loading="eager"
+                                    shadow-intensity="1"
+                                    exposure="1"
+                                    tone-mapping="neutral"
+                                >
+                                </model-viewer>
+                            </div>
+                            <div class="modelviewer-panel">
+                                <div class="modelviewer-panel-desc">
+                                    <div>Input Prompt</div>
+                                </div>
+                                <div class="modelviewer-panel-prompt">
+                                    ${prompt || '[PLACEHOLDER: Input prompt text]'}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+
+                    // Show fullscreen window
+                    fullscreen.style.display = 'flex';
+                    // Trigger opacity transition after a short delay to ensure model-viewer is ready
+                    setTimeout(() => {
+                        fullscreen.style.opacity = '1';
+                        // Get the model-viewer element and add error handling
+                        const modelViewer = content.querySelector('model-viewer');
+                        if (modelViewer) {
+                            // Add load success handler
+                            modelViewer.addEventListener('load', () => {
+                                console.log('Model loaded successfully:', glbPath);
+                                // Force update after load
+                                setTimeout(() => {
+                                    modelViewer.style.width = '100%';
+                                    modelViewer.style.height = '100%';
+                                    modelViewer.style.display = 'block';
+                                }, 100);
+                            });
+                            
+                            // Add error handler
+                            modelViewer.addEventListener('error', (e) => {
+                                console.error('Model loading error:', e);
+                                console.error('Failed path:', glbPath);
+                                const container = content.querySelector('.modelviewer-container');
+                                if (container) {
+                                    container.innerHTML = `
+                                        <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #d32f2f; text-align: center; padding: 20px;">
+                                            <div>
+                                                <div style="font-size: 16px; margin-bottom: 8px; font-weight: 600;">Failed to load model</div>
+                                                <div style="font-size: 12px; color: #666; margin-bottom: 8px;">Path: ${glbPath}</div>
+                                                <div style="font-size: 11px; color: #999;">Please check the file path and ensure the file exists</div>
+                                            </div>
+                                        </div>
+                                    `;
+                                }
+                            });
+                        } else {
+                            console.error('model-viewer element not found after creation');
+                        }
+                    }, 100);
+                }
+
+                /**
+                 * Close fullscreen window
+                 */
+                function closeGLBViewer() {
+                    fullscreen.style.opacity = '0';
+                    setTimeout(() => {
+                        fullscreen.style.display = 'none';
+                        content.innerHTML = '';
+                    }, 250); // Match transition duration
+                }
+
+                // Add click handlers to all View GLB buttons
+                document.addEventListener('click', function(e) {
+                    const button = e.target.closest('.x-button');
+                    if (button && button.textContent.trim() === 'View GLB') {
+                        const glbPath = button.getAttribute('data-glb');
+                        const prompt = button.getAttribute('data-prompt');
+                        if (glbPath) {
+                            openGLBViewer(glbPath, prompt);
+                        }
+                    }
+                });
+
+                // Close button handler
+                closeBtn.addEventListener('click', closeGLBViewer);
+
+                // Close on backdrop click
+                fullscreen.addEventListener('click', function(e) {
+                    if (e.target === fullscreen) {
+                        closeGLBViewer();
+                    }
+                });
+
+                // Close on Escape key
+                document.addEventListener('keydown', function(e) {
+                    if (e.key === 'Escape' && fullscreen.style.display === 'flex') {
+                        closeGLBViewer();
+                    }
+                });
+            })();
+        </script>
+    </body></html>

docs/index.html

@@ -0,0 +1,884 @@
+<html lang="en"><head><style type="text/css">
+.anticon {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.anticon > * {
+  line-height: 1;
+}
+
+.anticon svg {
+  display: inline-block;
+}
+
+.anticon::before {
+  display: none;
+}
+
+.anticon .anticon-icon {
+  display: block;
+}
+
+.anticon[tabindex] {
+  cursor: pointer;
+}
+
+.anticon-spin::before,
+.anticon-spin {
+  display: inline-block;
+  -webkit-animation: loadingCircle 1s infinite linear;
+  animation: loadingCircle 1s infinite linear;
+}
+
+@-webkit-keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loadingCircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+</style>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>UltraShape 1.0: High-Fidelity 3D Shape Generation via Scalable Geometric Refinement</title>
+        <!-- TODO: Replace with UltraShape 1.0 favicon -->
+        <link rel="icon" href="assets/favicon.png">
+        <link rel="stylesheet" href="stylesheet.css">
+        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="window.css">
+        <link rel="stylesheet" href="carousel.css">
+        <link rel="stylesheet" href="main.css">
+        <link rel="stylesheet" href="pv.css">
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+        <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
+        <script src="carousel.js" defer></script>
+    </head>
+    <body>
+        <div class="animated-gradient hero-expandable" style="width: 100%; height: 90vh; position: relative; overflow: hidden;">
+    
+            <img 
+                src="assets\images\teaser.png" 
+                alt="Hero background" 
+                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9;"
+            >
+            <div style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ffffff; padding: 80px 20px; text-align: center;">
+
+                <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Inter:wght@300;400&display=swap" rel="stylesheet">
+
+                <div style="font-family: 'Outfit', sans-serif;">
+                    
+                    <div style="
+                        font-size: 100px; 
+                        font-weight: 700; 
+                        margin-bottom: 24px; 
+                        background: linear-gradient(135deg, #ffffff 0%, #c3ecff 100%);
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                        letter-spacing: -2px; 
+                        text-shadow: 0px 10px 30px rgba(0,0,0,0.3); 
+                    ">
+                        UltraShape 1.0
+                    </div>
+
+                    <div style="
+                        font-family: 'Inter', sans-serif;
+                        font-size: 60px; 
+                        font-weight: 600; 
+                        color: rgba(255, 255, 255, 0.9);
+                        margin-bottom: 48px; 
+                        max-width: 1200px; 
+                        line-height: 1.6;
+                        letter-spacing: 1px; 
+                    ">
+                        High-Fidelity 3D Shape Generation via Scalable Geometric Refinement
+                    </div>
+
+                </div>
+
+                <div style="font-size: 22px; font-weight: 400; margin-bottom: 48px; max-width: 1200px; line-height: 1.8; opacity: 0.95;">
+                    We introduce UltraShape-1.0, a scalable two-stage diffusion framework for high-quality 3D geometry generation, enhanced by an advanced data processing pipeline that ensures geometric details through watertight processing and quality filtering.
+                </div>
+                <div id="links" style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
+                    <div><a id="paper" href="https://arxiv.org/pdf/2512.21185">Tech Report</a></div>
+                    <div><a id="code" href="https://github.com/PKU-YuanGroup/UltraShape-1.0">Code</a></div>
+                    <div><a id="demo" href="#demo">Demo</a></div>
+                </div>
+            </div>
+        </div>
+
+        <div id="main" style="background: #faf9f7;">
+            <div class="x-section-title" style="text-align: center; margin-top: 80px;">Main Pipeline</div>
+            
+            <div style="background: #f8f9fa; padding: 80px 20px;">
+                <div style="max-width: 1200px; margin: 40px auto; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.15); position: relative; padding: 20px; background-color: #ffffff;">
+                    
+                    <img src="assets/images/pipeline.png?v=2" alt="Video cover" style="width: 100%; height: auto; display: block;">
+                    
+                    
+                </div>
+            </div>    
+
+            <div class="x-section-title"  style="text-align: center; margin-top: 50px;">Image to 3D Shape Generation</div>
+            <div id="results-gen">
+                <div class="x-carousel-tags">
+                    <!-- <div class="x-carousel-tag active" data-filter="all">All</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class1">Object</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class2">Multi-Object</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class3">Character</div> -->
+                    <!-- <div class="x-carousel-tag" data-filter="class4">Car</div> -->
+                </div>
+                <div class="x-carousel-slider">
+                    <!-- Item 1 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/1.glb"
+                                data-prompt="assets/images/1.png">
+                                View GLB
+                            </div>
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px; padding: 12px 24px; font-size: 24px;" data-glb="assets/meshs/1.glb" data-prompt="assets/images/1.png">View GLB</div> -->
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/1.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/1.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 2 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/2.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/2.glb"
+                                data-prompt="assets/images/2.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/2.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/2.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 3 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/3.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/3.glb"
+                                data-prompt="assets/images/3.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/3.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/3.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 4 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/4.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/4.glb"
+                                data-prompt="assets/images/4.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/4.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/4.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 5 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/5.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/5.glb"
+                                data-prompt="assets/images/5.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/5.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/5.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 6 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/6.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/6.glb"
+                                data-prompt="assets/images/6.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/6.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/6.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 7 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/7.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/7.glb"
+                                data-prompt="assets/images/7.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/7.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/7.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 8 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/8.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/8.glb"
+                                data-prompt="assets/images/8.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/8.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/8.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 9 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/9.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/9.glb"
+                                data-prompt="assets/images/9.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/9.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/9.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 10 -->
+                    <div class="x-carousel-slider-item" data-tag="class3" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/10.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/10.glb"
+                                data-prompt="assets/images/10.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/10.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/10.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 11 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/11.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/11.glb"
+                                data-prompt="assets/images/11.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/11.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/11.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 12 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/12.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/12.glb"
+                                data-prompt="assets/images/12.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/12.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/12.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Item 13 -->
+                    <div class="x-carousel-slider-item" data-tag="class1" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 70vh;">
+                            <!-- <div class="x-button" style="position: absolute; top: 10px; right: 10px" data-glb="assets/meshs/13.glb" data-prompt="Input Prompt 1">View GLB</div> -->
+                            <div class="x-button" 
+                                style="position: absolute; top: 10px; right: 85px; padding: 15px 30px; 
+                                        font-size: 22px; font-weight: bold; z-index: 10; cursor: pointer;" 
+                                data-glb="https://huggingface.co/datasets/infinith/ultrashape_page/resolve/main/13.glb"
+                                data-prompt="assets/images/13.png">
+                                View GLB
+                            </div>
+                            <div style="width: 85%; aspect-ratio: 1; background-color: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden;">
+                                <video 
+                                    autoplay 
+                                    loop 
+                                    muted 
+                                    playsinline 
+                                    style="width: 100%; height: 100%; object-fit: contain;">
+                                    <source src="assets/videos/13.mp4" type="video/mp4">
+                                </video>
+                            </div>
+                            <div style="width: 200px; aspect-ratio: 1; background-color: transparent; border-radius: 4px; overflow: hidden;">
+                                <img 
+                                    src="assets/images/13.png" 
+                                    alt="Input Image"
+                                    style="width: 100%; height: 100%; object-fit: contain; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="x-carousel-nav">
+                    <div class="x-carousel-switch">&lt;</div>
+                    <div class="x-carousel-pages">
+                        <div class="x-carousel-page x-carousel-page-active"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                    </div>
+                    <div class="x-carousel-switch">&gt;</div>
+                </div>
+            </div>
+
+            <div class="x-section-title" style="text-align: center; margin-top: 150px;">Comparison of 3D Shape Generation</div>
+
+            <div id="results-recon" style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
+                <div class="x-carousel-slider">
+                    
+                    <!-- 第一张图 -->
+                    <div class="x-carousel-slider-item" style="flex-basis: calc(100% / 1);">
+                        <!-- 修改1：增加 display: flex; flex-direction: column; -->
+                        <div class="x-card" style="height: 86vh; background-color: #faf9f7; border-radius: 4px; display: flex; flex-direction: column; padding: 0 0 40px 0;">
+                            <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 24px; color: #333; flex-shrink: 0;">
+                                Comparison with Open-Source Models 1
+                            </div>
+                            <!-- 修改2：将图片高度改为 flex: 1 或 auto，去掉 height: 100% -->
+                            <div style="flex: 1; min-height: 0; padding: 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin: 0 20px 20px 20px; display: flex; align-items: center; justify-content: center;">
+                                <img 
+                                    src="assets/images/comp-open1.png" 
+                                    alt="Comparison with Open-Source Models 1"
+                                    style="max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;"
+                                >
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 第二张图 -->
+                    <div class="x-carousel-slider-item" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 86vh; background-color: #faf9f7; border-radius: 4px; display: flex; flex-direction: column; padding: 0 0 40px 0;">
+                            <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 24px; color: #333; flex-shrink: 0;">
+                                Comparison with Open-Source Models 2
+                            </div>
+                            <div style="flex: 1; min-height: 0; padding: 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin: 0 20px 20px 20px; display: flex; align-items: center; justify-content: center;">
+                                <img 
+                                    src="assets/images/comp-open2.png" 
+                                    alt="Comparison with Open-Source Models 2"
+                                    style="max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;"
+                                >
+                            </div>
+                            <!-- <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 16px; color: #333;">
+                                Comparison with Open-Source Models 2
+                            </div> -->
+                        </div>
+                    </div>
+
+                    <!-- 第三张图 -->
+                    <div class="x-carousel-slider-item" style="flex-basis: calc(100% / 1);">
+                        <div class="x-card" style="height: 86vh; background-color: #faf9f7; border-radius: 4px; display: flex; flex-direction: column; padding: 0 0 40px 0;">
+                            <div class="x-img-caption" style="padding: 10px; text-align: center; background: #faf9f7; font-size: 24px; color: #333; flex-shrink: 0;">
+                                Comparison with Commercial Models
+                            </div>
+                            <div style="flex: 1; min-height: 0; padding: 20px; background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); margin: 0 20px 20px 20px; display: flex; align-items: center; justify-content: center;">
+                                <img 
+                                    src="assets/images/comp-close.png" 
+                                    alt="Comparison with Close Models 1"
+                                    style="max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;"
+                                >
+                            </div>
+                            <!-- <div class="x-img-caption" style="padding: 15px; text-align: center; background: #faf9f7; font-size: 16px; color: #333;">
+                                Comparison with Close Models 1
+                            </div> -->
+                        </div>
+                    </div>
+
+                </div>
+                
+                <div class="x-carousel-nav">
+                    <div class="x-carousel-switch">&lt;</div>
+                    <div class="x-carousel-pages">
+                        <div class="x-carousel-page x-carousel-page-active"></div>
+                        <div class="x-carousel-page"></div>
+                        <div class="x-carousel-page"></div>
+                    </div>
+                    <div class="x-carousel-switch">&gt;</div>
+                </div>
+            </div>
+
+            </div>
+            <div class="x-small-header" style="text-align: center; margin-top: -100px;">Citation</div>
+            <div class="bibtex-entry" style="max-width: 800px; width: 90%; margin: 20px auto; box-sizing: border-box; background-color: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+                <div class="line">
+                    <span class="value">@article{jia2025ultrashape,</span>
+                </div>
+                <div class="line">
+                    <span class="key">    title={</span>
+                    <span class="value">UltraShape 1.0: High-Fidelity 3D Shape Generation via Scalable Geometric Refinement},</span>
+                </div>
+                <div class="line">
+                    <span class="key">    author={</span>
+                    <span class="value">Jia, Tanghui and Yan, Dongyu and Hao, Dehao and Li, Yang and Zhang, Kaiyi and He, Xianyi and Li, Lanjiong and Chen, Jinnan and Jiang, Lutao and Yin, Qishen and Quan, Long and Chen, Ying-Cong and Yuan, Li},</span>
+                </div>
+                <div class="line">
+                    <span class="key">    journal={</span>
+                    <span class="value">arxiv preprint arXiv:2512.21185},</span>
+                </div>
+                <div class="line">
+                    <span class="key">    year={</span>
+                    <span class="value">2025}</span>
+                </div>
+                <div class="line">}</div>
+            </div>
+            <div style="height: 100px;"> </div>
+
+        </div>
+
+        <footer style="text-align: center; padding: 20px 0; color: #666; font-size: 14px;">
+            <p>
+                The website template was borrowed from <a href="https://microsoft.github.io/TRELLIS.2/" target="_blank">TRELLIS.2</a>.
+            </p>
+        </footer>
+
+        <!-- Scroll Down Indicator -->
+        <div id="scroll-indicator" class="scroll-indicator">
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M7 13l5 5 5-5"></path>
+            </svg>
+        </div>
+
+    <div id="fullscreen">
+        <div id="window">
+            <div id="close">✕</div>
+            <div id="content"></div>
+        </div>
+    </div>
+        <script>
+            // Mouse-following gradient effect
+            document.addEventListener('DOMContentLoaded', function() {
+                const gradientEl = document.querySelector('.animated-gradient');
+                if (!gradientEl) return;
+
+                gradientEl.addEventListener('mousemove', function(e) {
+                    const rect = gradientEl.getBoundingClientRect();
+                    const x = ((e.clientX - rect.left) / rect.width) * 100;
+                    const y = ((e.clientY - rect.top) / rect.height) * 100;
+                    
+                    gradientEl.style.setProperty('--mouse-x', x + '%');
+                    gradientEl.style.setProperty('--mouse-y', y + '%');
+                });
+
+                // Reset to center when mouse leaves
+                gradientEl.addEventListener('mouseleave', function() {
+                    gradientEl.style.setProperty('--mouse-x', '50%');
+                    gradientEl.style.setProperty('--mouse-y', '50%');
+                });
+            });
+
+            // Scroll expand effect - hero section expands on scroll
+            (function() {
+                const hero = document.querySelector('.hero-expandable');
+                if (!hero) return;
+
+                const windowHeight = window.innerHeight;
+                const expandThreshold = windowHeight * 0.5; // Start expanding after scrolling 50vh
+                
+                function updateHero() {
+                    const scrollY = window.scrollY;
+                    
+                    if (scrollY === 0) {
+                        // Initial state - hero is 90vh (positioned lower, showing content below)
+                        hero.style.height = '90vh';
+                    } else if (scrollY <= expandThreshold) {
+                        // Expanding phase - hero grows from 90vh to 100vh
+                        const progress = scrollY / expandThreshold;
+                        const newHeight = 90 + (10 * progress);
+                        hero.style.height = newHeight + 'vh';
+                    } else {
+                        // Fully expanded - hero is 100vh
+                        hero.style.height = '100vh';
+                    }
+                }
+
+                // Initial state
+                hero.style.height = '90vh';
+                
+                // Throttle scroll for better performance
+                let ticking = false;
+                window.addEventListener('scroll', function() {
+                    if (!ticking) {
+                        window.requestAnimationFrame(function() {
+                            updateHero();
+                            ticking = false;
+                        });
+                        ticking = true;
+                    }
+                }, { passive: true });
+                
+                // Handle initial load
+                updateHero();
+            })();
+
+            // View GLB functionality
+            (function() {
+                const fullscreen = document.getElementById('fullscreen');
+                const windowEl = document.getElementById('window');
+                const closeBtn = document.getElementById('close');
+                const content = document.getElementById('content');
+
+                if (!fullscreen || !windowEl || !closeBtn || !content) return;
+
+                /**
+                 * Open fullscreen window with GLB model
+                 * @param {string} glbPath - Path to GLB file
+                 * @param {string} image - Input prompt image
+                 */
+                function openGLBViewer(glbPath, imagePath) {
+                    const overlay = document.createElement('div');
+                    overlay.style.cssText = `
+                        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+                        background: rgba(0, 0, 0, 0.85); z-index: 9999;
+                        display: flex; align-items: center; justify-content: center;
+                        backdrop-filter: blur(5px);
+                    `;
+
+                    const container = document.createElement('div');
+                    container.style.cssText = `
+                        width: 80%; height: 80%; background: #fff; border-radius: 12px;
+                        display: flex; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+                        position: relative;
+                    `;
+
+                    const imgContainer = document.createElement('div');
+                    imgContainer.style.cssText = `
+                        flex: 1; background: #f0f0f0; display: flex; 
+                        align-items: center; justify-content: center; border-right: 1px solid #ddd;
+                        flex-direction: column;
+                    `;
+                    const imgTitle = document.createElement('div');
+                    imgTitle.innerText = "Input Image";
+                    imgTitle.style.cssText = "margin-bottom: 10px; font-weight: bold; color: #555;";
+                    const img = document.createElement('img');
+                    img.src = imagePath;
+                    img.style.cssText = "max-width: 90%; max-height: 80%; object-fit: contain; border-radius: 4px;";
+                    imgContainer.appendChild(imgTitle);
+                    imgContainer.appendChild(img);
+
+                    const modelContainer = document.createElement('div');
+                    modelContainer.style.cssText = `
+                        flex: 1; background: #e0e0e0; display: flex; 
+                        align-items: center; justify-content: center; flex-direction: column; position: relative;
+                    `;
+                    const modelTitle = document.createElement('div');
+                    modelTitle.innerText = "Generated Mesh";
+                    modelTitle.style.cssText = "position: absolute; top: 20px; font-weight: bold; color: #555; z-index: 10;";
+
+                    const viewer = document.createElement('model-viewer');
+                    viewer.src = glbPath;
+                    viewer.setAttribute('auto-rotate', '');
+                    viewer.setAttribute('camera-controls', '');
+                    viewer.setAttribute('shadow-intensity', '1');
+                    viewer.style.cssText = "width: 100%; height: 100%;";
+
+                    viewer.addEventListener('load', () => {
+                        if (viewer.model && viewer.model.materials.length > 0) {
+                            const material = viewer.model.materials[0];
+                            
+                            // [Red, Green, Blue, Alpha] (0.0 - 1.0)
+                            material.pbrMetallicRoughness.setBaseColorFactor([0.8, 0.35, 0.2, 1.0]); 
+                            material.pbrMetallicRoughness.setBaseColorFactor([0.203, 0.374, 0.637, 1.0]); 
+                            // const r = Math.random();
+                            // const g = Math.random();
+                            // const b = Math.random();
+                            // material.pbrMetallicRoughness.setBaseColorFactor([r, g, b, 1.0]);
+
+                            material.pbrMetallicRoughness.setMetallicFactor(0.1); 
+                            material.pbrMetallicRoughness.setRoughnessFactor(0.7);
+                        }
+                    });
+
+                    modelContainer.appendChild(modelTitle);
+                    modelContainer.appendChild(viewer);
+
+                    const closeBtn = document.createElement('button');
+                    closeBtn.innerHTML = "&times;";
+                    closeBtn.style.cssText = `
+                        position: absolute; top: 15px; right: 20px; 
+                        background: none; border: none; color: #333; font-size: 30px; 
+                        cursor: pointer; z-index: 100; line-height: 1;
+                    `;
+                    closeBtn.onclick = () => document.body.removeChild(overlay);
+                    overlay.onclick = (e) => { if (e.target === overlay) document.body.removeChild(overlay); };
+
+                    container.appendChild(imgContainer);
+                    container.appendChild(modelContainer);
+                    container.appendChild(closeBtn);
+                    overlay.appendChild(container);
+                    document.body.appendChild(overlay);
+                }
+
+                /**
+                 * Close fullscreen window
+                 */
+                function closeGLBViewer() {
+                    fullscreen.style.opacity = '0';
+                    setTimeout(() => {
+                        fullscreen.style.display = 'none';
+                        content.innerHTML = '';
+                    }, 250); // Match transition duration
+                }
+
+                // Add click handlers to all View GLB buttons
+                document.addEventListener('click', function(e) {
+                    const button = e.target.closest('.x-button');
+                    if (button && button.textContent.trim() === 'View GLB') {
+                        const glbPath = button.getAttribute('data-glb');
+                        const prompt = button.getAttribute('data-prompt');
+                        if (glbPath) {
+                            openGLBViewer(glbPath, prompt);
+                        }
+                    }
+                });
+
+                // Close button handler
+                closeBtn.addEventListener('click', closeGLBViewer);
+
+                // Close on backdrop click
+                fullscreen.addEventListener('click', function(e) {
+                    if (e.target === fullscreen) {
+                        closeGLBViewer();
+                    }
+                });
+
+                // Close on Escape key
+                document.addEventListener('keydown', function(e) {
+                    if (e.key === 'Escape' && fullscreen.style.display === 'flex') {
+                        closeGLBViewer();
+                    }
+                });
+            })();
+        </script>
+    </body></html>

docs/main.css

@@ -0,0 +1,626 @@
+* {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+a {
+    color: #5b6acf;
+    text-decoration: none;
+}
+  
+a.link:focus, a.link:hover {
+    color: #8b5cf6;
+    text-decoration: none;
+}
+
+html {
+    scroll-behavior: smooth;
+    scroll-snap-type: y proximity;
+}
+
+body {
+    background: #faf9f7;
+    position: relative;
+    margin: 0px;
+    padding: 0px;
+    color: #2a2a2a;
+    overflow-x: hidden;
+}
+
+p {
+    position: relative;
+    margin: 16px;
+    font-size: 16px;
+    font-weight: 300;
+    text-align: justify;
+}
+
+p span {
+    font-weight: 500;
+}
+
+.x-row {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+}
+
+.x-column {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    flex-direction: column;
+}
+
+.x-center-text {
+    margin: 16px 32px;
+    text-align: center;
+}
+
+.x-left-align {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    flex-wrap: nowrap;
+}
+
+.x-right-align {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    flex-wrap: nowrap;
+}
+
+.x-flex-spacer {
+    flex: 1;
+}
+
+.x-labels {
+    position: absolute;
+    top: 8px;
+    right: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    flex-direction: row-reverse;
+}
+
+.x-label {
+    height: 20px;
+    padding: 0px 6px;
+    margin: 0px 2px;
+    color: #2a2a2a;
+    font-size: 12px;
+    font-weight: 600;
+    background: rgba(45, 45, 45, 0.1);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.x-button {
+    height: 36px;
+    padding: 0px 14px;
+    background: rgba(45, 45, 45, 0.08);
+    color: #2a2a2a;
+    border-radius: 50px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    font-size: 16px;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.x-button.small {
+    height: 32px;
+    padding: 0px 12px;
+    border-radius: 50px;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.x-button:hover {
+    background: rgba(45, 45, 45, 0.15);
+    transform: translateY(-2px);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
+}
+
+.x-button.disabled {
+    background: rgba(45, 45, 45, 0.05);
+    color: rgba(42, 42, 42, 0.4);
+    cursor: default;
+}
+
+.x-button.disabled:hover {
+    background: rgba(45, 45, 45, 0.05);
+    transform: none;
+}
+
+.x-gradient-font {
+    background: linear-gradient(270deg, #845ade 0%, #2e6ed6 25%, #ff7d4b 75%, #ec9b0b 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.x-gradient-block {
+    color: #3f3f3f;
+    background: linear-gradient(270deg, #845ade2f 0%, #2e6ed62f 25%, #ff7d4b2f 75%, #ec9b0b2f 100%);
+    border-radius: 16px;
+}
+
+.x-gradient-border {
+    position: relative;
+    padding: 1px;
+    margin: 3px;
+    border: 3px;
+    background: white;
+    background-clip: padding-box;
+    border: solid border transparent;
+    border-radius: 16px;
+}
+
+.x-gradient-border::before {
+    content: '';
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    z-index: -1;
+    margin: -3px;
+    border-radius: 16px;
+    background: linear-gradient(270deg, #845ade 0%, #2e6ed6 25%, #ff7d4b 75%, #ec9b0b 100%);
+}
+
+.x-section-title {
+    text-align: center;
+    margin: 100px 0px 48px 0px;
+    font-size: 36px;
+    font-weight: 600;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: #333;
+    position: relative;
+    padding-bottom: 20px;
+}
+
+.x-section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 3px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 2px;
+}
+
+.x-note {
+    color: rgba(42, 42, 42, 0.7);
+    font-size: 14px;
+    font-weight: 300;
+}
+
+.x-card {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.x-card .caption {
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #2a2a2a;
+    font-size: 16px;
+    font-weight: 600;
+    width: 100%;
+}
+
+.x-handwriting {
+    width: 100%;
+    font-family: 'Segoe Print';
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.5;
+    color: black;
+    text-align: justify;
+}
+
+.x-image-prompt {
+    position: relative;
+    height: calc(100% - 2px);
+    aspect-ratio: 1/1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.x-image-prompt img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.x-small-header {
+    text-align: center;
+    margin-top: 64px;
+    margin-bottom: 24px;
+    margin-left: 4px;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    color: #666;
+}
+
+.x-dot-card {
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 16px;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.x-dot-card-title {
+    margin-top: 0;
+    margin-bottom: 0px;
+    font-size: 20px; 
+    color: #2a2a2a;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+#main {
+    max-width: 1000px;
+    margin: 0px auto;
+    padding-bottom: 200px;
+}
+
+.author-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    padding: 8px;
+}
+
+.author-link {
+    color: #2a2a2a;
+    text-decoration: none;
+    font-weight: 500;
+}
+  
+.author-link:focus, .author-link:hover {
+    text-decoration: underline;
+}
+
+.affiliation-link {
+    font-size: 14px;
+    color: rgba(42, 42, 42, 0.7);
+    text-decoration: none;
+    font-weight: 300;
+}
+
+#links {
+    margin: 16px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+#links div {
+    margin: 4px 8px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#links a {
+    height: 20px;
+    padding: 8px 16px;
+    color: #2a2a2a;
+    font-size: 16px;
+    font-weight: 300;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+#links a:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: translateY(-2px);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
+}
+
+#links a.disabled {
+    background-color: rgba(200, 200, 200, 0.5);
+    color: rgba(42, 42, 42, 0.5);
+}
+
+#links a.disabled:hover {
+    background-color: rgba(200, 200, 200, 0.5);
+}
+
+#links a::before {
+    /* Material Icons */
+    font-family: 'Material Icons' !important;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'liga';
+
+    margin-right: 8px;
+    font-size: 20px;
+}
+
+#links #paper::before {
+    content: "description";
+}
+
+#links #arxiv::before {
+    content: "article";
+}
+
+#links #code::before {
+    content: "code";
+}
+
+#links #poster::before {
+    content: "picture_as_pdf";
+}
+
+#links #video::before {
+    content: "play_circle";
+}
+
+#links #demo::before {
+    content: "rocket_launch";
+}
+
+.feature-container {
+    max-width: 1000px;
+    margin: 32px auto;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.feature-tabs {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+}
+
+.feature-tab {
+    aspect-ratio: 1 / 1;
+    background-color: rgba(255, 255, 255, 0.8);
+    border: 2px solid transparent;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    color: #666;
+    padding: 10px;
+    text-align: center;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+}
+
+.feature-tab:hover {
+    background-color: rgba(255, 255, 255, 1);
+    transform: translateY(-2px);
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
+}
+
+.feature-tab.active-yellow { border-color: #facd5c; color: #facd5c; background-color: rgba(251, 191, 36, 0.1); }
+.feature-tab.active-red    { border-color: #d17969; color: #d17969; background-color: rgba(209, 121, 105, 0.1); }
+.feature-tab.active-blue   { border-color: #60a5fa; color: #60a5fa; background-color: rgba(96, 165, 250, 0.1); }
+.feature-tab.active-purple { border-color: #b7a5ff; color: #b7a5ff; background-color: rgba(167, 139, 250, 0.1); }
+
+.feature-tab svg {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 8px;
+    fill: currentColor;
+}
+
+.feature-tab span {
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.2;
+}
+
+.feature-panel {
+    display: none;
+    padding: 32px;
+    animation: fadeIn 0.4s ease;
+}
+
+.feature-panel.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 600px) {
+    .feature-tabs {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .feature-panel {
+        padding: 16px;
+    }
+}
+
+.bibtex-entry {
+    margin: 32px auto;
+    max-width: 900px;
+    padding: 0px 24px;
+    color: #2a2a2a;
+    font-family: consolas, monospace;
+    white-space: pre;
+    text-wrap: wrap;
+    font-size: 14px;
+    font-weight: 300;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: center;
+}
+
+.line {
+    display: grid;
+    grid-template-columns: max-content 1fr; 
+    gap: 0; 
+}
+
+.key {
+    font-family: consolas, monospace;
+    text-align: right;
+    padding-right: 0; 
+}
+
+.value {
+    font-family: consolas, monospace;
+    word-break: break-word; 
+}
+
+#bottombar {
+    position: absolute;
+    bottom: 0px;
+    height: 100px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    user-select: none;
+}
+
+#bottombar .row {
+    width: 90%;
+    padding: 0px 5%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    user-select: none;
+}
+
+#bottombar div {
+    color: rgba(42, 42, 42, 0.7);
+    font-size: 12px;
+    font-weight: 500;
+}
+
+#bottombar div a {
+    color: rgba(42, 42, 42, 0.7);
+    font-size: 12px;
+    font-weight: 500;
+}
+
+#bottombar div a:hover {
+    color: rgba(42, 42, 42, 1);
+    font-size: 12px;
+}
+
+#bottombar div span {
+    font-weight: 700;
+}
+
+.scroll-indicator {
+    position: fixed;
+    bottom: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #666;
+    cursor: pointer;
+    z-index: 1000;
+    
+    animation: scroll-bounce 2s infinite;
+    transition: opacity 0.5s ease, visibility 0.5s;
+}
+
+.scroll-indicator.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+@keyframes scroll-bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateX(-50%) translateY(0);
+    }
+    40% {
+        transform: translateX(-50%) translateY(-10px);
+    }
+    60% {
+        transform: translateX(-50%) translateY(-5px);
+    }
+}
+
+/* Animated Gradient Background with Mouse Follow */
+.animated-gradient {
+    --mouse-x: 50%;
+    --mouse-y: 50%;
+    background: 
+        radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(102, 126, 234, 0.8) 0%, transparent 50%),
+        radial-gradient(circle at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), rgba(118, 75, 162, 0.8) 0%, transparent 50%),
+        radial-gradient(circle at var(--mouse-x) calc(100% - var(--mouse-y)), rgba(240, 147, 251, 0.6) 0%, transparent 50%),
+        linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    background-size: 200% 200%;
+    animation: gradient-shift 20s ease infinite;
+    transition: background 0.1s ease-out;
+}
+
+/* Hero expandable effect */
+.hero-expandable {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-bottom: 0;
+}
+
+@keyframes gradient-shift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}

docs/pv.css

@@ -0,0 +1,66 @@
+.pv-video-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    margin: 0 auto;
+    background-color: #2a2a2a;
+    overflow: hidden;
+    border-radius: 8px;
+}
+
+.pv-video-element {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: contain;
+}
+
+.pv-poster-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-size: cover;
+    background-position: center;
+    transition: opacity 0.3s ease;
+}
+
+.pv-play-btn {
+    width: 64px;
+    height: 64px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 2px solid #2a2a2a;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.2s ease, background-color 0.2s;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.pv-play-btn::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 16px solid #2a2a2a;
+    margin-left: 4px;
+}
+
+.pv-poster-overlay:hover .pv-play-btn {
+    transform: scale(1.1);
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.pv-video-wrapper.is-playing .pv-poster-overlay {
+    opacity: 0;
+    pointer-events: none;
+}

docs/style.css

@@ -0,0 +1,2 @@
+/* Icomoon font removed - now using Material Icons via CDN */
+/* Material Icons are loaded in index.html via Google Fonts CDN */

docs/stylesheet.css

@@ -0,0 +1,3 @@
+/* Font definitions removed - using system Segoe UI font */
+/* All font-face declarations for Avenir Next Cyr have been removed */
+/* The site now uses 'Segoe UI' as defined in main.css and style.css */

docs/window.css

@@ -0,0 +1,175 @@
+#fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: transparent;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    user-select: none;
+    backdrop-filter: blur(10px);
+    opacity: 0;
+    transition: opacity 0.25s ease;
+}
+
+#fullscreen #window {
+    position: relative;
+    min-width: 25vw;
+    min-height: 25vh;
+    max-width: 100vw;
+    max-height: 90vh;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
+    padding: 8px;
+    
+}
+
+#fullscreen #window #close {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 31px;
+    height: 30px;
+    padding: 0px 0px 2px 1px;
+    color: black;
+    font-size: 16px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 100;
+}
+
+#fullscreen #window #close {
+    color: #2a2a2a;
+}
+
+#fullscreen #window #close:hover {
+    color: #d32f2f;
+}
+
+#fullscreen #window #content {
+    max-width: calc(100vw - 16px);
+    max-height: calc(90vh - 16px);
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.modelviewer-container {
+    width: 500px;
+    height: 500px;
+    margin: 8px;
+    border-radius: 8px;
+    background: white;
+    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+    position: relative;
+}
+
+.modelviewer-container model-viewer {
+    width: 100% !important;
+    height: 100% !important;
+    display: block !important;
+    background-color: #f5f5f5;
+}
+
+.modelviewer-container model-viewer button {
+    height: 16px;
+    padding: 0px 6px;
+    background: rgba(255, 255, 255, 0.75);
+    border-radius: 50px;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+    border: none;
+    font-size: 12px;
+    font-weight: 300;
+    display: none;
+    opacity: 0;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}
+
+.modelviewer-panel {
+    width: 300px;
+    margin: 8px;
+    margin-top: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+}
+
+.modelviewer-panel-desc {
+    width: 100%;
+}
+
+.modelviewer-panel-desc div {
+    font-size: 16px;
+    font-weight: 500;
+    margin: 4px;
+}
+
+.modelviewer-panel-prompt {
+    width: calc(100% - 16px);
+    height: 250px;
+    padding: 8px;
+    background: #f5f5f5;
+    border-radius: 8px;
+    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: start;
+    justify-content: center;
+    overflow-y: auto;
+    user-select: text;
+}
+
+.modelviewer-panel-button {
+    height: 40px;
+    margin: 4px 4px;
+    padding: 0px 14px;
+    background: rgba(45, 45, 45, 0.08);
+    color: #2a2a2a;
+    border-radius: 50px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+    font-size: 16px;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.modelviewer-panel-button.small {
+    height: 32px;
+    padding: 0px 12px;
+    border-radius: 50px;
+    font-size: 14px;
+    font-weight: 300;
+}
+
+.modelviewer-panel-button.tiny {
+    height: 24px;
+    padding: 0px 10px;
+    border-radius: 50px;
+    font-size: 12px;
+    font-weight: 300;
+}
+
+.modelviewer-panel-button:hover {
+    background: rgba(45, 45, 45, 0.15);
+    transform: translateY(-2px);
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
+}
+
+.modelviewer-panel-button.checked {
+    border: 2px solid #2a2a2a;
+    background: rgba(45, 45, 45, 0.1);
+    color: #2a2a2a;
+}

inputs/coarse_mesh/1.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e91d3836f418f03b7c43977b72dd2d2ed5ac282f4c2c245adf88ee0480e80dbb
+size 26370512

requirements.txt

@@ -0,0 +1,34 @@
+accelerate==1.1.1
+diffusers==0.30.0
+deepspeed
+diso==0.1.4
+einops==0.8.1
+flash_attn==2.8.3
+huggingface_hub==0.36.0
+imageio==2.36.0
+ipywidgets==8.1.7
+jaxtyping==0.3.4
+matplotlib==3.10.8
+numpy==1.24.4
+omegaconf==2.3.0
+opencv_python==4.10.0.84
+opencv_python_headless==4.11.0.86
+pandas==2.3.3
+Pillow==12.0.0
+pymeshlab==2022.2.post3
+pythreejs==2.4.2
+pytorch_lightning==1.9.5
+PyYAML==6.0.2
+safetensors==0.7.0
+sageattention==1.0.6
+scikit-image==0.24.0
+onnxruntime
+rembg
+tensorboard
+timm==1.0.22
+torchdiffeq==0.2.5
+tqdm==4.66.5
+transformers==4.37.2
+trimesh==4.4.7
+typeguard==4.3.0
+wandb==0.23.1

scripts/gradio_app.py

@@ -0,0 +1,218 @@
+import argparse
+import gc
+import os
+import sys
+
+import gradio as gr
+import torch
+from omegaconf import OmegaConf
+
+# Add project root to path
+sys.path.append(os.getcwd())
+
+from ultrashape.rembg import BackgroundRemover
+from ultrashape.utils.misc import instantiate_from_config
+from ultrashape.surface_loaders import SharpEdgeSurfaceLoader
+from ultrashape.utils import voxelize_from_point
+from ultrashape.pipelines import UltraShapePipeline
+
+# Global variables to cache the model
+MODEL_CACHE = {}
+
+
+def get_pipeline_cached(config_path, ckpt_path, device='cuda', low_vram=False):
+    # Check if we have a valid cached pipeline for this checkpoint
+    if "pipeline" in MODEL_CACHE and MODEL_CACHE.get("ckpt_path") == ckpt_path:
+        print("Using cached pipeline...")
+        return MODEL_CACHE["pipeline"], MODEL_CACHE["config"]
+
+    # Clear old cache if it exists (e.g. different checkpoint)
+    if MODEL_CACHE:
+        print("Clearing old model cache...")
+        MODEL_CACHE.clear()
+        gc.collect()
+        torch.cuda.empty_cache()
+
+    print(f"Loading config from {config_path}...")
+    config = OmegaConf.load(config_path)
+
+    print("Instantiating VAE...")
+    vae = instantiate_from_config(config.model.params.vae_config)
+
+    print("Instantiating DiT...")
+    dit = instantiate_from_config(config.model.params.dit_cfg)
+
+    print("Instantiating Conditioner...")
+    conditioner = instantiate_from_config(config.model.params.conditioner_config)
+
+    print("Instantiating Scheduler & Processor...")
+    scheduler = instantiate_from_config(config.model.params.scheduler_cfg)
+    image_processor = instantiate_from_config(config.model.params.image_processor_cfg)
+
+    print(f"Loading weights from {ckpt_path}...")
+    weights = torch.load(ckpt_path, map_location='cpu')
+
+    vae.load_state_dict(weights['vae'], strict=True)
+    dit.load_state_dict(weights['dit'], strict=True)
+    conditioner.load_state_dict(weights['conditioner'], strict=True)
+
+    vae.eval().to(device)
+    dit.eval().to(device)
+    conditioner.eval().to(device)
+
+    if hasattr(vae, 'enable_flashvdm_decoder'):
+        vae.enable_flashvdm_decoder()
+
+    print("Creating Pipeline...")
+    pipeline = UltraShapePipeline(
+        vae=vae,
+        model=dit,
+        scheduler=scheduler,
+        conditioner=conditioner,
+        image_processor=image_processor
+    )
+
+    if low_vram:
+        pipeline.enable_model_cpu_offload()
+
+    MODEL_CACHE["pipeline"] = pipeline
+    MODEL_CACHE["config"] = config
+    MODEL_CACHE["ckpt_path"] = ckpt_path
+
+    return pipeline, config
+
+
+def predict(
+        image_input,
+        mesh_input,
+        steps,
+        scale,
+        octree_res,
+        num_latents,
+        chunk_size,
+        seed,
+        remove_bg,
+        ckpt_path,
+        low_vram
+):
+    # Aggressive memory cleanup at start
+    gc.collect()
+    torch.cuda.empty_cache()
+
+    try:
+        device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+        config_path = "configs/infer_dit_refine.yaml"
+
+        if not os.path.exists(config_path):
+            raise FileNotFoundError(f"Config not found at {config_path}")
+
+        pipeline, config = get_pipeline_cached(config_path, ckpt_path, device, low_vram)
+
+        voxel_res = config.model.params.vae_config.params.voxel_query_res
+
+        print(f"Initializing Surface Loader (Token Num: {num_latents})...")
+        loader = SharpEdgeSurfaceLoader(
+            num_sharp_points=204800,
+            num_uniform_points=204800,
+        )
+
+        print(f"Processing inputs...")
+        if image_input is None:
+            raise ValueError("Image input is required")
+        if mesh_input is None:
+            raise ValueError("Mesh input is required")
+
+        # Handle image input
+        if isinstance(image_input, dict):
+            # In newer gradio versions Image component might return a dict for mask etc, but usually just PIL/numpy
+            # if type='pil' it is PIL.Image
+            pass
+
+        image = image_input.convert("RGBA")
+
+        if remove_bg or image.mode != 'RGBA':
+            rembg = BackgroundRemover()
+            image = rembg(image)
+
+        # Handle mesh input - Gradio Model3D returns path to file
+        surface = loader(mesh_input, normalize_scale=scale).to(device, dtype=torch.float16)
+        pc = surface[:, :, :3]  # [B, N, 3]
+
+        # Voxelize
+        _, voxel_idx = voxelize_from_point(pc, num_latents, resolution=voxel_res)
+
+        print("Running diffusion process...")
+        gen_device = "cpu" if low_vram else device
+        generator = torch.Generator(gen_device).manual_seed(int(seed))
+
+        with torch.autocast(device_type="cuda", dtype=torch.bfloat16):
+            mesh_out_list, _ = pipeline(
+                image=image,
+                voxel_cond=voxel_idx,
+                generator=generator,
+                box_v=1.0,
+                mc_level=0.0,
+                octree_resolution=int(octree_res),
+                num_chunks=int(chunk_size),
+                num_inference_steps=int(steps)
+            )
+
+        # Save output
+        output_dir = "outputs_gradio"
+        os.makedirs(output_dir, exist_ok=True)
+        base_name = "output"
+        save_path = os.path.join(output_dir, f"{base_name}_refined.glb")
+
+        mesh_out = mesh_out_list[0]
+        mesh_out.export(save_path)
+        print(f"Successfully saved to {save_path}")
+
+        return save_path
+
+    finally:
+        # Aggressive memory cleanup at end
+        gc.collect()
+        torch.cuda.empty_cache()
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="UltraShape Gradio App")
+    parser.add_argument("--ckpt", type=str, required=True, help="Path to split checkpoint (.pt)")
+    parser.add_argument("--share", action="store_true", help="Share the gradio app")
+    parser.add_argument("--low_vram", action="store_true", help="Optimize for low VRAM usage")
+
+    args = parser.parse_args()
+
+    # Define Gradio Interface
+    with gr.Blocks(title="UltraShape Inference") as demo:
+        gr.Markdown("# UltraShape Inference: Mesh & Image Refinement")
+
+        with gr.Row():
+            with gr.Column():
+                image_input = gr.Image(type="pil", label="Input Image", image_mode="RGBA")
+                mesh_input = gr.Model3D(label="Input Coarse Mesh (.glb, .obj)")
+
+                with gr.Accordion("Advanced Parameters", open=True):
+                    steps = gr.Slider(minimum=1, maximum=200, value=50, step=1, label="Inference Steps")
+                    scale = gr.Slider(minimum=0.1, maximum=2.0, value=0.99, label="Mesh Normalization Scale")
+                    octree_res = gr.Slider(minimum=64, maximum=2048, value=1024, step=64, label="Octree Resolution")
+                    num_latents = gr.Slider(minimum=1024, maximum=32768, value=32768, step=128,
+                                            label="Number of Latent Tokens (Use 8192 if OOM)")
+                    chunk_size = gr.Slider(minimum=512, maximum=10000, value=2048, step=512,
+                                           label="Chunk Size (Use 2000 if OOM)")
+                    seed = gr.Number(value=42, label="Random Seed")
+                    remove_bg = gr.Checkbox(label="Remove Background", value=False)
+
+                run_btn = gr.Button("Run Inference", variant="primary")
+
+            with gr.Column():
+                output_model = gr.Model3D(label="Refined Output Mesh")
+
+        run_btn.click(
+            fn=lambda img, mesh, s, sc, oct, nml, chk, sd, rm: predict(img, mesh, s, sc, oct, nml, chk, sd, rm, args.ckpt,
+                                                                      args.low_vram),
+            inputs=[image_input, mesh_input, steps, scale, octree_res, num_latents, chunk_size, seed, remove_bg],
+            outputs=[output_model]
+        )
+
+    demo.launch(share=args.share, server_name='0.0.0.0', server_port=7860)