文/ 阿里淘系 F(x) Team - 泽白
本篇文章主要介绍在线交互式教程站点Pipboard ，通过在线的模型训练交互体验，使体验者可以掌握并了解到机器学习相关的知识和能力。
本次模型训练交互体验是一个图片分类相关的任务，通过训练不同分类的图片样本数据，达到最终可以预测图片正确分类的效果。
前记
事情要从一个疑似告警开始，某天访问我们的 Github Pages 域名 pipboard.imgcook.com 看到这样的情形，以为是 GitHub 的告警
查了 Github Pages 相关的官方文档，怀疑是 CNAME 文件出了问题。一查果然是因为 合并了一个框架迁移的 Pull Request，其中的 CANME 文件在新的 build 链路没有生成，然后就修改了 build 逻辑重新发布了 gh-pages 分支，大功告成。
发布完之后访问页面，赫然发现还是 PoC。
我开始检查设置面板中自定义域名的配置，该配置竟然为空。猜测是之前 CNAME 文件的遗漏导致此处被致空，果断重新配置自定义域名，得到了如下 warning
按照字面意思理解，猜测是 gh-pages 分支下已经有个 CNAME 文件（刚发布的），点击自定义域名的保存按钮时创建 CNAME 文件失败导致。
然后就一顿操作：删除 CNAME 文件，设置面板配置完点击保存。
依然没用。
此时开始怀疑是否是 DNS Provider 的记录影响到了 Github Pages 的查询，打算联系 Github Support 看下怎么解决。
转念一想，页面上提供的像是私人联系方式，不像官方作风。就尝试着在 GitHub 上搜索了页面上的信息，竟然搜到一个仓库，而且 README 的描述和页面一摸一样
并且仓库里同样躺着一份 CNAME 文件，点开一看竟然是 pipboard 的域名。
原来 Github 弹出的域名已被占用的 warning 是这个意思，再看下这个提交的 commit 时间，就在 pipboard 仓库合并 Pull Request 遗漏 CNAME 文件后的大概 40 分钟。
到此，整个攻击过程便大概清晰明了了。这位白帽子应该通过扫描等手段监控了一批知名企业或个人仓库的 CNAME 文件变动，发现 CNAME 文件在某次提交遗漏后便在自己的仓库中提交一个带有相应 CNAME 文件的 commit，从而截取了该域名在 Github 的使用权，这个应该属于 Github 的漏洞。
为什么讲这是一位白帽子呢，因为他会将发现的问题上报到 hackerone 平台，然后通过平台与企业或个人进行交涉，获得赏金。
如果大家也有使用 Github Pages 的应用，也要注意下这个场景，避免域名被截胡。
后续重新检查了 Github Action 和 build 命令，决定通过 build 命令来确保 CNAME 文件被打包进 assets 中，同时在 Github Action 的部署过程中强制检测 CNAME 文件是否存在，不存在则直接中断部署，可以参考 Action 代码
为什么要有 Pipboard
Pipcook 目前是面向前端开发者的机器学习框架，肩负前端智能化的使命。但是在开发和推广的过程中，发现前端同学对于使用机器学习的能力依然存在疑惑，对于使用 Pipcook 去进行模型训练依然存在上手门槛。
所以这就是 pipboard 诞生的初衷，这种方式除了可以让体验者直观地感受到机器学习可以有哪些能力之外，还希望将整个模型的内在概念（如下图 模型训练中的参数介绍），以这种低成本的交互形态传达给体验者或初学者，从而达到教程的作用，在使用的过程中学习或了解到机器学习相关的知识概念。
使用体验
第一步，访问 pipboard页面
页面分三个区域，分别是左中右。左边是数据样本收集，中间是模型训练相关，右侧是模型预测相关。
第二步，收集样本数据
在左侧区域，可点击摄像头，通过长按拍照按钮进行图像样本采集，也可通过上传文件进行样本采集，每个类别提供 的样本，模型效果更佳。
如果想要修改类别的名称，可以通过点击该类标题进行修改。
我们提供了一份 图片样本集。
第三步，训练模型
所有类别的样本数据采集完毕之后，就可以进行模型训练了，即中间的区域
可通过中间的面板调整模型的训练参数，各个参数均有相应的介绍。调整完参数后，即可点击训练模型，训练过程会通过左侧弹出的数据面板进行反馈。
Accuracy 即准确率，是模型在训练过程中得到正确分类的百分比。如果模型正确预测了 100 个样本中 70 个样本的分类，则 accuracy 为 70/100 = 0.7。
Loss 是一种评估模型对给定样本集预测正确分类的学习程度的度量。如果模型的预测是完美的，则 loss 为 0；否则，loss 大于 0。假设有两个模型：A 和 B。模型A 正确预测了样本分类，但对该预测只有 60％ 的信心。 模型B 同样正确预测了样本的分类，但对该预测有 90％ 的信心。 两种模型的 accuracy 相同，但模型B 的 loss 较低。
第四步，预测结果
等待训练完毕后，即可通过右侧的预测面板进行模型的预测效果展示。该面板输入为摄像头数据，Pipboard 会将数据样本中的图片分类显示在结果中，模型会实时地对输入图像进行类别预测，然后以百分比显示出来。
如图所示：模型识别出了水杯。
第五步，导出模型
最后可点击导出模块按钮打开模块导出弹窗，下载模型和代码，在本地进行体验。
至此，整个模型的训练过程便结束了。当下的模型实现还没有进行过多的优化，针对多分类以及数据样本数量不对称的场景，可能存在预测结果偏差较大的情况，后续会进行迭代优化。整个训练过程如有疑问可提 issues 反馈，我们会针对疑问在之后的迭代中尽量做到可视化的解释，帮助大家理解模型训练的过程。
后续规划
目前第一版的整体交互是复刻了 teachablemachine 的交互方式 🐶，非常感谢 Google 给我们带来的灵感，同时也希望将这种交互传达到不方便访问国外站点的同学。
相比 teachablemachine，除去线上训练的体验，pipboard 后续将更多的针对数据采集（如 音频、图像）、模型的训练过程和训练结果进行可视化的表达。如模型 layer 的可视化拼装，类似于 blockly 这种可视化 JavaScript 程序编辑器，以可视化的形态表达模型，来剖析解释机器学习领域的知识概念。
同样在使用 pipcook 时，开发者可以使用现有插件或开发新插件来自定义自己的模型训练过程，后续也希望通过可视化的形式进行插件开发，来降低插件开发的成本。
总结
pipboard 线上交互式教程的开发过程，其实也是自己的学习过程。因为自己在机器学习领域也还是初学者，只有面对实际的场景，去解决其中的问题，自然就会让你快速的掌握一些实用知识。比如，怎么把上传的图片转化为一个 tensor等。其次，作为前端，在平常开发业务时更多的是考虑浏览器特性的兼容性，对于不常用的特性了解很少。这次使用 webcam 等相关的 API，整个过程确实非常有趣，浏览器的功能还是蛮强大的。
最后，你是否对机器学习有了初步了解，如果有兴趣可以通过扫描下方二维码进群讨论交流。
