CNN Explainer 中文版

一个交互式可视化系统，帮助非专业人士学习卷积神经网络（CNN）。

CNN Explainer 中文版是一款在浏览器中运行的交互式可视化学习工具，通过生动的卷积网络结构与公式动画，直观展示卷积、ReLU 激活、池化、展平与 Softmax 等关键概念，让初学者无需编程基础即可理解深度学习中的 CNN 原理。

真实界面

项目截图

共 5 张

在浏览器中学习卷积神经网络（CNN）！真实运行界面 — 在浏览器中学习卷积神经网络（CNN）！

Capabilities

核心功能

✓在浏览器中通过 D3 与 TensorFlow.js 交互式可视化真实 CNN 模型

✓支持修改输入图片并实时观察卷积、激活、池化等各层输出

✓提供卷积、ReLU、池化、展平、Softmax 的交互式公式与动画视图

✓内置超参数调节（输入尺寸、填充、核尺寸、步幅）并即时预览结果

✓配套中文图文教程文章，逐层讲解网络各部分的原理

✓提供视频教程跳转与章节定位功能，支持鼠标悬停查看细节

适用场景

课堂与在线课程中用于直观讲解卷积神经网络的工作机制

个人自学深度学习入门，通过动手调整参数观察模型行为

教学演示与公开演讲中展示 CNN 各层特征的动态变化

适合谁

希望理解卷积神经网络原理的学生、开发者与对深度学习感兴趣的初学者。

商业化思路

开源 MIT 许可项目，面向教育与学习场景免费使用，可通过部署自托管实例或提供培训咨询服务实现增值。

你会拿到什么

✓完整可构建的 Svelte + Rollup 前端源码
✓本地化至简体中文的界面、教程文章与演示数据

部署流程

1执行 npm install 安装依赖
2执行 npm run build 构建产物，并将 public 目录部署到任意静态服务器

真实验证结果

已通过 5 个真实运行中文界面、HTTP、可见正文、控制台、坏图和横向溢出质量门。

部署前须知

演示分类依赖预训练的浏览器端模型，分类结果受输入图片质量影响；界面需支持现代浏览器以获得完整交互体验。

部署难度

简单

最低配置

支持现代浏览器（Chrome/Firefox/Safari）的任意静态服务器；无后端依赖。

开源许可证

MIT License

最后验证

2026-08-22

技术栈

Svelte 3RollupD3.jsTensorFlow.js

授权说明

Release notes

版本记录

1 个已发布版本

vcn-146241af418c 当前推荐

2026-08-22

v1.0.0：首个简体中文本地化版本，翻译全部用户可见界面、教程文章、演示图片类别与文档元数据。

部署要求：现代浏览器（支持 ES6、WebGL）以及任意静态服务器；运行所需的 D3、TensorFlow.js、Bulma 等资源已随源码打包。

已知问题：CNN 分类演示依赖浏览器端预训练模型，图片识别准确率有限；部分视图需要交互式图形支持。

登录后领取