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.mzph.cn/news/101501.shtml

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

相关文章

es elasticsearch 基础

es https://www.elastic.co/guide/en/elasticsearch/reference/6.8/getting-started.html 倒排索引&#xff1a; 正排–>从目录到文章内容 倒排–>内容到目录文章标题 if we dont need full text search ,we dont need to create 倒排 using text type 分词&#xff1a…

C语言-贪吃蛇 1.输入控制ncurse

一、为什么要用nurse C语言中的gets()、scanf()、getchar()等函数是在用户输入后需要按下Enter键才能执行代码&#xff0c;而贪吃蛇要求按下按键后立即对蛇的方向进行操作&#xff0c;所以根据贪吃蛇功能的需求引入ncurse&#xff0c;让用户输入后就能让蛇进行对应的行动。 二、…

10.本项目的简单介绍及所用工具

本项目的简单介绍及所用工具 本项目的层次架构适合初学者或者有一些基础的同学&#xff0c;项目整体简单明了&#xff0c;有着非常严谨的逻辑思维&#xff0c;并且在前面文章中也讲了一些项目中所需要的软件安装配置以及一些前置的在本项目中所需要的java基础知识。 项目名称 …

服务器与网站部署知识体系目录

1.网站部署必备知识与实践操作 服务器全套基础知识&#xff1a;包含基本概念&#xff0c;作用&#xff0c;服务器选择&#xff0c;服务器管理等域名相关基础知识普及域名备案流程&#xff08;个人备案&#xff0c;腾讯云 / 阿里云&#xff09;将网站域名访问从http升级到https…

8路高速光栅尺磁栅尺编码器4倍频计数转Modbus TCP网络模块 YL99-RJ45

特点&#xff1a; ● 光栅尺磁栅尺解码转换成标准Modbus TCP协议 ● 高速光栅尺磁栅尺4倍频计数&#xff0c;频率可达5MHz ● 模块可以输出5V的电源给光栅尺或传感器供电 ● 支持8个光栅尺同时计数&#xff0c;可识别正反转 ● 可以设置作为16路独立DI高速计数器 ● 可网…

小程序js(正则表达式):文本框对手机号进行标准化规范

一、使用 <input> 组件的 type 属性设置为 "number"&#xff0c;并结合正则表达式进行校验。 <input type"number" bindinput"checkPhoneNumber" /> Page({checkPhoneNumber: function (e) {const phoneNumber e.detail.value;//…

智慧办公数据可视化大屏设计(数据可视化)、大数据、数据大屏、办公数据大屏、办公数据

本次分享的作品是用软件Axure8.0&#xff08;兼容9和10&#xff09;制作的智慧办公数据进行的可视化大屏设计&#xff0c;主要是针对办公的综合数据、工位数据、会议室数据、访客数据、能耗数据以及设备智控数据进行可视化数据分析。 1、综合分析:对办公室的整体数据、空气质量…

JVM第一讲:JVM相关知识体系详解+面试(P6熟练 P7精通)

JVM相关知识体系详解面试(P6熟练 P7精通) 面试时常常被面试官问到JVM相关的问题。本系列将给大家构建JVM核心知识点全局知识体系&#xff0c;本文是JVM第一讲&#xff0c;JVM相关知识体系详解和相关面试题梳理。 文章目录 JVM相关知识体系详解面试(P6熟练 P7精通)1、JVM学习建议…

设计模式 - 行为型考点模式:责任链模式(概述 | 案例实现 | 优缺点 | 使用场景)

目录 一、行为型模式 1.1、责任链模式 1.1.1、概述 1.1.2、案例实现 1.1.3、优缺点 1.1.4、使用场景 一、行为型模式 1.1、责任链模式 1.1.1、概述 为了避免请求发送者和多个请求处理者耦合在一起&#xff0c;就将所有请求处理者通过前一个对象记住下一个对象的引用的方…

基于服务质量(QoS, quality of service)和基于用户体验质量(QoE, quality of experience)

《Semantic Communications for Future Internet: Fundamentals, Applications, and Challenges》 传统通信系统中的资源分配框架旨在最小化误码率、误包率和中断概率等指标。然而&#xff0c;语义通信不再关注比特。通常&#xff0c;在资源分配方案的设计中&#xff0c;应该考…

