-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathloader.html
More file actions
103 lines (94 loc) · 5.44 KB
/
Copy pathloader.html
File metadata and controls
103 lines (94 loc) · 5.44 KB
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
101
102
103
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title data-i18n="loader_page_title">Ghostmaxxing | Video Loader</title>
<meta name="description" content="Internal Ghostmaxxing tool for testing local MP4 makeup videos against the 2D and 3D face engines." data-i18n-content="loader_meta_description" />
<link rel="icon" type="image/svg+xml" href="/images/ghostmaxxing-favicon.svg">
<link rel="stylesheet" href="styles/pages.css" />
<link rel="stylesheet" href="styles/loader.css" />
</head>
<body class="loader-page">
<main class="loader-shell" aria-labelledby="loader-title">
<header class="loader-header">
<a class="wordmark" href="/" aria-label="Ghostmaxxing homepage" data-i18n-aria-label="loader_wordmark_label">
<span class="wordmark__main">
<img class="wordmark__mark" src="images/ghostmaxxing-mark.svg" alt="" aria-hidden="true" />
<span class="wordmark__title">Ghostmaxxing</span>
</span>
<span class="wordmark__subtitle" data-i18n="loader_subtitle">Internal video loader</span>
</a>
<div class="loader-header__tools">
<span class="locale-control" aria-hidden="false">
<span class="locale-control__flag" aria-hidden="true"></span>
<select id="localeSelect" class="locale-select" aria-label="Language" data-i18n-aria-label="language_label"></select>
</span>
<div class="loader-status" aria-live="polite">
<span id="statusDot" class="status-dot"></span>
<span id="statusText" data-i18n="loader_loading_models_status">loading models</span>
</div>
</div>
</header>
<h1 id="loader-title" class="loader-title" data-i18n="loader_title">Makeup Video Test Loader</h1>
<section class="loader-band loader-band--stage" aria-label="Load and play video" data-i18n-aria-label="loader_stage_label">
<div id="viewer" class="loader-viewer" data-view="camera">
<div id="placeholder" class="loader-placeholder" data-i18n="loader_placeholder">Select a local MP4 video to begin.</div>
<video id="video" controls playsinline preload="metadata"></video>
<img id="previewImage" alt="diagnostic preview" data-i18n-alt="diagnostic_preview_alt" />
<canvas id="overlay"></canvas>
<canvas id="mesh3dOverlay"></canvas>
<canvas id="bboxOverlay"></canvas>
</div>
<div class="loader-controls">
<label class="file-control">
<span data-i18n="loader_load_mp4">Load MP4</span>
<input id="videoFile" type="file" accept="video/mp4,video/*" />
</label>
<div class="timeline" aria-label="Video progress" data-i18n-aria-label="loader_timeline_label">
<span id="currentTimeLabel">00:00.000</span>
<input id="videoSeek" type="range" min="0" max="0" step="0.001" value="0" disabled />
<span id="durationLabel">00:00.000</span>
</div>
</div>
</section>
<section class="loader-band loader-band--actions" aria-label="Face actions" data-i18n-aria-label="loader_actions_label">
<button id="recordFaceBtn" class="loader-action" type="button" disabled data-i18n="loader_record_face_button">Record face</button>
<button id="seekFaceBtn" class="loader-action" type="button" disabled data-i18n="loader_seek_face_button">Seek face</button>
<div class="loader-readout">
<span data-i18n="loader_faces_in_memory">Faces in memory</span>
<strong id="dbCount">0</strong>
<span data-i18n="next_id_metric">Next ID</span>
<strong id="nextId">0</strong>
<span data-i18n="loader_2d_threshold">2D threshold</span>
<strong id="thresholdLabel">0.58</strong>
<span id="dbCountBadge" hidden>0</span>
</div>
</section>
<section class="loader-band loader-band--log" aria-label="Button activity log" data-i18n-aria-label="loader_log_label">
<div class="loader-log-head">
<h2 data-i18n="loader_activity_log_title">Activity log</h2>
<p data-i18n="loader_activity_log_description">Each entry is captured at the exact video timestamp where the button was pressed.</p>
</div>
<div id="loaderLog" class="loader-log" aria-live="polite"></div>
<div id="logBox" class="u-hidden" aria-hidden="true"></div>
</section>
</main>
<select id="fpsSelect" class="u-hidden" aria-hidden="true" tabindex="-1">
<option value="120" selected>120 ms</option>
</select>
<button id="saveBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<button id="scanBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<button id="copyMakeupBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<button id="analyzeBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<button id="toggleSettingsBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<button id="overlayModeBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<button id="clearDbBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<button id="recordBtn" class="u-hidden" aria-hidden="true" tabindex="-1"></button>
<div id="ghostylesContainer" class="u-hidden" aria-hidden="true"></div>
<script src="scripts/vendor/face-api.js"></script>
<script type="module" src="scripts/bbox-overlay.js"></script>
<script type="module" src="scripts/mediapipe-loop.js"></script>
<script type="module" src="scripts/loader.js"></script>
</body>
</html>