使用 TensorFlow.js 将机器学习引入您的 Web 应用程序

如何使用 TensorFlow.js 在您的 Web 应用程序中实施机器学习

原文作者: Abhay Singh Rathore

机器学习 (ML) 不再是一个崇高、遥不可及的概念。借助 TensorFlow.js 等库,开发人员现在可以将 ML 整合到他们的 Web 应用程序中。例如,您可以创建一个系统,根据用户的浏览量和搜索量推荐社交媒体广告。

这篇文章是您使用 TensorFlow.js 实现 ML 的指南。我们将讨论 TensorFlow.js 是什么、如何使用它,以及如何在您的 Web 应用程序中实现一个简单的推荐系统。

TensorFlow.js 简介

TensorFlow.js 是谷歌开发的一个 JavaScript 库,用于在浏览器和 Node.js 上训练和部署 ML 模型。它允许您在 JavaScript 中开发 ML 模型,并直接在浏览器或 Node.js 中使用 ML。

借助 TensorFlow.js,您可以从头开始创建新的 ML 模型,也可以使用预先训练的模型。它的灵活性和可访问性使其成为开发人员的热门选择。

设置 TensorFlow.js

要开始在您的 Web 应用程序中使用 TensorFlow.js,您需要将以下脚本标记添加到您的 HTML 文件中:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.10.0/dist/tf.min.js"></script>

构建推荐系统

现在,让我们构建一个简单的推荐系统,根据用户行为推荐社交媒体广告。

第 1 步:定义数据

首先,我们需要训练数据。对于这个例子,让我们考虑一个简化的场景,我们只查看用户过去的广告点击和这些广告的类别。

我们的输入数据(特征)将是用户过去点击过的广告类别。我们的输出数据(标签)将是用户接下来点击的广告类别。

在现实世界中,您可能会从各种来源获得更多数据,例如用户人口统计、浏览历史等。

第 2 步:预处理您的数据

在我们将数据提供给模型之前,我们需要对其进行预处理。TensorFlow.js 为此提供了实用程序。在我们的例子中,我们会将我们的分类数据编码为我们的模型可以理解的数字数据。

第 3 步:定义和训练模型

接下来,我们将定义我们的模型。我们将使用顺序模型,它是一堆层,其中每一层都有一个输入张量和一个输出张量。

const model = tf.sequential();

model.add(tf.layers.dense({units: 10, inputShape: [numOfCategories]}));
model.add(tf.layers.dense({units: numOfCategories, activation: 'softmax'}));

model.compile({optimizer: 'sgd', loss: 'categoricalCrossentropy', metrics: ['accuracy']});

在这里,我们有两层。第一个是我们的隐藏层,第二个是我们的输出层。“softmax”激活函数确保我们的输出是广告类别的概率分布。

接下来,我们使用预处理的数据训练我们的模型。

await model.fit(trainFeaturesTensor, trainLabelsTensor, {epochs: 100});

第 4 步:做出预测

一旦我们的模型被训练好,我们就可以用它来进行预测。以下是我们为用户预测下一个广告类别的方式:

const prediction = model.predict(userFeaturesTensor);

这将为我们提供广告类别的概率分布。然后我们可以推荐概率最高的广告。

实际应用:社交媒体广告推荐

让我们将其与我们的社交媒体广告推荐场景联系起来。

比如说,用户经常查看和点击与技术和小工具相关的广告。随着时间的推移,我们的模型将学习这种模式。当。。。的时候

用户登录时,我们的模型会以更高的概率推荐来自这些类别的广告。

使用 TensorFlow.js,所有这一切都发生在用户的浏览器中,这使得它更快、更高效。

总之,TensorFlow.js 提供了一种可访问且功能强大的方法来将机器学习整合到您的 Web 应用程序中。正如我们所见,即使使用几行 JavaScript,我们也可以开始进行个性化的广告推荐。编码愉快!

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

ee175ee4284698afe426792c07c328f9.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/30208.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Springcloud之Feign、Hystrix、Ribbon如何设置超时时间