生产环境一次Linux时钟同步无法正常同步的问题

Linux和时间同步的大部分命令都在下边这里了 有三台服务器时间不准&#xff0c;重启chronyd服务后就好了 还有一台说啥都和时间服务器差4秒&#xff0c;重启服务也不管用 最后修改配置文件发现需要在时间服务器后边加上iburst server 时间服务器的IP iburst 下边是用到的一下…

联邦学习综述二

联邦学习漫画 联邦学习漫画链接: https://federated.withgoogle.com/ Federated Analytics: Collaborative Data Science without Data Collection 博客链接: https://blog.research.google/2020/05/federated-analytics-collaborative-data.html 本篇博客介绍了联邦分析&a…

Filebeat、metricbeat、kafka

kibana机子上安装filebeat&#xff08;因为有nginx&#xff09; 上传filebrat包 在es概览查看 上传metricbeat 排错 tailf !$ Kibana-Vlsualize查看 kafka(卡夫卡) kafka是一个分布式的消息发布—订阅系统&#xff08;kafka其实是消息队列&#xff09;消息队列中间件 Kafka的…

汇编第3章 80X86指令系统和寻址方式

3.1 8086指令系统概述 3.1.1汇编指令 汇编指令由操作码和操作数组成&#xff0c;操作码是指令的操作命令&#xff0c;操作数是指令的操作对象。 指令格式&#xff1a;[标号:] 指令助记符 [操作数1] [,[操作数2] [,[操作数3]]] [;注释] 标号&#xff1a;在汇编语言中标号是由…

Pycharm远程debug代码,一直进入remote_sources

最近debug发现代码一直跳转到 AppData\Local\JetBrains\PyCharm2022.2\remote_sources\xxx这样的目录下&#xff0c;查找百度也没有找到解决的方法。 最后发现&#xff0c;在Run的配置这&#xff0c;有一个Path mappings是空的&#xff0c;把这里的映射填成本地项目和远程项目…

HDR-ISP_unpack_depwl_01_20231002

https://github.com/JokerEyeAdas/HDR-ISP/tree/main 1.unpack&#xff1a;解析raw图 (1)unpack&#xff1a;2个字节1个像素 (2)mipi10&#xff1a;5个字节4个像素 [p1 9:2][p2 9:2][p3 9:2][p4 9:2][(p1 1:0)(p2 1:0)(p3 1:0)(p4 1:0)] (3)mipi12&#xff1a;3个字节2个像…

vscode安装svn扩展(windows)

一、安装 1.1 环境说明 操作系统 windows 10 1.2 安装过程 1. 安装svn 双击安装程序 点击next 继续next 继续next 点击Install 在弹出框中点击 是 开始安装进度&#xff0c;一会将安装成功 安装结束 右键菜单栏中已经有svn选项&#xff0c;并且能正常拉取以…

vue3+elementui实现表格样式可配置

后端接口传回的数据格式如下图 需要依靠后端传回的数据控制表格样式 实现代码 <!-- 可视化配置-表格 --> <template><div class"tabulation_main" ref"myDiv"><!-- 尝试过在mounted中使用this.$refs.myDiv.offsetHeight,获取父元素…

[NPUCTF2020]ezinclude 文件包含两大 getshell方式

PHP LFI 利用临时文件 Getshell 姿势 | 码农家园 说一下我的思路吧 robots没有 扫描发现存在 dir.php 然后404.html 报错 apache 2.18 ubuntu 这个又正好存在漏洞 所以前面全去看这个了 结果根本不是这样做。。。 正确的思路是这样 发现变量 认为是 name和 pass传递参数…

Jetson Orin NX 开发指南(6): VINS-Fusion-gpu 的编译和运行

一、前言 由于 Jetson 系列的开发板 CPU 性能不是很好&#xff0c;因此在处理图像数据时往往需要 GPU 加速&#xff0c;而 VINS-Fusion 是针对同步定位与建图&#xff08;SLAM&#xff09;问题中十分出色的视觉算法&#xff0c;但是其在图像处理过程中资源消耗较大&#xff0c…