שליפה מראש עם 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 בדפדפן שלך. אתה אמור לראות חנות מדומה של גוגל.

חקור עם DevTools

השתמש ב-Chrome DevTools כדי לראות את השליפה המוקדמת בפעולה:

  1. פתח את DevTools ובחר מסוף .

  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 .

איך עובד אחזור מראש

האפליקציה לדוגמה משתמשת במודל מיומן מראש כדי לחזות את הדף שמשתמש יבקר בו הבא. כאשר המשתמש מנווט לדף חדש, האפליקציה מבצעת שאילתות בדגם ולאחר מכן משחזרת מראש תמונות המשויכות לדפים חזויים.

האפליקציה מבצעת את האחזור החזוי ב- Service Worker , כך שהיא יכולה לבצע שאילתות על המודל מבלי לחסום את השרשור הראשי. בהתבסס על היסטוריית הניווט של המשתמש, עובד השירות עורך תחזיות לניווט עתידי ומביא מראש תמונות מוצר רלוונטיות.

ה-Service Worker נטען בקובץ הראשי של אפליקציית Angular, main.ts :

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

הקטע שלמעלה מוריד את הסקריפט prefetch.service-worker.js ומריץ אותו ברקע.

ב- merch-display.component.ts , האפליקציה מעבירה אירועי ניווט ל-Service Worker:

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

בקטע שלמעלה, האפליקציה צופה בשינויים בפרמטרים של כתובת האתר. בשינוי, הסקריפט מעביר את הקטגוריה של הדף ל-Service Worker.

סקריפט ה-service worker, prefetch.service-worker.js , מטפל בהודעות מהשרשור הראשי, עורך תחזיות על סמך אותן, ומשחזר מראש את המשאבים הרלוונטיים.

ה-Service Worker משתמש ב- 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 כדי לאמן מודל לאחזור מראש. למידע נוסף, ראה האץ את האתרים שלך עם אחזור מראש של דפי אינטרנט באמצעות למידה חישובית .