মেশিন লার্নিং এ নতুন? ওয়েব টেকনোলজি ব্যবহার করে ML এর ব্যবহারিক কাজের জ্ঞান পেতে একটি ভিডিও কোর্স দেখুন সিরিজ দেখুন

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

TensorFlow.js এর সাথে ভবিষ্যদ্বাণীমূলক প্রিফেচিং

এই টিউটোরিয়ালে, আপনি একটি উদাহরণ ওয়েব অ্যাপ্লিকেশন চালাবেন যা সংস্থানগুলির পূর্বাভাসমূলক প্রিফেচিং করতে TensorFlow.js ব্যবহার করে। Angular দিয়ে তৈরি, উদাহরণটি Google Merchandise Store দ্বারা অনুপ্রাণিত কিন্তু এটির সাথে কোনো ডেটা বা বাস্তবায়নের বিবরণ শেয়ার করে না।

উদাহরণটি ভবিষ্যদ্বাণী করার জন্য একটি প্রাক-প্রশিক্ষিত মডেল ব্যবহার করে। একটি বাস্তব-বিশ্বের পরিস্থিতিতে, আপনাকে আপনার ওয়েবসাইট থেকে বিশ্লেষণ ব্যবহার করে একটি মডেলকে প্রশিক্ষণ দিতে হবে। আপনি এই ধরনের প্রশিক্ষণের জন্য TFX ব্যবহার করতে পারেন। ভবিষ্যদ্বাণীমূলক প্রিফেচিংয়ের জন্য একটি কাস্টম মডেল প্রশিক্ষণের বিষয়ে আরও জানতে, এই ব্লগ পোস্টটি দেখুন।

উদাহরণ কোড GitHub এ উপলব্ধ।

পূর্বশর্ত

এই টিউটোরিয়ালটি সম্পূর্ণ করতে, আপনার উন্নয়ন পরিবেশে নিম্নলিখিত ইনস্টল করা প্রয়োজন:

Node.js ( ডাউনলোড )
সুতা ( ইনস্টল )
(ঐচ্ছিক) ক্রোম ( ডাউনলোড )

উদাহরণ ইনস্টল করুন

সোর্স কোড পান এবং নির্ভরতা ইনস্টল করুন:

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 এ একটি অনুরোধ করে।

ভবিষ্যদ্বাণীমূলক প্রিফেচিং কীভাবে কাজ করে

উদাহরণ অ্যাপটি একটি প্রাক-প্রশিক্ষিত মডেল ব্যবহার করে ভবিষ্যদ্বাণী করে যে পৃষ্ঠাটি একজন ব্যবহারকারী পরবর্তীতে ভিজিট করবে। যখন ব্যবহারকারী একটি নতুন পৃষ্ঠায় নেভিগেট করে, অ্যাপটি মডেলটি জিজ্ঞাসা করে এবং তারপর পূর্বাভাসিত পৃষ্ঠাগুলির সাথে যুক্ত ছবিগুলিকে প্রিফেচ করে৷

অ্যাপটি একটি পরিষেবা কর্মীকে ভবিষ্যদ্বাণীমূলক প্রিফেচিং করে, যাতে এটি মূল থ্রেডটিকে ব্লক না করেই মডেলটি জিজ্ঞাসা করতে পারে৷ ব্যবহারকারীর নেভিগেশন ইতিহাসের উপর ভিত্তি করে, পরিষেবা কর্মী ভবিষ্যতের নেভিগেশনের জন্য ভবিষ্যদ্বাণী করে এবং প্রাসঙ্গিক পণ্যের ছবিগুলি প্রিফেচ করে৷

পরিষেবা কর্মী কৌণিক অ্যাপের প্রধান ফাইলে লোড করা হয়, 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 });
  }
});

উপরের স্নিপেটে, অ্যাপটি ইউআরএলের প্যারামিটারের পরিবর্তনগুলি দেখে। পরিবর্তনের সময়, স্ক্রিপ্টটি পৃষ্ঠার বিভাগটি পরিষেবা কর্মীর কাছে ফরোয়ার্ড করে।

পরিষেবা কর্মী স্ক্রিপ্ট, 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 ব্যবহার করে ভবিষ্যদ্বাণীমূলক প্রিফেচিংয়ের জন্য একটি মডেলকে প্রশিক্ষণ দিতে পারেন। আরও জানতে, মেশিন লার্নিং ব্যবহার করে ওয়েব-পৃষ্ঠা প্রিফেচিং সহ আপনার সাইটগুলির গতি বাড়ান দেখুন৷