TensorFlow.js: استخدام استضافة Firebase لنشر نموذج تعلم الآلة واستضافتها على نطاق واسع

1. مقدمة

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

التطبيق الذي ستصممه

في هذا الدرس التطبيقي حول الرموز البرمجية، ستنشئ نظامًا كاملاً شاملاً قادرًا على استضافة نموذج TensorFlow.js محفوظ مخصّص وتشغيله مع مواد العرض ذات الصلة، مثل HTML وCSS وJavaScript. سننشئ نموذجًا بسيطًا وخفيفًا جدًا يمكنه توقّع قيمة ناتجة رقمية استنادًا إلى بعض قيم الإدخال (مثل سعر منزل معيّن استنادًا إلى مساحته المربعة)، وسنستضيفه من خلال ميزة "استضافة Firebase" حتى يمكن استخدامه على نطاق واسع.

ما ستتعرّف عليه

• كيفية حفظ نموذج TensorFlow.js مخصّص بالتنسيق الصحيح
• كيفية إعداد حساب Firebase للاستضافة
• كيفية نشر مواد العرض في Firebase Hosting
• كيفية نشر إصدارات جديدة من نموذج

يُرجى العِلم أنّ تركيز هذا البرنامج التدريبي على الرموز البرمجية هو كيفية استخدام نموذج مُدرَّب مخصّص واستضافته للنشر، بدلاً من تقديم دورة تدريبية حول إنشاء بنية النموذج المثالية، لذلك سننتقل بسرعة إلى إنشاء نموذج تعلُّم الآلة نفسه باستخدام مثال بسيط. ستظل المبادئ نفسها سارية بغض النظر عن النموذج الذي تنشئه بنفسك.

مشاركة أعمالك معنا

إذا أنشأت شيئًا رائعًا باستخدام هذه الحزمة، يُرجى إعلامنا بذلك. يسرّنا الاطّلاع على إبداعاتك.

يمكنك الإشارة إلينا على وسائل التواصل الاجتماعي باستخدام هاشتاغ ‎#MadeWithTFJS للحصول على فرصة لعرض مشروعك على مدوّنة TensorFlow أو حتى في فعاليات مستقبلية، مثل العروض التوضيحية.

2. ما هي خدمة "استضافة Firebase"؟

يوفّر استضافة Firebase خدمة استضافة سريعة وآمنة ومناسبة للإنتاج لتطبيق الويب والمحتوى الثابت / الديناميكي والخدمات المصغرة.

باستخدام أمر واحد، يمكنك نشر تطبيقات الويب بسرعة وعرض المحتوى على شبكة توصيل محتوى (CDN) عالمية، ما يضمن توفّر المحتوى مع وقت استجابة منخفض في أي مكان تقريبًا. يمكنك أيضًا إقران ميزة "استضافة Firebase" مع وظائف السحابة الإلكترونية أو Cloud Run من Firebase لإنشاء خدمات صغيرة واستضافتها أيضًا، ولكنّ ذلك خارج نطاق هذا الدليل التعليمي.

الميزات الرئيسية لخدمة "استضافة Firebase"

• عرض المحتوى من خلال اتصال آمن: الويب الحديث آمن. في أغلب الأحيان، يجب عرض الموقع الإلكتروني من خلال سياق آمن للوصول إلى أجهزة الاستشعار من جهة العميل. تم دمج بروتوكول SSL بدون إعدادات في Firebase Hosting، لذلك يتم دائمًا عرض المحتوى بأمان لجميع الملفات المستضافة.
• استضافة محتوى ثابت وديناميكي بالإضافة إلى خدمات صغيرة مع إتاحة المصادقة حتى لا يتمكّن سوى المستخدمين الذين سجّلوا الدخول من تحميل هذه الملفات أو عرضها إذا لزم الأمر
• عرض المحتوى بسرعة: يتم تخزين كل ملف تحمّله مؤقتًا في وحدات تخزين الحالة الصلبة (SSD) في نقاط اتصال شبكة توصيل المحتوى (CDN) حول العالم. يتم عرض المحتوى بسرعة بغض النظر عن مكان تواجد المستخدمين.
• نشر إصدارات جديدة باستخدام أمر واحد: باستخدام واجهة سطر أوامر Firebase، يمكنك إعداد تطبيقك وتشغيله في ثوانٍ.
• التراجع بنقرة واحدة: إنّ عمليات النشر السريعة رائعة، ولكنّ إمكانية التراجع عن الأخطاء أفضل. يوفّر Firebase Hosting إدارة إصدارات وإصدارات كاملة من خلال عمليات التراجع بنقرة واحدة.

