TensorFlow.js এর সাথে সাইজ-অপ্টিমাইজ করা ব্রাউজার বান্ডেল তৈরি করা হচ্ছে

ওভারভিউ

TensorFlow.js 3.0 সাইজ-অপ্টিমাইজড, প্রোডাকশন ওরিয়েন্টেড ব্রাউজার বান্ডেল তৈরির জন্য সমর্থন নিয়ে আসে। এটিকে অন্যভাবে বলতে আমরা আপনার জন্য ব্রাউজারে কম জাভাস্ক্রিপ্ট পাঠানো সহজ করতে চাই।

এই বৈশিষ্ট্যটি এমন ব্যবহারকারীদের জন্য তৈরি করা হয়েছে যাদের উৎপাদন ব্যবহারের ক্ষেত্রে যারা বিশেষ করে তাদের পেলোড বন্ধ করে বাইট শেভ করার মাধ্যমে উপকৃত হবেন (এবং এইভাবে এটি অর্জনের জন্য প্রচেষ্টা করতে ইচ্ছুক)। এই বৈশিষ্ট্যটি ব্যবহার করার জন্য আপনাকে ES মডিউল , জাভাস্ক্রিপ্ট বান্ডলিং টুল যেমন ওয়েবপ্যাক বা রোলআপ এবং ট্রি-শেকিং/ডেড-কোড এলিমিনেশনের মত ধারণার সাথে পরিচিত হতে হবে।

এই টিউটোরিয়ালটি দেখায় কিভাবে একটি কাস্টম tensorflow.js মডিউল তৈরি করতে হয় যা একটি বান্ডলারের সাথে ব্যবহার করা যেতে পারে tensorflow.js ব্যবহার করে একটি প্রোগ্রামের জন্য একটি আকার অপ্টিমাইজ করা বিল্ড তৈরি করতে।

পরিভাষা

এই নথির প্রেক্ষাপটে আমরা ব্যবহার করব কয়েকটি মূল পদ:

ES মডিউল - স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট মডিউল সিস্টেম । ES6/ES2015 এ প্রবর্তিত। আমদানি এবং রপ্তানি বিবৃতি ব্যবহার করে সনাক্ত করা যায়.

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

ট্রি-শ্যাকিং / ডেড কোড এলিমিনেশন - চূড়ান্ত লিখিত অ্যাপ্লিকেশন দ্বারা ব্যবহৃত নয় এমন কোড অপসারণ। এটি বান্ডলিং করার সময় করা হয়, সাধারণত মিনিফেকশন ধাপে।

অপারেশন (Ops) - এক বা একাধিক টেনসরের উপর একটি গাণিতিক অপারেশন যা আউটপুট হিসাবে এক বা একাধিক টেনসর তৈরি করে। Ops হল 'উচ্চ স্তরের' কোড এবং তাদের যুক্তি সংজ্ঞায়িত করতে অন্যান্য অপ্স ব্যবহার করতে পারে।

কার্নেল - নির্দিষ্ট হার্ডওয়্যার ক্ষমতার সাথে আবদ্ধ একটি অপের একটি নির্দিষ্ট বাস্তবায়ন। কার্নেলগুলি 'নিম্ন স্তরের' এবং ব্যাকএন্ড নির্দিষ্ট। কিছু অপ্স-এর অপ থেকে কার্নেলে এক-একটি ম্যাপিং থাকে যখন অন্য অপ্স একাধিক কার্নেল ব্যবহার করে।

সুযোগ এবং ব্যবহার ক্ষেত্রে

অনুমান শুধুমাত্র গ্রাফ-মডেল

প্রাথমিক ব্যবহারের ক্ষেত্রে আমরা এই সম্পর্কিত ব্যবহারকারীদের কাছ থেকে শুনেছি এবং এই রিলিজে সমর্থন করছি তা হল TensorFlow.js গ্রাফ মডেলগুলির সাথে অনুমান করা। আপনি যদি TensorFlow.js লেয়ার মডেল ব্যবহার করেন, তাহলে আপনি এটিকে tfjs-কনভার্টার ব্যবহার করে গ্রাফ-মডেল ফর্ম্যাটে রূপান্তর করতে পারেন। অনুমান ব্যবহারের ক্ষেত্রে গ্রাফ মডেল বিন্যাস আরও কার্যকর।

tfjs-core সহ নিম্ন স্তরের টেনসর ম্যানিপুলেশন

অন্যান্য ব্যবহারের ক্ষেত্রে আমরা যে প্রোগ্রামগুলিকে সমর্থন করি তা হল নিম্ন স্তরের টেনসর ম্যানিপুলেশনের জন্য সরাসরি @tensorflow/tjfs-core প্যাকেজ ব্যবহার করে।

কাস্টম বিল্ড আমাদের পদ্ধতি

এই কার্যকারিতা ডিজাইন করার সময় আমাদের মূল নীতিগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:

  • JavaScript মডিউল সিস্টেম (ESM) এর সর্বাধিক ব্যবহার করুন এবং TensorFlow.js এর ব্যবহারকারীদের একই কাজ করার অনুমতি দিন।
  • বিদ্যমান বান্ডলার (যেমন ওয়েবপ্যাক, রোলআপ ইত্যাদি) দ্বারা TensorFlow.js কে যতটা সম্ভব ট্রি-শেকযোগ্য করুন। এটি ব্যবহারকারীদের কোড বিভাজনের মতো বৈশিষ্ট্য সহ সেই বান্ডলারগুলির সমস্ত ক্ষমতার সুবিধা নিতে সক্ষম করে।
  • যতটা সম্ভব ব্যবহারকারীদের জন্য ব্যবহারে স্বাচ্ছন্দ্য বজায় রাখুন যারা বান্ডেলের আকারের প্রতি সংবেদনশীল নয় । এর মানে এই যে প্রোডাকশন বিল্ডগুলির জন্য আরও বেশি প্রচেষ্টার প্রয়োজন হবে কারণ আমাদের লাইব্রেরির অনেকগুলি ডিফল্ট আকারের অপ্টিমাইজ করা বিল্ডগুলির ব্যবহার সহজে সমর্থন করে৷

আমাদের কর্মপ্রবাহের প্রাথমিক লক্ষ্য হল TensorFlow.js-এর জন্য একটি কাস্টম জাভাস্ক্রিপ্ট মডিউল তৈরি করা যাতে শুধুমাত্র সেই প্রোগ্রামটির জন্য প্রয়োজনীয় কার্যকারিতা থাকে যা আমরা অপ্টিমাইজ করার চেষ্টা করছি। প্রকৃত অপ্টিমাইজেশন করতে আমরা বিদ্যমান বান্ডলারের উপর নির্ভর করি।

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

  • মডেল স্পেসিফিকেশন model.json ফাইলে সংরক্ষিত
  • ব্যাকএন্ড-নির্দিষ্ট-কারনেল প্রেরণ সিস্টেমের অপশন যা আমরা ব্যবহার করি।

এটি নিয়মিত @tensorflow/tfjs প্যাকেজের দিকে একটি বান্ডলার নির্দেশ করার চেয়ে একটি কাস্টম 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 এর আউটপুট থেকে এটি অনুলিপি করুন।
  • backends: আপনি অন্তর্ভুক্ত করতে চান ব্যাকএন্ড(গুলি) তালিকা. বৈধ বিকল্পগুলির মধ্যে রয়েছে "cpu", "webgl" এবং "wasm"।
  • মডেল: আপনার অ্যাপ্লিকেশনে লোড করা মডেলগুলির জন্য model.json ফাইলগুলির একটি তালিকা৷ আপনার প্রোগ্রামটি গ্রাফ মডেল লোড করতে tfjs_converter ব্যবহার না করলে খালি হতে পারে।
  • outputPath: তৈরি করা মডিউলগুলি রাখার জন্য একটি ফোল্ডারে যাওয়ার পথ।
  • ForwardModeOnly: আপনি যদি পূর্বে তালিকাভুক্ত কার্নেলের জন্য গ্রেডিয়েন্ট অন্তর্ভুক্ত করতে চান তবে এটি মিথ্যাতে সেট করুন।

ধাপ 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 বিবৃতি পরিবর্তন করতে হবে। Op সংজ্ঞাগুলি ট্রি-শেক আউট করা হবে না, কিন্তু কার্নেলগুলি এখনও ট্রি থাকবে - কাঁপানো। সাধারণত গাছ-কাঁপানো কার্নেলই চূড়ান্ত বান্ডিল আকারে সবচেয়ে বেশি সঞ্চয় করে।

আপনি যদি শুধুমাত্র @tensoflow/tfjs-core প্যাকেজটি ব্যবহার করেন, তাহলে আপনাকে শুধুমাত্র সেই একটি প্যাকেজের নাম দিতে হবে।

ধাপ 5. আপনার বান্ডিল তৈরি করুন

আপনার বান্ডেল তৈরি করতে আপনার বান্ডলার চালান (যেমন webpack বা rollup )। আপনি যদি মডিউল এলিয়াসিং ছাড়া বান্ডলার চালান তার চেয়ে বান্ডিলের আকার ছোট হওয়া উচিত। আপনার চূড়ান্ত বান্ডেলে এটি কী তৈরি করেছে তা দেখতে আপনি এইরকম ভিজ্যুয়ালাইজার ব্যবহার করতে পারেন।

ধাপ 6. আপনার অ্যাপ পরীক্ষা করুন

আপনার অ্যাপ প্রত্যাশিত হিসাবে কাজ করছে তা পরীক্ষা করতে ভুলবেন না!