TensorFlow.js के साथ आकार-अनुकूलित ब्राउज़र बंडल बनाना

सिंहावलोकन

TensorFlow.js 3.0 आकार-अनुकूलित, उत्पादन उन्मुख ब्राउज़र बंडलों के निर्माण के लिए समर्थन लाता है। इसे दूसरे तरीके से कहें तो हम आपके लिए ब्राउज़र पर कम जावास्क्रिप्ट शिप करना आसान बनाना चाहते हैं।

यह सुविधा उत्पादन उपयोग के मामलों वाले उपयोगकर्ताओं के लिए तैयार की गई है, जो विशेष रूप से अपने पेलोड से बाइट्स को हटाने से लाभान्वित होंगे (और इस प्रकार इसे प्राप्त करने के लिए प्रयास करने को तैयार हैं)। इस सुविधा का उपयोग करने के लिए आपको ईएस मॉड्यूल , वेबपैक या रोलअप जैसे जावास्क्रिप्ट बंडलिंग टूल और ट्री-शेकिंग/डेड-कोड एलिमिनेशन जैसी अवधारणाओं से परिचित होना चाहिए।

यह ट्यूटोरियल दर्शाता है कि एक कस्टम टेंसरफ्लो.जेएस मॉड्यूल कैसे बनाया जाए जिसका उपयोग बंडलर के साथ टेंसरफ्लो.जेएस का उपयोग करके किसी प्रोग्राम के लिए आकार अनुकूलित बिल्ड तैयार करने के लिए किया जा सकता है।

शब्दावली

इस दस्तावेज़ के संदर्भ में कुछ प्रमुख शब्द हैं जिनका हम उपयोग करेंगे:

ईएस मॉड्यूल - मानक जावास्क्रिप्ट मॉड्यूल प्रणाली । ES6/ES2015 में पेश किया गया। आयात और निर्यात विवरणों के उपयोग से पहचाने जाने योग्य।

बंडलिंग - जावास्क्रिप्ट संपत्तियों का एक सेट लेना और उन्हें एक या अधिक जावास्क्रिप्ट संपत्तियों में समूहीकृत/बंडल करना जो ब्राउज़र में उपयोग करने योग्य हों। यह वह चरण है जो आम तौर पर ब्राउज़र को दी जाने वाली अंतिम संपत्तियां उत्पन्न करता है। एप्लिकेशन आम तौर पर ट्रांसपिल्ड लाइब्रेरी स्रोतों से सीधे अपना स्वयं का बंडलिंग करेंगे । सामान्य बंडलर्स में रोलअप और वेबपैक शामिल हैं। बंडलिंग का अंतिम परिणाम बंडल के रूप में जाना जाता है (या कभी-कभी इसे एक टुकड़े के रूप में जाना जाता है यदि इसे कई भागों में विभाजित किया जाता है)

ट्री-शेकिंग/डेड कोड एलिमिनेशन - उस कोड को हटाना जिसका उपयोग अंतिम लिखित आवेदन में नहीं किया गया है। यह बंडलिंग के दौरान किया जाता है, आमतौर पर लघुकरण चरण में।

ऑपरेशंस (ऑप्स) - एक या अधिक टेंसर पर एक गणितीय ऑपरेशन जो आउटपुट के रूप में एक या अधिक टेंसर उत्पन्न करता है। ऑप्स 'उच्च स्तरीय' कोड हैं और अपने तर्क को परिभाषित करने के लिए अन्य ऑप्स का उपयोग कर सकते हैं।

कर्नेल - विशिष्ट हार्डवेयर क्षमताओं से जुड़े ऑप का एक विशिष्ट कार्यान्वयन। कर्नेल 'निम्न स्तर' और बैकएंड विशिष्ट हैं। कुछ ऑप्स में ऑप से कर्नेल तक एक-से-एक मैपिंग होती है जबकि अन्य ऑप्स एकाधिक कर्नेल का उपयोग करते हैं।

दायरा और उपयोग के मामले

केवल ग्राफ-मॉडल का अनुमान लगाएं

प्राथमिक उपयोग का मामला जिसके बारे में हमने इससे संबंधित उपयोगकर्ताओं से सुना है, और इस रिलीज़ में समर्थन कर रहे हैं वह TensorFlow.js ग्राफ़ मॉडल के साथ अनुमान लगाना है। यदि आप TensorFlow.js लेयर्स मॉडल का उपयोग कर रहे हैं, तो आप इसे tfjs-converter का उपयोग करके ग्राफ़-मॉडल प्रारूप में परिवर्तित कर सकते हैं। अनुमान उपयोग के मामले के लिए ग्राफ़ मॉडल प्रारूप अधिक कुशल है।

tfjs-कोर के साथ निम्न स्तर का टेंसर हेरफेर

