机器学习入门项目：构建美食推荐Web应用

2026-02-03 05:16:16作者：贡沫苏Truman

前言

在机器学习应用开发中，构建推荐系统是最具实用价值的场景之一。本文将基于机器学习入门课程中的美食分类项目，带领读者从模型训练到Web应用部署，完整实现一个美食推荐系统。通过这个项目，您将掌握如何将机器学习模型转换为ONNX格式，并在Web环境中高效运行。

项目概述

本项目将实现以下功能：

使用清洗后的美食数据集训练分类模型
将模型转换为ONNX格式
构建基于JavaScript的Web应用
实现根据食材推荐菜系的功能

数据准备

我们使用经过清洗的美食数据集，其中包含：

多种菜系标签（中餐、印度餐、日餐、韩餐、泰餐等）
380种常见食材特征
每道菜对应的食材组合

模型训练

1. 导入必要库

import pandas as pd
from sklearn.model_selection import train_test_split
from sklearn.svm import SVC
from sklearn.metrics import classification_report

2. 数据加载与处理

data = pd.read_csv('cleaned_cuisines.csv')
X = data.iloc[:,2:]  # 提取食材特征
y = data[['cuisine']]  # 提取菜系标签

3. 划分训练测试集

X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.3, random_state=0)

4. 构建SVC分类模型

支持向量机(SVC)在本任务中表现良好：

model = SVC(kernel='linear', C=10, probability=True, random_state=0)
model.fit(X_train, y_train.values.ravel())

5. 模型评估

y_pred = model.predict(X_test)
print(classification_report(y_test, y_pred))

典型评估结果如下：

              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

模型转换与优化

1. 转换为ONNX格式

ONNX(Open Neural Network Exchange)是一种开放的模型表示格式，支持跨平台部署：

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())

转换参数说明：

nocl=True：减少模型大小，不包含类信息
zipmap=False：简化输出格式，不生成字典列表

2. 模型可视化

使用Netron工具可以直观查看模型结构：

输入层：380个特征节点
输出层：菜系分类结果
模型参数和运算节点

Web应用开发

1. 前端界面设计

<!DOCTYPE html>
<html>
    <body>
        <h1>查看冰箱食材，您能做什么菜?</h1>
        <div id="ingredients-container">
            <!-- 食材复选框动态生成 -->
        </div>
        <button onclick="predictCuisine()">推荐菜系</button>
        <div id="result"></div>
    </body>
</html>

2. 集成ONNX运行时

<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.9.0/dist/ort.min.js"></script>

3. JavaScript推理逻辑

const ingredients = new Array(380).fill(0);

async function predictCuisine() {
    // 检查至少选择一种食材
    if (!ingredients.some(i => i === 1)) {
        alert("请选择至少一种食材");
        return;
    }
    
    try {
        const session = await ort.InferenceSession.create("model.onnx");
        const input = new ort.Tensor(new Float32Array(ingredients), [1, 380]);
        const results = await session.run({float_input: input});
        
        document.getElementById("result").innerHTML = 
            `推荐菜系: ${results.label.data[0]}`;
    } catch (e) {
        console.error("推理失败:", e);
    }
}