|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FlashWorld Demo</title> |
|
|
<meta name="description" content=""> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: #1a1a1a; |
|
|
color: #ffffff; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.main-container { |
|
|
display: flex; |
|
|
height: 100vh; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
padding: 15px 20px; |
|
|
text-align: center; |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
margin: 0; |
|
|
color: white; |
|
|
font-size: 1.8em; |
|
|
font-weight: 600; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
.header-title-wrap { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.header-links { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 20px; |
|
|
margin-top: 8px; |
|
|
} |
|
|
|
|
|
.header-links a { |
|
|
color: #60a5fa; |
|
|
text-decoration: none; |
|
|
font-size: 0.9em; |
|
|
padding: 5px 10px; |
|
|
border: 1px solid #60a5fa; |
|
|
border-radius: 5px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.header-links a:hover { |
|
|
background: #60a5fa; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.content-container { |
|
|
display: flex; |
|
|
flex: 1; |
|
|
overflow: visible; |
|
|
min-height: 0; |
|
|
} |
|
|
|
|
|
.left-panel { |
|
|
width: 280px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border-right: 1px solid rgba(255, 255, 255, 0.1); |
|
|
padding: 20px; |
|
|
overflow-y: auto; |
|
|
overflow-x: visible; |
|
|
flex-shrink: 0; |
|
|
min-height: 0; |
|
|
-webkit-overflow-scrolling: touch; |
|
|
} |
|
|
|
|
|
.center-panel { |
|
|
flex: 1; |
|
|
position: relative; |
|
|
background: #000; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.right-panel { |
|
|
width: 300px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border-left: 1px solid rgba(255, 255, 255, 0.1); |
|
|
padding: 20px; |
|
|
overflow-y: auto; |
|
|
flex-shrink: 0; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.guidance { |
|
|
color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.guidance h2 { |
|
|
color: #ffffff; |
|
|
margin-top: 0; |
|
|
font-size: 1.3em; |
|
|
border-bottom: 2px solid #60a5fa; |
|
|
padding-bottom: 8px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.gui-container h2{ |
|
|
color: #ffffff; |
|
|
margin-top: 0; |
|
|
font-size: 1.3em; |
|
|
border-bottom: 2px solid #60fae5; |
|
|
padding-bottom: 8px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.step { |
|
|
margin: 12px 0; |
|
|
padding: 12px; |
|
|
background: rgba(96, 165, 250, 0.1); |
|
|
border-radius: 6px; |
|
|
border-left: 3px solid #60a5fa; |
|
|
} |
|
|
|
|
|
.step h3 { |
|
|
margin: 0 0 8px 0; |
|
|
color: #ffffff; |
|
|
font-size: 1em; |
|
|
} |
|
|
|
|
|
.step p { |
|
|
margin: 4px 0; |
|
|
line-height: 1.4; |
|
|
font-size: 0.85em; |
|
|
color: #d1d5db; |
|
|
} |
|
|
|
|
|
.controls-info { |
|
|
background: rgba(168, 85, 247, 0.1); |
|
|
border-left: 3px solid #a855f7; |
|
|
} |
|
|
|
|
|
.keyboard-shortcuts { |
|
|
background: rgba(34, 197, 94, 0.1); |
|
|
border-left: 3px solid #22c55e; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
min-width: 300px; |
|
|
min-height: 200px; |
|
|
transform: translate(-50%, -50%); |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
color: white; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
display: none; |
|
|
z-index: 1000; |
|
|
text-align: center; |
|
|
vertical-align: middle; |
|
|
} |
|
|
|
|
|
.generation-info { |
|
|
background: rgba(34, 197, 94, 0.1); |
|
|
border: 1px solid #22c55e; |
|
|
border-radius: 8px; |
|
|
padding: 15px; |
|
|
margin: 10px 0; |
|
|
color: #22c55e; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
.progress-container { |
|
|
width: 100%; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
margin: 10px 0; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 20px; |
|
|
background: linear-gradient(90deg, #60a5fa, #3b82f6); |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
border-radius: 10px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.progress-text { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
font-size: 0.8em; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
|
|
|
.info-tip { |
|
|
display: inline-block; |
|
|
position: relative; |
|
|
margin-left: 8px; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
line-height: 16px; |
|
|
text-align: center; |
|
|
border-radius: 50%; |
|
|
background: #3b82f6; |
|
|
color: #fff; |
|
|
font-size: 12px; |
|
|
cursor: default; |
|
|
user-select: none; |
|
|
z-index: 100000; |
|
|
} |
|
|
.info-tip .tooltip { |
|
|
display: none; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: calc(100% + 8px); |
|
|
transform: none; |
|
|
background: rgba(0,0,0,0.95); |
|
|
color: #e5e7eb; |
|
|
border: 1px solid rgba(255,255,255,0.2); |
|
|
border-radius: 8px; |
|
|
padding: 10px 12px; |
|
|
font-size: 12px; |
|
|
width: 480px; |
|
|
white-space: normal; |
|
|
z-index: 999999; |
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.6); |
|
|
text-align: left; |
|
|
} |
|
|
.info-tip:hover .tooltip { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.status-bar { |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
color: #60a5fa; |
|
|
padding: 8px 15px; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 0.8em; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.canvas-container { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
background: |
|
|
repeating-linear-gradient( |
|
|
45deg, |
|
|
#1a1a1a 0px, |
|
|
#1a1a1a 10px, |
|
|
#2a2a2a 10px, |
|
|
#2a2a2a 20px |
|
|
); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.canvas-wrapper { |
|
|
position: relative; |
|
|
border: 2px solid #444; |
|
|
background: #111; |
|
|
box-shadow: |
|
|
0 0 20px rgba(0, 0, 0, 0.5), |
|
|
inset 0 0 10px rgba(0, 0, 0, 0.3); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.canvas-wrapper canvas { |
|
|
display: block; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
.canvas-wrapper:hover { |
|
|
border-color: #666; |
|
|
box-shadow: |
|
|
0 0 30px rgba(0, 0, 0, 0.7), |
|
|
inset 0 0 15px rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.progress-container { |
|
|
width: 100%; |
|
|
height: 18px; |
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); |
|
|
border: 1px solid rgba(255,255,255,0.12); |
|
|
border-radius: 999px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.35) inset; |
|
|
position: relative; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, #60a5fa, #8b5cf6); |
|
|
box-shadow: 0 0 10px rgba(96,165,250,0.65); |
|
|
position: relative; |
|
|
transition: width .15s ease; |
|
|
} |
|
|
.progress-text { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
font-size: 11px; |
|
|
color: #f8fafc; |
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.5); |
|
|
pointer-events: none; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.status-badges { |
|
|
display: flex; |
|
|
gap: 8px; |
|
|
flex-wrap: wrap; |
|
|
margin-top: 8px; |
|
|
} |
|
|
.badge { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
padding: 6px 10px; |
|
|
border-radius: 8px; |
|
|
font-size: 12px; |
|
|
border: 1px solid rgba(255,255,255,0.12); |
|
|
background: rgba(255,255,255,0.06); |
|
|
} |
|
|
.badge .dot { width: 8px; height: 8px; border-radius: 999px; } |
|
|
.badge.queue .dot { background: #f59e0b; } |
|
|
.badge.running .dot { background: #22c55e; } |
|
|
.badge.time .dot { background: #60a5fa; } |
|
|
.badge.bytes .dot { background: #a78bfa; } |
|
|
|
|
|
.details-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
|
gap: 6px 12px; |
|
|
margin-top: 8px; |
|
|
font-size: 12px; |
|
|
color: #cbd5e1; |
|
|
} |
|
|
.details-grid div { opacity: 0.9; } |
|
|
|
|
|
|
|
|
.canvas-wrapper.resizing { |
|
|
border-color: #60a5fa; |
|
|
box-shadow: |
|
|
0 0 25px rgba(96, 165, 250, 0.3), |
|
|
inset 0 0 10px rgba(96, 165, 250, 0.1); |
|
|
} |
|
|
|
|
|
.canvas-wrapper.resizing::after { |
|
|
content: "Resizing..."; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
color: #60a5fa; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
z-index: 10; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
|
|
|
.gui-panel { |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
border-radius: 8px; |
|
|
padding: 15px; |
|
|
min-height: 400px; |
|
|
} |
|
|
|
|
|
.gui-panel .lil-gui { |
|
|
--background-color: rgba(0, 0, 0, 0.8); |
|
|
--text-color: #ffffff; |
|
|
--title-background-color: rgba(96, 165, 250, 0.2); |
|
|
--title-text-color: #ffffff; |
|
|
--widget-color: rgba(96, 165, 250, 0.3); |
|
|
--hover-color: rgba(96, 165, 250, 0.5); |
|
|
} |
|
|
|
|
|
|
|
|
.lil-gui { |
|
|
position: relative !important; |
|
|
z-index: 1000 !important; |
|
|
} |
|
|
|
|
|
|
|
|
.examples-section { |
|
|
margin-top: 16px; |
|
|
padding-top: 12px; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.examples-section h3 { |
|
|
margin: 0 0 8px 0; |
|
|
color: #ffffff; |
|
|
font-size: 1em; |
|
|
} |
|
|
.examples-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 8px; |
|
|
} |
|
|
.example-item { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
padding-top: 100%; |
|
|
background: rgba(255,255,255,0.06); |
|
|
border: 1px solid rgba(255,255,255,0.12); |
|
|
border-radius: 6px; |
|
|
overflow: hidden; |
|
|
cursor: pointer; |
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease; |
|
|
} |
|
|
.example-item:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 16px rgba(0,0,0,0.35); |
|
|
} |
|
|
.example-item img { |
|
|
position: absolute; |
|
|
top: 0; left: 0; right: 0; bottom: 0; |
|
|
width: 100%; height: 100%; object-fit: cover; |
|
|
} |
|
|
.example-item .label { |
|
|
position: absolute; |
|
|
bottom: 0; left: 0; right: 0; |
|
|
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); |
|
|
color: #e5e7eb; |
|
|
font-size: 11px; |
|
|
padding: 4px 6px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.left-panel { |
|
|
width: 250px; |
|
|
} |
|
|
|
|
|
.right-panel { |
|
|
width: 280px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.content-container { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.left-panel, .right-panel { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
max-height: 200px; |
|
|
} |
|
|
|
|
|
.center-panel { |
|
|
flex: 1; |
|
|
min-height: 400px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
<script type="importmap"> |
|
|
{ |
|
|
"imports": { |
|
|
"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.178.0/three.module.js", |
|
|
"@sparkjsdev/spark": "https://sparkjs.dev/releases/spark/0.1.9/spark.module.js", |
|
|
"lil-gui": "https://cdn.jsdelivr.net/npm/[email protected]/+esm" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="main-container"> |
|
|
|
|
|
<header class="header"> |
|
|
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;"> |
|
|
<h1 style="margin: 0; flex: 1; text-align: left;"> |
|
|
<span class="header-title-wrap">FlashWorld Spark Demo |
|
|
<span class="info-tip">! |
|
|
<span class="tooltip" style="max-width: 260px; text-align: left;">Front-end real-time rendering in Spark uses compressed and pruned Gaussians. Visual quality in this demo may be lower than offline/back-end rendering. |
|
|
</span> |
|
|
</span> |
|
|
</span> |
|
|
</h1> |
|
|
<div class="header-links" style="margin-left: 20px;"> |
|
|
<a href="https://arxiv.org/pdf/2510.13678" target="_blank">Paper</a> |
|
|
<a href="https://github.com/imlixinyang/FlashWorld" target="_blank">Code</a> |
|
|
<a href="https://imlixinyang.github.io/FlashWorld-Project-Page/" target="_blank">Project Page</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="content-container"> |
|
|
|
|
|
<div class="left-panel"> |
|
|
<div class="guidance"> |
|
|
|
|
|
|
|
|
<div class="step"> |
|
|
<h3>1. Configure</h3> |
|
|
<p>Set FOV and Resolution and Click "Fix Configurations"</p> |
|
|
<p><strong>Important</strong>: You need to specify your Hugging Face Access Token with READ permission to use the online free ZeroGPU service.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="step"> |
|
|
<h3>2. Set Camera Trajectory</h3> |
|
|
<p><b>Manual:</b> Navigate with mouse and keyboard, press <kbd>Space</kbd> to record</p> |
|
|
<p><b>Template:</b> Select template type and click "Generate Trajectory"</p> |
|
|
<p><b>JSON:</b> Load trajectory from JSON file</p> |
|
|
</div> |
|
|
|
|
|
<div class="step"> |
|
|
<h3>3. Add Prompts</h3> |
|
|
<p>Upload image or enter text description</p> |
|
|
</div> |
|
|
|
|
|
<div class="step"> |
|
|
<h3>4. Generate</h3> |
|
|
<p>Click "Generate!" to create your scene</p> |
|
|
</div> |
|
|
|
|
|
<div class="step controls-info"> |
|
|
<h3>Controls</h3> |
|
|
<p><strong>Mouse/QE:</strong> Rotate view</p> |
|
|
<p><strong>WASD/RF:</strong> Move</p> |
|
|
<p><strong>Space:</strong> Record camera</p> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="examples-section" class="examples-section"> |
|
|
<h3>Examples</h3> |
|
|
<div id="examples-grid" class="examples-grid"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="center-panel"> |
|
|
<div class="canvas-container" id="canvas-container"> |
|
|
<div class="canvas-wrapper" id="canvas-wrapper"> |
|
|
<div class="loading" id="loading"> |
|
|
<h3>🎬 Generating Scene...</h3> |
|
|
<p>Please wait while we create your 3D scene</p> |
|
|
<div id="generation-info" class="generation-info" style="display: none;"> |
|
|
<div><strong>Generation Time:</strong> <span id="generation-time">-</span> seconds</div> |
|
|
<div><strong>File Size:</strong> <span id="file-size">-</span> MB</div> |
|
|
</div> |
|
|
<div id="download-progress" style="display: none;"> |
|
|
<div class="progress-container"> |
|
|
<div class="progress-bar" id="progress-bar"></div> |
|
|
<div class="progress-text" id="progress-text">0%</div> |
|
|
</div> |
|
|
<div class="status-badges" id="status-badges" style="display: none;"> |
|
|
<div class="badge queue" id="badge-queue"><span class="dot"></span><span id="badge-queue-text">Queue</span></div> |
|
|
<div class="badge running" id="badge-running" style="display: none;"><span class="dot"></span><span id="badge-running-text">Running</span></div> |
|
|
<div class="badge time" id="badge-time" style="display: none;"><span class="dot"></span><span id="badge-time-text">00:00</span></div> |
|
|
</div> |
|
|
<div id="queue-details" class="details-grid" style="display: none;"></div> |
|
|
<div id="download-details" class="details-grid" style="display: none;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="right-panel"> |
|
|
<div class="gui-container"> |
|
|
|
|
|
<div class="gui-panel" id="gui-container"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="image-preview-area" style="padding: 10px; display: none;"> |
|
|
<div style="font-size: 12px; color: #ccc; margin-bottom: 8px; text-align: left;">Input Image Preview</div> |
|
|
<div style="text-align: center;"> |
|
|
<img id="preview-img" style="max-width: 100%; max-height: 200px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="status-bar" id="status-bar"> |
|
|
Ready to generate 3D scenes | Cameras: 0 | Status: Waiting for input |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<input id="file-input" type="file" accept=".jpg,.png,.jpeg" multiple="true" style="display: none;" /> |
|
|
<input id="json-input" type="file" accept=".json" multiple="false" style="display: none;" /> |
|
|
|
|
|
<script type="module"> |
|
|
|
|
|
|
|
|
|
|
|
import * as THREE from "three"; |
|
|
import { SplatMesh, SparkControls, textSplats } from "@sparkjsdev/spark"; |
|
|
import GUI from "lil-gui"; |
|
|
|
|
|
|
|
|
const scene = new THREE.Scene(); |
|
|
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
camera.position.set(0, 0, 1.5); |
|
|
const renderer = new THREE.WebGLRenderer(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
|
|
|
|
|
|
function initializeRenderer() { |
|
|
const canvasWrapper = document.getElementById('canvas-wrapper'); |
|
|
if (canvasWrapper) { |
|
|
canvasWrapper.appendChild(renderer.domElement); |
|
|
|
|
|
|
|
|
updateCanvasSize(); |
|
|
console.log('Canvas initialized in wrapper'); |
|
|
} else { |
|
|
console.error('Canvas wrapper not found'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateCanvasSize() { |
|
|
const canvasWrapper = document.getElementById('canvas-wrapper'); |
|
|
if (!canvasWrapper) return; |
|
|
|
|
|
|
|
|
canvasWrapper.classList.add('resizing'); |
|
|
|
|
|
|
|
|
const resolution = guiOptions.Resolution.split('x'); |
|
|
const width = parseInt(resolution[2]) || 704; |
|
|
const height = parseInt(resolution[1]) || 480; |
|
|
|
|
|
|
|
|
renderer.setSize(width, height); |
|
|
camera.aspect = width / height; |
|
|
camera.updateProjectionMatrix(); |
|
|
|
|
|
|
|
|
canvasWrapper.style.width = width + 'px'; |
|
|
canvasWrapper.style.height = height + 'px'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
canvasWrapper.classList.remove('resizing'); |
|
|
}, 300); |
|
|
|
|
|
console.log('Canvas size updated:', width, 'x', height); |
|
|
} |
|
|
|
|
|
const controls = new SparkControls({ canvas: renderer.domElement }); |
|
|
|
|
|
|
|
|
const cameraSplats = []; |
|
|
const cameraParams = []; |
|
|
const interpolatedCamerasSplats = []; |
|
|
|
|
|
|
|
|
let fixGenerationFOV = false; |
|
|
let inputImageBase64 = null; |
|
|
let inputImageResolution = null; |
|
|
let currentGeneratedSplat = null; |
|
|
let currentDownloadedBlob = null; |
|
|
|
|
|
|
|
|
const loadingElement = document.getElementById('loading'); |
|
|
const statusBar = document.getElementById('status-bar'); |
|
|
|
|
|
|
|
|
let gui = null; |
|
|
|
|
|
|
|
|
function updateStatus(message, cameraCount = null) { |
|
|
const cameraText = cameraCount !== null ? `Cameras: ${cameraCount}` : `Cameras: ${cameraParams.length}`; |
|
|
statusBar.textContent = `${message} | ${cameraText} | Status: ${fixGenerationFOV ? 'Ready to record' : 'Configure settings'}`; |
|
|
|
|
|
|
|
|
updateSaveTrajectoryButton(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateSaveTrajectoryButton() { |
|
|
if (window.saveTrajectoryController) { |
|
|
if (cameraParams.length >= 2) { |
|
|
window.saveTrajectoryController.enable(); |
|
|
} else { |
|
|
window.saveTrajectoryController.disable(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function fetchWithAuth(url, options = {}) { |
|
|
const mergedOptions = { ...options }; |
|
|
const headers = new Headers(options && options.headers ? options.headers : undefined); |
|
|
if (guiOptions && guiOptions.HF_TOKEN && String(guiOptions.HF_TOKEN).trim().length > 0) { |
|
|
headers.set('Authorization', `Bearer ${guiOptions.HF_TOKEN}`); |
|
|
} |
|
|
mergedOptions.headers = headers; |
|
|
return fetch(url, mergedOptions); |
|
|
} |
|
|
|
|
|
|
|
|
function showLoading(show) { |
|
|
loadingElement.style.display = show ? 'block' : 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
function showGenerationInfo(generationTime, fileSize) { |
|
|
const generationInfo = document.getElementById('generation-info'); |
|
|
const generationTimeElement = document.getElementById('generation-time'); |
|
|
const fileSizeElement = document.getElementById('file-size'); |
|
|
|
|
|
generationTimeElement.textContent = generationTime.toFixed(2); |
|
|
fileSizeElement.textContent = (fileSize / (1024 * 1024)).toFixed(2); |
|
|
generationInfo.style.display = 'block'; |
|
|
} |
|
|
|
|
|
|
|
|
function showDownloadProgress() { |
|
|
const downloadProgress = document.getElementById('download-progress'); |
|
|
downloadProgress.style.display = 'block'; |
|
|
const qd = document.getElementById('queue-details'); |
|
|
const dd = document.getElementById('download-details'); |
|
|
const badges = document.getElementById('status-badges'); |
|
|
if (qd) qd.style.display = 'none'; |
|
|
if (dd) dd.style.display = 'none'; |
|
|
if (badges) badges.style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
function updateProgressBar(percentage) { |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const progressText = document.getElementById('progress-text'); |
|
|
|
|
|
progressBar.style.width = percentage + '%'; |
|
|
progressText.textContent = `${Math.round(percentage)}%`; |
|
|
} |
|
|
|
|
|
|
|
|
function setProgressLabel(text) { |
|
|
const progressText = document.getElementById('progress-text'); |
|
|
if (progressText) progressText.textContent = text; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let queuePollTimer = null; |
|
|
let currentTaskId = null; |
|
|
let initialQueuePosition = null; |
|
|
let latestGenerationTime = null; |
|
|
let lastDownloadPct = 0; |
|
|
let lastDownloadUpdateTs = 0; |
|
|
|
|
|
function showQueueWaiting(position, runningCount, queuedCount) { |
|
|
|
|
|
showDownloadProgress(); |
|
|
if (initialQueuePosition === null) { |
|
|
|
|
|
const initPos = (typeof position === 'number') ? position : 0; |
|
|
initialQueuePosition = Math.max(initPos, 1); |
|
|
} |
|
|
const percent = initialQueuePosition && initialQueuePosition > 0 |
|
|
? Math.max(0, Math.min(100, ((initialQueuePosition - (position || 0)) / initialQueuePosition) * 100)) |
|
|
: 0; |
|
|
updateProgressBar(percent); |
|
|
const totalWaiting = (position || 0) + (queuedCount || 0); |
|
|
if (position !== null && position !== undefined) { |
|
|
const pctText = `${Math.round(percent)}%`; |
|
|
if (totalWaiting > 0) { |
|
|
setProgressLabel(`Queued ${position}/${totalWaiting} (${pctText})`); |
|
|
} else { |
|
|
setProgressLabel(`Queued ${position} (${pctText})`); |
|
|
} |
|
|
} else { |
|
|
setProgressLabel('Queued'); |
|
|
} |
|
|
} |
|
|
|
|
|
async function pollTaskUntilReady(taskId) { |
|
|
currentTaskId = taskId; |
|
|
initialQueuePosition = null; |
|
|
if (queuePollTimer) { |
|
|
clearInterval(queuePollTimer); |
|
|
queuePollTimer = null; |
|
|
} |
|
|
const queueStartTs = Date.now(); |
|
|
|
|
|
const pollOnce = async () => { |
|
|
try { |
|
|
const resp = await fetchWithAuth(`${guiOptions.BackendAddress}/task/${taskId}`); |
|
|
if (!resp.ok) return; |
|
|
const info = await resp.json(); |
|
|
if (!info || !info.success) return; |
|
|
|
|
|
const pos = info.queue && typeof info.queue.position === 'number' ? info.queue.position : 0; |
|
|
const running = info.queue ? info.queue.running_count : 0; |
|
|
const queued = info.queue ? info.queue.queued_count : 0; |
|
|
if (info.status === 'queued' || info.status === 'running') { |
|
|
|
|
|
if (info.status === 'queued') { |
|
|
showQueueWaiting(pos, running, queued); |
|
|
} else { |
|
|
|
|
|
updateProgressBar(100); |
|
|
showDownloadProgress(); |
|
|
setProgressLabel('Generating...'); |
|
|
} |
|
|
} |
|
|
|
|
|
if (info.status === 'completed' && info.download_url) { |
|
|
clearInterval(queuePollTimer); |
|
|
queuePollTimer = null; |
|
|
latestGenerationTime = typeof info.generation_time === 'number' ? info.generation_time : null; |
|
|
|
|
|
updateStatus('Downloading generated scene...', cameraParams.length); |
|
|
const response = await fetchWithAuth(guiOptions.BackendAddress + info.download_url); |
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); |
|
|
const contentLength = response.headers.get('content-length'); |
|
|
const total = parseInt(contentLength || '0', 10); |
|
|
|
|
|
showGenerationInfo(latestGenerationTime || 0, total); |
|
|
let loaded = 0; |
|
|
const reader = response.body.getReader(); |
|
|
const chunks = []; |
|
|
updateProgressBar(0); |
|
|
setProgressLabel('Downloading 0%'); |
|
|
lastDownloadPct = 0; |
|
|
lastDownloadUpdateTs = 0; |
|
|
while (true) { |
|
|
const { done, value } = await reader.read(); |
|
|
if (done) break; |
|
|
chunks.push(value); |
|
|
loaded += value.length; |
|
|
if (total) { |
|
|
const pct = Math.min(100, (loaded / total) * 100); |
|
|
const now = Date.now(); |
|
|
const rounded = Math.round(pct); |
|
|
|
|
|
if (rounded > Math.round(lastDownloadPct) || (now - lastDownloadUpdateTs) > 200) { |
|
|
lastDownloadPct = Math.max(lastDownloadPct, pct); |
|
|
updateProgressBar(lastDownloadPct); |
|
|
setProgressLabel(`Downloading ${Math.round(lastDownloadPct)}%`); |
|
|
lastDownloadUpdateTs = now; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
if (instructionSplat) { |
|
|
scene.remove(instructionSplat); |
|
|
console.log('Instruction splat removed'); |
|
|
instructionSplat = null; |
|
|
} |
|
|
|
|
|
const blob = new Blob(chunks); |
|
|
const url = URL.createObjectURL(blob); |
|
|
|
|
|
|
|
|
currentDownloadedBlob = blob; |
|
|
|
|
|
|
|
|
updateStatus('Loading generated scene...', cameraParams.length); |
|
|
|
|
|
const GeneratedSplat = new SplatMesh({ url }); |
|
|
scene.add(GeneratedSplat); |
|
|
currentGeneratedSplat = GeneratedSplat; |
|
|
updateStatus('Scene generated successfully!', cameraParams.length); |
|
|
|
|
|
showGenerationInfo(latestGenerationTime || 0, total || blob.size); |
|
|
|
|
|
|
|
|
if (window.downloadController) { |
|
|
window.downloadController.enable(); |
|
|
} |
|
|
|
|
|
try { |
|
|
if (info.file_id) { |
|
|
const resp = await fetchWithAuth(`${guiOptions.BackendAddress}/delete/${info.file_id}`, { method: 'POST' }); |
|
|
if (!resp.ok) console.warn('Delete notify failed'); |
|
|
} |
|
|
} catch (e) { |
|
|
console.warn('Delete notify error', e); |
|
|
} |
|
|
hideDownloadProgress(); |
|
|
showLoading(false); |
|
|
} else if (info.status === 'failed') { |
|
|
clearInterval(queuePollTimer); |
|
|
queuePollTimer = null; |
|
|
throw new Error(info.error || 'Generation failed'); |
|
|
} |
|
|
} catch (e) { |
|
|
console.debug('Polling error:', e); |
|
|
} |
|
|
}; |
|
|
|
|
|
await pollOnce(); |
|
|
queuePollTimer = setInterval(pollOnce, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
function hideDownloadProgress() { |
|
|
const downloadProgress = document.getElementById('download-progress'); |
|
|
downloadProgress.style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
let userCameraState = null; |
|
|
|
|
|
|
|
|
function getInterpolatedCameraAtTime(t) { |
|
|
if (cameraParams.length === 0) { |
|
|
return camera; |
|
|
} |
|
|
|
|
|
if (cameraParams.length === 1) { |
|
|
return cameraParams[0]; |
|
|
} |
|
|
|
|
|
|
|
|
const clampedT = Math.max(0, Math.min(1, t)); |
|
|
|
|
|
|
|
|
const cameraIndex = clampedT * (cameraParams.length - 1); |
|
|
const startIndex = Math.min(Math.floor(cameraIndex), cameraParams.length - 2); |
|
|
const endIndex = startIndex + 1; |
|
|
const startCamera = cameraParams[startIndex]; |
|
|
const endCamera = cameraParams[endIndex]; |
|
|
|
|
|
|
|
|
const _t = cameraIndex - startIndex; |
|
|
|
|
|
|
|
|
return interpolateTwoCameras(startCamera, endCamera, _t); |
|
|
} |
|
|
|
|
|
function setCameraByScrub(t) { |
|
|
if (cameraParams.length === 0) return; |
|
|
const clampedT = Math.max(0, Math.min(1, t)); |
|
|
const camT = getInterpolatedCameraAtTime(clampedT); |
|
|
camera.position.copy(camT.position); |
|
|
camera.quaternion.copy(camT.quaternion); |
|
|
camera.fov = camT.fov; |
|
|
camera.updateProjectionMatrix(); |
|
|
} |
|
|
|
|
|
|
|
|
const supportedResolutions = [ |
|
|
{ frame: 24, width: 704, height: 480 }, |
|
|
{ frame: 24, width: 480, height: 704 } |
|
|
]; |
|
|
|
|
|
|
|
|
const guiOptions = { |
|
|
|
|
|
BackendAddress: `https://imlixinyang-flashworld-demo.hf.space`, |
|
|
HF_TOKEN: "", |
|
|
FOV: 60, |
|
|
LoadFromJson: () => { |
|
|
const jsonInput = document.querySelector("#json-input"); |
|
|
if (jsonInput) jsonInput.click(); |
|
|
}, |
|
|
LoadTrajectoryFromJson: () => { |
|
|
if (!fixGenerationFOV) { |
|
|
updateStatus('Warning: Please fix configuration first before loading trajectory', cameraParams.length); |
|
|
return; |
|
|
} |
|
|
|
|
|
window.loadTrajectoryOnly = true; |
|
|
const jsonInput = document.querySelector("#json-input"); |
|
|
if (jsonInput) jsonInput.click(); |
|
|
}, |
|
|
fixGenerationFOV: () => { |
|
|
|
|
|
if (window.fixGenerationFOVController) window.fixGenerationFOVController.disable(); |
|
|
fixGenerationFOV = true; |
|
|
|
|
|
const new_camera = new THREE.PerspectiveCamera(guiOptions.FOV, guiOptions.Resolution.split('x')[2] / guiOptions.Resolution.split('x')[1]); |
|
|
new_camera.position.set(0, 0, 0); |
|
|
new_camera.quaternion.set(0, 0, 0, 1); |
|
|
new_camera.updateProjectionMatrix(); |
|
|
|
|
|
const cameraSplat = createCameraSplat(new_camera); |
|
|
cameraSplats.push(cameraSplat); |
|
|
cameraParams.push({ |
|
|
position: new_camera.position.clone(), |
|
|
quaternion: new_camera.quaternion.clone(), |
|
|
fov: new_camera.fov, |
|
|
aspect: new_camera.aspect, |
|
|
}); |
|
|
scene.add(cameraSplat); |
|
|
|
|
|
updateStatus('Camera settings fixed. Press Space to record cameras.', cameraParams.length); |
|
|
}, |
|
|
Resolution: `${supportedResolutions[0].frame}x${supportedResolutions[0].height}x${supportedResolutions[0].width}`, |
|
|
VisualizeCameraSplats: true, |
|
|
VisualizeInterpolatedCameras: true, |
|
|
inputImagePrompt: () => { |
|
|
const fileInput = document.querySelector("#file-input"); |
|
|
if (fileInput) { |
|
|
|
|
|
fileInput.click(); |
|
|
} |
|
|
}, |
|
|
imageIndex: 0, |
|
|
inputTextPrompt: "", |
|
|
|
|
|
LoadAllFromJson: () => { |
|
|
|
|
|
window.loadTrajectoryOnly = false; |
|
|
const jsonInput = document.querySelector("#json-input"); |
|
|
if (jsonInput) jsonInput.click(); |
|
|
}, |
|
|
SaveAllToJson: () => { |
|
|
|
|
|
const [nStr, hStr, wStr] = guiOptions.Resolution.split('x'); |
|
|
const n = parseInt(nStr), h = parseInt(hStr), w = parseInt(wStr); |
|
|
const fovDeg = guiOptions.FOV; |
|
|
const fy = 0.5 / Math.tan(0.5 * fovDeg * Math.PI / 180) * h; |
|
|
const fx = fy; |
|
|
const cx = 0.5 * w; |
|
|
const cy = 0.5 * h; |
|
|
|
|
|
const payload = { |
|
|
image_prompt: inputImageBase64 ? inputImageBase64 : null, |
|
|
text_prompt: guiOptions.inputTextPrompt || "", |
|
|
image_index: guiOptions.imageIndex || 0, |
|
|
resolution: [n, h, w], |
|
|
cameras: cameraParams.map(cam => ({ |
|
|
position: [cam.position.x, cam.position.y, cam.position.z], |
|
|
quaternion: [cam.quaternion.w, cam.quaternion.x, cam.quaternion.y, cam.quaternion.z], |
|
|
fx, fy, cx, cy |
|
|
})) |
|
|
}; |
|
|
|
|
|
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `scene_all_${Date.now()}.json`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
updateStatus('All data saved to JSON.', cameraParams.length); |
|
|
}, |
|
|
|
|
|
|
|
|
trajectoryMode: "Manual", |
|
|
templateType: "Move Forward", |
|
|
cameraTrajectory: "Manual", |
|
|
trajectorySettings: { |
|
|
angle: 180, |
|
|
tilt: 15 |
|
|
}, |
|
|
generateTrajectory: () => { |
|
|
generateCameraTrajectory(guiOptions.templateType); |
|
|
}, |
|
|
saveTrajectoryToJson: () => { |
|
|
|
|
|
|
|
|
const [nStr, hStr, wStr] = guiOptions.Resolution.split('x'); |
|
|
const n = parseInt(nStr), h = parseInt(hStr), w = parseInt(wStr); |
|
|
const payload = { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
cameras: cameraParams.map(cam => ({ |
|
|
position: [cam.position.x, cam.position.y, cam.position.z], |
|
|
quaternion: [cam.quaternion.w, cam.quaternion.x, cam.quaternion.y, cam.quaternion.z] |
|
|
})) |
|
|
}; |
|
|
|
|
|
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `trajectory_${Date.now()}.json`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
updateStatus('Trajectory saved to JSON.', cameraParams.length); |
|
|
}, |
|
|
clearAllCameras: () => { |
|
|
if (cameraParams.length <= 1) { |
|
|
updateStatus('No cameras to clear (first camera is always preserved)', cameraParams.length); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const firstCamera = cameraParams[0]; |
|
|
const firstSplat = cameraSplats[0]; |
|
|
|
|
|
|
|
|
for (let i = cameraSplats.length - 1; i >= 1; i--) { |
|
|
scene.remove(cameraSplats[i]); |
|
|
} |
|
|
|
|
|
|
|
|
cameraSplats.length = 1; |
|
|
cameraParams.length = 1; |
|
|
|
|
|
|
|
|
interpolatedCamerasSplats.forEach(splat => scene.remove(splat)); |
|
|
interpolatedCamerasSplats.length = 0; |
|
|
|
|
|
updateStatus('Cameras cleared (first camera preserved). Ready to add more cameras.', 1); |
|
|
console.log('Cameras cleared, first camera preserved'); |
|
|
}, |
|
|
|
|
|
playbackT: 0, |
|
|
|
|
|
downloadGeneratedFile: () => { |
|
|
if (!currentDownloadedBlob) { |
|
|
updateStatus('No generated file available to download', cameraParams.length); |
|
|
return; |
|
|
} |
|
|
|
|
|
updateStatus(`Downloading SPZ file (${(currentDownloadedBlob.size / 1024 / 1024).toFixed(2)} MB)...`, cameraParams.length); |
|
|
|
|
|
|
|
|
const url = URL.createObjectURL(currentDownloadedBlob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `${Date.now()}.spz`; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
updateStatus('SPZ file downloaded successfully!', cameraParams.length); |
|
|
}, |
|
|
|
|
|
generate: () => { |
|
|
|
|
|
if (cameraParams.length < 2) { |
|
|
console.error('Need at least 2 cameras to generate. Please press Space to record more cameras.'); |
|
|
updateStatus('Error: Need at least 2 cameras', cameraParams.length); |
|
|
return; |
|
|
} |
|
|
|
|
|
updateStatus('Preparing generation...', cameraParams.length); |
|
|
|
|
|
|
|
|
if (currentGeneratedSplat) { |
|
|
scene.remove(currentGeneratedSplat); |
|
|
currentGeneratedSplat = null; |
|
|
console.log('Previous generated scene removed'); |
|
|
} |
|
|
|
|
|
|
|
|
currentDownloadedBlob = null; |
|
|
|
|
|
|
|
|
if (window.downloadController) { |
|
|
window.downloadController.disable(); |
|
|
} |
|
|
|
|
|
|
|
|
const generationTimeElement = document.getElementById('generation-time'); |
|
|
const fileSizeElement = document.getElementById('file-size'); |
|
|
const progressBar = document.getElementById('progress-bar'); |
|
|
const progressText = document.getElementById('progress-text'); |
|
|
|
|
|
if (generationTimeElement) generationTimeElement.textContent = '-'; |
|
|
if (fileSizeElement) fileSizeElement.textContent = '-'; |
|
|
if (progressBar) progressBar.style.width = '0%'; |
|
|
if (progressText) progressText.textContent = '0%'; |
|
|
|
|
|
|
|
|
const generationInfo = document.getElementById('generation-info'); |
|
|
const downloadProgress = document.getElementById('download-progress'); |
|
|
if (generationInfo) generationInfo.style.display = 'none'; |
|
|
if (downloadProgress) downloadProgress.style.display = 'none'; |
|
|
|
|
|
showLoading(true); |
|
|
|
|
|
|
|
|
const interpolatedCameras = interpolateCameras(cameraParams, parseInt(guiOptions.Resolution.split('x')[0])); |
|
|
interpolatedCameras.forEach(cam => { |
|
|
const interpolatedCameraSplat = createCameraSplat(cam, [0.5, 0.5, 0.5]); |
|
|
interpolatedCamerasSplats.push(interpolatedCameraSplat); |
|
|
scene.add(interpolatedCameraSplat); |
|
|
}); |
|
|
|
|
|
console.log('Sending request to backend...'); |
|
|
console.log('Interpolated cameras:', interpolatedCameras.length); |
|
|
updateStatus('Sending request to backend...', cameraParams.length); |
|
|
|
|
|
|
|
|
const requestUrl = guiOptions.BackendAddress + '/gradio_api/call/gradio_generate'; |
|
|
const requestData = { |
|
|
image_prompt: inputImageBase64 ? inputImageBase64 : "", |
|
|
text_prompt: guiOptions.inputTextPrompt, |
|
|
image_index: 0, |
|
|
resolution: [ |
|
|
parseInt(guiOptions.Resolution.split('x')[0]), |
|
|
parseInt(guiOptions.Resolution.split('x')[1]), |
|
|
parseInt(guiOptions.Resolution.split('x')[2]) |
|
|
], |
|
|
cameras: interpolatedCameras.map(cam => ({ |
|
|
position: [cam.position.x, cam.position.y, cam.position.z], |
|
|
quaternion: [cam.quaternion.w, cam.quaternion.x, cam.quaternion.y, cam.quaternion.z], |
|
|
fx: 0.5 / Math.tan(0.5 * cam.fov * Math.PI / 180) * parseInt(guiOptions.Resolution.split('x')[1]), |
|
|
fy: 0.5 / Math.tan(0.5 * cam.fov * Math.PI / 180) * parseInt(guiOptions.Resolution.split('x')[1]), |
|
|
cx: inputImageBase64 && inputImageResolution |
|
|
? 0.5 * inputImageResolution.width |
|
|
: 0.5 * parseInt(guiOptions.Resolution.split('x')[2]), |
|
|
cy: inputImageBase64 && inputImageResolution |
|
|
? 0.5 * inputImageResolution.height |
|
|
: 0.5 * parseInt(guiOptions.Resolution.split('x')[1]), |
|
|
})) |
|
|
}; |
|
|
|
|
|
fetchWithAuth(requestUrl, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
mode: 'cors', |
|
|
body: JSON.stringify({ data: [JSON.stringify(requestData)] }) |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
|
|
|
if (!data || !data.event_id) { |
|
|
throw new Error('Invalid Gradio response format - no event_id'); |
|
|
} |
|
|
return fetchWithAuth(guiOptions.BackendAddress + `/gradio_api/call/gradio_generate/${data.event_id}`) |
|
|
.then(resp => { |
|
|
if (!resp.ok) throw new Error(`HTTP error! status: ${resp.status}`); |
|
|
return resp.text(); |
|
|
}) |
|
|
.then(sseText => { |
|
|
const lines = sseText.split('\n'); |
|
|
let eventType = null; |
|
|
let dataContent = null; |
|
|
for (const line of lines) { |
|
|
if (line.startsWith('event: ')) eventType = line.substring(7); |
|
|
else if (line.startsWith('data: ')) dataContent = line.substring(6); |
|
|
} |
|
|
if (eventType !== 'complete' || !dataContent) { |
|
|
throw new Error('Gradio SSE response not complete or missing data'); |
|
|
} |
|
|
const resultData = JSON.parse(dataContent); |
|
|
if (!resultData || resultData.length === 0) { |
|
|
throw new Error('Invalid Gradio generation result format'); |
|
|
} |
|
|
const responseData = JSON.parse(resultData[0]); |
|
|
if (!responseData.success) { |
|
|
throw new Error('Gradio generation failed: ' + (responseData.error || 'Unknown error')); |
|
|
} |
|
|
|
|
|
|
|
|
showGenerationInfo(responseData.generation_time, responseData.file_size); |
|
|
showDownloadProgress(); |
|
|
updateStatus('Downloading generated scene...', cameraParams.length); |
|
|
|
|
|
|
|
|
return fetchWithAuth(guiOptions.BackendAddress + '/gradio_api/call/download_file', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ data: [responseData.file_id] }) |
|
|
}) |
|
|
.then(r => r.json()) |
|
|
.then(downloadEvent => { |
|
|
return fetchWithAuth(guiOptions.BackendAddress + `/gradio_api/call/download_file/${downloadEvent.event_id}`) |
|
|
.then(r => { |
|
|
if (!r.ok) throw new Error(`HTTP error! status: ${r.status}`); |
|
|
return r.text(); |
|
|
}) |
|
|
.then(downloadSseText => { |
|
|
const lines = downloadSseText.split('\n'); |
|
|
let eventType = null; |
|
|
let dataContent = null; |
|
|
for (const line of lines) { |
|
|
if (line.startsWith('event: ')) eventType = line.substring(7); |
|
|
else if (line.startsWith('data: ')) dataContent = line.substring(6); |
|
|
} |
|
|
if (eventType !== 'complete' || !dataContent) { |
|
|
throw new Error('Gradio download SSE response not complete or missing data'); |
|
|
} |
|
|
const fileData = JSON.parse(dataContent); |
|
|
if (!fileData || fileData.length === 0 || !fileData[0].url) { |
|
|
throw new Error('Invalid file data format from Gradio'); |
|
|
} |
|
|
return fileData[0].url; |
|
|
}); |
|
|
}); |
|
|
}) |
|
|
.then(fileUrl => { |
|
|
return fetchWithAuth(fileUrl).then(response => { |
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); |
|
|
const contentLength = response.headers.get('content-length'); |
|
|
const total = parseInt(contentLength || '0', 10); |
|
|
let loaded = 0; |
|
|
const reader = response.body.getReader(); |
|
|
const chunks = []; |
|
|
function pump() { |
|
|
return reader.read().then(({ done, value }) => { |
|
|
if (done) return new Blob(chunks); |
|
|
chunks.push(value); |
|
|
loaded += value.length; |
|
|
if (total) updateProgressBar((loaded / total) * 100); |
|
|
return pump(); |
|
|
}); |
|
|
} |
|
|
return pump().then(blob => { |
|
|
|
|
|
currentDownloadedBlob = blob; |
|
|
|
|
|
const url = URL.createObjectURL(blob); |
|
|
return { url, __deleteAfterDownloadFileId: (typeof responseData !== 'undefined' ? responseData.file_id : null) }; |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}) |
|
|
.then(data => { |
|
|
if (data && data.url) { |
|
|
updateStatus('Loading 3D scene...', cameraParams.length); |
|
|
if (instructionSplat) { |
|
|
scene.remove(instructionSplat); |
|
|
console.log('Instruction splat removed'); |
|
|
} |
|
|
const GeneratedSplat = new SplatMesh({ url: data.url }); |
|
|
scene.add(GeneratedSplat); |
|
|
currentGeneratedSplat = GeneratedSplat; |
|
|
console.log('3D scene loaded successfully!'); |
|
|
updateStatus('Scene generated successfully!', cameraParams.length); |
|
|
|
|
|
|
|
|
if (window.downloadController) { |
|
|
window.downloadController.enable(); |
|
|
} |
|
|
|
|
|
hideDownloadProgress(); |
|
|
showLoading(false); |
|
|
|
|
|
|
|
|
if (data.__deleteAfterDownloadFileId) { |
|
|
fetchWithAuth(guiOptions.BackendAddress + '/delete/' + data.__deleteAfterDownloadFileId, { method: 'POST' }) |
|
|
.then(() => console.log('Delete notify sent')) |
|
|
.catch(err => console.warn('Delete notify failed', err)); |
|
|
} |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Error:', error); |
|
|
updateStatus('Generation failed: ' + error.message, cameraParams.length); |
|
|
hideDownloadProgress(); |
|
|
showLoading(false); |
|
|
}); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const EXAMPLE_FILES = Array.from({ length: 8 }, (_, i) => `examples/${i + 1}.json`); |
|
|
|
|
|
function processJsonLoad(jsonData, loadTrajectoryOnlyProvided) { |
|
|
|
|
|
const loadTrajectoryOnly = !!loadTrajectoryOnlyProvided; |
|
|
|
|
|
|
|
|
cameraSplats.forEach(splat => scene.remove(splat)); |
|
|
cameraSplats.length = 0; |
|
|
cameraParams.length = 0; |
|
|
interpolatedCamerasSplats.forEach(splat => scene.remove(splat)); |
|
|
interpolatedCamerasSplats.length = 0; |
|
|
|
|
|
try { |
|
|
const imagePrompt = jsonData.image_prompt || jsonData.imagePrompt || null; |
|
|
const textPrompt = jsonData.text_prompt || jsonData.textPrompt || ""; |
|
|
const cameras = jsonData.cameras || []; |
|
|
const resolution = jsonData.resolution || [16, 480, 640]; |
|
|
const imageIndex = jsonData.image_index || jsonData.imageIndex || 0; |
|
|
|
|
|
|
|
|
if (!loadTrajectoryOnly && imagePrompt) { |
|
|
inputImageBase64 = imagePrompt; |
|
|
const previewArea = document.getElementById('image-preview-area'); |
|
|
const previewImg = document.getElementById('preview-img'); |
|
|
if (previewImg && previewArea) { |
|
|
previewImg.src = inputImageBase64; |
|
|
previewArea.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
if (!loadTrajectoryOnly) { |
|
|
guiOptions.inputTextPrompt = textPrompt; |
|
|
guiOptions.imageIndex = imageIndex; |
|
|
syncGuiPromptControls(); |
|
|
} |
|
|
|
|
|
|
|
|
if (!loadTrajectoryOnly && Array.isArray(resolution) && resolution.length === 3 && cameras && cameras.length > 0) { |
|
|
const H = resolution[1]; |
|
|
const firstCam = cameras[0]; |
|
|
if (firstCam && typeof firstCam.fy === 'number' && isFinite(firstCam.fy) && firstCam.fy > 0) { |
|
|
const inferredFov = 2 * Math.atan(0.5 * H / firstCam.fy) * 180 / Math.PI; |
|
|
guiOptions.FOV = inferredFov; |
|
|
} |
|
|
} |
|
|
|
|
|
if (cameras && cameras.length > 0) { |
|
|
let jsonFirstPosition = null; |
|
|
let jsonFirstQuaternion = null; |
|
|
const firstCameraData = cameras[0]; |
|
|
if (Array.isArray(firstCameraData?.position) && firstCameraData.position.length === 3) { |
|
|
jsonFirstPosition = new THREE.Vector3( |
|
|
firstCameraData.position[0], |
|
|
firstCameraData.position[1], |
|
|
firstCameraData.position[2] |
|
|
); |
|
|
} |
|
|
if (Array.isArray(firstCameraData?.quaternion) && firstCameraData.quaternion.length === 4) { |
|
|
jsonFirstQuaternion = new THREE.Quaternion( |
|
|
firstCameraData.quaternion[1], |
|
|
firstCameraData.quaternion[2], |
|
|
firstCameraData.quaternion[3], |
|
|
firstCameraData.quaternion[0] |
|
|
); |
|
|
} |
|
|
|
|
|
cameras.forEach((cameraData) => { |
|
|
let aspect = 1.0; |
|
|
if (Array.isArray(resolution) && resolution.length === 3) { |
|
|
aspect = resolution[2] / resolution[1]; |
|
|
} else { |
|
|
aspect = guiOptions.Resolution.split('x')[2] / guiOptions.Resolution.split('x')[1]; |
|
|
} |
|
|
|
|
|
let fov = 60; |
|
|
if (loadTrajectoryOnly) { |
|
|
fov = guiOptions.FOV; |
|
|
} else { |
|
|
if (Array.isArray(resolution) && resolution.length === 3 && typeof cameraData.fy === 'number' && cameraData.fy > 0) { |
|
|
const H = resolution[1]; |
|
|
fov = 2 * Math.atan(0.5 * H / cameraData.fy) * 180 / Math.PI; |
|
|
guiOptions.FOV = fov; |
|
|
} else { |
|
|
fov = guiOptions.FOV; |
|
|
} |
|
|
} |
|
|
|
|
|
const cam = new THREE.PerspectiveCamera(fov, aspect); |
|
|
if (Array.isArray(cameraData.position) && cameraData.position.length === 3) { |
|
|
cam.position.set(cameraData.position[0], cameraData.position[1], cameraData.position[2]); |
|
|
} |
|
|
if (Array.isArray(cameraData.quaternion) && cameraData.quaternion.length === 4) { |
|
|
cam.quaternion.set( |
|
|
cameraData.quaternion[1], |
|
|
cameraData.quaternion[2], |
|
|
cameraData.quaternion[3], |
|
|
cameraData.quaternion[0] |
|
|
); |
|
|
} |
|
|
|
|
|
if (jsonFirstPosition && jsonFirstQuaternion) { |
|
|
const jsonFirstC2W = new THREE.Matrix4(); |
|
|
jsonFirstC2W.compose(jsonFirstPosition, jsonFirstQuaternion, new THREE.Vector3(1, 1, 1)); |
|
|
const currentC2W = new THREE.Matrix4(); |
|
|
currentC2W.compose(cam.position, cam.quaternion, new THREE.Vector3(1, 1, 1)); |
|
|
const refW2C = jsonFirstC2W.clone().invert(); |
|
|
const relativeTransform = refW2C.clone().multiply(currentC2W); |
|
|
const fixedC2W = new THREE.Matrix4(); |
|
|
fixedC2W.compose(new THREE.Vector3(0, 0, 0), new THREE.Quaternion(0, 0, 0, 1), new THREE.Vector3(1, 1, 1)); |
|
|
const newTransform = fixedC2W.clone().multiply(relativeTransform); |
|
|
const newPosition = new THREE.Vector3(); |
|
|
const newQuaternion = new THREE.Quaternion(); |
|
|
const newScale = new THREE.Vector3(); |
|
|
newTransform.decompose(newPosition, newQuaternion, newScale); |
|
|
cam.position.copy(newPosition); |
|
|
cam.quaternion.copy(newQuaternion); |
|
|
} |
|
|
|
|
|
cam.fov = fov; |
|
|
cam.aspect = aspect; |
|
|
cam.updateProjectionMatrix(); |
|
|
|
|
|
const cameraSplat = createCameraSplat(cam); |
|
|
cameraSplats.push(cameraSplat); |
|
|
cameraParams.push({ |
|
|
position: cam.position.clone(), |
|
|
quaternion: cam.quaternion.clone(), |
|
|
fov: cam.fov, |
|
|
aspect: cam.aspect, |
|
|
}); |
|
|
scene.add(cameraSplat); |
|
|
}); |
|
|
} |
|
|
|
|
|
if (!loadTrajectoryOnly && Array.isArray(resolution) && resolution.length === 3) { |
|
|
guiOptions.Resolution = `${resolution[0]}x${resolution[1]}x${resolution[2]}`; |
|
|
} |
|
|
|
|
|
if (loadTrajectoryOnly) { |
|
|
updateStatus(`Trajectory loaded: ${jsonData.cameras ? jsonData.cameras.length : 0} cameras`, cameraParams.length); |
|
|
} else { |
|
|
updateStatus(`JSON loaded: ${jsonData.cameras ? jsonData.cameras.length : 0} cameras`, cameraParams.length); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error("JSON data processing error:", error); |
|
|
} |
|
|
} |
|
|
|
|
|
async function renderExamples() { |
|
|
const grid = document.getElementById('examples-grid'); |
|
|
if (!grid) return; |
|
|
grid.innerHTML = ''; |
|
|
const items = []; |
|
|
for (const path of EXAMPLE_FILES) { |
|
|
try { |
|
|
const resp = await fetch(path); |
|
|
if (!resp.ok) continue; |
|
|
const data = await resp.json(); |
|
|
const thumb = data.image_prompt || data.imagePrompt || null; |
|
|
items.push({ path, data, thumb }); |
|
|
} catch (_) { } |
|
|
} |
|
|
items.slice(0, 10).forEach((item, idx) => { |
|
|
const div = document.createElement('div'); |
|
|
div.className = 'example-item'; |
|
|
div.title = item.path; |
|
|
if (item.thumb) { |
|
|
const img = document.createElement('img'); |
|
|
img.src = item.thumb; |
|
|
div.appendChild(img); |
|
|
} else { |
|
|
const label = document.createElement('div'); |
|
|
label.className = 'label'; |
|
|
label.textContent = `Example ${idx + 1}`; |
|
|
div.appendChild(label); |
|
|
} |
|
|
div.addEventListener('click', () => { |
|
|
|
|
|
processJsonLoad(item.data, false); |
|
|
}); |
|
|
grid.appendChild(div); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initializeApp() { |
|
|
try { |
|
|
|
|
|
console.log('Initializing app...'); |
|
|
console.log('Center panel:', document.querySelector('.center-panel')); |
|
|
console.log('GUI container:', document.getElementById('gui-container')); |
|
|
console.log('Right panel:', document.querySelector('.right-panel')); |
|
|
|
|
|
initializeRenderer(); |
|
|
initializeGUI(); |
|
|
console.log('App initialization complete'); |
|
|
} catch (error) { |
|
|
console.error('App initialization failed:', error); |
|
|
} |
|
|
} |
|
|
|
|
|
if (document.readyState === 'loading') { |
|
|
document.addEventListener('DOMContentLoaded', () => { initializeApp(); renderExamples(); }); |
|
|
} else { |
|
|
initializeApp(); |
|
|
renderExamples(); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function interpolateTwoCameras(startCamera, endCamera, _t) { |
|
|
const interpolatedCamera = new THREE.PerspectiveCamera(startCamera.fov, startCamera.aspect); |
|
|
|
|
|
|
|
|
if (_t < 1e-6) { |
|
|
interpolatedCamera.position.copy(startCamera.position); |
|
|
interpolatedCamera.quaternion.copy(startCamera.quaternion); |
|
|
} |
|
|
|
|
|
else if (_t > 1 - 1e-6) { |
|
|
interpolatedCamera.position.copy(endCamera.position); |
|
|
interpolatedCamera.quaternion.copy(endCamera.quaternion); |
|
|
} |
|
|
|
|
|
else { |
|
|
interpolatedCamera.position.copy(startCamera.position).lerp(endCamera.position, _t); |
|
|
interpolatedCamera.quaternion.copy(startCamera.quaternion).slerp(endCamera.quaternion, _t); |
|
|
} |
|
|
|
|
|
return interpolatedCamera; |
|
|
} |
|
|
|
|
|
function interpolateCameras(cameras, M) { |
|
|
const interpolatedCameras = []; |
|
|
|
|
|
if (cameras.length === 0) { |
|
|
return interpolatedCameras; |
|
|
} |
|
|
|
|
|
if (cameras.length === 1) { |
|
|
|
|
|
for (let i = 0; i < M; i++) { |
|
|
interpolatedCameras.push(cameras[0]); |
|
|
} |
|
|
return interpolatedCameras; |
|
|
} |
|
|
|
|
|
for (let i = 0; i < M; i++) { |
|
|
const t = i / (M - 1); |
|
|
const startIndex = Math.min(Math.floor(t * (cameras.length - 1)), cameras.length - 2); |
|
|
const endIndex = startIndex + 1; |
|
|
const startCamera = cameras[startIndex]; |
|
|
const endCamera = cameras[endIndex]; |
|
|
const _t = t * (cameras.length - 1) - startIndex; |
|
|
const interpolatedCamera = interpolateTwoCameras(startCamera, endCamera, _t); |
|
|
interpolatedCameras.push(interpolatedCamera); |
|
|
} |
|
|
return interpolatedCameras; |
|
|
} |
|
|
|
|
|
|
|
|
function syncGuiPromptControls() { |
|
|
try { |
|
|
if (window.inputTextPromptController) { |
|
|
window.inputTextPromptController.setValue(guiOptions.inputTextPrompt); |
|
|
if (typeof window.inputTextPromptController.updateDisplay === 'function') { |
|
|
window.inputTextPromptController.updateDisplay(); |
|
|
} |
|
|
} |
|
|
if (window.imageIndexController) { |
|
|
window.imageIndexController.setValue(guiOptions.imageIndex); |
|
|
if (typeof window.imageIndexController.updateDisplay === 'function') { |
|
|
window.imageIndexController.updateDisplay(); |
|
|
} |
|
|
} |
|
|
} catch (e) { |
|
|
console.debug('syncGuiPromptControls error:', e); |
|
|
} |
|
|
|
|
|
requestAnimationFrame(() => { |
|
|
try { |
|
|
if (window.inputTextPromptController && typeof window.inputTextPromptController.updateDisplay === 'function') { |
|
|
window.inputTextPromptController.updateDisplay(); |
|
|
} |
|
|
if (window.imageIndexController && typeof window.imageIndexController.updateDisplay === 'function') { |
|
|
window.imageIndexController.updateDisplay(); |
|
|
} |
|
|
} catch (_) {} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function createCubeSplat(size = 0.1, pointColor = [1, 1, 1]) { |
|
|
const cubeSplat = new SplatMesh({ |
|
|
constructSplats: (splats) => { |
|
|
const NUM_SPLATS_PER_EDGE = 1000; |
|
|
const scales = new THREE.Vector3().setScalar(0.002); |
|
|
const quaternion = new THREE.Quaternion(); |
|
|
const opacity = 1; |
|
|
const color = new THREE.Color(...pointColor); |
|
|
|
|
|
|
|
|
const halfSize = size / 2; |
|
|
const vertices = [ |
|
|
new THREE.Vector3(-halfSize, -halfSize, -halfSize), |
|
|
new THREE.Vector3(halfSize, -halfSize, -halfSize), |
|
|
new THREE.Vector3(halfSize, halfSize, -halfSize), |
|
|
new THREE.Vector3(-halfSize, halfSize, -halfSize), |
|
|
new THREE.Vector3(-halfSize, -halfSize, halfSize), |
|
|
new THREE.Vector3(halfSize, -halfSize, halfSize), |
|
|
new THREE.Vector3(halfSize, halfSize, halfSize), |
|
|
new THREE.Vector3(-halfSize, halfSize, halfSize), |
|
|
]; |
|
|
|
|
|
|
|
|
const edges = [ |
|
|
[0, 1], [1, 2], [2, 3], [3, 0], |
|
|
[4, 5], [5, 6], [6, 7], [7, 4], |
|
|
[0, 4], [1, 5], [2, 6], [3, 7], |
|
|
]; |
|
|
|
|
|
|
|
|
for (let i = 0; i < edges.length; i++) { |
|
|
const start = vertices[edges[i][0]]; |
|
|
const end = vertices[edges[i][1]]; |
|
|
for (let j = 0; j < NUM_SPLATS_PER_EDGE; j++) { |
|
|
const point = new THREE.Vector3().lerpVectors(start, end, j / NUM_SPLATS_PER_EDGE); |
|
|
splats.pushSplat(point, scales, quaternion, opacity, color); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}); |
|
|
return cubeSplat; |
|
|
} |
|
|
|
|
|
|
|
|
function createCameraSplat(camera, pointColor = [1, 1, 1]) { |
|
|
const cameraSplat = new SplatMesh({ |
|
|
constructSplats: (splats) => { |
|
|
const NUM_SPLATS_PER_EDGE = 1000; |
|
|
const LENGTH_PER_EDGE = 0.1; |
|
|
const center = new THREE.Vector3(); |
|
|
const scales = new THREE.Vector3().setScalar(0.001); |
|
|
const quaternion = new THREE.Quaternion(); |
|
|
const opacity = 1; |
|
|
const color = new THREE.Color(...pointColor); |
|
|
|
|
|
const H = 1000; |
|
|
const W = 1000 * camera.aspect; |
|
|
const fx = 0.5 * H / Math.tan(0.5 * camera.fov * Math.PI / 180); |
|
|
const fy = 0.5 * H / Math.tan(0.5 * camera.fov * Math.PI / 180); |
|
|
|
|
|
const xt = (0 - W / 2 + 0.5) / fy; |
|
|
const xb = (W - W / 2 + 0.5) / fy; |
|
|
const yl = - (0 - H / 2 + 0.5) / fx; |
|
|
const yr = - (H - H / 2 + 0.5) / fx; |
|
|
|
|
|
const lt = new THREE.Vector3(xt * LENGTH_PER_EDGE, yl * LENGTH_PER_EDGE, -1 * LENGTH_PER_EDGE); |
|
|
const rt = new THREE.Vector3(xt * LENGTH_PER_EDGE, yr * LENGTH_PER_EDGE, -1 * LENGTH_PER_EDGE); |
|
|
const lb = new THREE.Vector3(xb * LENGTH_PER_EDGE, yl * LENGTH_PER_EDGE, -1 * LENGTH_PER_EDGE); |
|
|
const rb = new THREE.Vector3(xb * LENGTH_PER_EDGE, yr * LENGTH_PER_EDGE, -1 * LENGTH_PER_EDGE); |
|
|
|
|
|
const lines = [ |
|
|
[center, lt], [center, rt], [center, lb], [center, rb], |
|
|
[lt, rt], [lt, lb], [rt, rb], [lb, rb], |
|
|
]; |
|
|
|
|
|
for (let i = 0; i < lines.length; i++) { |
|
|
for (let j = 0; j < NUM_SPLATS_PER_EDGE; j++) { |
|
|
const point = new THREE.Vector3().lerpVectors(lines[i][0], lines[i][1], j / NUM_SPLATS_PER_EDGE); |
|
|
splats.pushSplat(point, scales, quaternion, opacity, color); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}); |
|
|
cameraSplat.quaternion.copy(camera.quaternion); |
|
|
cameraSplat.position.copy(camera.position); |
|
|
return cameraSplat; |
|
|
} |
|
|
|
|
|
|
|
|
function generateCameraTrajectory(trajectoryType) { |
|
|
if (trajectoryType === "Manual") { |
|
|
updateStatus('Manual mode: Use Space to record cameras manually', cameraParams.length); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
if (!fixGenerationFOV) { |
|
|
updateStatus('Error: Please fix FOV first before generating trajectory', cameraParams.length); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
let referenceCamera; |
|
|
if (cameraParams.length > 0) { |
|
|
|
|
|
const lastCamera = cameraParams[cameraParams.length - 1]; |
|
|
referenceCamera = new THREE.PerspectiveCamera(guiOptions.FOV, camera.aspect); |
|
|
referenceCamera.position.copy(lastCamera.position); |
|
|
referenceCamera.quaternion.copy(lastCamera.quaternion); |
|
|
referenceCamera.updateProjectionMatrix(); |
|
|
} else { |
|
|
|
|
|
referenceCamera = new THREE.PerspectiveCamera(guiOptions.FOV, camera.aspect); |
|
|
referenceCamera.position.set(0, 0, 0); |
|
|
referenceCamera.quaternion.set(0, 0, 0, 1); |
|
|
referenceCamera.updateProjectionMatrix(); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let orbitTarget = null; |
|
|
let orbitStartCamera = null; |
|
|
if (trajectoryType.includes("Orbit") && cameraParams.length > 0) { |
|
|
|
|
|
orbitStartCamera = cameraParams[cameraParams.length - 1]; |
|
|
orbitTarget = orbitStartCamera.position.clone().add( |
|
|
new THREE.Vector3(0, 0, -1).applyQuaternion(orbitStartCamera.quaternion) |
|
|
); |
|
|
console.log("Orbit target calculated from last camera:", orbitStartCamera.position, "->", orbitTarget); |
|
|
} else if (trajectoryType.includes("Orbit")) { |
|
|
|
|
|
orbitStartCamera = referenceCamera; |
|
|
orbitTarget = referenceCamera.position.clone().add( |
|
|
new THREE.Vector3(0, 0, -1).applyQuaternion(referenceCamera.quaternion) |
|
|
); |
|
|
console.log("Orbit target calculated from current camera:", referenceCamera.position, "->", orbitTarget); |
|
|
} |
|
|
|
|
|
const cameras = []; |
|
|
const stepSize = 0.5; |
|
|
const totalOrbitAngle = 15 * Math.PI / 180; |
|
|
|
|
|
|
|
|
let numCameras = 1; |
|
|
if (trajectoryType.includes("Orbit")) { |
|
|
numCameras = 1; |
|
|
console.log(`Generating ${numCameras} orbit camera with total angle ${totalOrbitAngle * 180 / Math.PI}°`); |
|
|
} |
|
|
|
|
|
for (let i = 1; i <= numCameras; i++) { |
|
|
const newCamera = new THREE.PerspectiveCamera(guiOptions.FOV, camera.aspect); |
|
|
let position, quaternion; |
|
|
|
|
|
switch (trajectoryType) { |
|
|
case "Move Forward": |
|
|
position = referenceCamera.position.clone(); |
|
|
position.z -= stepSize; |
|
|
quaternion = referenceCamera.quaternion.clone(); |
|
|
break; |
|
|
|
|
|
case "Move Backward": |
|
|
position = referenceCamera.position.clone(); |
|
|
position.z += stepSize; |
|
|
quaternion = referenceCamera.quaternion.clone(); |
|
|
break; |
|
|
|
|
|
case "Move Left": |
|
|
position = referenceCamera.position.clone(); |
|
|
position.x -= stepSize; |
|
|
quaternion = referenceCamera.quaternion.clone(); |
|
|
break; |
|
|
|
|
|
case "Move Right": |
|
|
position = referenceCamera.position.clone(); |
|
|
position.x += stepSize; |
|
|
quaternion = referenceCamera.quaternion.clone(); |
|
|
break; |
|
|
|
|
|
case "Orbit Left 15°": |
|
|
const radius = 1.0; |
|
|
|
|
|
const angle = -totalOrbitAngle; |
|
|
|
|
|
console.log(`Camera ${i}: angle=${angle * 180 / Math.PI}° (Left)`); |
|
|
|
|
|
|
|
|
const localOrbitPos = new THREE.Vector3( |
|
|
Math.sin(angle) * radius, |
|
|
0, |
|
|
Math.cos(angle) * radius |
|
|
); |
|
|
|
|
|
|
|
|
const worldOrbitPos = localOrbitPos.applyQuaternion(orbitStartCamera.quaternion); |
|
|
|
|
|
|
|
|
position = orbitTarget.clone().add(worldOrbitPos); |
|
|
|
|
|
console.log(`Orbit Left camera ${i}: localPos=`, localOrbitPos, 'worldPos=', worldOrbitPos, 'finalPos=', position); |
|
|
|
|
|
|
|
|
const lookDirection = orbitTarget.clone().sub(position).normalize(); |
|
|
quaternion = new THREE.Quaternion().setFromUnitVectors( |
|
|
new THREE.Vector3(0, 0, -1), |
|
|
lookDirection |
|
|
); |
|
|
|
|
|
console.log(`Orbit Left camera ${i}: quaternion=`, quaternion); |
|
|
break; |
|
|
|
|
|
case "Orbit Right 15°": |
|
|
const radiusRight = 1.0; |
|
|
|
|
|
const angleRight = totalOrbitAngle; |
|
|
|
|
|
console.log(`Camera ${i}: angle=${angleRight * 180 / Math.PI}° (Right)`); |
|
|
|
|
|
|
|
|
const localOrbitPosRight = new THREE.Vector3( |
|
|
Math.sin(angleRight) * radiusRight, |
|
|
0, |
|
|
Math.cos(angleRight) * radiusRight |
|
|
); |
|
|
|
|
|
|
|
|
const worldOrbitPosRight = localOrbitPosRight.applyQuaternion(orbitStartCamera.quaternion); |
|
|
|
|
|
|
|
|
position = orbitTarget.clone().add(worldOrbitPosRight); |
|
|
|
|
|
console.log(`Orbit Right camera ${i}: localPos=`, localOrbitPosRight, 'worldPos=', worldOrbitPosRight, 'finalPos=', position); |
|
|
|
|
|
|
|
|
const lookDirectionRight = orbitTarget.clone().sub(position).normalize(); |
|
|
quaternion = new THREE.Quaternion().setFromUnitVectors( |
|
|
new THREE.Vector3(0, 0, -1), |
|
|
lookDirectionRight |
|
|
); |
|
|
|
|
|
console.log(`Orbit Right camera ${i}: quaternion=`, quaternion); |
|
|
break; |
|
|
|
|
|
|
|
|
default: |
|
|
position = referenceCamera.position.clone(); |
|
|
quaternion = referenceCamera.quaternion.clone(); |
|
|
} |
|
|
|
|
|
newCamera.position.copy(position); |
|
|
newCamera.quaternion.copy(quaternion); |
|
|
newCamera.updateProjectionMatrix(); |
|
|
cameras.push(newCamera); |
|
|
} |
|
|
|
|
|
|
|
|
cameras.forEach(cam => { |
|
|
const cameraSplat = createCameraSplat(cam); |
|
|
cameraSplats.push(cameraSplat); |
|
|
cameraParams.push({ |
|
|
position: cam.position.clone(), |
|
|
quaternion: cam.quaternion.clone(), |
|
|
fov: cam.fov, |
|
|
aspect: cam.aspect, |
|
|
}); |
|
|
scene.add(cameraSplat); |
|
|
}); |
|
|
|
|
|
updateStatus(`Added ${cameras.length} cameras using ${trajectoryType} trajectory`, cameraParams.length); |
|
|
console.log(`Added ${cameras.length} cameras using ${trajectoryType} trajectory`); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function initializeGUI() { |
|
|
const guiContainer = document.getElementById('gui-container'); |
|
|
if (guiContainer && !gui) { |
|
|
|
|
|
guiContainer.innerHTML = ''; |
|
|
|
|
|
gui = new GUI({ title: "FlashWorld Controls", container: guiContainer }); |
|
|
console.log('GUI initialized in container:', guiContainer); |
|
|
|
|
|
|
|
|
const step1Folder = gui.addFolder('1. Configure Settings'); |
|
|
step1Folder.add(guiOptions, "BackendAddress").name("Backend Address"); |
|
|
step1Folder.add(guiOptions, "HF_TOKEN").name("HF Token"); |
|
|
|
|
|
|
|
|
const fovController = step1Folder.add(guiOptions, "FOV", 0, 120, 1).name("FOV").onChange((value) => { |
|
|
camera.fov = value; |
|
|
camera.updateProjectionMatrix(); |
|
|
}); |
|
|
const resolutionController = step1Folder.add(guiOptions, "Resolution", supportedResolutions.map( |
|
|
r => `${r.frame}x${r.height}x${r.width}` |
|
|
)).name("Resolution (NxHxW)").onChange((value) => { |
|
|
updateCanvasSize(); |
|
|
}); |
|
|
|
|
|
window.fovController = fovController; |
|
|
window.resolutionController = resolutionController; |
|
|
|
|
|
|
|
|
const fixGenerationFOVController = step1Folder.add(guiOptions, "fixGenerationFOV").name("Fix Configuration"); |
|
|
step1Folder.open(); |
|
|
|
|
|
|
|
|
const step2Folder = gui.addFolder('2. Set Up Camera Path'); |
|
|
|
|
|
|
|
|
const trajectoryFolder = step2Folder.addFolder('Camera Trajectory'); |
|
|
|
|
|
|
|
|
const trajectoryModeController = trajectoryFolder.add(guiOptions, "trajectoryMode", [ |
|
|
"Manual", |
|
|
"Template", |
|
|
"JSON" |
|
|
]).name("Trajectory Mode"); |
|
|
|
|
|
|
|
|
const templateTypeController = trajectoryFolder.add(guiOptions, "templateType", [ |
|
|
"Move Forward", |
|
|
"Move Backward", |
|
|
"Move Left", |
|
|
"Move Right", |
|
|
"Orbit Left 15°", |
|
|
"Orbit Right 15°" |
|
|
]).name("Template Type"); |
|
|
|
|
|
|
|
|
const generateTrajectoryController = trajectoryFolder.add(guiOptions, "generateTrajectory").name("Generate Trajectory"); |
|
|
|
|
|
|
|
|
const loadTrajectoryController = trajectoryFolder.add(guiOptions, "LoadTrajectoryFromJson").name("Load from JSON"); |
|
|
const saveTrajectoryController = trajectoryFolder.add(guiOptions, "saveTrajectoryToJson").name("Save Trajectory"); |
|
|
|
|
|
|
|
|
saveTrajectoryController.disable(); |
|
|
|
|
|
|
|
|
const clearAllCamerasController = trajectoryFolder.add(guiOptions, "clearAllCameras").name("Clear All Cameras"); |
|
|
|
|
|
|
|
|
templateTypeController.disable(); |
|
|
generateTrajectoryController.disable(); |
|
|
loadTrajectoryController.disable(); |
|
|
|
|
|
|
|
|
trajectoryModeController.onChange((value) => { |
|
|
if (value === "Manual") { |
|
|
templateTypeController.disable(); |
|
|
generateTrajectoryController.disable(); |
|
|
loadTrajectoryController.disable(); |
|
|
} else if (value === "Template") { |
|
|
templateTypeController.enable(); |
|
|
if (fixGenerationFOV) { |
|
|
generateTrajectoryController.enable(); |
|
|
} else { |
|
|
generateTrajectoryController.disable(); |
|
|
} |
|
|
loadTrajectoryController.disable(); |
|
|
} else if (value === "JSON") { |
|
|
templateTypeController.disable(); |
|
|
generateTrajectoryController.disable(); |
|
|
if (fixGenerationFOV) { |
|
|
loadTrajectoryController.enable(); |
|
|
} else { |
|
|
loadTrajectoryController.disable(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const originalFixFOV = guiOptions.fixGenerationFOV; |
|
|
guiOptions.fixGenerationFOV = () => { |
|
|
originalFixFOV(); |
|
|
|
|
|
|
|
|
fovController.disable(); |
|
|
resolutionController.disable(); |
|
|
|
|
|
|
|
|
if (guiOptions.trajectoryMode === "Template") { |
|
|
generateTrajectoryController.enable(); |
|
|
} else if (guiOptions.trajectoryMode === "JSON") { |
|
|
loadTrajectoryController.enable(); |
|
|
} |
|
|
updateStatus('Configuration fixed. You can now generate camera trajectory.', cameraParams.length); |
|
|
}; |
|
|
|
|
|
trajectoryFolder.open(); |
|
|
|
|
|
step2Folder.add(guiOptions, "VisualizeCameraSplats").name("Visualize Cameras").onChange((value) => { |
|
|
cameraSplats.forEach(cameraSplat => { |
|
|
cameraSplat.opacity = value ? 1 : 0; |
|
|
}); |
|
|
}); |
|
|
step2Folder.add(guiOptions, "VisualizeInterpolatedCameras").name("Visualize Interpolated Cameras").onChange((value) => { |
|
|
interpolatedCamerasSplats.forEach(interpolatedCameraSplat => { |
|
|
interpolatedCameraSplat.opacity = value ? 1 : 0; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.fixGenerationFOVController = fixGenerationFOVController; |
|
|
window.saveTrajectoryController = saveTrajectoryController; |
|
|
|
|
|
|
|
|
const step3Folder = gui.addFolder('3. Add Scene Prompts'); |
|
|
step3Folder.add(guiOptions, "inputImagePrompt").name("Input Image Prompt"); |
|
|
const inputTextPromptController = step3Folder.add(guiOptions, "inputTextPrompt").name("Input Text Prompt"); |
|
|
const imageIndexController = step3Folder.add(guiOptions, "imageIndex", 0, 24, 1).name("Image Index"); |
|
|
|
|
|
window.inputTextPromptController = inputTextPromptController; |
|
|
window.imageIndexController = imageIndexController; |
|
|
|
|
|
|
|
|
|
|
|
const step4Folder = gui.addFolder('4. Generate Scene'); |
|
|
step4Folder.add(guiOptions, "generate").name("Generate!"); |
|
|
const downloadController = step4Folder.add(guiOptions, "downloadGeneratedFile").name("Download SPZ File"); |
|
|
downloadController.disable(); |
|
|
step4Folder.open(); |
|
|
|
|
|
|
|
|
window.downloadController = downloadController; |
|
|
|
|
|
|
|
|
const step5Folder = gui.addFolder('5. Trajectory Playback'); |
|
|
step5Folder.add(guiOptions, 'playbackT', 0, 1, 0.001).name('Scrub (0-1)').onChange((value) => { |
|
|
|
|
|
if (!userCameraState) { |
|
|
userCameraState = { |
|
|
position: camera.position.clone(), |
|
|
quaternion: camera.quaternion.clone(), |
|
|
fov: camera.fov |
|
|
}; |
|
|
} |
|
|
setCameraByScrub(value); |
|
|
updateStatus(`Scrubbing trajectory: t=${value.toFixed(3)}`, cameraParams.length); |
|
|
}); |
|
|
step5Folder.open(); |
|
|
|
|
|
|
|
|
const step6Folder = gui.addFolder('6. JSON (All-in-one)'); |
|
|
step6Folder.add(guiOptions, "LoadAllFromJson").name("Load All from JSON"); |
|
|
step6Folder.add(guiOptions, "SaveAllToJson").name("Save All to JSON"); |
|
|
step6Folder.open(); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const fileInput = document.querySelector("#file-input"); |
|
|
fileInput.onchange = (event) => { |
|
|
const files = event.target.files; |
|
|
if (!files || files.length === 0) return; |
|
|
Array.from(files).forEach(file => { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
console.log("Loaded image:", file.name, e.target.result); |
|
|
|
|
|
|
|
|
let resolutionStr = guiOptions.Resolution; |
|
|
let [n, h, w] = resolutionStr.split('x').map(Number); |
|
|
|
|
|
|
|
|
const img = new Image(); |
|
|
img.onload = function() { |
|
|
window.inputImageResolution = { width: img.width, height: img.height }; |
|
|
console.log("Input image resolution:", window.inputImageResolution); |
|
|
|
|
|
|
|
|
let scaleH = h / img.height; |
|
|
let scaleW = w / img.width; |
|
|
let scale = Math.max(scaleH, scaleW); |
|
|
let newW = Math.round(w / scale); |
|
|
let newH = Math.round(h / scale); |
|
|
let sx = Math.floor((img.width - newW) / 2); |
|
|
let sy = Math.floor((img.height - newH) / 2); |
|
|
|
|
|
|
|
|
const canvas = document.createElement('canvas'); |
|
|
canvas.width = w; |
|
|
canvas.height = h; |
|
|
const ctx = canvas.getContext('2d'); |
|
|
ctx.drawImage( |
|
|
img, |
|
|
sx, sy, newW, newH, |
|
|
0, 0, w, h |
|
|
); |
|
|
|
|
|
inputImageBase64 = canvas.toDataURL('image/png'); |
|
|
|
|
|
const previewArea = document.getElementById('image-preview-area'); |
|
|
const previewImg = document.getElementById('preview-img'); |
|
|
if (previewImg && previewArea) { |
|
|
previewImg.src = inputImageBase64; |
|
|
previewArea.style.display = 'block'; |
|
|
} |
|
|
|
|
|
window.inputImageResolution = { width: w, height: h }; |
|
|
console.log("Cropped and resized image to:", w, h); |
|
|
}; |
|
|
img.src = e.target.result; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const jsonInput = document.querySelector("#json-input"); |
|
|
jsonInput.onchange = (event) => { |
|
|
const files = event.target.files; |
|
|
if (!files || files.length === 0) return; |
|
|
const file = files[0]; |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
let jsonData; |
|
|
try { |
|
|
jsonData = JSON.parse(e.target.result); |
|
|
} catch (error) { |
|
|
console.error("JSON parsing error:", error); |
|
|
return; |
|
|
} |
|
|
const loadTrajectoryOnly = !!window.loadTrajectoryOnly; |
|
|
window.loadTrajectoryOnly = false; |
|
|
processJsonLoad(jsonData, loadTrajectoryOnly); |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('keypress', (event) => { |
|
|
if (event.code === 'Space') { |
|
|
if (!fixGenerationFOV) { |
|
|
updateStatus('Please fix Generation FOV first', cameraParams.length); |
|
|
return; |
|
|
} |
|
|
|
|
|
const new_camera = camera.clone(); |
|
|
new_camera.fov = guiOptions.FOV; |
|
|
new_camera.aspect = guiOptions.Resolution.split('x')[2] / guiOptions.Resolution.split('x')[1]; |
|
|
new_camera.updateProjectionMatrix(); |
|
|
|
|
|
const cameraSplat = createCameraSplat(new_camera); |
|
|
cameraSplats.push(cameraSplat); |
|
|
cameraParams.push({ |
|
|
position: new_camera.position.clone(), |
|
|
quaternion: new_camera.quaternion.clone(), |
|
|
fov: new_camera.fov, |
|
|
aspect: new_camera.aspect, |
|
|
}); |
|
|
scene.add(cameraSplat); |
|
|
|
|
|
updateStatus(`Camera ${cameraParams.length} recorded. Press Space for more or Generate!`, cameraParams.length); |
|
|
|
|
|
console.log(new_camera.getFocalLength()); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateStatus('FlashWorld initialized. Configure settings to begin.', 0); |
|
|
|
|
|
|
|
|
let instructionSplat = createCubeSplat(0.25, [1, 1, 1]); |
|
|
instructionSplat.position.set(0, 0, -1); |
|
|
scene.add(instructionSplat); |
|
|
console.log('Cube splat added to scene'); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
console.log('Window resized, updating canvas...'); |
|
|
|
|
|
updateCanvasSize(); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let lastTime = null; |
|
|
|
|
|
renderer.setAnimationLoop(function animate(time) { |
|
|
const deltaTime = time - (lastTime || time); |
|
|
lastTime = time; |
|
|
|
|
|
|
|
|
if (instructionSplat) { |
|
|
|
|
|
instructionSplat.rotation.y += deltaTime / 5000; |
|
|
instructionSplat.rotation.z += deltaTime / 6000; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
controls.update(camera); |
|
|
renderer.render(scene, camera); |
|
|
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
