必威登录网站_西汉姆联必威

必威登录网站已成为一流的线上娱乐城,西汉姆联必威演绎了世界之中的各种生灵的使命与追求,因为目前很多玩家都还在排队等着进行betway必威官网备用下载,点击进入官网。

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

2019-08-03 作者:科学动态   |   浏览(190)

原标题:九分钟陶冶眼球追踪术,AI就知道您在看着哪些妹子 | TensorFlow.js代码

小说是一款jquery 提醒插件鼠标移上圆角框图片唤醒代码,他得以很好详细表达那张图片的效能与用途哦,何况还足以是图形文本混合表达。

圆栗子 编写翻译整理

文章是一款jquery 提示插件鼠标移上圆角框图片唤醒代码,他得以很好详细表明那张图纸的效应与用途哦,况且仍可以是图形文本混合表明。

图片 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>

哎呀,COO的眼神飞过来了,还难过切回专门的事产业分界面?

源码下载地址

往昔,我们大约不能躲避来自个儿后的目光,但前段时间不明确了。

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

设若有个眼珠子追踪AI,加上人脸识别,或者就能够在被业主盯上的一须臾间,步入奋力工作格局。

提醒插件鼠标移上圆角框图片唤醒代码,他能够很好详细表达这张图片的意义与用途哦,并且还足以是图片文本混合表达。...

戏是稍稍多。可是眼球追踪那事,只要有管理器的停放摄像头,再有个浏览器,真的能够完毕。

图片 2

来自达拉斯的次序猿马克斯Schumacher,就用TensorFlow.js做了四个模子,你看向显示器的某一点,它就精晓你在看的是哪一点了。

作者来训练一把

其一模型叫Lookie Lookie,不用服务器,展开录像头就能够在浏览器上练习,不出八分钟就能够养成三头小AI。

在下试了一试。

录像头拍到的画面就展现在显示器左上角,脸上是深蓝的大致,眼睛被一个羊毛白方框框住。

图片 3

采摘数据的点子非常的粗略,只要到处活动鼠标,眼睛跟着鼠标走,然后随时按下空格键,每按一遍就搜聚多少个数总部。

第一波,只要按25回空格,系统就提示,能够点击磨练按键了。

教练好之后,显示器上面世八个绿圈圈。那时候,笔者的双眼看什么地方,绿圈圈都应有跟着自身走的。

图片 4

可它犹如有一点点当断不断。系统又提醒:今后数量不太够,可能还没练习好,再取一些数据吧。

那好,再取个二三十张图,陶冶第二波。

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

图片 5

相比较,对于上下移动的眼神,AI的影响就如从未那么敏感。差不离是因为,计算机显示屏上下离开远远不够宽,眼球旋转不丰盛吧。

不过,在磨炼多少如此相差的前提下,神经互连网也究竟健康成长了。

急需注意的是,搜聚数据的时候,脸绝不离显示器太远(也不要倒立) 。

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

用作三个无需任何服务器就会磨练的模型,假如要管理整幅整幅的摄像截图,担当或然某个重。

图片 6

所以,还是先检查评定人脸,再框出眼睛所在的一些。只把其一区域 (上海教室右一) 交给神经网络的话,义务就自在了。

德意志联邦共和国少年选择了clmtrackr人脸检查实验模型,它的长处也是跑起来轻快。

那么,先把它下下来:

下一场,打开多少个空的html文本,导入jQuery, TensorFlow.js,clmtrackr.js,以及main.js。代码如下:

1<!doctype html>

2<html>

3<body>

4< src= ";

5< src= ";

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

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

8</body>

9</html>

那样,计划运动就压实了。上面正式启幕。

导出录像流

先是步,要因此你 (用户) 的同意,技能开采摄像头,渲染摄像流,把镜头展现在页面上。

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

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

然后从main.js开始:

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

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

3

4function onStreaming(stream) {

5video.srcObject = stream;

6}

7

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

9});

到那边,浏览器就该问您“要不要开辟录制头”了。

找到你的脸

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

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

1const ctrack = new clm.tracker();

2ctrack.init();

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

1ctrack.start(video);

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

此间要求一个绘制工具。用html里面的<canvas>标签,在录像上边臃肿一张画布

在<video>上面,写上这一串代码:

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

2<style>

3#webcam, #overlay {

4position: absolute;

5top: 0;

6left: 0;

7}

8</style>

那般,就有了跟录像尺寸同样的画布。CSS能保险画布和录制的职位完全契合。

浏览器每做一回渲染,大家就要在画布上画点什么了。画以前,要先把前边画过的内容擦掉。

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

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

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

3

4function trackingLoop() {

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

6requestAnimationFrame(trackingLoop);

7

8let currentPosition = ctrack.getCurrentPosition();

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

10

11if(currentPosition) {

12ctrack.draw(overlay);

13}

14}

未来,在onStreaming() 的ctrack.starg() 前边,调用trackingLoop() 。每一帧里,它都会另行运行。

