یادگیری ماشین در جاوا اسکریپت — به زبان ساده

1/**
2 * @license
3 * Copyright 2018 Google LLC. All Rights Reserved.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 * =============================================================================
16 */
17import * as tf from '@tensorflow/tfjs';
18
19/**
20 * A dataset for webcam controls which allows the user to add example Tensors
21 * for particular labels. This object will concat them into two large xs and ys.
22 */
23export class ControllerDataset {
24  constructor(numClasses) {
25    this.numClasses = numClasses;
26  }
27
28  /**
29   * Adds an example to the controller dataset.
30   * @param {Tensor} example A tensor representing the example. It can be an image,
31   *     an activation, or any other type of Tensor.
32   * @param {number} label The label of the example. Should be a number.
33   */
34  addExample(example, label) {
35    // One-hot encode the label.
36    const y = tf.tidy(
37        () => tf.oneHot(tf.tensor1d([label]).toInt(), this.numClasses));
38
39    if (this.xs == null) {
40      // For the first example that gets added, keep example and y so that the
41      // ControllerDataset owns the memory of the inputs. This makes sure that
42      // if addExample() is called in a tf.tidy(), these Tensors will not get
43      // disposed.
44      this.xs = tf.keep(example);
45      this.ys = tf.keep(y);
46    } else {
47      const oldX = this.xs;
48      this.xs = tf.keep(oldX.concat(example, 0));
49
50      const oldY = this.ys;
51      this.ys = tf.keep(oldY.concat(y, 0));
52
53      oldX.dispose();
54      oldY.dispose();
55      y.dispose();
56    }
57  }
58}

