亂了很久終於還是簽了三方，雖然工資不多還是算是有結果了。現在在學校上課無所事事，所以想著自己部門是做資料技術的，來做個東西玩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/