目录

起点

托管说明

MobileNet v1

运行物体识别

终点线

下一步是什么？绒毛动物？

  • 下载TensorFlowJS示例-6.1 MB

TensorFlow + JavaScript。现在，最流行，最先进的AI框架支持地球上使用最广泛的编程语言，因此，让我们在我们的web浏览器中通过深度学习实现奇迹，通过TensorFlow.js的WebGL GPU加速！

这是我们六个系列的第二篇文章：

  1. 使用TensorFlow.js在浏览器中进行深度学习入门
  2. 狗和披萨：使用TensorFlow.js在浏览器中实现计算机视觉
  3. 绒毛动物探测器：通过TensorFlow.js中的迁移学习识别浏览器中的自定义对象
  4. 使用TensorFlow.js进行人脸触摸检测第1部分：将实时网络摄像头数据与深度学习配合使用
  5. 使用TensorFlow.js进行人脸触摸检测第2部分：使用BodyPix
  6. 使用TensorFlow.js进行AI在网络摄像头中翻译手势和手语

在本文中，我们将深入探讨在Web浏览器中运行的计算机视觉。我将向您展示如何使用TensorFlow.js中经过预训练的MobileNet模型轻松快速地开始检测和识别图像中的对象。

起点

要使用TensorFlow.js分析图像，我们首先需要：

  • 收集狗、食物等的测试图像（此项目中使用的图像来自pexels.com）
  • 导入TensorFlow.js
  • 添加代码以随机选择并加载其中一张图像
  • 添加代码以文本形式显示预测结果

这是我们的起点：

