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

هوش مصنوعی 200 بازدید

تعداد بازدید ها: 200

در جریان گردهمایی TensorFlow Developer Summit در سال 2018، تیم توسعه کتابخانه TensorFlow، از نسخه جدیدی از کتابخانه TensorFlow برای «زبان برنامه‌نویسی جاوا اسکریپت» (JavaScript Programming Language) پرده برداشتند؛ کتابخانه TensorFlow.js. این کتابخانه، ابزاری «منبع باز» (Open Source) برای تعریف، «آموزش» (Train) و اجرای مدل‌های یادگیری ماشین در جاوا اسکریپت محسوب می‌شود.

به عبارت دیگر، این کتابخانه به کاربران، برنامه‌نویسان و توسعه‌دهندگان اجازه می‌دهد تا با استفاده از زبان جاوا اسکریپت و یک «واسط برنامه‌نویسی کاربردی» (Application Programming Interfaces | API) سطح بالا برای لایه‌های برنامه‌نویسی، مدل‌های «یادگیری ماشین» (Machine Learning) را به طور کامل در مرورگرهای صفحات وب اجرا کنند.

در این مطلب، بررسی اجمالی از کتابخانه یادگیری ماشین در جاوا اسکریپت یا TensorFlow.js ارائه خواهد شد.

کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)

کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)، به برنامه‌نویسان جاوا اسکریپت و تازه وارد به حوزه یادگیری ماشین اجازه می‌دهد تا به بهترین شکل ممکن با توسعه نرم‌افزارهای تحت وب هوشمند، توسط زبان جاوا اسکریپت و کتابخانه TensorFlow.js آشنا شوند. همچنین، کتابخانه یادگیری ماشین در جاوا اسکریپت، نقطه شروع مناسبی جهت یادگیری مباحث مرتبط با «یادگیری عمیق» (Deep Learning) و «بینایی کامپیوتر» (Computer Vision) برای برنامه‌نویسان مبتدی و علاقه‌مندان به زبان جاوا اسکریپت محسوب می‌شود.

از سوی دیگر، کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)، دسته‌ای از برنامه‌نویسان و توسعه‌دهندگان یادگیری ماشین را هدف قرار می‌دهد که به تازگی از دیگر زبان‌های برنامه‌نویسی به زبان جاوا اسکریپت مهاجرت کرده‌اند. کتابخانه TensorFlow.js به چنین برنامه‌نویسانی اجازه می‌دهد که مدل‌های یادگیری ماشین را توسط زبان جاوا اسکریپت طراحی و در مرورگرهای صفحات وب اجرا کنند.

کتابخانه TensorFlow.js: یادگیری ماشین در مرورگر

اجرای مدل‌ها و برنامه‌های یادگیری ماشین، به صورت سرویس‌های «سمت کاربر» (Client-Side) در مرورگرها، فرصت‌های جدیدی برای محققان پدید می‌آورد و پلتفرم توسعه نرم‌افزار جدیدی برای توسعه دهندگان یادگیری ماشین ایجاد می‌کند؛ با به وجود آمدن قابلیت اجرای مدل‌های یادگیری ماشین در مرورگرها، حوزه تحقیقاتی و برنامه‌نویسی جدیدی به نام سیستم‌های «یادگیری ماشین تعاملی» (Interactive Machine Learning) پدید می‌آید.

در جریان گردهمایی TensorFlow Developer Summit در سال 2018، دو نفر از افراد شاغل در تیم توسعه کتابخانه TensorFlow، «آموزش» (Train) یک مدل یادگیری ماشین را برای کنترل بازی PAC-MAN با استفاده از بینایی کامپیوتر و «وب‌کم» (WebCam) به نمایش گذاشتند.

ویژگی مهم نمایش ارائه شده از نحوه عملکرد کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js) این بود که تمامی مراحل اجرای برنامه (آموزش مدل و کنترل بازی PAC-MAN با استفاده از تکنیک‌های بینایی کامپیوتر و وب‌کم)، به طور کامل، در مرورگر صفحات وب انجام شده بود.

تیم توسعه کتابخانه TensorFlow.js این امکان را برای کاربران و توسعه‌دهندگان مختلف فراهم آورده‌اند تا قابلیت‌های کتابخانه یادگیری ماشین در جاوا اسکریپت و نحوه عملکرد آن در کنترل بازی PAC-MAN را از طریق لینک [+] مشاهده کنند.

آموزش مدل با استفاده از کتابخانه یادگیری ماشین در جاوا اسکریپت

از دیدگاه کاربر عادی، اجرای مدل‌های یادگیری ماشین در مرورگر وب بدین معنی است که دیگر نیازی به نصب کتابخانه‌های برنامه‌نویسی و برنامه‌های راه‌اندازی دستگاه (Drivers) روی سیستم وجود ندارد. تنها کاری که کاربر باید انجام دهد این است که مرورگر سیستم خود را باز، صفحه وب مرتبط با برنامه‌کاربردی تحت وب (برنامه‌ای که مدل یادگیری ماشین در جاوا اسکریپت را اجرا می‌کند) را بارگذاری و برنامه کاربردی پیاده‌سازی شده را اجرا کند.

