首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于TensorFlow.js浏览器构建深度学习应用

节选自《深度学习TensorFlow.js浏览器实战篇》第八章,已获授权。 在前面的章节,我们讨论了各种JavaScript概念和运行在浏览器的各种深度学习框架。...TensorFlow.js实现手势识别 本小节,我们使用TensorFlow.jswebcam实现玩石头剪刀布游戏。进行详细的解释之前,我们先去Github页面看看它是如何运行的。...一旦你训练好三种手势的模型,你就可以开始浏览器玩石头剪刀布游戏。 算法解说 为了理解代码,我们需要掌握预测算法的细节。 手势识别算法重要的特征之一是尺寸小和推断速度快。...对于学习少量数据集,我们浏览器可以进行实时模型训练。...这两个函数包括浏览器运行石头剪刀布游戏的有效代码。它们处理游戏的流程,监控TensorFlow.js迭代过程中设置的中间变量,检查用户当前摄像头做的哪种手势,并相应的更新UI。

1.2K40

浏览器中使用TensorFlow.js

TensorFlow.js是一个库,用于使用JavaScript开发和训练机器学习模型,并将其部署浏览器中或Node.js。...前言 Mindee,TensorFlow团队开发了一种基于python的开源OCR,DocTR,希望能在70%的开发者使用JavaScript的情况下,能够选择将它部署浏览器中,以确保所有开发者都能使用...该模型中,文字图像的输入尺寸为(32,128,3),使用填充来保持作物的纵横比。它在私有数据集训练,该数据集由1100万个从不同文档中提取的文本框组成。...OCR模型非常慢,因为有两个不能并行化的任务(文本区域分割+单词识别),所以必须使用轻量级模型来确保大多数设备的快速执行。...一台带有RTX 2060和i7 9th Gen的现代计算机上,检测任务每幅图像大约需要750毫秒,使用WebGL后端识别模型每批32个农作物(单词)大约需要170毫秒,使用TensorFlow.js基准测试工具进行基准测试

