作者： vivo 互联网前端团队- Wei Xing
全民AI时代，前端er该如何蹭上这波热度？本文将一步步带大家了解前端应该如何结合端侧AI模型，实现一个AI版你画我猜小游戏。
1分钟看图掌握核心观点👇
本文提供配套演示代码，可下载体验：
一、引言
近几年AI的进化速度堪比科幻片------昨天还在调教ChatGPT写诗，今天Sora已经能生成电影级画面了。技术圈仿佛被AI"腌入味"了，说不定连这篇文章都是DeepSeek帮忙写的（狗头）。
**前端er的野望：**当其他行业忙着用AI造火箭时，我们这群和浏览器"斗智斗勇"的手艺人，该怎么蹭上这波热度？
在深入思考如何蹭上热度之前，首先，我们需要先简单了解下AI模型的分类。
1.1 云端模型和端侧模型
从模型的部署方式上来看，AI模型可以简单分为云端模型（Cloud Model）和端侧模型（On-Device Model）两种。
-
**云端模型：**将模型部署在服务集群上，提供一些API能力供端侧来调用，端侧无需处理计算部分，只需调用API获取计算结果即可。比如OpenAI的官方API就是如此。
-
**端侧模型：**直接将模型部署在终端设备上，模型的计算、推理完全依赖终端设备，具有更高的实时性、私密性、安全性，但同时对终端设备等硬件要求也较高。
对于前端来说，由于其非常依赖浏览器和终端设备性能，所以原本最适合前端的方式其实是直接调用云端模型API，把计算的负担转嫁给服务集群，页面只需负责展示结果即可。但通常情况下，搭建集群、训练模型、定制API有很高的资源门槛和成本，现实条件往往不允许我们这样做。
因此，我们可以转而考虑利用端侧模型来赋能。
1.2 大语言模型和特定领域模型
端侧模型从概念上来区分，又可以简单分为大语言模型和特定领域模型。
大语言模型
其中大语言模型（Large Language Model，LLM）就是我们熟知的ChatGPT、DeepSeek、Grok这类模型，它们功能强大，但对设备的性能要求很高，以DeepSeek为例，即使是最小的1.5B版本模型，也至少需要RTX 3060+级别的显卡才能带得动，并且模型本身的大小已经达到1.1GB，并不适合部署在前端项目中。
特定领域模型
所以，最终留给我们的选项就是利用一些特定领域模型来赋能前端，它们可以用来处理某些特定领域的问题。例如，利用视觉（CNN、MobileNet）模型实现图像分类、人脸检测，或者利用自然语言模型（NLP）实现问答机器人、文本恶意检测等。
这些模型等特征是尺寸较小，并且对设备性能要求不高，非常适合直接部署在前端并实现一些AI交互。
所以，接下来我们就来看看，如何从0到1训练一个图像分类模型（Doodle Classifier based on CNN） ，并将模型集成至前端页面，实现一个经典你画我猜小游戏-端侧AI版。
二、你画我猜AI版-玩法简介
动手实践之前，先来简单介绍下你画我猜AI版的玩法，它和普通版本你画我猜的区别在于：玩家根据提示词进行涂鸦，由AI来预测玩家画的词是什么，如果AI顺利猜对玩家画的词，则玩家得分。
例如，提示词是"长城"，则玩家需要通过画板手绘一个长城，尽量画的像一些，让AI猜出正确答案就能得分。
了解了基础玩法之后，接下来正片开始，详细介绍如何从零到一开始实现它。
我们提供了简化版的 live demo，你可以访问链接试试看。同时我们也提供了相关的 demo代码，你可以随时访问github仓库，下载和尝试运行它。
三、训练模型
首先，第一步是训练模型。
根据上面的玩法简介，我们知道它本质上是一个基于视觉的图片分类AI模型，而这个模型的功能是：输入图片数据后，模型可以计算出图片的分类置信结果。例如，输入一张小猫的图片，模型的分类计算结果可能为：[猫 90%，狗8%，猪2%]，表示模型认为这张图有90%的概率是只猫，8%的概率是条狗，2%概率是只猪。
这样一来，我们通过将用户手绘的canvas中的图片数据丢给模型，并把模型输出的置信概率最大的分类当作AI的猜测结果，就可以模拟出AI猜词的互动了。
而实现这个模型也很简单，但我们需要了解一些深度学习神经网络的知识以及tensorflow.js的基础用法。如果对这两者不太熟悉，可能需要先自行google一下，做点知识储备。
那么假设大家已经有了一些基础的神经网络、TensorFlow.js基础知识，就可以利用TensorFlow.js轻松搭建一个基于CNN的图片分类模型。
3.1 获取数据集
在进入模型训练之前，我们需要先获取数据集。
数据集是训练模型的基础，我们可以自己创建数据集（这很困难、费时），或者寻找一些开源数据集。刚好Google Lab提供了一套完整的开源涂鸦数据集（The Quick Draw Dataset），数据集中包含了345个不同类别的涂鸦数据集合，总共有5000万份涂鸦数据，足够我们挑选使用。
我们可以直接访问开源涂鸦数据集（The Quick Draw Dataset）下载所需的数据。点击页面右上角的Get the Data跳转github仓库，可以看到文档中列出了多种数据类型：
这里我们直接选择下载Numpy bitmap files。
**注意：**这里的数据集有345种类别，如果全部进行训练的话，训练时间会很长并且最终的模型大小较大，因此，我们可以视情况挑选其中的部分词汇，例如选择80个词汇进行训练，对于一款小游戏来说，词汇量也足够了。
3.2 搭建模型和训练模型
下载完训练数据之后，接下来我们需要搭建模型结构并进行模型训练。
如果我们下载了demo代码，可以看到项目结构如下，主要内容为3个部分：
项目目录/
├── 📁 src/
│ ├── 📄 index.ts # 程序入口文件
│ ├── 📁 data/ # 数据集
│ │ ├── 📄 Apple.npy
│ │ ├── 📄 The Great Wall.npy
│ │ └── 📄 ...
│ └── 📁 model/ # 训练模型相关
│ ├── 📄 doodle-data.model.ts # 数据加载
│ └── 📄 classifier.model.ts # 模型结构
├── 📄 package.json**-data目录：**存放训练数据集
-model目录：
-
doodle-data.model.ts：数据加载预处理
-
classifier.model.ts：定义模型结构
**-index.ts：**训练程序入口
先来看项目的index.ts入口文件，功能非常简单，主要逻辑就是四步：
-
加载训练数据
-
创建模型
-
训练模型
-
保存模型参数
import { Classifier } from './model/classifier.model';
import { DoodleData } from './model/doodle-data.model';async function main(){
const data = new DoodleData({
directoryData: 'src/data',
maxImageClass: 20000
});// 1. 加载训练数据 data.loadData(); // 2. 创建模型 const model = new Classifier(data); // 3. 训练模型 await model.train(); // 4. 保存模型参数 await model.save();}
main();
了解了核心流程之后，再来详细看下model目录下的两个核心文件：doodle-data.model.ts和classifier.model.ts。
首先是doodle-data.model.ts ，它的核心代码如下，主要是加载data目录下的数据，并将数据预处理为tensor张量，后续可于训练模型。
// 加载data目录下的数据
loadData() {
this.classes = fs.readdirSync(this.directoryData)
.filter((x) => x.endsWith('.npy'))
.map((x) => x.replace('.npy', ''));
}
// 数据生成器，预处理数据为tensor张量
*dataGenerator() {
// ...
for (let j = 0; j < bytes.length; j = j + this.IMAGE_SIZE) {
const singleImage = bytes.slice(j, j + this.IMAGE_SIZE);
const image = tf
.tensor(singleImage)
.reshape([this.IMAGE_WIDTH, this.IMAGE_HEIGHT, 1])
.toFloat();
const xs = image.div(offset);
const ys = tf.tensor(this.classes.map((x) => (x === label ? 1 : 0)));
yield { xs, ys };
}
}**其次是，classifier.model.ts。**它的核心代码如下，代码的主要功能是：
构建了一个基于CNN的图像分类模型。通过tf.layers.conv3d()构造了卷积神经网络结构。
提供了train()方法，用于训练模型。这里定义了模型训练的迭代次数（epochs）、训练的批次大小（batchSize），这些参数会影响模型训练的最终结果，就是通常我们所说的"模型调参"，当你觉得模型训练效果不佳时，可以调整这些参数重新训练，直到达成不错的准确率。
提供了save()方法，用于保存模型参数。
import * as tf from "@tensorflow/tfjs-node";
import { DoodleData } from "./doodle-data.model";
exportclassClassifier {
// ...
// 定义模型结构
constructor(data: DoodleData) {
this.data = data;
this.model = tf.sequential();
this.model.add(
tf.layers.conv2d({
inputShape: [data.IMAGE_WIDTH, data.IMAGE_HEIGHT, 1],
kernelSize: 3,
filters: 16,
strides: 1,
activation: "relu",
kernelInitializer: "varianceScaling",
})
);
this.model.add(
tf.layers.maxPooling2d({
poolSize: [2, 2],
strides: [2, 2],
})
);
this.model.add(
tf.layers.conv2d({
kernelSize: 3,
filters: 32,
strides: 1,
activation: "relu",
kernelInitializer: "varianceScaling",
})
);
this.model.add(
tf.layers.maxPooling2d({
poolSize: [2, 2],
strides: [2, 2],
})
);
this.model.add(tf.layers.flatten());
this.model.add(
tf.layers.dense({
units: this.data.totalClasses,
kernelInitializer: "varianceScaling",
activation: "softmax",
})
);
const optimizer = tf.train.adam();
this.model.compile({
optimizer,
loss: "categoricalCrossentropy",
metrics: ["accuracy"],
});
}
// 模型训练
async train(){
const trainingData = tf.data
.generator(() => this.data.dataGenerator("train"))
.shuffle(this.data.maxImageClass * this.data.totalClasses)
.batch(64);
const testData = tf.data
.generator(() => this.data.dataGenerator("test"))
.shuffle(this.data.maxImageClass * this.data.totalClasses)
.batch(64);
await this.model.fitDataset(trainingData, {
epochs: 5,
validationData: testData,
callbacks: {
onEpochEnd: async (epoch, logs) => {
this.logger.debug(
`Epoch: ${epoch} - acc: ${logs?.acc.toFixed(
3
)} - loss: ${logs?.loss.toFixed(3)}`
);
},
onBatchBegin: async (epoch, logs) => {
console.log("onBatchBegin" + epoch + JSON.stringify(logs));
},
},
});
}
// 保存模型
async save(){
fs.mkdirSync("doodle-model", { recursive: true });
fs.writeFileSync(
"doodle-model/classes.json",
JSON.stringify({ classes: this.data.classes })
);
await this.model.save("file://./doodle-model");
}
}如果我们从github仓库下载了demo代码，在根目录下执行：
npm run start开启模型训练过程，会有一些输出如下，表示当前的训练轮次、识别准确率、损失等。
onBatchBegin0{"batch":0,"size":512}
onBatchBegin1{"batch":1,"size":512}
onBatchBegin2{"batch":2,"size":512}
onBatchBegin3{"batch":3,"size":512}
onBatchBegin4{"batch":4,"size":192}
...
[Classifier] Epoch: 0 - acc: 0.078 - loss: 2.632
...耐心等待日志打完，模型训练完成之后，我们的项目目录下就会产出一个额外的目录，存放模型的训练结果。
-
**classes.json：**图片的所有分类，根据data目录中的数据文件名称生成
-
**model.json：**模型的描述文件
-
**weights.bin：**模型的参数文件
项目目录/
├── 📁 doodle-model/ # 训练结果（最终模型）
│ │ ├── 📄 classes.json # 图片分类
│ │ ├── 📄 model.json # 模型描述文件
│ │ └── 📄 weights.bin # 模型参数
这样，我们的模型就训练完成了。
接下来看看如何在页面中集成模型，实现从绘制canvas图片到模型分类预测的效果。
四、集成至页面
在页面中的集成模型也非常简单，我们只需要创建一个可以绘图的canvas，每隔一段时间就将当前canvas的图像数据传输给模型，触发一次模型预测即可。
先来看下项目的核心目录结构：
项目目录/
├── 📁 public/assets/doodle-modle/ # 将训练生成的模型放置在public目录下
│ │ ├── 📄 classes.json # 图片分类
│ │ ├── 📄 model.json # 模型描述文件
│ │ └── 📄 weights.bin # 模型参数
├── 📁 src
│ ├── 📁 models/
│ │ └── 📄 DoodleClassifier.js # 图片分类器
│ ├── 📁 views/
│ │ └── 📄 DoodleView.vue # 页面视图（canvas画布）其中，DoodleClassifier.js的核心代码如下：
-
**loadModel：**加载模型，包括model.json、classes.json，在model.json中会自动加载weights.bin
-
**predictTopN：**输入图片数据，调用model.predict() 预测最有可能的TopN个分类结果，并按照置信度排序
import * as tf from "@tensorflow/tfjs";
import apiClient from "@/services/http";// 加载模型
async loadModel(){
this.model = await tf.loadLayersModel("assets/doodle-model/model.json");
const response = await apiClient.get("assets/doodle-model/classes.json");
this.classes = response.data.classes;
}// 预测最有可能的TopN个分类，并按照置信度排序
async predictTopN(data, n){
const predictions = Array.from(await this.model.predict(data).data());const indexedPredictions = predictions.map((probability, index) => ({ probability, index, })); indexedPredictions.sort((a, b) => b.probability - a.probability); const topNPredictions = indexedPredictions.slice(0, n); return topNPredictions.map((p) => ({ label: this.classes[p.index], accuracy: p.probability, }));}
// 预测分类结果
async predict(data){
const argMax = await this.model.predict(data).argMax(-1).data();
returnthis.classes[argMax[0]];
}
DoodleView.vue的核心代码如下：
-
调用new DoodleClassifier()构造图片分类器
-
调用loadModel()加载模型
-
预处理canvas的图片数据
-
将预处理的数据传输给model.predictTopN()，预测图片分类
// 构造图片分类器
this.model = new DoodleClassifier()// 加载模型
this.model.loadModel()// 预处理canvas图片数据
const tensor = tf.browser.fromPixels(imgData, 1);
const resized = tf.image
.resizeBilinear(tensor, [28, 28])
.reshape([1, 28, 28, 1]) // Reshape to [1, 28, 28, 1] for batch and single channel
.toFloat();
const normalized = tf.scalar(1.0).sub(resized.div(tf.scalar(255.0)));// 预测图片分类
this.model.predictTopN(normalized, 5).then((predictions) => {
if (predictions) {
this.predictions = predictions;
}
});
到这为止，你画我猜-AI版就已经基本搭建完成了。实现起来并不复杂。
如果一切顺利，并且你按照我们提供的demo构建页面，就可以直接在项目中运行：
npm run serve一个简易版本的你画我猜AI版就运行成功了，试试看吧。
五、优化措施
通过上面的步骤，我们完成了模型训练和canvas图片分类预测的全流程，成功实现了你画我猜AI版。但实际上可能会遇到两个比较关键的问题。
5.1 数据标准化
当我们去调整canvas画布大小、画笔粗细后，可能会出现预测结果不准确的情况，此时从canvas获取的图像数据和我们喂给模型的训练数据产生了差异。
这时候我们需要在获取到canvas数据后，额外做一些数据预处理，将数据标准化，例如：
-
将画布的内容区域裁剪为正方形，并居中显示
-
将画布的线条适当变粗，使模型更容易识别
5.2 利用 webworker 优化性能
模型的计算过程是十分耗时的，将计算过程放在主线程会导致页面卡顿，因此我们可以将整个模型的预测部分放入webworker中，以此来提升计算性能，不影响页面渲染。
六、总结
你画我猜-端侧AI版是前端结合AI的一个简单案例，为我们提供了前端利用AI赋能的大致思路和基本实现逻辑。条件允许的情况下，我们可以利云端模型来拓展前端业务。但如果缺乏资源，我们则转而考虑使用端侧的特定领域模型来产出一些新玩法、新交互。相比之下，端侧AI具有更强的灵活性、安全性和更低的集成成本。大家可以试着在各自的业务中探索和使用端侧AI，或许无法产出太大的效益，但也是在全民AI时代下，一些积极的尝试和沉淀。
七、参考
部分代码参考自：