企业官网建设流程全解析

简介：基于TensorFlow.js和D3.js打造的机器学习可视化交互式前端小程序，面向机器学习初学者、高校教师及前端开发者，以图形化交互方式降低线性回归、KNN、决策树等基础算法的理解门槛。程序支持数据上传和模型参数实时调整，用户可直观观察参数变化对预测或分类结果的影响，非常适合课堂教学演示、算法原理自学与轻量级原型验证。资源包共50个文件，大小1.08MB，以png界面快照、html页面入口、js交互逻辑、json配置、docx说明文档等类型为主，同时包含可运行的示例索引和附赠说明材料，结构清晰，便于按需查阅。目前已有56人学习下载。借助可直接浏览的HTML演示和源码，读者既能快速上手体验算法过程，也能在此基础上修改参数、替换数据或扩展新的可视化模块，用于教学展示、课程设计或前端机器学习入门实践。

1. 这个标题背后：一套能“动手”的机器学习教学演示，而不是又一个静态图表

我第一次看到“基于TensorFlow.js和D3js的机器学习可视化交互式前端小程序”这个标题，第一反应是它解决了课堂上的一个普遍痛点：讲KNN、线性回归时，PPT里的静态图无法解释“K值从3调到20，决策边界怎么变”。这个项目把训练和可视化全部塞进浏览器，支持数据上传和参数拖拽，算法原理不再是一个黑匣子，而是可以直接上手拉的交互演示。它适合教学展示、期末复习，也适合想入门机器学习的前端工程师，用最熟悉的JavaScript去感知线性回归、KNN、决策树这些基础算法。下面我从技术选型讲到落地细节，告诉你如何复现并避开那些让新手翻车的坑。

2. 为什么用TensorFlow.js和D3.js：算画分离、浏览器跑通、零后端依赖

2.1 TensorFlow.js负责“算”，D3.js负责“画”：职责边界

在实现这个“机器学习可视化前端小程序”时，任务天然分成两块：算法相关的计算，和把结果画到页面上。TensorFlow.js是前者的事实选择，它能在前端做张量运算、自动求导、模型训练，线性回归、逻辑回归甚至小型MLP都能直接跑。D3.js则是后者的老牌工具，擅长把数据和DOM/SVG绑定，并通过过渡动画呈现状态变化。两者结合，刚好让“算”和“画”各司其职：tf负责拟合、预测、计算损失；d3负责把散点、回归线、决策边界和损失曲线画成可交互图形。

如果只用D3.js，你需要手写梯度下降，还得维护一堆中间变量；如果只用TensorFlow.js，它的底层是WebGL，能训练但画图能力很弱，你还要手动管理Canvas或SVG。我在最初实现时，也想过用ECharts代替D3——ECharts的折线图、热力图开箱即用，但自定义状态绑定的能力不如D3灵活。这里指的是类似“点击一个样本，高亮它在决策树中的路径”这样的交互，D3可以精准控制每个DOM元素，而ECharts很难做这种细粒度联动。

所以你在引入这两个库的时候，只需要记住一条边界：所有带“训练、预测、损失”语义的代码，全部走tf；所有带“坐标、颜色、path、transition”语义的代码，全部走d3。这个边界一旦清晰，项目代码结构就稳定了，后续加新算法也不会乱。

2.2 对比Python后端+ECharts：教学演示场景里，前端全栈方案赢在哪

可能有人会问：为什么不用Python写算法、用Flask搭后端，再用ECharts在前端画图？这种方案能跑通，但教学演示场景有自己的门槛。首先，课堂环境往往不允许装环境，学生打开一个HTML文件就能跑，远比启动Flask服务来得快。其次，交互延迟不同：参数调整需要每个请求走一次网络，反馈至少几百毫秒；而纯前端方案里，数据都在内存中，TensorFlow.js训练一轮就是一次张量运算，D3重绘也是一次DOM更新，整个响应链在浏览器内完成，拖拽参数时几乎无延迟。

