Hugging Face's logo

Spaces:
Akjava
/
face_wrap_html
Running

App Files Community
Akjava commited on
Commit
990f595
·
1 Parent(s): 5a0cde6

init

Browse files
Files changed (2) hide show
  1. example.jpg +0 -0
  2. index.html +840 -17
example.jpg ADDED
index.html CHANGED
@@ -1,19 +1,842 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Face Warp</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ .canvas-container {
10
+ position: relative;
11
+ display: inline-block;
12
+ background: #000;
13
+ border-radius: 16px;
14
+ overflow: hidden;
15
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
16
+ }
17
+ #outputCanvas {
18
+ max-width: 100%;
19
+ height: auto;
20
+ display: block;
21
+ }
22
+ input[type="range"] {
23
+ accent-color: #3b82f6;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body
28
+ class="bg-slate-900 text-slate-100 min-h-screen flex flex-col items-center p-4 md:p-8"
29
+ >
30
+ <div
31
+ class="max-w-5xl w-full bg-slate-800 rounded-3xl p-6 md:p-10 space-y-8 border border-slate-700"
32
+ >
33
+ <header class="text-center">
34
+ <h1
35
+ class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400"
36
+ >
37
+ Face Warp
38
+ </h1>
39
+ <p class="text-slate-400 mt-2">
40
+ Standalone High-Precision Face Deformation Engine
41
+ </p>
42
+ </header>
43
+
44
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
45
+ <div
46
+ class="space-y-6 bg-slate-700/30 p-6 rounded-2xl border border-slate-600"
47
+ >
48
+ <h2 class="text-xl font-bold flex items-center gap-2">
49
+ <span class="w-2 h-6 bg-blue-500 rounded-full"></span>
50
+ Controls
51
+ </h2>
52
+
53
+ <div class="space-y-6">
54
+ <div>
55
+ <label
56
+ class="flex justify-between text-sm mb-2 font-medium"
57
+ >
58
+ <span>1. Close Eyes</span>
59
+ <span
60
+ id="eyeVal"
61
+ class="text-blue-400 font-mono"
62
+ >0%</span
63
+ >
64
+ </label>
65
+ <input
66
+ type="range"
67
+ id="eyeSlider"
68
+ min="0"
69
+ max="100"
70
+ value="0"
71
+ class="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer"
72
+ />
73
+ </div>
74
+
75
+ <div>
76
+ <label
77
+ class="flex justify-between text-sm mb-2 font-medium"
78
+ >
79
+ <span>2. Open Mouth</span>
80
+ <span
81
+ id="mouthVal"
82
+ class="text-blue-400 font-mono"
83
+ >0%</span
84
+ >
85
+ </label>
86
+ <input
87
+ type="range"
88
+ id="mouthSlider"
89
+ min="0"
90
+ max="100"
91
+ value="0"
92
+ class="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer"
93
+ />
94
+ </div>
95
+ </div>
96
+
97
+ <div class="pt-4 border-t border-slate-600 space-y-3">
98
+ <label
99
+ class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-600/50 rounded-lg transition"
100
+ >
101
+ <input
102
+ type="checkbox"
103
+ id="showMesh"
104
+ class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
105
+ />
106
+ <span class="text-sm text-slate-300 font-medium"
107
+ >Show Mesh</span
108
+ >
109
+ </label>
110
+ <label
111
+ class="flex items-center gap-3 cursor-pointer p-2 hover:bg-slate-600/50 rounded-lg transition"
112
+ >
113
+ <input
114
+ type="checkbox"
115
+ id="showKeypoints"
116
+ class="w-4 h-4 text-red-600 rounded focus:ring-red-500"
117
+ />
118
+ <span class="text-sm text-slate-300 font-medium"
119
+ >Show Keypoints (Red)</span
120
+ >
121
+ </label>
122
+ </div>
123
+
124
+ <div class="flex flex-col gap-3">
125
+ <input
126
+ type="file"
127
+ id="fileInput"
128
+ accept="image/*"
129
+ class="hidden"
130
+ />
131
+ <button
132
+ id="uploadBtn"
133
+ class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded-xl transition shadow-lg disabled:opacity-30 disabled:cursor-not-allowed"
134
+ disabled
135
+ >
136
+ Select Image
137
+ </button>
138
+ <button
139
+ id="downloadBtn"
140
+ class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 px-4 rounded-xl transition shadow-lg disabled:opacity-30"
141
+ disabled
142
+ >
143
+ Save Result
144
+ </button>
145
+ </div>
146
+ </div>
147
+
148
+ <div
149
+ class="lg:col-span-2 flex flex-col items-center justify-center bg-slate-900 rounded-2xl min-h-[500px] relative border border-slate-700"
150
+ >
151
+ <div
152
+ id="status"
153
+ class="absolute top-4 px-4 py-2 bg-slate-800/90 backdrop-blur rounded-full text-xs font-medium border border-slate-600 z-10 transition-all"
154
+ >
155
+ Initializing...
156
+ </div>
157
+
158
+ <div id="container" class="canvas-container hidden">
159
+ <canvas id="outputCanvas"></canvas>
160
+ </div>
161
+
162
+ <div
163
+ id="placeholder"
164
+ class="text-slate-600 flex flex-col items-center text-center p-10"
165
+ >
166
+ <svg
167
+ class="w-20 h-20 mb-4 opacity-10"
168
+ fill="currentColor"
169
+ viewBox="0 0 24 24"
170
+ >
171
+ <path
172
+ d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
173
+ />
174
+ </svg>
175
+ <p class="text-lg font-medium">
176
+ Please upload a photo of a person<br />facing
177
+ forward
178
+ </p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <script type="module">
185
+ import {
186
+ FaceLandmarker,
187
+ FilesetResolver,
188
+ } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3";
189
+
190
+ const MESH_ANNOTATIONS = {
191
+ silhouette: [
192
+ 10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288,
193
+ 397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136,
194
+ 172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109,
195
+ ],
196
+
197
+ lipsUpperOuter: [
198
+ 61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291,
199
+ ],
200
+ lipsLowerOuter: [146, 91, 181, 84, 17, 314, 405, 321, 375, 291],
201
+ lipsUpperInner: [
202
+ 78, 191, 80, 81, 82, 13, 312, 311, 310, 415, 308,
203
+ ],
204
+ lipsLowerInner: [
205
+ 78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308,
206
+ ],
207
+
208
+ rightEyeUpper0: [246, 161, 160, 159, 158, 157, 173],
209
+ rightEyeLower0: [33, 7, 163, 144, 145, 153, 154, 155, 133],
210
+ rightEyeUpper1: [247, 30, 29, 27, 28, 56, 190],
211
+ rightEyeLower1: [130, 25, 110, 24, 23, 22, 26, 112, 243],
212
+ rightEyeUpper2: [113, 225, 224, 223, 222, 221, 189],
213
+ rightEyeLower2: [226, 31, 228, 229, 230, 231, 232, 233, 244],
214
+ rightEyeLower3: [143, 111, 117, 118, 119, 120, 121, 128, 245],
215
+
216
+ rightEyebrowUpper: [156, 70, 63, 105, 66, 107, 55, 193],
217
+ rightEyebrowLower: [35, 124, 46, 53, 52, 65],
218
+
219
+ rightEyeIris: [473, 474, 475, 476, 477],
220
+
221
+ leftEyeUpper0: [466, 388, 387, 386, 385, 384, 398],
222
+ leftEyeLower0: [263, 249, 390, 373, 374, 380, 381, 382, 362],
223
+ leftEyeUpper1: [467, 260, 259, 257, 258, 286, 414],
224
+ leftEyeLower1: [359, 255, 339, 254, 253, 252, 256, 341, 463],
225
+ leftEyeUpper2: [342, 445, 444, 443, 442, 441, 413],
226
+ leftEyeLower2: [446, 261, 448, 449, 450, 451, 452, 453, 464],
227
+ leftEyeLower3: [372, 340, 346, 347, 348, 349, 350, 357, 465],
228
+
229
+ leftEyebrowUpper: [383, 300, 293, 334, 296, 336, 285, 417],
230
+ leftEyebrowLower: [265, 353, 276, 283, 282, 295],
231
+
232
+ leftEyeIris: [468, 469, 470, 471, 472],
233
+
234
+ midwayBetweenEyes: [168],
235
+
236
+ noseTip: [1],
237
+ noseBottom: [2],
238
+ noseRightCorner: [98],
239
+ noseLeftCorner: [327],
240
+
241
+ rightCheek: [205],
242
+ leftCheek: [425],
243
+ };
244
+
245
+ // MediaPipe Canonical Face Mesh Triangulation (Full Set)
246
+ const TRIANGULATION = [
247
+ 127, 34, 139, 11, 0, 37, 232, 231, 120, 72, 37, 39, 128, 121,
248
+ 47, 232, 121, 128, 104, 69, 67, 175, 171, 148, 118, 50, 101, 73,
249
+ 39, 40, 9, 151, 108, 48, 115, 131, 194, 204, 211, 74, 40, 185,
250
+ 80, 42, 183, 40, 92, 186, 230, 229, 118, 202, 212, 214, 83, 18,
251
+ 17, 76, 61, 146, 160, 29, 30, 56, 157, 173, 106, 204, 194, 135,
252
+ 214, 192, 203, 165, 98, 21, 71, 68, 51, 45, 4, 144, 24, 23, 77,
253
+ 146, 91, 205, 50, 187, 201, 200, 18, 91, 106, 182, 90, 91, 181,
254
+ 85, 84, 17, 206, 203, 36, 148, 171, 140, 92, 40, 39, 193, 189,
255
+ 244, 159, 158, 28, 247, 246, 161, 236, 3, 196, 54, 68, 104, 193,
256
+ 168, 8, 117, 228, 31, 189, 193, 55, 98, 97, 99, 126, 47, 100,
257
+ 166, 79, 218, 155, 154, 26, 209, 49, 131, 135, 136, 150, 47,
258
+ 126, 217, 223, 52, 53, 45, 51, 134, 211, 170, 140, 67, 69, 108,
259
+ 43, 106, 91, 230, 119, 120, 226, 130, 247, 63, 53, 52, 238, 20,
260
+ 242, 46, 70, 156, 78, 62, 96, 46, 53, 63, 143, 34, 227, 123,
261
+ 117, 111, 44, 125, 19, 236, 134, 51, 216, 206, 205, 154, 153,
262
+ 22, 39, 37, 167, 200, 201, 208, 36, 142, 100, 57, 212, 202, 20,
263
+ 60, 99, 28, 158, 157, 35, 226, 113, 160, 159, 27, 204, 202, 210,
264
+ 113, 225, 46, 43, 202, 204, 62, 76, 77, 137, 123, 116, 41, 38,
265
+ 72, 203, 129, 142, 64, 98, 240, 49, 102, 64, 41, 73, 74, 212,
266
+ 216, 207, 42, 74, 184, 169, 170, 211, 170, 149, 176, 105, 66,
267
+ 69, 122, 6, 168, 123, 147, 187, 96, 77, 90, 65, 55, 107, 89, 90,
268
+ 180, 101, 100, 120, 63, 105, 104, 93, 137, 227, 15, 86, 85, 129,
269
+ 102, 49, 14, 87, 86, 55, 8, 9, 100, 47, 121, 145, 23, 22, 88,
270
+ 89, 179, 6, 122, 196, 88, 95, 96, 138, 172, 136, 215, 58, 172,
271
+ 115, 48, 219, 42, 80, 81, 195, 3, 51, 43, 146, 61, 171, 175,
272
+ 199, 81, 82, 38, 53, 46, 225, 144, 163, 110, 52, 65, 66, 229,
273
+ 228, 117, 34, 127, 234, 107, 108, 69, 109, 108, 151, 48, 64,
274
+ 235, 62, 78, 191, 129, 209, 126, 111, 35, 143, 117, 123, 50,
275
+ 222, 65, 52, 19, 125, 141, 221, 55, 65, 3, 195, 197, 25, 7, 33,
276
+ 220, 237, 44, 70, 71, 139, 122, 193, 245, 247, 130, 33, 71, 21,
277
+ 162, 170, 169, 150, 188, 174, 196, 216, 186, 92, 2, 97, 167,
278
+ 141, 125, 241, 164, 167, 37, 72, 38, 12, 38, 82, 13, 63, 68, 71,
279
+ 226, 35, 111, 101, 50, 205, 206, 92, 165, 209, 198, 217, 165,
280
+ 167, 97, 220, 115, 218, 133, 112, 243, 239, 238, 241, 214, 135,
281
+ 169, 190, 173, 133, 171, 208, 32, 125, 44, 237, 86, 87, 178, 85,
282
+ 86, 179, 84, 85, 180, 83, 84, 181, 201, 83, 182, 137, 93, 132,
283
+ 76, 62, 183, 61, 76, 184, 57, 61, 185, 212, 57, 186, 214, 207,
284
+ 187, 34, 143, 156, 79, 239, 237, 123, 137, 177, 44, 1, 4, 201,
285
+ 194, 32, 64, 102, 129, 213, 215, 138, 59, 166, 219, 242, 99, 97,
286
+ 2, 94, 141, 75, 59, 235, 24, 110, 228, 25, 130, 226, 23, 24,
287
+ 229, 22, 23, 230, 26, 22, 231, 112, 26, 232, 189, 190, 243, 221,
288
+ 56, 190, 28, 56, 221, 27, 28, 222, 29, 27, 223, 30, 29, 224,
289
+ 247, 30, 225, 238, 79, 20, 166, 59, 75, 60, 75, 240, 147, 177,
290
+ 215, 20, 79, 166, 187, 147, 213, 112, 233, 244, 233, 128, 245,
291
+ 128, 114, 188, 114, 217, 174, 131, 115, 220, 217, 198, 236, 198,
292
+ 131, 134, 177, 132, 58, 143, 35, 124, 110, 163, 7, 228, 110, 25,
293
+ 356, 389, 368, 11, 302, 267, 452, 350, 349, 302, 303, 269, 357,
294
+ 343, 277, 452, 453, 357, 333, 332, 297, 175, 152, 377, 347, 348,
295
+ 330, 303, 304, 270, 9, 336, 337, 278, 279, 360, 418, 262, 431,
296
+ 304, 408, 409, 310, 415, 407, 270, 409, 410, 450, 348, 347, 422,
297
+ 430, 434, 313, 314, 17, 306, 307, 375, 387, 388, 260, 286, 414,
298
+ 398, 335, 406, 418, 364, 367, 416, 423, 358, 327, 251, 284, 298,
299
+ 281, 5, 4, 373, 374, 253, 307, 320, 321, 425, 427, 411, 421,
300
+ 313, 18, 321, 405, 406, 320, 404, 405, 315, 16, 17, 426, 425,
301
+ 266, 377, 400, 369, 322, 391, 269, 417, 465, 464, 386, 257, 258,
302
+ 466, 260, 388, 456, 399, 419, 284, 332, 333, 417, 285, 8, 346,
303
+ 340, 261, 413, 441, 285, 327, 460, 328, 355, 371, 329, 392, 439,
304
+ 438, 382, 341, 256, 429, 420, 360, 364, 394, 379, 277, 343, 437,
305
+ 443, 444, 283, 275, 440, 363, 431, 262, 369, 297, 338, 337, 273,
306
+ 375, 321, 450, 451, 349, 446, 342, 467, 293, 334, 282, 458, 461,
307
+ 462, 276, 353, 383, 308, 324, 325, 276, 300, 293, 372, 345, 447,
308
+ 352, 345, 340, 274, 1, 19, 456, 248, 281, 436, 427, 425, 381,
309
+ 256, 252, 269, 391, 393, 200, 199, 428, 266, 330, 329, 287, 273,
310
+ 422, 250, 462, 328, 258, 286, 384, 265, 353, 342, 387, 259, 257,
311
+ 424, 431, 430, 342, 353, 276, 273, 335, 424, 292, 325, 307, 366,
312
+ 447, 345, 271, 303, 302, 423, 266, 371, 294, 455, 460, 279, 278,
313
+ 294, 271, 272, 304, 432, 434, 427, 272, 407, 408, 394, 430, 431,
314
+ 395, 369, 400, 334, 333, 299, 351, 417, 168, 352, 280, 411, 325,
315
+ 319, 320, 295, 296, 336, 319, 403, 404, 330, 348, 349, 293, 298,
316
+ 333, 323, 454, 447, 15, 16, 315, 358, 429, 279, 14, 15, 316,
317
+ 285, 336, 9, 329, 349, 350, 374, 380, 252, 318, 402, 403, 6,
318
+ 197, 419, 318, 319, 325, 367, 364, 365, 435, 367, 397, 344, 438,
319
+ 439, 272, 271, 311, 195, 5, 281, 273, 287, 291, 396, 428, 199,
320
+ 311, 271, 268, 283, 444, 445, 373, 254, 339, 282, 334, 296, 449,
321
+ 347, 346, 264, 447, 454, 336, 296, 299, 338, 10, 151, 278, 439,
322
+ 455, 292, 407, 415, 358, 371, 355, 340, 345, 372, 346, 347, 280,
323
+ 442, 443, 282, 19, 94, 370, 441, 442, 295, 248, 419, 197, 263,
324
+ 255, 359, 440, 275, 274, 300, 383, 368, 351, 412, 465, 263, 467,
325
+ 466, 301, 368, 389, 395, 378, 379, 412, 351, 419, 436, 426, 322,
326
+ 2, 164, 393, 370, 462, 461, 164, 0, 267, 302, 11, 12, 268, 12,
327
+ 13, 293, 300, 301, 446, 261, 340, 330, 266, 425, 426, 423, 391,
328
+ 429, 355, 437, 391, 327, 326, 440, 457, 438, 341, 382, 362, 459,
329
+ 457, 461, 434, 430, 394, 414, 463, 362, 396, 369, 262, 354, 461,
330
+ 457, 316, 403, 402, 315, 404, 403, 314, 405, 404, 313, 406, 405,
331
+ 421, 418, 406, 366, 401, 361, 306, 408, 407, 291, 409, 408, 287,
332
+ 410, 409, 432, 436, 410, 434, 416, 411, 264, 368, 383, 309, 438,
333
+ 457, 352, 376, 401, 274, 275, 4, 421, 428, 262, 294, 327, 358,
334
+ 433, 416, 367, 289, 455, 439, 462, 370, 326, 2, 326, 370, 305,
335
+ 460, 455, 254, 449, 448, 255, 261, 446, 253, 450, 449, 252, 451,
336
+ 450, 256, 452, 451, 341, 453, 452, 413, 464, 463, 441, 413, 414,
337
+ 258, 442, 441, 257, 443, 442, 259, 444, 443, 260, 445, 444, 467,
338
+ 342, 445, 459, 458, 250, 289, 392, 290, 290, 328, 460, 376, 433,
339
+ 435, 250, 290, 392, 411, 416, 433, 341, 463, 464, 453, 464, 465,
340
+ 357, 465, 412, 343, 412, 399, 360, 363, 440, 437, 399, 456, 420,
341
+ 456, 363, 401, 435, 288, 372, 383, 353, 339, 255, 249, 448, 261,
342
+ 255, 133, 243, 190, 133, 155, 112, 33, 246, 247, 33, 130, 25,
343
+ 398, 384, 286, 362, 398, 414, 362, 463, 341, 263, 359, 467, 263,
344
+ 249, 255, 466, 467, 260, 75, 60, 166, 238, 239, 79, 162, 127,
345
+ 139, 72, 11, 37, 121, 232, 120, 73, 72, 39, 114, 128, 47, 233,
346
+ 232, 128, 103, 104, 67, 152, 175, 148, 119, 118, 101, 74, 73,
347
+ 40, 107, 9, 108, 49, 48, 131, 32, 194, 211, 184, 74, 185, 191,
348
+ 80, 183, 185, 40, 186, 119, 230, 118, 210, 202, 214, 84, 83, 17,
349
+ 77, 76, 146, 161, 160, 30, 190, 56, 173, 182, 106, 194, 138,
350
+ 135, 192, 129, 203, 98, 54, 21, 68, 5, 51, 4, 145, 144, 23, 90,
351
+ 77, 91, 207, 205, 187, 83, 201, 18, 181, 91, 182, 180, 90, 181,
352
+ 16, 85, 17, 205, 206, 36, 176, 148, 140, 165, 92, 39, 245, 193,
353
+ 244, 27, 159, 28, 30, 247, 161, 174, 236, 196, 103, 54, 104, 55,
354
+ 193, 8, 111, 117, 31, 221, 189, 55, 240, 98, 99, 142, 126, 100,
355
+ 219, 166, 218, 112, 155, 26, 198, 209, 131, 169, 135, 150, 114,
356
+ 47, 217, 224, 223, 53, 220, 45, 134, 32, 211, 140, 109, 67, 108,
357
+ 146, 43, 91, 231, 230, 120, 113, 226, 247, 105, 63, 52, 241,
358
+ 238, 242, 124, 46, 156, 95, 78, 96, 70, 46, 63, 116, 143, 227,
359
+ 116, 123, 111, 1, 44, 19, 3, 236, 51, 207, 216, 205, 26, 154,
360
+ 22, 165, 39, 167, 199, 200, 208, 101, 36, 100, 43, 57, 202, 242,
361
+ 20, 99, 56, 28, 157, 124, 35, 113, 29, 160, 27, 211, 204, 210,
362
+ 124, 113, 46, 106, 43, 204, 96, 62, 77, 227, 137, 116, 73, 41,
363
+ 72, 36, 203, 142, 235, 64, 240, 48, 49, 64, 42, 41, 74, 214,
364
+ 212, 207, 183, 42, 184, 210, 169, 211, 140, 170, 176, 104, 105,
365
+ 69, 193, 122, 168, 50, 123, 187, 89, 96, 90, 66, 65, 107, 179,
366
+ 89, 180, 119, 101, 120, 68, 63, 104, 234, 93, 227, 16, 15, 85,
367
+ 209, 129, 49, 15, 14, 86, 107, 55, 9, 120, 100, 121, 153, 145,
368
+ 22, 178, 88, 179, 197, 6, 196, 89, 88, 96, 135, 138, 136, 138,
369
+ 215, 172, 218, 115, 219, 41, 42, 81, 5, 195, 51, 57, 43, 61,
370
+ 208, 171, 199, 41, 81, 38, 224, 53, 225, 24, 144, 110, 105, 52,
371
+ 66, 118, 229, 117, 227, 34, 234, 66, 107, 69, 10, 109, 151, 219,
372
+ 48, 235, 183, 62, 191, 142, 129, 126, 116, 111, 143, 118, 117,
373
+ 50, 223, 222, 52, 94, 19, 141, 222, 221, 65, 196, 3, 197, 45,
374
+ 220, 44, 156, 70, 139, 188, 122, 245, 139, 71, 162, 149, 170,
375
+ 150, 122, 188, 196, 206, 216, 92, 164, 2, 167, 242, 141, 241, 0,
376
+ 164, 37, 11, 72, 12, 12, 38, 13, 70, 63, 71, 31, 226, 111, 36,
377
+ 101, 205, 203, 206, 165, 126, 209, 217, 98, 165, 97, 237, 220,
378
+ 218, 237, 239, 241, 210, 214, 169, 140, 171, 32, 241, 125, 237,
379
+ 179, 86, 178, 180, 85, 179, 181, 84, 180, 182, 83, 181, 194,
380
+ 201, 182, 177, 137, 132, 184, 76, 183, 185, 61, 184, 186, 57,
381
+ 185, 216, 212, 186, 192, 214, 187, 139, 34, 156, 218, 79, 237,
382
+ 147, 123, 177, 45, 44, 4, 208, 201, 32, 98, 64, 129, 192, 213,
383
+ 138, 235, 59, 219, 141, 242, 97, 97, 2, 141, 240, 75, 235, 229,
384
+ 24, 228, 31, 25, 226, 230, 23, 229, 231, 22, 230, 232, 26, 231,
385
+ 233, 112, 232, 244, 189, 243, 189, 221, 190, 222, 28, 221, 223,
386
+ 27, 222, 224, 29, 223, 225, 30, 224, 113, 247, 225, 99, 60, 240,
387
+ 213, 147, 215, 60, 20, 166, 192, 187, 213, 243, 112, 244, 244,
388
+ 233, 245, 245, 128, 188, 188, 114, 174, 134, 131, 220, 174, 217,
389
+ 236, 236, 198, 134, 215, 177, 58, 156, 143, 124, 25, 110, 7, 31,
390
+ 228, 25, 264, 356, 368, 0, 11, 267, 451, 452, 349, 267, 302,
391
+ 269, 350, 357, 277, 350, 452, 357, 299, 333, 297, 396, 175, 377,
392
+ 280, 347, 330, 269, 303, 270, 151, 9, 337, 344, 278, 360, 424,
393
+ 418, 431, 270, 304, 409, 272, 310, 407, 322, 270, 410, 449, 450,
394
+ 347, 432, 422, 434, 18, 313, 17, 291, 306, 375, 259, 387, 260,
395
+ 424, 335, 418, 434, 364, 416, 391, 423, 327, 301, 251, 298, 275,
396
+ 281, 4, 254, 373, 253, 375, 307, 321, 280, 425, 411, 200, 421,
397
+ 18, 335, 321, 406, 321, 320, 405, 314, 315, 17, 423, 426, 266,
398
+ 396, 377, 369, 270, 322, 269, 413, 417, 464, 385, 386, 258, 248,
399
+ 456, 419, 298, 284, 333, 168, 417, 8, 448, 346, 261, 417, 413,
400
+ 285, 326, 327, 328, 277, 355, 329, 309, 392, 438, 381, 382, 256,
401
+ 279, 429, 360, 365, 364, 379, 355, 277, 437, 282, 443, 283, 281,
402
+ 275, 363, 395, 431, 369, 299, 297, 337, 335, 273, 321, 348, 450,
403
+ 349, 359, 446, 467, 283, 293, 282, 250, 458, 462, 300, 276, 383,
404
+ 292, 308, 325, 283, 276, 293, 264, 372, 447, 346, 352, 340, 354,
405
+ 274, 19, 363, 456, 281, 426, 436, 425, 380, 381, 252, 267, 269,
406
+ 393, 421, 200, 428, 371, 266, 329, 432, 287, 422, 290, 250, 328,
407
+ 385, 258, 384, 446, 265, 342, 386, 387, 257, 422, 424, 430, 445,
408
+ 342, 276, 422, 273, 424, 306, 292, 307, 352, 366, 345, 268, 271,
409
+ 302, 358, 423, 371, 327, 294, 460, 331, 279, 294, 303, 271, 304,
410
+ 436, 432, 427, 304, 272, 408, 395, 394, 431, 378, 395, 400, 296,
411
+ 334, 299, 6, 351, 168, 376, 352, 411, 307, 325, 320, 285, 295,
412
+ 336, 320, 319, 404, 329, 330, 349, 334, 293, 333, 366, 323, 447,
413
+ 316, 15, 315, 331, 358, 279, 317, 14, 316, 8, 285, 9, 277, 329,
414
+ 350, 253, 374, 252, 319, 318, 403, 351, 6, 419, 324, 318, 325,
415
+ 397, 367, 365, 288, 435, 397, 278, 344, 439, 310, 272, 311, 248,
416
+ 195, 281, 375, 273, 291, 175, 396, 199, 312, 311, 268, 276, 283,
417
+ 445, 390, 373, 339, 295, 282, 296, 448, 449, 346, 356, 264, 454,
418
+ 337, 336, 299, 337, 338, 151, 294, 278, 455, 308, 292, 415, 429,
419
+ 358, 355, 265, 340, 372, 352, 346, 280, 295, 442, 282, 354, 19,
420
+ 370, 285, 441, 295, 195, 248, 197, 457, 440, 274, 301, 300, 368,
421
+ 417, 351, 465, 251, 301, 389, 394, 395, 379, 399, 412, 419, 410,
422
+ 436, 322, 326, 2, 393, 354, 370, 461, 393, 164, 267, 268, 302,
423
+ 12, 312, 268, 13, 298, 293, 301, 265, 446, 340, 280, 330, 425,
424
+ 322, 426, 391, 420, 429, 437, 393, 391, 326, 344, 440, 438, 458,
425
+ 459, 461, 364, 434, 394, 428, 396, 262, 274, 354, 457, 317, 316,
426
+ 402, 316, 315, 403, 315, 314, 404, 314, 313, 405, 313, 421, 406,
427
+ 323, 366, 361, 292, 306, 407, 306, 291, 408, 291, 287, 409, 287,
428
+ 432, 410, 427, 434, 411, 372, 264, 383, 459, 309, 457, 366, 352,
429
+ 401, 1, 274, 4, 418, 421, 262, 331, 294, 358, 435, 433, 367,
430
+ 392, 289, 439, 328, 462, 326, 94, 2, 370, 289, 305, 455, 339,
431
+ 254, 448, 359, 255, 446, 254, 253, 449, 253, 252, 450, 252, 256,
432
+ 451, 256, 341, 452, 414, 413, 463, 286, 441, 414, 286, 258, 441,
433
+ 258, 257, 442, 257, 259, 443, 259, 260, 444, 260, 467, 445, 309,
434
+ 459, 250, 305, 289, 290, 305, 290, 460, 401, 376, 435, 309, 250,
435
+ 392, 376, 411, 433, 453, 341, 464, 357, 453, 465, 343, 357, 412,
436
+ 437, 343, 399, 344, 360, 440, 420, 437, 456, 360, 420, 363, 361,
437
+ 401, 288, 265, 372, 353, 390, 339, 249, 339, 448, 255,
438
+ ];
439
+
440
+ let faceLandmarker;
441
+ let originalLandmarks = null;
442
+ let currentImage = null;
443
+
444
+ async function init() {
445
+ try {
446
+ const vision = await FilesetResolver.forVisionTasks(
447
+ "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm",
448
+ );
449
+ faceLandmarker = await FaceLandmarker.createFromOptions(
450
+ vision,
451
+ {
452
+ baseOptions: {
453
+ modelAssetPath: `https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task`,
454
+ delegate: "GPU",
455
+ },
456
+ runningMode: "IMAGE",
457
+ numFaces: 1,
458
+ },
459
+ );
460
+
461
+ document.getElementById("status").innerText = "READY";
462
+ document
463
+ .getElementById("status")
464
+ .classList.add("text-emerald-400");
465
+ document.getElementById("uploadBtn").disabled = false;
466
+
467
+ // Automatically load example.jpg on startup
468
+ loadAndProcessImage("example.jpg");
469
+ } catch (error) {
470
+ document.getElementById("status").innerText = "ERROR";
471
+ console.error(error);
472
+ }
473
+ }
474
+
475
+ function processImage(img) {
476
+ currentImage = img;
477
+ const result = faceLandmarker.detect(img);
478
+ if (result.faceLandmarks.length > 0) {
479
+ originalLandmarks = result.faceLandmarks[0];
480
+ document
481
+ .getElementById("container")
482
+ .classList.remove("hidden");
483
+ document
484
+ .getElementById("placeholder")
485
+ .classList.add("hidden");
486
+ document.getElementById("downloadBtn").disabled = false;
487
+ render();
488
+ }
489
+ }
490
+
491
+ function loadAndProcessImage(src) {
492
+ const img = new Image();
493
+ img.crossOrigin = "anonymous";
494
+ img.onload = () => processImage(img);
495
+ img.src = src;
496
+ }
497
+
498
+ function getWarpedPoints() {
499
+ if (!originalLandmarks) return null;
500
+ const eyeF = document.getElementById("eyeSlider").value / 100;
501
+ const mouthF =
502
+ document.getElementById("mouthSlider").value / 100;
503
+
504
+ // Indices for eye open/close
505
+ const leftEyeIndices = MESH_ANNOTATIONS.leftEyeUpper0;
506
+ const rightEyeIndices = MESH_ANNOTATIONS.rightEyeUpper0;
507
+
508
+ // Create vertex sets for upper and lower lips (excluding mouth corners 61, 291)
509
+ // This fixes the upper lip, moves the lower lip, and uses coordinate checks for others
510
+ const corners = [61, 291];
511
+
512
+ const upperLipIndices = new Set([
513
+ ...MESH_ANNOTATIONS.lipsUpperOuter,
514
+ ...MESH_ANNOTATIONS.lipsUpperInner,
515
+ ]);
516
+
517
+ const lowerLipIndices = new Set([
518
+ ...MESH_ANNOTATIONS.lipsLowerOuter,
519
+ ...MESH_ANNOTATIONS.lipsLowerInner,
520
+ ]);
521
+
522
+ corners.forEach((c) => {
523
+ upperLipIndices.delete(c);
524
+ lowerLipIndices.delete(c);
525
+ });
526
+
527
+ // Mouth reference points
528
+ const upperLipY = originalLandmarks[13].y; // bottom of upper lip
529
+ const chinY = originalLandmarks[152].y; // tip of chin
530
+ const noseY = originalLandmarks[1].y; // tip of nose
531
+
532
+ // Normalize movement based on vertical face size (nose to chin)
533
+ const faceHeight = Math.abs(chinY - noseY);
534
+
535
+ // Horizontal center and width of the mouth (for horizontal damping)
536
+ const mouthCenterX =
537
+ (originalLandmarks[61].x + originalLandmarks[291].x) / 2;
538
+ const mouthHalfWidth =
539
+ Math.abs(
540
+ originalLandmarks[61].x - originalLandmarks[291].x,
541
+ ) / 2 || 0.1;
542
+
543
+ return originalLandmarks.map((pt, i) => {
544
+ let { x, y, z } = pt;
545
+
546
+ // 1. Eye open/close
547
+ if (leftEyeIndices.includes(i))
548
+ y += (originalLandmarks[145].y - y) * eyeF;
549
+ if (rightEyeIndices.includes(i))
550
+ y += (originalLandmarks[374].y - y) * eyeF;
551
+
552
+ // 2. Open mouth
553
+ // Improved detection logic:
554
+ // A. Lower lip or corner or (not upper lip and below upper lip) -> main jaw movement
555
+ // B. Upper lip -> slightly follow near the corners
556
+
557
+ const isLowerLip = lowerLipIndices.has(i);
558
+ const isUpperLip = upperLipIndices.has(i);
559
+ const isCorner = i === 61 || i === 291;
560
+ const isBelow = pt.y > upperLipY;
561
+
562
+ let weight = 0;
563
+
564
+ // Horizontal position ratio (center=0, corner=1)
565
+ const dx = Math.abs(pt.x - mouthCenterX);
566
+ const distRatio = dx / mouthHalfWidth;
567
+
568
+ if (isLowerLip || isCorner || (!isUpperLip && isBelow)) {
569
+ // --- Movement of lower jaw, lower lip, and corners ---
570
+ let vRatio = (pt.y - upperLipY) / (chinY - upperLipY);
571
+ if (vRatio < 0) vRatio = 0; // Correction if corners are above the reference line
572
+
573
+ // Step 3: Smooth the curvature (align edge directions)
574
+ vRatio = Math.pow(vRatio, 1.5);
575
+
576
+ // Vertical weight (jaw rotation approximation: moves more towards the bottom)
577
+ const vWeight = 0.4 + 0.6 * vRatio;
578
+
579
+ // Horizontal weight (suppress vertical movement towards corners)
580
+ // Center(0) -> 1.0, Corner(1) -> 0.2
581
+ const hDamping = Math.max(
582
+ 0.2,
583
+ 1.0 - Math.pow(distRatio, 2),
584
+ );
585
+
586
+ // Apply horizontal damping closer to lips; move jaw (large vRatio) overall
587
+ const effectiveH =
588
+ hDamping + (1 - hDamping) * Math.min(1, vRatio * 2);
589
+
590
+ weight = vWeight * effectiveH;
591
+
592
+ // Double the movement for the lower lip line only
593
+ if (isLowerLip) {
594
+ weight *= 2.0;
595
+ }
596
+
597
+ // Step 2: Effectively don't move triangles on the jawline
598
+ // 152:chin tip, 377/400:left jaw area, 148/176:right jaw area
599
+ if ([152, 377, 148, 400, 176].includes(i)) {
600
+ //weight *= 0.3;
601
+ }
602
+ } else if (isUpperLip) {
603
+ // --- Upper lip following ---
604
+ // Basically don't move, but follow lower lip edges near corners (large distRatio)
605
+ // Center (0) is fixed, edges (1) drop slightly
606
+
607
+ // Starts taking effect from 0.5 (middle), moves up to ~0.1 at edges
608
+ if (distRatio > 0.5) {
609
+ weight = Math.pow((distRatio - 0.5) * 2, 2) * 0.1;
610
+ }
611
+ }
612
+
613
+ if (weight > 0) {
614
+ // Step 1: Weaken deformation only around jaw and mouth
615
+ const maxMove = faceHeight * 0.17;
616
+ y += mouthF * maxMove * weight;
617
+ }
618
+
619
+ return { x, y, z };
620
+ });
621
+ }
622
+
623
+ function drawTriangle(
624
+ ctx,
625
+ img,
626
+ warped,
627
+ original,
628
+ i0,
629
+ i1,
630
+ i2,
631
+ w,
632
+ h,
633
+ ) {
634
+ const dx0 = warped[i0].x * w,
635
+ dy0 = warped[i0].y * h;
636
+ const dx1 = warped[i1].x * w,
637
+ dy1 = warped[i1].y * h;
638
+ const dx2 = warped[i2].x * w,
639
+ dy2 = warped[i2].y * h;
640
+ const sx0 = original[i0].x * w,
641
+ sy0 = original[i0].y * h;
642
+ const sx1 = original[i1].x * w,
643
+ sy1 = original[i1].y * h;
644
+ const sx2 = original[i2].x * w,
645
+ sy2 = original[i2].y * h;
646
+
647
+ ctx.save();
648
+ ctx.beginPath();
649
+ ctx.moveTo(dx0, dy0);
650
+ ctx.lineTo(dx1, dy1);
651
+ ctx.lineTo(dx2, dy2);
652
+ ctx.closePath();
653
+ ctx.clip();
654
+
655
+ const denom =
656
+ sx0 * (sy2 - sy1) -
657
+ sx1 * sy2 +
658
+ sx2 * sy1 +
659
+ (sx1 - sx2) * sy0;
660
+ if (Math.abs(denom) < 0.1) {
661
+ ctx.restore();
662
+ return;
663
+ }
664
+
665
+ const m11 =
666
+ -(
667
+ sy0 * (dx2 - dx1) -
668
+ sy1 * dx2 +
669
+ sy2 * dx1 +
670
+ (sy1 - sy2) * dx0
671
+ ) / denom;
672
+ const m12 =
673
+ (sy1 * dy2 -
674
+ sy0 * (dy2 - dy1) -
675
+ sy2 * dy1 +
676
+ (sy2 - sy1) * dy0) /
677
+ denom;
678
+ const m21 =
679
+ (sx0 * (dx2 - dx1) -
680
+ sx1 * dx2 +
681
+ sx2 * dx1 +
682
+ (sx1 - sx2) * dx0) /
683
+ denom;
684
+ const m22 =
685
+ -(
686
+ sx1 * dy2 -
687
+ sx0 * (dy2 - dy1) -
688
+ sx2 * dy1 +
689
+ (sx2 - sx1) * dy0
690
+ ) / denom;
691
+ const tx =
692
+ (sx0 * (sy2 * dx1 - sy1 * dx2) +
693
+ sy0 * (sx1 * dx2 - sx2 * dx1) +
694
+ (sx2 * sy1 - sx1 * sy2) * dx0) /
695
+ denom;
696
+ const ty =
697
+ (sx0 * (sy2 * dy1 - sy1 * dy2) +
698
+ sy0 * (sx1 * dy2 - sx2 * dy1) +
699
+ (sx2 * sy1 - sx1 * sy2) * dy0) /
700
+ denom;
701
+
702
+ ctx.setTransform(m11, m12, m21, m22, tx, ty);
703
+ ctx.drawImage(img, 0, 0);
704
+ ctx.restore();
705
+ }
706
+
707
+ function render() {
708
+ if (!currentImage || !originalLandmarks) return;
709
+ const ctx = outputCanvas.getContext("2d");
710
+ const w = currentImage.naturalWidth;
711
+ const h = currentImage.naturalHeight;
712
+ outputCanvas.width = w;
713
+ outputCanvas.height = h;
714
+
715
+ const warped = getWarpedPoints();
716
+ ctx.clearRect(0, 0, w, h);
717
+ ctx.drawImage(currentImage, 0, 0);
718
+
719
+ // Draw all parts with correct triangle definitions
720
+ for (let i = 0; i < TRIANGULATION.length; i += 3) {
721
+ const i0 = TRIANGULATION[i],
722
+ i1 = TRIANGULATION[i + 1],
723
+ i2 = TRIANGULATION[i + 2];
724
+ // Data integrity check
725
+ if (i2 === undefined || warped[i2] === undefined) continue;
726
+ drawTriangle(
727
+ ctx,
728
+ currentImage,
729
+ warped,
730
+ originalLandmarks,
731
+ i0,
732
+ i1,
733
+ i2,
734
+ w,
735
+ h,
736
+ );
737
+ }
738
+
739
+ // Fill the mouth interior (area between upper and lower inner lips) with black
740
+ ctx.resetTransform();
741
+ const upperInner = MESH_ANNOTATIONS.lipsUpperInner;
742
+ const lowerInner = MESH_ANNOTATIONS.lipsLowerInner;
743
+ if (upperInner && lowerInner) {
744
+ ctx.fillStyle = "black";
745
+ ctx.beginPath();
746
+ ctx.moveTo(
747
+ warped[upperInner[0]].x * w,
748
+ warped[upperInner[0]].y * h,
749
+ );
750
+ for (let i = 1; i < upperInner.length; i++) {
751
+ ctx.lineTo(
752
+ warped[upperInner[i]].x * w,
753
+ warped[upperInner[i]].y * h,
754
+ );
755
+ }
756
+ // Close the path by connecting the lower lip side in reverse order
757
+ for (let i = lowerInner.length - 1; i >= 0; i--) {
758
+ ctx.lineTo(
759
+ warped[lowerInner[i]].x * w,
760
+ warped[lowerInner[i]].y * h,
761
+ );
762
+ }
763
+ ctx.closePath();
764
+ ctx.fill();
765
+ }
766
+
767
+ if (document.getElementById("showMesh").checked) {
768
+ ctx.resetTransform();
769
+ ctx.strokeStyle = "rgba(0, 255, 255, 0.3)";
770
+ ctx.lineWidth = 0.5;
771
+ for (let i = 0; i < TRIANGULATION.length; i += 3) {
772
+ const i0 = TRIANGULATION[i],
773
+ i1 = TRIANGULATION[i + 1],
774
+ i2 = TRIANGULATION[i + 2];
775
+ if (i2 === undefined) continue;
776
+ ctx.beginPath();
777
+ ctx.moveTo(warped[i0].x * w, warped[i0].y * h);
778
+ ctx.lineTo(warped[i1].x * w, warped[i1].y * h);
779
+ ctx.lineTo(warped[i2].x * w, warped[i2].y * h);
780
+ ctx.closePath();
781
+ ctx.stroke();
782
+ }
783
+ }
784
+
785
+ if (document.getElementById("showKeypoints").checked) {
786
+ ctx.resetTransform();
787
+ ctx.strokeStyle = "rgba(255, 0, 0, 0.8)"; // Red
788
+ ctx.lineWidth = 1.5;
789
+
790
+ for (const key in MESH_ANNOTATIONS) {
791
+ const indices = MESH_ANNOTATIONS[key];
792
+ if (!indices || indices.length < 2) continue;
793
+
794
+ ctx.beginPath();
795
+ const startPt = warped[indices[0]];
796
+ if (!startPt) continue;
797
+
798
+ ctx.moveTo(startPt.x * w, startPt.y * h);
799
+
800
+ for (let i = 1; i < indices.length; i++) {
801
+ const pt = warped[indices[i]];
802
+ if (!pt) continue;
803
+ ctx.lineTo(pt.x * w, pt.y * h);
804
+ }
805
+
806
+ // While paths like silhouettes should be closed,
807
+ // here they are drawn as simple line strips according to keypoints.ts definitions.
808
+ ctx.stroke();
809
+ }
810
+ }
811
+ }
812
+
813
+ document.getElementById("eyeSlider").oninput = (e) => {
814
+ document.getElementById("eyeVal").innerText =
815
+ e.target.value + "%";
816
+ render();
817
+ };
818
+ document.getElementById("mouthSlider").oninput = (e) => {
819
+ document.getElementById("mouthVal").innerText =
820
+ e.target.value + "%";
821
+ render();
822
+ };
823
+ document.getElementById("showMesh").onchange = render;
824
+ document.getElementById("showKeypoints").onchange = render;
825
+ document.getElementById("uploadBtn").onclick = () =>
826
+ document.getElementById("fileInput").click();
827
+ document.getElementById("fileInput").onchange = (e) => {
828
+ const file = e.target.files[0];
829
+ if (!file) return;
830
+ loadAndProcessImage(URL.createObjectURL(file));
831
+ };
832
+ document.getElementById("downloadBtn").onclick = () => {
833
+ const link = document.createElement("a");
834
+ link.download = `warp_${Date.now()}.png`;
835
+ link.href = outputCanvas.toDataURL();
836
+ link.click();
837
+ };
838
+
839
+ init();
840
+ </script>
841
+ </body>
842
  </html>