前端可通过TensorFlow.js实现智能推荐，首先构建用户-物品交互矩阵并转为张量；接着使用协同过滤思想建立嵌入模型，学习用户与物品隐向量；然后在浏览器中收集行为数据，进行本地训练或加载预训练模型完成推理；最后通过轻量化设计、在线更新与缓存优化性能，支持实时个性化推荐。
在前端实现智能推荐系统，可以通过 TensorFlow.js 将机器学习能力直接部署到浏览器中。这种方式无需频繁请求后端，响应更快，同时保护用户隐私。构建一个基于用户行为的简单推荐系统，可以分为以下几个关键步骤。
1. 明确推荐场景和数据结构
推荐系统的核心是理解用户与物品的交互。比如用户对商品的点击、评分或停留时间。在前端场景中，这些行为可以直接在页面上收集。
常用的数据形式是用户-物品交互矩阵，例如：
用户A：[商品1: 5分, 商品3: 4分]用户B：[商品2: 5分, 商品3: 3分]
用户C：[商品1: 2分, 商品2: 4分]
将这些数据转化为数值型张量（Tensor），作为模型输入。
立即学习“前端免费学习笔记（深入）”；
2. 使用协同过滤构建简单模型
协同过滤是一种经典推荐方法，通过用户之间的相似性或物品之间的相似性进行推荐。在 TensorFlow.js 中，可以构建一个简单的嵌入模型来学习用户和物品的隐向量。
示例代码：
const tf = require('@tensorflow/tfjs');
// 定义模型
function createRecommendationModel(numUsers, numItems, embeddingDim = 8) {
const model = tf.sequential();
// 用户嵌入层
const userEmbedding = tf.layers.embedding({
inputDim: numUsers,
outputDim: embeddingDim,
name: 'userEmbedding'
});
// 物品嵌入层
const itemEmbedding = tf.layers.embedding({
inputDim: numItems,
outputDim: embeddingDim,
name: 'itemEmbedding'
});
model.add(userEmbedding);
model.add(tf.layers.flatten());
model.add(itemEmbedding);
model.add(tf.layers.flatten());
// 计算点积作为评分预测
model.add(tf.layers.dot({axes: -1, name: 'dot'}));
model.compile({
optimizer: 'adam',
loss: 'meanSquaredError',
metrics: ['mse']
});
return model;
}
注意：上面的结构是示意性的，实际中可使用双塔结构分别处理用户和物品ID，再计算相似度。
3. 在浏览器中训练和推理
前端推荐系统可以在本地训练小型模型，或加载预训练权重。对于冷启动问题，可先用通用模型，再根据用户行为微调。
训练流程：
- 收集用户行为数据（如评分）
- 将用户ID和物品ID转为one-hot或整数编码
- 构建输入张量：[userId, itemId] → 评分
- 调用 model.fit() 进行训练
推理时，输入当前用户ID和候选物品列表，模型输出预测评分，按分值排序推荐。
4. 模型优化与更新策略
由于浏览器资源有限，模型应尽量轻量化。建议：
- 使用小维度嵌入（如8~16维）
- 限制训练轮数，采用在线学习方式逐步更新
- 定期将用户行为同步到后端，用于训练更复杂模型
- 支持模型缓存，避免重复加载
也可以加载由 Python TensorFlow 训练好的模型：
await model.loadLayersModel('http://localhost/model.json');
基本上就这些。TensorFlow.js 让前端具备基础推荐能力，适合轻量级、实时性要求高的场景。关键是把用户行为数据结构化，并选择合适的模型结构。不复杂但容易忽略细节。
