手写数字实验记录：怎么把离线分类项目接进浏览器实验台
人工智能项目
手写数字实验记录：怎么把离线分类项目接进浏览器实验台
解释浏览器实验台为什么采用轻量预训练模型、它和离线 C 项目的关系，以及如何用样本浏览和手绘输入理解预测结果。
人工智能项目

手写数字实验记录：怎么把离线分类项目接进浏览器实验台

阅读信息

难度: 实战 阅读时间: 8 分钟
  • Browser Demo
  • Softmax
  • Visualization
打开知识图谱

手写数字项目接进站点之后，我没有把实验台做成“在浏览器里重新训练完整 42000 条数据”的版本。那样会太重，也不适合手机端。现在的做法更实用：保留离线 C 项目的完整下载版本，再给实验台加一个轻量、可交互、能立刻看到预测结果的浏览器模型。

这样分层有两个好处。一是网站访问者不需要本地编译环境，也能直接理解输入、概率和预测之间的关系。二是离线项目和网页演示各自边界清楚，不会为了前端演示把原始实现改得面目全非。

一、实验台里的手写数字模块做了什么

新标签页现在支持三件事：

  • 浏览样本：从训练集抽取一批真实数字样本，直接加载到 28 x 28 网格里
  • 手绘输入：在浏览器里直接画数字，立即查看模型预测
  • 概率面板：同时显示 0 到 9 十个类别的概率分布，而不是只给一个结果

这类界面对学习很有帮助，因为你不只是看到“答案是什么”，还能看到模型为什么更偏向某几个数字。

二、浏览器版模型和离线 C 项目有什么关系

网页里加载的不是完整训练过程，而是一份预训练好的轻量 softmax 权重文件。它和 C 项目属于同一类多分类线性模型，只是为了网页体积和响应速度，改成了预先训练后再加载。

当前浏览器演示权重来自一份较小的训练切片：

  • 训练样本：10000 条
  • 验证样本：2000 条
  • 训练轮次：18
  • 学习率：0.35
  • 验证准确率：约 90.65%

这不是为了追求最强分数，而是为了让实验台在浏览器里也能保持即时反馈。真正完整的数据和源码仍然保留在下载包里。

三、为什么不直接在前端重跑完整训练

原因很现实：

  • 完整训练集太大，不适合每次页面加载都重新处理
  • 浏览器端反复做大规模梯度更新，会显著拖慢页面交互
  • 手机端更需要稳定的体验，而不是把 CPU 全部占满

所以实验台更适合承担“可视化理解”和“交互试验”的角色，而不是替代离线训练环境。

四、如何判断一次手绘预测是否可信

实验台的结果不应该只看最大概率的类别。更有价值的观察方式是比较前两名概率的差距：如果第一名只有 0.31，第二名有 0.29，那么模型其实并不确定；如果第一名超过 0.85，且其他类别都很低，说明当前输入更接近训练集中学到的形状。这个差距比单纯的类别编号更能说明模型边界。

还要注意输入分布。离线数据集中的数字通常居中、笔画粗细相对稳定，而手绘输入可能偏左、偏右、太细或断笔。softmax 线性模型没有卷积网络那样强的平移不变性，所以同一个数字稍微移动位置，概率就可能明显变化。把这些失败样本保存下来，比只挑正确样本展示更适合学习模型限制。

五、这个模块最适合怎么用

建议按这个顺序体验：

  1. 先加载一个真实样本，确认数字网格和预测结果是否一致
  2. 再手动改几笔，观察概率怎么变化
  3. 最后清空画板，自己画一个数字，看模型最容易在哪些数字之间犹豫

如果你画了一个 9，但模型同时给 4 和 7 很高概率，这通常不是坏事，反而说明你已经看到模型的边界了。

六、这个实验台和文章、下载页怎么配合

现在这组内容已经形成了比较完整的结构：

  • 第一篇 先讲数据文件和 784 维输入格式
  • 第二篇 再讲 C 语言 softmax 分类器如何训练和导出结果
  • 下载页 集中放源码、压缩数据、示例提交文件和浏览器模型文件
  • 实验台 提供直接可交互的轻量版本

