中文
手写数字实验记录：怎么把离线分类项目接进浏览器实验台
手写数字项目接进站点之后，我没有把实验台做成“在浏览器里重新训练完整 42000 条数据”的版本。那样会太重，也不适合手机端。现在的做法更实用：保留离线 C 项目的完整下载版本，再给实验台加一个轻量、可交互、能立刻看到预测结果的浏览器模型。
这样分层有两个好处。一是网站访问者不需要本地编译环境，也能直接理解输入、概率和预测之间的关系。二是离线项目和网页演示各自边界清楚，不会为了前端演示把原始实现改得面目全非。
一、实验台里的手写数字模块做了什么
新标签页现在支持三件事：
- 浏览样本：从训练集抽取一批真实数字样本，直接加载到 28 x 28 网格里
- 手绘输入：在浏览器里直接画数字，立即查看模型预测
- 概率面板：同时显示 0 到 9 十个类别的概率分布，而不是只给一个结果
这类界面对学习很有帮助，因为你不只是看到“答案是什么”，还能看到模型为什么更偏向某几个数字。
二、浏览器版模型和离线 C 项目有什么关系
网页里加载的不是完整训练过程，而是一份预训练好的轻量 softmax 权重文件。它和 C 项目属于同一类多分类线性模型，只是为了网页体积和响应速度，改成了预先训练后再加载。
当前浏览器演示权重来自一份较小的训练切片：
- 训练样本：10000 条
- 验证样本：2000 条
- 训练轮次：18
- 学习率：0.35
- 验证准确率：约 90.65%
这不是为了追求最强分数，而是为了让实验台在浏览器里也能保持即时反馈。真正完整的数据和源码仍然保留在下载包里。
三、为什么不直接在前端重跑完整训练
原因很现实：
- 完整训练集太大，不适合每次页面加载都重新处理
- 浏览器端反复做大规模梯度更新，会显著拖慢页面交互
- 手机端更需要稳定的体验，而不是把 CPU 全部占满
所以实验台更适合承担“可视化理解”和“交互试验”的角色，而不是替代离线训练环境。
四、这个模块最适合怎么用
建议按这个顺序体验：
- 先加载一个真实样本，确认数字网格和预测结果是否一致
- 再手动改几笔，观察概率怎么变化
- 最后清空画板，自己画一个数字，看模型最容易在哪些数字之间犹豫
如果你画了一个 9，但模型同时给 4 和 7 很高概率，这通常不是坏事，反而说明你已经看到模型的边界了。
五、这个实验台和文章、下载页怎么配合
现在这组内容已经形成了比较完整的结构：
- 第一篇 先讲数据文件和 784 维输入格式
- 第二篇 再讲 C 语言 softmax 分类器如何训练和导出结果
- 下载页 集中放源码、压缩数据、示例提交文件和浏览器模型文件
- 实验台 提供直接可交互的轻量版本
这样安排之后，读者可以在文章里理解原理，在下载区拿到材料，在实验台里马上试。
六、下一步还能继续怎么增强
这一版已经能承担教学演示，但后面还可以继续做三类增强：
- 增加“笔刷粗细”和“自动居中”之类的输入处理
- 把错误样本单独整理成可切换的案例列表
- 把浏览器端模型和离线 C 项目的输出做更细的对照说明
对学习型网站来说，这类增强比堆更多装饰更有意义。重点不是页面看起来像 AI 产品，而是让读者真的能比较输入、模型和输出。
七、直接去哪里继续
如果你还没看源码文章，建议先回到 C 语言实现说明。如果你已经准备自己跑一次完整项目，就直接打开 下载页 拿材料；如果只是想快速试一下，就去 实验台 直接画几个数字。
英文
Handwritten Digit Playground Notes: Bringing an Offline Classifier into the Browser
在独立页面打开After adding the handwritten digit project to the site, I did not want the playground to retrain all 42000 samples inside the browser. That would be too heavy, especially on phones. The current setup is more practical: keep the full offline C project as a download, and add a lightweight interactive browser model for immediate experimentation.
That split keeps the system honest. Visitors do not need a local compiler just to understand the input and prediction flow, and the offline project can stay focused on the actual implementation instead of being distorted to fit a front-end demo.
1. What the handwritten digit module does
The new playground tab supports three main actions:
- Browse real samples loaded from the training set into a 28 by 28 grid
- Draw your own input directly in the browser and run a prediction
- Inspect class probabilities for all ten digits instead of only showing one final label
This is useful for learning because you can see not only what the model predicts, but also which competing digits remain plausible.
2. How the browser model relates to the C project
The page does not load the full training loop. It loads a compact set of pre-trained softmax weights. That keeps the browser demo in the same model family as the C project while making the interaction fast enough for normal page use.
The current browser demo weights come from a smaller training split:
- training samples: 10000
- validation samples: 2000
- epochs: 18
- learning rate: 0.35
- validation accuracy: about 90.65%
The goal is not to chase the strongest possible score. The goal is to make the model response immediate and interpretable in the browser while preserving the full downloadable project separately.
3. Why the browser does not retrain the whole project
The reasons are straightforward:
- the full dataset is too large to reprocess on every page load
- repeated gradient updates in the browser would hurt interaction quality
- mobile users need a stable experience more than a heavy in-page training loop
So the playground is better used as a visualization and interaction surface, not as a replacement for the offline training environment.
4. The best way to use the module
A good sequence is:
- load a real sample and confirm that the grid and prediction agree
- edit a few strokes and watch the probability distribution change
- clear the board and draw a digit yourself to see where the model hesitates
If you draw a 9 and the model also gives meaningful probability to 4 or 7, that is not a failure of the UI. It is a useful view into the model boundary.
5. How it fits with the posts and downloads
The handwritten digit content is now structured as one connected set:
- post one explains the dataset files and the 784-dimensional input format
- post two explains the C softmax classifier, training loop, and exported predictions
- the downloads page collects the source, compressed datasets, sample submission, final submission, and browser model file
- the playground provides the interactive lightweight version
That way, readers can understand the logic in the posts, grab the files from downloads, and try the behavior immediately in the playground.
6. What is worth improving next
This version is already useful for teaching, but there are clear next steps:
- add input helpers such as brush-size controls or centering logic
- collect misclassified examples into a browsable error set
- compare the browser demo outputs against the offline C project in more detail
For a learning-oriented technical site, those improvements matter more than extra decoration. The point is to make the relationship between input, model, and output easier to study.
7. Where to continue
If you have not read the implementation post yet, continue with the C classifier article. If you want to run the full project locally, go straight to the downloads page. If you just want to experiment right away, open the playground and start drawing digits.
手写数字项目接进站点之后，我没有把实验台做成“在浏览器里重新训练完整 42000 条数据”的版本。那样会太重，也不适合手机端。现在的做法更实用：保留离线 C 项目的完整下载版本，再给实验台加一个轻量、可交互、能立刻看到预测结果的浏览器模型。
这样分层有两个好处。一是网站访问者不需要本地编译环境，也能直接理解输入、概率和预测之间的关系。二是离线项目和网页演示各自边界清楚，不会为了前端演示把原始实现改得面目全非。
一、实验台里的手写数字模块做了什么
新标签页现在支持三件事：
- 浏览样本：从训练集抽取一批真实数字样本，直接加载到 28 x 28 网格里
- 手绘输入：在浏览器里直接画数字，立即查看模型预测
- 概率面板：同时显示 0 到 9 十个类别的概率分布，而不是只给一个结果
这类界面对学习很有帮助，因为你不只是看到“答案是什么”，还能看到模型为什么更偏向某几个数字。
二、浏览器版模型和离线 C 项目有什么关系
网页里加载的不是完整训练过程，而是一份预训练好的轻量 softmax 权重文件。它和 C 项目属于同一类多分类线性模型，只是为了网页体积和响应速度，改成了预先训练后再加载。
当前浏览器演示权重来自一份较小的训练切片：
- 训练样本：10000 条
- 验证样本：2000 条
- 训练轮次：18
- 学习率：0.35
- 验证准确率：约 90.65%
这不是为了追求最强分数，而是为了让实验台在浏览器里也能保持即时反馈。真正完整的数据和源码仍然保留在下载包里。
三、为什么不直接在前端重跑完整训练
原因很现实：
- 完整训练集太大，不适合每次页面加载都重新处理
- 浏览器端反复做大规模梯度更新，会显著拖慢页面交互
- 手机端更需要稳定的体验，而不是把 CPU 全部占满
所以实验台更适合承担“可视化理解”和“交互试验”的角色，而不是替代离线训练环境。
四、这个模块最适合怎么用
建议按这个顺序体验：
- 先加载一个真实样本，确认数字网格和预测结果是否一致
- 再手动改几笔，观察概率怎么变化
- 最后清空画板，自己画一个数字，看模型最容易在哪些数字之间犹豫
如果你画了一个 9，但模型同时给 4 和 7 很高概率，这通常不是坏事，反而说明你已经看到模型的边界了。
五、这个实验台和文章、下载页怎么配合
现在这组内容已经形成了比较完整的结构：
- 第一篇 先讲数据文件和 784 维输入格式
- 第二篇 再讲 C 语言 softmax 分类器如何训练和导出结果
- 下载页 集中放源码、压缩数据、示例提交文件和浏览器模型文件
- 实验台 提供直接可交互的轻量版本
这样安排之后，读者可以在文章里理解原理，在下载区拿到材料，在实验台里马上试。
六、下一步还能继续怎么增强
这一版已经能承担教学演示，但后面还可以继续做三类增强：
- 增加“笔刷粗细”和“自动居中”之类的输入处理
- 把错误样本单独整理成可切换的案例列表
- 把浏览器端模型和离线 C 项目的输出做更细的对照说明
对学习型网站来说，这类增强比堆更多装饰更有意义。重点不是页面看起来像 AI 产品，而是让读者真的能比较输入、模型和输出。
七、直接去哪里继续
如果你还没看源码文章，建议先回到 C 语言实现说明。如果你已经准备自己跑一次完整项目，就直接打开 下载页 拿材料；如果只是想快速试一下，就去 实验台 直接画几个数字。
搜索问题
常见问题
这篇文章适合谁读？
这篇文章适合想用 实战 难度理解“手写数字实验记录：怎么把离线分类项目接进浏览器实验台”的读者，预计阅读时间约 8 分钟，重点覆盖 Browser Demo, Softmax, Visualization。
读完后下一步应该看什么？
推荐下一步阅读“CIFAR-10 Tiny CNN 教程：用 C 语言实现小型卷积神经网络图像分类”，这样可以把当前知识点接到更完整的学习路线里。
这篇文章有没有可运行代码或配套资源？
有。页面里的运行说明、资源卡片和下载入口会指向复现实验所需的命令、数据、代码或说明文件。
这篇文章和整个网站的学习路线有什么关系？
它会通过文章上下文、学习路线、资源库和项目时间线连接到同一主题下的其他内容。
文章上下文
人工智能项目
从 AI、机器学习、训练评估、神经网络到 Python 小实战、手写数字识别、CIFAR-10 CNN、对抗性流量防御和 AI 安全攻防，按顺序建立基础。
继续下一步
继续：CIFAR-10 Tiny CNN 教程
配套资源
人工智能项目 / DATASET
digit-playground-model.json
浏览器实验台使用的轻量 softmax 演示模型与样本。
人工智能项目 / DIAGRAM
digit-sample-grid.svg
从训练集中抽取的小型手写数字预览网格。
人工智能项目 / ARCHIVE
手写数字项目打包下载
包含源码、压缩数据、提交文件、浏览器模型和样本预览图。
项目时间线
已发布文章
- 人工智能基础学习路线：先理解什么是 AI、机器学习和深度学习 面向有编程基础的读者，梳理 AI、机器学习、深度学习的关系，并给出可执行的人工智能基础学习路线。
- 机器学习完整流程：从数据、特征到模型预测 从工程视角拆解机器学习完整流程：定义问题、理解数据、处理特征、训练模型、预测和评估。
- 机器学习算法怎么选：分类、回归、聚类和推荐场景对照表 用任务类型、数据规模、解释性和部署成本选择机器学习算法，覆盖逻辑回归、决策树、随机森林、K-means 和表格数据基线模型。
- 特征工程入门实战：用 scikit-learn 处理缺失值、类别变量和数值标准化 用 scikit-learn Pipeline 和 ColumnTransformer 完成特征工程，处理缺失值、类别变量、数值标准化，并避免数据泄漏。
- 模型训练与评估入门：损失函数、过拟合和准确率怎么理解 讲清楚模型训练中的参数、损失函数、梯度下降、过拟合，以及准确率、召回率、F1 等分类评估指标。
- 过拟合和欠拟合怎么解决：机器学习模型调优实战指南 用训练分数和验证分数判断过拟合与欠拟合，并通过模型复杂度、正则化、交叉验证和特征工程调整机器学习模型。
- 神经网络基础：从感知机到多层网络 从一个神经元讲起，解释权重、偏置、激活函数、前向传播、反向传播和典型神经网络训练循环。
- Python 人工智能小实战：用 scikit-learn 完成一个分类任务 使用 scikit-learn 内置教学数据集跑通一个分类任务，覆盖数据加载、拆分、标准化、训练、预测、评估和实验记录。
- 手写数字识别项目入门：先读懂 train.csv、test.csv 和标签结构 从项目文件结构入手，读懂手写数字训练集、测试集、标签列和 784 维像素输入，为后续 C 分类器和实验台打基础。
- 用 C 实现手写数字 Softmax 分类器：从 784 维像素到 submission.csv 结合当前项目源码，讲清楚 softmax 多分类、损失函数、梯度更新、混淆矩阵输出，以及 submission.csv 的生成过程。
- 手写数字实验记录：怎么把离线分类项目接进浏览器实验台 解释浏览器实验台为什么采用轻量预训练模型、它和离线 C 项目的关系，以及如何用样本浏览和手绘输入理解预测结果。
- CIFAR-10 Tiny CNN 教程：用 C 语言实现小型卷积神经网络图像分类 用单文件 C 程序完成 CIFAR-10 小型 CNN 图像分类，讲解数据格式、网络结构、训练命令、loss、accuracy、常见错误和改进方向。
- 构建高熵流量防御：基于 Python 的连接层白噪声混淆与对抗性机器学习实践 以 mld_chaffing_v2.py 虚幻镜项目为例，讲解加密元数据泄漏、信息熵、分布距离、混淆矩阵、空闲窗口微脉冲和性能测试取舍。
- AI 安全威胁建模：用 NIST AML、MITRE ATLAS 和 OWASP 建立攻防地图 用 NIST Adversarial ML、MITRE ATLAS 和 OWASP LLM Top 10 建立 AI 安全威胁模型，覆盖资产、攻击面、证据和剩余风险。
- 对抗样本与鲁棒评估：从 FGSM 公式到 scikit-learn 数字分类实验 从 FGSM 公式解释对抗样本，用 scikit-learn digits toy 实验评估 clean accuracy、perturbed accuracy 和扰动预算。
- 数据投毒与后门攻击防御：污染率、触发器和训练管线隔离 用 toy digits 实验解释数据投毒、后门触发器、attack success rate、数据来源审计和训练管线隔离。
- 模型隐私与模型窃取风险：成员推断、模型抽取和输出接口防护 用本地 toy 实验解释成员推断、模型抽取、membership AUC、surrogate fidelity、输出最小化和查询治理。
- LLM/RAG/Agent 安全：Prompt Injection、工具权限和边界感知防护 从 RAG 和 Agent 架构解释 prompt injection、外部数据降权、工具 allowlist、人工审批和边界感知防护。
- 人工智能 NLP 基础：词袋模型与 TF-IDF 详解 介绍自然语言处理中最基础的文本表示方法：词袋模型（Bag of Words）与 TF-IDF，理解它们的工作原理及优缺点。
- 循环神经网络 (RNN) 基础：处理序列数据的记忆力 理解 RNN 的核心思想、隐藏状态的作用，以及它在处理自然语言序列任务时的优势与挑战。
- Transformer 与自注意力机制：AI 领域的革命性突破 深入浅出地讲解 Transformer 架构的核心：自注意力机制（Self-Attention）及其运作方式。
- 用 C 从零实现 CIFAR-10 Tiny CNN：卷积、池化和反向传播 基于实际 cifar10_tiny_cnn.c 项目，讲解 CIFAR-10 数据格式、3x3 卷积、ReLU、最大池化、全连接层、softmax、反向传播和本地运行方式。
已公开资源
- Python AI 小实战代码说明 文章内包含可直接复制运行的 scikit-learn 分类脚本。
- digit_softmax_classifier.c 手写数字 softmax 分类器的 C 语言源码。
- train.csv.zip 手写数字训练集压缩包，包含 42000 条带标签样本。
- test.csv.zip 手写数字测试集压缩包，包含 28000 条待预测样本。
- sample_submission.csv 官方提交格式示例，可直接对照最终输出字段。
- submission.csv 当前 C 项目跑出的预测结果文件。
- digit-playground-model.json 浏览器实验台使用的轻量 softmax 演示模型与样本。
- digit-sample-grid.svg 从训练集中抽取的小型手写数字预览网格。
- 手写数字项目打包下载 包含源码、压缩数据、提交文件、浏览器模型和样本预览图。
- cifar10_tiny_cnn.c 源码 单文件 C 语言 tiny CNN，包含 CIFAR-10 读取、卷积、池化、softmax 和反向传播。
- model_weights.bin 样例权重 一次本地小样本运行生成的模型权重文件。
- test_predictions.csv 预测样例 CIFAR-10 tiny CNN 输出的测试预测样例。
- CNN 项目说明 PDF 配套 CNN 项目说明材料。
- 虚幻镜脱敏代码骨架 去除控制口令、真实节点和目标列表后的 mld_chaffing_v2.py 控制流程说明。
- 虚幻镜压力测试记录模板 用于记录 CPU、内存、线程峰值、微脉冲速率、延迟和错误数的脱敏 CSV 模板。
- 虚幻镜分类器评估模板 用于记录 TP、FN、FP、TN、accuracy、precision、recall、F1、ROC-AUC、熵和 JS 散度的 CSV 模板。
- 虚幻镜资源说明 说明公开资源为何只提供脱敏代码、测试模板和架构笔记。
- AI Security Lab 说明 说明 AI 安全攻防系列的安全边界、安装命令和 quick-run 实验。
- AI Security Lab 完整实验包 包含安全 toy scripts、结果 CSV、风险登记表、攻防矩阵和架构图。
- AI 安全风险登记表 面向 AI 威胁建模和上线评审的 CSV 风险登记模板。
- AI 攻防矩阵 把攻击面、toy demo、指标和防护控制映射到一张 CSV 表。
- AI Security Lab 架构图 展示威胁建模、鲁棒评估、数据完整性、模型隐私和 RAG 防护之间的关系。
- FGSM digits 鲁棒评估脚本 本地 digits 分类器的 FGSM-style 扰动和准确率下降实验。
- 数据投毒与后门 toy 脚本 用 digits 数据演示污染率、触发器和 attack success rate。
- 模型隐私与抽取 toy 脚本 输出 membership AUC、target accuracy、surrogate fidelity 和 surrogate accuracy。
- RAG prompt injection guard toy 脚本 用确定性 toy agent 演示外部数据降权和工具权限阻断。
- 深度学习专题分享图 用于分享深度学习 / CNN 专题页的 1200x630 SVG 图。
- 从零实现机器学习分享图 用于分享 K-means、Iris 和机器学习流程专题页的 1200x630 SVG 图。
- 学生 AI 项目分享图 用于分享手写数字、C 分类器和浏览器实验台专题页的 1200x630 SVG 图。
- CNN 卷积扫描动画 Remotion 生成的 8 秒短动画，展示 3x3 卷积核如何扫描输入并形成特征图。
当前学习路线
- 人工智能基础学习路线 学习路线节点
- 机器学习完整流程 学习路线节点
- 机器学习算法怎么选 学习路线节点
- 特征工程入门实战 学习路线节点
- 模型训练与评估入门 学习路线节点
- 过拟合和欠拟合怎么解决 学习路线节点
- 神经网络基础 学习路线节点
- Transformer 自注意力机制 学习路线节点
- LLM 可视化教学台 学习路线节点
- Python 人工智能小实战 学习路线节点
- 手写数字数据结构入门 学习路线节点
- 用 C 实现手写数字 Softmax 分类器 学习路线节点
- 手写数字实验台说明 学习路线节点
- CIFAR-10 Tiny CNN 教程 学习路线节点
- 高熵流量防御实验 学习路线节点
- AI 安全威胁建模 学习路线节点
- 对抗样本与鲁棒评估 学习路线节点
- 数据投毒与后门防御 学习路线节点
- 模型隐私与模型抽取防护 学习路线节点
- LLM/RAG/Agent 安全 学习路线节点
下一步计划
- 补充更多图像分类和误差分析案例
- 把常见指标整理成速查表
- 继续补充 AI 安全防御实验记录