此外，这个项目的定位是“算法原理可视化”，不是“生产级训练平台”，不需要Python生态中那些强大的数据处理能力。所有数据来自上传的CSV，最多几千行，前端做归一化和随机打乱都足够快。部署上，纯前端构建产物就是一堆静态文件，丢到GitHub Pages或任意对象存储就能上课用，没有服务器成本。

不过需要清醒地看到边界：如果演示的数据量大到十万行，决策树模型必将在浏览器里卡成幻灯片；如果需要跑深度网络，前端模型速度也无法和GPU服务器相比。但反过来说，教学演示的核心是观察参数如何影响结果，而不是比拼训练速度，这正是TensorFlow.js方案最舒服的区间。再加上D3的数据驱动文档模型在后期扩展PCA、支持向量机等可视化时更灵活，所以我最终选择了这个组合。

2.3 最小项目骨架：HTML入口、CDN加载、全局变量还是ESModule

接下来是一个可复现的最小骨架。建议先用全局变量方式引入库，而不是使用ESModule，因为后面的代码要直接在<script>标签里操作tf和d3，方便在单文件中复用。下面这个index.html是常见做法的起点：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ML Visual Lab</title> <!-- 引入 TensorFlow.js 与 D3.js，这里用 latest，确保教学演示时不用手动升级 --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script> <script src="https://cdn.jsdelivr.net/npm/d3@7"></script> <style> body { display: flex; gap: 20px; font-family: system-ui, sans-serif; } #panel { width: 300px; } #chart { flex: 1; } </style> </head> <body> <div id="panel"> <label>学习率 <input type="range" id="lr" min="0.001" max="0.5" step="0.001" value="0.01"></label> </div> <div id="chart"></div> <script src="train.js"></script> <script src="visualize.js"></script> </body> </html>

这里有两个值得注意的参数：TensorFlow.js 的 CDN 地址我使用@latest，因为教学项目对版本稳定性要求不高；如果要做长期维护，建议固定一个主版本，但不要在课堂现场升级库。d3@7是当前比较常见的版本，API风格和V5、V6基本一致，学习成本低。

train.js中初始化模型，visualize.js中创建D3缩放比例尺和SVG容器。注意二者都依赖全局的tf和d3，所以脚本加载顺序不能颠倒。如果你的项目已经用了Vue或React，可以用npm包方式引入，但入门期我还是建议原生三件套，因为这种教学项目通常不涉及组件化状态管理，全局变量反而更容易调试。这个骨架看起来简单，但它是后续所有算法的地基，后续加KNN、决策树时，只需要新增对应的模块，其余结构不变。

3. 把线性回归做成可交互的直观演示：从生成数据到更新拟合曲线

3.1 用TensorFlow.js构建单变量线性回归：模型定义与优化器选择

线性回归是这个项目里最容易实现、却最能说明“参数调整”的部分。先用tf.sequential搭一个单层线性模型，输入是[1]，输出也是[1]，没有激活函数：

// train.js 核心片段 function createModel() { const model = tf.sequential(); // 单变量线性回归，一个 dense 层就够了 model.add(tf.layers.dense({ units: 1, inputShape: [1], name: 'linear' })); const optimizer = tf.train.sgd(parseFloat(d3.select('#lr').property('value'))); model.compile({ optimizer: optimizer, loss: 'meanSquaredError', metrics: ['mse'] }); return model; }

注意这里的units是输出维度，单变量线性回归输出只有1个值。inputShape必须显式写[1]，表示每条样本是一个长度为1的向量。为什么不写成[null, 1]？因为这里处理的是固定一个特征的输入，排成二维张量的形状是[batchSize, 1]，写[1]能让模型正确识别特征维度。优化器选择tf.train.sgd，学习率从界面上的滑块实时读取，这样改学习率后重新编译模型，就能让学生直观看到梯度下降步长的影响。