یکی از ویژگی‌های مهم کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)، امکان استفاده از شتاب پردازشی «واحدهای پردازش گرافیکی» (Graphical Processing Units | GPUs) برای آموزش و اجرای مدل‌های یادگیری ماشین است. کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)، به طور خودکار از قابلیت‌های WebGL پشتیبانی می‌کند؛ به عبارت دیگر، زمانی که سیستم، وجود یک واحد پردازش گرافیکی را تشخیص دهد، اجرای کدهای نوشته شده، به صورت خودکار و بدون درگیر کردن کاربر با جزئیات، توسط واحد پردازش گرافیکی شتاب پیدا می‌کند.

یکی از قابلیت‌های مهم هنگام استفاده از کتابخانه TensorFlow.js در پلتفرم‌های همراه، امکان استفاده از اطلاعات و «داده‌های حسگرها» (Sensor Data) برای مدل‌سازی روش‌های یادگیری ماشین است. به بیان ساده‌تر، زمانی که کاربران یک صفحه وبِ اجرا کننده مدل یادگیری ماشین در جاوا اسکریپت را باز می‌کنند، مدل یادگیری ماشین (آموزش داده شده و یا در حال آموزش) قادر خواهد بود تا از داده‌های حس شده توسط حسگرهایی نظیر «ژیروسکوپ» (Gyroscope) و «شتاب‌سنج» (Accelerometer) بهره ببرد.

همچنین، تمامی داده‌های واکشی یا حس شده (توسط سنسورها)، به صورت «سمت کاربر» (Client-Side) ذخیره‌سازی و نگه‌داری می‌شوند. چنین قابلیت مهمی در کتابخانه یادگیری ماشین در جاوا اسکریپت، دو ویژگی بسیار مفید را برای TensorFlow.js و مدل‌های یادگیری ماشین توسعه داده توسط این کتابخانه فراهم می‌آورد:

کتابخانه TensorFlow.js را به یکی از مهم‌ترین ابزارهای زبان جاوا اسکریپت جهت انجام عملیات «استنتاج کم‌تأخیر» (Low-Latency Inference) در پلتفرم‌های همراه تبدیل می‌کند.
امنیت کاربران را تأمین و از حریم خصوصی آن‌ها محافظت می‌کند.

کاربردهای کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)

در صورتی که برنامه‌نویسان و توسعه‌دهنگان، به توسعه مدل‌های یادگیری ماشین در جاوا اسکریپت علاقه‌مند باشند، سه «جریان کاری» (Workflow) زیر را می‌توانند برای توسعه برنامه‌های کاربردی هوشمند در نظر بگیرند:

برنامه‌نویسان و توسعه‌دهندگان یادگیری ماشین می‌توانند مدل‌‌های موجود و «از پیش آموزش داده شده» (Pre-Trained Models) را برای انجام استنتاج، در برنامه‌های جاوا اسکریپت نوشته شده توسط TensorFlow.js وارد (import) کنند. به عبارت دیگر، در صورتی که یک مدل TensorFlow یا Keras از پیش آموزش داده شده موجود باشد، این امکان برای برنامه‌نویسان و توسعه‌دهندگان جاوا اسکریپت فراهم شده است تا این مدل‌ها را به قالب پشتیبانی شده توسط جاوا اسکریپت تبدیل و برای انجام استنتاج، در مرورگر خود بارگیری (Load) کنند.
این امکان برای برنامه‌نویسان و توسعه‌دهندگان زبان جاوا اسکریپت فراهم شده است تا یک مدل یادگیری ماشین وارد شده به سیستم را دوباره آموزش دهند (Re-Train). مانند نمایش ارائه شده از آموزش مدل یادگیری ماشین و کنترل بازی PAC-MAN با استفاده از بینایی کامپیوتر و وب‌کم، برنامه‌نویسان و توسعه‌دهندگان می‌توانند با استفاده از تکنیک‌های «یادگیری انتقال» (Transfer Learning)، یک مدل از پیش آموزش داده شده را داده‌های اندکی آموزش دوباره دهند و آن را برای استنتاج در دامنه جدید آماده کنند.
- برای چنین کاری، از تکنیکی به نام «آموزش دوباره دسته‌بندهای تصویر» (Re-training Image Classifiers) استفاده می‌شود. در این تکنیک، از حجم کمی از داده‌های جمع‌آوری شده در مرورگر، برای آموزش دوباره مدل از پیش آموزش داده شده، در دامنه کاربردی جدید استفاده می‌شود.
- ویژگی مهم چنین تکنیک‌هایی، صرفه‌جویی در زمان (لازم برای آموزش دوباره مدل با حجم عظیمی از داده‌ها) است. به عبارت دیگر، با استفاده از حجم بسیار کمی از داده‌های آموزشی جدید، می‌توان مدل از پیش آموزش داده شده را دوباره آموزش داد تا یک مدل دقیق یادگیری ماشین برای استنتاج در دامنه‌های کاربری جدید تولید شود.
می‌توان مدل یادگیری ماشین را به طور مستقیم در مرورگرها اجرا کرد. این امکان برای توسعه‌دهنگان و برنامه‌نویسان جاوا اسکریپت فراهم شده است تا عملیات طراحی، آموزش و اجرای مدل‌های یادگیری ماشین را با استفاده از زبان جاوا اسکریپت و API‌های (واسط‌های برنامه‌نویسی کاربردی) سطح بالا برای لایه‌های برنامه‌نویسی، به طور کامل در مرورگر انجام دهند.
- در صورتی که برنامه‌نویس با کتابخانه Keras آشنایی داشته باشد، بدون شک، با مبحث API‌های سطح بالا برای لایه‌های برنامه‌نویسی نیز آشنایی خواهد داشت.