这样安排之后，读者可以在文章里理解原理，在下载区拿到材料，在实验台里马上试。

七、下一步还能继续怎么增强

这一版已经能承担教学演示，但后面还可以继续做三类增强：

  • 增加“笔刷粗细”和“自动居中”之类的输入处理
  • 把错误样本单独整理成可切换的案例列表
  • 把浏览器端模型和离线 C 项目的输出做更细的对照说明

对学习型网站来说，这类增强比堆更多装饰更有意义。重点不是页面看起来像 AI 产品，而是让读者真的能比较输入、模型和输出。

八、直接去哪里继续

如果你还没看源码文章，建议先回到 C 语言实现说明。如果你已经准备自己跑一次完整项目，就直接打开 下载页 拿材料；如果只是想快速试一下，就去 实验台 直接画几个数字。

九、把一次预测记录成可复查的小实验

只看一次“预测正确”并不能说明模型已经可靠。更好的做法是把同一个数字做三到五次轻微变化，然后记录模型概率如何变化。比如同样画一个 3，可以分别尝试笔画居中、偏左、上半部分开口更大、下半部分更圆。每一次都记录最高概率、第二高概率和两者差值。

观察项 应该记录什么 为什么有用
Top-1 类别 概率最高的数字 判断模型最终输出
Top-2 类别 第二高概率的数字 观察模型最容易混淆的方向
概率间隔 Top-1 减 Top-2 衡量当前预测是否有足够把握
输入变化 偏移、粗细、断笔或旋转 定位模型对哪类扰动最敏感

这样记录之后，实验台就不只是一个“画数字玩具”，而是一个可复查的模型诊断入口。你可以明确看到：线性 softmax 对整体形状有一定识别能力，但对平移、断笔和局部变形没有卷积网络那么稳定。

十、为什么这个轻量实验仍然有教学价值

浏览器版本没有追求最高准确率，这一点需要说清楚。它的价值在于把模型输入、权重输出和概率分布放到同一个界面里，让读者能快速建立“像素数组到类别概率”的直觉。对于入门者来说，这比直接给一个复杂 CNN 更容易检查每一步。

如果后续把模型换成卷积网络，也应该保留这套观察方式：先看输入是否合理，再看概率分布是否集中，最后看错误样本是否集中在某几类数字。模型可以升级，但验证思路不能省略。

内部链接

相关阅读

补基础 用 C 实现手写数字 Softmax 分类器：从 784 维像素到 submission.csv

结合当前项目源码，讲清楚 softmax 多分类、损失函数、梯度更新、混淆矩阵输出，以及 submission.csv 的生成过程。

 继续下一篇 CIFAR-10 Tiny CNN 教程：用 C 语言实现小型卷积神经网络图像分类

用单文件 C 程序完成 CIFAR-10 小型 CNN 图像分类，讲解数据格式、网络结构、训练命令、loss、accuracy、常见错误和改进方向。

 学习路线 AI 学习路线

按顺序阅读 AI 基础、机器学习、CNN、流量防御和 AI 安全内容。

 配套资源 资源库

下载文章配套代码、数据集、图示、模型文件和说明。

 专题页 学生 AI 项目

把手写数字、浏览器实验台和 CNN 项目串成作品集路线。

搜索问题

常见问题

这篇文章适合谁读？

这篇文章适合想用 实战 难度理解“手写数字实验记录：怎么把离线分类项目接进浏览器实验台”的读者，预计阅读时间约 8 分钟，重点覆盖 Browser Demo, Softmax, Visualization。

读完后下一步应该看什么？

推荐下一步阅读“CIFAR-10 Tiny CNN 教程：用 C 语言实现小型卷积神经网络图像分类”，这样可以把当前知识点接到更完整的学习路线里。

这篇文章有没有可运行代码或配套资源？

有。页面里的运行说明、资源卡片和下载入口会指向复现实验所需的命令、数据、代码或说明文件。

这篇文章和整个网站的学习路线有什么关系？

它会通过文章上下文、学习路线、资源库和项目时间线连接到同一主题下的其他内容。