<html><head><title>Dogs and Pizza: Computer Vision in the Browser with TensorFlow.js</title><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script><style>img {object-fit: cover;}</style></head><body><img id="image" src="" width="224" height="224" /><h1 id="status">Loading...</h1><script>const images = ["web/dalmation.jpg", // https://www.pexels.com/photo/selective-focus-photography-of-woman-holding-adult-dalmatian-dog-1852225/"web/maltese.jpg", // https://www.pexels.com/photo/white-long-cot-puppy-on-lap-167085/"web/pug.jpg", // https://www.pexels.com/photo/a-wrinkly-pug-sitting-in-a-wooden-table-3475680/"web/pomeranians.jpg", // https://www.pexels.com/photo/photo-of-pomeranian-puppies-4065609/"web/pizzaslice.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/"web/pizzaboard.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/"web/squarepizza.jpg", // https://www.pexels.com/photo/pizza-with-bacon-toppings-1435900/"web/pizza.jpg", // https://www.pexels.com/photo/pizza-on-plate-with-slicer-and-fork-2260200/"web/salad.jpg", // https://www.pexels.com/photo/vegetable-salad-on-plate-1059905/"web/salad2.jpg", // https://www.pexels.com/photo/vegetable-salad-with-wheat-bread-on-the-side-1213710/"web/kitty.jpg", // https://www.pexels.com/photo/eyes-cat-coach-sofa-96938/"web/upsidedowncat.jpg", // https://www.pexels.com/photo/silver-tabby-cat-1276553/];function pickImage() {document.getElementById( "image" ).src = images[ Math.floor( Math.random() * images.length ) ];}function setText( text ) {document.getElementById( "status" ).innerText = text;}(async () => {// Your Code Goes HeresetInterval( pickImage, 5000 );})();</script></body>
</html>

此Web代码导入TensorFlow.js和示例图像的集合，添加图像元素（设置为224px），然后添加具有设置图像功能的状态文本元素。您可以更新图像数组以匹配您下载的其他测试图像的文件名。

在浏览器中打开包含以上代码的页面。您应该看到图像每五秒钟更新一次，以随机选择。

托管说明

在继续进行之前，我想指出，为了使此项目正常运行，必须从Web服务器提供网页和图像（由于HTML5画布限制）。

否则，当TensorFlow.js尝试读取图像像素时，您可能会遇到此错误：

DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.

如果您没有运行像Apache或IIS这样的服务器，则可以使用WebWebWeb轻松在NodeJS中运行一个服务器，WebWebWeb是我为此目的而构建的NPM模块。

MobileNet v1

来自GitHub：“MobileNets是小型、低延迟、低功耗的模型，其参数化可以满足各种用例的资源约束。”

对于该项目，我们将使用MobileNet v1，该软件已经过数百万张图像的训练，可以识别1000种不同类别的物体，从不同的犬种到各种食物。该模型有多种变体，允许开发人员在复杂度/大小和预测准确性之间进行权衡。

幸运的是，Google将模型托管在其服务器上，因此我们可以在项目中直接使用它。对于224x224像素的图像输入，我们将使用最小的0.25色块变化。

让我们将其添加到脚本中，并使用TensorFlow.js加载模型。

// Mobilenet v1 0.25 224x224 model
const mobilenet = "https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json";let model = null;(async () => {// Load the modelmodel = await tf.loadLayersModel( mobilenet );setInterval( pickImage, 5000 );
})();

运行物体识别

在将图像传递到TensorFlow模型之前，我们需要将其从像素转换为张量。我们还必须将每个RGB像素颜色转换为-1.0到1.0之间的浮点值，因为这是MobileNet模型所训练的值范围。

TensorFlow.js具有内置功能，可帮助我们轻松执行这些操作。牢记内存管理，我们可以编写一个函数来运行模型并获取预测的对象标识符，如下所示：

async function predictImage() {let result = tf.tidy( () => {const img = tf.browser.fromPixels( document.getElementById( "image" ) ).toFloat();const normalized = img.div( 127 ).sub( 1 ); // Normalize from [0,255] to [-1,1]const input = normalized.reshape( [ 1, 224, 224, 3 ] );return model.predict( input );});let prediction = await result.data();result.dispose();// Get the index of the highest value in the predictionlet id = prediction.indexOf( Math.max( ...prediction ) );setText( labels[ id ] );
}

您会注意到，上面的函数引用labels数组以显示带有setText()的预测文本。该数组是ImageNet类别标签的预定义列表，这些列表与MobileNet所接受的预测相匹配。

如果您下载了它，请记住将它作为脚本包含在页面中的<head>标记中，如下所示：

<script src="web/labels.js"></script>

最后，通过在代码底部设置其onload处理程序，让图像元素调用在每次加载新图像时运行此预测函数：

(async () => {// Load the modelmodel = await tf.loadLayersModel( mobilenet );setInterval( pickImage, 5000 );document.getElementById( "image" ).onload = predictImage;
})();

完成后，您的模型应该开始预测图像中的内容。

终点线

现在，您已经将所有部分组合在一起。这样，您就有了一个使用计算机视觉并可以识别对象的网页。还不错吧？

<html><head><title>Dogs and Pizza: Computer Vision in the Browser with TensorFlow.js</title><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script><style>img {object-fit: cover;}</style><script src="web/labels.js"></script></head><body><img id="image" src="" width="224" height="224" /><h1 id="status">Loading...</h1><script>const images = ["web/dalmation.jpg", // https://www.pexels.com/photo/selective-focus-photography-of-woman-holding-adult-dalmatian-dog-1852225/"web/maltese.jpg", // https://www.pexels.com/photo/white-long-cot-puppy-on-lap-167085/"web/pug.jpg", // https://www.pexels.com/photo/a-wrinkly-pug-sitting-in-a-wooden-table-3475680/"web/pomeranians.jpg", // https://www.pexels.com/photo/photo-of-pomeranian-puppies-4065609/"web/pizzaslice.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/"web/pizzaboard.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/"web/squarepizza.jpg", // https://www.pexels.com/photo/pizza-with-bacon-toppings-1435900/"web/pizza.jpg", // https://www.pexels.com/photo/pizza-on-plate-with-slicer-and-fork-2260200/"web/salad.jpg", // https://www.pexels.com/photo/vegetable-salad-on-plate-1059905/"web/salad2.jpg", // https://www.pexels.com/photo/vegetable-salad-with-wheat-bread-on-the-side-1213710/"web/kitty.jpg", // https://www.pexels.com/photo/eyes-cat-coach-sofa-96938/"web/upsidedowncat.jpg", // https://www.pexels.com/photo/silver-tabby-cat-1276553/];function pickImage() {document.getElementById( "image" ).src = images[ Math.floor( Math.random() * images.length ) ];}function setText( text ) {document.getElementById( "status" ).innerText = text;}async function predictImage() {let result = tf.tidy( () => {const img = tf.browser.fromPixels( document.getElementById( "image" ) ).toFloat();const normalized = img.div( 127 ).sub( 1 ); // Normalize from [0,255] to [-1,1]const input = normalized.reshape( [ 1, 224, 224, 3 ] );return model.predict( input );});let prediction = await result.data();result.dispose();// Get the index of the highest value in the predictionlet id = prediction.indexOf( Math.max( ...prediction ) );setText( labels[ id ] );}// Mobilenet v1 0.25 224x224 modelconst mobilenet = "https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json";let model = null;(async () => {// Load the modelmodel = await tf.loadLayersModel( mobilenet );setInterval( pickImage, 5000 );document.getElementById( "image" ).onload = predictImage;})();</script></body>
</html>

下一步是什么？绒毛动物？

只需少量代码，我们就使用TensorFlow.js加载了预训练的模型，以在Web浏览器中识别列表中的对象。想象一下您可以做什么。也许创建一个可自动对成千上万张照片进行分类和分类的网络应用。

现在，如果我们想识别不在1000个类别列表中的其他对象怎么办？

请跟随本系列的下一篇文章一起学习如何扩展该项目，以快速训练卷积神经网络来识别...几乎任何您想要的东西。

https://www.codeproject.com/Articles/5272771/Dogs-and-Pizza-Computer-Vision-in-the-Browser-With

狗和披萨：使用TensorFlow.js在浏览器中实现计算机视觉相关推荐

  1. 使用TensorFlow.js在浏览器中进行深度学习入门

    目录 设置TensorFlow.js 创建训练数据 检查点 定义神经网络模型 训练AI 测试结果 终点线 内存使用注意事项 下一步是什么?狗和披萨? 下载TensorFlowJS示例-6.1 MB T ...

  2. 使用face-api和Tensorflow.js在浏览器中进行AI年龄估计

    目录 性别和年龄检测 下一步是什么? 下载源-10.6 MB 在上一篇文章中,我们学习了如何使用face-api.js和Tensorflow.js在浏览器中对人的情绪进行分类. 如果您尚未阅读该文章, ...

  3. 图像迁移风格保存模型_用TensorFlow.js在浏览器中部署可进行任意图像风格迁移的模型...

    风格迁移一直是很多读者感兴趣的内容之一,近日,网友ReiichiroNakano公开了自己的一个实现:用TensorFlow.js在浏览器中部署可进行任意图像风格迁移的模型.让我们一起去看看吧! Gi ...

  4. 使用 Colab 在 tf.keras 中训练模型，并使用 TensorFlow.js 在浏览器中运行

    文 / Zaid Alyafeai 我们将创建一个简单的工具来识别图纸并输出当前图纸的名称. 此应用程序将直接在浏览器上运行,无需任何安装.我们会使用 Google Colab 来训练模型,并使用 T ...

  5. 使用迁移学习和TensorFlow.js在浏览器中进行AI情感检测

    目录 KNN分类器 迁移学习 我们的技术栈 配置 使用KNN分类器 将代码放在一起 测试结果 下一步是什么? 下载源-10.6 MB 在上一篇文章中,我们已经看到了加载预训练模型有多么容易.在本文中, ...

  6. 用 TensorFlow.js 在浏览器中训练一个计算机视觉模型（手写数字分类器）

    文章目录 Building a CNN in JavaScript Using Callbacks for Visualization Training with the MNIST Dataset ...

  7. 有了TensorFlow.js，浏览器中也可以实时人体姿势估计

    翻译文章,内容有删减.原文地址:https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-te ...

  8. 用TensorFlow.js在浏览器中进行实时语义分割 | MixLab算法系列

    语义分割是监测和描绘图像中每个感兴趣对象的问题 当前,有几种方法可以解决此问题并输出结果 如下图示: 语义分割示例 这种分割是对图像中的每个像素进行预测,也称为密集预测. 十分重要且要注意的是,同一类 ...

  9. js判断wifi_使用JS在浏览器中判断当前网络连接状态的几种方法

    使用JS在浏览器中判断当前网络状态的几种方法如下: 1. navigator.onLine 2. ajax请求 3. 获取网络资源 4. bind() 1. navigator.onLine 通过na ...

最新文章

  1. 软件项目管理重点总结
  2. Android RecyclerView使用GridLayoutManager间距设置
  3. 在图形中使用指定字体
  4. .net 把一个对象赋值给一个参数_一个可以提升JVM运行性能的参数
  5. ni max不能连续采集图像_1.6视觉检测项目过程分解——程序的连续运行
  6. day11_界面闪烁处理
  7. 项目-V0.0.3-犯二的信号处理函数
  8. java语言如何将小写字母转化为大写_java中如何把大写字母转换成小写字母,小写字母转换成大写字母...
  9. 13万人12306信息泄露 小伙挨个发邮件通知
  10. 如何在虚拟机中VMware安装centos_6
  11. 三十五 我在软件园的那些日子里
  12. nba底层球员_探索个人NBA球员
  13. easyexcel表头和内容居中
  14. python名片管理系统难点总结_Python 知识要点：名片管理系统 2.0
  15. 足球比赛数据可视分析
  16. Refused to display in a frame because it set ‘X-Frame-Options‘ to ‘sameorigin‘.
  17. maven安装及环境部署（IDEA）
  18. 常用汇率查询货币列表实时汇率查询换算小demo
  19. 基于LINUX数控系统,基于LINUX的开放式结构数控系统
  20. L3-2 拼题A打卡奖励 (30 分)

热门文章

  1. spring 扫描所有_自定义Spring事件监听机制
  2. java实现定时任务 schedule_详解java定时任务
  3. arduino openmv 显示图像_OpenMV与Arduino NUO的连接方式
  4. python的内存机制_python中的内存机制
  5. mysql group by 查询慢_MySQL慢查询优化（线上案例调优）
  6. 设计师交流分享社区|灵感并非凭空得来，积累在集设网
  7. ui kit模板的用途是什么？
  8. iframe带了token不显示_token是什么
  9. php sqlite视图,SQLite 视图
  10. Windows下根据进程id获得进程名