अन्य उपयोग का मामला जिसका हम समर्थन करते हैं वह प्रोग्राम है जो निचले स्तर के टेंसर हेरफेर के लिए सीधे @tensorflow/tjfs-core पैकेज का उपयोग करता है।

कस्टम बिल्ड के प्रति हमारा दृष्टिकोण

इस कार्यक्षमता को डिज़ाइन करते समय हमारे मूल सिद्धांतों में निम्नलिखित शामिल हैं:

• जावास्क्रिप्ट मॉड्यूल सिस्टम (ईएसएम) का अधिकतम उपयोग करें और TensorFlow.js के उपयोगकर्ताओं को भी ऐसा करने की अनुमति दें।
• मौजूदा बंडलर्स (जैसे वेबपैक, रोलअप, आदि) द्वारा TensorFlow.js को यथासंभव ट्री-शेकेबल बनाएं। यह उपयोगकर्ताओं को कोड विभाजन जैसी सुविधाओं सहित उन बंडलरों की सभी क्षमताओं का लाभ उठाने में सक्षम बनाता है।
• जितना संभव हो सके उन उपयोगकर्ताओं के लिए उपयोग में आसानी बनाए रखें जो बंडल आकार के प्रति उतने संवेदनशील नहीं हैं । इसका मतलब यह है कि उत्पादन बिल्ड के लिए अधिक प्रयास की आवश्यकता होगी क्योंकि हमारे पुस्तकालयों में कई डिफ़ॉल्ट आकार अनुकूलित बिल्ड के उपयोग में आसानी का समर्थन करते हैं।

हमारे वर्कफ़्लो का प्राथमिक लक्ष्य TensorFlow.js के लिए एक कस्टम जावास्क्रिप्ट मॉड्यूल तैयार करना है जिसमें केवल उस प्रोग्राम के लिए आवश्यक कार्यक्षमता शामिल है जिसे हम अनुकूलित करने का प्रयास कर रहे हैं। हम वास्तविक अनुकूलन करने के लिए मौजूदा बंडलरों पर भरोसा करते हैं।

जबकि हम मुख्य रूप से जावास्क्रिप्ट मॉड्यूल सिस्टम पर भरोसा करते हैं, हम उन हिस्सों को संभालने के लिए एक कस्टम सीएलआई टूल भी प्रदान करते हैं जिन्हें उपयोगकर्ता फेसिंग कोड में मॉड्यूल सिस्टम के माध्यम से निर्दिष्ट करना आसान नहीं है। इसके दो उदाहरण हैं:

• मॉडल विनिर्देश model.json फ़ाइलों में संग्रहीत हैं
• बैकएंड-विशिष्ट-कर्नेल प्रेषण प्रणाली का विकल्प जिसका हम उपयोग करते हैं।

यह एक कस्टम tfjs निर्माण को नियमित @tensorflow/tfjs पैकेज पर बंडलर को इंगित करने की तुलना में थोड़ा अधिक शामिल बनाता है।

आकार अनुकूलित कस्टम बंडल कैसे बनाएं

चरण 1: निर्धारित करें कि आपका प्रोग्राम कौन से कर्नेल का उपयोग कर रहा है

यह चरण हमें आपके द्वारा चलाए गए किसी भी मॉडल द्वारा उपयोग किए गए सभी कर्नेल या आपके द्वारा चुने गए बैकएंड को देखते हुए प्री/पोस्ट-प्रोसेसिंग कोड निर्धारित करने देता है।

अपने एप्लिकेशन के उन हिस्सों को चलाने के लिए tf.profile का उपयोग करें जो Tensorflow.js का उपयोग करते हैं और कर्नेल प्राप्त करते हैं। यह कुछ इस तरह दिखेगा

const profileInfo = await tf.profile(() => {
  // You must profile all uses of tf symbols.
  runAllMyTfjsCode();
});

const kernelNames = profileInfo.kernelNames
console.log(kernelNames);

अगले चरण के लिए कर्नेल की उस सूची को अपने क्लिपबोर्ड पर कॉपी करें।

आपको उसी बैकएंड का उपयोग करके कोड को प्रोफाइल करना होगा जिसे आप अपने कस्टम बंडल में उपयोग करना चाहते हैं।

यदि आपका मॉडल बदलता है या आपका प्री/पोस्ट-प्रोसेसिंग कोड बदलता है तो आपको यह चरण दोहराना होगा।

चरण 2. कस्टम tfjs मॉड्यूल के लिए एक कॉन्फ़िगरेशन फ़ाइल लिखें

यहाँ एक उदाहरण कॉन्फ़िग फ़ाइल है।

यह इस तरह दिख रहा है:

{
  "kernels": ["Reshape", "_FusedMatMul", "Identity"],
  "backends": [
      "cpu"
  ],
  "models": [
      "./model/model.json"
  ],
  "outputPath": "./custom_tfjs",
  "forwardModeOnly": true
}