本条时候,刷新一下浏览器,你的面颊应该有二个蓝紫又奇异的概略了。

图片 7

眼睛截下来

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

cmltrackr很善良,除了画个概略之外,还应该有70个面部特征,我们得以挑选本人索要的一部分。

图片 8

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

接下来,矩形框应该丰裕覆盖入眼面部音信了 (不离太远、不倒立) 。

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

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

2<style>

3#eyes {

4position: absolute;

5top: 0;

6right: 0;

7}

8</style>

上面那个函数,会再次回到 (x,y) 坐标,以及矩形的长度宽度。给它输入的是clmtrackr里面包车型地铁任务阵列 (Position Array) :

1function getEyesRectangle(positions) {

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

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

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

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

6

7const width = maxX - minX;

8const height = maxY - minY;

9

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

11}

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

替换trackingLoop()里面的if块:

1if(currentPosition) {

2// Draw facial mask on overlay canvas:

3ctrack.draw(overlay);

4

5// Get the eyes rectangle anddraw it inred:

6const eyesRect = getEyesRectangle(currentPosition);

7overlayCC.strokeStyle = 'red';

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

9

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

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

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

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

14

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

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

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

18

19eyesCC.drawImage(

20video,

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

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

230, 0, eyesCanvas.width, eyesCanvas.height

24);

25}

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

DIY全战略 (下) :演习与测量试验 搜集数据

眼珠子追踪,搜聚数据的格局其实有很三种。然则,让眼睛跟着鼠标走,是最简便易行的,随时按下空格都足以捕获一幅图像。

1 追踪鼠标

想明白鼠标每时每刻都在什么岗位,就给document.onmousemove加上一个EventListener。

诸有此类做还足以把坐标归一化 (转化到 [-1, 1] 的限量里) :

1// Track mouse movement:

2const mouse = {

3x: 0,

4y: 0,

5

6handleMouseMove: function(event) {

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

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

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

10},

11}

12

13document.onmousemove = mouse.handleMouseMove;

2 捕捉图像

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

TensorFlow.js提供了一个帮助办公室函数,叫tf.fromPixels(),只要用它来存储第二张画布里走出的图像,然后归一化:

1function getImage() {

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

3returntf.tidy(function() {

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

5// Add a batch dimension:

6const batchedImage = image.expandDims( 0);

7// Normalize andreturnit:

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

9});

10}

瞩目小心,尽管把具备数据做成一个大陶冶集也是足以的,但照旧留部分做验证集正如不利,举例40%。

与上述同类,便与检验模型的品质,以及确认它未有过拟合

以下是增多新数根据地用的代码:

1const dataset = {

2train: {

3n: 0,

4x: null,

5y: null,

6},

7val: {

8n: 0,

9x: null,

10y: null,

11},

12}

13

14function captureExample() {

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

16tf.tidy(function() {

17const image = getImage();

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

19

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

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

22

23if(subset.x == null) {

24// Create new tensors

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

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

27} else{

28// Concatenate it to existing tensors

29const oldX = subset.x;

30const oldY = subset.y;

31

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

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

34}

35

36// Increase counter

37subset.n = 1;

38});

39}

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

1$( 'body').keyup(function(event) {

2// On space key:

3if(event.keyCode == 32) {

4captureExample();

5

6event.preventDefault();

7returnfalse;

8}

9});

由来,只要你按下空格,数据集里就能够追加八个数码点了。

教练模型

就搭个最简便的CNN吧。

图片 9

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

以此网络里,要有一个卷积层,七个最大池化,还要有个密集层,带八个出口值 (坐标) 的这种。

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

模型代码长那样:

1let currentModel;

2

3function createModel() {

4const model = tf.sequential();

5

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

7kernelSize: 5,

8filters: 20,

9strides: 1,

10activation: 'relu',

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

12}));

13

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

15poolSize: [ 2, 2],

16strides: [ 2, 2],

17}));

18

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

20

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

22

23// Two output values x andy

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

25units: 2,

26activation: 'tanh',

27}));

28

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

30model.compile({

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

32loss: 'meanSquaredError',

33});

34

35returnmodel;

36}

练习开始此前,要先安装贰个固定的epoch数,再把批尺寸设成变量(因为数量集十分小) :

1function fitModel() {

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

3if(batchSize < 4) {

4batchSize = 4;

5} elseif(batchSize > 64) {

6batchSize = 64;

7}

8

9if(currentModel == null) {

10currentModel = createModel();

11}

12

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

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

小米云•普惠AI,让开垦充满AI!

爱上您的代码,爱做 “改造世界”的行走派!

大会将第3回宣布AI开拓框架,从AI模型演习到AI模型安排的百分百开荒一站式达成!让AI开拓触手可及!归来博客园,查看更加多

责编:

本文由必威登录网站发布于科学动态,转载请注明出处:三分钟训练眼球追踪术,AI就知道你在盯着哪个妹

关键词: 必威登录网站 开发 摄像头