TensorFlow学习:在web前端如何使用Keras 模型

前言

在上篇文章 TensorFlow学习:使用官方模型进行图像分类、使用自己的数据对模型进行微调中我们学习了如何使用官方模型,以及使用自己的数据微调模型。

但是吧,代码一直是跑在Python里,而我本身是做前端开发的。我是很想让它在前端进行浏览器里进行运行。

谷歌贴心的为我们准备了 TensorFlow.jsTensorFlow.js 是一个 JavaScript 库,用于在浏览器和 Node.js 训练和部署机器学习模型。

这篇文章我们来学习如何在前端运行模型,模型的话就用上一篇文章里训练的花朵分类模型。

官方文档:TensorFlow.js 官方文档

注: 下面是我的采坑心得,我这是第一次学习,第一次搞。你要是按照我的步骤遇到了其他问题,不要问我,我也不会。

建议按顺序观看,这是一个小系列,适合像我这样的初学者入门

配置环境:windows环境下tensorflow安装

图片分类案例学习:TensorFlow案例学习:对服装图像进行分类

使用官方模型,并进行微调:TensorFlow学习:使用官方模型进行图像分类、使用自己的数据对模型进行微调

将模型转换,在前端使用:TensorFlow学习:在web前端如何使用Keras 模型

学习

处理模型

Keras 模型(通常通过 Python API 创建)可能保存成多种格式之一。完整模型格式可以转换成 TensorFlow.js Layers 格式,这种格式可以直接加载到 TensorFlow.js 中进行推断或进一步训练。

目标 TensorFlow.js Layers 格式是一个包含 model.json 文件和一组二进制格式的分片权重文件的目录。model.json 文件包含模型拓扑(又称“架构”或“计算图”:它是对层及其连接方式的描述)和权重文件的清单。

我们上一篇文章训练出的模型就是Keras 模型,这里需要对其进行转换。

安装

pip install tensorflowjs

就是这一步上来就被搞惨了。
在这里插入图片描述
最开始下载,还没下载多少就超时了,直接下载不了。后来查到可以使用国内镜像下载

 pip install tensorflowjs  -i https://pypi.tuna.tsinghua.edu.cn/simple

下载速度是变快了很多,结果下载到最后又来一个依赖冲突,最后又下载失败了。最终解决完这个问题是因为在web端使用,也需要下载

npm install @tensorflow/tfjs

当时我在想这两个是不是一个东西啊,问了一下gpt,npm下载的这个还真的可以用来进行模型转换。

这里我建议,即使你pip下载成功了,最好还是使用npm下载的这个进行模型转换。因为这样可以保证tensorflowjs版本一致,避免因为版本问题导致最后使用时又出问题

转换

这个也是个坑啊,文档是这样说的
在这里插入图片描述
但是在上一篇文章中,我最后保存的不是.h5格式啊,然后又回去跑模型,最后model.save('my_model.h5'),将模型保存为.h5格式。再然后转换模型

tensorflowjs_converter --input_format=keras flower_model.h5 flower_js_model

在这里插入图片描述
在这里插入图片描述
看样子是成功了,结果还真没成功,在前端加载时又报错了。没办法,百度查、翻文档。然后看见了这个
在这里插入图片描述
还真需要用这个,不过上面的代码有点问题,不需要有\ 符号。正确代码应该是

tensorflowjs_converter --input_format=tf_saved_model   flower_model web_model

这里要注意:

  • 我们还是使用的npm下载的依赖,不是pip下载的依赖
  • --input_format=tf_saved_model,指定输入格式
  • flower_model web_model这是两个路径,前面的是模型的逻辑,后面那个是转换完成后的输出路径
  • 这里加载的模型不是.h5,就是.pb文件所在的文件夹,记住是文件夹,不是目录

总之就是将flower_model下的模型进行转换,将转换后的模型输出到web_model目录下
在这里插入图片描述

在前端使用

这里要特别注意对输入图片的处理,一开始就是因为输入图片处理的不正确,导致模型在预测时结果不正确。后来各种查资料,才解决,使用代码如下:

