至此，你可以自主決定你運行中的神經網絡的可視化方式。使用一個 canvas 和 repuestAnimationFrame API 可以使 JavaScript 代碼更簡單。但就這篇文章來說，我會使用 React.js 進行展示，因為我在博客上寫過 React.js。

因此在使用 create-react-app 設置完項目后，App 組件可成為我們可視化的進入點。首先，導入神經網絡類別和函數，從你的文件中生成數據集。進而，為訓練集大小、測試集大小和訓練迭代次數添加若干個常量。

import React, { Component } from 'react';
import './App.css';
import generateColorSet from './data';
import ColorAccessibilityModel from './neuralNetwork';
const ITERATIONS = 750;
const TRAINING_SET_SIZE = 1500;
const TEST_SET_SIZE = 10;
class App extends Component {
...
}
export default App;

App 的組件包括生成數據集（訓練集和測試集）、通過傳遞訓練集建立神經網絡會話、定義組件的初始狀態。在訓練階段的時間內，代價函數的值和迭代次數會在控制臺上顯示，它也表示了組件的狀態。

import React, { Component } from 'react';
import './App.css';
import generateColorSet from './data';
import ColorAccessibilityModel from './neuralNetwork';
const ITERATIONS = 750;
const TRAINING_SET_SIZE = 1500;
const TEST_SET_SIZE = 10;
class App extends Component {
testSet;
trainingSet;
colorAccessibilityModel;
constructor() {
super();
this.testSet = generateColorSet(TEST_SET_SIZE);
this.trainingSet = generateColorSet(TRAINING_SET_SIZE);
this.colorAccessibilityModel = new ColorAccessibilityModel();
this.colorAccessibilityModel.setupSession(this.trainingSet);
this.state = {
currentIteration: 0,
cost: -42,
};
}
...
}
export default App;

接下來，設置了神經網絡會話之后，就可以迭代地訓練神經網絡了。最簡單的版本只需要一直運行 React 的一個 for 循環就可以了。

class App extends Component {
...
componentDidMount () {
for (let i = 0; i <= ITERATIONS; i++) {
this.colorAccessibilityModel.train(i);
}
};
}
export default App;

然而，以上代碼不會在 React 的訓練階段提供（render）輸出，因為組件不會在神經網絡阻塞單個 JavaScript 線程的時候 reRender。這也正是 React 使用 requestAnimationFrame 的時候。與其自己定義一個 for 循環，每一個請求的瀏覽器的動畫幀都可以被用于運行一次訓練迭代。

class App extends Component {
...
componentDidMount () {
requestAnimationFrame(this.tick);
};
tick = () => {
this.setState((state) => ({
currentIteration: state.currentIteration + 1
}));
if (this.state.currentIteration < ITERATIONS) {
requestAnimationFrame(this.tick);
this.colorAccessibilityModel.train(this.state.currentIteration);
}
};
}
export default App;

此外，代價函數可以每 5 步進行一次計算。如前所述，需要訪問 GPU 來檢索代價函數。因此需要防止神經網絡訓練過快。

class App extends Component {
...
componentDidMount () {
requestAnimationFrame(this.tick);
};
tick = () => {
this.setState((state) => ({
currentIteration: state.currentIteration + 1
}));
if (this.state.currentIteration < ITERATIONS) {
requestAnimationFrame(this.tick);
let computeCost = !(this.state.currentIteration % 5);
let cost = this.colorAccessibilityModel.train(
this.state.currentIteration,
computeCost
);
if (cost > 0) {
this.setState(() => ({ cost }));
}
}
};
}
export default App;

一旦組件裝載好訓練階段就可以開始運行?，F在是使用程序化計算輸出和預測輸出提供測試集的時候了。經過時間推移，預測輸出應該變得和程序化計算輸出一樣。而訓練集本身并未被可視化。

class App extends Component {
...
render() {
const { currentIteration, cost } = this.state;
return (

);
}
}
const ActualTable = ({ testSet }) =>

const InferenceTable = ({ testSet, model }) =>

export default App;