训练循环我一般这样写：

let currentStep = 0; const totalSteps = 200; function trainStep(xs, ys, model) { const history = model.fit(xs, ys, { epochs: 1, batchSize: 32, shuffle: true, verbose: 0 }); return history.history.loss[0]; }

这里epochs: 1表示每调用一次trainStep只训练一个轮次，而不是一下子跑200轮。教学演示里，我们希望看到曲线随着时间逐渐逼近数据点，所以通过requestAnimationFrame每帧调用一次trainStep，并把当前损失值存下来。batchSize: 32是经验值，如果数据少于32条，TensorFlow.js会自动退化成全量梯度下降，同样有效。

3.2 D3.js绘制散点和回归线：从数据绑定到过渡动画

散点图是最直接的数据表达。创建SVG容器后，需要先设置比例尺，把样本的[x, y]映射到像素坐标：

// visualize.js 核心片段 const svg = d3.select('#chart').append('svg') .attr('width', 600).attr('height', 400); const xScale = d3.scaleLinear() .domain([xMin, xMax]) .range([40, 580]); const yScale = d3.scaleLinear() .domain([yMin, yMax]) .range([360, 40]); // SVG的y轴向下，range要反着写

这里xMin/xMax来自生成的数据范围，也可以根据上传的数据动态计算。y轴范围反着写，否则散点会上下颠倒。接下来用数据绑定画出散点：

svg.selectAll('circle.data-point') .data(points) .join('circle') .attr('class', 'data-point') .attr('cx', d => xScale(d.x)) .attr('cy', d => yScale(d.y)) .attr('r', 4) .attr('fill', '#2196F3') .attr('opacity', 0.7);

这段代码的核心是.join('circle')，它替代了老版本的enter().append('circle')，能自动处理新增、移除和更新三种状态。训练过程中如果不重新渲染散点，只更新回归线，你可以把散点绘制单独抽成一个函数，只在数据变化时调用。回归线则根据模型当前权重，在[xMin, xMax]之间采样几个点连成直线：

function drawRegressionLine(model, xScale, yScale) { const xs = tf.linspace(xMin, xMax, 100); const ys = model.predict(xs); const xsData = xs.dataSync(); const ysData = ys.dataSync(); const linePoints = []; for (let i = 0; i < 100; i++) { linePoints.push({ x: xScale(xsData[i]), y: yScale(ysData[i]) }); } xs.dispose(); ys.dispose(); svg.selectAll('line.regression').remove(); svg.append('line') .attr('class', 'regression') .attr('x1', linePoints[0].x).attr('y1', linePoints[0].y) .attr('x2', linePoints[linePoints.length - 1].x) .attr('y2', linePoints[linePoints.length - 1].y) .attr('stroke', '#E53935') .attr('stroke-width', 3); }

这里有一个必须注意的点：model.predict(xs)返回的是一个Tensor，调用dataSync()会把它展开成JavaScript数组，但这个Tensor不能丢在那里不管，否则每次预测都会积累显存。我在这里直接xs.dispose()和ys.dispose()释放张量，这是血泪经验——否则训练几十轮后浏览器会越来越卡。另外，这里采样100个点画回归线足够平滑，如果你把linspace的采样数增加到500，曲线会更细腻，但视觉差异不大，白白增加计算量。

3.3 可调参数：学习率、迭代次数、噪声程度如何影响训练曲线

为了让课堂演示“能折腾”，我会在界面上放三个参数滑块：学习率、迭代次数、噪声系数。它们的作用完全不同。学习率通过d3.select('#lr').property('value')读取，每次重新训练时用新值编译模型；迭代次数控制训练的轮数；噪声系数则在你点击“重新生成数据”时作用于样本标签：

function generateData(noise) { const points = []; const w_true = 2.0, b_true = 1.5; for (let i = 0; i < 80; i++) { const x = (i - 40) / 10; const y = w_true * x + b_true + (Math.random() - 0.5) * noise; points.push({ x, y }); } return points; }

