ML-For-Beginners 实战篇从训练 SVC 菜品分类模型到 ONNX 浏览器端推理的推荐 Web 应用【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners本篇技术指南基于 ML-For-Beginners 课程中“分类Classification”章节的最后一课4-Classification/4-Applied/README.md完整演示了一条端到端的机器学习落地链路用 Scikit-learn 在清洗后的菜系cuisine数据集上训练分类模型借助 skl2onnx 将模型转换为 ONNX 格式并用 Netron 可视化校验最后在纯 JavaScript 的 Web 页面中通过 Onnx Runtime Web 完成浏览器端可离线推理实现一个“根据冰箱剩余食材推荐可烹饪菜系”的小型推荐系统。学完本篇你将掌握模型序列化转换、模型结构检视以及前后端解耦的推理架构设计能力可直接在当前仓库的 solution 目录中找到完整可运行产物model.onnx、index.html、notebook.ipynb作为对照参考。课程定位把学到的分类技术变成可用的 Web 应用在 ML-For-Beginners 系列中这是把前面所有分类知识落地的“应用课”。此前各课已经完成了数据清洗、特征工程、分类器选型与评估而本课回答一个更现实的问题训练好的模型如何进入真实业务系统课程给出了两种架构路径的对照在 3-Web-App/1-Web-App/README.md 中你曾把 UFO 观测回归模型用pickle序列化再放进 Flask 应用里提供服务——这是一条全栈 Python路线本课则转向纯 JavaScript 路线模型转换为 ONNX 后直接在浏览器里加载运行不依赖 Python 后端。后一种架构的最大价值在于推理可以在本地甚至完全离线的环境下执行无需服务器计算资源为前端应用、移动端场景和隐私敏感场景提供了更轻量的部署选择。本课的学习目标明确且聚焦构建分类模型并将其保存为 ONNX 模型使用 Netron 检视模型结构确认模型构建正确在 Web 应用中加载模型完成推理inference。第一步训练菜品分类模型动手之前先确保训练数据与工具就绪。本课使用的数据集与整个系列一致位于仓库的 4-Classification/data/cleaned_cuisines.csv。从数据文件结构可以看到第 1 列是行索引第 2 列是cuisine标签chinese、indian、japanese、korean、thai从第 3 列起是 380 个食材特征列每个样本以 one-hot0/1方式记录该菜品是否包含某种食材——这正是后面 Web 应用能用“勾选食材”直接构造输入向量的原因。导入依赖并加载数据训练的第一步是安装模型转换工具并导入数据处理库!pip install skl2onnx import pandas as pdskl2onnx的作用是将 Scikit-learn 模型转换为 ONNX 格式ONNX 是开放神经网络交换格式能让模型跨框架、跨运行时部署。随后用与前面课程完全相同的方式读取 CSVdata pd.read_csv(../data/cleaned_cuisines.csv) data.head()注意在仓库的解决方案 notebook 4-Classification/4-Applied/solution/notebook.ipynb 中数据路径写作../../data/cleaned_cuisines.csv这是因为该 notebook 位于4-Classification/4-Applied/solution/子目录下。请根据你自己的工作目录层级调整路径。切分特征与标签移除前两个不需要的列行索引与cuisine标签其余 380 列作为特征矩阵XX data.iloc[:,2:] X.head()将标签单独保存为yy data[[cuisine]] y.head()开始训练流程课程选用 Scikit-learn 的SVC支持向量机分类器因为它在之前的对比实验中对本数据集表现出了良好的准确率。首先导入所需库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按 70%/30% 划分训练集与测试集X_train, X_test, y_train, y_test train_test_split(X,y,test_size0.3)构建线性核 SVC 模型并拟合model SVC(kernellinear, C10, probabilityTrue,random_state0) model.fit(X_train,y_train.values.ravel())这里几个关键参数值得展开说明kernellinear使用线性核。在 380 维稀疏 one-hot 特征空间上线性核通常足以划分不同菜系且训练和推理都更高效C10正则化强度的倒数。C越大对误分类的惩罚越大模型越倾向于拟合训练数据需要结合验证结果权衡probabilityTrue让 SVC 输出类别概率而不仅是硬分类标签。这一点至关重要——ONNX 转换后会保留probabilities输出且后面推理时可读取到概率信息random_state0固定随机种子保证结果可复现。注意y_train.values.ravel()y原本是 DataFrame 列ravel()将其展平为一维数组以满足fit()对标签形状的要求。接下来在测试集上预测并输出分类报告y_pred model.predict(X_test) print(classification_report(y_test,y_pred))课程中给出的分类报告test_size0.3时约 1199 个测试样本显示模型整体质量良好precision recall f1-score support chinese 0.72 0.69 0.70 257 indian 0.91 0.87 0.89 243 japanese 0.79 0.77 0.78 239 korean 0.83 0.79 0.81 236 thai 0.72 0.84 0.78 224 accuracy 0.79 1199 macro avg 0.79 0.79 0.79 1199 weighted avg 0.79 0.79 0.79 1199其中indian类的精确率高达 0.91、f1-score 0.89说明印度菜在食材特征上与其他菜系区分度最明显chinese与thai相对较难区分这与两者在香料与食材上的交集有关是后续扩展模型时可以继续优化的方向。第二步把 SVC 模型转换为 ONNX训练完成后下一步是格式转换。转换时必须指定正确的张量维度本数据集共有380 种食材因此输入特征维度必须是 380。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}}这里有两处设计要点initial_type定义了模型的输入签名输入张量名为float_input形状为[None, 380]。None表示 batch 维样本数量在运行时可变推理时实际传入[1, 380]输入名float_input必须在后续 JS 端原样使用否则推理会因输入名不匹配而失败options控制转换时的输出结构nocl: True不在模型中嵌入类别class信息可以缩小模型文件体积zipmap: False移除默认的ZipMap输出。ZipMap 会把预测结果包装成“字典列表”结构在 Web 端反而增加解析负担关闭后模型直接输出label预测类别与probabilities概率向量两个张量与 Netron 中看到的输出节点一一对应。执行转换并保存为model.onnxonx convert_sklearn(model, initial_typesinitial_type, optionsoptions) with open(./model.onnx, wb) as f: f.write(onx.SerializeToString())运行整个 notebook 后model.onnx会被写入当前文件夹。仓库中 4-Classification/4-Applied/solution/model.onnx 就是这一流程的实际产物约 2.1 MB可供你直接下载并用于 Web 应用测试也可以对照自己的转换结果。第三步用 Netron 检视模型ONNX 是二进制格式在 VS Code 中直接打开很难阅读。Netron 是研究者常用的免费模型可视化工具可以图形化展示模型的输入、算子与输出结构。下载并安装 Netron然后打开model.onnx即可看到本课模型的完整计算图从可视化结果可以确认三件事它们与前面的配置一一对应输入节点float_input形状标注为?×380即任意样本数 × 380 个食材特征中间的SVMClassifier算子即线性核 SVC 分类器输出分为两支label预测的菜系类别与probabilities5 个类别的概率向量形状?×5。这一步不仅是“看看模型长什么样”更是部署前的质量门禁如果输入维度、输出节点名与 Web 端代码不一致在这里就能提前发现避免把错误模型带入应用。第四步构建推荐 Web 应用模型就绪后就可以把它直接嵌入 Web 应用。这种架构天然支持本地运行甚至可以在无网络环境下离线使用前提是 ONNX Runtime 脚本已本地化。4.1 搭建页面骨架在与model.onnx相同的文件夹下新建index.html写入基础结构!DOCTYPE html html header titleCuisine Matcher/title /header body ... /body /html4.2 用复选框表示“冰箱里的食材”在body内添加一组食材复选框。每个复选框的value是该食材在数据集中的列索引从 0 开始计数h1Check your refrigerator. What can you create?/h1 div idwrapper div classboxCont input typecheckbox value4 classcheckbox labelapple/label /div div classboxCont input typecheckbox value247 classcheckbox labelpear/label /div div classboxCont input typecheckbox value77 classcheckbox labelcherry/label /div div classboxCont input typecheckbox value126 classcheckbox labelfenugreek/label /div div classboxCont input typecheckbox value302 classcheckbox labelsake/label /div div classboxCont input typecheckbox value327 classcheckbox labelsoy sauce/label /div div classboxCont input typecheckbox value112 classcheckbox labelcumin/label /div /div div stylepadding-top:10px button onClickstartInference()What kind of cuisine can you make?/button /div为什么apple的值是4因为在按字母排序的食材索引表中apple是第 5 个词条索引从 0 计数所以是4。完整索引对应关系可以查阅 4-Classification/data/ingredient_indexes.csv——该文件第一行是按字母排序的 380 个食材名第二行是对应的 0~379 索引。例如pear的索引是 247、soy sauce是 327均可在表格中核对。想扩充更多食材复选框时只需查表拿到索引即可。4.3 引入 Onnx Runtime Web在最后一个/div之后加入脚本块。首先通过 CDN 引入 Onnx Runtime Web本课使用版本1.9.0script srchttps://cdn.jsdelivr.net/npm/onnxruntime-web1.9.0/dist/ort.min.js/scriptOnnx Runtime 的核心价值在于它让同一个 ONNX 模型可以在各种硬件平台上高效运行并提供了简洁的统一 API。在浏览器场景下它会自动选择合适的执行后端WebAssembly 等完成推理。4.4 编写推理脚本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 checkboxs 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这段代码包含五层逻辑值得逐一拆解构建 380 维输入向量Array(380).fill(0)创建长度 380 的数组元素全为 0复选框被勾选时把对应索引位置置为 1。这一步与训练时X data.iloc[:,2:]的特征列顺序严格对应监听复选框状态document.querySelectorAll(.checkbox)收集所有复选框为每个绑定change事件实时更新ingredients数组输入校验testCheckboxes()用Array.prototype.some检查是否至少勾选了一个食材未勾选时弹出提示并中止推理——避免向模型发送全 0 的无意义输入异步推理入口按钮的onClick触发startInference()推理例程try/catch包裹以保证错误可见通过ort.InferenceSession.create(./model.onnx)异步加载模型创建推理会话new ort.Tensor(new Float32Array(ingredients), [1, 380])把 JS 数组包装成[1, 380]形状的浮点张量即“1 个样本 × 380 个特征”feeds { float_input: input }中的键名float_input必须与转换模型时initial_type里定义的输入名完全一致——这一步是前后端契约也可以用 Netron 复核该名称session.run(feeds)把输入喂给模型并等待返回从results.label.data[0]读取第一个也是唯一一个样本的预测类别弹窗展示推荐结果。仓库中的完整实现见 4-Classification/4-Applied/solution/index.html其代码与本课讲解一致可直接作为模板复用。第五步本地运行与验证在 VS Code 中打开存放index.html的文件夹的终端确保全局安装了http-server然后启动http-server终端会打印出本地服务地址形如127.0.0.1:8080在浏览器中打开即可看到应用界面。勾选几种食材后点击按钮页面会弹出模型推荐的菜系上图展示了实际推理效果勾选若干食材后模型预测出indian印度菜。可以尝试不同食材组合观察推荐结果如何随输入变化——这正是检验模型是否学到“食材-菜系”关联规律的最直观方式。由于推理完全发生在浏览器本地这个应用可以在无后端、甚至离线环境下运行。挑战把推荐器做得更丰富当前 Web 应用只提供了 7 种食材复选框非常精简。建议你利用 4-Classification/data/ingredient_indexes.csv 中完整的 380 个食材及其索引扩充复选框列表然后尝试回答哪些食材组合能做出某个特定国家的菜肴例如勾选soy sauce、sake、sesame_seed是否更容易得到日料推荐这样的实验能帮助你直观理解特征食材对分类决策的影响。如果想把这条链路推向完整交付可以进一步做增加更多食材与分类标签的映射展示把probabilities输出一并展示如用进度条呈现 5 个菜系的概率分布让推荐结果更可解释将 ONNX Runtime 脚本下载到本地并引用本地文件实现完全离线部署。课后任务构建你自己的推荐系统本课的课后任务4-Classification/4-Applied/assignment.md要求基于本课掌握的技能——Onnx Runtime ONNX 转换模型——设计并构建一个全新的推荐器。任务给出了一些创意方向根据性格属性推荐宠物、根据心情推荐音乐流派等数据可来自本课程或自行收集引用外部数据时需注明来源。评分标准包含三项交付一个文档完善且可运行的 Web 应用 notebook 为“优秀”两者缺一为“合格”都缺失或不完整则“待改进”。这实际上是在检验你是否真正掌握了“训练 → 转换 → 部署 → 推理”的全链路能力。复习与自学方向本课仅触及了“食材推荐系统”这一应用点而推荐系统是机器学习应用中最丰富的领域之一其方法远不止于此基于内容过滤、协同过滤、矩阵分解、深度学习排序模型等都在工业界有大量实践。理解本课“模型导出 端侧推理”的架构思路后你已具备把任何已训练模型快速变为可交互应用的基础能力——这比单纯追求更高准确率更贴近真实工程场景也是本课作为分类章节收官之战的用意所在。【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考