-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (161 loc) · 6.54 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en" class="load all">
<head>
<meta charset="UTF-8">
<title>CodePen - Virtual Makeup and Hair Color</title>
<base target="_blank"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<button id="help">Help</button>
<main>
<p class="err" id="errorMessage"></p>
<div class="w50">
<input type="file" id="photo" name="file" accept="image/*" disabled class="w100" />
<input id="maxsize" class="w100" type="range" min="128" max="768" step="128" value="384" />
</div>
<fieldset id="default" class="w50">
<legend>default color</legend>
<label data-id="skin"><input type="color" data-id="skin" value="#add8e6" /></label>
<label data-id="lips"><input type="color" data-id="lips" value="#ff00ff" /></label>
<label data-id="hair"><input type="color" data-id="hair" value="#ffc000" /></label>
<label data-id="eye"><input type="color" data-id="eye" value="#c080ff" /></label>
<label data-id="iris"><input type="color" data-id="iris" value="#00ff00" /></label>
<!--ex: different color on second face-->
<label data-id="f1_skin"><input type="color" data-id="f1_skin" value="#ffc080" /></label>
<label data-id="f1_lips"><input type="color" data-id="f1_lips" value="#ff4040" /></label>
<label data-id="f1_hair"><input type="color" data-id="f1_hair" value="#ff40ff" /></label>
<label data-id="bg" style="width:40%;"><input type="color" data-id="bg" value="#fff0c0" /></label>
</fieldset>
<section data-load="load OpenCV" class="w100">
<div class="w50" id="edit">
<label class="ui hide">⨯<input type="checkbox" id="abort" title="abort" /></label>
<canvas id="roi" class='abs'></canvas>
<canvas id="color" class='abs'></canvas>
<canvas id="depth" class='abs'></canvas>
<canvas id="chromaImg"></canvas>
</div>
<div class="w50" id="view">
<canvas id="chroma"></canvas>
<!--<canvas id="inpaint_pixi" class="abs"></canvas>-->
</div>
</section>
<input id="col" type="range" max="2" value="0" />
<div id="mask" class="w100 scroll col0"></div>
<canvas id="eigen" class="w13" style="left:1em;background:transparent;"></canvas>
<div id="wheel" class="w50 aligncenter"></div>
<details>
<pre>
<li class="w100"><a href="//techcrunch.com/2019/06/18/youtubes-new-ar-beauty-try-on-lets-viewers-virtually-try-on-makeup-while-watching-video-reviews/">YouTube AR Beauty Try-On</a></li><li><a href="https://lucid.app/documents/embeddedchart/9d72fa85-b820-4ce7-abdf-b7628f31e02c">lucidchart</a>
1. upload photo (orient via loadimage)
2. detect face(s) - set relative unit
A. get foreground/background (grabcut)
B. set roi for skin, lips, hair, eyes
a. get kmeans palette / expand via inrange
b. refine mask via grabcut
c. colorize (!greenscreen)
3. composite color mask (?)
4. composite depth mask (PIXI)
5. bar chart (normal) and hsl color wheel (d3)
</pre>
</details>
</main>
<script type="text/javascript">
let driver;
// Start the introduction
document.querySelector('#help')
.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
if (driver == undefined) {
// lazy loading Help
let css = document.createElement('link');
css.href = 'https://unpkg.com/driver.js/dist/driver.min.css';
css.rel = 'stylesheet';
document.head.appendChild(css);
let js = document.createElement('script');
js.src = 'https://unpkg.com/driver.js/dist/driver.min.js';
js.onload = function() {
driver = new Driver();
// Define the steps for introduction
driver.defineSteps([{
element: '#photo',
popover: {
title: 'Choose file [image or photo]',
description: 'Apply settings to faces in image. Progress displays with an ⨯ to abort. There is no dedicated update button.',
}
},
{
element: '#maxsize',
popover: {
title: 'Scale resolution [slider]',
description: 'Lower setting completes faster. Higher setting finds more detail.',
}
},
{
element: '#default',
popover: {
title: 'Default color [input group]',
description: 'Multiply masks of matching id with color, or green for none. The background applies once to a composite, and is blurred.',
}
},
{
element: '#edit',
popover: {
title: 'Input [image]',
description: 'Feature masks\' sample areas. Hover cycles composites of color and depth.',
}
},
{
element: '#view',
popover: {
title: 'Output [image]',
description: 'Recolored image with interactive depth map.',
}
},
{
element: '#col',
popover: {
title: 'Zoom masks [slider]',
description: 'Adjust size of masks to inspect details.',
}
},
{
element: '#mask',
popover: {
title: 'Masks and palettes',
description: 'Hover color palette bar chart to highlight corresponding data on color wheel. <br />Masks show pixels within color range. Hover for mask probability refined by feature relationships. Click mask to pick new color.',
}
},
{
element: '#eigen',
popover: {
title: 'Eigenface',
description: 'Difference of multiple faces.',
}
},
{
element: '#wheel',
popover: {
title: 'Color wheel',
description: 'HSV normalized distribution.',
}
}
]);
driver.start();
}
document.head.appendChild(js);
} else {
driver.start();
}
});
</script>
<!-- partial -->
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/697675/utils.js'></script>
<script src='https://rawgit.com/blueimp/JavaScript-Load-Image/master/js/load-image.all.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.2/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js'></script><script src="./script.js"></script>
</body>
</html>