一&#xff0c;概述 我们在微服务调用服务的时候&#xff0c;会使用hystrix、feign和ribbon&#xff0c;比如有一个实例发生了故障而该情况还没有被服务治理机制及时的发现和摘除&#xff0c;这时候客户端访问该节点的时候自然会失败。 所以&#xff0c;为了构建更为健壮的应…

美味度配方

8 种配料每种配料可以放 1 到 5 克&#xff0c;美味度为配料质量之和&#xff0c;给定一个美味度 n&#xff0c;求解 8 种配料的所有搭配方案及方案数量 。 (本笔记适合学了 Python 循环&#xff0c;正在熟炼的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a…

prisma 学习记录

1、prisma 可以看做是一个 ORM。 安装 prisma npm install prisma -D 初始化 prisma , 并设置要链接的数据库 npx prisma init --datasource-provider sqlite --datasource-provider 要使用的数据库 2、prisma 中的模型&#xff0c; 表示底层数据库中的表或者集合。 生成 Pri…

Baumer工业相机堡盟工业相机如何使用BGAPISDK的相机图像时间戳计算运行时间以及时间差(C++)

Baumer工业相机堡盟工业相机如何使用BGAPISDK的相机图像时间戳计算运行时间以及时间差&#xff08;C&#xff09; Baumer工业相机Baumer工业相机BGAPI SDK和图像时间戳的技术背景Baumer工业相机使用BGAPISDK控制相机数据流的方式1.引用合适的类文件2.使用BGAPISDK获取时间戳的方…

shell脚本进阶1——精读ansible+shell脚本

文章目录 一、脚本规划思路二、主控机shell脚本2.1 脚本输出字体特效2.2 生成菜单栏对话框2.3 配置本地yum源仓库2.4 配置受控机yum源2.5 关闭防火墙和selinux2.6 把docker安装包给受控机2.7 安装docker-compose2.8 安装docker2.9 安装ansible2.10 安装pip2.11 主控本机免密登录…

利用谷歌DevTool解决web网页内存泄漏问题

目录 web网页内存泄漏 主要的内存泄漏来源 利用谷歌DevTool定位内存泄漏问题 性能Performance 主要功能 Performance insights性能数据分析 Memory内存 三种模式 相关概念 解决内存泄漏问题 第一步 &#xff1a;是否内存泄漏&#xff1a;js堆直增不降&#xff1b;降…

Unity3d_Cut\Clipping sphere\CSG(boolean)(裁剪模型重合部分)总结

1、https://liu-if-else.github.io/stencil-buffers-uses-in-unity3d/ 下载&#xff1a;https://github.com/liu-if-else/UnityStencilBufferUses 2、手动切割 Unity 模型切割工具,CSG,任意图案,任意切割_unity csg_唐沢的博客-CSDN博客 3、 Shader Unity Shader学习&#x…

CVPR 2023 | 计算机视觉顶会亮点前瞻

在知识和技术都迅速更新迭代的计算机领域中&#xff0c;国际计算机视觉与模式识别会议&#xff08;CVPR&#xff09;是计算机视觉方向的“顶级流量”&#xff0c;引领着学科及相关领域的研究潮流。今天我们为大家带来5篇微软亚洲研究院被 CVPR 2023 收录的论文&#xff0c;主题…

JVM知识点梳理

什么是JVM&#xff1f; JVM是java虚拟机的缩写 &#xff0c;也是java程式可以实现跨平台的关键。 JVM部分需要知道什么东西&#xff1f; JVM的结构和功能、参数配置、GC回收机制、GC回收器极其优缺点。 JVM结构&#xff08;栈&#xff0c;程序计数器&#xff0c;方法区&#xf…

基于深度学习的高精度打电话检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度打电话检测识别系统可用于日常生活中或野外来检测与定位打电话目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的打电话目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检…

《C# 教程》菜鸟教程学习笔记