سواء كنت بصدد نشر صفحة مقصودة بسيطة للتطبيق أو تطبيق ويب تقدّمي (PWA) معقّد، يوفّر لك "استضافة Google" البنية الأساسية والميزات والأدوات المخصّصة لنشر المواقع الإلكترونية والتطبيقات وإدارتها.

يتضمّن كل مشروع على Firebase تلقائيًا نطاقات فرعية مجانية على النطاقَين web.app وfirebaseapp.com. يعرض هذان الموقعان الإلكترونيان المحتوى والإعدادات المُنفَّذَين نفسهما. يمكنك أيضًا ربط اسم نطاقك بموقع إلكتروني مستضاف على Firebase إذا أردت ذلك.

خطوات التنفيذ

• إعداد مشروع
• تثبيت واجهة سطر أوامر Firebase وضبطها
• نشر موقعك الإلكتروني
• رابط إلى تطبيق Firebase على الويب من أجل مراقبة الأداء (اختياري)

ولكن قبل أن نتمكّن من إجراء أيّ من هذه الإجراءات، نحتاج إلى نموذج تعلُّم آلي وتطبيق ويب لنشره. لننشئ إذًا حملة.

3- نموذج بسيط لتعلُّم الآلة من أجل توقّع أسعار المنازل

لأغراض هذا التمرين، سننشئ نموذج تعلُّم آلي بسيطًا جدًا يتنبأ بالقيم الرقمية. سنحاول استخدام تعلُّم الآلة للتنبؤ بقيمة منزل خيالي استنادًا إلى مساحته بالقدم المربّع لأغراض توضيحية فقط. في الواقع، في هذا العرض التوضيحي، سنضرب مساحة المنزل بمتر مربع في 1, 000 مرة للحصول على القيمة المتوقّعة لبيانات التدريب، ولكن سيحتاج تعلُّم الآلة إلى تعلُّم ذلك بنفسه.

في الواقع، ستختار استخدام بيانات من العالم الحقيقي قد تكون لها علاقات أكثر تعقيدًا (على سبيل المثال، قد يكون حجم المنازل الأصغر حجمًا 500 ضعفًا فقط لتقدير القيمة بالدولار الأمريكي، ولكن بعد حدّ معيّن، يصبح تدريجيًا 1000 ضعفًا وما إلى ذلك)، وقد تحتاج إلى نموذج أكثر تقدّمًا لمعرفة أفضل طريقة لتوقع هذه القيم.

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

بيانات التدريب والاختبار

تبدأ جميع نماذج تعلُّم الآلة بالحصول على بعض أمثلة بيانات التدريب التي يمكننا استخدامها لتعليم النموذج حتى يتمكّن من توقّع القيم في المستقبل. يمكنك عادةً الحصول على هذه البيانات من قاعدة بيانات أو مجلد ملفات أو ملف CSV أو أكثر، ولكن سنضع هنا 20 مثالاً مباشرةً في JavaScript كصفيف كما هو موضّح أدناه. ننصحك بنسخ هذا الرمز في بيئة ترميز تناسبك في الوقت الحالي، مثل Glitch.com، أو في محرِّر النصوص على جهازك إذا كان بإمكانك تشغيل خادم على المضيف المحلي.

model.js

// House square footage.
const data =    [800, 850, 900, 950, 980, 1000, 1050, 1075, 1100, 1150, 1200, 1250, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000];

// Estimated dollar cost of house for each piece of data above (1000x square footage).
const answers = [800000, 850000, 900000, 950000, 980000, 1000000, 1050000, 1075000, 1100000, 1150000, 1200000,  1250000 , 1300000, 1400000, 1500000, 1600000, 1700000, 1800000, 1900000, 2000000];

// Testing data separate from training data.
const dataTest =     [886, 1225, 500];
const answersTest =  [886000, 1225000, 500000];

كما يمكنك أن ترى، لكل قطعة بيانات لدينا قيمة إجابة مقابلة وهي القيمة التي سنحاول التنبؤ بها في المستقبل (يمكنك تخيل هذه القيم على أنّها قيم x وy في رسم بياني بسيط ثنائي الأبعاد).

