96bba8e538
Makes the digalot.fyi/rotogod/ proxy actually usable away from the box:
⬆ uploads land in samples/uploads and open; output list links through
GET /api/download/{name}. nginx side: 8g body cap, request buffering off.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
89 lines
3.0 KiB
HTML
89 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>ROTOGOD</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" href="static/style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>ROTO<span>GOD</span></h1>
|
||
<input id="path" placeholder="/absolute/path/to/clip.mp4" spellcheck="false">
|
||
<button id="load">Load</button>
|
||
<input type="file" id="file" accept="video/*,.mp4,.mov,.mkv,.webm" hidden>
|
||
<button id="upload" title="upload a clip from this device">⬆</button>
|
||
<span id="engine" class="badge">engine: …</span>
|
||
<span id="toast"></span>
|
||
</header>
|
||
|
||
<main>
|
||
<div id="stage"><canvas id="cv" width="16" height="9"></canvas></div>
|
||
<aside>
|
||
<section>
|
||
<h2>Roto</h2>
|
||
<div id="rangeInfo" class="dim">range: –</div>
|
||
<div class="row">
|
||
<button id="startRoto" class="wide">Start roto on in→out</button>
|
||
<button id="resetRoto" title="drop session">✕</button>
|
||
</div>
|
||
<div id="objects" class="row wrap"></div>
|
||
<div class="row">
|
||
<button id="addObj">+ object</button>
|
||
<span class="dim hint">L-click add · R/⌥-click subtract</span>
|
||
</div>
|
||
<div class="row">
|
||
<button id="track" class="wide">▶ Track range</button>
|
||
<button id="trackHere" title="re-propagate from current frame">▶ here</button>
|
||
</div>
|
||
<progress id="prog" value="0" max="1"></progress>
|
||
<div id="progText" class="dim"></div>
|
||
<label class="dim"><input type="checkbox" id="showOverlay" checked> show masks</label>
|
||
</section>
|
||
<section>
|
||
<h2>Export roto</h2>
|
||
<div class="row wrap">
|
||
<button class="exp" data-kind="prores">ProRes 4444 α</button>
|
||
<button class="exp" data-kind="webm">WebM α</button>
|
||
<button class="exp" data-kind="matte">Matte</button>
|
||
<button class="exp" data-kind="green">Greenscreen</button>
|
||
</div>
|
||
<label class="dim">feather <input id="feather" type="number" value="2" min="0" max="20"></label>
|
||
</section>
|
||
<section>
|
||
<h2>Scene cut</h2>
|
||
<div class="row">
|
||
<button id="trim" class="wide">Export in→out</button>
|
||
<label class="dim"><input type="checkbox" id="exactTrim" checked> exact</label>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<h2>Output</h2>
|
||
<div id="outlist" class="dim"></div>
|
||
</section>
|
||
</aside>
|
||
</main>
|
||
|
||
<footer>
|
||
<div id="transport">
|
||
<button id="prev10">«</button><button id="prev">‹</button>
|
||
<button id="play">▶</button>
|
||
<button id="next">›</button><button id="next10">»</button>
|
||
<span class="gap"></span>
|
||
<button id="setIn">⇤ in <kbd>i</kbd></button>
|
||
<button id="setOut">out ⇥ <kbd>o</kbd></button>
|
||
<span id="frameLabel" class="dim">– / –</span>
|
||
</div>
|
||
<div id="timeline">
|
||
<img id="thumbs" draggable="false" alt="">
|
||
<div id="shadeL" class="shade"></div>
|
||
<div id="shadeR" class="shade"></div>
|
||
<div id="playhead"></div>
|
||
</div>
|
||
<input id="scrub" type="range" min="0" max="0" value="0" step="1">
|
||
</footer>
|
||
|
||
<script src="static/app.js"></script>
|
||
</body>
|
||
</html>
|