در یادگیری ماشینی جدید هستید؟ یک دوره ویدیویی را تماشا کنید تا دانش کاربردی ML را با استفاده از فناوری‌های وب مشاهده کنید

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

واکشی پیش‌بینی‌کننده با TensorFlow.js

در این آموزش، شما یک نمونه برنامه وب را اجرا می‌کنید که از TensorFlow.js برای انجام واکشی پیش‌بینی منابع استفاده می‌کند. این نمونه که با Angular ساخته شده است، از فروشگاه کالای Google الهام گرفته شده است، اما هیچ داده یا جزئیات پیاده سازی را با آن به اشتراک نمی گذارد.

مثال از یک مدل از پیش آموزش دیده برای پیش بینی استفاده می کند. در یک سناریوی واقعی، شما باید یک مدل را با استفاده از تجزیه و تحلیل از وب سایت خود آموزش دهید. برای انجام چنین آموزش هایی می توانید از TFX استفاده کنید. برای کسب اطلاعات بیشتر در مورد آموزش یک مدل سفارشی برای واکشی پیش‌بینی، به این پست وبلاگ مراجعه کنید.

کد نمونه در GitHub موجود است.

پیش نیازها

برای تکمیل این آموزش، باید موارد زیر را در محیط توسعه خود نصب کنید:

Node.js ( دانلود )
نخ ( نصب )
(اختیاری) Chrome ( دانلود )

نمونه را نصب کنید

کد منبع را دریافت کنید و وابستگی ها را نصب کنید:

مخزن tfjs-examples کلون یا دانلود کنید.
به دایرکتوری angular-predictive-prefetching/client تغییر دهید و وابستگی ها را نصب کنید:
```
cd tfjs-examples/angular-predictive-prefetching/client && yarn
```
به دایرکتوری angular-predictive-prefetching/server تغییر دهید و وابستگی ها را نصب کنید:
```
cd ../server && yarn
```

مثال را اجرا کنید

هم سرور و هم کلاینت را راه اندازی کنید:

سرور را راه اندازی کنید: در فهرست server ، yarn start اجرا کنید.
مشتری را شروع کنید:
1. پنجره ترمینال دیگری را باز کنید.
2. به tfjs-examples/angular-predictive-prefetching/client تغییر دهید.
3. دستورات زیر را اجرا کنید:
```
yarn build
cd dist/merch-store
npx serve -s .
```
  ممکن است از شما خواسته شود بسته سرویس را نصب کنید. اگر چنین است، برای نصب بسته، y را وارد کنید.
در مرورگر خود به http://localhost:3000 بروید. شما باید یک فروشگاه کالای ساختگی Google را ببینید.

با DevTools کاوش کنید

از Chrome DevTools برای مشاهده واکشی اولیه در عمل استفاده کنید:

DevTools را باز کرده و Console را انتخاب کنید.
برای پر کردن برنامه به چند صفحه مختلف در برنامه بروید. سپس در ناوبری سمت چپ ، فروش را انتخاب کنید. شما باید خروجی ورود به سیستم را به صورت زیر ببینید:
```
Navigating from: 'sale'
'quickview' -> 0.381757915019989
'apparel-unisex' -> 0.3150934875011444
'store.html' -> 0.1957530975341797
'' -> 0.052346792072057724
'signin.html' -> 0.0007763378671370447
```
این خروجی پیش‌بینی‌هایی را برای صفحه‌ای که شما (کاربر) بعداً از آن بازدید خواهید کرد، نشان می‌دهد. این برنامه منابع را بر اساس این پیش بینی ها واکشی می کند.
برای مشاهده درخواست‌های واکشی، شبکه را انتخاب کنید. خروجی کمی پر سر و صدا است، اما باید بتوانید درخواست هایی برای منابع برای صفحات پیش بینی شده پیدا کنید. برای مثال، پس از پیش‌بینی 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 است. در صورت تغییر، اسکریپت دسته بندی صفحه را به سرویسکار ارسال می کند.

اسکریپت service worker، 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 توسط تابع prefetch فراخوانی می شود:

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 برای آموزش مدلی برای واکشی پیش‌بینی استفاده کنید. برای کسب اطلاعات بیشتر، به افزایش سرعت سایت‌های خود با واکشی اولیه صفحه وب با استفاده از یادگیری ماشین مراجعه کنید.