1/**
2 * @license
3 * Copyright 2018 Google LLC. All Rights Reserved.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 * =============================================================================
16 */
17
18import * as tf from '@tensorflow/tfjs';
19import * as tfd from '@tensorflow/tfjs-data';
20
21import {ControllerDataset} from './controller_dataset';
22import * as ui from './ui';
23
24// The number of classes we want to predict. In this example, we will be
25// predicting 4 classes for up, down, left, and right.
26const NUM_CLASSES = 4;
27
28// A webcam iterator that generates Tensors from the images from the webcam.
29let webcam;
30
31// The dataset object where we will store activations.
32const controllerDataset = new ControllerDataset(NUM_CLASSES);
33
34let truncatedMobileNet;
35let model;
36
37// Loads mobilenet and returns a model that returns the internal activation
38// we'll use as input to our classifier model.
39async function loadTruncatedMobileNet() {
40  const mobilenet = await tf.loadLayersModel(
41      'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json');
42
43  // Return a model that outputs an internal activation.
44  const layer = mobilenet.getLayer('conv_pw_13_relu');
45  return tf.model({inputs: mobilenet.inputs, outputs: layer.output});
46}
47
48// When the UI buttons are pressed, read a frame from the webcam and associate
49// it with the class label given by the button. up, down, left, right are
50// labels 0, 1, 2, 3 respectively.
51ui.setExampleHandler(async label => {
52  let img = await getImage();
53
54  controllerDataset.addExample(truncatedMobileNet.predict(img), label);
55
56  // Draw the preview thumbnail.
57  ui.drawThumb(img, label);
58  img.dispose();
59})
60
61/**
62 * Sets up and trains the classifier.
63 */
64async function train() {
65  if (controllerDataset.xs == null) {
66    throw new Error('Add some examples before training!');
67  }
68
69  // Creates a 2-layer fully connected model. By creating a separate model,
70  // rather than adding layers to the mobilenet model, we "freeze" the weights
71  // of the mobilenet model, and only train weights from the new model.
72  model = tf.sequential({
73    layers: [
74      // Flattens the input to a vector so we can use it in a dense layer. While
75      // technically a layer, this only performs a reshape (and has no training
76      // parameters).
77      tf.layers.flatten(
78          {inputShape: truncatedMobileNet.outputs[0].shape.slice(1)}),
79      // Layer 1.
80      tf.layers.dense({
81        units: ui.getDenseUnits(),
82        activation: 'relu',
83        kernelInitializer: 'varianceScaling',
84        useBias: true
85      }),
86      // Layer 2. The number of units of the last layer should correspond
87      // to the number of classes we want to predict.
88      tf.layers.dense({
89        units: NUM_CLASSES,
90        kernelInitializer: 'varianceScaling',
91        useBias: false,
92        activation: 'softmax'
93      })
94    ]
95  });
96
97  // Creates the optimizers which drives training of the model.
98  const optimizer = tf.train.adam(ui.getLearningRate());
99  // We use categoricalCrossentropy which is the loss function we use for
100  // categorical classification which measures the error between our predicted
101  // probability distribution over classes (probability that an input is of each
102  // class), versus the label (100% probability in the true class)>
103  model.compile({optimizer: optimizer, loss: 'categoricalCrossentropy'});
104
105  // We parameterize batch size as a fraction of the entire dataset because the
106  // number of examples that are collected depends on how many examples the user
107  // collects. This allows us to have a flexible batch size.
108  const batchSize =
109      Math.floor(controllerDataset.xs.shape[0] * ui.getBatchSizeFraction());
110  if (!(batchSize > 0)) {
111    throw new Error(
112        `Batch size is 0 or NaN. Please choose a non-zero fraction.`);
113  }
114
115  // Train the model! Model.fit() will shuffle xs & ys so we don't have to.
116  model.fit(controllerDataset.xs, controllerDataset.ys, {
117    batchSize,
118    epochs: ui.getEpochs(),
119    callbacks: {
120      onBatchEnd: async (batch, logs) => {
121        ui.trainStatus('Loss: ' + logs.loss.toFixed(5));
122      }
123    }
124  });
125}
126
127let isPredicting = false;
128
129async function predict() {
130  ui.isPredicting();
131  while (isPredicting) {
132    // Capture the frame from the webcam.
133    const img = await getImage();
134
135    // Make a prediction through mobilenet, getting the internal activation of
136    // the mobilenet model, i.e., "embeddings" of the input images.
137    const embeddings = truncatedMobileNet.predict(img);
138
139    // Make a prediction through our newly-trained model using the embeddings
140    // from mobilenet as input.
141    const predictions = model.predict(embeddings);
142
143    // Returns the index with the maximum probability. This number corresponds
144    // to the class the model thinks is the most probable given the input.
145    const predictedClass = predictions.as1D().argMax();
146    const classId = (await predictedClass.data())[0];
147    img.dispose();
148
149    ui.predictClass(classId);
150    await tf.nextFrame();
151  }
152  ui.donePredicting();
153}
154
155/**
156 * Captures a frame from the webcam and normalizes it between -1 and 1.
157 * Returns a batched image (1-element batch) of shape [1, w, h, c].
158 */
159async function getImage() {
160  const img = await webcam.capture();
161  const processedImg =
162      tf.tidy(() => img.expandDims(0).toFloat().div(127).sub(1));
163  img.dispose();
164  return processedImg;
165}
166
167document.getElementById('train').addEventListener('click', async () => {
168  ui.trainStatus('Training...');
169  await tf.nextFrame();
170  await tf.nextFrame();
171  isPredicting = false;
172  train();
173});
174document.getElementById('predict').addEventListener('click', () => {
175  ui.startPacman();
176  isPredicting = true;
177  predict();
178});
179
180async function init() {
181  try {
182    webcam = await tfd.webcam(document.getElementById('webcam'));
183  } catch (e) {
184    console.log(e);
185    document.getElementById('no-webcam').style.display = 'block';
186  }
187  truncatedMobileNet = await loadTruncatedMobileNet();
188
189  ui.init();
190
191  // Warm up the model. This uploads weights to the GPU and compiles the WebGL
192  // programs so the first time we collect data from the webcam it will be
193  // quick.
194  const screenShot = await webcam.capture();
195  truncatedMobileNet.predict(screenShot.expandDims(0));
196  screenShot.dispose();
197}
198
199// Initialize the application.
200init();