<template><div class="page-container"><div class="first-title">官方文档:<a href="https://tensorflow.google.cn/js/models?hl=zh-cn">https://tensorflow.google.cn/js/models?hl=zh-cn</a></div><div class="img-list"><imgv-for="img in imageList":key="img.name":src="img.url":id="img.name":class="activeImg == img.name ? 'img-item img-item-active' : 'img-item'"@click="changeImg(img)"/></div><div style="margin-top: 20px">结果是:{{ result }}</div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as tf from "@tensorflow/tfjs";// 图片
const imageList = ref([]);
// 当前选中的图片
const activeImg = ref("f1");
// 结果
const result = ref("");
// 图片列表
const IMAGES = [{name: "f1",url: "../assets/f1.jpg",},{name: "f2",url: "../assets/f2.jpg",},{name: "f3",url: "../assets/f3.jpg",},{name: "f4",url: "../assets/f4.jpg",},
];
const IMAGENET_CLASSES = ["雏菊", "蒲公英", "玫瑰", "向日葵", "郁金香"];onMounted(() => {imageList.value = [];IMAGES.forEach((item) => {import(item.url).then((img) => {imageList.value.push({name: item.name,url: img.default,});});});
});// 切换图片
const changeImg = async (img) => {activeImg.value = img.name;// 识别图片await identify(img.name);
};// 识别图片
const identify = async (id) => {const imageElement = await document.getElementById(id);console.log("图片", imageElement);// 载入模型const model = await tf.loadGraphModel("../../public/web_model/model.json");console.log("模型:", model);// 图像预处理const imageTensor = preprocessImage(imageElement);// 对图片进行预测const predictions = await model.predict(imageTensor);console.log("predictions:", predictions);// 获取预测结果const predictedIndex = tf.argMax(predictions, 1).dataSync()[0];const predictedLabel = IMAGENET_CLASSES[predictedIndex];result.value = predictedLabel;console.log("结果:", predictedLabel, predictedIndex);
};// 图像预处理
const preprocessImage = (img) => {// 将图像转换为张量对象并将像素值转换为浮点数类型const tensor = tf.browser.fromPixels(img).toFloat();// 张量的轴上添加一个维度,以适应模型的输入要求const expandedDims = tensor.expandDims();// 调整图像的尺寸为224x224,尺寸是模型的要求const resizedImg = tf.image.resizeBilinear(expandedDims, [224, 224]);// 将像素值归一化到范围[0, 1]之间const normalizedImg = tf.div(resizedImg, 255.0);// 返回归一化后的图像张量return normalizedImg;
};
</script><style lang="scss" scoped>
.img-list {display: flex;.img-item {width: 240px;height: 180px;border-radius: 5px;cursor: pointer;padding: 10px;}.img-item-active {border: 2px solid red;}
}
</style>

最终效果
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Idea报错 java: 程序包org.springframework.boot不存在 解决方法

发现我的是因为更改了maven的主路径和本地仓库路径&#xff0c;但是新建了一个工程后&#xff0c;设置就恢复默认了。需要重新设置正确路径。 应用后会重新下载依赖项 之后虽然还会报错&#xff0c;但是已经不影响项目运行&#xff0c;配置成功

用 docker 创建 jmeter 容器, 实现性能测试,该如何下手?

用 docker 创建 jmeter 容器, 实现性能测试 我们都知道&#xff0c;jmeter可以做接口测试&#xff0c;也可以用于性能测试&#xff0c;现在企业中性能测试也大多使用jmeter。docker是最近这些年流行起来的容器部署工具&#xff0c;可以创建一个容器&#xff0c;然后把项目放到…

Mybatis 实现简单增删改查

目录 前言 一、Mybatis是什么 二、配置Mybatis环境 三、创建数据库和表 四、添加业务代码 4.1、添加实体类 4.2、添加mapper接口 4.3、添加实现接口方法的xml文件 五、简单的增删改查操作及单元测试 5.1、单元测试 单元测试具体步骤&#xff1a; 单元测试如何才能不污…

day27--AJAX(bootstrap之modal,toast;接口文档的一些用法;AJAX原理)

目录 Bootstrap之Modal&#xff1a; 显示和隐藏方法 通过自定义属性&#xff1a; 使用JS来控制弹框&#xff1a; Bootstrap之Toast&#xff1a; 接口文档一些用法&#xff1a; 删除图书&#xff1a; 图片上传&#xff1a; 图片上传步骤&#xff1a; 修改头像&#xf…

【单片机】19-TFT彩屏

一、背景知识--显示器 1.什么是TFT &#xff08;1&#xff09;LCD显示器的构成&#xff1a;液晶面板驱动器【电压驱动】控制器【逻辑控制】 &#xff08;2&#xff09;液晶面板大致分为&#xff1a;TN&#xff0c;TFT&#xff0c;IPS等 &#xff08;3&#xff09;驱动器是跟随…

MS5611的ZYNQ驱动试验之一 分析

0&#xff0c;MS5611框图 1&#xff0c;原理图 项目需要用到MS5611气压计模块&#xff0c;原理图很简单明了&#xff0c;如下&#xff1a; 这里PS接GND是SPI接口模式&#xff0c;PS接VDD是I2C接口模式。我在设计原理图时候直接设置成了SPI模式&#xff0c;当然这个SPI不是纯粹意…

203、RabbitMQ 之 使用 direct 类型的 Exchange 实现 消息路由 (RoutingKey)

目录 ★ 使用direct实现消息路由代码演示这个情况二ConstantUtil 常量工具类ConnectionUtil 连接RabbitMQ的工具类Publisher 消息生产者测试消息生产者 Consumer01 消息消费者01测试消费者结果&#xff1a; Consumer02 消息消费者02测试消费者结果&#xff1a; 完整代码&#x…

代理和多级代理

