Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TensorFlow.js 入门指南:让你的JavaScript应用拥有机器学习能力

TensorFlow.js 入门指南:让你的JavaScript应用拥有机器学习能力

作者头像
前端达人
发布于 2024-07-10 10:57:27
发布于 2024-07-10 10:57:27
90600
代码可运行
举报
文章被收录于专栏:前端达人前端达人
运行总次数:0
代码可运行

随着机器学习技术的普及,不再仅限于Python和数据科学专家。通过TensorFlow.js,你可以将强大的机器学习能力带入你的JavaScript应用中。不论是网页、移动端还是桌面应用,集成机器学习都能显著提升功能性和用户体验。在本指南中,我们将探讨如何设置TensorFlow.js,构建和训练模型,并实现实际应用。

机器学习与TensorFlow.js简介

在深入细节之前,让我们先了解一些基本概念。机器学习是人工智能(AI)的一个子集,能够使系统从数据中学习,并在没有明确编程的情况下随着时间的推移提高其性能。

TensorFlow.js是由Google开发的一个开源库,允许你直接在浏览器和Node.js环境中定义、训练和运行机器学习模型。

为什么选择TensorFlow.js?

使用TensorFlow.js有以下几个优点:

  1. 跨平台:可以在浏览器、Node.js、移动设备,甚至物联网设备上运行模型。
  2. 高性能:利用WebGL在浏览器中进行GPU加速计算。
  3. 易于使用:借助JavaScript丰富的生态系统和对Web开发者的熟悉度。
  4. 实时应用:在浏览器中直接实现实时机器学习应用。

要深入了解TensorFlow.js的功能,可以查看官方文档。

https://www.tensorflow.org/js

设置TensorFlow.js项目

让我们从设置一个基本的TensorFlow.js项目开始。你可以在浏览器和Node.js环境中使用TensorFlow.js。

在浏览器中使用TensorFlow.js

创建一个新的项目目录:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mkdir tfjs-project
cd tfjs-project

初始化一个新的Node.js项目:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm init -y

安装TensorFlow.js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install @tensorflow/tfjs

创建一个HTML文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TensorFlow.js Example</title>
</head>
<body>
    <script src="node_modules/@tensorflow/tfjs/dist/tf.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

创建一个JavaScript文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import * as tf from '@tensorflow/tfjs';

// 定义一个简单的模型
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// 编译模型
model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});

// 生成一些训练用的合成数据
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// 训练模型
model.fit(xs, ys, {epochs: 10}).then(() => {
    // 使用模型进行预测
    model.predict(tf.tensor2d([5], [1, 1])).print();
});

运行本地服务器:使用http-server工具本地运行文件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g http-server
http-server

在Node.js中使用TensorFlow.js

创建一个新的项目目录:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mkdir tfjs-node-project
cd tfjs-node-project

初始化一个新的Node.js项目:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm init -y

安装TensorFlow.js for Node.js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install @tensorflow/tfjs-node

创建一个JavaScript文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const tf = require('@tensorflow/tfjs-node');

// 定义一个简单的模型
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// 编译模型
model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});

// 生成一些训练用的合成数据
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// 训练模型
model.fit(xs, ys, {epochs: 10}).then(() => {
    // 使用模型进行预测
    model.predict(tf.tensor2d([5], [1, 1])).print();
});

运行你的Node.js脚本:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
node main.js

构建和训练机器学习模型

现在我们已经设置好了TensorFlow.js环境,接下来让我们深入了解如何构建和训练机器学习模型。

定义模型

在TensorFlow.js中,你可以使用顺序API或功能性API定义模型。顺序API适用于简单的、可堆叠的层,而功能性API则更灵活,可以处理更复杂的架构。

示例:顺序模型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const model = tf.sequential();
model.add(tf.layers.dense({units: 10, inputShape: [4]}));
model.add(tf.layers.dense({units: 1}));
model.compile({optimizer: 'adam', loss: 'meanSquaredError'});

