Skip to content

F
face
Commit 2469f250 by Иван Кубота
Options

match products and all products variants page

parent 883bf0ca
Showing with 846 additions and 20 deletions
examples/examples-browser/public/js/DOM.js 0 → 100644
var NS = window['NS'] = function(cfg) {
if(cfg.consts){
this.consts = NS.apply(NS.apply({}, this.consts), cfg.consts);
delete cfg.consts;
}
NS.apply(this, cfg);
this._update = this._update.bind(this);
this.resize = this.resize.bind(this);
this.init();
};
NS.apply = function(a,b) {
for(var k in b){
a[k] = b[k];
}
return a;
};
(function(NS, glob, document){
var svgNS = 'http://www.w3.org/2000/svg';
var setters = {
cls: function(el) {
return function(cls) {
var tagName = el.tagName.toLowerCase();
if( tagName in customElementClassNameSetter ){
customElementClassNameSetter[tagName](el, cls);
}else{
el.className = D.cls.apply(D, arguments);
}
}
},
attr: function(el, attrName) {
return function(val) {
if(val !== void 0 && val !== false){
el.setAttribute( attrName, val );
}else{
el.removeAttribute(attrName)
}
}
}
};
var used = {
cls: true, className: true, 'class': true, classname: true,
attr: true, style: true, renderTo: true,
prop: true, bind: true,
on: true, renderto: true
};
// ~jsx h function
var domEl = function( type, cfg ){
var typeOfType = typeof type;
if(typeOfType === 'function'){
// factory passed
return type(cfg, [].slice.call(arguments, 2));
}else if(typeof type === 'object' && type.hook){
// hooked future element creation
return type.hook(cfg, [].slice.call(arguments, 2));
}
cfg = cfg || {};
var cls = cfg.cls || cfg['class'] || cfg.className,
style = cfg.style,
attr = cfg.attr || {},
prop = cfg.prop,
on = cfg.on || {},
renderTo = cfg.renderTo,
el = cfg.el || (type in customElementCreate ? customElementCreate[type](type, cfg) : document.createElement( type )),
classList = el.classList;
var i, _i, name;
for(i in cfg)
if( cfg.hasOwnProperty(i)){
name = i.toLowerCase();
if(name in used)
continue;
if(name.substr(0, 2) === 'on'){
// it is an event
on[ name.substr( 2 ) ] = cfg[ i ];
}else{
// attribute
attr[i] = cfg[i];
}
}
if( cls ){
if(typeof cls === 'function'){
cls(setters.cls(el));
}else if(typeof cls === 'object' && cls.hook){
cls.hook(setters.cls(el));
}else if(typeof cls === 'object'){
var resolvedCls = Array.isArray(cls)?D.cls.apply(D, cls):D.cls(cls);
if(typeof resolvedCls === 'function'){
resolvedCls(setters.cls(el));
}else{
setters.cls(el)(resolvedCls);
}
}else{
setters.cls(el)(cls);
}
}
if( style ){
if(typeof style === 'string'){
el.style = style;
}else{
NS.apply( el.style, style );
}
}
for( i in attr ){
if(attr.hasOwnProperty( i )){
if( typeof attr[ i ] === 'function' ){
attr[ i ]( setters.attr( el, i ) );
}else if(typeof attr[ i ] === 'object'&& attr[ i ] !== null && attr[ i ].hook){
return attr[ i ].hook(setters.attr(el, i));
}else{
setters.attr( el, i )( attr[ i ] );
}
}
}
for( i in prop ){
prop.hasOwnProperty( i ) && ( el[ i ] = prop[ i ] );
}
for( i in on ){
on.hasOwnProperty( i ) && el.addEventListener( i, on[ i ] );
}
for( i = 2, _i = arguments.length; i < _i; i++ ){
var child = arguments[ i ];
D.appendChild( el, child );
}
if( renderTo ){
D.appendChild( renderTo, el );
}
return el;
};
var D = NS.D = {
svg: null,
label: null,
div: null,
span: null,
path: null,
canvas: null,
input: null,
textarea: null,
tBody: null,
tHead: null,
th: null,
td: null,
tr: null,
Text: function( val ){ return document.createTextNode( val );}
};
'div,template,span,input,label,canvas,span,textarea,table,tr,td,th,tBody,tHead'.split( ',' ).forEach( function( name ){
D[ name ] = function(){
return domEl.apply( null, [ name ].concat([].slice.call(arguments)))
};
} );
var customElementCreate = {};
var customElementClassNameSetter = {};
var createElementSVG = function(name) {
var el = document.createElementNS( svgNS, name );
el.setAttribute( 'xmlns', svgNS );
return el;
},
setClassNameSVG = function(el, cls) {
el.setAttribute( 'class', cls );
};
'svg,path,circle,g,defs,marker'.split( ',' ).forEach( function( name ){
customElementCreate[name] = createElementSVG;
customElementClassNameSetter[name] = setClassNameSVG;
D[ name ] = function(cfg){
if( !cfg ){
cfg = {};
}
cfg.el = createElementSVG( name );
return domEl.apply( null, [ null ].concat([].slice.call(arguments)))
};
} );
D.html = function(cfg){
var el = domEl('div', cfg);
el.innerHTML = [].slice.call(arguments,1).join('\n');
return el;
};
D.h = domEl;
D.f = function(cfg, children) {
return children;
};
D.isInDOM = function(el) {
return document.body.contains(el);
};
D._recursiveCmpCall = function(el, sub, fnName){
if(sub.__cmp)
sub.__cmp[fnName] && sub.__cmp[fnName](el);
for( var i = 0, _i = sub.childNodes.length; i < _i; i++ ){
var childNode = sub.childNodes[ i ];
D._recursiveCmpCall(sub, childNode, fnName);
}
};
D.replaceChildren = function(el) {
D.removeChildren(el);
D.appendChild.apply(D, arguments);
};
D.removeChildren = function(el){
var subEl;
var isInDOM = D.isInDOM(el);
while((subEl = el.lastChild)){
isInDOM && D._recursiveCmpCall(el, subEl, 'beforeRemoveFromDOM');
el.removeChild(subEl);
isInDOM && D._recursiveCmpCall(el, subEl, 'afterRemoveFromDOM');
}
};
var DFragment = DocumentFragment;
D.appendChild = function(el, subEl){
var type = typeof subEl;
if(subEl === null){
return ;
}
if( type !== 'object' ){
// TODO : add hook
if( type === 'function' ){
var tmp = D.Text('');//( {cls: 'zero-wrapper'} );
el.appendChild( tmp );
var list = [];
subEl( function(){
// TODO: append 2 TextNodes and remove children between them
if(el instanceof DFragment){
el = tmp.parentNode;
}
if(!el)
return;
for( var i = 0, _i = list.length; i < _i; i++ ){
list[ i ].parentNode === el && el.removeChild( list[ i ] );
}
var fragment = document.createDocumentFragment();
D.appendChild( fragment, [].slice.call( arguments ) );
list = [].slice.call(fragment.childNodes);
if(!tmp || !tmp.parentNode)
return;
el.insertBefore(fragment, tmp);
} )
}else if( subEl !== void 0 && subEl !== false && subEl !== null ){
el.appendChild( D.Text( subEl ) );
}
}else if('dom' in subEl){
var isInDOM = D.isInDOM(el);
subEl.dom.__cmp = subEl;
isInDOM && D._recursiveCmpCall(el, subEl.dom, 'beforeAddToDOM');
el.appendChild( subEl.dom );
isInDOM && D._recursiveCmpCall(el, subEl.dom, 'afterAddToDOM');
//subEl
}else if( Array.isArray(subEl) ){
subEl.forEach(subEl => D.appendChild( el, subEl ) );
}else{
var isInDOM = D.isInDOM(el);
isInDOM && D._recursiveCmpCall(el, subEl, 'beforeAddToDOM');
el.appendChild( subEl );
isInDOM && D._recursiveCmpCall(el, subEl, 'afterAddToDOM');
}
};
D.join = function(arr, delimiter){
var out = [], isFn = typeof delimiter === 'function';
for( var i = 0, _i = arr.length - 1; i < _i; i++ ){
out.push(arr[i], isFn?delimiter(i):delimiter);
}
if(i < _i+1)
out.push(arr[i]);
return out;
};
var dpID = 1;
var DataPiece = function(id){this.id = id;};
DataPiece.prototype = {value: void 0, update: function(){}};
var DataPieceFactory = function(refs, fn, scope) {
var id = dpID++;
var dp = new DataPiece(id);
refs.push(dp);
fn.call(scope, function(val) {
dp.value = val;
dp.update();
});
return dp;
};
var RefHash = function(){};RefHash.prototype = {any: false};
D.__cls = function(args, refs) {
return function(update) {
var i, _i, lastCls,
constructCls = function() {
var cls = D._cls(args, [], 0);
if(lastCls !== cls)
update(lastCls = cls);
};
for( i = 0, _i = refs.length; i < _i; i++ )
refs[ i ].update = constructCls;
constructCls();
};
};
D._cls = function(args, refs, depth) {
var out = [], i = 0, _i = args.length, token, tmp, key;
for(;i<_i;i++){
token = args[i];
if(typeof token === 'string' && token){
out.push( token );
}else if(typeof token === 'object'){
if(token instanceof DataPiece){
token.value && out.push( token.value );
}else if ( token.hook ){
args[i] = DataPieceFactory(refs, token.hook, token);
}else if(Array.isArray(token)){
tmp = D._cls(token, refs, depth+1);
// TODO check for push tmp
tmp && out.push( token );
}else{
for(key in token){
if(token[key] === null)
continue;
if(token[key] instanceof DataPiece){
token[key].value && out.push(key);
}else if(typeof token[key] === 'function'){
token[ key ] = DataPieceFactory(refs, token[ key ]);
}else if(typeof token[key] === 'object' && token[key].hook){
token[key] = DataPieceFactory(refs, token[ key ].hook, token[key])
}else{
token[ key ] && out.push( key );
}
}
}
}else if(typeof token === 'function'){
args[i] = DataPieceFactory(refs, args[i]);
}
}
return depth === 0 && refs.length ? D.__cls(args, refs): out.join(' ');
};
D.cls = function() {
return D._cls(arguments, [], 0);
};
D.escapeCls = function(cls) {
return (cls+'').replace(/[^a-zA-Z0-9\-_]/g,'');
};
var _construct = function(ctor, cfg, p) {
//if it is not an arrow function
if('prototype' in ctor && ctor.prototype.constructor === ctor){
var cls = new ctor(cfg || {}, p);
return cls;//'dom' in cls ? cls.dom : cls;
}else{
return ctor(cfg || {}, p);
}
};
var usage = {};
var populate = function(name, construct) {
var tokens = name.split('.'),
last = tokens.pop(),
first = tokens.shift();
// ES 6 consts are not in global scope. So we can not just add vars to window
var pointer = first?
new Function('glob', 'return typeof '+first+' !== "undefined"?'+first+':(glob["'+first+'"] = {})')(glob)
:glob;
try{
tokens.reduce( function( pointer, token, i, full ){
return pointer[ token ] || ( pointer[ token ] = {} );
}, pointer )[ last + '' ] = construct;
}catch(e){
console.error('can not populate', name)
}
return construct;
};
D.declare = function(name, ctor) {
var uses;
if(typeof ctor === 'object'){
var original = ctor;
var _ctor = function(a,b,c,d){
if(!(this instanceof _ctor)){
return new _ctor(a,b,c,d);
}
original.ctor && original.ctor.apply(this, arguments);
};
_ctor.prototype = ctor;
_ctor.constructor = _ctor;
ctor = _ctor;
}
if(name in usage){
log('updated', `${name} (${usage[name].instances.length})`)
usage[ name ].ctor = ctor;
uses = usage[ name ].instances;
for( var i = 0, _i = uses.length; i < _i; i++ ){
var u = uses[ i ], d = u.dom;
u.dom = _construct(ctor, u.cfg, u.p);
if(d.parentNode){
d.parentNode.replaceChild( u.dom, d )
}
}
}else{
log('declared', `${name}`);
uses = (usage[ name ] = {ctor: ctor, instances: []}).instances;
}
return populate(name, function construct (cfg, p) {
var dom = _construct(ctor, cfg, p);
uses.push({dom: dom, cfg: cfg, p: p});
return dom;
});
};
var _log = [], later = false,
realLog = function() {
later = false;
var aggregated = _log.reduce(function(s, item) {
(s[item.evt] || (s[item.evt] = [])).push(item);
return s;
}, {});
_log.length = 0;
for(var evt in aggregated){
console.log('DOM:'+evt+' → '+aggregated[evt].map(function(item) {
return item.args.join(' ');
}).join(', '));
}
};
var log = function(evt) {
_log.push({type: 'log', evt: evt, args: [].slice.call(arguments, 1)});
if(!later)
later = setTimeout(realLog, 3000);
};
var emptyFn = function() {};
D.Unsubscribe = function(fn) {
this.fn = [fn];
};
D.Unsubscribe.prototype = {
un: function() {
var fn;
while((fn = this.fn.pop()))
fn();
},
add: function(fn) {
typeof fn !== 'function' && (fn = getCallableFunction(fn));
this.fn.push(fn);
}
};
var getCallableFunction = function(obj) {
if(obj instanceof D.Unsubscribe){
return function() {
obj.un();
}
}
};
var unsubscribable = function(name) {
return function(el, fn) {
typeof fn !== 'function' && (fn = getCallableFunction(fn));
el.addEventListener(name, fn);
return new D.Unsubscribe(function() {
el.removeEventListener(name, fn);
});
};
};
D.mouse = {
down: unsubscribable('mousedown'),
up: unsubscribable('mouseup'),
move: unsubscribable('mousemove'),
over: unsubscribable('mouseover'),
};
})(window['NS'], typeof window !== "undefined" ? window :
typeof WorkerGlobalScope !== "undefined" ? self :
typeof global !== "undefined" ? global :
typeof GLOBAL !== "undefined" ? GLOBAL :
Function("return this;")(), document);
var D = NS.D,
div = D.div,
span = D.span,
view = {
page: {},
cmp: {}
};
examples/examples-browser/public/js/data.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/examples-browser/public/js/extract-colors.js
...@@ -212,20 +212,96 @@ function rgbToHex(r, g, b) { ...@@ -212,20 +212,96 @@ function rgbToHex(r, g, b) {
throw "Invalid color component"; throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16); return ((r << 16) | (g << 8) | b).toString(16);
} }
var extractor = function(ctx, from, k, debug) { var extractor = function(partName, ctx, from, k, debug) {
extracting++; extracting++;
return extractColors(ctx, from, k, debug) var colors = extractColors(ctx, from, k, debug)
.map(function(m) { .map(function(m) {
return {color: hsvToRgb.apply(null, m.color).map(function(a){return a|0}), hsv: m.color, distance: m.distance}; return {color: hsvToRgb.apply(null, m.color).map(function(a){return a|0}), hsv: m.color, distance: m.distance};
});
return D.div({cls: 'colors'},
colors.map(function(m){
return D.span({style: 'background:rgb('+m.color.join(',')+');', cls: 'color-preview'},
'H: '+Math.floor(m.hsv[0]*360),D.h('br'),
'S: '+Math.round(m.hsv[1]*100)+'%', D.h('br'),
'V: '+Math.round(m.hsv[2]*100)+'%'
);
}),
function(draw) {
getData(partName, function(res) {
var list = [];
res.products.forEach(function(product) {
product.variants.forEach(function(variant) {
var color = variant.option2.substr(1),
r = parseInt(color[0]+color[1], 16),
g = parseInt(color[2]+color[3], 16),
b = parseInt(color[4]+color[4], 16);
list.push({
pid: product.id,
vid: variant.id,
description: product.body_html,
title: product.title,
color: variant.option2,
colorName: variant.option1,
img: variant.featured_image && variant.featured_image.src || (product.images[0] || {}).src,
sku: variant.option3,
hsv: rgbToHsv(r,g,b)
});
});
});
var used = {};
var all = [].concat.apply([],
colors.map(function(clr) {
var matched = list.map(function(i) {
return {i: i, d: hsvDistance(i.hsv, clr.hsv), c: clr};
})
.filter(function(i) {
return i.d<0.07;
})
.sort(function(a,b) {
return a.d-b.d;
});
if(!matched.length)
return matched;
if(matched[0].d<0.02){
return matched.slice( 0, 1 )
}else{
return matched.slice(0, 2);
}
})).filter(function(item) {
if(!(item.i.vid in used)){
used[item.i.vid] = true;
return true;
}
return false;
});
var count = all.length;
draw(D.div({cls: 'matched'},
D.span({cls:'action', onClick: function() {
this.parentNode.classList.toggle('opened');
}}, 'Matched: '+count+' '+(count===1?'item':'items')),
D.div({cls: 'collapsed'},
all.map(function(item) {
return D.div({cls: 'row'},
D.div({cls: 'cp1', style: {background: 'rgb('+item.c.color+')'}}),
D.div({cls: 'cp2', style: {background: item.i.color}}),
D.h('img', {cls: 'preview-img', src: item.i.img}),
D.div({cls: 'name'}, item.i.title),
D.div({cls: 'accuracy'}, (Math.max(0,Math.min(100,(1-item.d*8)*100))).toFixed(2)+'%')
)
}) })
.map(function(m){ )
return { ));
html: '<span style="background:rgb('+m.color.join(',')+');" class="color-preview">'+
'H:&nbsp;'+Math.floor(m.hsv[0]*360)+'<br>'+
'S:&nbsp;'+Math.round(m.hsv[1]*100)+'%<br>'+
'V:&nbsp;'+Math.round(m.hsv[2]*100)+'%'+
'</span>'
};
}); });
}
);
}; };
\ No newline at end of file
examples/examples-browser/server.js
...@@ -33,7 +33,8 @@ app.get('/bbt_face_matching', (req, res) => res.sendFile(path.join(viewsDir, 'bb ...@@ -33,7 +33,8 @@ app.get('/bbt_face_matching', (req, res) => res.sendFile(path.join(viewsDir, 'bb
app.get('/bbt_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceRecognition.html'))) app.get('/bbt_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceRecognition.html')))
app.get('/batch_face_landmarks', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceLandmarks.html'))) app.get('/batch_face_landmarks', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceLandmarks.html')))
app.get('/batch_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceRecognition.html'))) app.get('/batch_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceRecognition.html')))
app.get('/demo', (req, res) => res.sendFile(path.join(viewsDir, 'demo.html'))) app.get('/demo', (req, res) => res.sendFile(path.join(viewsDir, 'demo.html')));
app.get('/all', (req, res) => res.sendFile(path.join(viewsDir, 'all.html')));
app.post('/fetch_external_image', async (req, res) => { app.post('/fetch_external_image', async (req, res) => {
const { imageUrl } = req.body const { imageUrl } = req.body
......
examples/examples-browser/views/all.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>All of them</title>
<script src="js/Point.js"></script>
<script src="js/extract-colors.js"></script>
<script src="js/data.js"></script>
<script src="js/DOM.js"></script>
<style>
body {
margin: 16px;
padding: 0;
font-family: Verdana;
font-size:16px;
}
.cp {
width:16px;
height: 16px;
border: 2px solid #fff;
transition: all 0.3s ease;
position: relative;
}
.cp:hover {
width: 32px;
height: 32px;
margin: -8px;
z-index: 2;
}
.row.other .cp {
border-radius: 50%;
}
.row.active .cp {
width: 24px;
height: 24px;
margin: -4px;
z-index: 1;
}
.title {
font-size:32px;
padding: 16px 0 8px 0
}
.row {
display: inline-block;
/* float: left; */
}
.left {
position: absolute;
left: 0;
width: 50%;
top: 0;
height: 100%;
padding:16px;
box-sizing: border-box;
}
.right {
position: absolute;
right: 0;
width: 50%;
top: 0;
height: 100%;
padding:16px;
box-sizing: border-box;
}
.preview-img {
float: right;
width: 128px;
}
.preview-color {
width: 92px;
height: 92px;
float: left;
margin: 0 16px 0 0;
border-radius: 5px;
}
</style>
</head>
<body>
<script>
var list = ['brows','lips','blush','eyes'];
var lastEl;
var preview = function(item, el) {
lastEl && lastEl.classList.remove('active');
lastEl && (lastEl.childNodes[0].style.borderColor = '#fff');
(lastEl = el).classList.add('active');
var clr = item.hsv.slice();
clr[2]*=2;
lastEl.childNodes[0].style.borderColor = 'rgb('+hsvToRgb.apply(null,clr)+')';
[].slice.call(document.querySelectorAll('.other')).forEach(function(el) {
el.classList.remove('other');
});
[].slice.call(document.querySelectorAll('[data-id="'+item.pid+'"]')).forEach(function(el) {
el.classList.add('other');
});
var desc;
updateRight(
D.div({cls: 'title'}, item.title),
D.h('img', {cls: 'preview-img', src: item.img}),
D.div({cls: 'preview-color', style: {background: item.color}}),
D.div({cls: 'info'}, 'Product ID: '+ item.pid),
D.div({cls: 'info'}, 'Variant ID: '+ item.vid),
D.div({cls: 'info'}, 'SKU ID: '+ item.sku),
D.div({cls: 'info'}, 'Color name: '+ item.colorName),
D.div({cls: 'info'}, 'Color: '+ item.color),
desc = D.div({cls: 'description'})
);
desc.innerHTML = item.description;
}, updateRight;
D.div({cls: 'viewport', renderTo: document.body},
D.div({cls: 'left'},
list.map(function(name) {
return D.div({cls: 'block'},
D.div({cls: 'title'}, name[0].toUpperCase()+name.substr(1)),
(draw)=>{
getData(name, function(res) {
var list = [];
res.products.forEach(function(product) {
product.variants.forEach(function(variant) {
var color = variant.option2.substr(1),
r = parseInt(color[0]+color[1], 16),
g = parseInt(color[2]+color[3], 16),
b = parseInt(color[4]+color[4], 16);
list.push({
pid: product.id,
vid: variant.id,
description: product.body_html,
title: product.title,
color: variant.option2,
colorName: variant.option1,
img: variant.featured_image && variant.featured_image.src || (product.images[0] || {}).src,
sku: variant.option3,
hsv: rgbToHsv(r,g,b)
});
});
});
list.sort(function(a,b) {
return (a.hsv[0]-b.hsv[0])*10+(b.hsv[2]-a.hsv[2])/2+(a.hsv[1]-b.hsv[1])/2;
});
draw(list.map(function(item) {
return D.div({attr: {'data-id': item.pid}, cls: 'row', onClick: function(){preview(item, this)}},
D.div({cls: 'cp', style: {background: item.color}})
)
}))
});
}
)
})
),
D.div({cls: 'right'},
function(_) {
updateRight = _;
}
)
);
setTimeout(function() {
document.querySelector('.row').click();
}, 300);
</script>
</body>
</html>
\ No newline at end of file
examples/examples-browser/views/demo.html
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<script src="js/kmean.js"></script> <script src="js/kmean.js"></script>
<script src="js/facemarks.js"></script> <script src="js/facemarks.js"></script>
<script src="js/extract-colors.js"></script> <script src="js/extract-colors.js"></script>
<script src="js/data.js"></script>
<style> <style>
.color-preview { .color-preview {
display: inline-block; display: inline-block;
...@@ -21,7 +22,68 @@ ...@@ -21,7 +22,68 @@
margin: 2px; margin: 2px;
text-shadow: #fff 0 0 6px; text-shadow: #fff 0 0 6px;
} }
.cp {
width:16px;
height: 16px;
border: 2px solid #fff;
transition: all 0.3s ease;
position: relative;
}
.row {
height: 32px;
}
.cp2 {
width: 10px;
height: 100%;
display: inline-block;
}
.cp1 {
width: 16px;
height: 100%;
padding: 0 2px;
display: inline-block;
margin-right: 2px;
}
.preview-img {
height: 32px;
margin: 0 8px;
}
.name {
display: inline-block;
font-family: Verdana;
font-size: 14px;
vertical-align: super;
}
.action {
padding: 1px 2px;
border-bottom: 1px dashed #006ed1;
color: #006ed1;
cursor: pointer;
}
.collapsed {
display: none;
}
.collapsed {
margin: 8px 0;
}
.matched.opened .collapsed {
display: block;
}
.matched {
padding: 8px 0;
}
.accuracy {
display: inline-block;
font-size: 12px;
color: #999;
font-family: monospace;
vertical-align: super;
margin: 0 16px;
}
</style> </style>
<script src="js/DOM.js"></script>
</head> </head>
<body> <body>
...@@ -84,8 +146,10 @@ window.s0 = 224; ...@@ -84,8 +146,10 @@ window.s0 = 224;
img.onload = function() { img.onload = function() {
//ctx.drawImage(img, 0, 0); //ctx.drawImage(img, 0, 0);
f();
}; };
img.src = url; img.src = url;
} }
...@@ -302,24 +366,25 @@ var videoEl = inputVideo; ...@@ -302,24 +366,25 @@ var videoEl = inputVideo;
extracting = -1; extracting = -1;
document.getElementById('colors').innerHTML = [ updateColors([
block( block(
'Lips', 'Lips',
extractor(ctx2, lips, 5) extractor('lips',ctx2, lips, 5)
), ),
block( block(
'Blush', 'Blush',
extractor(ctx2, cheek, 3) extractor('blush', ctx2, cheek, 3)
), ),
block( block(
'Brows', 'Brows',
extractor(ctx2, browsSearchArea, 2) extractor('brows', ctx2, browsSearchArea, 2)
), ),
block( block(
'Eyes', 'Eyes',
extractor(ctx2, eyes, 6, 1) extractor('eyes', ctx2, eyes, 6, 1)
) )
].join('\n'); ]);
...@@ -330,17 +395,25 @@ var videoEl = inputVideo; ...@@ -330,17 +395,25 @@ var videoEl = inputVideo;
//colors.innerHTML = block('Mouth',colors()); //colors.innerHTML = block('Mouth',colors());
}else{
return setTimeout(f, 300)
} }
//requestAnimationFrame(f); if(cb.checked)
setTimeout(f, 300) setTimeout(f, 300)
}; };
var extracting = 0; var extracting = 0;
var block = function(title, extracted) { var block = function(title, extracted) {
return '<div class="block"><h2>'+ title +'</h2><p>'+extracted.map(a=>a.html).join('\n')+'</p></div>' return D.div({cls: 'block'},
D.h('h2', {}, title),
D.h('p', {}, extracted)
);
}; };
var updateColors;
D.div({renderTo: document.getElementById('colors')}, function(_){updateColors = _});
var f0 = async function() { var f0 = async function() {
try{ try{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment