唤醒插件鼠标移上圆角框图片唤醒,四分钟演习眼球追踪术新萄京娱乐场手机版:

原标题:两分钟锻练眼球跟踪术,AI就精晓你在瞅着哪些妹子 |
TensorFlow.js代码

小说是风姿洒脱款jquery
提示插件鼠标移上圆角框图片唤醒代码,他能够很好详细表明那张图纸的意义与用场哦,况兼还足以是图片文本混合表明。

友善前车之鉴、发明的JS弹窗,有jquery和mootools多个本子

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;

圆栗子 编写翻译收拾

作品是少年老成款jquery
提示插件鼠标移上圆角框图片唤醒代码,他能够很好详细表明那张图片的效应与用处哦,并且还足以是图表文本混合表达。

供给:jquery版本>=1.2.6,mootools用新型版本

<html xmlns=”;
<head>
    <title>无标题页</title>
    <script type=”text/javascript” src=”JS/jquery-1.3.2.min.js”
></script>
    <script type=”text/javascript”>
       function ShowTip(event,obj,message)
       {
          var xOffset = -10; // x distance from mouse
          var yOffset = 10; // y distance from mouse    
         
          //obj.style.top = (event.clientX + yOffset)+”px”;
          //obj.style.left = (event.clientY + xOffset)+”px”;
          //获取成分width: $(obj).width();
          //获取成分height:$(obj).height()
          
          //获取成分地方:$(obj).position().top和$(obj).offset().top
          
唤醒插件鼠标移上圆角框图片唤醒,四分钟演习眼球追踪术新萄京娱乐场手机版:。          $(‘body’).append( ‘<div
id=”tipmessage”>’+message+'</div>’);
          $(‘div#tipmessage’).css(“top”,
$(obj).position().top+$(obj).height() + “px”).css(“left”,
$(obj).position().left+”px”).fadeIn(“slow”);
       }
       
       function HideTip()
       {
         $(“div#tipmessage”).fadeOut(“slow”).remove();
       }
       
    </script>
    <style type=”text/css”>
      #tipmessage
      {
        display:none;
        z-index:1000;
        border:1px solid #448833;
        position:absolute;
        background:#ffffff;
        max-width:200px;
        max-height:30px;
        padding:5px 10px;
      }
    </style>
</head>
<body>
<a href=”#” onmouseover=”ShowTip(event,this,’aaaaaaaaa’)”
onmouseout=”HideTip()”>Tip</a>
</body>
</html>

新萄京娱乐场手机版 1

<!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>

先看截图啊:

哎呀,老总的眼神飞过来了,还痛楚切回专门的事产业界面?

源码下载地址

在firefox、chrome、高版本ie下:有黑影、圆角意义

之前,大家大概无法躲藏来本身后的秋波,但现行不必然了。

功用预览地址 ps教程/”>

 

设若有个眼珠子追踪AI,加上人脸识别,或者就会在被业主盯上的瞬,步入奋力职业格局。

提示插件鼠标移上圆角框图片唤醒代码,他能够很好详细表明那张图纸的效用与用处哦,并且还是能是图表文本混合表明。…

调用方法:

戏是有一些多。可是眼球追踪那件事,只要有Computer的嵌入录像头,再有个浏览器,真的能够完结。

 

新萄京娱乐场手机版 2

1 <input type=”button”  value=”居中”
onclick=”mybox({title:’老衲’,content:’B你好<br><br><br><br>世界’,width:200,height:100,pos:’center’})”
/> 

根源加拉加斯的次第猿MaxSchumacher,就用TensorFlow.js做了叁个模型,你看向荧屏的某一点,它就理解您在看的是哪一点了。

2   

自己来练习风度翩翩把

3 <input type=”button”  value=”右下角”
onclick=”mybox({width:400,height:200,pos:’rightdown’})” /> 

其一模型叫Lookie
Lookie
,不用服务器,张开摄像头就足以在浏览器上操练,不出四分钟就会养成三只小AI。

4   

在下试了风流罗曼蒂克试。

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

壁画头拍到的镜头就显得在显示屏左上角,脸上是海蓝的轮廓,眼睛被二个革命方框框住。

 

新萄京娱乐场手机版 3

 

收罗数据的诀要超轻易,只要随地活动鼠标,眼睛跟着鼠标走,然后随即按下空格键,每按一遍就征集二个数办事处。

样式:css

第一波,只要按25次空格,系统就提示,能够点击锻炼按键了。

1 <style type=”text/css”> 

教练好之后,荧屏上现身二个绿圈圈。这时,小编的眼眸看哪儿,绿圈圈都应当跟着笔者走的。

2 *{ margin:0; padding:0;} 

新萄京娱乐场手机版 4

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

可它仿佛不怎么踌躇。系统又提醒:今后多少不太够,只怕尚未练习好,再取一些数目吧。

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

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

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

果真,此次绿圈圈跑得自信了一些,左看右看它都驰骋 (相比较) 如风。

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

新萄京娱乐场手机版 5

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

相比,对于上下挪动的目光,AI的反射好似从未那么敏感。差十分少是因为,Computer显示屏上下离开远远不足宽,眼球旋转不充足吧。

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

只是,在教练多少如此相差的前提下,神经网络也算是健壮成长了。

9 </style>

内需潜心的是,采摘数据的时候,脸不用离荧屏太远(也并非倒立) 。

jquery版本代码

DIY全计谋 (上) :架子搭起来

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

作为三个无需其余服务器就能够训练的模子,假设要拍卖整幅整幅的摄像截图,担负也会有个别重。

002 <script type=”text/javascript”> 

新萄京娱乐场手机版 6

003 function mybox(opt){ 

所以,还是先检查测量试验人脸,再框出眼睛所在的片段。只把以此区域
(上海体育场合右大器晚成) 交给神经网络的话,任务就轻便了。

004     /*默认*/

德意志联邦共和国少年选用了clmtrackr人脸检查评定模型,它的优点也是跑起来轻快。

005     var defaults = { 

那正是说,先把它下下来:

006         title : ‘标题’, 

007         content : ‘内容’, 

下一场,张开二个空的html文件,导入jQuery,
TensorFlow.js,clmtrackr.js,以致main.js。代码如下:

008         ctype : ‘common’, 

1<!doctype html>

009         width : 300, 

2<html>

010         height : 200, 

3<body>

011         mask : true, 

4< src= “;

012         drag : true, 

5< src=
“;

013         pos : ‘center’, 

6< src= “clmtrackr.js”></>

014         fix : true, 

7< src= “main.js”></>

015         url : ”

8</body>

016     }; 

9</html>

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

这样,计划运动就办好了。上面正式启幕。

018     /*联合选项*/

导出视频流

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

第一步,要透过你 (客商)
同意,手艺开采录像头,渲染视频流,把镜头显得在页面上。

020     /*模板*/

先写那行代码 (此处默许用的是新型版本的Chrome) :

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>’; 

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

022     /*弹出*/

然后从main.js开始:

023     function popout(){ 

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

024         maskLayer(); 

2const video = $( ‘#webcam’)[ 0];

025         $(“body”).prepend(tpl);/*挂载*/

3

026         position();/*调动岗位*/

4function onStreaming(stream) {

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

5video.srcObject = stream;

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

6}

029     }; 

7

030     popout(); 

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

031     /*调度地方*/

9});

032     function position(){ 

到此处,浏览器就该问你“要不要开采录制头”了。

033         if(isIe6) { 

找到你的脸

034             var fix = ‘absolute’; 

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

035         }else{ 

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

036             var fix = config.fix ? ‘fixed’ : ‘absolute’; 

1const ctrack = new clm.tracker();

037         } 

2ctrack.init();

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

然后,在onStreaming()
里面,加上面那句话,就能够让追踪器检查评定摄像里的人脸了:

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

1ctrack.start(video);

  • (config.width/2))+’px’; 

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

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

此间需求三个制图工具。用html里面包车型客车<canvas>标签,在录制上面痴肥一张画布

  • (config.height/2))+’px’; 

在<video>上边,写上那生机勃勃串代码:

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

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

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

2<style>

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

3#webcam, #overlay {

044         }else{/*暗许居中*/

4position: absolute;

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

5top: 0;

  • (config.width/2))+’px’; 

6left: 0;

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

7}

  • (config.height/2))+’px’; 

8</style>

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

像这种类型,就有了跟录制尺寸同样的画布。CSS能保证画布和录像之处完全切合。

048         } 

浏览器每做贰次渲染,大家即将在画布上画点什么了。画此前,要先把前边画过的内容擦掉。

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

代码长那样,写在ctrack.init() 上边:

050     }; 

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

051     /*填充内容*/

2const overlayCC = overlay.getContext( ‘2d’);

052     function content(){ 

3

053         $(‘#popboxtoptitle’).html(config.title); 

4function trackingLoop() {

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

5// Check ifa face isdetected, andifso, track it.

055             $(‘#popboxcontent’).html(config.content); 

6requestAnimationFrame(trackingLoop);

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

7

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

8let currentPosition = ctrack.getCurrentPosition();

058             $.ajax({ 

9overlayCC.clearRect( 0, 0, 400, 300);

059                 url:config.url, 

10

060                 beforeSend :
function(){$(‘#popboxcontent’).html(‘加载中…’);}, 

11if(currentPosition) {

061                 type : ‘post’, 

12ctrack.draw(overlay);

062                 success :
function(msg){$(‘#popboxcontent’).html(msg);}, 

13}

063                 error :
function(){$(‘#popboxcontent’).html(‘加载失利:(‘);} 

14}

064             }); 

近些日子,在onStreaming() 的ctrack.starg() 前边,调用trackingLoop()
。每生龙活虎帧里,它都会重复运营。

065         }else{/*默认*/

以这个时候,刷新一下浏览器,你的脸膛应该有四个土褐又新奇的差非常少了。

066             $(‘#popboxcontent’).html(config.content); 

新萄京娱乐场手机版 7

067         } 

肉眼截下来

068     } 

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

069     /*遮罩层*/

cmltrackr很善良,除了画个概况之外,还会有70个面部特征,大家可以采纳本身要求的豆蔻梢头部分。

070     function maskLayer(color){ 

新萄京娱乐场手机版 8

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

此地,选23、28、24、26就够了,在每一个方向上,往外伸张5个像素。

072         var tmpMask=new String; 

接下来,矩形框应该丰富覆盖器重面部新闻了 (不离太远、不倒立) 。

073         tmpMask = ‘<div id=”maskLayer”></div>’; 

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

074         $(“body”).prepend(tmpMask); 

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

075         $(‘#maskLayer’).css({ 

2<style>

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

3#eyes {

077             ‘width’:’100%’, 

4position: absolute;

078             ‘height’:$(document).height()+’px’, 

5top: 0;

079             ‘position’:’absolute’, 

6right: 0;

080             ‘top’:’0px’, 

7}

081             ‘left’:’0px’, 

8</style>

082             ‘z-index’:’60’, 

上边那么些函数,会重临 (x,y)
坐标,以至矩形的长度宽度。给它输入的是clmtrackr里面包车型地铁职位阵列 (Position
Array) :

083             ‘background-color’:color, 

1function getEyesRectangle(positions) {

084             ‘filter’:’alpha(opacity=50)’, 

2const minX = positions[ 23][ 0] – 5;

085             ‘opacity’:’0.5′

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

086         }); 

4const minY = positions[ 24][ 1] – 5;

087     }; 

5const maxY = positions[ 26][ 1] + 5;

088     /*关闭*/

6

089     function closed(){ 

7const width = maxX – minX;

090         $(‘#新萄京娱乐场手机版 ,popboxtopclose’).bind(‘click’,function(){ 

8const height = maxY – minY;

091             setTimeout(“$(‘#maskLayer’).fadeOut(500)”,0); 

9

092             setTimeout(“$(‘.popbox’).fadeOut(500)”,0); 

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

093             setTimeout(“$(‘#maskLayer’).remove()”,500); 

11}

094             setTimeout(“$(‘.popbox’).remove()”,500); 

接下去,要把矩形框提抽出来。具体方法是,在率先张画布上把它描成玉米黄,再复制到第二张画布上。

095         }); 

替换trackingLoop()里面的if块:

096     } 

1if(currentPosition) {

097     /*拖拽*/

2// Draw facial mask on overlay canvas:

098     var mouse={x:0,y:0}; 

3ctrack.draw(overlay);

099     function moveDialog(event){ 

4

100         var e = window.event || event; 

5// Get the eyes rectangle anddraw it inred:

101         var top = parseInt($(‘.popbox’).css(‘top’)) + (e.clientY –
mouse.y); 

6const eyesRect = getEyesRectangle(currentPosition);

102         var left = parseInt($(‘.popbox’).css(‘left’)) + (e.clientX –
mouse.x); 

7overlayCC.strokeStyle = ‘red’;

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

8overlayCC.strokeRect(eyesRect[ 0], eyesRect[ 1], eyesRect[ 2],
eyesRect[ 3]);

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

9

105         bt = $(window).height() – config.height; if(top > bt){top
= bt;}/*下*/

10// The video might internally have a different size, so we need these

106         rt = $(window).width() – config.width; if(left > rt){left
= rt;}/*右*/

11// factors to rescale the eyes rectangle before cropping:

107         $(‘.popbox’).css({top:top,left:left}); 

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

108         mouse.x = e.clientX; 

13const resizeFactorY = video.videoHeight / video.height;

109         mouse.y = e.clientY; 

14

110     }; 

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

111     $(‘#popboxtop’).mousedown(function(event){ 

16const eyesCanvas = $( ‘#eyes’)[ 0];

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

17const eyesCC = eyesCanvas.getContext( ‘2d’);

113         var e = window.event || event; 

18

114         mouse.x = e.clientX; 

19eyesCC.drawImage(

115         mouse.y = e.clientY; 

20video,

116         $(document).bind(‘mousemove’,moveDialog); 

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

117     }); 

22eyesRect[ 2] * resizeFactorX, eyesRect[ 3] * resizeFactorY,

118     $(document).mouseup(function(event){ 

230, 0, eyesCanvas.width, eyesCanvas.height

119         $(document).unbind(‘mousemove’, moveDialog); 

24);

120     }); 

25}

121     /*结束*/

前段时间,应该看拿到眼睛周边的新民主主义革命矩形框了。

122 } 

DIY全战术 (下) :练习与测量检验 搜集数据

123 </script>

眼珠子追踪,搜集数据的点子其实有超级多种。但是,让眼睛跟着鼠标走,是最轻易易行的,任何时候按下空格都得以捕获风流倜傥幅图像。

 

1 追踪鼠标

mootools版本

想精通鼠标每时每刻都在什么样地点,就给document.onmousemove加上二个伊芙ntListener。

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

这么做还足以把坐标归生龙活虎化 (转化到 [-1, 1] 的界定里) :

002 <script type=”text/javascript”> 

1// Track mouse movement:

003 function sbox(opt){ 

2const mouse = {

004     /*默认*/

3x: 0,

005     var defaults = { 

4y: 0,

006         title : ‘标题’, 

5

007         content : ‘内容’, 

6handleMouseMove: function(event) {

008         ctype : ‘common’, 

7// Get the mouse position andnormalize it to [ -1, 1]

009         width : 300, 

8mouse.x = (event.clientX / $(window).width()) * 2- 1;

010         height : 200, 

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

011         mask : true, 

10},

012         drag : true, 

11}

013         pos : ‘center’, 

12

014         fix : true, 

13document.onmousemove = mouse.handleMouseMove;

015         url : ”

2 捕捉图像

016     }; 

此地要做的是,按下空格键之后的天职:从画布上捕捉图像,积累为张量。

017     var isIe6 = Browser.Engine.trident4; 

TensorFlow.js提供了贰个助理函数,叫tf.fromPixels(),只要用它来储存第二张画布里走出的图像,然后归生龙活虎化:

018     /*集结选项*/

1function getImage() {

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

2// Capture the current image inthe eyes canvas asa tensor.

020     /*尺寸*/

3returntf.tidy(function() {

021     var sizeScr = $(document.body).getScroll(); 

4const image = tf.fromPixels($( ‘#eyes’)[ 0]);

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

5// Add a batch dimension:

023     var sizeWin = $(document.body).getSize(); 

6const batchedImage = image.expandDims( 0);

024     /*模板*/

7// Normalize andreturnit:

025         /*成立元素*/

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

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

9});

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

10}

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

潜心小心,即便把具备数据做成叁个大操练集也是能够的,但要么留部分做验证集正如科学,举个例子四分之三。

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

这么,便与检验模型的特性,以致确认它从不过拟合

030     var span1 = new Element(‘span’,{id:’popboxtopclose’}); 

以下是增添新数分局用的代码:

031     var span2 = new Element(‘span’,{id:’popboxtoptitle’}); 

1const dataset = {

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

2train: {

033     span1.innerHTML = ‘×’; 

3n: 0,

034     tpl2.grab(span1); 

4x: null,

035     tpl2.grab(span2); 

5y: null,

036     tpl1.grab(tpl2); 

6},

037     tpl1.grab(tpl3); 

7val: {

038     /*弹出*/

8n: 0,

039     function popout(){ 

9x: null,

040         maskLayer(); 

10y: null,

041         $(document.body).grab(tpl1,’top’);/*挂载*/

11},

042         position();/*调度地点*/

12}

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

13

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

14function captureExample() {

045     }; 

15// Take the latest image fromthe eyes canvas andadd it to our dataset.

046     popout(); 

16tf.tidy(function() {

047     /*调动职责*/

17const image = getImage();

048     function position(){ 

18const mousePos = tf.tensor1d([mouse.x, mouse.y]).expandDims( 0);

049         if(isIe6) { 

19

050             var fix = ‘absolute’; 

20// Choose whether to add it to training ( 80%) orvalidation ( 20%)
set:

051         }else{ 

21const subset = dataset[Math.random() > 0.2? ‘train’: ‘val’];

052             var fix = config.fix ? ‘fixed’ : ‘absolute’; 

22

053         } 

23if(subset.x == null) {

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

24// Create new tensors

055             var left = (sizeScr.x + sizeWin.x/2 –
(config.width/2))+’px’; 

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

056             var top = (sizeScr.y + sizeWin.y/2 –
(config.height/2))+’px’; 

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

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

27} else{

058         }else if(config.pos == ‘rightdown’){/*右下*/

28// Concatenate it to existing tensors

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

29const oldX = subset.x;

060         }else{/*暗许居中*/

30const oldY = subset.y;

061             var left = (sizeScr.x + sizeWin.x/2 –
(config.width/2))+’px’; 

31

062             var top = (sizeScr.y + sizeWin.y/2 –
(config.height/2))+’px’; 

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

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

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

064         } 

34}

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

35

066     }; 

36// Increase counter

067     /*填充内容*/

37subset.n += 1;

068     function content(){ 

38});

069         $(‘popboxtoptitle’).innerHTML = config.title; 

39}

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

最后,把空格键涉及进来:

071             $(‘popboxcontent’).innerHTML = config.content; 

1$( ‘body’).keyup(function(event) {

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

2// On space key:

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

3if(event.keyCode == 32) {

074             new Request({ 

4captureExample();

075                 url:config.url, 

5

076                 onRequest : function(){$(‘popboxcontent’).innerHTML
= ‘加载中…’;}, 

6event.preventDefault();

077                 method : ‘post’, 

7returnfalse;

078                 onSuccess :
function(msg){$(‘popboxcontent’).innerHTML = msg;}, 

8}

079                 onFailure : function(){$(‘popboxcontent’).innerHTML
= ‘加载战败:(‘;} 

9});

080             }).send(); 

现今,只要你按下空格,数据集里就能够增添一个数额点了。

081         }else{/*默认*/

教练模型

082             $(‘popboxcontent’).innerHTML = config.content; 

就搭个最简便的CNN吧。

083         } 

新萄京娱乐场手机版 9

084     } 

TensorFlow.js里面有三个和Keras超级帅似的API可以用。

085     /*遮罩层*/

以此网络里,要有三个卷积层,二个最大池化,还要有个密集层,带多个出口数量(坐标) 的这种。

086     function maskLayer(color){ 

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

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

模型代码长那样:

088         var tmpMask=new String; 

1let currentModel;

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

2

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

3function createModel() {

091         $(‘maskLayer’).setStyles({ 

4const model = tf.sequential();

092             ‘width’:’100%’, 

5

093             ‘height’:sizeScrollSize.y+’px’, 

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

094             ‘position’:’absolute’, 

7kernelSize: 5,

095             ‘top’:’0px’, 

8filters: 20,

096             ‘left’:’0px’, 

9strides: 1,

097             ‘z-index’:’60’, 

10activation: ‘relu’,

098             ‘background-color’:color, 

11inputShape: [$( ‘#eyes’).height(), $( ‘#eyes’).width(), 3],

099             ‘filter’:’alpha(opacity=50)’, 

12}));

100             ‘opacity’:’0.5′

13

101         }); 

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

102     }; 

15poolSize: [ 2, 2],

103     /*关闭*/

16strides: [ 2, 2],

104     function closed(){ 

17}));

105         $(‘popboxtopclose’).addEvent(‘click’,function(){ 

18

106             $(‘maskLayer’).destroy(); 

19model.add(tf.layers.flatten());

107             $$(‘.popbox’).destroy(); 

20

108         }); 

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

109     } 

22

110     /*拖拽*/

23// Two output values x andy

111     var mouse={x:0,y:0}; 

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

112     function moveDialog(event){ 

25units: 2,

113         var e = new Event(event); 

26activation: ‘tanh’,

114         var top = parseInt($$(‘.popbox’).getStyle(‘top’)) +
(e.client.y – mouse.y); 

27}));

115         var left = parseInt($$(‘.popbox’).getStyle(‘left’)) +
(e.client.x – mouse.x); 

28

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

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

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

30model.compile({

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

31optimizer: tf.train.adam( 0.0005),

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

32loss: ‘meanSquaredError’,

120         $$(‘.popbox’).setStyles({‘top’:top,’left’:left}); 

33});

121         mouse.x = e.client.x; 

34

122         mouse.y = e.client.y; 

35returnmodel;

123     }; 

36}

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

练习初始从前,要先安装多少个固定的epoch数,再把批尺寸设成变量(因为数量集超级小)

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

1function fitModel() {

126         var e = new Event(event); 

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

127         mouse.x = e.client.x; 

3if(batchSize < 4) {

128         mouse.y = e.client.y; 

4batchSize = 4;

129         $(window).addEvent(‘mousemove’,moveDialog); 

5} elseif(batchSize > 64) {

130     }); 

6batchSize = 64;

131     $(window).addEvent(‘mouseup’,function(event){ 

7}

132         $(window).removeEvent(‘mousemove’, moveDialog); 

8

133     }); 

9if(currentModel == null) {

134     /*结束*/

10currentModel = createModel();

135 } 

11}

136 </script>

12

弹窗在ie6下 position:fixed
不平日,可是未来还恐怕有微微人用ie6呢?竟放火,不思索也罢!

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

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

14batchSize: batchSize,

15epochs: 20,

16shuffle: true,

17validationData: [dataset.val.x, dataset.val.y],

18});

19}

下一场,在页面上做个演练开关吧:

1<button id= “train”>Train!</button>

2<style>

3#train {

4position: absolute;

5top: 50%;

6left: 50%;

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

8font-size: 24pt;

9}

10</style>

还有JS:

1<button id= “train”>Train!</button>

2<style>

3#train {

4position: absolute;

5top: 50%;

6left: 50%;

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

8font-size: 24pt;

9}

10</style> 拉出来遛遛

浅紫蓝圈圈终于来了。AI判定你在看哪,它就涌出在哪。

先写绿圈圈:

1<div id= “target”></div>

2<style>

3#target {

4background-color: lightgreen;

5position: absolute;

6border-radius: 50%;

7height: 40px;

8width: 40px;

9transition: all 0.1s ease;

10box-shadow: 0020px 10px white;

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

12}

13</style>

接下来,想让绿圈圈动起来,将在定期把眼睛图像传给神经互连网。问它你在看哪,它就答复一个坐标:

1function moveTarget() {

2if(currentModel == null) {

3return;

4}

5tf.tidy(function() {

6const image = getImage();

7const prediction = currentModel.predict(image);

8

9// Convert normalized position back to screen position:

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

11const targetHeight = $( ‘#target’).outerHeight();

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

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

14

15// Move target there:

16const $target = $( ‘#target’);

17$target.css( ‘left’, x + ‘px’);

18$target.css( ‘top’, y + ‘px’);

19});

20}

21

22setInterval(moveTarget, 100);

区间设的是100毫秒,可是也得以改的。

综上说述,马到成功。

新萄京娱乐场手机版 10

鼻孔眼睛分不清?

眼球追踪模型很风趣,可是照旧有部分可爱的老毛病。

举个例子,算法还只好识别正面,脸微微侧一点AI就能够纳闷。

比方,有时候会把鼻孔分辨成眼睛。

比方说,必得整张脸都出未来镜头里,技艺鉴定识别眼睛的四处,捂住嘴也不行。

新萄京娱乐场手机版 11

来自诡异君

马克斯也说,还或者有为数不菲方可追究的长空。

团结演练传送门:

代码完成传送门:

课程原作传送门:

新萄京娱乐场手机版 12

Nokia云•普惠AI,让开拓充满AI!

爱上你的代码,爱做 “改换世界”的步履派!

大会将第三次揭橥AI开辟框架,从AI模型练习到AI模型安插的全部开采一条龙完成!让AI开辟举手投足!回去年今年日头条,查看越来越多

主编:

相关文章