快捷搜索:

您的位置:环球彩票登陆 > 技术文章 > 三分钟训练眼球追踪术,AI就知道你在盯着哪个妹

三分钟训练眼球追踪术,AI就知道你在盯着哪个妹

发布时间:2019-09-19 06:54编辑:技术文章浏览(148)

    8font-size: 24pt;

    效果预览地址 ps教程/">

    084             'filter':'alpha(opacity=50)', 

    21eyesRect[ 0] * resizeFactorX, eyesRect[ 1] * resizeFactorY,

    提示插件鼠标移上圆角框图片提示代码,他可以很好详细说明这张图片的作用与用途哦,并且还可以是图片文本混合说明。...

    103     /*关闭*/

    8

    文章是一款jquery 提示插件鼠标移上圆角框图片提示代码,他可以很好详细说明这张图片的作用与用途哦,并且还可以是图片文本混合说明。

    109     } 

    环球彩票登陆 1

    源码下载地址

    035     tpl2.grab(span2); 

    1function getEyesRectangle(positions) {

    文章是一款jquery 提示插件鼠标移上圆角框图片提示代码,他可以很好详细说明这张图片的作用与用途哦,并且还可以是图片文本混合说明。

    118         bt = sizeWin.y - config.height; if(top > bt){top = bt;}/*下*/

    3return;

    <!doctype html public "-//w3c//dtd html 4.01//en" ";
    <html>
    <head>
     <meta http-equiv="content-type" content="text/html;charset=gb2312"/>
     <title>jquery 提示插件鼠标移上圆角框图片提示</title>
     <script type="text/网页特效" src="js/jquery-1.4.1.min.js"></script>


     <script type="text/javascript">

     // load this script once the document is ready
     $(document).ready(function () {
      
      // get all the thumbnail
      $('div.thumbnail-item').mouseenter(function(e) {

       // calculate the position of the image tooltip
       x = e.pagex - $(this).offset().left;
       y = e.pagey - $(this).offset().top;

       // set the z-index of the current item,
       // make sure it's greater than the rest of thumbnail items
       // set the position and display the image tooltip
       $(this).css教程('z-index','15')
       .children("div.tooltip")
       .css({'top': y 10,'left': x 20,'display':'block'});
       
      }).mousemove(function(e) {
       
       // calculate the position of the image tooltip   
       x = e.pagex - $(this).offset().left;
       y = e.pagey - $(this).offset().top;
       
       // this line causes the tooltip will follow the mouse pointer
       $(this).children("div.tooltip").css({'top': y 10,'left': x 20});
       
      }).mouseleave(function() {
       
       // reset the z-index and hide the image tooltip
       $(this).css('z-index','1')
       .children("div.tooltip")
       .animate({"opacity": "hide"}, "fast");
      });

     });


     </script>
     <style>

    .thumbnail-item {
     /* position relative so that we can use position absolute for the tooltip */
     position: relative;
     float: left; 
     margin: 0px 5px;
    }

    .thumbnail-item a {
     display: block;
    }

    .thumbnail-item img.thumbnail {
     border:3px solid #ccc; 
    }
      
    .tooltip {
     /* by default, hide it */
     display: none;
     /* allow us to move the tooltip */
     position: absolute;
     /* align the image properly */
     padding: 8px 0 0 8px;
    }

     .tooltip span.overlay {
      /* the png image, need ie6 hack though */
      background: url(images/overlay.png) no-repeat;
      /* put this overlay on the top of the tooltip image */
      position: absolute;
      top: 0px;
      left: 0px;
      display: block;
      width: 350px;
      height: 200px;
     }
     </style>
    </head>
    <body>
       
       
       
     <div class="thumbnail-item">
      <a href="#"><img src="images/small1.jpg" class="thumbnail"/></a>
      <div class="tooltip">
       <img src="images/big1.jpg" alt="" width="330" height="185" />
       <span class="overlay"></span>
      </div>
     </div>
         
     <div class="thumbnail-item">
      <a href="#"><img src="images/small2.jpg" class="thumbnail"/></a>
      <div class="tooltip">
       <img src="images/big2.jpg" alt="" width="330" height="185" />
       <span class="overlay"></span>
      </div>
     </div>
     
     <div class="thumbnail-item">
      <a href="#"><img src="images/small3.jpg" class="thumbnail"/></a>
      <div class="tooltip">
       <img src="images/big3.jpg" alt="" width="330" height="185" />
       <span class="overlay"></span>
      </div>
     </div>   
       
     <div class="clear"></div>

      
    </body>
    </html>

    要求:jquery版本=1.2.6,mootools用最新版本 先看截图啊: 在firefox、chrome、高版本ie下:有...

    28// Concatenate it to existing tensors

    072         }else if(config.ctype == 'url'){/*ajax请求*/

    5< src= ";

     

    3#webcam, #overlay {

    017     var isIe6 = $.browser.msie && ($.browser.version == "6.0"); 

    1let currentModel;

    039             var left = ($(window).scrollLeft() $(window).width()/2

    8</body>

    110     /*拖拽*/

    14model.add(tf.layers.maxPooling2d({

    097             'z-index':'60', 

    中间,加了一个dropout作为正则化器;还有,用flatten把2D数据降成1D。训练用的是Adam优化器。

    5 .popbox #popboxtoptitle{ float:left; color:#15428b; text-indent:0.5em;} 

    29// Use ADAM optimizer withlearning rate of 0.0005andMSE loss

    006         title : '标题', 

    DIY全攻略 (上) :架子搭起来

    096             'left':'0px', 

    15// Crop the eyes fromthe video andpaste them inthe eyes canvas:

    089         tmpMask = new Element('div',{id:'maskLayer'}); 

    原标题:三分钟训练眼球追踪术,AI就知道你在盯着哪个妹子 | TensorFlow.js代码

    6 .popbox #popboxtopclose{ float:right; font-weight:bold; color:#84a0c4; padding-right:0.5em; cursor:pointer;} 

    6< src= "clmtrackr.js"></>

    083             'background-color':color, 

    5position: absolute;

    004     /*默认*/

    7kernelSize: 5,

    085             'opacity':'0.5'

    上文提到的clmtrackr.js人脸追踪器,这里就出场。

    061             var left = (sizeScr.x sizeWin.x/2 - (config.width/2)) 'px'; 

    接下来,要把矩形框提取出来。具体方法是,在第一张画布上把它描成红色,再复制到第二张画布上。

    123     }; 

    相比之下,对于上下移动的目光,AI的反应似乎没有那么敏锐。大概是因为,电脑屏幕上下距离不够宽,眼球转动不充分吧。

    047     /*调整位置*/

    128         mouse.y = e.client.y; 

    来自慕尼黑的程序猿Max Schumacher,就用TensorFlow.js做了一个模型,你看向屏幕的某一点,它就知道你在看的是哪一点了。

    • (config.height/2)) 'px'; 

    环球彩票登陆 2

    019     var config = Object.merge(defaults, opt); 

    从前,我们几乎无从躲避来自身后的目光,但现在不一定了。

    054         if(config.pos == 'center'){/*居中*/

    9});

    079             'position':'absolute', 

    19eyesCC.drawImage(

    114         var top = parseInt($$('.popbox').getStyle('top')) (e.client.y - mouse.y); 

    35

     

    这一步,是要在眼睛周围画个矩形框

    066             $('#popboxcontent').html(config.content); 

    7}

    024         maskLayer(); 

    3n: 0,

    029     }; 

    1<video id= "webcam"width= "400"height= "300"autoplay></video>

    015         url : ''

    环球彩票登陆 3

    119         rt = sizeWin.x - config.width; if(left > rt){left = rt;}/*右*/

    爱上你的代码,爱做 “改变世界”的行动派!

    mootools版本

    1<canvas id= "eyes"width= "50"height= "25"></canvas>

    075                 url:config.url, 

    这里需要一个绘图工具。用html里面的<canvas>标签,在视频上面重叠一张画布

    099             'filter':'alpha(opacity=50)', 

    这个网络里,要有一个卷积层,一个最大池化,还要有个密集层,带两个输出值 (坐标) 的那种。

    071         if(!color){color='#e7e527';} 

    作为一个不需要任何服务器就能训练的模型,如果要处理整幅整幅的视频截图,负担可能有些重。

    014         fix : true, 

    5top: 50%;

    135 } 

    4y: 0,

    129         $(window).addEvent('mousemove',moveDialog); 

    10

    038         if(config.pos == 'center'){/*居中*/

    最后,把空格键关联进来:

    051     /*填充内容*/

    环球彩票登陆 4

    088         var tmpMask=new String; 

    4}

    009         width : 300, 

    啊,老板的眼神飞过来了,还不快切回工作界面?

    样式:css

    7transform: translate( -50%, -50%);

    124     $('popboxtop').addEvent('mousedown',function(event){ 

    那么,先把它下下来:

    122         mouse.y = e.client.y; 

    1<button id= "train">Train!</button>

    021     var tpl = '<div class="popbox"><div id="popboxtop"><span id="popboxtopclose">×</span><span id="popboxtoptitle"></span><div style="clear:both;"></div></div><div id="popboxcontent"></div></div>'; 

    25subset.x = tf.keep(image);

    先看截图啊:

    35returnmodel;

    093             'height':sizeScrollSize.y 'px', 

    责任编辑:

    043         content();/*填充内容*/

    33});

    • (config.width/2)) 'px'; 

    环球彩票登陆 5

    114         mouse.x = e.clientX; 

    39}

    122 } 

    注意注意,虽然把所有数据做成一个大训练集也是可以的,但还是留一部分做验证集比较科学,比如20%。

    2   

    写好这几行,它应该已经能看出你的脸。不相信的话,就让它描出来

    036     tpl1.grab(tpl2); 

    7transform: translate( -50%, -50%);

    089     function closed(){ 

    7overlayCC.strokeStyle = 'red';

    在firefox、chrome、高版本ie下:有阴影、圆角效果

    12}));

    024     /*模板*/

    2if(currentModel == null) {

    010         height : 200, 

    1$(document).ready(function() {

    068     } 

    15epochs: 20,

    087     }; 

    8width: 40px;

    082             $('popboxcontent').innerHTML = config.content; 

    眼球追踪模型很有意思,不过还是有一些可爱的缺陷。

    121     /*结束*/

    摄像头拍到的画面就显示在屏幕左上角,脸上是绿色的轮廓,眼睛被一个红色方框框住。

    016     }; 

    2<style>

    092             setTimeout("$('.popbox').fadeOut(500)",0); 

    这个模型叫Lookie Lookie,不用服务器,打开摄像头就可以在浏览器上训练,不出三分钟就能养成一只小AI。

    030     popout(); 

    5top: 0;

    097     /*拖拽*/

    13currentModel.fit(dataset.train.x, dataset.train.y, {

    134     /*结束*/

    28

    069         $('popboxtoptitle').innerHTML = config.title; 

    环球彩票登陆 6

    058             $.ajax({ 

    15// Move target there:

    4 .popbox #popboxtop{ height:24px; line-height:24px; font-size:14px; font-weight:bold; cursor:move; overflow:hidden;} 

    13

    005     var defaults = { 

    31

    091             setTimeout("$('#maskLayer').fadeOut(500)",0); 

    训练模型

    010         height : 200, 

    还有JS:

    002 <script type="text/javascript"> 

    10},

    120     }); 

    8}

    026     var tpl1 = new Element('div',{class:'popbox'}); 

    9// Convert normalized position back to screen position:

    080             'top':'0px', 

    8font-size: 24pt;

    086     function maskLayer(color){ 

    4background-color: lightgreen;

    032     function position(){ 

    9}

    032         /*填充内容,结构*/

    眼睛截下来

    8 .popbox #popboxcontent{ margin:0 5px 5px 5px; background:#fff; border:1px solid #84a0c4; border-radius:3px; overflow:auto;} 

    2// On space key:

    012         drag : true, 

    现在,在onStreaming() 的ctrack.starg() 后面,调用trackingLoop() 。每一帧里,它都会重新运行。

    107             $$('.popbox').destroy(); 

    这样,准备活动就做好了。下面正式开始。

    081             'left':'0px', 

    然后,在页面上做个训练按钮吧:

    057             if(!config.url){$('#popboxcontent').html('请确认url地址');return;} 

    环球彩票登陆 7

    弹窗在ie6下 position:fixed 有问题,不过现在还有多少人用ie6呢?竟添乱,不考虑也罢!

    现在,再拿另外一张画布,来捕捉这个截下来的矩形。这张画布50 x 25像素即可,只要把矩形框的尺寸调一下,就能放进去:

    090         $(document.body).grab(tmpMask,'top'); 

    环球彩票登陆 8

    037     tpl1.grab(tpl3); 

    先在const video=…下面,初始化追踪器:

    038     /*弹出*/

    10const targetWidth = $( '#target').outerWidth();

    093             setTimeout("$('#maskLayer').remove()",500); 

    18

    012         drag : true, 

    8navigator.mediaDevices.getUserMedia({ video: true }).then(onStreaming);

    044         }else{/*默认居中*/

    3#eyes {

    116         if(top < 1){top = 0;}/*上*/

    5video.srcObject = stream;

    7 .popbox #popboxtopclose:hover{ color:#15428b;} 

    11if(currentPosition) {

    103         if(top < 1){top = 0;}/*上*/

    6const image = getImage();

    060         }else{/*默认居中*/

    11},

    077                 method : 'post', 

    3function createModel() {

    027     var tpl2 = new Element('div',{id:'popboxtop'}); 

    浏览器每做一次渲染,我们就要在画布上画点什么了。画之前,要先把之前画过的内容擦掉。

    3 .popbox{ position:absolute; width:300px; border:1px solid #84a0c4; background:#d3e2f5; border-radius:3px; box-shadow:0 0 6px #333; z-index:61;} 

    6requestAnimationFrame(trackingLoop);

    029     var tplclear = new Element('div',{styles:{clear:'both'}}); 

    12

    020     /*尺寸*/

    3if(event.keyCode == 32) {

    022     /*弹出*/

    10return[minX, minY, width, height];

    065         $('popboxcontent').setStyles({height:(config.height-31) 'px'}); 

    5top: 0;

    049         if(isIe6) { 

    12const resizeFactorX = video.videoWidth / video.width;

    9 </style>

    23if(subset.x == null) {

    112     function moveDialog(event){ 

    106             $('maskLayer').destroy(); 

    9x: null,

    053         $('#popboxtoptitle').html(config.title); 

    20}

    • (config.height/2)) 'px'; 

    18

    049         $('#popboxcontent').css({height:(config.height-31) 'px'}); 

    5

    028     var tpl3 = new Element('div',{id:'popboxcontent'}); 

    086         }); 

    鼻孔眼睛分不清?

    007         content : '内容', 

    比如,有时候会把鼻孔识别成眼睛。

    069     /*遮罩层*/

    8const height = maxY - minY;

    077             'width':'100%', 

    10y: null,

    123 </script>

    1<button id= "train">Train!</button>

    087         if(!color){color='#e7e527';} 

    3<body>

    008         ctype : 'common', 

    36}

    113         var e = window.event || event; 

    然后,矩形框应该足够覆盖重要面部信息了 (不离太远、不倒立) 。

    051         }else{ 

    6}

    014         fix : true, 

    1if(currentPosition) {

    126         var e = new Event(event); 

    15poolSize: [ 2, 2],

    059                 url:config.url, 

    替换trackingLoop()里面的if块:

    042         }else if(config.pos == 'rightdown'){/*右下*/

    2train: {

    057             $$('.popbox').setStyles({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height}); 

    4batchSize = 4;

    4   

    那好,再取个二三十张图,训练第二波。

    016     }; 

    1<!doctype html>

    063                 error : function(){$('#popboxcontent').html('加载失败:(');} 

    9mouse.y = (event.clientY / $(window).height()) * 2- 1;

    018     /*合并选项*/

    6model.add(tf.layers.conv2d({

    091         $('maskLayer').setStyles({ 

    10}

    070     function maskLayer(color){ 

    24model.add(tf.layers.dense({

    008         ctype : 'common', 

    第一波,只要按20次空格,系统就提示,可以点击训练按钮了。

    013         pos : 'center', 

    比如,算法还只能识别正面,脸稍微侧一点AI就会困惑。

    090         $('#popboxtopclose').bind('click',function(){ 

    8returnbatchedImage.toFloat().div(tf.scalar( 127)).sub(tf.scalar( 1));

    109         mouse.y = e.clientY; 

    至此,只要你按下空格,数据集里就会增加一个数据点了。

    084     } 

    2// Draw facial mask on overlay canvas:

    130     }); 

    2<style>

    040         maskLayer(); 

    5} elseif(batchSize > 64) {

    050             var fix = 'absolute'; 

    9transition: all 0.1s ease;

    104     function closed(){ 

    38});

    022     var sizeScrollSize = $(document.body).getScrollSize(); 

    26subset.y = tf.keep(mousePos);

    052     function content(){ 

    这里要做的是,按下空格键之后的任务:从画布上捕捉图像,储存为张量。

    100             'opacity':'0.5'

    7// Normalize andreturnit:

    011         mask : true, 

    1const ctrack = new clm.tracker();

    019     var config = $.extend(defaults, opt); 

    18$target.css( 'top', y 'px');

    001 <script type="text/javascript" src="jquery-1.2.6.js"></script> 

    12const x = (prediction.get( 0, 0) 1) / 2* ($(window).width() - targetWidth);

    052             var fix = config.fix ? 'fixed' : 'absolute'; 

    教程原文传送门:

    004     /*默认*/

    7val: {

    067     /*填充内容*/

    9if(currentModel == null) {

    044         closed();/*绑定关闭*/

    1<canvas id= "overlay"width= "400"height= "300"></canvas>

    028         closed();/*绑定关闭*/

    17const image = getImage();

    059             $$('.popbox').setStyles({'position':fix,'right':0,'bottom':0,'width':config.width,'height':config.height}); 

    1const dataset = {

    048         } 

    32subset.x = tf.keep(oldX.concat(image, 0));

    023     function popout(){ 

    1const overlay = $( '#overlay')[ 0];

    108         mouse.x = e.clientX; 

    6left: 50%;

    054         if(config.ctype == 'common'){/*文本或html内容*/

    11border: 4px solid rgba( 0, 0, 0, 0.5);

    056         }else if(config.ctype == 'url'){/*ajax请求*/

    2const overlayCC = overlay.getContext( '2d');

    119         $(document).unbind('mousemove', moveDialog); 

    19}

    064             }); 

    21model.add(tf.layers.dropout( 0.2));

    063             $$('.popbox').setStyles({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height}); 

    6border-radius: 50%;

    068     function content(){ 

    训练好之后,屏幕上出现一个绿圈圈。这时候,我的眼睛看哪里,绿圈圈都应该跟着我走的。

    065         }else{/*默认*/

    12ctrack.draw(overlay);

    015         url : ''

    6handleMouseMove: function(event) {

    062             var top = (sizeScr.y sizeWin.y/2 - (config.height/2)) 'px'; 

    12}

    046             var top = ($(window).scrollTop() $(window).height()/2

    10</style> 拉出来遛遛

    074         $("body").prepend(tmpMask); 

    22

    041             $('.popbox').css({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height}); 

    7< src= "main.js"></>

    046     popout(); 

    7const prediction = currentModel.predict(image);

    111     $('#popboxtop').mousedown(function(event){ 

    8</style>

    105         $('popboxtopclose').addEvent('click',function(){ 

    3const maxX = positions[ 28][ 0] 5;

    045     }; 

    14

    045             var left = ($(window).scrollLeft() $(window).width()/2

    到这里,浏览器就该问你“要不要打开摄像头”了。

    033         if(isIe6) { 

    想知道鼠标每时每刻都在什么位置,就给document.onmousemove加上一个EventListener。

    125         if(!config.drag || config.pos=='rightdown'){return;} 

    先写这行代码 (此处默认用的是最新版本的Chrome) :

    001 <script type="text/javascript" src="mootools.js"></script> 

    6right: 0;

    066     }; 

    10</style>

    088     /*关闭*/

    9

    070         if(config.ctype == 'common'){/*文本或html内容*/

    8</style>

    117         if(left < 1){ left = 0;}/*左*/

    这样,便与检测模型的性能,以及确认它没有过拟合

    083         } 

    6const eyesRect = getEyesRectangle(currentPosition);

    042         position();/*调整位置*/

    9});

    067         } 

    4position: absolute;

    1 <style type="text/css"> 

    这个时候,刷新一下浏览器,你的脸上应该有一个绿色又诡异的轮廓了。

    121         mouse.x = e.client.x; 

    现在,应该看得到眼睛周围的红色矩形框了。

    101         var top = parseInt($('.popbox').css('top')) (e.clientY - mouse.y); 

    27} else{

    050     }; 

    1<div id= "target"></div>

    117     }); 

    16const $target = $( '#target');

    017     var isIe6 = Browser.Engine.trident4; 

    6batchSize = 64;

    047             $('.popbox').css({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height}); 

    7

    055             var left = (sizeScr.x sizeWin.x/2 - (config.width/2)) 'px'; 

    5

    056             var top = (sizeScr.y sizeWin.y/2 - (config.height/2)) 'px'; 

    19

    061                 type : 'post', 

    30model.compile({

    064         } 

    7

    102         var left = parseInt($('.popbox').css('left')) (e.clientX - mouse.x); 

    然后,在onStreaming() 里面,加下面这句话,就能让追踪器检测视频里的人脸了:

    5 <input type="button"  value="ajax调用" onclick="mybox({width:400,height:200,ctype:'url',url:'echo.php'})" />

    33subset.y = tf.keep(oldY.concat(mousePos, 0));

    调用方法:

    36// Increase counter

    112         if(!config.drag || config.pos=='rightdown'){return;} 

    4position: absolute;

    113         var e = new Event(event); 

    14

    076             /*'width':$(document).width() 'px',*/

    4function onStreaming(stream) {

    098             'background-color':color, 

    22

    095             'top':'0px', 

    1function fitModel() {

    053         } 

    13const y = (prediction.get( 0, 1) 1) / 2* ($(window).height() - targetHeight);

    018     /*合并选项*/

    14function captureExample() {

    082             'z-index':'60', 

    TensorFlow.js里面有一个和Keras很相似的API可以用。

    081         }else{/*默认*/

    Max也说,还有很多可以探索的空间。

    102     }; 

    3

    043             $('.popbox').css({'position':fix,'right':0,'bottom':0,'width':config.width,'height':config.height}); 

    7returnfalse;

    094             setTimeout("$('.popbox').remove()",500); 

    2let batchSize = Math.floor(dataset.train.n * 0.1);

    073             if(!config.url){$('popboxcontent').innerHTML = '请确认url地址';return;} 

    需要注意的是,收集数据的时候,脸不要离屏幕太远(也不要倒立

    本文由环球彩票登陆发布于技术文章,转载请注明出处:三分钟训练眼球追踪术,AI就知道你在盯着哪个妹

    关键词: 环球彩票登陆 开发 视频 摄像头