實際的表格會隨著測試集的不斷輸入不斷地展示每一個輸入和輸出的顏色。測試集包括輸入顏色(背景顏色)和輸出顏色(字體顏色)。由于生成數據集的時候輸出顏色被分類為黑色 [0,1] 和白色 [1,0] 向量,它們需要再次被轉換為真實的顏色。
const ActualTable = ({ testSet }) =>
Programmatically Computed
{Array(TEST_SET_SIZE).fill(0).map((v, i) =>rgbInput={testSet.rawInputs[i]}
rgbTarget={fromClassifierToRgb(testSet.rawTargets[i])}
/>
)}
const fromClassifierToRgb = (classifier) =>
classifier[0] > classifier[1]
? [ 255, 255, 255 ]
: [ 0, 0, 0 ]
ColorBox 組件是一個通用組件,以輸入顏色(背景顏色)和目標顏色(字體顏色)為輸入。它能簡單地用一個矩形展示輸入顏色的類型、輸入顏色的 RGB 代碼字符串,并用字體的 RGB 代碼將給定的目標顏色上色。
const ColorBox = ({ rgbInput, rgbTarget }) =>
const RgbString = ({ rgb }) =>
`rgb(${rgb.toString()})`
const getRgbStyle = (rgb) =>
`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`
最后但重要的是,在推理表格中可視化預測顏色的激動人心的部分。它使用的也是 color box,但提供了一些不同的小道具。
const InferenceTable = ({ testSet, model }) =>
Neural Network Computed
{Array(TEST_SET_SIZE).fill(0).map((v, i) =>rgbInput={testSet.rawInputs[i]}
rgbTarget={fromClassifierToRgb(model.predict(testSet.rawInputs[i]))}
/>
)}
輸入顏色仍然是測試集中定義的顏色,但目標顏色并不是測試集中的目標色。任務的關鍵是利用神經網絡的預測方法預測目標顏色——它需要輸入的顏色,并應在訓練階段預測目標顏色。
最后,當你開啟應用時,你需要觀察神經網絡是否被啟用。而實際的表格從開始就在使用固定測試集,在訓練階段推理表格應該改變它的字體顏色。事實上,當 ActualTable 組件顯示實際測試集時,InferenceTable 顯示測試集的輸入數據點,但輸出是使用神經網絡預測的。
?
評論
查看更多