الجلب التنبؤي باستخدام TensorFlow.js

في هذا البرنامج التعليمي، ستقوم بتشغيل مثال لتطبيق ويب يستخدم TensorFlow.js لإجراء الجلب المسبق التنبؤي للموارد. تم إنشاء هذا المثال باستخدام Angular ، وهو مستوحى من متجر Google Merchandise Store ولكنه لا يشارك أي بيانات أو تفاصيل تنفيذ معه.

يستخدم المثال نموذجًا تم تدريبه مسبقًا لإجراء التنبؤات. في سيناريو العالم الحقيقي، ستحتاج إلى تدريب نموذج باستخدام التحليلات من موقع الويب الخاص بك. يمكنك استخدام TFX للقيام بهذا التدريب. لمعرفة المزيد حول تدريب نموذج مخصص للجلب المسبق التنبؤي، راجع منشور المدونة هذا .

رمز المثال متاح على GitHub .

المتطلبات الأساسية

لإكمال هذا البرنامج التعليمي، تحتاج إلى تثبيت ما يلي في بيئة التطوير الخاصة بك:

قم بتثبيت المثال

احصل على الكود المصدري وقم بتثبيت التبعيات:

  1. قم باستنساخ أو تنزيل مستودع tfjs-examples .

  2. قم بالتغيير إلى دليل angular-predictive-prefetching/client وتثبيت التبعيات:

    cd tfjs-examples/angular-predictive-prefetching/client && yarn

  3. قم بالتغيير إلى دليل angular-predictive-prefetching/server وتثبيت التبعيات:

    cd ../server && yarn

قم بتشغيل المثال

ابدأ كلاً من الخادم والعميل:

  1. بدء تشغيل الخادم: في دليل server ، قم بتشغيل yarn start .

  2. ابدأ العميل:

    1. افتح نافذة طرفية أخرى.
    2. قم بالتغيير إلى tfjs-examples/angular-predictive-prefetching/client .

    3. قم بتشغيل الأوامر التالية:

      yarn build
cd dist/merch-store
npx serve -s .

      قد تتم مطالبتك بتثبيت حزمة الخدمة . إذا كان الأمر كذلك، أدخل y لتثبيت الحزمة.

  3. انتقل إلى http://localhost:3000 في متصفحك. يجب أن تشاهد متجرًا وهميًا لبضائع Google.

استكشف باستخدام DevTools

استخدم Chrome DevTools لرؤية الجلب المسبق أثناء العمل:

  1. افتح DevTools وحدد Console .

  2. انتقل إلى بضع صفحات مختلفة في التطبيق، لتجهيز التطبيق. ثم حدد بيع في شريط التنقل الأيمن. يجب أن تشاهد إخراج السجل مثل هذا:

    Navigating from: 'sale'
'quickview' -> 0.381757915019989
'apparel-unisex' -> 0.3150934875011444
'store.html' -> 0.1957530975341797
'' -> 0.052346792072057724
'signin.html' -> 0.0007763378671370447

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

  3. لرؤية طلبات الجلب، حدد الشبكة . الإخراج صاخب بعض الشيء، ولكن من المفترض أن تكون قادرًا على العثور على طلبات للحصول على موارد للصفحات المتوقعة. على سبيل المثال، بعد توقع quickview ، يقدم التطبيق طلبًا إلى http://localhost:8000/api/merch/quickview .

كيف يعمل الجلب المسبق التنبؤي

يستخدم تطبيق المثال نموذجًا تم تدريبه مسبقًا للتنبؤ بالصفحة التي سيزورها المستخدم بعد ذلك. عندما ينتقل المستخدم إلى صفحة جديدة، يستعلم التطبيق عن النموذج ثم يقوم بالجلب المسبق للصور المرتبطة بالصفحات المتوقعة.

يقوم التطبيق بإجراء الجلب المسبق التنبؤي على عامل الخدمة ، حتى يتمكن من الاستعلام عن النموذج دون حظر الخيط الرئيسي. استنادًا إلى سجل التنقل الخاص بالمستخدم، يقوم عامل الخدمة بعمل تنبؤات للتنقل المستقبلي ويقوم بالجلب المسبق لصور المنتج ذات الصلة.

يتم تحميل عامل الخدمة في الملف الرئيسي لتطبيق Angular، main.ts :

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/prefetch.service-worker.js', { scope: '/' });
}

يقوم المقتطف أعلاه بتنزيل البرنامج النصي prefetch.service-worker.js وتشغيله في الخلفية.

في merch-display.component.ts ، يعيد التطبيق توجيه أحداث التنقل إلى عامل الخدمة:

this.route.params.subscribe((routeParams) => {
  this.getMerch(routeParams.category);
  if (this._serviceWorker) {
    this._serviceWorker.postMessage({ page: routeParams.category });
  }
});

في المقتطف أعلاه، يراقب التطبيق التغييرات التي تطرأ على معلمات عنوان URL. عند التغيير، يقوم البرنامج النصي بإعادة توجيه فئة الصفحة إلى عامل الخدمة.

يتعامل البرنامج النصي لعامل الخدمة، prefetch.service-worker.js ، مع الرسائل الواردة من سلسلة المحادثات الرئيسية، ويقوم بعمل تنبؤات بناءً عليها، ويقوم بالجلب المسبق للموارد ذات الصلة.

يستخدم عامل الخدمة loadGraphModel لتحميل النموذج المُدرب مسبقًا :

const MODEL_URL = "/assets/model.json";

let model = null;
tf.loadGraphModel(MODEL_URL).then((m) => (model = m));

يحدث التنبؤ في تعبير الوظيفة التالي:

const predict = async (path, userId) => {
  if (!model) {
    return;
  }
  const page = pages.indexOf(path);
  const pageId = tf.tensor1d([parseInt(page)], "int32");

  const sessionIndex = tf.tensor1d([parseInt(userId)], "int32");

  const result = model.predict({
    cur_page: pageId,
    session_index: sessionIndex,
  });
  const values = result.dataSync();
  const orders = sortWithIndices(values).slice(0, 5);
  return orders;
};

يتم بعد ذلك استدعاء وظيفة predict بواسطة وظيفة الجلب المسبق :

const prefetch = async (path, sessionId) => {
  const predictions = await predict(path, sessionId);
  const formattedPredictions = predictions
    .map(([a, b]) => `'${b}' -> ${a}`)
    .join("\n");
  console.log(`Navigating from: '${path}'`);
  console.log(formattedPredictions);
  const connectionSpeed = navigator.connection.effectiveType;
  const threshold = connectionSpeeds[connectionSpeed];
  const cache = await caches.open(ImageCache);
  predictions.forEach(async ([probability, category]) => {
    if (probability >= threshold) {
      const merchs = (await getMerchList(category)).map(getUrl);
      [...new Set(merchs)].forEach((url) => {
        const request = new Request(url, {
          mode: "no-cors",
        });
        fetch(request).then((response) => cache.put(request, response));
      });
    }
  });
};

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

ماذا بعد

في هذا البرنامج التعليمي، يستخدم التطبيق النموذجي نموذجًا تم تدريبه مسبقًا لإجراء التنبؤات. يمكنك استخدام TFX لتدريب نموذج للجلب المسبق التنبؤي. لمعرفة المزيد، راجع تسريع مواقعك باستخدام الجلب المسبق لصفحة الويب باستخدام التعلم الآلي .