مؤلفه‌های کد نویسی مدل‌های یادگیری ماشین با کتابخانه TensorFlow.js

همانطور که پیش از این نیز اشاره شد، برنامه‌نویسان و توسعه‌دهندگان یادگیری ماشین می‌توانند مدل‌‌هایTensorFlow یا Keras از پیش آموزش داده شده را برای انجام استنتاج، در برنامه‌های جاوا اسکریپت نوشته شده توسط TensorFlow.js مورد استفاده قرار دهند. همچنین، این مکان وجود دارد که فرایند طراحی و آموزش مدل‌های یادگیری ماشین، به طور کامل، توسط زبان جاوا اسکریپت انجام شود.

در ادامه، بخشی از کدهای لازم برای آموزش مدل یادگیری ماشین و کنترل بازی PAC-MAN با استفاده از تکنیک‌های بینایی کامپیوتر و وب‌کم نمایش داده می‌شود.

در این قسمت، ابتدا قطعه کد ControllerDataset نمایش داده می‌شود. در مثال بازی PAC-MAN، از یک «مجموعه داده» (Dataset) برای کنترل‌های مبتنی بر وب‌کم استفاده شده است. این امکان برای کاربران فراهم شده است تا نمایش «تانسوری» (Tensor) از نمونه‌های مشابه با داده‌های دیتاست را توسط قطعه کد زیر به مجموعه داده اضافه کنند.

/**
 * @license
 * Copyright 2018 Google LLC. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================================
 */
import * as tf from '@tensorflow/tfjs';

/**
 * A dataset for webcam controls which allows the user to add example Tensors
 * for particular labels. This object will concat them into two large xs and ys.
 */
export class ControllerDataset {
  constructor(numClasses) {
    this.numClasses = numClasses;
  }

  /**
   * Adds an example to the controller dataset.
   * @param {Tensor} example A tensor representing the example. It can be an image,
   *     an activation, or any other type of Tensor.
   * @param {number} label The label of the example. Should be a number.
   */
  addExample(example, label) {
    // One-hot encode the label.
    const y = tf.tidy(
        () => tf.oneHot(tf.tensor1d([label]).toInt(), this.numClasses));

    if (this.xs == null) {
      // For the first example that gets added, keep example and y so that the
      // ControllerDataset owns the memory of the inputs. This makes sure that
      // if addExample() is called in a tf.tidy(), these Tensors will not get
      // disposed.
      this.xs = tf.keep(example);
      this.ys = tf.keep(y);
    } else {
      const oldX = this.xs;
      this.xs = tf.keep(oldX.concat(example, 0));

      const oldY = this.ys;
      this.ys = tf.keep(oldY.concat(y, 0));

      oldX.dispose();
      oldY.dispose();
      y.dispose();
    }
  }
}

/**

* @license

* Licensed under the Apache License, Version 2.0 (the "License");

* you may not use this file except in compliance with the License.

* You may obtain a copy of the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

* See the License for the specific language governing permissions and

* limitations under the License.

* =============================================================================

import * as tf from '@tensorflow/tfjs';

/**

* A dataset for webcam controls which allows the user to add example Tensors

* for particular labels. This object will concat them into two large xs and ys.

export class ControllerDataset {

constructor(numClasses) {

this.numClasses = numClasses;

}

/**

* Adds an example to the controller dataset.

* @param {Tensor} example A tensor representing the example. It can be an image,

* an activation, or any other type of Tensor.

* @param {number} label The label of the example. Should be a number.

addExample(example, label) {

// One-hot encode the label.

const y = tf.tidy(

() => tf.oneHot(tf.tensor1d([label]).toInt(), this.numClasses));

if (this.xs == null) {

// For the first example that gets added, keep example and y so that the

// ControllerDataset owns the memory of the inputs. This makes sure that

// if addExample() is called in a tf.tidy(), these Tensors will not get

// disposed.

this.xs = tf.keep(example);

this.ys = tf.keep(y);

} else {

const oldX = this.xs;

this.xs = tf.keep(oldX.concat(example, 0));

const oldY = this.ys;

this.ys = tf.keep(oldY.concat(y, 0));

oldX.dispose();

oldY.dispose();

y.dispose();

}

در ادامه، قطعه کد اصلی برای آموزش مدل یادگیری ماشین و کنترل بازی PAC-MAN توسط وب‌کم و تکنیک‌های بینایی کامپیوتر نمایش داده می‌شود:

/**
 * @license
 * Copyright 2018 Google LLC. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================================
 */

