การดึงข้อมูลล่วงหน้าแบบคาดการณ์ด้วย 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 และเลือก คอนโซล

  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 เพื่อให้สามารถสืบค้นโมเดลได้โดยไม่ต้องบล็อกเธรดหลัก ตามประวัติการนำทางของผู้ใช้ พนักงานบริการจะคาดการณ์การนำทางในอนาคตและดึงรูปภาพผลิตภัณฑ์ที่เกี่ยวข้องล่วงหน้า

พนักงานบริการถูกโหลดในไฟล์หลักของแอป 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 เพื่อฝึกโมเดลสำหรับการดึงข้อมูลล่วงหน้าแบบคาดการณ์ได้ หากต้องการเรียนรู้เพิ่มเติม โปรดดู เพิ่มความเร็วไซต์ของคุณด้วยการดึงข้อมูลหน้าเว็บล่วงหน้าโดยใช้การเรียนรู้ของเครื่อง