1/**
2 * @license
3 * Copyright 2018 Google LLC. All Rights Reserved.
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 * =============================================================================
16 */
17import * as tf from '@tensorflow/tfjs';
18
19const CONTROLS = ['up', 'down', 'left', 'right'];
20const CONTROL_CODES = [38, 40, 37, 39];
21
22export function init() {
23  document.getElementById('controller').style.display = '';
24  statusElement.style.display = 'none';
25}
26
27const trainStatusElement = document.getElementById('train-status');
28
29// Set hyper params from UI values.
30const learningRateElement = document.getElementById('learningRate');
31export const getLearningRate = () => +learningRateElement.value;
32
33const batchSizeFractionElement = document.getElementById('batchSizeFraction');
34export const getBatchSizeFraction = () => +batchSizeFractionElement.value;
35
36const epochsElement = document.getElementById('epochs');
37export const getEpochs = () => +epochsElement.value;
38
39const denseUnitsElement = document.getElementById('dense-units');
40export const getDenseUnits = () => +denseUnitsElement.value;
41const statusElement = document.getElementById('status');
42
43export function startPacman() {
44  google.pacman.startGameplay();
45}
46
47export function predictClass(classId) {
48  google.pacman.keyPressed(CONTROL_CODES[classId]);
49  document.body.setAttribute('data-active', CONTROLS[classId]);
50}
51
52export function isPredicting() {
53  statusElement.style.visibility = 'visible';
54}
55export function donePredicting() {
56  statusElement.style.visibility = 'hidden';
57}
58export function trainStatus(status) {
59  trainStatusElement.innerText = status;
60}
61
62export let addExampleHandler;
63export function setExampleHandler(handler) {
64  addExampleHandler = handler;
65}
66let mouseDown = false;
67const totals = [0, 0, 0, 0];
68
69const upButton = document.getElementById('up');
70const downButton = document.getElementById('down');
71const leftButton = document.getElementById('left');
72const rightButton = document.getElementById('right');
73
74const thumbDisplayed = {};
75
76async function handler(label) {
77  mouseDown = true;
78  const className = CONTROLS[label];
79  const button = document.getElementById(className);
80  const total = document.getElementById(className + '-total');
81  while (mouseDown) {
82    addExampleHandler(label);
83    document.body.setAttribute('data-active', CONTROLS[label]);
84    total.innerText = ++totals[label];
85    await tf.nextFrame();
86  }
87  document.body.removeAttribute('data-active');
88}
89
90upButton.addEventListener('mousedown', () => handler(0));
91upButton.addEventListener('mouseup', () => mouseDown = false);
92
93downButton.addEventListener('mousedown', () => handler(1));
94downButton.addEventListener('mouseup', () => mouseDown = false);
95
96leftButton.addEventListener('mousedown', () => handler(2));
97leftButton.addEventListener('mouseup', () => mouseDown = false);
98
99rightButton.addEventListener('mousedown', () => handler(3));
100rightButton.addEventListener('mouseup', () => mouseDown = false);
101
102export function drawThumb(img, label) {
103  if (thumbDisplayed[label] == null) {
104    const thumbCanvas = document.getElementById(CONTROLS[label] + '-thumb');
105    draw(img, thumbCanvas);
106  }
107}
108
109export function draw(image, canvas) {
110  const [width, height] = [224, 224];
111  const ctx = canvas.getContext('2d');
112  const imageData = new ImageData(width, height);
113  const data = image.dataSync();
114  for (let i = 0; i < height * width; ++i) {
115    const j = i * 4;
116    imageData.data[j + 0] = (data[i * 3 + 0] + 1) * 127;
117    imageData.data[j + 1] = (data[i * 3 + 1] + 1) * 127;
118    imageData.data[j + 2] = (data[i * 3 + 2] + 1) * 127;
119    imageData.data[j + 3] = 255;
120  }
121  ctx.putImageData(imageData, 0, 0);
122}

1x = tf.placeholder(tf.float32, shape=[1, 1])
2m = tf.matmul(x, x)
3
4with tf.Session() as sess:
5  print(sess.run(m, feed_dict={x: [[2.]]}))
6
7# Will print [[4.]]

1x = [[2.]]
2m = tf.matmul(x, x)
3
4print(m)