这里的noise通过界面滑块传入，控制随机扰动的幅度。当噪声特别大时，散点非常离散，模型拟合出的斜率会偏离真实值，这正好是一堂生动的“方差与偏差”课。迭代次数是训练的总轮数，我一般设为200，但如果课堂时间短，可以压低到50，让学生快速看到训练过程。

为了让参数调整实时生效，我采用“重置并重新训练”的策略：任何参数变化都会先清理当前模型和中间张量，然后按新参数从头训练。不要试图在训练过程中动态改学习率，因为TensorFlow.js优化器在编译后参数就写入图里，动态修改语义不明确。这种方式虽然每次都要重新来，但课堂节奏反而更好，学生能对比不同参数在相同初始状态下的表现。如果数据量在100条以下，这个重训过程一般不会超过1秒，用户体验是即时反馈。

3.4 把损失值绘制成折线图：训练过程的“黑匣子”被打开

只看到回归线逼近数据，仍然无法解释梯度下降的内部行为。我会在散点图旁边放一个小折线图，展示每个训练步的MSE损失。实现时用D3的line生成器：

function drawLossCurve(lossHistory) { const lossSvg = d3.select('#lossChart'); const line = d3.line() .x((d, i) => i * 2) .y(d => yScaleLoss(d)); lossSvg.selectAll('path.loss').remove(); lossSvg.append('path') .attr('class', 'loss') .attr('d', line(lossHistory)) .attr('fill', 'none') .attr('stroke', '#888'); }

这里的lossHistory是每次trainStep后从history.history.loss[0]取出的值，压入数组后随训练过程不断重画。损失曲线形状很直观：学习率合适时会快速下降然后平缓；学习率过大会表现为来回震荡甚至持续上升；噪声大时则不会降到很低。这一张图就把“梯度下降”从一个数学公式变成了一条会动的曲线，学生不需要看公式也能感知参数的影响。如果配合上一步的requestAnimationFrame，这条曲线会像心跳一样稳定延伸，这是课堂演示中最容易吸引注意力的部分。

4. KNN和决策树：两种不用梯度下降的算法，如何做成可交互可视化

4.1 手写KNN分类器：欧氏距离、K值选择与投票逻辑

KNN不需要训练，它的核心是计算待预测点到所有样本点的距离，取最近的K个投票决定类别。这更接近“数据处理”而不是“模型训练”。在纯前端框架里，我会把样本点存成数组，预测时用双重循环计算欧氏距离：

// knn.js 核心片段 function knnPredict(samples, target, k) { const dists = samples.map(sample => { const dist = Math.sqrt( Math.pow(sample.x - target.x, 2) + Math.pow(sample.y - target.y, 2) ); return { dist: dist, label: sample.label }; }); dists.sort((a, b) => a.dist - b.dist); const topK = dists.slice(0, k); const voteCount = {}; topK.forEach(item => { voteCount[item.label] = (voteCount[item.label] || 0) + 1; }); return Object.keys(voteCount).reduce((a, b) => voteCount[a] > voteCount[b] ? a : b); }

这里k是参数，可以在界面上用滑块调整。注意两点：第一，距离计算前特征必须做归一化，否则两个特征量纲不同（比如一个值在0到1，另一个在0到1000），距离会被大数值特征主导；第二，这里用简单对象存储样本，数据量几千条时性能足够，不需要优化成KD树。课堂演示时，可以把K设为1，学生看到决策边界非常碎片化；K设为50，边界变得很平滑。这个“K值效应”是KNN教学中直观的部分。

4.2 决策边界的网格可视化：用D3渲染热力图

KNN的决策边界有一种直观的实现——网格扫描。把画布坐标范围内每个像素都当作待预测点，调用knnPredict算出类别，然后填充颜色。但全分辨率扫描会卡死，比如800x400像素意味着32万次KNN。常见做法是降低网格分辨率：

