从零开始学机器学习——构建一个推荐web应用
首先给大家介绍一个很好用的学习地址：https://cloudstudio.net/columns
今天，我们终于将分类器这一章节学习完活了，和回归一样，最后一章节用来构建web应用程序，我们会回顾之前所学的知识点，并新增一个web应用用来让模型和用户交互。所以今天的主题是美食推荐。
美食推荐 Web 应用程序
首先，请不要担心，本章节并不会涉及过多的前端知识点。我们此次的学习重点在于机器学习本身，因此我们的目标是将模型打包，使得前端用户能够与模型进行直接的界面交互，而不再依赖于后端输入的形式。
在前面的回归章节中，我们学习了如何使用第三方依赖包 pickle 来创建一个后台生成的 .pkl 后缀的模型文件，并通过 Flask 框架加载该模型，从而在后台暴露接口供调用和分析。今天，我们将探索一个新的知识点——ONNX Web，这将进一步拓宽我们在机器学习模型部署与应用方面的视野。
ONNX Web
ONNX Web 是一个用于在浏览器中运行 ONNX 模型的工具和库，主要用于深度学习模型的推理。ONNX（Open Neural Network Exchange）是一个开放的深度学习模型交换格式，它允许不同深度学习框架之间共享模型。ONNX Web 使得开发者可以将 ONNX 模型直接在网页上运行，通常用于机器学习和深度学习的前端应用。
开发步骤
- 准备 ONNX 模型：首先，需要一个经过训练并导出的 ONNX 模型。
- 引入 ONNX Web 库：在你的前端项目中引入 ONNX Web 的 JavaScript 库。可以通过 npm 安装或直接在 HTML 中使用 CDN。
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.09/dist/ort.min.js"></script>
- 加载模型：使用 ONNX Web API 加载模型并进行推理。
const session = await ort.InferenceSession.create('./model.onnx');
- 进行推理：准备输入数据，并使用加载的模型进行推理。
- 处理输出：根据模型的输出格式处理结果，并在应用中展示。
好的，经过对开发步骤的全面了解后，接下来让我们开始逐步构建一个功能齐全的 Web 应用程序。
构建模型
首先，我们将使用之前清洗后的菜品数据集来训练一个分类模型。
import pandas as pd
from sklearn.model_selection import train_test_split
from sklearn.svm import SVC
from sklearn.model_selection import cross_val_score
from sklearn.metrics import accuracy_score,precision_score,confusion_matrix,classification_report
data = pd.read_csv('../data/cleaned_cuisines.csv')
X = data.iloc[:,2:]
y = data[['cuisine']]
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
model = SVC(kernel='linear', C=10, probability=True,random_state=0)
model.fit(X_train,y_train.values.ravel())
y_pred = model.predict(X_test)
print(classification_report(y_test,y_pred))
关于上述这段代码流程，大家可能已经对其有了一定的了解，因此我将不再进行单独的讲解。
运行结果如下所示：模型的精度表现相对令人满意，达到了一个不错的水平。
precision recall f1-score support
chinese 0.71 0.72 0.72 238
indian 0.90 0.86 0.88 259
japanese 0.76 0.75 0.75 248
korean 0.83 0.78 0.80 233
thai 0.73 0.82 0.77 221
accuracy 0.79 1199
macro avg 0.79 0.79 0.78 1199
weighted avg 0.79 0.79 0.79 1199
模型转换到 Onnx
由于使用到了第三方依赖库，我们需要安装一下，命令如下：
! pip install skl2onnx
from skl2onnx import convert_sklearn
from skl2onnx.common.data_types import FloatTensorType
initial_type = [('float_input', FloatTensorType([None, 380]))]
options = {id(model): {'nocl': True, 'zipmap': False}}
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./model.onnx", "wb") as f:
f.write(onx.SerializeToString())
这段代码的整体目的是准备将一个 Scikit-Learn 模型转换为 ONNX 格式的过程，定义了输入数据的结构以及转换时的一些配置选项。
initial_type是一个列表，定义了模型的输入特征及其数据类型。'float_input'是输入的名称，可以是任意字符串，用于标识输入。FloatTensorType([None, 380])指定输入数据的形状。这里的[None, 380]表示：- 第一个维度是
None，表示可以接受任意数量的样本（即批处理大小）。 - 第二个维度是
380，表示每个样本有 380 个特征。
- 第一个维度是
options是一个字典，用于指定转换过程中的一些选项。id(model)获取模型的唯一标识符（ID），用作字典的键。- 选项中：
'nocl': True表示在转换时不使用类别标签的映射（Class Label Mapping）。'zipmap': False表示在输出的 ONNX 模型中不使用 ZipMap 功能，这意味着输出将是一个多维数组，而不是一个字典结构。通常在处理分类问题时，ZipMap 可能会将类别标签转换为字典形式，但这里选择保持原始输出。
最后一步则是将模型写入文件即可。
可视化模型工具——Netron
Netron 是一个用于可视化和分析深度学习模型的开源工具，支持多种模型格式，包括 ONNX、TensorFlow、Keras、PyTorch 等。它提供了一个直观的图形界面，帮助用户理解和检查模型结构、层、参数等信息。
开源地址：https://github.com/lutzroeder/Netron?tab=readme-ov-file
其中包含了多种系统的安装版本，方便用户根据自己的需求进行选择和安装。此外，它还提供了在线Web应用，用户可以直接通过浏览器访问，无需额外安装任何软件。
在线Web应用地址如下：https://netron.app/
在我们将刚才训练好的模型上传后，可以清晰地查看模型的详细信息。
同样，你可以通过点击每一个框框来进一步探索模型的具体信息。例如，如果我们点击了“SVMClassifier”这一选项，屏幕上将会弹出一个详细的对话框，如下所示。
好的，以后如果你想查看模型的具体信息和性能表现，当然可以利用这个可视化工具作为参考。
Web 应用程序
这次，我们将不再使用Python后台来启动应用，而是完全依赖一个前端静态页面来实现所有功能。
<!DOCTYPE html>
<html>
<header>
<title>Cuisine Matcher</title>
</header>
<body>
<h1>Check your refrigerator. What can you create?</h1>
<div id="wrapper">
<div class="boxCont">
<input type="checkbox" value="4" class="checkbox">
<label>apple</label>
</div>
<div class="boxCont">
<input type="checkbox" value="247" class="checkbox">
<label>pear</label>
</div>
<div class="boxCont">
<input type="checkbox" value="77" class="checkbox">
<label>cherry</label>
</div>
<div class="boxCont">
<input type="checkbox" value="126" class="checkbox">
<label>fenugreek</label>
</div>
<div class="boxCont">
<input type="checkbox" value="302" class="checkbox">
<label>sake</label>
</div>
<div class="boxCont">
<input type="checkbox" value="327" class="checkbox">
<label>soy sauce</label>
</div>
<div class="boxCont">
<input type="checkbox" value="112" class="checkbox">
<label>cumin</label>
</div>
</div>
<div style="padding-top:10px">
<button onClick="startInference()">What kind of cuisine can you make?</button>
</div>
<!-- import ONNXRuntime Web from CDN -->
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script>
<script>
const ingredients = Array(380).fill(0);
const checks = [...document.querySelectorAll('.checkbox')];
checks.forEach(check => {
check.addEventListener('change', function() {
// toggle the state of the ingredient
// based on the checkbox's value (1 or 0)
ingredients[check.value] = check.checked ? 1 : 0;
});
});
function testCheckboxes() {
// validate if at least one checkbox is checked
return checks.some(check => check.checked);
}
async function startInference() {
let atLeastOneChecked = testCheckboxes()
if (!atLeastOneChecked) {
alert('Please select at least one ingredient.');
return;
}
try {
// create a new session and load the model.
const session = await ort.InferenceSession.create('./model.onnx');
const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
const feeds = { float_input: input };
// feed inputs and run
const results = await session.run(feeds);
// read from results
alert('You can enjoy ' + results.label.data[0] + ' cuisine today!')
} catch (e) {
console.log(`failed to inference ONNX model`);
console.error(e);
}
}
</script>
</body>
</html>
大致解释下js部分的代码：
- 创建一个长度为 380 的数组 ingredients，初始值为 0，用于表示选择的食材状态。
- 获取所有的复选框，并为每个复选框添加 change 事件监听器。当复选框状态变化时，根据复选框的 value 更新 ingredients 数组，选中为 1，未选中为 0。
- testCheckboxes 函数用于检查是否至少选中一个复选框。
- startInference 函数首先检查是否选中至少一个食材。如果没有，则弹出提示框。
- 如果有选中食材，异步加载 ONNX 模型 (model.onnx)。
- 创建一个张量 input，形状为 [1, 380]，用以存储食材信息。
- 调用模型的 run 方法进行推理，并获取结果。
- 结果中的 label 数据用于显示推荐的菜肴。
我们来运行一下，这里用到了http-server依赖：
npm install --global http-server
运行后，如图所示：
至此，我们已经完成了整个Web应用程序的构建过程。
总结
在这次学习旅程中，我们成功构建了一个美食推荐的Web应用程序，探索了机器学习和Web开发的交集。通过使用ONNX Web，我们能够将训练好的模型直接集成到浏览器中，让用户可以与模型进行互动，而无需依赖后端，这极大地提高了用户体验。结合Netron这一强大的可视化工具，我们不仅能够分析和理解模型的内部结构，还可以直观地展示模型的性能与特点。
至此，我们的分类章节圆满结束，感谢大家的认真学习和参与。在下一次的课程中，我们将深入探讨聚类技术，了解其在数据分析和机器学习中的重要应用。
我是努力的小雨，一名 Java 服务端码农，潜心研究着 AI 技术的奥秘。我热爱技术交流与分享，对开源社区充满热情。同时也是一位腾讯云创作之星、阿里云专家博主、华为云云享专家、掘金优秀作者。
我将不吝分享我在技术道路上的个人探索与经验，希望能为你的学习与成长带来一些启发与帮助。
欢迎关注努力的小雨！
从零开始学机器学习——构建一个推荐web应用的更多相关文章
- 使用 XMPP 构建一个基于 web 的通知工具——转
Inserting of file(使用 XMPP 构建一个基于 web 的通知工具.docx) failed. Please try again. http://www.ibm.com/develo ...
- [译]Spring Boot 构建一个RESTful Web服务
翻译地址:https://spring.io/guides/gs/rest-service/ 构建一个RESTful Web服务 本指南将指导您完成使用spring创建一个“hello world”R ...
- 使用Gradle构建构建一个Java Web工程及持续集成环境Jenkins配置
安装Eclipse插件——Buildship 什么是Buildship? Buildship能方便我们通过Eclipse IDE创建和导入Gradle工程,同时还能执行Gradle任务. Eclips ...
- Spring Boot 构建一个 RESTful Web Service
1 项目目标: 构建一个 web service,接收get 请求 http://localhost:8080/greeting 响应一个json 结果: {"id":1,&qu ...
- jenkins 构建一个前端web项目
Jenkins发布web前端代码 “系统管理”“管理插件”“已安装” 检查是否有“Git plugin”和“Publish Over SSH”两个插件,如果没有,则需点击“可选插件”,找到它并安装 ...
- springboot：快速构建一个springboot项目
前言: springboot作为springcloud的基础,springboot的热度一直很高,所以就有了这个springboot系列,花些时间来了解和学习为自己做技术储备,以备不时之需[手动滑稽] ...
- 用Spring Tools Suite（STS）开始一个RESTful Web Service
spring.io官方提供的例子Building a RESTful Web Service提供了用Maven.Gradle.STS构建一个RESTFul Web Service,实际上采用STS构建 ...
- 从零开始学 Web 之 HTML（一）认识前端
大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学Web之HTML（二）标签、超链接、特殊符号、列表、音乐、滚动、head等
大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...
随机推荐
- anaconda环境下：强化学习PPO算法仿真环境库sample-factory的python完美适配版本为python3.11
anaconda环境下:强化学习PPO算法仿真环境库sample-factory的python完美适配版本为python3.11 库sample-factory地址: https://github.c ...
- 【转载】 DeepMind 提出元梯度强化学习算法，显著提高大规模深度强化学习应用的性能
原文地址: https://www.jiqizhixin.com/articles/053104 李亚洲翻译 2018/05/31 12:38 Pedro 路参与 ================== ...
- 3.2.0 版本预告！远程日志解决 Worker 故障获取不到日志的问题
Apache DolphinScheduler 3.2.0 版本已经呼之欲出,8 月 中下旬,这个大版本就要和用户见面了.为了让大家提前了解到此版本更新的主要内容,我们已经制作了几期视频和内容做了大致 ...
- springboot如何集成Prometheus如何暴露Histogram来获取P99等监控指标
背景 springboot如何集成Prometheus我这里不做详细描述,要想了解集成过程,可以参考一下博客: Spring Boot 使用 Micrometer 集成 Prometheus 监控 J ...
- TSP 的遗传算法
省流:不如模拟退火 打 OI 的时候一直对乱搞很感兴趣,只是没时间学,现在算是弥补一下吧 旅行商问题(Traveling Salesman Problem, TSP):求无向图边权和最小的哈密顿回路 ...
- freertos总结
freertos学习总结:(别人的)https://blog.csdn.net/qq_39397153/article/details/123997346 freertos学习笔记:(别人的)http ...
- SpringMVC:注解配置SpringMVC
目录 创建初始化类,代替web.xml 创建SpringConfig配置类,代替spring的配置文件 创建WebConfig配置类,代替SpringMVC的配置文件 测试功能 使用配置类和注解代替w ...
- 淘宝订单信息获取接口,淘宝开放平台R2权限，淘宝开放平台订单获取接口
目前淘宝开放平台是关闭了订单权限申请的,有这方便的需求的人,除非是天猫用户才能申请(天猫用户申请到只能给自己天猫店授权),否则是申请不到这个订单接口了,如果有这方面需要的人可以联系我,站内信留下QQ或 ...
- 合合信息参编“生成式人工智能个人信息保护技术要求系列标准”，助力AI行业可信发展
生成式人工智能作为新一轮的技术革命成果,在赋能千行百业,给经济社会发展带来新机遇的同时,也产生了个人信息泄露.数据安全风险等问题.在此背景下,中国信息通信研究院(简称"中国信通院" ...
- 探索AI人才培养新范式，合合信息与同济大学软件学院签署产教融合人才培养协议
随着科学技术的发展,促进人工智能产业与高校人才培养相融合,正成为业界关注的焦点.7月3日,上海合合信息科技股份有限公司(以下简称:合合信息)与同济大学软件学院"产教融合人才培养签约暨创新实践 ...