TRELLIS-Multiple3D

Paused

App Files Files Community

demohug commited on May 12, 2025

Commit

d9837fa

1 Parent(s): 571da3d

v1

Browse files

Files changed (2) hide show

app.py +5 -3
index.html +275 -0

app.py CHANGED Viewed

@@ -12,7 +12,7 @@ from PIL import Image
 from trellis.pipelines import TrellisImageTo3DPipeline
 from trellis.representations import Gaussian, MeshExtractResult
 from trellis.utils import render_utils, postprocessing_utils
-from fastapi import FastAPI, UploadFile, File, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse
 from pydantic import BaseModel
@@ -156,9 +156,11 @@ def extract_glb(
 @app.post("/api/generate")
 async def api_generate_3d(
     files: List[UploadFile] = File(...),
-    params: GenerationParams = None
 ):
-    if not params:
         params = GenerationParams()
     # 创建临时目录

 from trellis.pipelines import TrellisImageTo3DPipeline
 from trellis.representations import Gaussian, MeshExtractResult
 from trellis.utils import render_utils, postprocessing_utils
+from fastapi import FastAPI, UploadFile, File, HTTPException, Form
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse
 from pydantic import BaseModel
 @app.post("/api/generate")
 async def api_generate_3d(
     files: List[UploadFile] = File(...),
+    params: str = Form(None)
 ):
+    if params:
+        params = GenerationParams.parse_raw(params)
+    else:
         params = GenerationParams()
     # 创建临时目录

index.html ADDED Viewed

	@@ -0,0 +1,275 @@

+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TRELLIS 3D Demo</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .preview-container {
+            max-width: 100%;
+            margin: 20px 0;
+        }
+        .preview-video {
+            max-width: 100%;
+            height: auto;
+        }
+        .loading {
+            display: none;
+            margin: 20px 0;
+        }
+        .progress {
+            display: none;
+            margin: 20px 0;
+        }
+        .error-message {
+            display: none;
+            color: red;
+            margin: 10px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container mt-5">
+        <h1 class="mb-4">TRELLIS 3D Demo</h1>
+        <!-- 图片上传区域 -->
+        <div class="card mb-4">
+            <div class="card-body">
+                <h5 class="card-title">上传图片</h5>
+                <p class="card-text">请上传1-3张图片来生成3D模型</p>
+                <input type="file" class="form-control" id="imageInput" multiple accept="image/*">
+                <div class="mt-3">
+                    <button class="btn btn-primary" id="generateBtn" disabled>生成3D模型</button>
+                </div>
+            </div>
+        </div>
+        <!-- 生成设置 -->
+        <div class="card mb-4">
+            <div class="card-body">
+                <h5 class="card-title">生成设置</h5>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="mb-3">
+                            <label class="form-label">Stage 1: Sparse Structure Generation</label>
+                            <div class="mb-2">
+                                <label class="form-label">Guidance Strength</label>
+                                <input type="range" class="form-range" id="ssGuidanceStrength" min="0" max="10" step="0.1" value="7.5">
+                                <span id="ssGuidanceStrengthValue">7.5</span>
+                            </div>
+                            <div class="mb-2">
+                                <label class="form-label">Sampling Steps</label>
+                                <input type="range" class="form-range" id="ssSamplingSteps" min="1" max="50" step="1" value="12">
+                                <span id="ssSamplingStepsValue">12</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="mb-3">
+                            <label class="form-label">Stage 2: Structured Latent Generation</label>
+                            <div class="mb-2">
+                                <label class="form-label">Guidance Strength</label>
+                                <input type="range" class="form-range" id="slatGuidanceStrength" min="0" max="10" step="0.1" value="3.0">
+                                <span id="slatGuidanceStrengthValue">3.0</span>
+                            </div>
+                            <div class="mb-2">
+                                <label class="form-label">Sampling Steps</label>
+                                <input type="range" class="form-range" id="slatSamplingSteps" min="1" max="50" step="1" value="12">
+                                <span id="slatSamplingStepsValue">12</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">Multi-image Algorithm</label>
+                    <select class="form-select" id="multiimageAlgo">
+                        <option value="stochastic">Stochastic</option>
+                        <option value="multidiffusion">Multi-diffusion</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+        <!-- 加载状态 -->
+        <div class="loading text-center">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+            <p class="mt-2">正在生成3D模型，请稍候...</p>
+        </div>
+        <!-- 进度条 -->
+        <div class="progress">
+            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
+        </div>
+        <!-- 错误信息 -->
+        <div class="error-message alert alert-danger"></div>
+        <!-- 预览区域 -->
+        <div class="preview-container">
+            <h3>预览</h3>
+            <video id="previewVideo" class="preview-video" controls style="display: none;"></video>
+        </div>
+        <!-- GLB 下载区域 -->
+        <div class="card mb-4" id="glbCard" style="display: none;">
+            <div class="card-body">
+                <h5 class="card-title">GLB 文件</h5>
+                <p class="card-text">3D模型已生成，点击下方按钮下载GLB文件</p>
+                <button class="btn btn-success" id="downloadGlbBtn">下载GLB文件</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        const API_BASE_URL = 'https://demohug-trellis-multiple3d.hf.space';
+        let currentSessionId = null;
+        // 更新滑块值显示
+        document.querySelectorAll('input[type="range"]').forEach(input => {
+            const valueDisplay = document.getElementById(input.id + 'Value');
+            input.addEventListener('input', () => {
+                valueDisplay.textContent = input.value;
+            });
+        });
+        // 检查文件选择
+        document.getElementById('imageInput').addEventListener('change', function() {
+            const generateBtn = document.getElementById('generateBtn');
+            generateBtn.disabled = this.files.length < 1 || this.files.length > 3;
+        });
+        // 生成3D模型
+        document.getElementById('generateBtn').addEventListener('click', async function() {
+            const files = document.getElementById('imageInput').files;
+            if (files.length < 1 || files.length > 3) {
+                showError('请选择1-3张图片');
+                return;
+            }
+            // 显示加载状态
+            showLoading(true);
+            hideError();
+            try {
+                // 准备表单数据
+                const formData = new FormData();
+                for (let file of files) {
+                    formData.append('files', file);
+                }
+                // 添加生成参数
+                const params = {
+                    seed: 0,
+                    ss_guidance_strength: parseFloat(document.getElementById('ssGuidanceStrength').value),
+                    ss_sampling_steps: parseInt(document.getElementById('ssSamplingSteps').value),
+                    slat_guidance_strength: parseFloat(document.getElementById('slatGuidanceStrength').value),
+                    slat_sampling_steps: parseInt(document.getElementById('slatSamplingSteps').value),
+                    multiimage_algo: document.getElementById('multiimageAlgo').value
+                };
+                formData.append('params', JSON.stringify(params));
+                // 发送生成请求
+                const response = await fetch(`${API_BASE_URL}/api/generate`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    throw new Error('生成失败');
+                }
+                const result = await response.json();
+                currentSessionId = result.session_id;
+                // 显示预览视频
+                const video = document.getElementById('previewVideo');
+                video.src = `${API_BASE_URL}${result.preview_url}`;
+                video.style.display = 'block';
+                video.play();
+                // 显示GLB下载按钮
+                document.getElementById('glbCard').style.display = 'block';
+            } catch (error) {
+                showError(error.message);
+            } finally {
+                showLoading(false);
+            }
+        });
+        // 下载GLB文件
+        document.getElementById('downloadGlbBtn').addEventListener('click', async function() {
+            if (!currentSessionId) {
+                showError('请先生成3D模型');
+                return;
+            }
+            showLoading(true);
+            hideError();
+            try {
+                // 提取GLB文件
+                const extractResponse = await fetch(`${API_BASE_URL}/api/extract_glb`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        session_id: currentSessionId,
+                        params: {
+                            mesh_simplify: 0.95,
+                            texture_size: 1024
+                        }
+                    })
+                });
+                if (!extractResponse.ok) {
+                    throw new Error('GLB提取失败');
+                }
+                const extractResult = await extractResponse.json();
+                // 下载GLB文件
+                const glbResponse = await fetch(`${API_BASE_URL}${extractResult.glb_url}`);
+                if (!glbResponse.ok) {
+                    throw new Error('GLB下载失败');
+                }
+                const blob = await glbResponse.blob();
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'model.glb';
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } catch (error) {
+                showError(error.message);
+            } finally {
+                showLoading(false);
+            }
+        });
+        // 辅助函数
+        function showLoading(show) {
+            document.querySelector('.loading').style.display = show ? 'block' : 'none';
+            document.getElementById('generateBtn').disabled = show;
+        }
+        function showError(message) {
+            const errorDiv = document.querySelector('.error-message');
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+        }
+        function hideError() {
+            document.querySelector('.error-message').style.display = 'none';
+        }
+    </script>
+</body>
+</html>