首页 > 其他分享 >tensorflow.js示例笔记 - mnist

tensorflow.js示例笔记 - mnist

时间:2024-05-21 13:31:36浏览次数:20  
标签:const 示例 28 MNIST tf tensorflow model data mnist

使用层来进行数字识别,使用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

相关文章

  • 如何确保环境中已经安装了支持GPU加速的库(如CuPy、TensorFlow-GPU或PyTorch)
    要确保环境中已经安装了支持GPU加速的库(如CuPy、TensorFlow-GPU或PyTorch),你可以遵循以下步骤进行检查和安装:1.检查CUDA和cuDNN首先,确保你的系统上已经安装了NVIDIA的CUDAToolkit和cuDNN库,���为这些库是GPU���速深度学习框架(如TensorFlow和PyTorch)运行的基础。你可以访问NVIDIA的官方......
  • tensorflow.js示例笔记 - boston-housing
    多元回归,比较不同的房价预测模型。index.html<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Mult......
  • tensorflow.js示例笔记 - iris
    根据鸢尾花的数据对花进行分类,使用神经网络对结构化(表格)数据进行分类。index.html<html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="......
  • C#连接Access数据库 查询和新增 示例
    C#连接Access数据库查询和新增示例项目中需要做一个写程序操作日志的需求,仅本机使用。这时Access数据库就是一个非常好的选择,简单,好用。下面仅仅是一个示例,简单写出查询和新增等C#操作Access数据库的代码效果图 clsDBHelperAccess.csusingSystem;usingSystem......
  • 食物识别系统Python+深度学习人工智能+TensorFlow+卷积神经网络算法模型
    一、介绍食物识别系统。该项目通过构建包含11种常见食物类别(包括'Bread','Dairyproduct','Dessert','Egg','Friedfood','Meat','Noodles-Pasta','Rice','Seafood','Soup','Vegeta......
  • CSS的Flexbox布局示例详解
    CSSFlexibleBoxModule(简称Flexbox)是一种现代化的布局模式,用于创建响应式的一维布局(无论是水平还是垂直)。它提供了对项目的对齐、方向、排序、尺寸调整等方面的强大控制。下面是对Flexbox布局的一些关键概念和示例代码:一、关键概念FlexContainer(弹性容器):需要添加display:f......
  • from tensorflow.examples.tutorials.mnist import input_data时input_data报错
    参考链接——https://blog.csdn.net/weixin_42390287/article/details/115635732 报错 ——解决方法去https://github.com/tensorflow/tensorflow下载压缩包 解压,找到input_data.py后复制到一个新建的空文件夹里将这个文件夹放到python项目中,代码中对input_......
  • XML Schema 复杂元素类型详解:定义及示例解析
    在XMLSchema(XSD)中,复杂元素是指包含其他元素和/或属性的XML元素。复杂元素可以分为四种类型:空元素:仅包含其他元素和/或属性的元素。仅包含其他元素的元素:不包含文本内容,只包含其他子元素的元素。仅包含文本的元素:不包含其他子元素,只包含文本内容的元素。既包含其他元素......
  • Angular-2-示例-全-
    Angular2示例(全)原文:zh.annas-archive.org/md5/529E3E7FE7FFE986F90814E2C501C746译者:飞龙协议:CCBY-NC-SA4.0前言Angular2来了,我们非常兴奋!这本书让我们能够与您联系,并在您学习Angular2的过程中伸出援手。虽然Angular1的增长是有机的,但Angular2却不能这样说......
  • GO实名认证接口开发示例、接口集成、身份认证
    翔云身份证实名认证接口,通过核验身份证二要素、三要素、三要素+现场人像的方式,实时联网核验身份信息的真伪。想象一下,无需耗费大量的人力物力,只需简单几步,即可将翔云身份证实名认证接口集成到您的应用中。无论是用户注册还是支付验证,都无需再让用户手动输入身份信息,线上......