وبالتالي، بالنسبة إلى القيمة 800، نريد إنشاء إجابة ناتجة مقدَّرة تبلغ 800,000 دولار أمريكي. بالنسبة إلى القيمة 900، سنعرض 900,000 دولار أمريكي، وهكذا. يتم ضرب الرقم في 1000 بشكل أساسي. ومع ذلك، لا يعرف نموذج تعلُّم الآلة هذه العلاقة البسيطة التي تبلغ 1000 * N، ويجب أن يتعلمها بنفسه من خلال هذه الأمثلة التي نقدّمها.

يُرجى ملاحظة أنّ لدينا أيضًا بعض بيانات الاختبار المنفصلة تمامًا عن بيانات التدريب. يتيح لنا ذلك تقييم النموذج المدَّرب لمعرفة مدى جودة أدائه على البيانات التي لم يسبق له الاطّلاع عليها.

سنحمِّل هذا النص البرمجي مع مكتبة TensorFlow.js باستخدام لغة HTML التالية:

train.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Training Model</title>
    <meta charset="utf-8">
  </head>  
  <body>   
    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
    <!-- Import our JS code to train the model -->
    <script src="/model.js" defer></script>
  </body>
</html>

تدريب النموذج

بعد ذلك، حان وقت تدريب النموذج من خلال إضافة الرمز البرمجي أدناه إلى رمز JavaScript الحالي أعلاه في نهاية الملف.

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

model.js

// Create Tensor representations of our vanilla JS arrays above 
// so can be used to train our model.
const trainTensors = {
  data: tf.tensor2d(data, [data.length, 1]),
  answer: tf.tensor2d(answers, [answers.length, 1])
};

const testTensors = {
  data: tf.tensor2d(dataTest, [dataTest.length, 1]),
  answer: tf.tensor2d(answersTest, [answersTest.length, 1])
};


// Now actually create and define model architecture.
const model = tf.sequential();

// We will use one dense layer with 1 neuron and an input of 
// a single value.
model.add(tf.layers.dense({inputShape: [1], units: 1}));

// Choose a learning rate that is suitable for the data we are using.
const LEARNING_RATE = 0.0001;

train();

async function train() {
  // Compile the model with the defined learning rate and specify
  // our loss function to use.
  model.compile({
    optimizer: tf.train.sgd(LEARNING_RATE),
    loss: 'meanAbsoluteError'
  });

  // Finally do the training itself over 500 iterations of the data.
  // As we have so little training data we use batch size of 1.
  // We also set for the data to be shuffled each time we try 
  // and learn from it.
  let results = await model.fit(trainTensors.data, trainTensors.answer, {epochs: 500, batchSize: 1, shuffle: true});
  
  // Once trained we can evaluate the model.
  evaluate();
}

async function evaluate(stuff) {
  // Predict answer for a single piece of data.
  model.predict(tf.tensor2d([[768]])).print();
}

باستخدام الرمز أعلاه، تمكّنا من تدريب نموذج قادر على توقّع قيمة الإخراج استنادًا إلى قيمة الإدخال. عند تشغيل الرمز أعلاه، أحصل على توقّع بقيمة 768,073 لقيمة الإدخال 768 التي يتم طباعتها في وحدة تحكّم المطوّر في المتصفّح (اضغط على F12 لفتحها إذا لم تكن مفتوحة). هذا تقدير جيد جدًا لسعر المنزل، نظرًا لأنّنا قدّمنا أمثلة أعلى بـ 1,000 مرة من الإدخال. ملاحظة: قد تختلف القيمة المتوقّعة قليلاً، وهذا أمر طبيعي.

إذا كان هذا الأداء يرضينا، ما علينا سوى حفظ هذا النموذج على القرص لنتمكّن من تحميله إلى "استضافة Firebase".

حفظ النموذج

تسمح لنا إضافة الرمز أدناه إلى نهاية دالة التقييم (بعد model.predict) أعلاه بتصدير النموذج الناتج بعد اكتمال التدريب مباشرةً من متصفّح الويب وحفظه على القرص حتى نتمكّن من استضافته في مكان ما واستخدامه في المستقبل بدون الحاجة إلى إعادة التدريب في كل مرة نحمّل فيها الصفحة.

model.js

await model.save('downloads://my-model');

إذا انتقلت الآن إلى train.html وشغّلت الصفحة، من المفترض أن يتم تدريب النموذج (قد يستغرق ذلك بضع ثوانٍ)، ثم سيُطلب منك تنزيل النموذج الذي تم تدريبه بعد اكتمال العملية.

ملاحظة: إذا كانت هذه هي المرة الأولى التي تحاول فيها حفظ ملفات في متصفّح الويب، قد يُطلب منك إذن لتنزيل ملفات متعددة:

ما عليك سوى النقر على "السماح" من النافذة المنبثقة هذه قبل تنزيل الملفات، لأنّه سيُطلب منك حفظ عدة ملفات. تُنشئ دالة الحفظ في TensorFlow.js بعض الملفات:

• my-model.json
• my-model.weights.bin (قد يكون هناك أكثر من ملف واحد من هذا النوع إذا كان حجم ملف النموذج كبيرًا، ولكن في مثالنا البسيط سيكون هناك ملف واحد فقط).

في حال عدم منح هذا الإذن، قد يحظر المتصفّح حفظ ملفات متعددة.

4. إعداد Firebase

تسجيل الدخول إلى Firebase وإنشاء مشروع

إذا كنت مستخدِمًا جديدًا في Firebase، يمكنك الاشتراك بسهولة باستخدام حسابك على Google. ما عليك سوى الانتقال إلى https://firebase.google.com/ وتسجيل الدخول باستخدام حسابك العادي على Google الذي تريد استخدامه. بعد إعادة توجيهك إلى الصفحة الرئيسية، انقر على "الانتقال إلى وحدة التحكّم" في أعلى يسار الصفحة:

بعد إعادة توجيهك إلى وحدة التحكّم، من المفترض أن تظهر لك صفحة مقصودة على النحو التالي:

ما عليك سوى النقر على "إضافة مشروع" كما هو موضّح لإنشاء مشروع جديد على Firebase، ومنح مشروعك اسمًا فريدًا، وقبول البنود، والنقر على "متابعة".

بعد ذلك، سيُطلب منك تحديد ما إذا كنت تريد إضافة إحصاءات إلى مشروعك. إذا أردت الوصول إلى هذه الإحصاءات، يمكنك تفعيل هذا الخيار والنقر على "متابعة" كما هو موضّح:

ملاحظة: قد يُطلب منك قبول بنود "إحصاءات Google" في الصفحة التالية. إذا كان الأمر كذلك، يُرجى قراءتها وقبولها على النحو المطلوب ثم المتابعة.

إذا سارت الأمور على ما يرام، من المفترض أن تظهر لك صفحة "المشروع جاهز" كما هو موضّح أدناه:

رائع! لدينا مشروع. انقر على "متابعة" للانتقال إلى وحدة تحكّم المشروع الذي تم إنشاؤه حديثًا. يُرجى إبقاء الصفحة مفتوحة لاستخدامها لاحقًا، ولكن علينا الآن تثبيت بعض الأدوات.

تثبيت واجهة سطر الأوامر وربطها

تتوفّر Firebase كحزمة Node NPM يمكنك تثبيتها واستخدامها من خلال واجهة سطر الأوامر (CLI)، ما يسهّل نشر ملفاتك ومجلداتك المحلية على "استضافة Firebase". في الدليل التعليمي اليوم، سنستخدم بيئة Linux، ولكن إذا كان لديك جهاز يعمل بنظام التشغيل Windows أو Mac، يمكنك اتّباع التعليمات الواردة هنا لإعداد أدوات سطر الأوامر على جهازك.

تحذير: بغض النظر عن نظام التشغيل الذي تستخدمه، عليك استخدام الإصدار 8.13.0 من Node أو إصدار أحدث على الأقل. إذا كان لديك Node من عملية تثبيت قديمة، قد تحتاج إلى ترقيته لتتمكّن من تنفيذ عملية تثبيت firebase-tools بشكل صحيح.

في نظام التشغيل Linux، سنثبّت أولاً NPM وNode.js إذا لم يكنا مثبّتَين (اتّبِع هذه التعليمات في حال استخدام بيئات أخرى) باستخدام الأوامر الثلاثة التالية في نافذة طرفية:

وحدة تحكّم سطر الأوامر:

sudo apt update

وحدة تحكّم سطر الأوامر:

sudo apt install nodejs

وحدة تحكّم سطر الأوامر:

sudo apt install npm

بعد تثبيت Node.js وNPM، ما عليك سوى تنفيذ ما يلي في نافذة طرفية لتثبيت أدوات سطر أوامر Firebase:

وحدة تحكّم سطر الأوامر:

sudo npm install -g firebase-tools

رائع! نحن الآن جاهزون لربط مشروع Firebase بنظامنا حتى نتمكّن من تحميل الملفات إليه وغير ذلك.

تسجيل الدخول إلى Firebase

سجِّل الدخول إلى Firebase باستخدام حسابك على Google من خلال تنفيذ الأمر التالي:

وحدة تحكّم سطر الأوامر:

firebase login

تحذير: بعد بضع ثوانٍ، سيتم فتح متصفّح الويب لطلب منك تسجيل الدخول إلى Firebase ومنح إذن الوصول إلى مشاريعك على Firebase. إذا لم تظهر النافذة المنبثقة من تلقاء نفسها، قد تحتاج إلى نسخ الرابط المعروض في نافذة المحطة الطرفية أو النقر عليه. بعد فتح الرابط، ما عليك سوى تسجيل الدخول إذا لم يسبق لك ذلك ومنح إذن الوصول إلى Firebase لكي تعمل الأدوات بشكل صحيح.

سيُطلب منك منح إذن الوصول إلى حسابك على Google Firebase كما هو موضّح:

اسمح بذلك، ومن المفترض أن تظهر لك أخيرًا عملية ربط ناجحة لأدوات سطر الأوامر بحسابك على Firebase:

أغلِق النافذة وانتقِل إلى وحدة الطرفية لسلسلة الأوامر التي كنت تكتب فيها سابقًا، والتي من المفترض أن تكون جاهزة الآن لقبول أوامر جديدة كما هو موضّح (لقد أخفينا أي معلومات خاصة في لقطة الشاشة):

تهانينا! نحن الآن جاهزون لإرسال الملفات إلى المشروع الذي أنشأناه من جهازنا المحلي.

إعداد مشروعك للنشر على "استضافة Firebase"

لربط المجلد المحلي بمشروعك على Firebase، شغِّل الأمر التالي من جذر دليل المشروع المحلي (المجلد الذي تريد استخدامه لتحميل الملفات منه عند نشرها).

وحدة تحكّم سطر الأوامر:

firebase init

بعد تنفيذ هذا الأمر، ما عليك سوى اتّباع التعليمات في الوحدة الطرفية لإكمال عملية الإعداد كما هو موضّح أدناه:

هنا يمكننا ببساطة اختيار "استضافة" باستخدام السهم المتّجه للأسفل على لوحة المفاتيح، ثم الضغط على مفتاح المسافة للاختيار، ثم مفتاح Enter للتأكيد.

يمكننا الآن اختيار المشروع الحالي الذي أنشأناه سابقًا لاستخدامه:

اضغط على مفتاح Enter في "استخدام مشروع حالي"، ثم اختَره باستخدام مفتاح السهم المتّجه للأسفل كما هو موضّح أدناه:

أخيرًا، اضغط على مفتاح Enter لاستخدامه، ثم اقبل الإعدادات التلقائية على الشاشة النهائية التي تظهر لك، وقُل "لا" لضبطه كتطبيق صفحة واحدة:

سيتيح لك ذلك استضافة صفحات html متعددة إذا اخترت ذلك.

بعد اكتمال عملية الإعداد، ستلاحظ أنّه تم إنشاء ملف firebase.json والمجلد "public" في الدليل الذي نفّذنا الأوامر أعلاه منه.

كل ما علينا فعله الآن هو نقل الملفات التي نريد نشرها إلى المجلد العام الذي أنشأناه، وسيكون من الجيد نشرها. لنفعل ذلك الآن.

5- إنشاء صفحة الويب TensorFlow.js

تحميل النموذج المحفوظ

أولاً، لنحرص على نسخ نموذج تعلُّم الآلة الذي حفظناه في وقت سابق في ورشة رموز البرامج إلى المجلد العام الذي أنشأناه للتو باستخدام Firebase. ما عليك سوى سحب الملفات المحفوظة وإفلاتها في هذا المجلد كما هو موضَّح:

ستلاحظ أيضًا أنّ Firebase أنشأت الملفَين index.html و404.html نيابةً عنا. لنبدأ بتعديل ملف index.html باستخدام محرِّر النصوص المفضّل لديك على جهازك حتى نتمكّن من إضافة الرمز المخصّص الخاص بنا كما هو موضّح:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World - TensorFlow.js</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Import the webpage's stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>  
  <body>
    <h1>TensorFlow.js Hello World</h1>
    <p>Check the console (Press F12) to see predictions!</p>
    <!-- Import TensorFlow.js library -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>

    <!-- Import the page's JavaScript to do some stuff -->
    <script src="script.js" defer></script>
  </body>
</html>

في الرمز البرمجي الجديد لملف index.html أعلاه، نحدّد جدول أسلوب حتى نتمكّن من إضافة أسلوب إلى صفحتنا لاحقًا إذا اخترنا إجراء ذلك، بالإضافة إلى script.js لاستضافة الرمز البرمجي الذي نحتاج إلى كتابته لاستخدام النموذج المحفوظ في TensorFlow.js.

لنبدأ الآن في إنشاء هذين الملفَّين وملؤهما على النحو التالي لكي يكونا مفيدين:

style.css

/** Leave blank for now **/

script.js

// Load our saved model from current directory (which will be 
// hosted via Firebase Hosting)
async function predict() {
  // Relative URL provided for my-model.json.
  const model = await tf.loadLayersModel('my-model.json');
  // Once model is loaded, let's try using it to make a prediction!
  // Print to developer console for now.
  model.predict(tf.tensor2d([[1337]])).print();
}

predict();

إذا اتّبعت الخطوات بشكلٍ صحيح، من المفترض أن تظهر لك الآن الملفات المعدَّلة التالية في المجلد العلني الذي أنشأناه:

ما علينا سوى نشر ملفاتنا لنتأكّد من أنّها تعمل على ما يرام.

6- نشر النموذج والموقع الإلكتروني

بدء البث المباشر

ارجع إلى نافذة المحطة الطرفية التي فتحتها في مجلد مشروع Firebase على جهازك المحلي (هذا هو المجلد الذي يحتوي على مجلد "public" أعلاه بالإضافة إلى ملفات init في Firebase).

ما عليك سوى كتابة ما يلي لنشر ملفات المجلدات العلنية:

وحدة تحكّم سطر الأوامر:

firebase deploy

انتظر حتى يكتمل أمر المحطة الطرفية، ومن المفترض أن يكون لديك إصدار ناجح مكتمل مع عنوان URL الذي يمكنك استخدامه:

في المثال أعلاه، يمكنك الاطّلاع على عنوان URL النهائي لعرض عملية النشر على النحو التالي:

https://tensorflow-js-demo.web.app (لكن عنوان URL سيكون اسم المشروع الذي أنشأته).

افتح عنوان URL هذا في متصفّح ويب للتحقّق من أنّه يعمل، وإذا كان الأمر كذلك، من المفترض أن يتم طباعة رسالة مشابهة لهذه الرسالة في وحدة تحكّم المطوّر للصفحة التي تفتح (اضغط على F12 لفتح وحدة تحكّم المطوّر).

كما يمكنك أن ترى، يتم تحميل الصفحة على النطاق الذي تم نشره، ويمكننا أن نرى بشكل صحيح توقّعات النموذج التي تبلغ 1337 قدمًا مربعًا، ما ينتج عنه 1,336,999.25 دولار أمريكي، وهو تقدير جيد جدًا في الواقع لأنّنا كنا نتوقع أن يكون هذا الرقم 1,000 ضعف القدم المربّع. يمكننا بالطبع إجراء أي عدد نريده من التوقّعات إذا أنشأنا واجهة مستخدم رائعة لاستدعاء النموذج بدلاً من ذلك، وسيتم تنفيذ كل ذلك بالكامل باستخدام JavaScript مع الحفاظ على خصوصية طلبات البحث وأمانها.

ملاحظة: ما عليك سوى تحميل النموذج مرة واحدة في JavaScript عند تحميل الصفحة، ويمكنك بعد ذلك استدعاء model.predict باستخدام بيانات إدخال مختلفة بقدر ما تريد.

بعد نشر النموذج واستضافته، يمكنك مشاركة الموقع الإلكتروني مع أي مستخدم في العالم، وسيكون بإمكانه استخدام تطبيقك على جهازه. من الواضح أنّك قد تحتاج إلى إضافة واجهة مستخدم أفضل وجعلها تبدو رائعة، ولكن هذا الأمر خارج نطاق هذا الدليل التعليمي. لا حدود لعدد تطبيقات الويب التي يمكنك استضافتها باستخدام تقنية تعلُّم الآلة، والتي يمكن أن تعمل بنقرة واحدة بدون الحاجة إلى تثبيت أي تطبيق. وننصحك بالتفكير في مواقف أخرى يمكن أن تستفيد من نموذج تعلُّم الآلة في المتصفّح.

مراقبة الاستخدام

بالإضافة إلى أيّ إحصاءات من "إحصاءات Google" يمكنك إضافتها إلى رمز موقعك الإلكتروني، يوفّر Firebase أيضًا إحصاءات عن الإصدارات واستخدامها من خلال وحدة التحكّم في مشروعك. بعد النشر، ستظهر لك رسالة مماثلة يمكنك الاطّلاع عليها من حين لآخر حسب الحاجة:

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

7- تهانينا

مبروك، لقد اتخذت خطواتك الأولى في استخدام TensorFlow.js مع Firebase لإنشاء نموذج تعلُّم آلي مخصّص ونشره حتى تتمكّن من مشاركته مع العالم. تخيل كل الأشياء الأخرى التي يمكنك إنشاؤها باستخدام هذا النهج القوي والمرنة الذي يكون جاهزًا لاستخدامه في حالات الاستخدام في مرحلة الإنتاج إذا أردت ذلك، لأنّ Firebase يتم توسيع نطاقه تلقائيًا حسب الطلب، لذا بغض النظر عمّا إذا كان 10 أو 10,000 مستخدم يريدون استخدام هذا النهج، سيعمل ببساطة.

في حال تغيير أي من ملفاتك، ما عليك سوى إعادة نشر تطبيقك باستخدام أداة firebase deploy كما في السابق والتأكّد من محو ذاكرة التخزين المؤقت للمتصفّح لضمان حصولك على الإصدار الجديد من الملفات عند تحميل الصفحة في المرة التالية. إذا كانت أدوات المطوّرين مفتوحة، يمكنك فرض ذلك ضمن علامة التبويب "الشبكة" أثناء اختبار العناصر لتسهيل الأمر من خلال وضع علامة في مربّع الاختيار "إيقاف ذاكرة التخزين المؤقت" بالقرب من أعلى علامة التبويب هذه:

ملخّص

في هذا البرنامج التعليمي حول الرموز البرمجية، سننفّذ ما يلي:

1. تحديد وتدريب نموذج TensorFlow.js مخصّص من الصفر تمامًا للتنبؤ بأسعار المنازل
2. اشتركت في Firebase وFirebase CLI وضبطتهما وثبّتهما على جهاز التطوير.
3. تم نشر موقع إلكتروني صالح وإطلاقه، وهو يحمّل النموذج الذي تم تدريبه من الخطوة 1 ويستخدمه في تطبيق ويب واقعي يمكن لأي شخص الوصول إليه على نطاق واسع في أي مكان في العالم.

الخطوة التالية

الآن بعد أن أصبحت لديك قاعدة عمل للبدء منها، ما هي الأفكار الإبداعية التي يمكنك ابتكارها لتوسيع نطاق نموذج نص النموذج الجاهز لنشر نماذج تعلُّم الآلة؟

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

ننصحك بالإشارة إلينا في أي محتوى تنشئه باستخدام #MadeWithTFJS (انقر على هذا الرابط للاطّلاع على أفكار من إنشاء مستخدمين آخرين) للحصول على فرصة الظهور على وسائل التواصل الاجتماعي أو حتى عرض المحتوى في أحداث TensorFlow المستقبلية. يسرّنا معرفة ما ستنشئه، ويمكنك بالطبع التواصل مع مؤلف هذا الدليل التعليمي للبرمجة إذا كانت لديك أي ملاحظات أو أسئلة.

المزيد من الدروس التطبيقية حول TensorFlow.js للتعمّق أكثر

• كتابة شبكة عصبية من الصفر في TensorFlow.js
• التعرّف على الصوت باستخدام ميزة "التعلم التحويلي" في TensorFlow.js
• تصنيف الصور المخصّص باستخدام ميزة التعلّم التحويلي في TensorFlow.js

المواقع الإلكترونية التي يمكنك الاطّلاع عليها

• الموقع الإلكتروني الرسمي لخدمة TensorFlow.js
• النماذج الجاهزة في TensorFlow.js
• TensorFlow.js API
• العروض التوضيحية لاستخدام TensorFlow.js