使用层来进行数字识别，使用tf.layers api训练模型识别MNIST数据库中的手写数字。
index.html
<html>
<head>
<title>MNIST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../shared/tfjs-examples.css"/>
<style>
#train {
margin-top: 10px;
}
label {
display: inline-block;
width: 250px;
padding: 6px 0 6px 0;
}
.canvases {
display: inline-block;
}
.prediction-canvas {
width: 100px;
}
.pred {
font-size: 20px;
line-height: 25px;
width: 100px;
}
.pred-correct {
background-color: #00cf00;
}
.pred-incorrect {
background-color: red;
}
.pred-container {
display: inline-block;
width: 100px;
margin: 10px;
}
#train-epochs {
width: 82px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="tfjs-example-container">
<section class="title-area">
<h1>Digit Recognizer with Layers</h1>
<p class="subtitle">Train a model to recognize handwritten digits from the MNIST database using the tf.layers
api.
</p>
</section>
<section>
<p class="section-head">Description</p>
<p>
This examples lets you train a handwritten digit recognizer using either a Convolutional Neural Network
(also known as a ConvNet or CNN) or a Fully Connected Neural Network (also known as a DenseNet).
</p>
<p>The MNIST dataset is used as training data.</p>
</section>
<section>
<p class="section-head">Training Parameters</p>
<div>
<label>Model Type:</label>
<select id="model-type">
<option>ConvNet</option>
<option>DenseNet</option>
</select>
</div>
<div>
<label>Number of training epochs:</label>
<input id="train-epochs" type="number" value="3" />
</div>
<button id="train" disabled>Train Model</button>
</section>
<section>
<p class="section-head">Training Progress</p>
<p id="status"></p>
<p id="message"></p>
<div id="stats">
<div class="canvases">
<label id="loss-label"></label>
<div id="loss-canvas"></div>
</div>
<div class="canvases">
<label id="accuracy-label"></label>
<div id="accuracy-canvas"></div>
</div>
<br />
<div class="canvases">
<div id="loss-val-canvas"></div>
</div>
<div class="canvases">
<div id="accuracy-val-canvas"></div>
</div>
</div>
</section>
<section>
<p class="section-head">Inference Examples</p>
<div id="images"></div>
</section>
</div>
<!-- TODO(cais): Decide. DO NOT SUBMIT. -->
<!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
<script type="module" src="index.js"></script>
</body>
</html>
index.js
import * as tf from '@tensorflow/tfjs';
import {IMAGE_H, IMAGE_W, MnistData} from './data';
import * as ui from './ui';
/**
* Creates a model consisting of only flatten, dense and dropout layers.
*
* The model create here has approximately the same number of parameters
* (~31k) as the convnet created by `createConvModel()`, but is
* expected to show a significantly worse accuracy after training, due to the
* fact that it doesn't utilize the spatial information as the convnet does.
*
* This is for comparison with the convolutional network above.
*
* @returns {tf.Model} An instance of tf.Model.
*/
function createDenseModel() {
const model = tf.sequential();
model.add(tf.layers.flatten({inputShape: [IMAGE_H, IMAGE_W, 1]}));
model.add(tf.layers.dense({units: 42, activation: 'relu'}));
model.add(tf.layers.dense({units: 10, activation: 'softmax'}));
return model;
// 该普通稠密层模型与卷积神经网络模型相比，参数数量都在32000个左右，基本维持了一个公平的形式。但在最终的损失和准
// 确率上，普通稠密层模型都比不过后者。虽然与卷积神经网络的模型相比，准确率差异只有2%左右，但错误率却是几倍。因此
// 在处理图片类业务上，卷积神经网络模型较稠密层模型有明显的优势。
}
/**
* Creates a convolutional neural network (Convnet) for the MNIST data.
*
* @returns {tf.Model} An instance of tf.Model.
*/
function createConvModel() {
// Create a sequential neural network model. tf.sequential provides an API
// for creating "stacked" models where the output from one layer is used as
// the input to the next layer.
const model = tf.sequential();
// The first layer of the convolutional neural network plays a dual role:
// it is both the input layer of the neural network and a layer that performs
// the first convolution operation on the input. It receives the 28x28 pixels
// black and white images. This input layer uses 16 filters with a kernel size
// of 5 pixels each. It uses a simple RELU activation function which pretty
// much just looks like this: __/
// 第1层。
model.add(tf.layers.conv2d({
inputShape: [IMAGE_H, IMAGE_W, 1],
// 要应用于输入数据的滑动卷积过滤器窗口的尺寸。在这里我们将kernelSize设为3，以指定方形的3*3卷积窗口。
kernelSize: 3,
// 要应用于输入数据的尺寸为kernelSize的过滤器窗口数量。在这里我们将对数据应用16个过滤器。
filters: 16,
activation: 'relu'
}));
// After the first layer we include a MaxPooling layer. This acts as a sort of
// downsampling using max values in a region instead of averaging.
// https://www.quora.com/What-is-max-pooling-in-convolutional-neural-networks
// 第2层。
model.add(tf.layers.maxPooling2d({
poolSize: 2,
strides: 2
}));
// Our third layer is another convolution, this time with 32 filters.
// 第3层。
// 第3层和第4层这两个层是前两个层的完全重复（除了conv2d层在其过滤器配置中具有更大的值并且不具有inputShape字段）。
// 这种由卷积层和极化层组成的几乎重复的"模体"在convnets中是常见的。它在convnet中扮演着关键的角色：特征的分层提取。
// 为了理解它的含义，可以考虑一个训练过的convnet，它的任务是对图像中的动物进行分类。在convnet的早期阶段，卷积层中
// 的滤波器（即channel）可以编码诸如直线、曲线和角等低级几何特征。这些低级特征转化为更复杂的特征，如猫的眼睛、鼻子和
// 耳朵。在convnet的顶层，一个层可能有对整个cat的存在进行编码的过滤器。级别越高，表示越抽象，从像素级值中移除的特征
// 越多。但是，这些抽象的特征正是convnet任务实现良好精度所需要的，例如，在图像中时检测出猫。此外，这些特征不是手工制
// 作的，而是通过有监督的学习并以自动方式从数据中提取的。这是一个典型的有代表性的例子，我们也把它描述为层-层转换。
model.add(tf.layers.conv2d({
kernelSize: 3,
filters: 32,
activation: 'relu'
}));
// Max pooling again.
// 第4层。
model.add(tf.layers.maxPooling2d({
poolSize: 2,
strides: 2
}));
// Add another convolution layer.
// 第5层。
model.add(tf.layers.conv2d({
kernelSize: 3,
filters: 32,
activation: 'relu'
}));
// Now we flatten the output from the 2D filters into a 1D vector to prepare
// it for input into our last layer. This is common practice when feeding
// higher dimensional data to a final classification output layer.
// 第6层。
// 第6层为扁平层。它将多维张量“压缩”为一维张量，从而保持元素的总数。在我们的例子中，形状为[3，3，32]的3D张量被展平
// 为1D张量[288]（没有批次维度）。挤压操作的一个明显问题是如何对元素排序，因为原始三维空间中没有内在的顺序。答案是：
// 我们对元素进行排序，这样，如果你沿着展开的一维张量中的元素向下看，看看它们的原始索引（来自三维张量）如何变化，最后
// 一个索引变化最快，倒数第二个索引变化第二快，以此类推，而第一个索引变化最慢。
// 扁平层用来将输入“压平”，即把多维的输入一维化，常用在从卷积层到全连接层的过渡。扁平层不影响batch的大小。
// 扁平层中没有权重，它只是将其输入展开为一个长数组。
model.add(tf.layers.flatten({}));
// Previous flattened 1D vector will be this layer's input.
// 第7层。
// 第7层和第8层我们添加了两个稠密层，为什么要添加两个而不是一个呢？原因是：添加具有非线性激活的层会增加网络的容量。
// 通常多层神经网络内，必须含有级联的线性函数和非线性函数，有助于表示能力的增强，这意味着模型容量的增大，预测精度的
// 提高。在boston-housing项目案例中，我们也做出过相同的总结。https://mapleroyals.com/forum/threads/4th-job-skill-changes.135025
// 实际上，您可以将convnet看作是由两个模型堆叠在一起：
// 1. 包含conv2d、maxPooling2d和flatten层的模型，用于从输入图像中提取视觉特征。
// 2. 一种多层感知器（MLP），具有两个密集层，以提取的特征作为输入，并基于它进行数字类预测，这就是这两个密集层的本
// 质。在深度学习中，许多模型都利用了特征提取层的这种模式，然后最终预测使用MLP。在本书的其余部分中，我们将看到更多
// 这样的例子，从音频信号分类器到自然语言处理。
model.add(tf.layers.dense({
units: 64,
activation: 'relu'
}));
// Our last layer is a dense layer which has 10 output units, one for each
// output class (i.e. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9). Here the classes actually
// represent numbers, but it's the same idea if you had classes that
// represented other entities like dogs and cats (two output classes: 0, 1).
// We use the softmax function as the activation for the output layer as it
// creates a probability distribution over our 10 classes so their output
// values sum to 1.
// 第8层。
// 这一层将输出10个值在0-1之间的数字元素，表示对0-9这10个数字的预测概率，它们的和为1，最大的概率对应的数值为预测的倾向值。
model.add(tf.layers.dense({
units: 10,
activation: 'softmax'
}));
return model;
}
/**
* This callback type is used by the `train` function for insertion into the
* model.fit callback loop.
*
* @callback onIterationCallback
* @param {string} eventType Selector for which type of event to fire on.
* @param {number} batchOrEpochNumber The current epoch / batch number
* @param {tf.Logs} logs Logs to append to
*/
/**
* Compile and train the given model.
*
* @param {tf.Model} model The model to train.
* @param {onIterationCallback} onIteration A callback to execute every 10 batches & epoch end.
*/
async function train(model, onIteration) {
ui.logStatus('Training model...');
// We compile our model by specifying an optimizer, a loss function, and a
// list of metrics that we will use for model evaluation. Here we're using a
// categorical crossentropy loss, the standard choice for a multi-class
// classification problem like MNIST digits.
// The categorical crossentropy loss is differentiable and hence makes
// model training possible. But it is not amenable to easy interpretation
// by a human. This is why we include a "metric", namely accuracy, which is
// simply a measure of how many of the examples are classified correctly.
// This metric is not differentiable and hence cannot be used as the loss
// function of the model.
model.compile({
// Now that we've defined our model, we will define our optimizer. The
// optimizer will be used to optimize our model's weight values during
// training so that we can decrease our training loss and increase our
// classification accuracy.
// We are using rmsprop as our optimizer.
// An optimizer is an iterative method for minimizing a loss function.
// It tries to find the minimum of our loss function with respect to the
// model's weight parameters.
optimizer: 'rmsprop',
// 损失函数categoricalCrossentropy分类交叉熵，适用于诸如MNIST之类的多分类问题。在iris分类项目案例中，我
// 们也使用了相同的损失函数，一般情况下，当模型的输出为概率分布时，就会使用此函数。分类交叉熵会生成一个数字，指
// 示预测向量与真实标签向量的相似程度。
loss: 'categoricalCrossentropy',
// 度量标准函数调用accuracy。假设预测是基于convnet输出的10个元素中的最大元素进行的，则此函数度量的示例中的一
// 部分已正确分类。回想一下交叉熵损失和精度度量之间的区别：交叉熵是可微的，因此使基于反向传播的训练成为可能，而精
// 度度量是不可微的，但却更容易解释，因此对于分类问题，这是正确预测在所有预测中所占的百分比。
metrics: ['accuracy'],
});
// Batch size is another important hyperparameter. It defines the number of
// examples we group together, or batch, between updates to the model's weights
// during training. A value that is too low will update weights using too few
// examples and will not generalize well. Larger batch sizes require more memory
// resources and aren't guaranteed to perform better.
// 一般而言，使用较大的批次与较小的批次相比好处是，它对模型的权重产生了更一致且变化较小的渐变更新。但是批次大小越大，训练
// 期间就需要更多的内存。您还应该记住，在给定相同数量的训练数据的情况下，较大的批次大小会导致每个时期的梯度更新数量较少。
// 因此，如果您使用较大的批量，请确保相应地增加时期数，以免在训练过程中无意中减少了权重更新的次数。
const batchSize = 320;
// Leave out the last 15% of the training data for validation, to monitor
// overfitting during training.
// 预留15%的训练数据用于训练过程中的验证。
const validationSplit = 0.15;
// Get number of training epochs from the UI.
const trainEpochs = ui.getTrainEpochs();
// We'll keep a buffer of loss and accuracy values over time.
let trainBatchCount = 0;
const trainData = data.getTrainData();
const testData = data.getTestData();
const totalNumBatches = Math.ceil(trainData.xs.shape[0] * (1 - validationSplit) / batchSize) * trainEpochs;
// During the long-running fit() call for model training, we include callbacks,
// so that we can plot the loss and accuracy values in the page as the training
// progresses.
let valAcc;
await model.fit(
trainData.xs, // 特征输入。
trainData.labels, // 标签输入。
{
batchSize, // 每次梯度更新的样本数。
validationSplit, // 末尾15%的数据用于验证。
epochs: trainEpochs, // 在训练数据上的迭代次数。
callbacks: {
onBatchEnd: async (batch, logs) => {
trainBatchCount++;
ui.logStatus(
`Training... (${(trainBatchCount / totalNumBatches * 100).toFixed(1)}% complete). ` +
'To stop training, refresh or close page.'
);
// 绘制损失和准确率图表。
ui.plotLoss(trainBatchCount, logs.loss);
ui.plotAccuracy(trainBatchCount, logs.acc);
// 每10个batch结束时更新测试集的预测结果。
if (onIteration && (batch % 10 === 0)) {
onIteration('onBatchEnd', batch, logs);
}
// 主动让出线程，允许UI在训练过程中更新。
await tf.nextFrame();
},
onEpochEnd: async (epoch, logs) => {
valAcc = logs.val_acc;
// 绘制损失和准确率图表。
ui.plotValLoss(trainBatchCount, logs.val_loss);
ui.plotValAccuracy(trainBatchCount, logs.val_acc);
// 每个epoch结束时更新测试集的预测结果。
if (onIteration) {
onIteration('onEpochEnd', epoch, logs);
}
await tf.nextFrame();
}
}
}
);
// 在fit执行完成后（训练结束），对模型进行评估。
const testResult = model.evaluate(testData.xs, testData.labels);
const testAccPercent = testResult[1].dataSync()[0] * 100;
const finalValAccPercent = valAcc * 100;
// 更新最后的验证准确率和评估（测试）准确率。
ui.logStatus(
`Final validation accuracy: ${finalValAccPercent.toFixed(1)}%; ` +
`Final test accuracy: ${testAccPercent.toFixed(1)}%`
);
}
/**
* Show predictions on a number of test examples.
*
* @param {tf.Model} model The model to be used for making the predictions.
*/
async function showPredictions(model) {
const testExamples = 100;
const examples = data.getTestData(testExamples);
// Code wrapped in a tf.tidy() function callback will have their tensors freed
// from GPU memory after execution without having to call dispose().
// The tf.tidy callback runs synchronously.
tf.tidy(() => {
// output为形状为[100, 10]的二维张量，第一维对应100个特征输入（手写数字图片），第二维对应
// 10个可能的数字的概率。
const output = model.predict(examples.xs);
// tf.argMax() returns the indices of the maximum values in the tensor along
// a specific axis. Categorical classification tasks like this one often
// represent classes as one-hot vectors. One-hot vectors are 1D vectors with
// one element for each output class. All values in the vector are 0
// except for one, which has a value of 1 (e.g. [0, 0, 0, 1, 0]). The
// output from model.predict() will be a probability distribution, so we use
// argMax to get the index of the vector element that has the highest
// probability. This is our prediction. (e.g. argmax([0.07, 0.1, 0.03, 0.75, 0.05]) == 3)
// dataSync() synchronously downloads the tf.tensor values from the GPU so
// that we can use them in our normal CPU JavaScript code
// (for a non-blocking version of this function, use data()).
// output中的axis 0的每一行，代表某个图片可能的10个数字的概率，需要找出其中最大的，将其作为
// 模型的预测值。
// argMax()函数返回沿给定轴的最大值的索引。在这种情况下，此轴是第二维，即const axis = 1。
// argMax()的返回值是形状为[100，1]的张量。通过调用 dataSync()，我们将[100，1]形张量转
// 换为长度为100的Float32Array。然后Array.from()将Float32Array转换为一个普通的JavaScript
// 数组，该数组由100个介于0和9之间的整数组成。此预测数组的含义非常简单：这是模型对100个输入图
// 像进行分类的结果。在MNIST数据集中，目标标签恰好与输出索引完全匹配。因此，我们甚至不需要将数
// 组转换为字符串标签。预测数组由下一行使用，该行调用一个UI函数，该函数将分类结果与测试图像一起呈现。
const axis = 1;
const labels = Array.from(examples.labels.argMax(axis).dataSync());
const predictions = Array.from(output.argMax(axis).dataSync());
// 更新测试集的预测结果，对100个图标注对它的预测数字和正确性（绿色）。
ui.showTestResults(examples, predictions, labels);
});
}
function createModel() {
let model;
const modelType = ui.getModelTypeId();
if (modelType === 'ConvNet') {
model = createConvModel();
} else if (modelType === 'DenseNet') {
model = createDenseModel();
} else {
throw new Error(`Invalid model type: ${modelType}`);
}
return model;
}
let data;
// When page ready, loads the MNIST data, trains the model, and then shows what
// the model predicted on unseen test data.
window.onload = async () => {
ui.logStatus('Loading MNIST data...');
data = new MnistData();
await data.load();
ui.logStatus('Creating model...');
const model = createModel();
// 输出模型规格。
model.summary();
// __________________________________________________________________________________________
// Layer (type) Input Shape Output shape Param #
// ==========================================================================================
// conv2d_Conv2D1 (Conv2D) [[null,28,28,1]] [null,26,26,16] 160
// __________________________________________________________________________________________
// max_pooling2d_MaxPooling2D1 [[null,26,26,16]] [null,13,13,16] 0
// __________________________________________________________________________________________
// conv2d_Conv2D2 (Conv2D) [[null,13,13,16]] [null,11,11,32] 4640
// __________________________________________________________________________________________
// max_pooling2d_MaxPooling2D2 [[null,11,11,32]] [null,5,5,32] 0
// __________________________________________________________________________________________
// conv2d_Conv2D3 (Conv2D) [[null,5,5,32]] [null,3,3,32] 9248
// __________________________________________________________________________________________
// flatten_Flatten1 (Flatten) [[null,3,3,32]] [null,288] 0
// __________________________________________________________________________________________
// dense_Dense1 (Dense) [[null,288]] [null,64] 18496
// __________________________________________________________________________________________
// dense_Dense2 (Dense) [[null,64]] [null,10] 650
// ==========================================================================================
// Total params: 33194
// Trainable params: 33194
// Non-trainable params: 0
// __________________________________________________________________________________________
//
// 从上述图表信息可见该模型总参数为33194个，其中池化层、扁平层无参数。
// 在深度学习中，通常模型自身的参数和模型的输出会占用显存。
// 有参数的层主要包括：卷积层、全连接层、BatchNorm层、Embedding层等。
// 无参数的层主要包括：多数的激活层（Sigmoid/ReLU）、池化层、Dropout层、扁平层等。
ui.logStatus('Model ready.');
// Enable the "Train Model" button.
document.getElementById('train').removeAttribute('disabled');
ui.setTrainButtonCallback(async () => {
ui.logStatus('Starting model training...');
document.getElementById('images').innerHTML = '';
await train(model, () => showPredictions(model));
});
};
data.js
import * as tf from '@tensorflow/tfjs';
// This is a helper class for loading and managing MNIST data specifically.
// It is a useful example of how you could create your own data manager class
// for arbitrary data though. It's worth a look :).
// MnistData类封装了对MNIST灰度图片训练集和标签集的数据加载和预处理过程，为了使数据对下层算法和框架有友好性，数据的
// 格式和存储都以二进制缓冲区和类型化数组为主。这里的数据处理相对于以JSON为主的数据处理的普通web应用而言是稍显复杂的。
// 安东尼·戈德布卢姆（Kaggle的CEO）曾经这样说过：有人开玩笑说有80%的数据科学家在清理数据，剩下的20%在抱怨清理数据。
// 在实际的数据科学（大数据、机器学习）工作中，清理数据所占比例比外人想象的要多得多。一般而言，训练模型通常只占机器学习
// 或数据科学家工作的一小部分（少于10%）。当下在机器学习的纯应用领域上，以成熟框架和算法作为基础的开发上，更是如此。
const MNIST_IMAGES_SPRITE_PATH = 'https://storage.googleapis.com/learnjs-data/model-builder/mnist_images.png';
const MNIST_LABELS_PATH = 'https://storage.googleapis.com/learnjs-data/model-builder/mnist_labels_uint8';
export const IMAGE_H = 28;
export const IMAGE_W = 28;
const IMAGE_SIZE = IMAGE_H * IMAGE_W;
const NUM_CLASSES = 10; // 0-9。
const NUM_DATASET_ELEMENTS = 65000; // MNIST精灵图有65000个子图，精灵图的高度也为65000像素。
const NUM_TRAIN_ELEMENTS = 55000; // 我们用于训练的子图为55000个。
// A class that fetches the sprited MNIST dataset and provide data as tf.Tensors.
export class MnistData {
constructor() {
}
async load() {
// Make a request for the MNIST sprited image.
let img = new Image();
// 这里我们用到了canvas是因为DOM的img对象并没有提供给我们获取其像素的API，DOM这个级别的API是无法操作像素的。
// 只能通过canvas来做一个中间层，将img内容分批次绘制到canvas上，再从canvas提取出像素数据，看下面for循环部分。
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', {
willReadFrequently: true,
});
// 请求手写数字灰度图片，并将图片转化为数据格式。
const imgRequest = new Promise((resolve) => {
// CORS配置。
img.crossOrigin = '';
// naturalWidth和naturalHeight指图片的原始大小，在计算时可以强制校正图片尺寸。
img.onload = () => {
img.width = img.naturalWidth; // 图片本身宽度784。
img.height = img.naturalHeight; // 图片本身长度65000。
// 初始化一个新的二进制缓冲区，包含整个MMINST精灵图的每个像素（每一张子图的每个像素）。它将图像总数和每张图像的尺寸和通道数量相乘。
// 图片为PNG格式，所以有rgba4个通道，最后乘以4。
const datasetBytesBuffer = new ArrayBuffer(NUM_DATASET_ELEMENTS * IMAGE_SIZE * 4); // 65000 * (28 * 28) * 4。
const chunkSize = 5000;
canvas.width = img.width;
canvas.height = chunkSize;
// 分13次处理完，每次处理MNIST精灵图中的5000个子图。
// NUM_DATASET_ELEMENTS和img.height一致，都为65000。每次取5000像素的高度，分13次就能取完。为什么它们两个的一致？我们可以这
// 么看：因为精灵图宽度为784像素，784整好是每个子图的总像素，因为单个子图的宽度为28*28，整好就是784，所以MNIST一横排的像素总量正
// 好就是一个子图的像素总量，从计数上就可以看成一个子图占了MNIST的一排，MNIST有多少排就有多少张子图，MNIST有65000像素高，也就是
// 有65000排，也就是我们可以算出子图有65000张，这个数量和实际的子图数量是一致的。从获取到的MNIST精灵图来看，子图并不是以28*28的
// 长宽方位比依次存放在MNIST上的，而是以1*784的长宽方位比来存放的，正好就是和我们想的一致：一排就是一张子图。将每张子图按照28来切割
// 并换行，就可以组成一个28*28的方形原始图，这下我们就能看明白手写的数字了，虽然这种排列方式利于眼睛的分辨，但显然不适合像素的提取，
// 一旦这样排列，我们在提取子图像素的时候，就变成了去处理矩阵数据（单个子图的正方形就可以看做是一个28*28矩阵）。
// 下面内容涉及到的两个for循环，其中外层的循环遍历chunkSize，内层的循环遍历某个chunkSize下的像素。
const chunkNum = NUM_DATASET_ELEMENTS / chunkSize; // => 65000 / 5000 = 13。
for (let i = 0; i < chunkNum; i++) {
// drawImage允许我们从一个图片源上的裁剪某个特定矩形区域并绘制到canvas的特定位置、大小的区域上。
// 这里我们从image上裁剪同image宽度，高度为chunkSize的区域绘制到canvas上。下一次循环就裁剪下
// 一个chunkSize高度的区域。
ctx.drawImage(
img, // 绘制到上下文的元素，允许任何画布图像源，例如：HTMLImageElement、SVGImageElement等。
// 以下参数都基于需要绘制到目标上下文的image的矩形（裁剪）选择框。
0, // 左上角X轴坐标。
i * chunkSize, // 左上角Y轴坐标。
img.width, // 宽度。
chunkSize, // 高度。
// 以下参数都基于image的左上角在目标画布上的绘制。
0, // 左上角X轴坐标。
0, // 左上角Y轴坐标。
img.width, // 宽度。
chunkSize // 高度。
);
// getImageData返回一个ImageData对象，包含canvas给定的矩形区域的像素数据，这里的话每个循环里的canvas上线文
// 就是15680000个像素（784 * 5000 * 4 = 15680000，4个通道总的需要乘以4）。ImageData结构示例：
// {
// width: 100,
// height: 100,
// colorSpace: 'srgb',
// data: Uint8ClampedArray[40000] // 像素数据。
// }
const imageData = ctx.getImageData(
// 以下参数都基于将要被提取的图像数据矩形区域。
0, // 左上角x坐标。
0, // 左上角y坐标。
canvas.width, // 宽度。
canvas.height // 高度。
);
// datasetBytesView长度为3920000，即精灵图中chunkSize个子图的像素总数量（(28 * 28) * 5000）。
// 采用Float32类型数组当做数据视图来操作它，这个视图即表示了datasetBytesBuffer的一段空间。
const datasetBytesView = new Float32Array( // length => 3920000
// 数据。
datasetBytesBuffer,
// 起始偏移量。第一次循环的时候i为0，也就是从0开始，即无偏移。第二次循环代的时候i为1，即偏移从5000个子图的四通道数
// 量以后开始。剩下的以此类推，每次循环都处理完当前chunkSize的数据，循环完13个chunkSize后，即整个MNIST精灵图的
// 数据就在datasetBytesBuffer中了。也就是说每次对chunkSize的迭代处理中，其实都是针对datasetBytesBuffer进行
// 处理，往它里面存放数据，也就是下面的内层for循环中，针对当前chunkSize下的每个像素，对datasetBytesBuffer从
// 当前的偏移值i * IMAGE_SIZE * chunkSize * 4开始存储，共存储IMAGE_SIZE * chunkSize个数据。
i * IMAGE_SIZE * chunkSize * 4, // => i * (28 * 28) * 5000 * 4。
// 元素数量。
IMAGE_SIZE * chunkSize // => (28 * 28) * 5000 = 392000
);
// 将该区域内总的像素数量除以4得到单通道像素数量。因为原数据包含了4个通道的数据，除以4才表示单个通道的数据长度，也就是该矩
// 形区域内所有像素的按单通道计算的数量。等同于MAGE_SIZE * chunkSize，也就是本次for循环的datasetBytesView的元素长度。
const len = imageData.data.length / 4; // => 15680000 / 4 = 3920000。
// 遍历当前chunkSize高度区域内的每一个像素（按单通道计算）。通过datasetBytesView视图将数据放入datasetBytesBuffer
// 中的对应位置，来改变datasetBytesBuffer的值。
for (let j = 0; j < len; j++) {
// All channels hold an equal value since the image is grayscale, so just read the red channel.
// 因为图片为灰度化的，所有rgba通道都有相同的值，因此只需要读取r（红色）通道的值即可（间隔4个取1次，就能保证每次取的
// 都是r通道的值因此乘以了4）。最后将取出的r通道值除以255，得到0-1之间的数。赋值给datasetBytesView视图对应的下标，
// datasetBytesView和datasetBytesBuffer是连通的，视图被改，datasetBytesBuffer就对应改变了，整个外层for循
// 环结束后，datasetBytesBuffer（this.datasetImages）就是整个MINST精灵图的所有像素的总数据（灰度数据）。
// 这里除以255是为了避免训练数据与预测数据之间出现不匹配的情况，因为我们的MNIST卷积网络应使用归一化到0-1之间的图像张
// 量数据进行训练。
datasetBytesView[j] = imageData.data[j * 4] / 255;
}
// 当上面这个for循环完成后，我们就得到了该chunkSize高度区域的所有的r通道的像素转成灰度的值。然后再接着遍历下一个chunkSize
// 高度区域，并获得它的所有r通道的像素数据。
}
// chunkSize高度区域都全部遍历完以后，datasetBytesBuffer里就已经有了整个MNIST精灵图的r通道的灰度像素信息。最终datasetImages
// 的长度为50960000，即整个MNIST精灵图的像素总数量（65000 * (28 * 28)）。
// 采用Float32类型数组当做数据视图来操作它。
this.datasetImages = new Float32Array(datasetBytesBuffer); // length => 50960000
// 图片DOM用完就回收。
img = null;
resolve();
};
// 赋值src触发图片onload加载回调。
img.src = MNIST_IMAGES_SPRITE_PATH;
});
// 请求标签数据。
const labelsRequest = fetch(MNIST_LABELS_PATH);
// 等待图片、标签数据都加载并处理完成。
const [, labelsResponse] = await Promise.all([imgRequest, labelsRequest]);
// 将标签数据（uint8）存在一个二进制缓冲区中（字节数组），并采用Uint8类型数组当做数据视图来操作它。
// 标签数据为针对每个数字的独热编码集合。以数字6举例：
// 样本 0 1 2 3 4 5 6 7 8 9
// 标签 0 0 0 0 0 0 1 0 0 0 // 只有一个是1，即数字6独热。
// 预测 0.10 0.01 0.01 0.01 0.09 0.01 0.71 0.01 0.03 0.02
// datasetLabels为一个1维数组，数据长度为65000 * 10，因为每组独热编码长度为10，分别对应10个数字的编码，只有一个为1，其他为0。
// datasetLabels每10个下标的元素即为一组针对一个数字的真实值的独热编码。所以下面在划分的时候乘以了NUM_CLASSES（10）。
this.datasetLabels = new Uint8Array(await labelsResponse.arrayBuffer());
// Slice the images and labels into train and test sets.
// 将图片数据和标签数据划分为训练集和测试集。
this.trainImages = this.datasetImages.slice(0, IMAGE_SIZE * NUM_TRAIN_ELEMENTS); // 0到(28 * 28) * 55000。
this.testImages = this.datasetImages.slice(IMAGE_SIZE * NUM_TRAIN_ELEMENTS); // 上面剩下的。
this.trainLabels = this.datasetLabels.slice(0, NUM_CLASSES * NUM_TRAIN_ELEMENTS); // 0到10 * 55000。
this.testLabels = this.datasetLabels.slice(NUM_CLASSES * NUM_TRAIN_ELEMENTS); // 上面剩下的。
}
/**
* Get all training data as a data tensor and a label tensor.
*
* @returns
* xs: The data tensor, of shape `[numTrainExamples, 28, 28, 1]`
* labels: The one-hot encoded labels tensor, of shape '[numTrainExamples, 10]'.
*/
getTrainData() {
// 这包括表示为NHWC形状[N，28、28、1]的4维张量（批次示例的第一维）的输入MNIST图像，其中N是图像总数。
const xs = tf.tensor4d(
this.trainImages,
// NHWC：[55000, 28, 28, 1]。
[this.trainImages.length / IMAGE_SIZE, IMAGE_H, IMAGE_W, 1]
);
// 这包括输入标签，表示为形状为[N，10]的独热编码2维张量。
const labels = tf.tensor2d(
this.trainLabels,
// NHWC：[55000, 10]。
[this.trainLabels.length / NUM_CLASSES, NUM_CLASSES]
);
// 返回的训练数据就是标准的特征集和标签集配对。
return {xs, labels};
}
/**
* Get all test data as a data tensor and a labels tensor.
*
* @param {number} numExamples Optional number of examples to get. If not provided,
* all test examples will be returned.
* @returns xs: The data tensor, of shape `[numTestExamples, 28, 28, 1]`.
* labels: The one-hot encoded labels tensor, of shape `[numTestExamples, 10]`.
*/
getTestData(numExamples) {
let xs = tf.tensor4d(
this.testImages,
[this.testImages.length / IMAGE_SIZE, IMAGE_H, IMAGE_W, 1]
);
let labels = tf.tensor2d(
this.testLabels,
[this.testLabels.length / NUM_CLASSES, NUM_CLASSES]
);
if (numExamples != null) {
// 修正形状为[100, 28, 28, 1]，即从测试集中取出100张图片的特征和标签。
xs = xs.slice([0, 0, 0, 0], [numExamples, IMAGE_H, IMAGE_W, 1]);
labels = labels.slice([0, 0], [numExamples, NUM_CLASSES]);
}
// 返回的测试数据就是标准的特征集和标签集配对。这与训练集是相似的，只是它不包含在训练集以内，模型未曾接触到。
return {xs, labels};
}
}
ui.js
import * as tfvis from '@tensorflow/tfjs-vis';
// This is a helper class for drawing loss graphs and MNIST images to the
// window. For the purposes of understanding the machine learning bits, you can
// largely ignore it
const statusElement = document.getElementById('status');
const messageElement = document.getElementById('message');
const imagesElement = document.getElementById('images');
const trainButton = document.getElementById('train');
const modelType = document.getElementById('model-type');
const epochInput = document.getElementById('train-epochs');
const lossLabelElement = document.getElementById('loss-label');
const lossContainer = document.getElementById('loss-canvas');
const lossValContainer = document.getElementById('loss-val-canvas');
const accuracyLabelElement = document.getElementById('accuracy-label');
const accuracyContainer = document.getElementById('accuracy-canvas');
const accuracyValContainer = document.getElementById('accuracy-val-canvas');
export function logStatus(message) {
statusElement.innerText = message;
}
export function trainingLog(message) {
messageElement.innerText = `${message}\n`;
}
export function showTestResults(batch, predictions, labels) {
const testExamples = batch.xs.shape[0];
imagesElement.innerHTML = '';
for (let i = 0; i < testExamples; i++) {
const image = batch.xs.slice([i, 0], [1, batch.xs.shape[1]]);
const div = document.createElement('div');
div.className = 'pred-container';
// 预测的值。
const pred = document.createElement('div');
// 判断预测是否正确。
const prediction = predictions[i];
const label = labels[i];
const correct = prediction === label;
// 预测正确显示绿色，错误显示红色。
pred.className = `pred ${(correct ? 'pred-correct' : 'pred-incorrect')}`;
// 预测的值。
pred.innerText = `pred: ${prediction}`;
// 创建一个canvas来展示手写数字灰度图片。
const canvas = document.createElement('canvas');
canvas.className = 'prediction-canvas';
draw(image.flatten(), canvas);
div.appendChild(pred);
div.appendChild(canvas);
imagesElement.appendChild(div);
}
}
const lossValues = [];
const lossValValues = [];
const accuracyValues = [];
const accuracyValValues = [];
export function plotLoss(batch, loss) {
lossValues.push({
x: batch,
y: loss
});
tfvis.render.linechart(
lossContainer,
{
values: lossValues,
series: ['train']
},
{
xLabel: 'Batch Number',
yLabel: 'Loss',
width: 400,
height: 300,
}
);
lossLabelElement.innerText = `last loss: ${loss.toFixed(3)}`;
}
export function plotValLoss(batch, loss) {
lossValValues.push({
x: batch,
y: loss
});
tfvis.render.linechart(
lossValContainer,
{
values: lossValValues,
series: ['validation']
},
{
xLabel: 'Batch Number',
yLabel: 'Loss',
width: 400,
height: 300,
seriesColors: ['#f16528']
}
);
}
export function plotAccuracy(batch, accuracy) {
accuracyValues.push({
x: batch,
y: accuracy
});
tfvis.render.linechart(
accuracyContainer,
{
values: accuracyValues,
series: ['train']
},
{
xLabel: 'Batch Number',
yLabel: 'Accuracy',
width: 400,
height: 300,
}
);
accuracyLabelElement.innerText = `last accuracy: ${(accuracy * 100).toFixed(1)}%`;
}
export function plotValAccuracy(batch, accuracy) {
accuracyValValues.push({
x: batch,
y: accuracy
});
tfvis.render.linechart(
accuracyValContainer,
{
values: accuracyValValues,
series: ['validation']
},
{
xLabel: 'Batch Number',
yLabel: 'Accuracy',
width: 400,
height: 300,
seriesColors: ['#f16528']
}
);
}
export function draw(image, canvas) {
const [width, height] = [28, 28];
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const imageData = new ImageData(width, height);
const data = image.dataSync();
for (let i = 0; i < height * width; ++i) {
const j = i * 4;
imageData.data[j + 0] = data[i] * 255;
imageData.data[j + 1] = data[i] * 255;
imageData.data[j + 2] = data[i] * 255;
imageData.data[j + 3] = 255;
}
ctx.putImageData(imageData, 0, 0);
}
export function getModelTypeId() {
return document.getElementById('model-type').value;
}
export function getTrainEpochs() {
return Number.parseInt(document.getElementById('train-epochs').value);
}
export function setTrainButtonCallback(train) {
trainButton.addEventListener('click', async () => {
// Disable button during the training.
trainButton.setAttribute('disabled', true);
modelType.setAttribute('disabled', true);
epochInput.setAttribute('disabled', true);
// Start training.
await train();
// Release button and reset chart data for next training without refreshing page.
trainButton.removeAttribute('disabled');
modelType.removeAttribute('disabled');
epochInput.removeAttribute('disabled');
// Rest data array.
lossValues.splice(0, lossValues.length);
lossValValues.splice(0, lossValValues.length);
accuracyValues.splice(0, accuracyValues.length);
accuracyValValues.splice(0, accuracyValValues.length);
});
}
标签：const,示例,28,MNIST,tf,tensorflow,model,data,mnist From： https://www.cnblogs.com/rock-roll/p/18203793