मशीन लर्निंग में नया? वेब प्रौद्योगिकियों का उपयोग करके एमएल का व्यावहारिक कार्यसाधक ज्ञान प्राप्त करने के लिए एक वीडियो कोर्स देखें श्रृंखला देखें

इस पेज का अनुवाद Cloud Translation API से किया गया है.

TensorFlow.js के साथ पूर्वानुमानित प्रीफ़ेचिंग

इस ट्यूटोरियल में, आप एक उदाहरण वेब एप्लिकेशन चलाएंगे जो संसाधनों की पूर्वानुमानित प्रीफ़ेचिंग करने के लिए TensorFlow.js का उपयोग करता है। एंगुलर के साथ निर्मित, उदाहरण Google मर्चेंडाइज स्टोर से प्रेरित है लेकिन इसके साथ कोई डेटा या कार्यान्वयन विवरण साझा नहीं करता है।

उदाहरण पूर्वानुमान लगाने के लिए पूर्व-प्रशिक्षित मॉडल का उपयोग करता है। वास्तविक दुनिया के परिदृश्य में, आपको अपनी वेबसाइट से एनालिटिक्स का उपयोग करके एक मॉडल को प्रशिक्षित करने की आवश्यकता होगी। ऐसी ट्रेनिंग करने के लिए आप TFX का उपयोग कर सकते हैं। पूर्वानुमानित प्रीफ़ेचिंग के लिए एक कस्टम मॉडल के प्रशिक्षण के बारे में अधिक जानने के लिए, यह ब्लॉग पोस्ट देखें।

उदाहरण कोड GitHub पर उपलब्ध है।

आवश्यक शर्तें

इस ट्यूटोरियल को पूरा करने के लिए, आपको अपने विकास परिवेश में निम्नलिखित को स्थापित करना होगा:

नोड.जेएस ( डाउनलोड )
सूत ( स्थापित करें )
(वैकल्पिक) क्रोम ( डाउनलोड )

उदाहरण स्थापित करें

स्रोत कोड प्राप्त करें और निर्भरताएँ स्थापित करें:

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 खोलें और कंसोल चुनें।
ऐप को प्राइम करने के लिए एप्लिकेशन में कुछ अलग पेजों पर नेविगेट करें। फिर बाएं नेविगेशन में सेल चुनें। आपको लॉग आउटपुट इस तरह देखना चाहिए:
```
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 उन पृष्ठों की भविष्यवाणी करता है जिन पर उपयोगकर्ता अगली बार जा सकता है। फिर यह भविष्यवाणियों को दोहराता है। प्रत्येक भविष्यवाणी के लिए, यदि संभावना कनेक्शन गति के आधार पर एक निश्चित सीमा से अधिक है, तो फ़ंक्शन अनुमानित पृष्ठ के लिए संसाधन लाता है। अगले पृष्ठ के अनुरोध से पहले इन संसाधनों को लाकर, ऐप संभावित रूप से तेजी से सामग्री प्रदान कर सकता है और बेहतर उपयोगकर्ता अनुभव प्रदान कर सकता है।

आगे क्या होगा

इस ट्यूटोरियल में, उदाहरण ऐप पूर्वानुमान लगाने के लिए पूर्व-प्रशिक्षित मॉडल का उपयोग करता है। आप पूर्वानुमानित प्रीफ़ेचिंग के लिए एक मॉडल को प्रशिक्षित करने के लिए टीएफएक्स का उपयोग कर सकते हैं। अधिक जानने के लिए, मशीन लर्निंग का उपयोग करके वेब-पेज प्रीफ़ेचिंग के साथ अपनी साइटों को गति दें देखें।