Prophecy Book - 为 TensorFlowJS 作的 Notebook 小工具

乱了好久终于仍是签了三方，虽然工资很少仍是算是有结果了。如今在学校上课无所事事，因此想着本身部门是作数据技术的，来作个东西玩AI好了（并不认可本人感染了AI）这个工具目前仍是demo雏型，bug和功能需求，但愿你们都能踊跃的提到github上面！

由于要tfjs使用方便，请使用最新Chrome浏览器

Github地址：github.com/mxz96102/pr…

线上demo地址： pbook.hustfe.com/

Why and How

实际上在编写数据相关的代码时候，一个一体化的东西能很大的提升生产效率，因此在本身能力范围内编写一个方便本身玩tfjs的工具。由于以为其实在py数据处理工具里面使用的notebook工具真的比较方便，因此这个工具是notebook型的，旨在仅需浏览器，实现代码到数据可视化的链路。

此次由于是本身的项目，因此使用了本身喜欢的mobx+ts+react来写。（在公司写了四个月的antd+dva型项目，让本身呼吸一下喜欢的技术栈吧）

另外，这次是兴起而发，因此没有作同类工具的调研，因此你们有建议或者更好的工具均可以提出了

主要功能

Prophecy Book 是基于功能块来进行使用的，因此在一个book里面你能看到的，都是块（section），这样也方便各类的新模块加入。

文本块

说到文本就是markdown了，因此pbook采用了markdown来更快的作文本格式的安排。 在平时，文本块是按照编译之后的样式展现的。

在双击之后，markdown就会进入编辑状态。

代码块

代码块是经过书写js代码来进行阶段性数据处理的地方，在这里，我设置了数据当前上下文和全局上下文的概念。

在此，咱们有如下全局变量

function set(name, value) {/*设定数据*/}
function get(name, value) {/*获取数据*/}
function end() {/*结束当前代码运行*/}
import tf from '@tensorflow/tfjs'
复制代码

set和get均是在全局上下文里操做数据，每个代码块是一个单独的当前上下文。

有end函数是由于，代码自己若是有异步操做是没法探知代码结束这样的一个时间点的，因此每个代码块都有一个end函数来知会代码执行过程完成

其他的就是正常的js代码书写。 执行成功后代码在当前上下文set的数据会被打出log，若是有错误，那么log打出来的是错误缘由。

在双击代码块后，能够只运行当前块。

Chart块

有一堆数据其实也不知道要干什么，因此咱们须要更直观的形式来可视化数据，这里直接用了g2来进行可视化。目前只推出了冒泡图，以后会支持更多

Chart块经过脚原本进行数据转化。下面这段代码，展现的如何让before和after的数据格式化到制定的格式

let before = get('before')
let after = get('after')
let ys = get('ys')
let data = []

before.map((e, i) => data.push({
	x: e, y: ys[i], type: 'before'
}))

after.map((e, i) => data.push({
	x: e, y: ys[i], type: 'after'
}))

set('data', data)
end()
复制代码

储存

如今的文档数据支持储存到json文件（不包含全局上下文），读取后就能复现完整文档。example是tensorflowjs的第一个教程，github.com/mxz96102/pr…

展望

以后会加入更好的代码块体验和更多的chart形式，而且但愿你们能够多提意见，让这个小工具更加好用，代码彻底开源，你们也能够直接pr贡献～

小广告：另外一个小工具，作给同窗算薪资用的 tax.hustfe.com/