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

1. مقدمة

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

ما ستنشئه

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

ما ستتعلمه

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

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

مشاركة المحتوى الذي تصنعه معنا

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

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

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

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

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

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

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

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

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

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

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

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

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

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

في الواقع، يمكنك اختيار استخدام بيانات من العالم الحقيقي قد تتضمّن علاقات أكثر تعقيدًا (على سبيل المثال، قد تكون قيمة المنازل الصغيرة 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 لفتحها إذا لم تكن مفتوحة). هذا تقدير جيد جدًا لسعر المنزل، علمًا بأنّنا قدّمنا أمثلة أعلى من المدخلات بمقدار 1000 مرة. ملاحظة: قد تختلف القيمة المتوقّعة قليلاً، وهذا أمر طبيعي.

إذا كنّا راضين عن هذا الأداء، كل ما علينا فعله الآن هو حفظ هذا النموذج على القرص حتى نتمكّن من تحميله إلى "استضافة 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، وإعطاء مشروعك اسمًا فريدًا، وقبول البنود، ثم النقر على "متابعة".

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

ملاحظة: قد يُطلب منك قبول بنود التحليلات في الصفحة التالية. وفي حال حدوث ذلك، اقرأ البنود واقبلها حسب الرغبة ثم تابِع.

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

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

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

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

تنبيه: بغض النظر عن نظام التشغيل الذي تستخدمه، عليك استخدام الإصدار Node v8.13.0 أو إصدار أحدث. إذا كان لديك 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 لاستخدامه، ثم اقبل الإعدادات التلقائية على الشاشة النهائية التي تظهر واكتب "No" لضبطه كتطبيق من صفحة واحدة:

سيتيح لك ذلك استضافة صفحات 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" أعلاه بالإضافة إلى ملفات firebase init).

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

نافذة سطر الأوامر:

firebase deploy

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

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

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

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

كما ترى، يتم تحميل الصفحة على النطاق الذي تم نشره، ويمكننا بشكل صحيح رؤية توقعات النموذج لمساحة 1337 قدم مربع، والتي تبلغ قيمتها 1,336,999.25 دولار أمريكي، وهو تقدير جيد جدًا في الواقع لأننا كنا نتوقع أن تكون القيمة 1000 مرة من مساحة القدم المربع. يمكننا بالطبع إجراء أكبر عدد ممكن من التوقعات إذا أنشأنا واجهة مستخدم جيدة لاستدعاء النموذج بدلاً من ذلك، وسيتم تشغيل كل ذلك بالكامل في 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