文章上下文

人工智能项目

从 AI、机器学习、训练评估、神经网络到 Python 小实战、手写数字识别、CIFAR-10 CNN、对抗性流量防御和 AI 安全攻防，按顺序建立基础。

难度: 实战 阅读时间: 8 分钟
  • Browser Demo
  • Softmax
  • Visualization

继续下一步

继续：CIFAR-10 Tiny CNN 教程
先补基础 打开资源
对应语言版本 Handwritten Digit Playground Notes: Bringing an Offline Classifier into the Browser
可分享摘要 手写数字实验记录：怎么把离线分类项目接进浏览器实验台

解释浏览器实验台为什么采用轻量预训练模型、它和离线 C 项目的关系，以及如何用样本浏览和手绘输入理解预测结果。

下载分享图 打开分享中心

配套资源

发表回复

项目时间线

已发布文章

  1. 人工智能基础学习路线：先理解什么是 AI、机器学习和深度学习 面向有编程基础的读者，梳理 AI、机器学习、深度学习的关系，并给出可执行的人工智能基础学习路线。
  2. 机器学习完整流程：从数据、特征到模型预测 从工程视角拆解机器学习完整流程：定义问题、理解数据、处理特征、训练模型、预测和评估。
  3. 机器学习算法怎么选：分类、回归、聚类和推荐场景对照表 用任务类型、数据规模、解释性和部署成本选择机器学习算法，覆盖逻辑回归、决策树、随机森林、K-means 和表格数据基线模型。
  4. 特征工程入门实战：用 scikit-learn 处理缺失值、类别变量和数值标准化 用 scikit-learn Pipeline 和 ColumnTransformer 完成特征工程，处理缺失值、类别变量、数值标准化，并避免数据泄漏。
  5. 模型训练与评估入门：损失函数、过拟合和准确率怎么理解 讲清楚模型训练中的参数、损失函数、梯度下降、过拟合，以及准确率、召回率、F1 等分类评估指标。
  6. 过拟合和欠拟合怎么解决：机器学习模型调优实战指南 用训练分数和验证分数判断过拟合与欠拟合，并通过模型复杂度、正则化、交叉验证和特征工程调整机器学习模型。
  7. 神经网络基础：从感知机到多层网络 从一个神经元讲起，解释权重、偏置、激活函数、前向传播、反向传播和典型神经网络训练循环。
  8. 神经网络矩阵微积分：从 y = Wx + b 推导 MSE 梯度 用手算、矩阵形状图、NumPy 代码和梯度检查解释 y = Wx + b 下 dL/dW = (ŷ - y)x^T 的来源。
  9. 反向传播计算图：两层 MLP 的前向、局部梯度和反向传播 把两层 MLP 拆成计算图，手算 ReLU、softmax cross-entropy、dW2、dW1，并用 NumPy 复现实验结果。
  10. 梯度下降与优化器几何：Momentum、Adam 和 loss surface 轨迹 在二维二次函数上手算梯度下降前几步，比较 Momentum 和 Adam 的轨迹，并用代码生成 loss contour。
  11. 卷积与感受野数学：5×5 输入、3×3 kernel、padding 和 im2col 手算一次 5x5 输入与 3x3 kernel 的离散卷积，解释输出尺寸、padding、stride、感受野和 im2col。
  12. Transformer Attention 数学：Q/K/V、Softmax 权重、Mask 与 KV Cache 用 3 个 token 手算 scaled dot-product attention，解释 Q/K/V、softmax、mask、多头注意力和 KV cache。
  13. Python 人工智能小实战：用 scikit-learn 完成一个分类任务 使用 scikit-learn 内置教学数据集跑通一个分类任务，覆盖数据加载、拆分、标准化、训练、预测、评估和实验记录。
  14. 手写数字识别项目入门：先读懂 train.csv、test.csv 和标签结构 从项目文件结构入手，读懂手写数字训练集、测试集、标签列和 784 维像素输入，为后续 C 分类器和实验台打基础。
  15. 用 C 实现手写数字 Softmax 分类器：从 784 维像素到 submission.csv 结合当前项目源码，讲清楚 softmax 多分类、损失函数、梯度更新、混淆矩阵输出，以及 submission.csv 的生成过程。
  16. 手写数字实验记录：怎么把离线分类项目接进浏览器实验台 解释浏览器实验台为什么采用轻量预训练模型、它和离线 C 项目的关系，以及如何用样本浏览和手绘输入理解预测结果。
  17. CIFAR-10 Tiny CNN 教程：用 C 语言实现小型卷积神经网络图像分类 用单文件 C 程序完成 CIFAR-10 小型 CNN 图像分类，讲解数据格式、网络结构、训练命令、loss、accuracy、常见错误和改进方向。
  18. 构建高熵流量防御：基于 Python 的连接层白噪声混淆与对抗性机器学习实践 以 mld_chaffing_v2.py 虚幻镜项目为例，讲解加密元数据泄漏、信息熵、分布距离、混淆矩阵、空闲窗口微脉冲和性能测试取舍。
  19. AI 安全威胁建模：用 NIST AML、MITRE ATLAS 和 OWASP 建立攻防地图 用 NIST Adversarial ML、MITRE ATLAS 和 OWASP LLM Top 10 建立 AI 安全威胁模型，覆盖资产、攻击面、证据和剩余风险。
  20. 对抗样本与鲁棒评估：从 FGSM 公式到 scikit-learn 数字分类实验 从 FGSM 公式解释对抗样本，用 scikit-learn digits toy 实验评估 clean accuracy、perturbed accuracy 和扰动预算。
  21. 数据投毒与后门攻击防御：污染率、触发器和训练管线隔离 用 toy digits 实验解释数据投毒、后门触发器、attack success rate、数据来源审计和训练管线隔离。
  22. 模型隐私与模型窃取风险：成员推断、模型抽取和输出接口防护 用本地 toy 实验解释成员推断、模型抽取、membership AUC、surrogate fidelity、输出最小化和查询治理。
  23. LLM/RAG/Agent 安全：Prompt Injection、工具权限和边界感知防护 从 RAG 和 Agent 架构解释 prompt injection、外部数据降权、工具 allowlist、人工审批和边界感知防护。

