Spaces:
Running
Running
File size: 3,719 Bytes
4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 102a1b6 4635d45 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DrawFace Live — My Drawing</title>
<link rel="stylesheet" href="style.css?v=20260729.6">
</head>
<body>
<header>
<h1>DrawFace Live — My Drawing <a href="./" style="font-size:.6em;font-weight:400;text-decoration:none;margin-left:8px">Mirroring Studio →</a></h1>
<p>A single hand drawing follows your webcam expressions in real time — everything is processed inside your browser only.</p>
</header>
<main>
<aside id="panel">
<label>Character
<select id="charSelect"></select>
</label>
<div class="row">
<button id="deleteBtn" title="Delete the selected character">Delete</button>
</div>
<div id="dropZone" tabindex="0">
Drag a drawing here<br>or click to choose one
<input id="fileInput" type="file" accept="image/*" hidden>
</div>
<button id="exampleBtn">Try the example character</button>
<button id="boyBtn">Try the boy character</button>
<label>Camera
<select id="camSelect"></select>
</label>
<label class="check"><input id="mirrorChk" type="checkbox" checked> Mirror controls</label>
<label class="check"><input id="vizChk" type="checkbox" checked> Tracking overlay</label>
<label class="check"><input id="fxChk" type="checkbox" checked> Sticker effects</label>
<label class="check"><input id="warpChk" type="checkbox" checked> Warp engine</label>
<label>Performance mode
<select id="perfMode">
<option value="auto">Automatic (recommended)</option>
<option value="full">Always high quality</option>
<option value="economy">Always power saving</option>
</select>
</label>
<button id="startBtn" class="primary">Start</button>
<button id="trackerRetryBtn" hidden>Retry loading the tracking model</button>
<button id="calibBtn" disabled>Recalibrate</button>
<button id="recordBtn" disabled title="Save the output canvas as a WebM video">Start recording</button>
<div id="status" role="status" aria-live="polite">Onboard or select a character</div>
</aside>
<section id="stage">
<canvas id="preview" width="640" height="480"></canvas>
<canvas id="output" width="512" height="512"></canvas>
</section>
</main>
<dialog id="onboardDlg">
<h2>Character onboarding</h2>
<canvas id="onboardCanvas" width="512" height="512"></canvas>
<div class="row">
<label>Name <input id="charName" size="10" placeholder="my-char"></label>
<label>Eye half-box <input id="eyeHalf" type="number" value="16" min="6" max="64" size="3">px</label>
</div>
<div id="onboardStatus"></div>
<div class="row">
<button id="obReset">Click again</button>
<button id="obGenerate" class="primary" disabled>Preview</button>
<button id="obCancel">Cancel</button>
</div>
<section id="onboardReview" hidden>
<h3>Generated result preview</h3>
<canvas id="reviewCanvas" width="512" height="512"></canvas>
<label>Expression
<select id="reviewState">
<option value="neutral">Neutral</option>
<option value="blink">Eyes closed</option>
<option value="smile">Smile</option>
<option value="A">Mouth wide open</option>
</select>
</label>
<div class="row">
<button id="obEdit">Adjust positions</button>
<button id="obSave" class="primary">Save this character</button>
</div>
</section>
</dialog>
<footer>
<span>Keys: <b>c</b> recalibrate · <b>m</b> toggle mirror</span>
<a href="https://github.com/ingon1026/drawface-live">GitHub</a>
</footer>
<script type="module" src="js/main.js?v=20260729.6"></script>
</body>
</html>
|