import * as tf from '@tensorflow/tfjs';
import * as tfd from '@tensorflow/tfjs-data';

import {ControllerDataset} from './controller_dataset';
import * as ui from './ui';

// The number of classes we want to predict. In this example, we will be
// predicting 4 classes for up, down, left, and right.
const NUM_CLASSES = 4;

// A webcam iterator that generates Tensors from the images from the webcam.
let webcam;

// The dataset object where we will store activations.
const controllerDataset = new ControllerDataset(NUM_CLASSES);

let truncatedMobileNet;
let model;

// Loads mobilenet and returns a model that returns the internal activation
// we'll use as input to our classifier model.
async function loadTruncatedMobileNet() {
  const mobilenet = await tf.loadLayersModel(
      'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json');

  // Return a model that outputs an internal activation.
  const layer = mobilenet.getLayer('conv_pw_13_relu');
  return tf.model({inputs: mobilenet.inputs, outputs: layer.output});
}

// When the UI buttons are pressed, read a frame from the webcam and associate
// it with the class label given by the button. up, down, left, right are
// labels 0, 1, 2, 3 respectively.
ui.setExampleHandler(async label => {
  let img = await getImage();

  controllerDataset.addExample(truncatedMobileNet.predict(img), label);

  // Draw the preview thumbnail.
  ui.drawThumb(img, label);
  img.dispose();
})

/**
 * Sets up and trains the classifier.
 */
async function train() {
  if (controllerDataset.xs == null) {
    throw new Error('Add some examples before training!');
  }

  // Creates a 2-layer fully connected model. By creating a separate model,
  // rather than adding layers to the mobilenet model, we "freeze" the weights
  // of the mobilenet model, and only train weights from the new model.
  model = tf.sequential({
    layers: [
      // Flattens the input to a vector so we can use it in a dense layer. While
      // technically a layer, this only performs a reshape (and has no training
      // parameters).
      tf.layers.flatten(
          {inputShape: truncatedMobileNet.outputs[0].shape.slice(1)}),
      // Layer 1.
      tf.layers.dense({
        units: ui.getDenseUnits(),
        activation: 'relu',
        kernelInitializer: 'varianceScaling',
        useBias: true
      }),
      // Layer 2. The number of units of the last layer should correspond
      // to the number of classes we want to predict.
      tf.layers.dense({
        units: NUM_CLASSES,
        kernelInitializer: 'varianceScaling',
        useBias: false,
        activation: 'softmax'
      })
    ]
  });

  // Creates the optimizers which drives training of the model.
  const optimizer = tf.train.adam(ui.getLearningRate());
  // We use categoricalCrossentropy which is the loss function we use for
  // categorical classification which measures the error between our predicted
  // probability distribution over classes (probability that an input is of each
  // class), versus the label (100% probability in the true class)>
  model.compile({optimizer: optimizer, loss: 'categoricalCrossentropy'});

  // We parameterize batch size as a fraction of the entire dataset because the
  // number of examples that are collected depends on how many examples the user
  // collects. This allows us to have a flexible batch size.
  const batchSize =
      Math.floor(controllerDataset.xs.shape[0] * ui.getBatchSizeFraction());
  if (!(batchSize > 0)) {
    throw new Error(
        `Batch size is 0 or NaN. Please choose a non-zero fraction.`);
  }

  // Train the model! Model.fit() will shuffle xs & ys so we don't have to.
  model.fit(controllerDataset.xs, controllerDataset.ys, {
    batchSize,
    epochs: ui.getEpochs(),
    callbacks: {
      onBatchEnd: async (batch, logs) => {
        ui.trainStatus('Loss: ' + logs.loss.toFixed(5));
      }
    }
  });
}

let isPredicting = false;

async function predict() {
  ui.isPredicting();
  while (isPredicting) {
    // Capture the frame from the webcam.
    const img = await getImage();

    // Make a prediction through mobilenet, getting the internal activation of
    // the mobilenet model, i.e., "embeddings" of the input images.
    const embeddings = truncatedMobileNet.predict(img);

    // Make a prediction through our newly-trained model using the embeddings
    // from mobilenet as input.
    const predictions = model.predict(embeddings);

    // Returns the index with the maximum probability. This number corresponds
    // to the class the model thinks is the most probable given the input.
    const predictedClass = predictions.as1D().argMax();
    const classId = (await predictedClass.data())[0];
    img.dispose();

    ui.predictClass(classId);
    await tf.nextFrame();
  }
  ui.donePredicting();
}

/**
 * Captures a frame from the webcam and normalizes it between -1 and 1.
 * Returns a batched image (1-element batch) of shape [1, w, h, c].
 */
async function getImage() {
  const img = await webcam.capture();
  const processedImg =
      tf.tidy(() => img.expandDims(0).toFloat().div(127).sub(1));
  img.dispose();
  return processedImg;
}

document.getElementById('train').addEventListener('click', async () => {
  ui.trainStatus('Training...');
  await tf.nextFrame();
  await tf.nextFrame();
  isPredicting = false;
  train();
});
document.getElementById('predict').addEventListener('click', () => {
  ui.startPacman();
  isPredicting = true;
  predict();
});

