至此，你可以自主决定你运行中的神经网络的可视化方式。使用一个 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;

一旦组件装载好训练阶段就可以开始运行。现在是使用程序化计算输出和预测输出提供测试集的时候了。经过时间推移，预测输出应该变得和程序化计算输出一样。而训练集本身并未被可视化。

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

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

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

export default App;