Press "Enter" to skip to content

TensorSpace 3D神经网络可视化框架

TensorSpace 3D神经网络可视化框架

是什么(What)

TensorSpace是一款3D模型可视化框架,一动图胜千言。官网链接Github链接

⭐️TensorSpace擅长直观展示模型结构层间数据,生成的模型可交互。官方支持手写字符识别物体识别数字对抗生成网络案例


为什么(Why)

本部分说明:❓为什么要使用这个框架❓这个框架主要解决了什么问题❓我们的灵感来源于何处

3D神经网络可视化一片空白

机器学习可视化上,每个机器学习框架都有自己的【御用工具】,Tensorboard之于Tensorflow ,Visdom之于PytorchMXboard之于MXnet。这些工具的Slogan不一而同的选择了Visualization Learning(TensorBoard的Slogan),也就是面向专业机器学习开发者,针对训练过程,调参等设计的专业向可视化工具

但面向一般的计算机工程师非技术类人才(市场,营销,产品),一片空白,没有一个优秀的工具来帮助他们理解❓机器学习模型到底做了什么,能解决一个什么问题

机器学习开发和工程使用并不是那么遥不可及,TensorSpace搭建桥梁链接实际问题机器学习模型

3D可视化的信息密度更高更直观

市面上常见的机器学习可视化框架都是基于图表(2D),这是由它们的应用领域(训练调试)决定的。但3D可视化不仅能同时表示层间信息,更能直观的展示模型结构,这一点是2D可视化不具备的。例如在何凯明大神的Mask-RCNN论文中:

有这么一幅图来描述模型结构(很多模型设计类和应用落地类的论文都会有这么一副图)而TensoSpace可以让用户使用浏览器方便的构建出一个可交互的神经网络3D结构

更进一步的,利用3D模型的表意能力特点,结合Tensorflow.js,可在浏览器中进行模型预测(跑已经训练好的模型看输入输出分别是什么❗️),帮助理解模型

【模型结构】黑盒子的真面目是什么?

模型就像是一个盛水的容器,而预训练模型就给这个容器装满了水,可以用来解决实际问题。搞明白一个模型的输入是什么,输出是什么,如何转化成我们可理解的数据结构格式(比如输出的是一个物体标识框的左上角左下角目标)就可以方便的理解某个模型具体做了什么

例如,❓Yolo到底是如何算出最后的物体识别框的?❓LeNet是如何做手写识别的?❓ACGAN是怎么一步一步生成一个0-9的图片的?这些都可以在提供的Playground自行探索

如下图所示,模型层间的链接信息可通过直接鼠标悬停具体查看

【层间数据】神经网络的每一层都做了什么?

3D模型不仅仅可以直观的展示出神经网络的结构特征(哪些层相连,每一层的数据和计算是从哪里来),结合Tensorflow.js,可在浏览器中进行模型预测。由于我们已经有了模型结果,所有的层间数据直观可见,如下图所示

TensoSpace内部,调用Callback Function可以方便的拿到每一层的输出数据(未经处理),工程和应用上,了解一个模型的原始输出数据方便工程落地


怎么建(How)

首先你需要有一个使用常用框架训练好的的预训练模型,常见的模型都是只有输入输出两个暴露给用户的接口。TensorSpace可以全面的展示层间数据,不过需要用户将模型转换成多输出的模型,过程详见此文档。具体流程如下图所示:

流程图

你最需要的是模型结构的相关信息TensorflowKeras都有对应的API打印模型结构信息,比如Kerasmodel.summary()。还有类似生成结构图的方式,生成如下图的模型结构示意图,还需要知道每一层的配置信息,比如卷积层的filter数量,输入输出的尺寸等

LeNet结构图

对应的代码中的JavaScript部分如下,html内主要是添加一个<div id=”container”></div>

let modelContainer = document.getElementById("container");
let model = new TSP.models.Sequential(modelContainer);

model.add(new TSP.layers.GreyscaleInput({ shape: [28, 28, 1] }));
model.add(new TSP.layers.Padding2d({ padding: [2, 2] }));
model.add(new TSP.layers.Conv2d({ kernelSize: 5, filters: 6, strides: 1 }));
model.add(new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }));
model.add(new TSP.layers.Conv2d({ kernelSize: 5, filters: 16, strides: 1 }));
model.add(new TSP.layers.Pooling2d({ poolSize: [2, 2], strides: [2, 2] }));
model.add(new TSP.layers.Dense({ units: 120 }));
model.add(new TSP.layers.Dense({ units: 84 }));
model.add(
  new TSP.layers.Output1d({
    units: 10,
    outputs: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
  })
);

model.load({
  type: "tfjs",
  url: "https://tensorspace.org/assets/model/lenet/mnist.json",
  onComplete: function() {
    console.log('"Hello World!" from TensorSpace Loader.');
  }
});
model.init(function() {
  model.predict(data5);
});

是的,你需要对模型结构非常了解才可能构建出对应的TensoSpace模型,未来版本已计划推出自动脚本,通过导入对应的模型预训练文件,一键生成多输出模型。但是TensoSpace的Playground会未来子项目会力所能及的收集更多的模型,在模型应用落地和直观展示这个领域努力做出自己的贡献


谁可能用(Who)

做这样一款开源框架,除了填补3D可视化的一般解决方案的框架空白外,还思索了几个可能可行的应用场景

前端开发者过度机器学习

前端(全栈)开发者,产品经理等

未来,前端的重复性工作可能会慢慢减少。最近有一个原型图 ➜ HTML代码的项目,另一个2017年的开源项目都在尝试利用机器学习自动化一些Coding中的重复劳动,提高效率

机器学习一定不会取代前端工程师,但掌握机器学习工具的工程师会有优势(这种工具会不会整合进Sketch等工具不好说),既然入了工程师行,终身学习势在必行!

TensorSpace虽然不是能帮忙训练和设计模型,但擅长帮助工程师理解已有的模型,找到可应用的领域。并且在接驳光法开发者到机器学习的大道上做了一点微小的工作,走一个可视化的Model Zoo

机器学习教育

机器学习课程教育者

使用Tensorspace直观的在浏览器上显示模型细节和数据流动方向,讲解常见模型的实现原理,比如ResNet,Yolo等,可以让学生更直观的了解一个模型的前世今生,输入什么,输出什么,怎么处理数据等等

我们只是提供了一个框架,每一个模型如果需要直观的展示对数据的处理过程,都值得3D化

模型演示和传播

机器学习开发者

JavaScript最大的优势就是可以在浏览器中运行,没有烦人的依赖,不需要踩过各种坑。有一个版本不那么落后的浏览器和一台性能还成的电脑就可以完整访问所有内容

如果您的项目对展示自己的模型可以做什么是怎么做的有需求,私以为,不应错过TensorSpace

TensorSpace教学模型原理效果非常好。提供了一个接口去写代码,搞清楚每一个输出代表了什么,是如何转化成最后结果(从输出到最后结果的转换还是需要写JavaScript代码去构建模型结构,在这个过程中也能更进一步理解模型的构造细节

现在还没有完成的Yolov2-tiny就是因为JavaScript的轮子较少(大多数处理轮子都使用Python完成),所有的数据处理都需徒手搭建。时间的力量是强大的,我们搭建一个地基,万丈高楼平地起!

Be First to Comment

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注