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(249, 207, 0, 0.5); | |
| --text: #e8eaf0; | |
| --text-secondary: #9aa3b2; | |
| --text-muted: #6b7488; | |
| --text-faint: #4b5366; | |
| --accent: #F9CF00; | |
| --accent-light: #ffe14d; | |
| --accent-dark: #d4af00; | |
| --accent-ink: #1a1500; | |
| --accent-glow: rgba(249, 207, 0, 0.28); | |
| --accent-subtle: rgba(249, 207, 0, 0.1); | |
| --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(249, 207, 0, 0.08) 0%, transparent 55%), | |
| radial-gradient(ellipse at 85% 75%, rgba(255, 225, 77, 0.05) 0%, transparent 50%), | |
| radial-gradient(ellipse at 50% 50%, rgba(60, 50, 8, 0.18) 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, #fff0a8, var(--accent) 55%, var(--accent-dark)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| letter-spacing: -0.2px; | |
| } | |
| .header-center { | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| 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(--accent); | |
| background: var(--accent-subtle); | |
| } | |
| /* ====================================================================== | |
| 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; | |
| padding: 20px; | |
| } | |
| .panel-right { | |
| overflow-y: auto; | |
| } | |
| .panel-left { | |
| width: var(--panel-left-w); | |
| min-width: 280px; | |
| border-right: 1px solid var(--border); | |
| overflow: hidden; /* the inner area scrolls; button stays pinned */ | |
| } | |
| /* Scrollable region holding upload / examples / settings. */ | |
| .panel-left-scroll { | |
| flex: 1 1 auto; | |
| min-height: 0; /* allow the flex child to shrink so it can scroll */ | |
| overflow-y: auto; | |
| margin-right: -8px; /* keep content clear of the scrollbar */ | |
| padding-right: 8px; | |
| } | |
| .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(249, 207, 0, 0.4); | |
| background: var(--accent-subtle); | |
| } | |
| #upload-area.drag-over { | |
| border-color: var(--accent); | |
| background: rgba(249, 207, 0, 0.14); | |
| 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(249, 207, 0, 0.4); | |
| 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(249, 207, 0, 0.12); | |
| } | |
| 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: 16px; | |
| background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| color: var(--accent-ink); | |
| font-family: inherit; | |
| font-size: 14px; | |
| font-weight: 700; | |
| 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.4) 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(249, 207, 0, 0.38), 0 0 0 1px rgba(249, 207, 0, 0.25); | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary:active:not(:disabled) { | |
| transform: translateY(0); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .btn-primary.loading { | |
| background: rgba(255, 255, 255, 0.06); /* unfilled track */ | |
| color: #fffdf0; | |
| opacity: 1; /* stay solid while disabled */ | |
| pointer-events: none; | |
| } | |
| .btn-primary.loading #generate-label { | |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); | |
| letter-spacing: 0.2px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Fill layer turns the button itself into the progress bar. */ | |
| .btn-progress-fill { | |
| position: absolute; | |
| left: 0; top: 0; bottom: 0; | |
| width: 0%; | |
| border-radius: inherit; | |
| background: linear-gradient(90deg, #a87f08, var(--accent-dark) 55%, var(--accent)); | |
| box-shadow: 0 0 18px var(--accent-glow); | |
| transition: width 0.35s ease; | |
| opacity: 0; | |
| z-index: 0; | |
| } | |
| .btn-primary.loading .btn-progress-fill { | |
| opacity: 1; | |
| } | |
| /* Keep the icon, label and spinner above the fill. */ | |
| .btn-primary > .btn-icon, | |
| .btn-primary > #generate-label { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .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(249, 207, 0, 0.1), 0 0 80px rgba(255, 225, 77, 0.05); | |
| } | |
| .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; | |
| } | |
| /* ====================================================================== | |
| GENERATION PROGRESS OVERLAY (inside the viewer) | |
| ====================================================================== */ | |
| .gen-progress { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 6; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| padding: 0 48px; | |
| background: rgba(8, 9, 13, 0.62); | |
| backdrop-filter: blur(6px); | |
| -webkit-backdrop-filter: blur(6px); | |
| opacity: 1; | |
| transition: opacity 0.9s ease; /* graceful fade-out when generation ends */ | |
| } | |
| .gen-progress.fading-out { | |
| opacity: 0; | |
| } | |
| /* Ink-splat animation fills the whole overlay, behind the bar/text. */ | |
| .gen-splat-canvas { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: block; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| /* ====================================================================== | |
| 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; } | |
| /* Let the left panel flow with the page instead of an inner scroll. */ | |
| .panel-left { overflow: visible; } | |
| .panel-left-scroll { overflow: visible; min-height: 0; } | |
| :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">TripoSplat</span> | |
| </div> | |
| <div class="header-center"> | |
| <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"> | |
| <!-- Scrollable content; the Generate button below stays pinned --> | |
| <div class="panel-left-scroll"> | |
| <!-- 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> | |
| </div><!-- /.panel-left-scroll --> | |
| <!-- Generate button (always pinned to the bottom) --> | |
| <button class="btn-primary" id="generate-btn" type="button" disabled> | |
| <span class="btn-progress-fill" id="generate-fill"></span> | |
| <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 class="gen-progress hidden" id="gen-progress"> | |
| <canvas class="gen-splat-canvas" id="gen-splat-canvas"></canvas> | |
| </div> | |
| </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 { | |
| // Subscribe to "status" events too (default is ["data"] only) so the | |
| // submit() iterator delivers gr.Progress() updates, not just the result. | |
| client = await Client.connect(window.location.origin, { events: ["data", "status"] }); | |
| 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"); | |
| showProgress(); | |
| try { | |
| // Use submit() (not predict()) so we can stream the server-side | |
| // gr.Progress() updates that arrive as "status" events. | |
| const submission = client.submit("/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", | |
| }); | |
| let result = null; | |
| for await (const msg of submission) { | |
| if (msg.type === "status") { | |
| if (msg.stage === "error") { | |
| throw new Error(msg.message || "Generation failed."); | |
| } | |
| const pd = msg.progress_data || (msg.status && msg.status.progress_data); | |
| if (pd && pd.length) { | |
| const p = pd[pd.length - 1]; | |
| let frac = null; | |
| if (typeof p.progress === "number") { | |
| frac = p.progress; | |
| } else if (typeof p.index === "number" && p.length) { | |
| frac = p.index / p.length; | |
| } | |
| updateProgress(frac, p.desc); | |
| } | |
| } else if (msg.type === "data") { | |
| result = msg; | |
| } | |
| } | |
| if (!result) throw new Error("No result returned from server."); | |
| updateProgress(1, "Done"); | |
| 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"); | |
| hideProgress(); | |
| } | |
| } | |
| // -------------------------------------------------------------------------- | |
| // "Splat" progress animation — Splatoon-style ink blobs keep dropping onto | |
| // the screen, overlapping. Capped at SPLAT_MAX; the oldest then fades away. | |
| // -------------------------------------------------------------------------- | |
| const SPLAT_COLORS = ["#fff0a8", "#ffe14d", "#F9CF00", "#e9b400", "#d4af00"]; | |
| const SPLAT_MAX = 128; // max simultaneously-visible splats | |
| const SPLAT_GAP_MIN = 130; // min gap between drops (ms) | |
| const SPLAT_GAP_MAX = 820; // max gap between drops (ms) — intervals vary, not fixed | |
| const SPLAT_POP_MS = 240; // "drop onto screen" pop-in | |
| const SPLAT_FADE_MS = 700; // fade-out once retired | |
| const SPLAT_CLOSE_MS = 900; // overlay fade-out after generation finishes | |
| const _splat = { raf: null, items: [], lastSpawn: 0, nextGap: 0, closing: false, closeTimer: null }; | |
| function _easeOutBack(t) { | |
| const c1 = 1.70158, c3 = c1 + 1; | |
| return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); | |
| } | |
| // Build one irregular ink-splat shape (unit scale, centred at the origin): | |
| // a lumpy main blob plus a scatter of satellite droplets and far specks. | |
| function _makeSplatPath() { | |
| const path = new Path2D(); | |
| const n = 9 + Math.floor(Math.random() * 5); | |
| const baseR = 0.72 + Math.random() * 0.18; | |
| const pts = []; | |
| for (let i = 0; i < n; i++) { | |
| const a = (i / n) * Math.PI * 2; | |
| let r = baseR * (0.78 + Math.random() * 0.5); | |
| if (Math.random() < 0.25) r *= 1.3 + Math.random() * 0.5; // tendril / spike | |
| pts.push([Math.cos(a) * r, Math.sin(a) * r]); | |
| } | |
| const mid = (p, q) => [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2]; | |
| let m = mid(pts[n - 1], pts[0]); | |
| path.moveTo(m[0], m[1]); | |
| for (let i = 0; i < n; i++) { // smooth closed blob | |
| const cur = pts[i], nxt = pts[(i + 1) % n], mm = mid(cur, nxt); | |
| path.quadraticCurveTo(cur[0], cur[1], mm[0], mm[1]); | |
| } | |
| path.closePath(); | |
| const blobs = 3 + Math.floor(Math.random() * 4); // droplets | |
| for (let i = 0; i < blobs; i++) { | |
| const a = Math.random() * Math.PI * 2; | |
| const d = baseR * (1.05 + Math.random() * 0.8); | |
| const dx = Math.cos(a) * d, dy = Math.sin(a) * d; | |
| const rr = 0.06 + Math.random() * 0.17; | |
| path.moveTo(dx + rr, dy); | |
| path.arc(dx, dy, rr, 0, Math.PI * 2); | |
| } | |
| const dots = Math.floor(Math.random() * 3); // far specks | |
| for (let i = 0; i < dots; i++) { | |
| const a = Math.random() * Math.PI * 2; | |
| const d = baseR * (1.7 + Math.random() * 0.7); | |
| const dx = Math.cos(a) * d, dy = Math.sin(a) * d; | |
| const rr = 0.03 + Math.random() * 0.05; | |
| path.moveTo(dx + rr, dy); | |
| path.arc(dx, dy, rr, 0, Math.PI * 2); | |
| } | |
| return path; | |
| } | |
| function _spawnSplat(now) { | |
| _splat.items.push({ | |
| fx: 0.07 + Math.random() * 0.86, // position as a fraction of the canvas | |
| fy: 0.10 + Math.random() * 0.80, | |
| rot: Math.random() * Math.PI * 2, | |
| sizeFrac: 0.04 + Math.pow(Math.random(), 1.8) * 0.15, // small base, wide variance | |
| color: SPLAT_COLORS[Math.floor(Math.random() * SPLAT_COLORS.length)], | |
| baseAlpha: 0.30 + Math.random() * 0.14, // semi-transparent so overlaps blend | |
| path: _makeSplatPath(), | |
| birth: now, | |
| fading: false, | |
| fadeStart: 0, | |
| }); | |
| } | |
| function _splatFrame(now) { | |
| const cv = $("gen-splat-canvas"); | |
| if (!cv) return; | |
| const ctx = cv.getContext("2d"); | |
| const dpr = Math.min(window.devicePixelRatio || 1, 2); | |
| const W = Math.round((cv.clientWidth || 320) * dpr); | |
| const H = Math.round((cv.clientHeight || 200) * dpr); | |
| if (cv.width !== W || cv.height !== H) { cv.width = W; cv.height = H; } | |
| const unit = Math.min(W, H); | |
| // Drop a burst of splats after a randomised gap, so the rhythm stays dynamic. | |
| if (!_splat.closing && now - _splat.lastSpawn > _splat.nextGap) { | |
| const burst = 1 + Math.floor(Math.pow(Math.random(), 2) * 4); // 1–4, biased to fewer | |
| for (let k = 0; k < burst; k++) _spawnSplat(now); | |
| _splat.lastSpawn = now; | |
| _splat.nextGap = SPLAT_GAP_MIN + Math.random() * (SPLAT_GAP_MAX - SPLAT_GAP_MIN); | |
| } | |
| // Cap the count: retire the oldest still-active splat. | |
| const active = _splat.items.filter(s => !s.fading); | |
| if (active.length > SPLAT_MAX) { | |
| active[0].fading = true; | |
| active[0].fadeStart = now; | |
| } | |
| ctx.clearRect(0, 0, W, H); | |
| ctx.globalCompositeOperation = "source-over"; | |
| const keep = []; | |
| for (const s of _splat.items) { // oldest first → newest overlaps on top | |
| const pop = Math.min((now - s.birth) / SPLAT_POP_MS, 1); | |
| let fade = 1; | |
| if (s.fading) { | |
| fade = 1 - (now - s.fadeStart) / SPLAT_FADE_MS; | |
| if (fade <= 0) continue; // fully gone → drop it | |
| } | |
| keep.push(s); | |
| const scale = s.sizeFrac * unit * (0.6 + 0.4 * _easeOutBack(pop)); | |
| ctx.save(); | |
| ctx.translate(s.fx * W, s.fy * H); | |
| ctx.rotate(s.rot); | |
| ctx.scale(scale, scale); | |
| ctx.globalAlpha = s.baseAlpha * pop * fade; | |
| ctx.fillStyle = s.color; | |
| ctx.fill(s.path); | |
| ctx.restore(); | |
| } | |
| _splat.items = keep; | |
| ctx.globalAlpha = 1; | |
| _splat.raf = requestAnimationFrame(_splatFrame); | |
| } | |
| function startSplat() { | |
| _splat.closing = false; | |
| if (_splat.closeTimer) { clearTimeout(_splat.closeTimer); _splat.closeTimer = null; } | |
| if (_splat.raf) return; | |
| _splat.items = []; | |
| _splat.lastSpawn = 0; | |
| _splat.nextGap = 0; | |
| _splat.raf = requestAnimationFrame(_splatFrame); | |
| } | |
| function stopSplat() { | |
| if (_splat.raf) { cancelAnimationFrame(_splat.raf); _splat.raf = null; } | |
| if (_splat.closeTimer) { clearTimeout(_splat.closeTimer); _splat.closeTimer = null; } | |
| _splat.closing = false; | |
| _splat.items = []; | |
| const cv = $("gen-splat-canvas"); | |
| if (cv) cv.getContext("2d").clearRect(0, 0, cv.width, cv.height); | |
| } | |
| // -------------------------------------------------------------------------- | |
| // Sampling progress overlay | |
| // The Generate button doubles as the progress bar: its label shows the | |
| // current stage (encoding / sampling / decoding / …) and its fill grows | |
| // with the completion fraction. The viewer overlay just runs the splats. | |
| // -------------------------------------------------------------------------- | |
| function showProgress() { | |
| const overlay = $("gen-progress"); | |
| overlay.classList.remove("hidden", "fading-out"); | |
| updateProgress(null, "Starting…"); | |
| startSplat(); | |
| } | |
| function updateProgress(frac, desc) { | |
| if (desc) $("generate-label").textContent = desc; | |
| const fill = $("generate-fill"); | |
| if (frac == null || isNaN(frac)) { | |
| fill.style.width = "0%"; // unknown yet → empty | |
| } else { | |
| const clamped = Math.max(0, Math.min(1, frac)); | |
| fill.style.width = (clamped * 100).toFixed(1) + "%"; | |
| } | |
| } | |
| function hideProgress() { | |
| $("generate-fill").style.width = "0%"; | |
| // Let the splashes fade out naturally instead of vanishing: stop spawning, | |
| // fade the whole overlay via CSS, then tear down once it's invisible. | |
| _splat.closing = true; | |
| const overlay = $("gen-progress"); | |
| overlay.classList.add("fading-out"); | |
| if (_splat.closeTimer) clearTimeout(_splat.closeTimer); | |
| _splat.closeTimer = setTimeout(() => { | |
| if (!_splat.closing) return; // a new run started — abort the close | |
| overlay.classList.add("hidden"); | |
| overlay.classList.remove("fading-out"); | |
| stopSplat(); | |
| }, SPLAT_CLOSE_MS); | |
| } | |
| // -------------------------------------------------------------------------- | |
| // 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> | |