// visualize.js 核心片段 function drawDecisionBoundary(gridResolution = 40, xScale, yScale, samples, k) { const width = 600, height = 400; const stepX = width / gridResolution; const stepY = height / gridResolution; const canvas = document.getElementById('boundaryCanvas'); const ctx = canvas.getContext('2d'); for (let i = 0; i < gridResolution; i++) { for (let j = 0; j < gridResolution; j++) { const pixelX = i * stepX + stepX / 2; const pixelY = j * stepY + stepY / 2; const point = { x: xScale.invert(pixelX), y: yScale.invert(pixelY) }; const label = knnPredict(samples, point, k); ctx.fillStyle = label === 0 ? 'rgba(33,150,243,0.3)' : 'rgba(255,152,0,0.3)'; ctx.fillRect(pixelX, pixelY, stepX, stepY); } } }

gridResolution是我强烈建议暴露到界面的参数，默认40，在屏幕上相当于20像素一格，既能看出边界形状又不会卡死。xScale.invert可以把像素坐标转换为数据坐标，这是D3比例尺提供的。当K值变化时，边界在低分辨率下能反映趋势，但边缘有锯齿；调到80更细腻，但开销成倍增加。如果希望边缘平滑，可以在canvas上用ctx.filter = 'blur(2px)'处理一下边界，但这会增加GPU负担，在课堂演示时慎用。

4.3 决策树的递归分裂与树状图绘制：信息增益与基尼系数的取舍

决策树的实现比KNN复杂，因为要先训练出分裂规则。前端实现一个CART风格决策树，核心是递归地选择特征和阈值，使分裂后的子节点纯度最高。纯度常用基尼系数或信息增益衡量。教学演示我一般用基尼系数，因为它没有对数运算，纯JavaScript计算更快：

function giniIndex(labels) { const total = labels.length; if (total === 0) return 0; const counts = {}; labels.forEach(l => counts[l] = (counts[l] || 0) + 1); let gini = 1; Object.values(counts).forEach(c => { gini -= Math.pow(c / total, 2); }); return gini; } function findBestSplit(samples, features) { let bestGain = 0; let bestFeature = null; let bestThreshold = null; features.forEach(f => { const values = [...new Set(samples.map(s => s[f]))].sort((a, b) => a - b); for (let i = 0; i < values.length - 1; i++) { const threshold = (values[i] + values[i + 1]) / 2; const left = samples.filter(s => s[f] <= threshold); const right = samples.filter(s => s[f] > threshold); const gain = giniIndex(samples.map(s => s.label)) - (left.length / samples.length) * giniIndex(left.map(s => s.label)) - (right.length / samples.length) * giniIndex(right.map(s => s.label)); if (gain > bestGain) { bestGain = gain; bestFeature = f; bestThreshold = threshold; } } }); return { bestFeature, bestThreshold, bestGain }; }

这段代码的关键在于把每个特征的所有可能取值的中点都当作候选阈值，选择基尼增益最大的那个。values.length - 1是因为取最后一个值作为阈值会导致某一侧为空，没有意义。决策树完全生长后会产生很深的树，需要设置最大深度或叶节点最少样本数，否则可视化时节点会挤在一起。我一般设置maxDepth = 4，这样树形图能一屏展示，又不损失教学意义。

树形可视化，我使用D3的tree()布局，它会根据父子关系自动计算坐标。但D3树布局依赖层级数据，你需要把递归分裂返回的分支结构转换成{children: []}形式。转换过程不涉及模型训练，但代码较长，核心是递归调用buildTree。遇到节点重叠时，可以通过调整tree.separation()函数控制子节点间距，具体做法见第5章避坑。

4.4 数据上传与参数调整：CSV解析、归一化、样本增删的交互设计

支持数据上传是这个项目区别于静态示例数据的关键。CSV解析在前端很简单，但容易踩坑。我通常用FileReader读取文件，按行分割，跳过表头，把每一行的数值列用parseFloat转换：