async function init() {
  try {
    webcam = await tfd.webcam(document.getElementById('webcam'));
  } catch (e) {
    console.log(e);
    document.getElementById('no-webcam').style.display = 'block';
  }
  truncatedMobileNet = await loadTruncatedMobileNet();

  ui.init();

  // Warm up the model. This uploads weights to the GPU and compiles the WebGL
  // programs so the first time we collect data from the webcam it will be
  // quick.
  const screenShot = await webcam.capture();
  truncatedMobileNet.predict(screenShot.expandDims(0));
  screenShot.dispose();
}

// Initialize the application.
init();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

/**

* @license

* Licensed under the Apache License, Version 2.0 (the "License");

* you may not use this file except in compliance with the License.

* You may obtain a copy of the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

* See the License for the specific language governing permissions and

* limitations under the License.

* =============================================================================

import * as tf from '@tensorflow/tfjs';

import * as tfd from '@tensorflow/tfjs-data';

import {ControllerDataset} from './controller_dataset';

import * as ui from './ui';

// The number of classes we want to predict. In this example, we will be

// predicting 4 classes for up, down, left, and right.

const NUM_CLASSES = 4;

// A webcam iterator that generates Tensors from the images from the webcam.

let webcam;

// The dataset object where we will store activations.

const controllerDataset = new ControllerDataset(NUM_CLASSES);

let truncatedMobileNet;

let model;

// Loads mobilenet and returns a model that returns the internal activation

// we'll use as input to our classifier model.

async function loadTruncatedMobileNet() {

const mobilenet = await tf.loadLayersModel(

'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json');

// Return a model that outputs an internal activation.

const layer = mobilenet.getLayer('conv_pw_13_relu');

return tf.model({inputs: mobilenet.inputs, outputs: layer.output});

}

// When the UI buttons are pressed, read a frame from the webcam and associate

// it with the class label given by the button. up, down, left, right are

// labels 0, 1, 2, 3 respectively.

ui.setExampleHandler(async label => {

let img = await getImage();

controllerDataset.addExample(truncatedMobileNet.predict(img), label);

// Draw the preview thumbnail.

ui.drawThumb(img, label);

img.dispose();

})

/**

* Sets up and trains the classifier.

async function train() {

if (controllerDataset.xs == null) {

throw new Error('Add some examples before training!');

}

// Creates a 2-layer fully connected model. By creating a separate model,

// rather than adding layers to the mobilenet model, we "freeze" the weights

// of the mobilenet model, and only train weights from the new model.

model = tf.sequential({

layers: [

// Flattens the input to a vector so we can use it in a dense layer. While

// technically a layer, this only performs a reshape (and has no training

// parameters).

tf.layers.flatten(

{inputShape: truncatedMobileNet.outputs[0].shape.slice(1)}),

// Layer 1.

tf.layers.dense({

units: ui.getDenseUnits(),

activation: 'relu',

kernelInitializer: 'varianceScaling',

useBias: true

}),

// Layer 2. The number of units of the last layer should correspond

// to the number of classes we want to predict.

tf.layers.dense({

units: NUM_CLASSES,

kernelInitializer: 'varianceScaling',

useBias: false,

activation: 'softmax'

})

]

});

// Creates the optimizers which drives training of the model.

const optimizer = tf.train.adam(ui.getLearningRate());

// We use categoricalCrossentropy which is the loss function we use for

// categorical classification which measures the error between our predicted

// probability distribution over classes (probability that an input is of each

// class), versus the label (100% probability in the true class)>

model.compile({optimizer: optimizer, loss: 'categoricalCrossentropy'});

// We parameterize batch size as a fraction of the entire dataset because the

// number of examples that are collected depends on how many examples the user

// collects. This allows us to have a flexible batch size.

const batchSize =

Math.floor(controllerDataset.xs.shape[0] * ui.getBatchSizeFraction());

if (!(batchSize > 0)) {

throw new Error(

`Batch size is 0 or NaN. Please choose a non-zero fraction.`);

}

// Train the model! Model.fit() will shuffle xs & ys so we don't have to.

model.fit(controllerDataset.xs, controllerDataset.ys, {

batchSize,

epochs: ui.getEpochs(),

callbacks: {

onBatchEnd: async (batch, logs) => {

ui.trainStatus('Loss: ' + logs.loss.toFixed(5));

}

});

}

let isPredicting = false;

async function predict() {

ui.isPredicting();

while (isPredicting) {

// Capture the frame from the webcam.

const img = await getImage();

// Make a prediction through mobilenet, getting the internal activation of

// the mobilenet model, i.e., "embeddings" of the input images.

const embeddings = truncatedMobileNet.predict(img);

// Make a prediction through our newly-trained model using the embeddings

// from mobilenet as input.

const predictions = model.predict(embeddings);

// Returns the index with the maximum probability. This number corresponds

// to the class the model thinks is the most probable given the input.

const predictedClass = predictions.as1D().argMax();

const classId = (await predictedClass.data())[0];

img.dispose();

ui.predictClass(classId);

await tf.nextFrame();

}

ui.donePredicting();

}

/**

* Captures a frame from the webcam and normalizes it between -1 and 1.

* Returns a batched image (1-element batch) of shape [1, w, h, c].

async function getImage() {

const img = await webcam.capture();

const processedImg =

tf.tidy(() => img.expandDims(0).toFloat().div(127).sub(1));

img.dispose();

return processedImg;

}

document.getElementById('train').addEventListener('click', async () => {

ui.trainStatus('Training...');

await tf.nextFrame();

isPredicting = false;

train();

});

document.getElementById('predict').addEventListener('click', () => {

ui.startPacman();

isPredicting = true;

predict();

});

async function init() {

try {

webcam = await tfd.webcam(document.getElementById('webcam'));

} catch (e) {

console.log(e);

document.getElementById('no-webcam').style.display = 'block';

}

truncatedMobileNet = await loadTruncatedMobileNet();

ui.init();

// Warm up the model. This uploads weights to the GPU and compiles the WebGL

// programs so the first time we collect data from the webcam it will be

// quick.

const screenShot = await webcam.capture();

truncatedMobileNet.predict(screenShot.expandDims(0));

screenShot.dispose();

}

// Initialize the application.

init();

در نهایت، قطعه کدهای مرتبط با پیاده‌سازی «واسط گرافیکی» (User Interface) جهت اجرای مدل یادگیری ماشین و کنترل بازی PAC-MAN نمایش داده خواهد شد.

/**
 * @license
 * Copyright 2018 Google LLC. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =============================================================================
 */
