Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TripoSplat — Image to 3D Gaussians</title> | |
| <meta name="description" content="Convert a single 2D image into high-quality 3D Gaussian splats using TripoSplat by TripoAI."> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ====================================================================== | |
| DESIGN TOKENS | |
| ====================================================================== */ | |
| :root { | |
| --bg-base: #08090d; | |
| --bg-panel: rgba(13, 15, 22, 0.75); | |
| --bg-surface: rgba(255, 255, 255, 0.035); | |
| --bg-surface-hover: rgba(255, 255, 255, 0.065); | |
| --bg-input: rgba(255, 255, 255, 0.045); | |
| --border: rgba(255, 255, 255, 0.06); | |
| --border-hover: rgba(255, 255, 255, 0.12); | |
| --border-focus: rgba(255, 77, 79, 0.45); | |
| --text: #e2e8f0; | |
| --text-secondary: #94a3b8; | |
| --text-muted: #64748b; | |
| --text-faint: #475569; | |
| --accent: #ff4d4f; | |
| --accent-dark: #d9363e; | |
| --accent-glow: rgba(255, 77, 79, 0.25); | |
| --accent-subtle: rgba(255, 77, 79, 0.08); | |
| --success: #34d399; | |
| --error: #f87171; | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 14px; | |
| --radius-xl: 18px; | |
| --transition-fast: 0.15s ease; | |
| --transition: 0.25s ease; | |
| --transition-slow: 0.4s ease; | |
| --panel-left-w: 320px; | |
| --panel-right-w: 300px; | |
| --header-h: 56px; | |
| } | |
| /* ====================================================================== | |
| RESET & BASE | |
| ====================================================================== */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html, body { height: 100%; overflow: hidden; } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | |
| background: var(--bg-base); | |
| color: var(--text); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ====================================================================== | |
| BACKGROUND EFFECTS | |
| ====================================================================== */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| inset: 0; | |
| background: | |
| radial-gradient(ellipse at 15% 25%, rgba(255, 77, 79, 0.07) 0%, transparent 55%), | |
| radial-gradient(ellipse at 85% 75%, rgba(255, 120, 117, 0.05) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(63, 27, 27, 0.15) 0%, transparent 70%); | |
| pointer-events: none; | |
| z-index: 0; | |
| animation: bgPulse 25s ease-in-out infinite alternate; | |
| } | |
| @keyframes bgPulse { | |
| 0% { opacity: 0.6; } | |
| 100% { opacity: 1; } | |
| } | |
| /* ====================================================================== | |
| SCROLLBAR | |
| ====================================================================== */ | |
| ::-webkit-scrollbar { width: 5px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); } | |
| /* ====================================================================== | |
| HEADER | |
| ====================================================================== */ | |
| #app-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: var(--header-h); | |
| padding: 0 24px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--bg-panel); | |
| backdrop-filter: blur(24px); | |
| -webkit-backdrop-filter: blur(24px); | |
| position: relative; | |
| z-index: 20; | |
| } | |
| .header-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo-img { | |
| height: 24px; | |
| width: auto; | |
| object-fit: contain; | |
| } | |
| .logo-text { | |
| font-size: 18px; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #ff9c6e, #ff4d4f); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: -0.3px; | |
| } | |
| .header-center { | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| max-width: 400px; | |
| text-align: center; | |
| line-height: 1.4; | |
| display: none; | |
| } | |
| @media (min-width: 1100px) { .header-center { display: block; } } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .header-link { | |
| padding: 6px 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| border-radius: var(--radius-sm); | |
| transition: all var(--transition-fast); | |
| } | |
| .header-link:hover { | |
| color: var(--text); | |
| background: var(--bg-surface); | |
| } | |
| /* ====================================================================== | |
| MAIN LAYOUT | |
| ====================================================================== */ | |
| #app-main { | |
| display: flex; | |
| height: calc(100vh - var(--header-h)); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ====================================================================== | |
| PANELS (shared) | |
| ====================================================================== */ | |
| .panel { | |
| background: var(--bg-panel); | |
| backdrop-filter: blur(24px); | |
| -webkit-backdrop-filter: blur(24px); | |
| } | |
| .panel-left, .panel-right { | |
| display: flex; | |
| flex-direction: column; | |
| overflow-y: auto; | |
| padding: 20px; | |
| } | |
| .panel-left { | |
| width: var(--panel-left-w); | |
| min-width: 280px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .panel-right { | |
| width: var(--panel-right-w); | |
| min-width: 260px; | |
| border-left: 1px solid var(--border); | |
| } | |
| .panel-center { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 20px; | |
| min-width: 0; | |
| background: transparent; | |
| backdrop-filter: none; | |
| } | |
| .panel-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 18px; | |
| } | |
| .panel-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--text); | |
| letter-spacing: -0.2px; | |
| } | |
| .badge { | |
| font-size: 10px; | |
| font-weight: 600; | |
| padding: 3px 8px; | |
| border-radius: 20px; | |
| background: var(--accent-subtle); | |
| color: var(--accent); | |
| letter-spacing: 0.3px; | |
| text-transform: uppercase; | |
| } | |
| /* ====================================================================== | |
| SECTION | |
| ====================================================================== */ | |
| .section { | |
| margin-bottom: 16px; | |
| } | |
| .section-title { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.6px; | |
| margin-bottom: 10px; | |
| } | |
| /* ====================================================================== | |
| UPLOAD AREA | |
| ====================================================================== */ | |
| #upload-area { | |
| border: 2px dashed rgba(255,255,255,0.08); | |
| border-radius: var(--radius-lg); | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| background: var(--bg-surface); | |
| margin-bottom: 16px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #upload-area:hover { | |
| border-color: rgba(255, 77, 79, 0.35); | |
| background: var(--accent-subtle); | |
| } | |
| #upload-area.drag-over { | |
| border-color: var(--accent); | |
| background: rgba(255, 77, 79, 0.12); | |
| transform: scale(1.01); | |
| } | |
| #upload-area.has-image { | |
| border-style: solid; | |
| border-color: var(--border); | |
| padding: 0; | |
| } | |
| .upload-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 36px 16px; | |
| gap: 8px; | |
| } | |
| .upload-icon { | |
| width: 36px; height: 36px; | |
| color: var(--text-muted); | |
| margin-bottom: 4px; | |
| } | |
| .upload-text { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .upload-hint { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .upload-preview { | |
| position: relative; | |
| } | |
| .upload-preview img { | |
| width: 100%; | |
| display: block; | |
| border-radius: calc(var(--radius-lg) - 2px); | |
| } | |
| .btn-clear { | |
| position: absolute; | |
| top: 8px; right: 8px; | |
| width: 28px; height: 28px; | |
| border-radius: 50%; | |
| border: none; | |
| background: rgba(0,0,0,0.65); | |
| backdrop-filter: blur(8px); | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| z-index: 2; | |
| } | |
| .btn-clear:hover { | |
| background: rgba(248, 113, 113, 0.5); | |
| color: #fff; | |
| } | |
| .btn-clear svg { | |
| width: 14px; height: 14px; | |
| } | |
| /* ====================================================================== | |
| EXAMPLES | |
| ====================================================================== */ | |
| .examples-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .example-thumb { | |
| aspect-ratio: 1; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| transition: all var(--transition); | |
| position: relative; | |
| } | |
| .example-thumb:hover { | |
| border-color: rgba(255, 77, 79, 0.35); | |
| transform: scale(1.06); | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.3); | |
| } | |
| .example-thumb.selected { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow); | |
| } | |
| .example-thumb img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| /* ====================================================================== | |
| ACCORDION | |
| ====================================================================== */ | |
| .accordion-btn { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 12px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .accordion-btn:hover { | |
| background: var(--bg-surface-hover); | |
| color: var(--text); | |
| } | |
| .accordion-icon { | |
| width: 16px; height: 16px; | |
| transition: transform var(--transition); | |
| } | |
| .accordion-icon.rotated { | |
| transform: rotate(180deg); | |
| } | |
| .accordion-body { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height var(--transition-slow) ease, padding var(--transition-slow) ease; | |
| padding: 0 4px; | |
| } | |
| .accordion-body.open { | |
| max-height: 400px; | |
| padding: 14px 4px 4px; | |
| } | |
| /* ====================================================================== | |
| FORM CONTROLS | |
| ====================================================================== */ | |
| .form-group { | |
| margin-bottom: 14px; | |
| } | |
| .form-group label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 6px; | |
| } | |
| .value-display { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| font-variant-numeric: tabular-nums; | |
| background: var(--accent-subtle); | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| } | |
| input[type="number"], | |
| select { | |
| width: 100%; | |
| padding: 9px 12px; | |
| background: var(--bg-input); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13px; | |
| outline: none; | |
| transition: border-color var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| input[type="number"]:focus, | |
| select:focus { | |
| border-color: var(--border-focus); | |
| box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.1); | |
| } | |
| select { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| cursor: pointer; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 10px center; | |
| padding-right: 32px; | |
| } | |
| /* Range slider */ | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 2px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 16px; height: 16px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| border: 2.5px solid var(--bg-base); | |
| box-shadow: 0 0 8px var(--accent-glow), 0 1px 3px rgba(0,0,0,0.3); | |
| cursor: grab; | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.15); | |
| box-shadow: 0 0 14px var(--accent-glow), 0 1px 3px rgba(0,0,0,0.3); | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 16px; height: 16px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| border: 2.5px solid var(--bg-base); | |
| box-shadow: 0 0 8px var(--accent-glow); | |
| cursor: grab; | |
| } | |
| /* ====================================================================== | |
| GENERATE BUTTON | |
| ====================================================================== */ | |
| .btn-primary { | |
| width: 100%; | |
| padding: 13px 16px; | |
| margin-top: auto; | |
| background: linear-gradient(135deg, #ff4d4f 0%, #d9363e 100%); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| color: #fff; | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| transition: all var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| } | |
| .btn-primary::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.12) 50%, transparent 75%); | |
| transform: translateX(-120%); | |
| transition: transform 0.65s ease; | |
| } | |
| .btn-primary:hover:not(:disabled)::before { | |
| transform: translateX(120%); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| box-shadow: 0 6px 24px rgba(255, 77, 79, 0.35), 0 0 0 1px rgba(255, 77, 79, 0.2); | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary:active:not(:disabled) { | |
| transform: translateY(0); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary.loading { | |
| background: linear-gradient(135deg, #d9363e 0%, #ad2128 100%); | |
| pointer-events: none; | |
| } | |
| .btn-icon { | |
| width: 16px; height: 16px; | |
| flex-shrink: 0; | |
| } | |
| /* ====================================================================== | |
| VIEWER | |
| ====================================================================== */ | |
| .viewer-wrap { | |
| flex: 1; | |
| border-radius: var(--radius-xl); | |
| overflow: hidden; | |
| position: relative; | |
| background: radial-gradient(ellipse at 50% 55%, #151a2e 0%, #0a0b10 100%); | |
| border: 1px solid var(--border); | |
| transition: box-shadow var(--transition-slow); | |
| } | |
| .viewer-wrap.active { | |
| box-shadow: 0 0 40px rgba(255, 77, 79, 0.08), 0 0 80px rgba(255, 120, 117, 0.04); | |
| } | |
| .viewer-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| gap: 14px; | |
| color: var(--text-faint); | |
| user-select: none; | |
| } | |
| .placeholder-icon { | |
| width: 56px; height: 56px; | |
| opacity: 0.35; | |
| } | |
| .viewer-placeholder p { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .viewer-placeholder .hint { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| opacity: 0.6; | |
| } | |
| #viewer-iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| position: absolute; | |
| inset: 0; | |
| } | |
| .viewer-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 10px 0 0; | |
| flex-shrink: 0; | |
| } | |
| .viewer-hint { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| letter-spacing: 0.3px; | |
| } | |
| /* ====================================================================== | |
| OUTPUT PANEL | |
| ====================================================================== */ | |
| .output-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 48px 16px; | |
| text-align: center; | |
| gap: 12px; | |
| color: var(--text-faint); | |
| } | |
| .output-placeholder .placeholder-icon { | |
| width: 40px; height: 40px; | |
| opacity: 0.25; | |
| } | |
| .output-placeholder p { | |
| font-size: 13px; | |
| } | |
| /* Info card */ | |
| .info-card { | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 4px 0; | |
| margin-bottom: 16px; | |
| } | |
| .info-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 14px; | |
| } | |
| .info-row + .info-row { | |
| border-top: 1px solid rgba(255,255,255,0.03); | |
| } | |
| .info-key { | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .info-val { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Download button */ | |
| .btn-download { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| width: 100%; | |
| padding: 11px 16px; | |
| background: var(--bg-surface); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| text-decoration: none; | |
| margin-bottom: 20px; | |
| } | |
| .btn-download:hover { | |
| background: var(--bg-surface-hover); | |
| border-color: var(--border-hover); | |
| box-shadow: 0 2px 12px rgba(0,0,0,0.2); | |
| } | |
| .btn-download svg { | |
| width: 16px; height: 16px; | |
| } | |
| /* Preprocessed image */ | |
| .preprocessed-section img { | |
| width: 100%; | |
| border-radius: var(--radius-md); | |
| margin-top: 10px; | |
| border: 1px solid var(--border); | |
| } | |
| /* Status bar */ | |
| .status-bar { | |
| margin-top: auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 0 0; | |
| flex-shrink: 0; | |
| transition: opacity var(--transition-slow); | |
| } | |
| .status-bar.fade-out { | |
| opacity: 0; | |
| } | |
| .status-dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .status-dot.connecting { | |
| background: #fbbf24; | |
| animation: dotPulse 1.2s ease infinite; | |
| } | |
| .status-dot.connected { | |
| background: var(--success); | |
| } | |
| .status-dot.error { | |
| background: var(--error); | |
| } | |
| @keyframes dotPulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.3; } | |
| } | |
| .status-text { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| /* ====================================================================== | |
| ERROR TOAST | |
| ====================================================================== */ | |
| .error-toast { | |
| position: fixed; | |
| bottom: 24px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 12px 24px; | |
| background: rgba(127, 29, 29, 0.9); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(248, 113, 113, 0.3); | |
| border-radius: var(--radius-md); | |
| color: #fca5a5; | |
| font-size: 13px; | |
| font-weight: 500; | |
| z-index: 100; | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.4); | |
| white-space: nowrap; | |
| max-width: 90vw; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* ====================================================================== | |
| ANIMATIONS | |
| ====================================================================== */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { animation: fadeIn 0.35s ease forwards; } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .spin { animation: spin 0.9s linear infinite; } | |
| /* ====================================================================== | |
| UTILITIES | |
| ====================================================================== */ | |
| .hidden { display: none ; } | |
| /* ====================================================================== | |
| RESPONSIVE | |
| ====================================================================== */ | |
| @media (max-width: 960px) { | |
| #app-main { flex-direction: column; overflow-y: auto; } | |
| .panel-left, .panel-right { | |
| width: 100%; | |
| min-width: auto; | |
| border-right: none; | |
| border-left: none; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .panel-center { min-height: 400px; } | |
| .header-center { display: none; } | |
| :root { | |
| --panel-left-w: 100%; | |
| --panel-right-w: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ===================================================================== | |
| HEADER | |
| ===================================================================== --> | |
| <header id="app-header"> | |
| <div class="header-left"> | |
| <img class="logo-img" src="https://cdn-web.tripo3d.ai/tripo-web/logo/tripo-logo1.webp" alt="Tripo AI Logo"> | |
| <span class="logo-text">Splat</span> | |
| </div> | |
| <div class="header-center"> | |
| Single image → high-quality 3D Gaussians by <a href="https://www.tripo3d.ai/" style="color:var(--accent);text-decoration:none" target="_blank">TripoAI</a> | |
| </div> | |
| <div class="header-right"> | |
| <a class="header-link" href="https://arxiv.org/abs/2605.16355" target="_blank" rel="noopener">Paper</a> | |
| <a class="header-link" href="https://www.tripo3d.ai/research/triposplat" target="_blank" rel="noopener">Blog</a> | |
| <a class="header-link" href="https://github.com/VAST-AI-Research/TripoSplat" target="_blank" rel="noopener">GitHub</a> | |
| </div> | |
| </header> | |
| <!-- ===================================================================== | |
| MAIN | |
| ===================================================================== --> | |
| <main id="app-main"> | |
| <!-- =============== LEFT PANEL =============== --> | |
| <aside class="panel panel-left" id="panel-left"> | |
| <div class="panel-header"> | |
| <h2 class="panel-title">Image to 3D</h2> | |
| <span class="badge">Gaussian Splatting</span> | |
| </div> | |
| <!-- Upload area --> | |
| <div id="upload-area"> | |
| <input type="file" id="file-input" accept="image/*" hidden> | |
| <div class="upload-placeholder" id="upload-placeholder"> | |
| <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 16V4"/> | |
| <path d="M8 8l4-4 4 4"/> | |
| <path d="M3 17l.621 2.485A2 2 0 0 0 5.561 21h12.878a2 2 0 0 0 1.94-1.515L21 17"/> | |
| </svg> | |
| <p class="upload-text">Drop image or click to upload</p> | |
| <p class="upload-hint">PNG, JPG, WEBP up to 20 MB</p> | |
| </div> | |
| <div class="upload-preview hidden" id="upload-preview"> | |
| <img id="preview-image" alt="Preview"> | |
| <button class="btn-clear" id="clear-btn" title="Remove image"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Examples --> | |
| <div class="section"> | |
| <h3 class="section-title">Examples</h3> | |
| <div class="examples-grid" id="examples-grid"></div> | |
| </div> | |
| <!-- Settings accordion --> | |
| <div class="section"> | |
| <button class="accordion-btn" id="settings-toggle" type="button"> | |
| <span>Sampling Settings</span> | |
| <svg class="accordion-icon" id="settings-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg> | |
| </button> | |
| <div class="accordion-body" id="settings-body"> | |
| <div class="form-group"> | |
| <label for="seed">Seed</label> | |
| <input type="number" id="seed" value="42" min="0" max="999999999"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="steps">Inference Steps <span class="value-display" id="steps-val">20</span></label> | |
| <input type="range" id="steps" min="1" max="50" value="20" step="1"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="guidance">Guidance Scale <span class="value-display" id="guidance-val">3.0</span></label> | |
| <input type="range" id="guidance" min="1" max="10" value="3" step="0.5"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="gaussians">Number of Gaussians</label> | |
| <select id="gaussians"> | |
| <option value="32768">32,768</option> | |
| <option value="65536">65,536</option> | |
| <option value="131072">131,072</option> | |
| <option value="262144" selected>262,144</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="format">Download Format</label> | |
| <select id="format"> | |
| <option value="ply" selected>PLY</option> | |
| <option value="splat">SPLAT</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Spacer --> | |
| <div style="flex:1;min-height:12px"></div> | |
| <!-- Generate button --> | |
| <button class="btn-primary" id="generate-btn" type="button" disabled> | |
| <svg class="btn-icon" id="generate-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0L14.59 8.41 23 12 14.59 15.59 12 24 9.41 15.59 1 12 9.41 8.41Z"/></svg> | |
| <span id="generate-label">Generate</span> | |
| <svg class="btn-icon spin hidden" id="generate-spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 2a10 10 0 0 1 10 10"/></svg> | |
| </button> | |
| </aside> | |
| <!-- =============== CENTER PANEL =============== --> | |
| <section class="panel panel-center" id="panel-center"> | |
| <div class="viewer-wrap" id="viewer-wrap"> | |
| <div class="viewer-placeholder" id="viewer-placeholder"> | |
| <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 2L3 7v10l9 5 9-5V7l-9-5z"/> | |
| <path d="M12 22V12"/> | |
| <path d="M3 7l9 5"/> | |
| <path d="M21 7l-9 5"/> | |
| </svg> | |
| <p>3D viewer will appear here after generation</p> | |
| <p class="hint">Upload an image and click Generate</p> | |
| </div> | |
| <iframe id="viewer-iframe" class="hidden" allowfullscreen></iframe> | |
| </div> | |
| <div class="viewer-bar"> | |
| <span class="viewer-hint">drag to orbit · scroll to zoom · right-drag to pan</span> | |
| </div> | |
| </section> | |
| <!-- =============== RIGHT PANEL =============== --> | |
| <aside class="panel panel-right" id="panel-right"> | |
| <div class="panel-header"> | |
| <h2 class="panel-title">Output</h2> | |
| </div> | |
| <!-- Placeholder --> | |
| <div class="output-placeholder" id="output-placeholder"> | |
| <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"> | |
| <rect x="3" y="3" width="18" height="18" rx="3"/> | |
| <path d="M9 9h.01M15 9h.01"/> | |
| <path d="M8 14s1.5 2 4 2 4-2 4-2"/> | |
| </svg> | |
| <p>Generation results<br>will appear here</p> | |
| </div> | |
| <!-- Results (hidden until generation) --> | |
| <div class="hidden" id="output-content"> | |
| <div class="info-card"> | |
| <div class="info-row"> | |
| <span class="info-key">Gaussians</span> | |
| <span class="info-val" id="out-gaussians">—</span> | |
| </div> | |
| <div class="info-row"> | |
| <span class="info-key">Time</span> | |
| <span class="info-val" id="out-time">—</span> | |
| </div> | |
| <div class="info-row"> | |
| <span class="info-key">File</span> | |
| <span class="info-val" id="out-file">—</span> | |
| </div> | |
| </div> | |
| <a class="btn-download" id="download-btn" download> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 4v12"/> | |
| <path d="M8 12l4 4 4-4"/> | |
| <path d="M3 17l.621 2.485A2 2 0 0 0 5.561 21h12.878a2 2 0 0 0 1.94-1.515L21 17"/> | |
| </svg> | |
| <span>Download</span> | |
| </a> | |
| <div class="preprocessed-section"> | |
| <h3 class="section-title">Preprocessed Input</h3> | |
| <img id="preprocessed-img" alt="Preprocessed input"> | |
| </div> | |
| </div> | |
| <!-- Connection status --> | |
| <div class="status-bar" id="status-bar"> | |
| <span class="status-dot connecting" id="status-dot"></span> | |
| <span class="status-text" id="status-text">Connecting…</span> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- ===================================================================== | |
| JAVASCRIPT | |
| ===================================================================== --> | |
| <script type="module"> | |
| import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"; | |
| // -------------------------------------------------------------------------- | |
| // State | |
| // -------------------------------------------------------------------------- | |
| let client = null; | |
| let currentFile = null; | |
| let isGenerating = false; | |
| // -------------------------------------------------------------------------- | |
| // DOM helpers | |
| // -------------------------------------------------------------------------- | |
| const $ = (id) => document.getElementById(id); | |
| // -------------------------------------------------------------------------- | |
| // Initialise | |
| // -------------------------------------------------------------------------- | |
| async function init() { | |
| updateStatus("connecting"); | |
| try { | |
| client = await Client.connect(window.location.origin); | |
| updateStatus("connected"); | |
| } catch (e) { | |
| updateStatus("error", e.message); | |
| console.error("Gradio client connection failed:", e); | |
| } | |
| loadExamples(); | |
| setupUpload(); | |
| setupSettings(); | |
| setupGenerate(); | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Example images | |
| // -------------------------------------------------------------------------- | |
| async function loadExamples() { | |
| try { | |
| const res = await fetch("/api/examples"); | |
| const examples = await res.json(); | |
| const grid = $("examples-grid"); | |
| examples.forEach((ex, i) => { | |
| const thumb = document.createElement("div"); | |
| thumb.className = "example-thumb"; | |
| thumb.innerHTML = `<img src="${ex.url}" alt="${ex.name}" loading="lazy" draggable="false">`; | |
| thumb.addEventListener("click", () => selectExample(ex, i)); | |
| grid.appendChild(thumb); | |
| }); | |
| } catch (e) { | |
| console.warn("Failed to load examples:", e); | |
| } | |
| } | |
| async function selectExample(ex, idx) { | |
| try { | |
| const res = await fetch(ex.url); | |
| const blob = await res.blob(); | |
| currentFile = new File([blob], `example_${idx}.webp`, { type: "image/webp" }); | |
| showPreview(URL.createObjectURL(blob)); | |
| // Highlight the selected thumbnail | |
| document.querySelectorAll(".example-thumb").forEach((t, i) => { | |
| t.classList.toggle("selected", i === idx); | |
| }); | |
| } catch (e) { | |
| console.error("Failed to load example:", e); | |
| } | |
| } | |
| // -------------------------------------------------------------------------- | |
| // File upload / drag & drop | |
| // -------------------------------------------------------------------------- | |
| function setupUpload() { | |
| const area = $("upload-area"); | |
| const input = $("file-input"); | |
| area.addEventListener("click", (e) => { | |
| // Don't trigger if clicking the clear button | |
| if (e.target.closest(".btn-clear")) return; | |
| input.click(); | |
| }); | |
| input.addEventListener("change", () => { | |
| if (input.files[0]) handleFile(input.files[0]); | |
| }); | |
| area.addEventListener("dragover", (e) => { | |
| e.preventDefault(); | |
| area.classList.add("drag-over"); | |
| }); | |
| area.addEventListener("dragleave", () => { | |
| area.classList.remove("drag-over"); | |
| }); | |
| area.addEventListener("drop", (e) => { | |
| e.preventDefault(); | |
| area.classList.remove("drag-over"); | |
| const file = e.dataTransfer.files[0]; | |
| if (file && file.type.startsWith("image/")) handleFile(file); | |
| }); | |
| $("clear-btn").addEventListener("click", (e) => { | |
| e.stopPropagation(); | |
| clearFile(); | |
| }); | |
| } | |
| function handleFile(file) { | |
| if (!file.type.startsWith("image/")) return; | |
| currentFile = file; | |
| showPreview(URL.createObjectURL(file)); | |
| // De-select example thumbnails | |
| document.querySelectorAll(".example-thumb").forEach((t) => t.classList.remove("selected")); | |
| } | |
| function showPreview(url) { | |
| $("preview-image").src = url; | |
| $("upload-placeholder").classList.add("hidden"); | |
| $("upload-preview").classList.remove("hidden"); | |
| $("upload-area").classList.add("has-image"); | |
| $("generate-btn").disabled = false; | |
| } | |
| function clearFile() { | |
| currentFile = null; | |
| $("file-input").value = ""; | |
| $("upload-placeholder").classList.remove("hidden"); | |
| $("upload-preview").classList.add("hidden"); | |
| $("upload-area").classList.remove("has-image"); | |
| $("generate-btn").disabled = true; | |
| document.querySelectorAll(".example-thumb").forEach((t) => t.classList.remove("selected")); | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Settings accordion & slider labels | |
| // -------------------------------------------------------------------------- | |
| function setupSettings() { | |
| const toggle = $("settings-toggle"); | |
| const body = $("settings-body"); | |
| const icon = $("settings-icon"); | |
| let open = false; | |
| toggle.addEventListener("click", () => { | |
| open = !open; | |
| body.classList.toggle("open", open); | |
| icon.classList.toggle("rotated", open); | |
| }); | |
| $("steps").addEventListener("input", (e) => { | |
| $("steps-val").textContent = e.target.value; | |
| }); | |
| $("guidance").addEventListener("input", (e) => { | |
| $("guidance-val").textContent = parseFloat(e.target.value).toFixed(1); | |
| }); | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Generation | |
| // -------------------------------------------------------------------------- | |
| function setupGenerate() { | |
| $("generate-btn").addEventListener("click", generate); | |
| } | |
| async function generate() { | |
| if (!currentFile || isGenerating || !client) return; | |
| isGenerating = true; | |
| const btn = $("generate-btn"); | |
| btn.disabled = true; | |
| btn.classList.add("loading"); | |
| $("generate-label").textContent = "Generating…"; | |
| $("generate-icon").classList.add("hidden"); | |
| $("generate-spinner").classList.remove("hidden"); | |
| try { | |
| const result = await client.predict("/generate", { | |
| image: handle_file(currentFile), | |
| seed: parseInt($("seed").value) || 42, | |
| steps: parseInt($("steps").value) || 20, | |
| guidance_scale: parseFloat($("guidance").value) || 3.0, | |
| num_gaussians: parseInt($("gaussians").value) || 262144, | |
| output_format: $("format").value || "ply", | |
| }); | |
| showResults(result); | |
| } catch (error) { | |
| console.error("Generation failed:", error); | |
| showError(error.message || "Generation failed. Please try again."); | |
| } finally { | |
| isGenerating = false; | |
| btn.disabled = false; | |
| btn.classList.remove("loading"); | |
| $("generate-label").textContent = "Generate"; | |
| $("generate-icon").classList.remove("hidden"); | |
| $("generate-spinner").classList.add("hidden"); | |
| } | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Display results | |
| // -------------------------------------------------------------------------- | |
| function showResults(result) { | |
| // 1. 3D Viewer — load PLY in the iframe | |
| const plyUrl = result.data[1].url; | |
| const viewerSrc = `/viewer?ply=${encodeURIComponent(plyUrl)}`; | |
| const iframe = $("viewer-iframe"); | |
| iframe.src = viewerSrc; | |
| iframe.classList.remove("hidden"); | |
| $("viewer-placeholder").classList.add("hidden"); | |
| $("viewer-wrap").classList.add("active"); | |
| // 2. Parse info string: "262,144 gaussians · generation: 15.3s · saved: splat.ply" | |
| const info = result.data[3]; | |
| const match = info.match( | |
| /^([\d,]+)\s+gaussians\s+·\s+generation:\s+([\d.]+s)\s+·\s+saved:\s+(.+)$/ | |
| ); | |
| if (match) { | |
| $("out-gaussians").textContent = match[1]; | |
| $("out-time").textContent = match[2]; | |
| $("out-file").textContent = match[3]; | |
| } else { | |
| // Fallback: display the whole string | |
| $("out-gaussians").textContent = info; | |
| $("out-time").textContent = ""; | |
| $("out-file").textContent = ""; | |
| } | |
| // 3. Download button | |
| const dl = $("download-btn"); | |
| dl.href = result.data[2].url; | |
| dl.download = result.data[2].orig_name || "triposplat_output"; | |
| // 4. Preprocessed image | |
| $("preprocessed-img").src = result.data[0].url; | |
| // 5. Reveal output section | |
| $("output-placeholder").classList.add("hidden"); | |
| const content = $("output-content"); | |
| content.classList.remove("hidden"); | |
| content.classList.remove("fade-in"); | |
| // Force reflow for re-triggering animation | |
| void content.offsetWidth; | |
| content.classList.add("fade-in"); | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Error handling | |
| // -------------------------------------------------------------------------- | |
| function showError(msg) { | |
| const toast = document.createElement("div"); | |
| toast.className = "error-toast fade-in"; | |
| toast.textContent = msg; | |
| document.body.appendChild(toast); | |
| setTimeout(() => { | |
| toast.style.opacity = "0"; | |
| toast.style.transition = "opacity 0.3s ease"; | |
| setTimeout(() => toast.remove(), 350); | |
| }, 5000); | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Connection status | |
| // -------------------------------------------------------------------------- | |
| function updateStatus(state, msg) { | |
| const dot = $("status-dot"); | |
| const text = $("status-text"); | |
| dot.className = "status-dot " + state; | |
| if (state === "connecting") { | |
| text.textContent = "Connecting…"; | |
| } else if (state === "connected") { | |
| text.textContent = "Connected"; | |
| setTimeout(() => $("status-bar").classList.add("fade-out"), 3000); | |
| } else if (state === "error") { | |
| text.textContent = msg || "Connection error"; | |
| } | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Boot | |
| // -------------------------------------------------------------------------- | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |