التدريب على TensorFlow.js في الدرس التطبيقي حول ترميز Node.js

1. مقدمة

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إنشاء خادم ويب Node.js لتدريب أنواع رميات البيسبول وتصنيفها من جهة الخادم باستخدام TensorFlow.js، وهي مكتبة قوية ومرنة لتعلُّم الآلة في JavaScript. ستنشئ تطبيق ويب لتدريب نموذج يتوقّع نوع الملعب من بيانات جهاز استشعار الملعب، ولطلب التوقّع من عميل تطبيقات الويب. يتوفّر إصدار كامل من هذا الدرس التطبيقي حول الترميز في مستودع tfjs-examples على GitHub.

أهداف الدورة التعليمية

• كيفية تثبيت حزمة tensorflow.js npm وإعدادها لاستخدامها مع Node.js
• كيفية الوصول إلى بيانات التدريب والاختبار في بيئة Node.js
• كيفية تدريب نموذج باستخدام TensorFlow.js في خادم Node.js
• كيفية نشر النموذج المُدرَّب للاستدلال في تطبيق عميل/خادم

هيا بنا نبدأ!

2. المتطلبات

لإكمال هذا الدرس التطبيقي حول الترميز، ستحتاج إلى:

1. إصدار حديث من Chrome أو متصفّح حديث آخر
2. محرّر نصوص ووحدة طرفية للأوامر يعملان على جهازك.
3. معرفة HTML وCSS وJavaScript وأدوات مطوّري البرامج في Chrome (أو أدوات مطوّري البرامج في المتصفّحات المفضّلة لديك)
4. فهم مفاهيمي رفيع المستوى للشبكات العصبية إذا كنت بحاجة إلى مقدّمة أو تنشيط للذاكرة، ننصحك بمشاهدة هذا الفيديو من قناة 3blue1brown أو هذا الفيديو حول التعلّم العميق في JavaScript من Ashi Krishnan.

3- إعداد تطبيق Node.js

ثبِّت Node.js وnpm. للاطّلاع على الأنظمة الأساسية المتوافقة والبرامج التابعة، يُرجى الرجوع إلى دليل تثبيت tfjs-node.

أنشئ دليلًا باسم ‎ ./baseball لتطبيق Node.js. انسخ الملفين المرتبطين package.json وwebpack.config.js إلى هذا الدليل لضبط تبعيات حزمة npm (بما في ذلك حزمة npm ‎@tensorflow/tfjs-node). بعد ذلك، شغِّل الأمر npm install لتثبيت التبعيات.

$ cd baseball
$ ls
package.json  webpack.config.js
$ npm install
...
$ ls
node_modules  package.json  package-lock.json  webpack.config.js

أنت الآن جاهز لكتابة بعض الرموز البرمجية وتدريب نموذج.

4. إعداد بيانات التدريب والاختبار

ستستخدم بيانات التدريب والاختبار كملفات CSV من الروابط أدناه. نزِّل البيانات في هذه الملفات واستكشِفها:

pitch_type_training_data.csv

pitch_type_test_data.csv

لنلقِ نظرة على بعض نماذج بيانات التدريب:

vx0,vy0,vz0,ax,ay,az,start_speed,left_handed_pitcher,pitch_code
7.69914900671662,-132.225686405648,-6.58357157666866,-22.5082591074995,28.3119270826735,-16.5850095967027,91.1,0,0
6.68052308575228,-134.215511616881,-6.35565979491619,-19.6602769147989,26.7031848314466,-14.3430602022656,92.4,0,0
2.56546504690782,-135.398673977074,-2.91657310799559,-14.7849950586111,27.8083916890792,-21.5737737390901,93.1,0,0

هناك ثماني ميزات إدخال تصف بيانات جهاز استشعار درجة الصوت:

• سرعة الكرة (vx0, vy0, vz0)
• تسارع الكرة (ax, ay, az)
• سرعة رمي الكرة
• ما إذا كان الرامي يستخدم اليد اليسرى أم لا

وتصنيف ناتج واحد:

• ‫pitch_code الذي يشير إلى أحد أنواع الملعب السبعة: Fastball (2-seam), Fastball (4-seam), Fastball (sinker), Fastball (cutter), Slider, Changeup, Curveball

والهدف هو إنشاء نموذج قادر على التنبؤ بنوع الرمية استنادًا إلى بيانات جهاز استشعار الرمية.

قبل إنشاء النموذج، عليك إعداد بيانات التدريب والاختبار. أنشئ الملف pitch_type.js في الدليل baseball/، وانسخ الرمز التالي وألصِقه فيه. تحمّل هذه الرموز بيانات التدريب والاختبار باستخدام واجهة برمجة التطبيقات tf.data.csv. تعمل أيضًا على تسوية البيانات (وهو أمر يُنصح به دائمًا) باستخدام مقياس تسوية الحدّ الأدنى والحدّ الأقصى.

const tf = require('@tensorflow/tfjs');

// util function to normalize a value between a given range.
function normalize(value, min, max) {
  if (min === undefined || max === undefined) {
    return value;
  }
  return (value - min) / (max - min);
}

// data can be loaded from URLs or local file paths when running in Node.js.
const TRAIN_DATA_PATH =
'https://storage.googleapis.com/mlb-pitch-data/pitch_type_training_data.csv';
const TEST_DATA_PATH =    'https://storage.googleapis.com/mlb-pitch-data/pitch_type_test_data.csv';

// Constants from training data
const VX0_MIN = -18.885;
const VX0_MAX = 18.065;
const VY0_MIN = -152.463;
const VY0_MAX = -86.374;
const VZ0_MIN = -15.5146078412997;
const VZ0_MAX = 9.974;
const AX_MIN = -48.0287647107959;
const AX_MAX = 30.592;
const AY_MIN = 9.397;
const AY_MAX = 49.18;
const AZ_MIN = -49.339;
const AZ_MAX = 2.95522851438373;
const START_SPEED_MIN = 59;
const START_SPEED_MAX = 104.4;

const NUM_PITCH_CLASSES = 7;
const TRAINING_DATA_LENGTH = 7000;
const TEST_DATA_LENGTH = 700;

// Converts a row from the CSV into features and labels.
// Each feature field is normalized within training data constants
const csvTransform =
    ({xs, ys}) => {
      const values = [
        normalize(xs.vx0, VX0_MIN, VX0_MAX),
        normalize(xs.vy0, VY0_MIN, VY0_MAX),
        normalize(xs.vz0, VZ0_MIN, VZ0_MAX), normalize(xs.ax, AX_MIN, AX_MAX),
        normalize(xs.ay, AY_MIN, AY_MAX), normalize(xs.az, AZ_MIN, AZ_MAX),
        normalize(xs.start_speed, START_SPEED_MIN, START_SPEED_MAX),
        xs.left_handed_pitcher
      ];
      return {xs: values, ys: ys.pitch_code};
    }

const trainingData =
    tf.data.csv(TRAIN_DATA_PATH, {columnConfigs: {pitch_code: {isLabel: true}}})
        .map(csvTransform)
        .shuffle(TRAINING_DATA_LENGTH)
        .batch(100);

// Load all training data in one batch to use for evaluation
const trainingValidationData =
    tf.data.csv(TRAIN_DATA_PATH, {columnConfigs: {pitch_code: {isLabel: true}}})
        .map(csvTransform)
        .batch(TRAINING_DATA_LENGTH);

// Load all test data in one batch to use for evaluation
const testValidationData =
    tf.data.csv(TEST_DATA_PATH, {columnConfigs: {pitch_code: {isLabel: true}}})
        .map(csvTransform)
        .batch(TEST_DATA_LENGTH);

5- إنشاء نموذج لتصنيف أنواع رميات الكرة

أنت الآن جاهز لإنشاء النموذج. استخدِم واجهة برمجة التطبيقات tf.layers لربط المدخلات (شكل قيم مستشعر درجة الصوت [8]) بثلاث طبقات مخفية مكتملة الاتصال تتألف من وحدات تنشيط وحدة خطية مصحَّحة، يليها طبقة نهائية softmax واحدة تتألف من 7 وحدات، يمثّل كل منها أحد أنواع درجات الصوت الناتجة.

درِّب النموذج باستخدام محسِّن آدم ودالة الخسارة sparseCategoricalCrossentropy. لمزيد من المعلومات حول هذه الخيارات، يُرجى الرجوع إلى دليل نماذج التدريب.

أضِف الرمز التالي إلى نهاية ملف pitch_type.js:

const model = tf.sequential();
model.add(tf.layers.dense({units: 250, activation: 'relu', inputShape: [8]}));
model.add(tf.layers.dense({units: 175, activation: 'relu'}));
model.add(tf.layers.dense({units: 150, activation: 'relu'}));
model.add(tf.layers.dense({units: NUM_PITCH_CLASSES, activation: 'softmax'}));

model.compile({
  optimizer: tf.train.adam(),
  loss: 'sparseCategoricalCrossentropy',
  metrics: ['accuracy']
});

ابدأ التدريب من رمز الخادم الرئيسي الذي ستكتبه لاحقًا.

لإكمال الوحدة pitch_type.js، لنكتب دالة لتقييم مجموعة بيانات التحقّق والاختبار، وتوقّع نوع رمية لعيّنة واحدة، واحتساب مقاييس الدقة. أضِف هذا الرمز إلى نهاية الملف pitch_type.js:

// Returns pitch class evaluation percentages for training data
// with an option to include test data
async function evaluate(useTestData) {
  let results = {};
  await trainingValidationData.forEachAsync(pitchTypeBatch => {
    const values = model.predict(pitchTypeBatch.xs).dataSync();
    const classSize = TRAINING_DATA_LENGTH / NUM_PITCH_CLASSES;
    for (let i = 0; i < NUM_PITCH_CLASSES; i++) {
      results[pitchFromClassNum(i)] = {
        training: calcPitchClassEval(i, classSize, values)
      };
    }
  });

  if (useTestData) {
    await testValidationData.forEachAsync(pitchTypeBatch => {
      const values = model.predict(pitchTypeBatch.xs).dataSync();
      const classSize = TEST_DATA_LENGTH / NUM_PITCH_CLASSES;
      for (let i = 0; i < NUM_PITCH_CLASSES; i++) {
        results[pitchFromClassNum(i)].validation =
            calcPitchClassEval(i, classSize, values);
      }
    });
  }
  return results;
}

async function predictSample(sample) {
  let result = model.predict(tf.tensor(sample, [1,sample.length])).arraySync();
  var maxValue = 0;
  var predictedPitch = 7;
  for (var i = 0; i < NUM_PITCH_CLASSES; i++) {
    if (result[0][i] > maxValue) {
      predictedPitch = i;
      maxValue = result[0][i];
    }
  }
  return pitchFromClassNum(predictedPitch);
}

// Determines accuracy evaluation for a given pitch class by index
function calcPitchClassEval(pitchIndex, classSize, values) {
  // Output has 7 different class values for each pitch, offset based on
  // which pitch class (ordered by i)
  let index = (pitchIndex * classSize * NUM_PITCH_CLASSES) + pitchIndex;
  let total = 0;
  for (let i = 0; i < classSize; i++) {
    total += values[index];
    index += NUM_PITCH_CLASSES;
  }
  return total / classSize;
}

// Returns the string value for Baseball pitch labels
function pitchFromClassNum(classNum) {
  switch (classNum) {
    case 0:
      return 'Fastball (2-seam)';
    case 1:
      return 'Fastball (4-seam)';
    case 2:
      return 'Fastball (sinker)';
    case 3:
      return 'Fastball (cutter)';
    case 4:
      return 'Slider';
    case 5:
      return 'Changeup';
    case 6:
      return 'Curveball';
    default:
      return 'Unknown';
  }
}

module.exports = {
  evaluate,
  model,
  pitchFromClassNum,
  predictSample,
  testValidationData,
  trainingData,
  TEST_DATA_LENGTH
}

6. تدريب النموذج على الخادم

اكتب رمز الخادم لتنفيذ تدريب النموذج وتقييمه في ملف جديد باسم server.js. أولاً، أنشئ خادم HTTP وافتح اتصالاً ثنائي الاتجاه باستخدام واجهة برمجة التطبيقات socket.io. بعد ذلك، نفِّذ تدريب النموذج باستخدام واجهة برمجة التطبيقات model.fitDataset، وقيِّم دقة النموذج باستخدام الطريقة pitch_type.evaluate() التي كتبتها سابقًا. تدريب النموذج وتقييمه لمدة 10 تكرارات، وطباعة المقاييس في وحدة التحكّم

انسخ الرمز أدناه إلى ملف server.js:

require('@tensorflow/tfjs-node');

const http = require('http');
const socketio = require('socket.io');
const pitch_type = require('./pitch_type');

const TIMEOUT_BETWEEN_EPOCHS_MS = 500;
const PORT = 8001;

// util function to sleep for a given ms
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Main function to start server, perform model training, and emit stats via the socket connection
async function run() {
  const port = process.env.PORT || PORT;
  const server = http.createServer();
  const io = socketio(server);

  server.listen(port, () => {
    console.log(`  > Running socket on port: ${port}`);
  });

  io.on('connection', (socket) => {
    socket.on('predictSample', async (sample) => {
      io.emit('predictResult', await pitch_type.predictSample(sample));
    });
  });

  let numTrainingIterations = 10;
  for (var i = 0; i < numTrainingIterations; i++) {
    console.log(`Training iteration : ${i+1} / ${numTrainingIterations}`);
    await pitch_type.model.fitDataset(pitch_type.trainingData, {epochs: 1});
    console.log('accuracyPerClass', await pitch_type.evaluate(true));
    await sleep(TIMEOUT_BETWEEN_EPOCHS_MS);
  }

  io.emit('trainingComplete', true);
}

run();

في هذه المرحلة، تكون جاهزًا لتشغيل الخادم واختباره. من المفترض أن يظهر لك ما يلي، مع تدريب الخادم على حقبة واحدة في كل تكرار (يمكنك أيضًا استخدام واجهة برمجة التطبيقات model.fitDataset لتدريب حقب متعددة بمكالمة واحدة). إذا واجهت أي أخطاء في هذه المرحلة، يُرجى التحقّق من العقدة وتثبيت npm.

$ npm run start-server
...
  > Running socket on port: 8001
Epoch 1 / 1
eta=0.0 ========================================================================================================>
2432ms 34741us/step - acc=0.429 loss=1.49

اكتب Ctrl-C لإيقاف الخادم الذي يتم تشغيله. سننفّذها مرة أخرى في الخطوة التالية.

7. إنشاء صفحة العميل وعرض الرمز

بعد أن يصبح الخادم جاهزًا، الخطوة التالية هي كتابة رمز العميل الذي يتم تشغيله في المتصفح. أنشئ صفحة بسيطة لاستدعاء توقّع النموذج على الخادم وعرض النتيجة. يستخدم هذا التطبيق socket.io للتواصل بين العميل والخادم.

أولاً، أنشئ ملف index.html في المجلد baseball/:

<!doctype html>
<html>
  <head>
    <title>Pitch Training Accuracy</title>
  </head>
  <body>
    <h3 id="waiting-msg">Waiting for server...</h3>
    <p>
    <span style="font-size:16px" id="trainingStatus"></span>
    <p>
    <div id="predictContainer" style="font-size:16px;display:none">
      Sensor data: <span id="predictSample"></span>
      <button style="font-size:18px;padding:5px;margin-right:10px" id="predict-button">Predict Pitch</button><p>
      Predicted Pitch Type: <span style="font-weight:bold" id="predictResult"></span>
    </div>
    <script src="dist/bundle.js"></script>
    <style>
      html,
      body {
        font-family: Roboto, sans-serif;
        color: #5f6368;
      }
      body {
        background-color: rgb(248, 249, 250);
      }
    </style>
  </body>
</html>

بعد ذلك، أنشئ ملفًا جديدًا باسم client.js في مجلد baseball/ باستخدام الرمز البرمجي أدناه:

import io from 'socket.io-client';
const predictContainer = document.getElementById('predictContainer');
const predictButton = document.getElementById('predict-button');

const socket =
    io('http://localhost:8001',
       {reconnectionDelay: 300, reconnectionDelayMax: 300});

const testSample = [2.668,-114.333,-1.908,4.786,25.707,-45.21,78,0]; // Curveball

predictButton.onclick = () => {
  predictButton.disabled = true;
  socket.emit('predictSample', testSample);
};

// functions to handle socket events
socket.on('connect', () => {
    document.getElementById('waiting-msg').style.display = 'none';
    document.getElementById('trainingStatus').innerHTML = 'Training in Progress';
});

socket.on('trainingComplete', () => {
  document.getElementById('trainingStatus').innerHTML = 'Training Complete';
  document.getElementById('predictSample').innerHTML = '[' + testSample.join(', ') + ']';
  predictContainer.style.display = 'block';
});

socket.on('predictResult', (result) => {
  plotPredictResult(result);
});

socket.on('disconnect', () => {
  document.getElementById('trainingStatus').innerHTML = '';
  predictContainer.style.display = 'none';
  document.getElementById('waiting-msg').style.display = 'block';
});

function plotPredictResult(result) {
  predictButton.disabled = false;
  document.getElementById('predictResult').innerHTML = result;
  console.log(result);
}

يتعامل التطبيق مع رسالة مقبس trainingComplete لعرض زر التوقّع. عند النقر على هذا الزر، يرسل العميل رسالة مقبس تتضمّن عيّنات من بيانات جهاز الاستشعار. عند تلقّي رسالة predictResult، يعرض التوقّع على الصفحة.

8. تشغيل التطبيق

شغِّل كلاً من الخادم والعميل للاطّلاع على التطبيق الكامل أثناء عمله:

[In one terminal, run this first]
$ npm run start-client

[In another terminal, run this next]
$ npm run start-server

افتح صفحة العميل في المتصفّح ( http://localhost:8080). عند انتهاء تدريب النموذج، انقر على الزر توقّع العيّنة. من المفترض أن تظهر لك نتيجة التوقّع في المتصفّح. يمكنك تعديل بيانات جهاز الاستشعار النموذجية باستخدام بعض الأمثلة من ملف CSV التجريبي ومعرفة مدى دقة توقّع النموذج.

9- ما تعلّمته

في هذا الدرس التطبيقي حول الترميز، نفّذت تطبيق ويب بسيطًا يعتمد على تعلُّم الآلة باستخدام TensorFlow.js. لقد درّبت نموذجًا مخصّصًا لتصنيف أنواع رميات البيسبول من بيانات جهاز الاستشعار. لقد كتبت رمز Node.js لتنفيذ التدريب على الخادم، واستدعاء الاستدلال على النموذج المدرَّب باستخدام البيانات المرسَلة من العميل.

احرص على زيارة tensorflow.org/js للاطّلاع على المزيد من الأمثلة والعروض التوضيحية مع الرموز البرمجية لمعرفة كيفية استخدام TensorFlow.js في تطبيقاتك.