前端工程师入门SVM：从“分水果”到用代码区分用户行为，理解支持向量机的核心逻辑

// 模拟训练数据：[停留时间, 点击次数] → 标签（1=购买意向，0=普通）
const trainData = {
  xs: [
    [10, 5], [15, 8], [20, 10], [8, 3], [12, 6], // 购买意向
    [3, 1], [5, 2], [2, 0], [4, 1], [6, 2]       // 普通浏览
  ],
  ys: [1, 1, 1, 1, 1, 0, 0, 0, 0, 0]
};

// 转换为TensorFlow格式
const xs = tf.tensor2d(trainData.xs);
const ys = tf.tensor1d(trainData.ys, 'int32');

// 定义SVM模型（线性核，适合2D数据）
const model = tf.sequential();
// 输入层：2个特征（停留时间、点击次数）
model.add(tf.layers.dense({ units: 1, inputShape: [2] }));
// 编译模型：用hinge损失（SVM专用），SGD优化器
model.compile({
  optimizer: tf.train.sgd(0.01),
  loss: tf.losses.hingeLoss, // SVM核心损失函数，最大化间隔
  metrics: ['accuracy']      // 评估准确率
});

// 引入tfjs-vis（可视化训练过程）
import * as tfvis from '@tensorflow/tfjs-vis';

// 训练模型
async function trainModel() {
  const container = { name: '训练进度', tab: 'SVM分类' };
  const history = await model.fit(xs, ys, {
    epochs: 500, // 迭代次数
    batchSize: 2, // 每次训练2个样本
    callbacks: tfvis.show.fitCallbacks(container, ['loss', 'acc']) // 展示损失和准确率
  });
  console.log('训练完成！最终准确率：', history.history.acc[history.history.acc.length - 1].toFixed(2));
}

// 执行训练
trainModel();

// 预测函数：输入[停留时间, 点击次数]，输出用户类型
function predictUser(features) {
  const input = tf.tensor2d([features]);
  const output = model.predict(input);
  const score = output.dataSync()[0]; // SVM的决策分数（>0为1类，<0为0类）
  const userType = score > 0 ? "购买意向用户" : "普通浏览用户";
  return { score: score.toFixed(2), userType };
}

// 测试1：新用户[18, 9]（长停留+多点击）
console.log(predictUser([18, 9])); 
// 输出：{ score: "2.35", userType: "购买意向用户" }

// 测试2：新用户[4, 1]（短停留+少点击）
console.log(predictUser([4, 1])); 
// 输出：{ score: "-0.82", userType: "普通浏览用户" }

// 可视化分类边界
function plotBoundary() {
  const container = { name: '分类边界', tab: 'SVM分类' };
  tfvis.render.scatterplot(container, {
    values: [
      trainData.xs.filter((_, i) => trainData.ys[i] === 1).map(x => ({ x: x[0], y: x[1] })),
      trainData.xs.filter((_, i) => trainData.ys[i] === 0).map(x => ({ x: x[0], y: x[1] }))
    ],
    series: ['购买意向', '普通浏览']
  }, {
    xLabel: '停留时间（秒）',
    yLabel: '点击次数',
    callbacks: {
      // 画分类边界（直线：w1*x1 + w2*x2 + b = 0）
      drawAfter: (ctx, data) => {
        const weights = model.layers[0].getWeights()[0].dataSync(); // w1, w2
        const bias = model.layers[0].getWeights()[1].dataSync()[0]; // b
        const xMin = 0, xMax = 25;
        // 计算边界线的y值：y = (-w1*x - b)/w2
        const yMin = (-weights[0] * xMin - bias) / weights[1];
        const yMax = (-weights[0] * xMax - bias) / weights[1];
        // 画边界线
        ctx.beginPath();
        ctx.moveTo(xMin, yMin);
        ctx.lineTo(xMax, yMax);
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 2;
        ctx.stroke();
        // 画间隔线（边界线±1/w2，模拟最大间隔）
        const yMin1 = (-weights[0] * xMin - bias - 1) / weights[1];
        const yMax1 = (-weights[0] * xMax - bias - 1) / weights[1];
        const yMin2 = (-weights[0] * xMin - bias + 1) / weights[1];
        const yMax2 = (-weights[0] * xMax - bias + 1) / weights[1];
        ctx.beginPath();
        ctx.moveTo(xMin, yMin1);
        ctx.lineTo(xMax, yMax1);
        ctx.strokeStyle = 'rgba(0,0,255,0.3)';
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(xMin, yMin2);
        ctx.lineTo(xMax, yMax2);
        ctx.strokeStyle = 'rgba(0,0,255,0.3)';
        ctx.stroke();
      }
    }
  });
}

// 执行可视化
plotBoundary();