已公开资源

  1. Python AI 小实战代码说明 文章内包含可直接复制运行的 scikit-learn 分类脚本。
  2. digit_softmax_classifier.c 手写数字 softmax 分类器的 C 语言源码。
  3. train.csv.zip 手写数字训练集压缩包，包含 42000 条带标签样本。
  4. test.csv.zip 手写数字测试集压缩包，包含 28000 条待预测样本。
  5. sample_submission.csv 官方提交格式示例，可直接对照最终输出字段。
  6. submission.csv 当前 C 项目跑出的预测结果文件。
  7. digit-playground-model.json 浏览器实验台使用的轻量 softmax 演示模型与样本。
  8. digit-sample-grid.svg 从训练集中抽取的小型手写数字预览网格。
  9. 手写数字项目打包下载 包含源码、压缩数据、提交文件、浏览器模型和样本预览图。
  10. cifar10_tiny_cnn.c 源码 单文件 C 语言 tiny CNN，包含 CIFAR-10 读取、卷积、池化、softmax 和反向传播。
  11. model_weights.bin 样例权重 一次本地小样本运行生成的模型权重文件。
  12. test_predictions.csv 预测样例 CIFAR-10 tiny CNN 输出的测试预测样例。
  13. CNN 项目说明 PDF 配套 CNN 项目说明材料。
  14. 虚幻镜脱敏代码骨架 去除控制口令、真实节点和目标列表后的 mld_chaffing_v2.py 控制流程说明。
  15. 虚幻镜压力测试记录模板 用于记录 CPU、内存、线程峰值、微脉冲速率、延迟和错误数的脱敏 CSV 模板。
  16. 虚幻镜分类器评估模板 用于记录 TP、FN、FP、TN、accuracy、precision、recall、F1、ROC-AUC、熵和 JS 散度的 CSV 模板。
  17. 虚幻镜资源说明 说明公开资源为何只提供脱敏代码、测试模板和架构笔记。
  18. AI Security Lab 说明 说明 AI 安全攻防系列的安全边界、安装命令和 quick-run 实验。
  19. AI Security Lab 完整实验包 包含安全 toy scripts、结果 CSV、风险登记表、攻防矩阵和架构图。
  20. AI 安全风险登记表 面向 AI 威胁建模和上线评审的 CSV 风险登记模板。
  21. AI 攻防矩阵 把攻击面、toy demo、指标和防护控制映射到一张 CSV 表。
  22. AI Security Lab 架构图 展示威胁建模、鲁棒评估、数据完整性、模型隐私和 RAG 防护之间的关系。
  23. FGSM digits 鲁棒评估脚本 本地 digits 分类器的 FGSM-style 扰动和准确率下降实验。
  24. 数据投毒与后门 toy 脚本 用 digits 数据演示污染率、触发器和 attack success rate。
  25. 模型隐私与抽取 toy 脚本 输出 membership AUC、target accuracy、surrogate fidelity 和 surrogate accuracy。
  26. RAG prompt injection guard toy 脚本 用确定性 toy agent 演示外部数据降权和工具权限阻断。
  27. Deep Learning Math Lab 说明 包含安装命令、脚本入口、输出结果和文章图示生成说明。
  28. 深度学习数学完整实验包 打包 NumPy 脚本、CSV 结果、公式图、loss contour、卷积图和 attention 热图。
  29. 梯度检查结果 CSV 保存 MSE 梯度解析值、数值差分值和误差范数。
  30. 优化器轨迹 CSV 记录梯度下降、Momentum 和 Adam 在二维二次函数上的逐步坐标与 loss。
  31. Attention 权重 CSV 三 token scaled dot-product attention 的 scores、softmax weights 和 context 输出。
  32. 深度学习数学图示目录 包含矩阵形状、计算图、loss contour、卷积扫描和 attention heatmap。
  33. 深度学习数学交互演示 在浏览器里调梯度检查、优化轨迹、卷积输出尺寸和 attention 权重热图。
  34. 深度学习专题分享图 用于分享深度学习 / CNN 专题页的 1200x630 SVG 图。
  35. 从零实现机器学习分享图 用于分享 K-means、Iris 和机器学习流程专题页的 1200x630 SVG 图。
  36. 学生 AI 项目分享图 用于分享手写数字、C 分类器和浏览器实验台专题页的 1200x630 SVG 图。
  37. CNN 卷积扫描动画 Remotion 生成的 8 秒短动画，展示 3x3 卷积核如何扫描输入并形成特征图。