26010
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Centos安装Node.js

    介绍 Node.js是一个能够服务器端运行JavaScript的开放源代码、跨平台avaScript 运行环境。Node.js由Node.js基金会持有和维护,并与Linux基金会有合作关系。...Node.js采用Google开发的V8运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模。这些技术通常用于数据密集的实时应用程序。...Node.js大部分基本模块都用JavaScript语言编写。Node.js出现之前,JavaScript通常作为客户端程序设计语言使用,以JavaScript写出的程序常在用户的浏览器运行。...所以,学会试用Node.js非常有用,本文概述了Centos运行node.js + express中运行“Hello world”所需的步骤。...只需输入: make 这可能是最耗时的任务:CVM,完成需要大约6分34秒。

    2.6K00

    浏览器中本地运行Node.js

    所有代码执行都发生在浏览器的安全沙箱中,而不是远程VM或本地二进制文件。 同样,这些环境不在远程服务器运行。而是,每个环境都完全包含在您的Web浏览器中。...没错:Node.js运行时本身第一次浏览器中本机运行。 从现在开始,WebContainers现在处于公开测试阶段。...我知道,这令人震惊;)通过浏览器中执行Node.js,与Chrome DevTools的集成即开即用。无需安装,无需扩展,仅在浏览器中进行本机后端调试即可 运行服务器,在你的浏览器中 实际。...没错:Node.js运行时本身第一次浏览器中本机运行 写在最后 WebAssembly强大到足以编写操作系统,但是这次WebContainers把这个技术使用方向放在了Node.js,我觉得是有划时代意义的...在我看来,这个技术未来最主要应用方向是,可以使世界范围内的软件以前无法运行的地方运行,以后电脑可能只需要安装一个谷歌浏览器

    3.7K10

    JS 浏览器端的运行机制

    先来看几个问题 1、JS为什么是单线程? JS的单线程,与他的用途有关。作为浏览器脚本语言,Js的主要用途就是与用户互动,以及操作DOM。这决定了它只能是单线程。...试想一下,假设现在有process1、process2两个线程,process1某个DOM节点添加了内容,process2删除了这个节点,那这时浏览器应该以哪个线程为准呢?...几个知识点 执行栈 所有同步任务都在主线程执行,形成一个执行栈,执行栈是存储函数调用的栈结构,遵循先进后出的原则 任务队列 只要异步任务有了运行结果,就在 “任务队列” 中放置一个事件 任务类型 任务类型可分为...,输出 “执行then函数啦” 本轮event loop 执行完毕 下一轮的循环里,发现宏任务队列里有setTimeout 函数,输出 “定时器开始啦” 浅谈setTimeout 这段setTimeout...也就是说,如果主线程执行了10秒,那这个任务就会在10+3秒后执行 JS 浏览器端的运行机制 - 小鑫の随笔:https://xiaoxina.cc/p/4b4d.html

    69430

    教程 | 用摄像头和Tensorflow.js浏览器实现目标检测

    选自Medium 作者:Mike Shi 机器之心编译 参与:Pedro、刘晓坤 Tensorflow.js 是一个能在你的浏览器里运行的全新深度学习库。...首先,YOLOv2 只功能强大的桌面级设备以 40 帧每秒的速度运行,而这个条件大多数用户都达不到。同时,YOLOv2 的模型文件是 Tiny YOLO 的五倍大,这将会导致网络卡死。...不幸的是, Tensorflow.js 中,如果你 tf.slice 尝试这样操作,它只会默默地失败。 3.... YOLO 中我们将输出重塑为 [batch_size,xy,wh,box_confidence,box_class_pred]。这个很显然是五维的。...现在我们知道如何通过静态图像或网络摄像头抓取数据,可以将大多数 ML 模型从 Python 转换为 Tensorflow.js 并在浏览器中运行它们。

    2.3K41

    用Vue.js浏览器中裁剪图像

    在网络处理图像很容易成为一种痛苦 —— 当然,除非你使用了正确的工具。...本教程中,我们将探讨如何在浏览器中使用 JavaScript 库来操作图片,为服务器的存储做准备,并在 Web 程序中使用。...Vue.js项目中使用JavaScript裁剪图像 现在项目应该几乎已配置好并可以在网络裁剪图像。为了保持我们的项目整洁,我们将创建一个新的Vue.js组件来处理我们所有的图像处理。...我们将能够通过 ref 变量直接访问源图像,这类似于 DOM 对象使用 querySelector。 虽然我们已经为裁剪图像做好了准备,但实际并没有对它们做任何事情。...我的示例中,有一个 public/logo.png 文件,你可以根据需要随意修改它。真实的场景中,你会使用用户将要上传的图像。

    4.2K30

    cocos2d-js浏览器的表现

    其实这里只简单对比3个浏览器,估计也足够代表性了。 结论是: 1、有webgl支持的时候,就可以尽情的耍吧; 2、没有webgl,能native就native。...如果不行,就只能在canvas做小块的区域,减少每帧的变化。 1、PC的Chrome(webgl) 首先看看官方的performance test。 粒子系统达到最大值3000也毫无压力。 ?...这个测试PC没太多意义,因为可能底层自动做了批处理。这个测试主要是为了后边手机上运行。...2、小米1的微信内嵌浏览器(跟google浏览器效率类似,应该是内嵌了google浏览器) 本来想在手机上跑官方的测试,但发现死活打不开。算了。。。...微信浏览器跟谷歌浏览器类似,操作也是类似的(双击放大)。纯canvas没有webgl支持,刚打开还没放小人就只有50帧了。

    2K30

    使用Skypack浏览器直接导入ES模块

    场景复现 笔者最近给自己的项目CodeRun增加了一个直接在浏览器使用ES模块的功能,之前使用一个包前需要先找到它的在线CDN地址然后引进来,就像这样: 现在可以直接这样: 那么这是怎么实现的呢,...早期大部分包提供的都是IIFE或者commonjs规范的模块,我们需要通过link或script标签引入,但是现在基本所有的现代浏览器都原生支持ES模块,所以我们可以直接在浏览器使用模块语法。...如果使用传统的CDN服务,那么首先就需要某个包它提供了ES模块的文件,然后我们再从CDN里找到该ES版本的文件地址,再进行使用,如果某个包没有提供ES版本,那么我们就无法直接在浏览器以模块的方式导入它...,而Skypack是专门为现代浏览器设计的,它会自动帮我们进行转换,我们只要告诉它我们要导入的包名,即使这个包提供的是commonjs版本的文件,Skypack返回的也会是ES模块,所以我们就可以直接在浏览器以模块的方式导入了...里面导入element-ui的css文件,我们平常的开发中这是很正常的,不过浏览器的运行结果如下: 显然是无法ES模块里直接导入css,所以我们需要把css通过传统样式的方式引入: @import

    1.5K10

    JS浏览器和Node下是如何工作的?

    浏览器中的情况 假设你浏览器中打开一个页面,其使用了一个单独的 JS 执行线程。该线程负责处理所有事,如滚动页面、打印页面上的某些东西、监听 DOM 事件(比如点击)等等。...每条记录(entry),栈的状态也称做 栈帧(stack frame)。若是哪个栈帧的函数调用发生了错误,JS 会将其代码执行快照打印成 堆栈追踪(stack trace)。...浏览器会在那个请求完成之前假死吗?真那么样的话,用户体验可太糟了。 浏览器有一个 JS 引擎,用来提供 JS 运行时环境。... Node.js 中会怎样 当同样的事情发生在 Node.js 中时,就得做的更多些了 -- 因为 node 所承诺的能力也更强。浏览器中,我们被能在后台做什么掣肘。...API,但其既包含 事件队列 (event queue,或称 callback queue / message queue) 又包含 事件循环 (event loop);不同于 V8 的是,这二者虽然还是单一线程运行

    2.1K10

    继Python之后,Go也顺利浏览器运行

    文 | 局长,出品 | OSC开源社区(ID:oschina2013) Anaconda 开发商最近发布了 PyScript,这是一个可以让开发者 HTML 中混写 Python 代码的框架,有人将其称为...事实,PyScript 底层采用了 WebAssembly, 因为它基于 Pyodide 构建,Pyodide 由编译成 WebAssembly 的 CPython 3.8 解释器组成,允许在网页浏览器中运行...图片 无独有偶,开发者采用相同的思路让 Go 也顺利浏览器运行。...https://goscript.dev 网站支持浏览器端直接运行 Go 代码,这是一个 Go playground,底层采用 Goscript,通过 WASM 实现。...推荐阅读 一个神奇的项目:让 Python HTML 中运行 来自 GitHub Actions 的1.27 亿美元账单... 竟然有一半的人不知道 for 与 foreach 的区别???

    71010

    浏览器播放虚幻引擎:像素流前端教程

    之前《UE像素流技术:边缘计算与RTC架构》一文中论证了WebRTC的基本原理,以及WebRTC与虚幻引擎结合使用的可行性。...之后《像素流协议》一文中介绍了虚幻引擎基于WebRTC定义的一套像素流协议,这套协议本身又分成2部分: 基于DataChannel的二进制格式:用于UE4与前端通讯 基于WebSocket的JSON格式...:用于UE4与信令服务器通讯 至于前端与信令服务器之间的通讯格式则可以自定义,PixelStreamer包含了2个js文件,分别是前端SDK和信令服务器,分别运行在浏览器和nodejs,下面看一下它的...本项改编自虚幻的原版本,但删除了所有但依赖库和垃圾代码,同时合并成一个JS模块,开箱即用。...-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888 Frontend 前端引入库 import 'PixelStream.js

    1.9K20

    腾讯云CVM安装熟悉Node.js

    本教程中,我们将介绍如何在腾讯云CVM使用Debian 8系统设置的Node.js环境。...为了测试应用程序,您的服务器打开另一个终端会话,并通过curl连接到 本地主机 curl http://localhost:8080 如果您看到以下输出,则应用程序正常工作并侦听正确的地址和端口: tHello...World 如果看不到正确的输出,请确保Node.js应用程序正在运行,并配置为侦听正确的地址和端口。...我们将使用与Node.js一起安装的Node模块的包管理器npm我们的服务器安装PM2。使用此命令安装PM2。...假设我们的服务器ip解析到example.com,通过Web网络浏览器访问http://example.com/会发送请求到hello.js,侦听 本地主机的 8080端口。

    6.7K50
    领券