Spaces:
Running
Running
| <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> | |