import * as tf from '@tensorflow/tfjs';

const CONTROLS = ['up', 'down', 'left', 'right'];
const CONTROL_CODES = [38, 40, 37, 39];

export function init() {
  document.getElementById('controller').style.display = '';
  statusElement.style.display = 'none';
}

const trainStatusElement = document.getElementById('train-status');

// Set hyper params from UI values.
const learningRateElement = document.getElementById('learningRate');
export const getLearningRate = () => +learningRateElement.value;

const batchSizeFractionElement = document.getElementById('batchSizeFraction');
export const getBatchSizeFraction = () => +batchSizeFractionElement.value;

const epochsElement = document.getElementById('epochs');
export const getEpochs = () => +epochsElement.value;

const denseUnitsElement = document.getElementById('dense-units');
export const getDenseUnits = () => +denseUnitsElement.value;
const statusElement = document.getElementById('status');

export function startPacman() {
  google.pacman.startGameplay();
}

export function predictClass(classId) {
  google.pacman.keyPressed(CONTROL_CODES[classId]);
  document.body.setAttribute('data-active', CONTROLS[classId]);
}

export function isPredicting() {
  statusElement.style.visibility = 'visible';
}
export function donePredicting() {
  statusElement.style.visibility = 'hidden';
}
export function trainStatus(status) {
  trainStatusElement.innerText = status;
}

export let addExampleHandler;
export function setExampleHandler(handler) {
  addExampleHandler = handler;
}
let mouseDown = false;
const totals = [0, 0, 0, 0];

const upButton = document.getElementById('up');
const downButton = document.getElementById('down');
const leftButton = document.getElementById('left');
const rightButton = document.getElementById('right');

const thumbDisplayed = {};

async function handler(label) {
  mouseDown = true;
  const className = CONTROLS[label];
  const button = document.getElementById(className);
  const total = document.getElementById(className + '-total');
  while (mouseDown) {
    addExampleHandler(label);
    document.body.setAttribute('data-active', CONTROLS[label]);
    total.innerText = ++totals[label];
    await tf.nextFrame();
  }
  document.body.removeAttribute('data-active');
}

upButton.addEventListener('mousedown', () => handler(0));
upButton.addEventListener('mouseup', () => mouseDown = false);

downButton.addEventListener('mousedown', () => handler(1));
downButton.addEventListener('mouseup', () => mouseDown = false);

leftButton.addEventListener('mousedown', () => handler(2));
leftButton.addEventListener('mouseup', () => mouseDown = false);

rightButton.addEventListener('mousedown', () => handler(3));
rightButton.addEventListener('mouseup', () => mouseDown = false);

export function drawThumb(img, label) {
  if (thumbDisplayed[label] == null) {
    const thumbCanvas = document.getElementById(CONTROLS[label] + '-thumb');
    draw(img, thumbCanvas);
  }
}

export function draw(image, canvas) {
  const [width, height] = [224, 224];
  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 * 3 + 0] + 1) * 127;
    imageData.data[j + 1] = (data[i * 3 + 1] + 1) * 127;
    imageData.data[j + 2] = (data[i * 3 + 2] + 1) * 127;
    imageData.data[j + 3] = 255;
  }
  ctx.putImageData(imageData, 0, 0);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

