AI就清楚您在瞧着哪些妹子,提醒插件鼠标移上圆

2019-10-16 18:22栏目:科学技术中心
TAG:

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

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

圆栗子 编译整理

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

澳门新莆京33375.com 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>

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

源码下载地址

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

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

如果有个眼球追踪AI,加上人脸识别,或许就能在被老板盯上的瞬间,进入奋力工作模式。

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

戏是有点多。不过眼球追踪这件事,只要有电脑的前置摄像头,再有个浏览器,真的可以做到。

澳门新莆京33375.com 2

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

我来训练一把

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

在下试了一试。

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

澳门新莆京33375.com 3

收集数据的方式很简单,只要四处移动鼠标,眼睛跟着鼠标走,然后随时按下空格键,每按一次就采集一个数据点。

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

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

澳门新莆京33375.com 4

可它似乎有些犹豫。系统又提示:现在数据不太够,可能还没训练好,再取一些数据吧。

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

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

澳门新莆京33375.com 5

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

不过,在训练数据如此贫乏的前提下,神经网络也算是茁壮成长了。

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

版权声明:本文由澳门新莆京娱乐app发布于科学技术中心,转载请注明出处:AI就清楚您在瞧着哪些妹子,提醒插件鼠标移上圆