文章目录 代理使用场景代理过程实验演示多级代理 代理使用场景 1、拿下远程 web 服务器 2、webshell 链接不稳定&#xff0c;需要使用稳定的木马程序 3、远程服务器无法直接链接攻击者电脑 4、需要借助公网vps转发来自失陷服务器的木马流量 5、借助frp服务端(vps)和客户端(内网…

实现Element Select选择器滚动加载

<template><el-selectpopper-class"more-tag-data"v-model"tagId"filterableplaceholder"请选择"focus"focusTag"><el-optionv-for"(item, index) in taskTagLists":key"index":label"item.n…

如何在小程序中设置导航栏文字颜色和背景颜色

不同商家有不同的颜色风格&#xff0c;例如有些做设计的公司&#xff0c;主要是黑色风格&#xff1b;有些卖珠宝的商家&#xff0c;主要是金色风格&#xff1b;他们的小程序&#xff0c;也需要进行同样的风格设定。下面具体介绍怎么在小程序中进行整个风格设定。 1. 在小程序管…

破局「二次创业」:合思的新解法

在新的水温下&#xff0c;寻找更为良性的发展正在成为企业的必答题。对此&#xff0c;合思给出的不仅是一份更“省”的答题方法。也更是从认知层到行动层&#xff0c;最后到工具层的一张授人以渔的“渔网”。 作者|思杭 编辑|皮爷 出品|产业家 今年4月初&#xff0c;广州…

lvgl 界面管理器

lv_scr_mgr lvgl 界面管理器 适配 lvgl 8.3 降低界面之间的耦合使用较小的内存&#xff0c;界面切换后会自动释放内存内存泄漏检测 使用方法 在lv_scr_mgr_port.h 中创建一个枚举&#xff0c;用于界面ID为每个界面创建一个页面管理器句柄将界面句柄添加到 lv_scr_mgr_por…

【基础篇】三、Flink集群角色、系统架构以及作业提交流程

文章目录 1、集群角色2、部署模式3、Flink系统架构3.1 作业管理器&#xff08;JobManager&#xff09;3.2 任务管理器&#xff08;TaskManager&#xff09; 4、独立部署会话模式下的作业提交流程5、Yarn部署的应用模式下作业提交流程 1、集群角色 Flink提交作业和执行任务&…

EXCEL——根据单元格值设置不同色阶

方法&#xff1a;开始—>条件格式—>色阶&#xff08;默认色阶或复杂色阶&#xff09;。 一、默认色阶 如图&#xff0c;可选择自定义的色阶模式。 二、复杂色阶 1、如图&#xff0c;点击"其他规则" 2、选择复杂格式 此时可以看到&#xff0c;支持多种格式…

有 AI,无障碍,AIoT 设备为视障人群提供便利

据世界卫生组织统计&#xff0c;全球共 22 亿人视力受损&#xff0c;包含 2.85 亿视障人群和 3,900 万全盲人群。而且&#xff0c;这一数字将随老龄化加剧不断增加。 虽然视障人群面临着诸多不便&#xff0c;但是针对视障人群的辅助设备却存在成本高、维护困难、操作复杂等问题…

给你一个项目,你将如何开展性能测试工作?

一、性能三连问 1、何时进行性能测试&#xff1f; 性能测试的工作是基于系统功能已经完备或者已经趋于完备之上的&#xff0c;在功能还不够完备的情况下没有多大的意义。因为后期功能完善上会对系统的性能有影响&#xff0c;过早进入性能测试会出现测试结果不准确、浪费测试资…

MQTT C库下载

方法一、从Eclipse paho下载 https://eclipse.dev/paho/index.php?pagedownloads.php 方法二&#xff0c;从MQTT官网下载 https://mqtt.org/software/ https://os.mbed.com/teams/mqtt/code/MQTTPacket/ MQTTPacket源码和paho下载的差不多 方法三、从Keil5 包管理工具…

centos7安装db2 version11.1

centos7安装DB2 操作系统 linux centos7 DB2版本 11.1 1、取包 IBM MRS Tool 将安装包放在 /home/software 下面 mkdir -p /home/software cd /home/software wget https://iwm.dhe.ibm.com/sdfdl/v2/regs2/db2pmopn/Express-C/DB2ExpressC11/Xa.2/Xb.aA_60_-i7wWKFMFpbW1xl1…

【数据结构】什么是线性表?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 线性表的定义 生活中常见的线性表 结语 线性表的定义 线性结构的特点: 在数据元素的非空有限集中: 存在唯一的一个被称作"第一个"的数据元素;存在唯一的一个…

10个打工人必备AI神器,升职加薪靠AI

HI&#xff0c;同学们&#xff0c;我是赤辰&#xff0c;本期是第18篇AI工具类教程&#xff0c;文章底部准备了粉丝福利&#xff0c;看完后可领取&#xff01;1. Runway&#xff08;文字转视频AI工具&#xff09; 只需要一句提示词就能精确生成你所想象的视频场景&#xff0c;还…