/**

* @license

* Licensed under the Apache License, Version 2.0 (the "License");

* you may not use this file except in compliance with the License.

* You may obtain a copy of the License at

* http://www.apache.org/licenses/LICENSE-2.0

* Unless required by applicable law or agreed to in writing, software

* distributed under the License is distributed on an "AS IS" BASIS,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

* See the License for the specific language governing permissions and

* limitations under the License.

* =============================================================================

import * as tf from '@tensorflow/tfjs';

const CONTROLS = ['up', 'down', 'left', 'right'];

const CONTROL_CODES = [38, 40, 37, 39];

export function init() {

document.getElementById('controller').style.display = '';

statusElement.style.display = 'none';

}

const trainStatusElement = document.getElementById('train-status');

// Set hyper params from UI values.

const learningRateElement = document.getElementById('learningRate');

export const getLearningRate = () => +learningRateElement.value;

const batchSizeFractionElement = document.getElementById('batchSizeFraction');

export const getBatchSizeFraction = () => +batchSizeFractionElement.value;

const epochsElement = document.getElementById('epochs');

export const getEpochs = () => +epochsElement.value;

const denseUnitsElement = document.getElementById('dense-units');

export const getDenseUnits = () => +denseUnitsElement.value;

const statusElement = document.getElementById('status');

export function startPacman() {

google.pacman.startGameplay();

}

export function predictClass(classId) {

google.pacman.keyPressed(CONTROL_CODES[classId]);

document.body.setAttribute('data-active', CONTROLS[classId]);

}

export function isPredicting() {

statusElement.style.visibility = 'visible';

}

export function donePredicting() {

statusElement.style.visibility = 'hidden';

}

export function trainStatus(status) {

trainStatusElement.innerText = status;

}

export let addExampleHandler;

export function setExampleHandler(handler) {

addExampleHandler = handler;

}

let mouseDown = false;

const totals = [0, 0, 0, 0];

const upButton = document.getElementById('up');

const downButton = document.getElementById('down');

const leftButton = document.getElementById('left');

const rightButton = document.getElementById('right');

const thumbDisplayed = {};

async function handler(label) {

mouseDown = true;

const className = CONTROLS[label];

const button = document.getElementById(className);

const total = document.getElementById(className + '-total');

while (mouseDown) {

addExampleHandler(label);

document.body.setAttribute('data-active', CONTROLS[label]);

total.innerText = ++totals[label];

await tf.nextFrame();

}

document.body.removeAttribute('data-active');

}

upButton.addEventListener('mousedown', () => handler(0));

upButton.addEventListener('mouseup', () => mouseDown = false);

downButton.addEventListener('mousedown', () => handler(1));

downButton.addEventListener('mouseup', () => mouseDown = false);

leftButton.addEventListener('mousedown', () => handler(2));

leftButton.addEventListener('mouseup', () => mouseDown = false);

rightButton.addEventListener('mousedown', () => handler(3));

rightButton.addEventListener('mouseup', () => mouseDown = false);

export function drawThumb(img, label) {

if (thumbDisplayed[label] == null) {

const thumbCanvas = document.getElementById(CONTROLS[label] + '-thumb');

draw(img, thumbCanvas);

}

export function draw(image, canvas) {

const [width, height] = [224, 224];

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 * 3 + 0] + 1) * 127;

imageData.data[j + 1] = (data[i * 3 + 1] + 1) * 127;

imageData.data[j + 2] = (data[i * 3 + 2] + 1) * 127;

imageData.data[j + 3] = 255;

}

ctx.putImageData(imageData, 0, 0);

}

قطعه‌کدهای نمایش داده شده، تنها بخشی از کدهای لازم برای آموزش مدل یادگیری ماشین و کنترل بازی PAC-MAN توسط وب‌کم و تکنیک‌های بینایی کامپیوتر است. به عبارت دیگر، تنها کدهای زبان جاوا اسکریپت در این بخش نمایش داده شده است. قطعه کدهای لازم برای طراحی صفحه وب و کدهای مورد نیاز برای نمونه‌سازی یا قالب‌سازی محتویات، در این مطلب نمایش داده نشده است. برای مشاهده مجموعه کامل کدهای لازم برای پیاده‌سازی مثال بازی PAC-MAN و دانلود آن‌ها، به لینک [+] مراجعه کنید.

کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)، یک واسط برنامه‌نویسی کاربردی سطح پایین (که پیش از این با نام deeplearn.js شناخته می‌شد) را نیز شامل می‌شود. همچنین، کتابخانه یادگیری ماشین در جاوا اسکریپت از الگوی کد نویسی «اجرای مشتاقانه» (Eager Execution) نیز پشتیبانی می‌کند.

الگوی کد نویسی اجرای مشتاقانه، یک «واسط دستوری» (Imperative Interface) برای کتابخانه TensorFlow تعریف می‌کند؛ الگوی کد نویسی اجرای مشتاقانه، کد نویسی TensorFlow در زبان جاوا اسکریپت را ساده‌تر و زمان اجرای کدها را به شدت کاهش می‌دهد. به عنوان نمونه، قطعه کد زیر برای انجام یک عمل محاسباتی ساده در TensorFlow می‌تواند مورد استفاده قرار بگیرد:

x = tf.placeholder(tf.float32, shape=[1, 1])
m = tf.matmul(x, x)

with tf.Session() as sess:
  print(sess.run(m, feed_dict={x: [[2.]]}))

# Will print [[4.]]

x = tf.placeholder(tf.float32, shape=[1, 1])

m = tf.matmul(x, x)

with tf.Session() as sess:

print(sess.run(m, feed_dict={x: [[2.]]}))

# Will print [[4.]]

با استفاده از الگوی کد نویسی اجرای مشتاقانه، قطعه کد بالا به فرم ساده زیر تبدیل می‌شود:

x = [[2.]]
m = tf.matmul(x, x)

print(m)

x = [[2.]]

m = tf.matmul(x, x)

print(m)

وجه شباهت TensorFlow.js و deeplearn.js

کتابخانه TensorFlow.js، که به عنوان اکوسیستمی از ابزارهای زبان جاوا اسکریپت برای یادگیری ماشین محسوب می‌شود، جانشین deeplearn.js محسوب و هم‌اکنون، با نام TensorFlow.js Core شناخته می‌شود. همچنین، کتابخانه TensorFlow.js یک واسط برنامه‌نویسی کاربردی لایه‌ها (Layers API) را نیز شامل می‌شود که یک کتابخانه سطح بالاتر برای ساختن مدل‌های یادگیری ماشین محسوب می‌شود. این واسط برنامه‌نویسی کاربردی لایه‌ها از TensorFlow.js Core و دیگر ابزارها برای «پورت کردن» (Porting) خودکار مدل‌های ذخیره شده TensorFlow و مدل‌های hdf5 کتابخانه Keras استفاده می‌کند.

کتابخانه TensorFlow.js، از کتابخانه WebGL برای ارائه بسیاری از قابلیت‌های خود به برنامه‌نویسان و توسعه‌دهندگان استفاده می‌کند. این کتابخانه، یک واسط برنامه‌نویسی کاربردی سطح بالا برای لایه‌های برنامه‌نویسی، جهت طراحی مدل‌های یادگیری ماشین و یک واسط برنامه‌نویسی کاربردی سطح پایین، برای «جبر خطی» (Linear Algebra) و «مشتق‌گیری یا دیفرانسیل‌گیری خودکار» (Automatic Differentiation) فراهم می‌کند. در حال حاضر، در کتابخانه TensorFlow.js، امکان import کردن مدل‌های ذخیره شده TensorFlow و مدل‌های Keras، برای برنامه‌نویسان و توسعه‌دهندگان جاوا اسکریپت فراهم شده است.

اگر نوشته بالا برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

به اشتراک بگذارید:

منبع Medium

مرتضی جادریان

«مرتضی جادریان»، دانشجوی مقطع دکتری مهندسی کامپیوتر گرایش هوش مصنوعی است. او در زمینه سیستم‌های هوشمند، به ویژه سیستم‌های هوشمند اطلاعاتی، روش‌های یادگیری ماشین، سیستم‌های دانش محور و محاسبات تکاملی فعالیت دارد.

آیا این مطلب برای شما مفید بود؟

سید سراج حمیدی در محاسبه قیمت برق از روی قبض — به زبان ساده نوشته است:

سلام. مشکل تایپی مورد اول اصلاح شد. در مورد دوم، منظور از ضریب اوج بار ۲ این است که هزینه مصرف برق در اوج بار دو برابر حالت عادی حساب می‌شود. توجه کنید که ما یک بار هزینه مصرف را ...
علیرضا در پلاسما در فیزیک — به زبان ساده نوشته است:

سلام. ...
Zahra در محاسبه قیمت برق از روی قبض — به زبان ساده نوشته است:

درقسمت محاسبه مبلغ برای پله ها درپله سوم باید عدد۱.۵۸ درج شود ن عدد۱۰۰ همچنین درمحاسبات اخر فرمودید که ضریب اوج بار۲ است پس ۵۲۴بایددرعدد۲ ضرب شود همانطور که برای کم باری ۵۲۴ در۰.۵ ضرب شده

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

کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)

کتابخانه TensorFlow.js: یادگیری ماشین در مرورگر

آموزش مدل با استفاده از کتابخانه یادگیری ماشین در جاوا اسکریپت

کاربردهای کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)

مؤلفه‌های کد نویسی مدل‌های یادگیری ماشین با کتابخانه TensorFlow.js

وجه شباهت TensorFlow.js و deeplearn.js

مرتضی جادریان

مرتضی جادریان

نظر شما چیست؟
لغو پاسخ

نظر شما چیست؟

برچسب‌ها

کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)

کتابخانه TensorFlow.js: یادگیری ماشین در مرورگر

آموزش مدل با استفاده از کتابخانه یادگیری ماشین در جاوا اسکریپت

کاربردهای کتابخانه یادگیری ماشین در جاوا اسکریپت (TensorFlow.js)

مؤلفه‌های کد نویسی مدل‌های یادگیری ماشین با کتابخانه TensorFlow.js

وجه شباهت TensorFlow.js و deeplearn.js

مرتضی جادریان

مرتضی جادریان

مطالب مرتبط

نظر شما چیست؟ لغو پاسخ

نظر شما چیست؟

برچسب‌ها

نظر شما چیست؟
لغو پاسخ