function parseCSV(file, callback) { const reader = new FileReader(); reader.onload = e => { const text = e.target.result; const lines = text.split('\n').filter(line => line.trim().length); const rows = lines.slice(1).map(line => { const cols = line.trim().split(','); return { x: parseFloat(cols[0]), y: parseFloat(cols[1]), label: parseInt(cols[2], 10) }; }); callback(rows); }; reader.readAsText(file); }

这里假设CSV第一行是列名，后面每一行是x,y,label。如果没有列名，你可以把lines.slice(1)改成lines，或者提示用户数据格式。上传后需要立即归一化，否则KNN距离被某列主导，决策树分裂也会偏向数值范围大的特征：

function normalizeData(rows) { const xs = rows.map(r => r.x); const ys = rows.map(r => r.y); const xMin = Math.min(...xs), xMax = Math.max(...xs); const yMin = Math.min(...ys), yMax = Math.max(...ys); rows.forEach(r => { r.xNorm = (r.x - xMin) / (xMax - xMin); r.yNorm = (r.y - yMin) / (yMax - yMin); }); return { xMin, xMax, yMin, yMax }; }

归一化的一个关键细节是必须保存xMin/xMax/yMin/yMax，因为上传新数据时，预测前也需要用同一套缩放参数，否则结果错位。界面上我还会提供“增加样本”和“清除样本”按钮，让老师在课堂上随手添加几个点，立即观察边界变化。这种交互设计很有价值，学生能把自己的想法喂给模型，然后看到反馈，比定死的示例数据更有说服力。

5. 避坑指南与常见问题排查：训练不收敛、界面卡死、数据校不准

5.1 现象：损失值跳到NaN，或训练曲线不下降

在演示线性回归时，最尴尬的瞬间是点了训练按钮后损失变成NaN。这个现象通常有两个原因。第一，学习率太大，梯度下降发生震荡并导致数值溢出，解决办法是把学习率从0.5降到0.01再试。第二，数据没有归一化，比如x范围在[1000, 2000]，y范围在[1, 10]，模型权重初始值稍大就会产生极大损失，梯度也随之失控。解决办法是像第4.4节那样做min-max归一化，让所有特征处于[0,1]区间。如果特征数据量级差异很大，损失值一开始就是天文数字，即使没有变成NaN，训练也会非常慢。我在项目里会把损失值显示区域的底色变成红色，一旦检测到NaN就输出提示，并让用户回退参数。这个提示信息对不熟悉优化器细节的学生特别有帮助。

5.2 现象：D3重绘导致卡顿，拖拽交互像“慢动作”

典型的卡顿发生在两个场景：一是KNN决策边界网格分辨率调太高，二是拖动学习率滑块时，trainStep每帧都强制更新所有散点和回归线。前者的解法在4.2节已经提到，把网格分辨率限制在20到80之间。后者需要分析优化思路：学习率滑块变化时，散点数据并没有变，不需要重建整个SVG。正确做法是把散点渲染和回归线渲染分离，只在“重新生成数据”时重绘散点，而在每个训练步只更新回归线位置和损失曲线。如果还卡，可以用requestAnimationFrame把训练步频控制在屏幕刷新率以内，不要用setTimeout(0)。这里有一个常见误区：认为D3的transition()能让动画变流畅，实际上在持续高频更新中，每个元素都创建过渡动画反而增加开销，直接attr()更新位置更快。

5.3 现象：上传的CSV数据校不准，训练结果与预期不符

数据上传是高频翻车点。我见过的最典型错误是：CSV第一列是标签，而代码假设第一列是特征；或者文件带有Windows的\r换行符，导致标签列变成"1\r"，被parseInt解析成1后却查不到对应类别。解决办法是在解析时做三步防御：先line.trim()，再检查每行非空，最后对每个字段调用parseFloat并用Number.isNaN过滤异常值。此外，上传数据后要在界面右侧回显前10行数据表格，让用户看到解析结果。如果上传的数据本身不平衡，两类样本数量差距过大，决策树和KNN都可能直接预测多数类，我会在界面提示当前样本的类别分布，这能避免老师误以为算法有bug。