当前学习路线

  1. 人工智能基础学习路线 学习路线节点
  2. 机器学习完整流程 学习路线节点
  3. 机器学习算法怎么选 学习路线节点
  4. 特征工程入门实战 学习路线节点
  5. 模型训练与评估入门 学习路线节点
  6. 过拟合和欠拟合怎么解决 学习路线节点
  7. 神经网络基础 学习路线节点
  8. 神经网络矩阵微积分 学习路线节点
  9. 反向传播计算图 学习路线节点
  10. 梯度下降与优化器几何 学习路线节点
  11. 卷积与感受野数学 学习路线节点
  12. Transformer Attention 数学 学习路线节点
  13. LLM 可视化教学台 学习路线节点
  14. Python 人工智能小实战 学习路线节点
  15. 手写数字数据结构入门 学习路线节点
  16. 用 C 实现手写数字 Softmax 分类器 学习路线节点
  17. 手写数字实验台说明 学习路线节点
  18. CIFAR-10 Tiny CNN 教程 学习路线节点
  19. 高熵流量防御实验 学习路线节点
  20. AI 安全威胁建模 学习路线节点
  21. 对抗样本与鲁棒评估 学习路线节点
  22. 数据投毒与后门防御 学习路线节点
  23. 模型隐私与模型抽取防护 学习路线节点
  24. LLM/RAG/Agent 安全 学习路线节点

下一步计划

  1. 补充更多图像分类和误差分析案例
  2. 把常见指标整理成速查表
  3. 继续补充 AI 安全防御实验记录
向下探索