From dd430d4686ebc7303766dcb29a8984c8bb45aaf4 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Fri, 4 Nov 2016 11:25:07 +0100 Subject: [PATCH] =?UTF-8?q?Ajout=20de=20[HaarFace]=20+=20fixme=20=C3=A0=20?= =?UTF-8?q?terminer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .htaccess | 4 +- public_html/index.php | 28 +++---- public_html/js/action-script.js | 13 ++- public_html/js/lib/min/reactive-filter.js | 34 ++++---- public_html/js/lib/reactive-filter.js | 99 +++++++++++++++++++++++ public_html/js/min/action-script.js | 13 +-- 6 files changed, 153 insertions(+), 38 deletions(-) diff --git a/.htaccess b/.htaccess index 31586d9..c9389ba 100644 --- a/.htaccess +++ b/.htaccess @@ -1,2 +1,2 @@ -RewriteEngine on -RewriteRule ^(.*)$ public_html/$1 [QSA,L] +#RewriteEngine on +#RewriteRule ^(.*)$ public_html/$1 [QSA,L] diff --git a/public_html/index.php b/public_html/index.php index 32cece7..207bb01 100644 --- a/public_html/index.php +++ b/public_html/index.php @@ -23,20 +23,20 @@ - - + + - - - - - - + + + + + + - + @@ -46,10 +46,10 @@ - - - - + + + + @@ -61,7 +61,7 @@
- + diff --git a/public_html/js/action-script.js b/public_html/js/action-script.js index 8e5e769..0ed8bb3 100644 --- a/public_html/js/action-script.js +++ b/public_html/js/action-script.js @@ -193,6 +193,9 @@ ControllerRememberer.fetch(function(loaded_data){ /* (5) Canny Filter */ filterManager.get('canny').apply(); + + /* (6) Haar Face Detection */ + filterManager.get('haar_face').apply(); } @@ -227,7 +230,6 @@ ControllerRememberer.fetch(function(loaded_data){ } - { /* [5] Filtrage post-processing =========================================================*/ @@ -250,6 +252,7 @@ ControllerRememberer.fetch(function(loaded_data){ filterManager.add('sobel', reactiveSobel); filterManager.add('gaussian', reactiveGaussianBlur); filterManager.add('canny', reactiveCanny); + filterManager.add('haar_face', reactiveHaarFace); /* (3) Gestion des backups */ Controller.remember(filterManager.get('resolution')); @@ -258,11 +261,19 @@ ControllerRememberer.fetch(function(loaded_data){ Controller.remember(filterManager.get('sobel')); Controller.remember(filterManager.get('canny')); Controller.remember(filterManager.get('gaussian')); + Controller.remember(filterManager.get('haar_face')); /* (4) On attache tout à dat.GUI */ Controller.addFolder('Tracking.js'); Controller.add(track, 'trackFace'); Controller.add(track, 'trackFeatures'); + Controller.addFolder('Haar Face Detection'); + Controller.add(filterManager.get('haar_face'), 'active'); + Controller.add(filterManager.get('haar_face'), 'min_scale', 1, 4).step(0.1); + Controller.add(filterManager.get('haar_face'), 'scale_factor', 1.1, 2).step(0.025); + Controller.add(filterManager.get('haar_face'), 'equalize_histogram'); + Controller.add(filterManager.get('haar_face'), 'use_canny'); + Controller.add(filterManager.get('haar_face'), 'edges_density', 0.01, 1.0).step(0.005); Controller.addFolder('Image Resolution'); Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1); Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1); diff --git a/public_html/js/lib/min/reactive-filter.js b/public_html/js/lib/min/reactive-filter.js index 02398ee..ad19d8a 100644 --- a/public_html/js/lib/min/reactive-filter.js +++ b/public_html/js/lib/min/reactive-filter.js @@ -1,16 +1,20 @@ -var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var e in this._attr)this.__defineGetter__(e,function(a){return this._attr[a]}.bind(this,e)),this.__defineSetter__(e,function(a,b){return function(c){a._attr[b]=c;a._manager.process()}}(this,e));this.apply=function(){}},ReactiveFilterManager=function(a,e,d){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (), but "+ -a.constructor.name+" received");this._canvas=e instanceof HTMLCanvasElement?e:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (), but "+e.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=d instanceof Function?d:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+d.constructor.name+" received");this._filter={}}; -ReactiveFilterManager.prototype.add=function(a,e){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");e=e instanceof ReactiveFilter?e:null;if(!e)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+e.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=e;e._manager=this}; +var ReactiveFilter=function(a){this._manager={_process:function(){}};this._attr=a instanceof Object?a:{};for(var d in this._attr)this.__defineGetter__(d,function(a){return this._attr[a]}.bind(this,d)),this.__defineSetter__(d,function(a,b){return function(c){a._attr[b]=c;a._manager.process()}}(this,d));this.apply=function(){}},ReactiveFilterManager=function(a,d,e){this._target=a instanceof HTMLImageElement?a:null;if(!this._target)throw Error("Param 1 expected to be an HTMLImageElement (), but "+ +a.constructor.name+" received");this._canvas=d instanceof HTMLCanvasElement?d:null;if(!this._canvas)throw Error("Param 2 expected to be an HTMLCanvasElement (), but "+d.constructor.name+" received");this._context=this._canvas.getContext("2d");this._process=e instanceof Function?e:null;if(!this._process)throw Error("Param 3 expected to be a Function, but "+e.constructor.name+" received");this._filter={}}; +ReactiveFilterManager.prototype.add=function(a,d){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");d=d instanceof ReactiveFilter?d:null;if(!d)throw Error("Param 2 expected to be a `ReactiveFilter`, but "+d.constructor.name+" received");if(null!=this._filter[a])return!0;this._filter[a]=d;d._manager=this}; ReactiveFilterManager.prototype.get=function(a){a="string"===typeof a?a:null;if(!a)throw Error("Param 1 expected to be a `string`, but "+a.constructor.name+" received");return null!=this._filter[a]?this._filter[a]:!1};ReactiveFilterManager.prototype.process=function(){this._process.bind(this._target)()}; -ConvolutionFilter=function(a,e,d,b){var c,f,g,h,q=parseInt(b.length/2),p=parseInt(b[0].length/2),l=d.slice(0),k,n,m,r,t,u;for(n=q;n=127+b&&(d[c]=255),d[c]<=127-b&&(d[c]=0));e.putImageData(a,0,0)}};var reactiveGrayscale=new ReactiveFilter({grayscale:!1}); -reactiveGrayscale.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.grayscale){for(var a=this._manager._canvas,e=this._manager._context,a=e.getImageData(0,0,a.width,a.height),d=a.data,b=this.contrast;1>31)-(g>>31)|0,agy=(h^h>>31)-(h>>31)|0,0agy?(m=k[a+p],r=k[a+p+-l],g=k[a-p],h=k[a-p+l],m=(agx-agy)*m+agy*r,g=(agx-agy)*g+agy*h,h=k[a]*agx,n[a]=h>=m&&h>g?agx&255:0):(m=k[a+-l],r=k[a+p+-l],g=k[a+l],h=k[a-p+l],m=(agy-agx)*m+agx*r,g=(agy-agx)*g+agx*h,h= -k[a]*agy,n[a]=h>=m&&h>g?agy&255:0);data_u32=new Uint32Array(d.data.buffer);for(a=b.cols*b.rows;0<=--a;)data_u32[a]=-16777216|n[a]<<16|n[a]<<8|n[a];e.putImageData(d,0,0)}};var reactiveGaussianBlur=new ReactiveFilter({active:!1,sigma:0,radius:3}); -reactiveGaussianBlur.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height);new Uint32Array(d.buffer);var b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(d.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,this.sigma);a=new Uint32Array(d.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c],a[c]=-16777216|f<<16|f<< -8|f;e.putImageData(d,0,0)}};var reactiveCanny=new ReactiveFilter({active:!1,low_threshold:1,high_threshold:1,radius:3}); -reactiveCanny.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,e=this._manager._context,d=e.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(d.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,0);jsfeat.imgproc.canny(b,b,this.low_threshold|0,this.high_threshold|0);a=new Uint32Array(d.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c], -a[c]=-16777216|f<<16|f<<8|f;e.putImageData(d,0,0)}}; +ConvolutionFilter=function(a,d,e,b){var c,f,g,k,r=parseInt(b.length/2),q=parseInt(b[0].length/2),m=e.slice(0),l,p,n,t,u,v;for(p=r;p=127+b&&(e[c]=255),e[c]<=127-b&&(e[c]=0));d.putImageData(a,0,0)}};var reactiveGrayscale=new ReactiveFilter({grayscale:!1}); +reactiveGrayscale.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.grayscale){for(var a=this._manager._canvas,d=this._manager._context,a=d.getImageData(0,0,a.width,a.height),e=a.data,b=this.contrast;1>31)-(g>>31)|0,agy=(k^k>>31)-(k>>31)|0,0agy?(n=l[a+q],t=l[a+q+-m],g=l[a-q],k=l[a-q+m],n=(agx-agy)*n+agy*t,g=(agx-agy)*g+agy*k,k=l[a]*agx,p[a]=k>=n&&k>g?agx&255:0):(n=l[a+-m],t=l[a+q+-m],g=l[a+m],k=l[a-q+m],n=(agy-agx)*n+agx*t,g=(agy-agx)*g+agx*k,k= +l[a]*agy,p[a]=k>=n&&k>g?agy&255:0);data_u32=new Uint32Array(e.data.buffer);for(a=b.cols*b.rows;0<=--a;)data_u32[a]=-16777216|p[a]<<16|p[a]<<8|p[a];d.putImageData(e,0,0)}};var reactiveGaussianBlur=new ReactiveFilter({active:!1,sigma:0,radius:3}); +reactiveGaussianBlur.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,a.width,a.height);new Uint32Array(e.buffer);var b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(e.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,this.sigma);a=new Uint32Array(e.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c],a[c]=-16777216|f<<16|f<< +8|f;d.putImageData(e,0,0)}};var reactiveCanny=new ReactiveFilter({active:!1,low_threshold:1,high_threshold:1,radius:3}); +reactiveCanny.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c,f;jsfeat.imgproc.grayscale(e.data,a.width,a.height,b);jsfeat.imgproc.gaussian_blur(b,b,(this.radius|0)+1<<1,0);jsfeat.imgproc.canny(b,b,this.low_threshold|0,this.high_threshold|0);a=new Uint32Array(e.data.buffer);c=b.cols*b.rows;for(pix=0;0<=--c;)f=b.data[c], +a[c]=-16777216|f<<16|f<<8|f;d.putImageData(e,0,0)}};var reactiveHaarFace=new ReactiveFilter({active:!1,equalize_histogram:!0,use_canny:!1,edges_density:.13,scale_factor:1.15,min_scale:2}); +reactiveHaarFace.apply=function(){if(this._manager instanceof ReactiveFilterManager&&this.active){var a=this._manager._canvas,d=this._manager._context,e=d.getImageData(0,0,a.width,a.height),b=new jsfeat.matrix_t(a.width,a.height,jsfeat.U8C1_t),c=new function(){var c=Math.min(160/a.width,160/a.height),b=a.width*c|0;h=a.height*c|0;this.timg_u8=new jsfeat.matrix_t(b,h,jsfeat.U8_t|jsfeat.C1_t);this.edg=new jsfeat.matrix_t(b,h,jsfeat.U8_t|jsfeat.C1_t);this.canvas=document.createElement("canvas");this.canvas.width= +b;this.canvas.height=h;this.context=this.canvas.getContext("2d");this.sum=new Int32Array((b+1)*(h+1));this.sqsum=new Int32Array((b+1)*(h+1));this.tilted=new Int32Array((b+1)*(h+1));this.canny=new Int32Array((b+1)*(h+1));this.classifier=jsfeat.haar.frontalface},f;jsfeat.imgproc.grayscale(e.data,a.width,a.height,b);this.equalize_histogram&&jsfeat.imgproc.equalize_histogram(b,b);jsfeat.imgproc.compute_integral_image(b,c.sum,c.sqsum,c.classifier.tilted?c.tilted:null);this.use_canny&&(jsfeat.imgproc.canny(b, +c.edg,10,50),jsfeat.imgproc.compute_integral_image(c.edg,c.canny,null,null));jsfeat.haar.edges_density=this.edges_density;console.time("[Haar] detect_single_scale");c=jsfeat.haar.detect_single_scale(c.sum,c.sqsum,c.tilted,this.use_canny?c.canny:null,b.cols,b.rows,c.classifier,this.scale_factor,this.min_scale);console.warn(c);console.timeEnd("[Haar] detect_single_scale");c=jsfeat.haar.group_rectangles(c,1);console.log("zones",c.length);f=c.length;b=a.width/b.cols;f&&jsfeat.math.qsort(c,0,f-1,function(a, +b){return b.confidence draw it */ + if( zones.length > 0 ) + o.context.strokeRect( + (zones[0].x*sc) | 0, + (zones[0].y*sc) | 0, + (zones[0].width*sc) | 0, + (zones[0].height*sc) | 0 + ); + + + /* (2) Copie le résultat sur le `` */ + o.context.putImageData(imageData, 0, 0); + +}; diff --git a/public_html/js/min/action-script.js b/public_html/js/min/action-script.js index c534dc5..8fd1299 100644 --- a/public_html/js/min/action-script.js +++ b/public_html/js/min/action-script.js @@ -2,9 +2,10 @@ var DOM={body:$("body"),canvas:$("canvas"),imageLoader:$("#image-loader")},_CAN= ControllerRememberer.fetch(function(f){log("Preset loaded.","[PermanentStorage]");Controller=new dat.GUI({load:JSON.parse(f),preset:"default"});init=function(){last=this.src="front/male/1.jpg";initialized=!0;Controller.addFolder("Source Picture");Controller.remember(this);Controller.add(this,"src",this._images).listen()};zones.feature=[];zones.face=[];track={trackFeatures:function(){zones.feature=[];featureTrackerTask=tracking.track(_CAN,featureTracker)},trackFace:function(){zones.face=[];faceTrackerTask= tracking.track(_CAN,faceTracker)}};faceTracker=new tracking.ObjectTracker(["face"]);featureTracker=new tracking.ObjectTracker(["eye","mouth"]);faceTracker.setInitialScale(1);featureTracker.setInitialScale(1);faceTracker.setStepSize(1.2);featureTracker.setStepSize(1.2);faceTracker.setEdgesDensity(.1);featureTracker.setEdgesDensity(.1);trackerCallback=function(a,c){zones[a].length=0;c.data.forEach(function(b){zones[a].push({x:b.x/_CAN.width,y:b.y/_CAN.height,w:b.width/_CAN.width,h:b.height/_CAN.height})}); 0