示例:功能性模型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const input = tf.input({shape: [4]});
const dense1 = tf.layers.dense({units: 10, activation: 'relu'}).apply(input);
const output = tf.layers.dense({units: 1}).apply(dense1);
const model = tf.model({inputs: input, outputs: output});
model.compile({optimizer: 'adam', loss: 'meanSquaredError'});

训练模型

训练模型包括为其提供数据,并指定epochs(数据集的迭代次数)和batch size(每次梯度更新的样本数)。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const xs = tf.tensor2d([[1, 2, 3, 4], [2, 3, 4, 5]], [2, 4]);
const ys = tf.tensor2d([[5], [7]], [2, 1]);

model.fit(xs, ys, {epochs: 10, batchSize: 2}).then(() => {
    model.predict(tf.tensor2d([[3, 4, 5, 6]], [1, 4])).print();
});

实际应用案例

让我们探讨一些将机器学习集成到JavaScript项目中的实际应用。

图像分类

图像分类涉及从预定义的类别集合中为图像分配标签。

示例:使用预训练模型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const img = document.getElementById('image');
const model = await tf.loadGraphModel('https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v2_140_224/classification/3/default/1');

const tensor = tf.browser.fromPixels(img).resizeNearestNeighbor([224, 224]).toFloat().expandDims();
const predictions = await model.predict(tensor).data();
console.log(predictions);

自然语言处理(NLP)

NLP任务包括文本分类、情感分析和语言翻译。

示例:情感分析

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const model = await tf.loadLayersModel('https://tfhub.dev/google/tfjs-model/toxicity/1/default/1/model.json');
const sentences = ['I love this!', 'I hate this!'];

const predictions = await model.classify(sentences);
predictions.forEach((p, i) => {
    console.log(`${sentences[i]}: ${p.label} - ${p.results[0].match}`);
});

实时对象检测

对象检测涉及识别图像中的对象并定位它们。

示例:使用预训练模型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const video = document.getElementById('video');
const model = await tf.loadGraphModel('https://tfhub.dev/tensorflow/tfjs-model/coco-ssd/1/default/1/model.json');

const detectObjects = async () => {
    const predictions = await model.detect(video);
    console.log(predictions);
};

video.addEventListener('play', () => {
    setInterval(detectObjects, 100);
});

性能考虑和优化技巧

在将机器学习模型集成到应用程序中时,考虑性能和优化是至关重要的。

使用WebGL进行GPU加速:TensorFlow.js可以利用WebGL进行GPU加速,从而显著提高性能。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const model = await tf.loadLayersModel('model.json', 
{fromTFHub: true, useWebGL: true});

优化模型大小:较小的模型加载和运行更快。使用模型量化和剪枝技术来减少模型大小。

高效的数据处理:使用高效的数据结构和批处理来处理大型数据集。

分析和调试:使用TensorFlow.js内置的分析工具来识别和解决性能瓶颈。

结束