5.4 现象：WebGL上下文丢失，TensorFlow.js在长训练后突然报错

TensorFlow.js的默认后端是WebGL，浏览器长时间打开页面、切换标签页或显存被占满时，会触发webglcontextlost事件，随后所有tf操作都会失败。这个坑在我早期演示时出现过：训练到一半，控制台报“WebGL context is lost”，整个图表冻结。解决策略有三个维度。第一，在所有训练循环中，用tf.tidy()包住中间张量操作，并在每次预测后手动dispose，减少显存碎片。第二，监听webglcontextlost事件，在事件里重置页面状态并提示用户刷新；如果希望自动恢复，可以先调用tf.engine().reset()再重新创建模型，但这会丢失训练进度，不如提示刷新。第三，在项目设置里让用户可以手选cpu后端，代价是训练速度慢一些，但课堂演示更稳定。

注意：如果演示现场频繁丢失上下文，优先切换到cpu后端，别在课堂上测试WebGL恢复逻辑。

5.5 现象：决策树可视化节点重叠，文本遮挡严重

决策树越深，D3树布局的叶子节点越容易挤在一起，特别是节点标签包含中文特征名时，文本会相互遮挡。解决这个问题，我做了三件事。第一，限制最大深度，一般设为4或5，这是结构层面的保险。第二，在d3.tree布局中自定义separation距离，让不同父节点的子节点之间有更大的间距：

const treeLayout = d3.tree() .size([width, height]) .separation((a, b) => a.parent === b.parent ? 1 : 1.5);

separation函数的返回值作为兄弟节点之间距离的倍率。同父节点返回1，异父节点返回1.5，能明显降低树枝打架的概率。第三，对节点文本做截断：超过6个字符添加省略号，并用<title>元素在鼠标悬停时显示完整内容。这样即使树深度达到5，整张图也不会乱。如果仍然混乱，建议用横向布局而不是纵向布局——纵向布局在较矮的屏幕上容易溢出，横向布局能利用横向空间。

6. 用回归测试和JSON重放，让这个教学演示真正稳定可用

6.1 三个参数旋钮的回归测试：确保它们不是“假控件”

在把项目交给同事或学生前，我会做一轮手动回归测试。线性回归用y=2x+1生成100个点，噪声设为0，训练后斜率和截距应分别逼近2和1；然后把噪声调大，确认损失不会变成0。KNN用两个明显分离的类别，画出决策边界后，在红色区域手动加入一个点，它应该被分到红色类。决策树则检查根节点的分裂特征和阈值是否符合你设计的数据生成逻辑。这轮测试不用自动化，10分钟就能把所有“假控件”暴露出来，避免课堂上出现模型对参数无响应的尴尬。

6.2 把训练过程导出为JSON并重放，比实时训练更适合课堂

实时训练在课堂网络不稳定时会有风险，TensorFlow.js加载失败或WebGL上下文丢失都会让演示中断。我的常用做法是把训练过程中每一帧的模型权重、损失值、参数配置记录到数组，并支持导出为JSON。重放时不需要运行模型，只要按时间读取权重数组，调用现有的drawRegressionLine即可。这个方法让课堂课件可以预录制不同学习率下的训练动画，甚至放慢某一段发散过程，让学生看清梯度下降如何震荡。发布时，我会把这个静态项目直接托管到Vercel或GitHub Pages，并用python -m http.server在局域网兜底。这个项目至此从“能跑的demo”变成了“可交付的课堂工具”。我现在每改一个参数都会先跑一遍6.1的回归测试，这个习惯帮我避开了不少翻车现场。希望这些经验能帮到你。

本文还有配套的精品资源，点击获取