• गुठली: बंडल में शामिल करने के लिए गुठली की सूची। इसे चरण 1 के आउटपुट से कॉपी करें।
• बैकएंड: बैकएंड की सूची जिसे आप शामिल करना चाहते हैं। वैध विकल्पों में "सीपीयू", "वेबजीएल" और "वासम" शामिल हैं।
• मॉडल: आपके द्वारा अपने एप्लिकेशन में लोड किए गए मॉडल के लिए मॉडल.जेसन फ़ाइलों की एक सूची। यदि आपका प्रोग्राम ग्राफ़ मॉडल लोड करने के लिए tfjs_converter का उपयोग नहीं करता है तो यह खाली हो सकता है।
• आउटपुटपाथ: जेनरेट किए गए मॉड्यूल को रखने के लिए फ़ोल्डर का पथ।
• फॉरवर्डमोडओनली: यदि आप पहले सूचीबद्ध कर्नेल के लिए ग्रेडिएंट शामिल करना चाहते हैं तो इसे गलत पर सेट करें।

चरण 3. कस्टम tfjs मॉड्यूल जेनरेट करें

कॉन्फ़िगरेशन फ़ाइल के साथ तर्क के रूप में कस्टम बिल्ड टूल चलाएँ। इस टूल तक पहुंच पाने के लिए आपको @tensorflow/tfjs पैकेज इंस्टॉल करना होगा।

npx tfjs-custom-module  --config custom_tfjs_config.json

यह outputPath पर कुछ नई फ़ाइलों के साथ एक फ़ोल्डर बनाएगा।

चरण 4. अपने बंडलर को नए कस्टम मॉड्यूल में उपनाम tfjs पर कॉन्फ़िगर करें।

वेबपैक और रोलअप जैसे बंडलर्स में हम अपने नए जेनरेट किए गए कस्टम tfjs मॉड्यूल को इंगित करने के लिए tfjs मॉड्यूल के मौजूदा संदर्भों को उपनाम दे सकते हैं। बंडल आकार में अधिकतम बचत के लिए तीन मॉड्यूल हैं जिन्हें उपनाम देने की आवश्यकता है।

वेबपैक में यह कैसा दिखता है इसका एक स्निपेट यहां दिया गया है ( पूर्ण उदाहरण यहां ):

...

config.resolve = {
  alias: {
    '@tensorflow/tfjs$':
        path.resolve(__dirname, './custom_tfjs/custom_tfjs.js'),
    '@tensorflow/tfjs-core$': path.resolve(
        __dirname, './custom_tfjs/custom_tfjs_core.js'),
    '@tensorflow/tfjs-core/dist/ops/ops_for_converter': path.resolve(
        __dirname, './custom_tfjs/custom_ops_for_converter.js'),
  }
}

...

और यहां रोलअप के लिए समतुल्य कोड स्निपेट है ( पूर्ण उदाहरण यहां ):

import alias from '@rollup/plugin-alias';

...

alias({
  entries: [
    {
      find: /@tensorflow\/tfjs$/,
      replacement: path.resolve(__dirname, './custom_tfjs/custom_tfjs.js'),
    },
    {
      find: /@tensorflow\/tfjs-core$/,
      replacement: path.resolve(__dirname, './custom_tfjs/custom_tfjs_core.js'),
    },
    {
      find: '@tensorflow/tfjs-core/dist/ops/ops_for_converter',
      replacement: path.resolve(__dirname, './custom_tfjs/custom_ops_for_converter.js'),
    },
  ],
}));

...

यदि आपका बंडलर मॉड्यूल एलियासिंग का समर्थन नहीं करता है, तो आपको चरण 3 में बनाए गए जेनरेट किए गए custom_tfjs.js से Tensorflow.js आयात करने के लिए अपने import विवरण को बदलने की आवश्यकता होगी। ऑप परिभाषाएँ ट्री-शेक आउट नहीं होंगी, लेकिन कर्नेल अभी भी ट्री होंगे -हिला हुआ. आम तौर पर पेड़ को हिलाने वाली गुठली ही अंतिम बंडल आकार में सबसे बड़ी बचत प्रदान करती है।

यदि आप केवल @tensoflow/tfjs-core पैकेज का उपयोग कर रहे हैं, तो आपको केवल उस एक पैकेज को उपनाम देने की आवश्यकता है।

चरण 5. अपना बंडल बनाएं

अपना बंडल बनाने के लिए अपना बंडलर (जैसे webpack या rollup ) चलाएँ। यदि आप बंडलर को मॉड्यूल अलियासिंग के बिना चलाते हैं तो बंडल का आकार छोटा होना चाहिए। आप इस जैसे विज़ुअलाइज़र का उपयोग यह देखने के लिए भी कर सकते हैं कि आपके अंतिम बंडल में क्या शामिल है।

चरण 6. अपने ऐप का परीक्षण करें

यह जांचना सुनिश्चित करें कि आपका ऐप उम्मीद के मुताबिक काम कर रहा है!