通过使用TensorFlow.js将机器学习与JavaScript集成,网页开发者可以打开一个充满可能性的世界。从设置第一个项目到构建和部署实际应用,TensorFlow.js使在JavaScript中利用机器学习的力量变得既可访问又高效。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-07-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何使用900万张开放图像训练600类图片分类器
如果你正在尝试构建一个图片分类器,但是需要训练集,你最好的选择是查看 Google Open Images 。
AI研习社
2019/07/15
1.1K0
如何使用900万张开放图像训练600类图片分类器
手把手搭建一个【卷积神经网络】
本文介绍卷积神经网络的入门案例,通过搭建和训练一个模型,来对10种常见的物体进行识别分类;使用到CIFAR10数据集,它包含10 类,即:“飞机”,“汽车”,“鸟”,“猫”,“鹿”, “狗”,“青蛙”,“马”,“船”,“卡车” ;共 60000 张彩色图片;通过搭建和训练卷积神经网络模型,对图像进行分类,能识别出图像是“汽车”,或“鸟”,还是其它。
一颗小树x
2021/05/12
1.5K0
手把手搭建一个【卷积神经网络】
手把手教你使用CNN进行交通标志识别(已开源)
在本文中,使用Python编程语言和库Keras和OpenCV建立CNN模型,成功地对交通标志分类器进行分类,准确率达96%。开发了一款交通标志识别应用程序,该应用程序具有图片识别和网络摄像头实时识别两种工作方式。
小白学视觉
2022/12/28
3.3K0
手把手教你使用CNN进行交通标志识别(已开源)
Python+Tensorflow+Opencv人脸识别(任意数量人脸)[通俗易懂]
一直想做机器学习的东东,最近由于工作的调整,终于有开始接触的机会了,哈哈。本文主要代码是来源于“就是这个七昂”的博文,传送门在此:https://blog.csdn.net/qq_42633819/article/details/81191308。”就是这个七昂”大大在他的博文中已经将人脸识别的过程讲的很清楚了。说来忏愧,在算法上我没有改变(我自己还没搞清楚,打算好好看看keras),因为在大大博文评论区看到好多人问怎么实现多个用户的人脸识别。刚开始我也在纳闷,怎么做呢?于是我就大胆尝试了一把,
全栈程序员站长
2022/06/26
2.2K0
Python+Tensorflow+Opencv人脸识别(任意数量人脸)[通俗易懂]
利用python、tensorflow、opencv实现人脸识别(包会)!
本人是机械专业在读硕士,在完成暑假实践的时候接触到了人脸识别,对这一实现很感兴趣,所以花了大概十天时间做出了自己的人脸识别。这篇文章应该是很详细的了所以帮你实现人脸识别应该没什么问题。
全栈程序员站长
2022/11/17
4.3K0
利用python、tensorflow、opencv实现人脸识别(包会)!
使用卷积神经网络预防疲劳驾驶事故
美国国家公路交通安全管理局估计,每年有 91,000 起车祸涉及疲劳驾驶的司机,造成约50,000 人受伤和近 800 人死亡。此外,每 24 名成年司机中就有 1 人报告在过去 30 天内在驾驶时睡着了。研究甚至发现,超过20个小时不睡觉相当于血液酒精浓度为0.08%——美国的法律规定的上限。
小白学视觉
2021/10/14
4970
使用Python实现深度学习模型:智能身份验证与防伪
在当今数字化时代,身份验证和防伪技术变得尤为重要。深度学习作为人工智能的一个重要分支,提供了强大的工具来解决这些问题。本文将介绍如何使用Python实现一个基于深度学习的智能身份验证与防伪系统,详细讲解其基本原理和实现步骤。
Echo_Wish
2024/10/08
2230
使用Python实现深度学习模型:智能身份验证与防伪
手把手教你使用 1D 卷积和 LSTM 混合模型做 EEG 信号识别
本文主要介绍了使用 1D 卷积和 LSTM 混合模型做 EEG 信号识别。感谢Memory逆光!
脑机接口社区
2022/08/17
7550
手把手教你使用 1D 卷积和 LSTM 混合模型做 EEG 信号识别
干货 | 史上最全 OpenCV 活体检测教程!
AI 科技评论按:本文来自著名的计算机视觉教学网站「pyimagesearch」,文章作者为 Adrian Rosebrock。在本文中,Adrian 将就「如何鉴别图像/视频中的真实人脸和伪造人脸」这一问题进行深入的分析,并介绍使用基于 OpenCV 的模型进行活体检测的具体方法。雷锋网 AI 科技评论编译如下。
AI研习社
2019/05/08
1.8K0
干货 | 史上最全 OpenCV 活体检测教程!
独家 | 10分钟搭建你的第一个图像识别模型(附步骤、代码)
本文介绍了图像识别的深度学习模型的建立过程,通过陈述实际比赛的问题、介绍模型框架和展示解决方案代码,为初学者提供了解决图像识别问题的基础框架。
数据派THU
2019/03/08
1.7K0
独家 | 10分钟搭建你的第一个图像识别模型(附步骤、代码)
Transformers 4.37 中文文档(四)
www.youtube-nocookie.com/embed/KWwzcmG98Ds
ApacheCN_飞龙
2024/06/26
4870
Transformers 4.37 中文文档(四)
独家 | 手把手教你用Python构建你的第一个多标签图像分类模型(附案例)
翻译:吴金笛 校对:郑滋 本文约4600字,建议阅读12分钟。 本文明确了多标签图像分类的概念,并讲解了如何构建多标签图像分类模型。 介绍 你正在处理图像数据吗?我们可以使用计算机视觉算法来做很多事情
数据派THU
2019/05/17
1.9K0
独家 | 手把手教你用Python构建你的第一个多标签图像分类模型(附案例)
“花朵分类“ 手把手搭建【卷积神经网络】
本文介绍卷积神经网络的入门案例,通过搭建和训练一个模型,来对几种常见的花朵进行识别分类;
一颗小树x
2021/05/13
2.1K0
“花朵分类“ 手把手搭建【卷积神经网络】
张海腾:语音识别实践教程
作为智能语音交互相关的从业者,今天以天池学习赛:《零基础入门语音识别:食物声音识别》为例,带大家梳理一些自动语音识别技术(ASR)关的知识,同时给出线上可运行的完整代码实践,供大家练习。
Datawhale
2021/06/01
2.6K0
张海腾:语音识别实践教程
基于 Keras 和 dlib 的人脸识别实践
这次的实践是基于很小的数据集,搭建的系统也比较粗糙,只是个toy implementation。主要用来练手和熟悉流程的。
caoqi95
2019/03/27
1.2K0
基于 Keras 和 dlib 的人脸识别实践
使用Python实现深度学习模型:智能垃圾分类与环境保护
智能垃圾分类是实现环境保护和资源回收的重要手段。通过深度学习技术,我们可以自动识别和分类垃圾,从而提高垃圾处理的效率。本文将介绍如何使用Python和深度学习库TensorFlow与Keras来构建一个简单的垃圾分类模型。
Echo_Wish
2024/08/07
3410
使用Python实现深度学习模型:智能垃圾分类与环境保护
面向计算机视觉的深度学习:6~10
在本章中,我们将学习相似性学习并学习相似性学习中使用的各种损失函数。 当每个类别的数据集都很小时,相似性学习对我们很有用。 我们将了解可用于人脸分析的不同数据集,并建立用于人脸识别,界标检测的模型。 我们将在本章介绍以下主题:
ApacheCN_飞龙
2023/04/23
9190
实战|手把手教你训练一个基于Keras的多标签图像分类器
原文链接:https://www.pyimagesearch.com/2018/05/07/multi-label-classification-with-keras/
kbsc13
2019/08/16
2K1
医学图像 | 使用深度学习实现乳腺癌分类(附python演练)
乳腺癌是全球第二常见的女性癌症。2012年,它占所有新癌症病例的12%,占所有女性癌症病例的25%。
磐创AI
2019/09/24
2.7K0
医学图像 | 使用深度学习实现乳腺癌分类(附python演练)
通过深度学习实现安全帽佩戴的检测
前一段时间做企业的智能安全项目,我们在面对一些问题时,大胆采用深度学习的方法,解决传统算法和统计学算法不好实现的问题,今天就和大家分享一下,如何解决通过视频监控检测工人是否佩戴安全帽的深度学习算法。
用户1332428
2018/03/09
3.7K2
通过深度学习实现安全帽佩戴的检测
推荐阅读
相关推荐
如何使用900万张开放图像训练600类图片分类器
更多 >
LV.0
深圳魔图互联科技有限公司算法工程师
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验