学习地址 ######C#有用的网站 C# Programming Guide - 介绍了有关关键的 C# 语言特征以及如何通过 .NET 框架访问 C# 的详细信息。Visual Studio - 下载作为 C# 集成开发环境的 Visual Studio 的最新版本。Go Mono - Mono 是一个允许开发人员简单地创建跨平台应用程序的软件平台…

【每日算法】【203. 移除链表元素】

☀️博客主页&#xff1a;CSDN博客主页 &#x1f4a8;本文由 我是小狼君 原创&#xff0c;首发于 CSDN&#x1f4a2; &#x1f525;学习专栏推荐&#xff1a;面试汇总 ❗️游戏框架专栏推荐&#xff1a;游戏实用框架专栏 ⛅️点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd;&…

Docker基本介绍

一、定义 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。 解决了运行环境和配置问题的软件容器&#xff0c; 方便做持续集成并有助于整…

UnityVR--UIManager--UI管理1

目录 前言 UI节点的结构 需要用到的组件 1. CanvasGroup 2. Button等控件的OnClick()监听 3. EventTrigger 建立UI工具集 1. 管理UI节点 2. UIBase包含了以下的工具 建立分面板的管理工具——以主面板MainUi为例 前言 UI在项目中的重要性不言而喻&#xff0c;并且UI控件的…

软件设计师第4题

首先&#xff0c;我是备考2023年上半年的考试。 一、历年考试题 历年的考题如下&#xff0c;从表中分析可以看出&#xff0c;动态规划法、排序算法、回溯法、分治法是很大概率考察的算法&#xff0c;尤其是动态规划法&#xff0c;本身其理解难度较高&#xff0c;且可以出的题型…

【计网】第二章 物理层

文章目录 物理层一、物理层的基本概念二、数据通信的基础知识2.1 数据通信系统的模型2.2 有关信道的基本概念2.3 信道的极限容量2.3.1 奈奎斯特定理2.3.1 香农定理2.3.2 信噪比 三、物理层下面的传输媒体3.1 导引型传输媒体3.2 非导引型传输媒体 四、信道复用技术4.1 频分复用 …

【小沐学Python】Python实现在线电子书(Sphinx + readthedocs + github + Markdown)

文章目录 1、简介2、安装3、创建测试工程4、项目文件结构5、编译为本地文件6、编译为http服务7、更改样式主题8、支持markdown9、修改文档显示结构10、项目托管到github11、部署到ReadtheDocs结语 1、简介 Sphinx 是一个 文档生成器 &#xff0c;您也可以把它看成一种工具&…

STC15WProteus仿真HX711电子秤串口计价称重4x4键盘STC15W4K32S4

STC15WProteus仿真HX711电子秤串口计价称重4x4键盘STC15W4K32S4 Proteus仿真小实验&#xff1a; STC15WProteus仿真HX711电子秤串口计价称重4x4键盘STC15W4K32S4 功能&#xff1a; 硬件组成&#xff1a;STC15W4K32S4单片机 LCD12864显示器4x4矩阵键盘HX711电子秤 1.单片机通…

操作教程:EasyCVR视频融合平台如何配置平台级联?

EasyCVR视频融合平台基于云边端一体化架构&#xff0c;可支持多协议、多类型设备接入&#xff0c;在视频能力上&#xff0c;平台可实现视频直播、录像、回放、检索、云存储、告警上报、语音对讲、电子地图、集群、智能分析以及平台级联等。平台可拓展性强、开放度高、部署轻快&…

NUCLEO-F411RE RT-Thread 体验 (3) - GCC环境 uart驱动的移植以及console的使用

NUCLEO-F411RE RT-Thread 体验 (3) - GCC环境 uart驱动的移植以及console的使用 1、准备工作 在第一节里&#xff0c;我们用stm32cubemx将pa2 pa3管脚配置成usart2&#xff0c;用于跟st-link虚拟串口的打印用&#xff0c;那么我们先重定向printf函数&#xff0c;看这条通道是…