1~
2বছরের পর বছর ধরে ব্রাউজারটি অ্যাপ্লিকেশনটির সুন্দর মুখ ছিল এবং ক্লাউড ছিল সেই জায়গা যেখানে কঠিন জিনিস ঘটেছিল। ব্যবহারকারী লেখেন, ক্লিক করেন, একটি ফাইল আপলোড করেন; ফ্রন্টএন্ড সার্ভারে সবকিছু পাঠায়; সার্ভার একটি মডেল কল; উত্তর ফিরে আসে।
3~
4এই স্কিমটি খুব দরকারী, কিন্তু এটি বিনামূল্যে নয়। প্রতিটি কল লেটেন্সি, খরচ, নেটওয়ার্ক নির্ভরতা এবং গোপনীয়তার প্রশ্ন নিয়ে আসে। ব্যবহারকারী যদি একটি বাক্য লিখছেন এবং একটি পরামর্শ চান, অর্ধেক সেকেন্ড ওজন করে। আপনি যদি হাজার হাজার ছোট ইনপুটকে শ্রেণীবদ্ধ করেন, তাহলে পেনিগুলি আসল টাকা হয়ে যায়। পাঠ্যটি সংবেদনশীল হলে, এটিকে ডিভাইস থেকে পাঠানো একটি নিরপেক্ষ পছন্দ নয়।
5~
6এই কারণেই WebGPU এবং অন-ডিভাইস AI হাইপে রয়েছে৷ আমরা আগামীকাল ব্রাউজারে প্রতিটি মডেল চালাব বলে নয়। কারণ কিছু বুদ্ধিমান বৈশিষ্ট্য ব্যবহারকারীর কাছাকাছি যেতে পারে।
7~
8## সবকিছু স্থানীয় হয়ে উঠতে হবে না
9~
10যুক্তির শিশুসুলভ সংস্করণ হল: "ক্লাউড বনাম ডিভাইস"। দরকারী সংস্করণ হাইব্রিড।
11~
12ডিভাইসে কিছু কাজ দুর্দান্ত দেখায়: সংক্ষিপ্ত সারাংশ, ভাষা সনাক্তকরণ, হালকা পুনঃলিখন, সাধারণ শ্রেণীবিভাগ, চিত্র ফিল্টার, ছোট দৃষ্টি মডেল, তাত্ক্ষণিক প্রতিক্রিয়া সহ সৃজনশীল অভিজ্ঞতা।
13~
14অন্যান্য কাজগুলি ক্লাউডে আরও ভাল থাকে: জটিল যুক্তি, সীমান্ত মডেল, সার্ভার-সাইড ডেটা, কেন্দ্রীভূত অডিট, অভিন্ন গুণমান, কর্মপ্রবাহ যেখানে আপনাকে প্রতিটি পদক্ষেপ সাবধানে নিয়ন্ত্রণ করতে হবে।
15~
16সুস্থ আর্কিটেকচার রানটাইমে সিদ্ধান্ত নেয়:
17~
18```mermaid
19flowchart TD
20    User[ব্যবহারকারী] --> Browser[ব্রাউজার]
21    Browser --> Detect[বৈশিষ্ট্য সনাক্তকরণ]
22    Detect -->|সমর্থিত| Local[স্থানীয় অনুমান]
23    Detect -->|সমর্থিত নয়| Cloud[মেঘের পতন]
24    Local --> UX[দ্রুত প্রতিক্রিয়া]
25    Cloud --> UX
26    UX --> Metrics[মেট্রিক্স এবং গুণমান]
27```
28~
29ব্রাউজারকে ক্লাউডের বিরুদ্ধে জিততে হবে না। এটি অবশ্যই ক্লাউডকে এমন কাজ করা থেকে বাঁচাতে হবে যা সেখানে করার দরকার নেই।
30~
31## কেন WebGPU গুরুত্বপূর্ণ
32~
33WebGPU ব্রাউজার থেকে GPU ব্যবহার করার জন্য একটি আধুনিক API। এটা শুধু সুন্দর 3D গ্রাফিক্সের জন্য নয়। এটি গুরুত্বপূর্ণ কারণ এটি কম্পিউটিংয়ের জন্য উপযুক্ত আদিম বিষয়গুলিকে প্রকাশ করে: সমান্তরাল ওয়ার্কলোড, শেডার, পাইপলাইনগুলি যা জিপিইউগুলি ভাল করে তার কাছাকাছি।
34~
35AI, বৈজ্ঞানিক ভিজ্যুয়ালাইজেশন, 3D সম্পাদক, ভিডিও ফিল্টার এবং সৃজনশীল সরঞ্জামগুলির জন্য, এই পার্থক্যটি অনুভূত হয়। WebGL ওয়েবের জন্য অনেক কিছু করেছে, কিন্তু WebGPU বর্তমানের জন্য আরও উপযুক্ত একটি মডেল নিয়ে জন্মগ্রহণ করেছে।
36~
37লিখতে প্রথম জিনিস, যাইহোক, একটি shader না. এটি একটি শান্ত বৈশিষ্ট্য সনাক্তকরণ:
38~
39```typescript
40export async function requestWebGpuDevice() {
41  if (!('gpu' in navigator)) {
42    return null;
43  }
44~
45  const adapter = await navigator.gpu.requestAdapter({
46    powerPreference: 'high-performance',
47  });
48~
49  if (!adapter) {
50    return null;
51  }
52~
53  return adapter.requestDevice();
54}
55```
56~
57এই বৈশিষ্ট্যটি একটি গুরুত্বপূর্ণ বিষয় বলে: WebGPU প্রতিটি ডিভাইসে দেওয়া অধিকার নয়। এটা যাচাই করার ক্ষমতা। কিছু ব্রাউজার এটি সম্পূর্ণরূপে সমর্থন করে না, কিছু GPU-এর সীমাবদ্ধতা রয়েছে, কিছু এন্টারপ্রাইজ পরিবেশ বৈশিষ্ট্যগুলি অক্ষম করে, কিছু ব্যবহারকারী পরিমিত হার্ডওয়্যারে রয়েছে৷
58~
59## অন্তর্নির্মিত AI: যখন ব্রাউজার মডেল নিয়ে আসে
60~
61Chrome স্থানীয় প্রম্পট, সংক্ষিপ্তকরণ, লেখা, পুনর্লিখন, অনুবাদ, ভাষা সনাক্তকরণ এবং প্রুফরিডিংয়ের মতো কাজের জন্য অন্তর্নির্মিত APIগুলিকে চাপ দিচ্ছে৷ ধারণাটি খুব আকর্ষণীয়: ব্রাউজার মডেল, প্রাপ্যতা এবং আপডেটগুলি পরিচালনা করে; অ্যাপটি প্ল্যাটফর্মের কাছাকাছি একটি API ব্যবহার করে।
62~
63যদি এটি ভাল কাজ করে, এটি অনেক পরিবর্তন করে:
64~
65- সাধারণ কাজের জন্য কম সার্ভার কল;
66- ডিভাইসে থাকতে পারে এমন ডেটা;
67- কম বিলম্ব;
68- অফলাইন বা আধা অফলাইন অভিজ্ঞতা;
69- লেখা এবং অনুবাদের জন্য আরও প্রাকৃতিক ইউএক্স।
70~
71তবে এটিকে প্রগতিশীল বর্ধন হিসাবে বিবেচনা করা উচিত। কিছু এপিআই স্থিতিশীল, অন্যগুলি মূল ট্রায়াল বা পূর্বরূপ, অন্যগুলি এখনও সংস্করণ, ভাষা এবং ডিভাইসের উপর নির্ভর করে।
72~
73```typescript
74type LocalCapability = 'available' | 'downloadable' | 'unsupported';
75~
76export async function getLocalSummarizerCapability(): Promise<LocalCapability> {
77  const SummarizerApi = (globalThis as any).Summarizer;
78~
79  if (!SummarizerApi?.availability) {
80    return 'unsupported';
81  }
82~
83  const availability = await SummarizerApi.availability();
84~
85  if (availability === 'available') return 'available';
86  if (availability === 'downloadable') return 'downloadable';
87~
88  return 'unsupported';
89}
90```
91~
92নির্দিষ্ট কোড পরিবর্তিত হবে, কিন্তু প্যাটার্নটি রয়ে যাবে: আপনি উপলব্ধতা পরীক্ষা করুন, কোনো ডাউনলোড ব্যাখ্যা করুন, ফলব্যাক অফার করুন এবং গুণমান পরিমাপ করুন।
93~
94## ফলব্যাক একটি দুঃখজনক পরিকল্পনা বি নয়
95~
96ক্লাউড ফ্যালব্যাক পরাজয় নয়। এটি পণ্যের অংশ।
97~
98```typescript
99interface AiRequest {
100  task: 'summarize' | 'rewrite' | 'classify';
101  input: string;
102}
103~
104interface AiResult {
105  output: string;
106  runtime: 'local' | 'cloud';
107}
108~
109export async function runAiTask(request: AiRequest): Promise<AiResult> {
110  const local = await tryLocalAi(request);
111~
112  if (local) {
113    return { output: local, runtime: 'local' };
114  }
115~
116  const cloud = await fetch('/api/ai', {
117    method: 'POST',
118    headers: { 'Content-Type': 'application/json' },
119    body: JSON.stringify(request),
120  }).then((res) => res.json());
121~
122  return { output: cloud.output, runtime: 'cloud' };
123}
124```
125~
126এই আর্কিটেকচার আপনাকে ক্রমান্বয়ে উন্নতি করতে দেয়। যাদের স্থানীয় সমর্থন রয়েছে তারা আরও ভাল লেটেন্সি এবং গোপনীয়তা পান। যাদের কাছে নেই তারা এখনও ফিচারটি ব্যবহার করে। আপনি স্থানীয় অনুরোধের শতাংশ, সময়, ত্রুটি, মেমরি, অনুভূত গুণমান এবং খরচ পরিমাপ করতে পারেন।
127~
128মেট্রিক্স ছাড়া, ডিভাইসে AI একটি নান্দনিক পছন্দ হয়ে ওঠে। মেট্রিক্সের সাথে, এটি একটি পণ্য লিভার হয়ে যায়।
129~
130## মডেলের UX গুরুত্বপূর্ণ
131~
132যদি ব্রাউজারটিকে একটি মডেল ডাউনলোড করতে হয়, ব্যবহারকারী এটি উপলব্ধি করে। এটি একটি অস্পষ্ট স্পিনারের পিছনে লুকাবেন না। পরিষ্কার হওয়া আরও ভাল: "আমরা এই ফাংশনটি দ্রুত এবং এমনকি অফলাইনে ব্যবহার করার জন্য মডেল প্রস্তুত করি।"
133~
134একটি ভাল অভিজ্ঞতা:
135~
136- প্রস্তুতির অবস্থা দেখায়;
137- পুরো পৃষ্ঠাটি ব্লক করে না;
138- আপনাকে ক্লাউড ফলব্যাক চালিয়ে যেতে দেয়;
139- ব্যাটারি এবং মেমরি বিস্ময় এড়ান;
140- যখনই সম্ভব মডেল মনে রাখবেন;
141- একটি সুনির্দিষ্ট বাক্যে সুবিধা ব্যাখ্যা করুন।
142~
143সবচেয়ে খারাপ জিনিস হল একটি "স্মার্ট" বৈশিষ্ট্য যা ভাঙা দেখায় কারণ এটি নীরবে কিছু ডাউনলোড করছে।
144~
145## গোপনীয়তা: ভাল, স্বয়ংক্রিয়ভাবে সুরক্ষিত নয়
146~
147ডিভাইসে তথ্য প্রক্রিয়াকরণ একটি মহান সুবিধা হতে পারে. একটি খসড়া ইমেল, অভ্যন্তরীণ নথি, বা ব্যক্তিগত নোট একটি পরামর্শ পেতে আপনার ব্রাউজার ছেড়ে যেতে হবে না.
148~
149যাইহোক, স্থানীয় মানে স্বয়ংক্রিয়ভাবে নিরাপদ নয়। যাইহোক, আপনাকে চিন্তা করতে হবে:
150~
151- এক্সএসএস;
152- আকস্মিক লগ;
153- স্টোরেজে ডেটা সংরক্ষিত;
154- অবিশ্বস্ত বিষয়বস্তু থেকে প্রম্পট ইনজেকশন;
155- মডেলের অনুমতি দেওয়া হয়েছে;
156- স্বয়ংক্রিয় ক্রিয়ায় ব্যবহৃত আউটপুট।
157~
158যদি একটি স্থানীয় মডেল একটি ওয়েব পৃষ্ঠা পড়তে পারে এবং তারপর একটি ফর্ম পূরণ করতে পারে, সেই পৃষ্ঠাটি এটিকে ম্যানিপুলেট করার চেষ্টা করতে পারে। এটি টুল কল করতে পারেন, নিশ্চিতকরণ প্রয়োজন. যদি এটি কাঠামোগত আউটপুট উত্পাদন করে তবে এটি অবশ্যই যাচাই করা উচিত। এটি ডিভাইসে চালানোর কারণে কিছু গোপনীয়তার ঝুঁকি হ্রাস পায়, কিন্তু নিরাপত্তা মডেলটি দূর করে না।
159~
160## যেখানে এটা সত্যিই আকর্ষণীয় পায়
161~
162পাঠ্য মাত্র শুরু। WebGPU ওয়েব অভিজ্ঞতাকে বিশ্বাসযোগ্য করে তোলে যা সম্প্রতি পর্যন্ত একটি নেটিভ অ্যাপের মতো মনে হয়েছিল:
163~
164- জটিল 3D সম্পাদক;
165- ব্রাউজারে গাউসিয়ান স্প্ল্যাটিং;
166- রিয়েল-টাইম ভিডিও ফিল্টার;
167- লাইটওয়েট CAD;
168- বৈজ্ঞানিক ভিজ্যুয়ালাইজেশন;
169- তাত্ক্ষণিক পূর্বরূপ সহ সৃজনশীল সরঞ্জাম;
170- UI এর কাছাকাছি দৃষ্টি অনুমান;
171- আরো উচ্চাভিলাষী ব্রাউজার গেম।
172~
173এখানে ফ্রন্টএন্ড, গ্রাফিক্স এবং মেশিন লার্নিং মিশে যেতে শুরু করে। এটি একটি কিছুটা বিশ্রী এলাকা, তবে এটি একটি উর্বরও: ব্রাউজারটি একটি গুরুতর অ্যাপ্লিকেশন প্ল্যাটফর্মে ফিরে আসে, শুধুমাত্র সেই জায়গা নয় যেখানে আমরা ফর্ম এবং ড্যাশবোর্ড রাখি৷
174~
175## উত্পাদনের আগে চেকলিস্ট
176~
177ব্যবহারকারীদের সামনে একটি অন-ডিভাইস বৈশিষ্ট্য রাখার আগে, আমি পরীক্ষা করব:
178~
1791. লক্ষ্য ব্রাউজার এবং ডিভাইস.
1802. ক্লাউড ফলব্যাক বা মার্জিত অবক্ষয়।
1813. সময় এবং মডেল ক্যাশে ডাউনলোড করুন।
1824. গড় হার্ডওয়্যারে মেমরি এবং ব্যাটারি।
1835. ক্লাউড সংস্করণের তুলনায় গুণমান।
1846. গোপনীয়তা নীতি এবং ব্যবহারকারী বার্তা.
1857. প্রতিকূল ইনপুট সঙ্গে পরীক্ষা.
1868. স্থানীয় এবং ক্লাউড রানটাইমের জন্য পৃথক মেট্রিক্স।
1879. টেমপ্লেট আপডেট বা নিষ্ক্রিয় করার পরিকল্পনা করুন।
188~
189এটি একটি কংক্রিট তালিকা কারণ সমস্যাটি কংক্রিট। একটি ধীর, ভঙ্গুর, বা অস্বচ্ছ এআই বৈশিষ্ট্যটি ব্রাউজারে চলার কারণে আরও ভাল হয়ে ওঠে না।
190~
191## সঠিক আপস
192~
193আমি বিশ্বাস করি না যে ভবিষ্যত "ডিভাইসের সবকিছু"। এবং আমি মনে করি না যে মেঘটি অনুমানের জন্য একমাত্র যুক্তিসঙ্গত জায়গা থাকবে। সবচেয়ে সম্ভাবনাময় ভবিষ্যৎ একটি মিশ্রণ: স্থানীয় যখন এটি বিলম্ব, গোপনীয়তা, বা খরচ উন্নত করে; ক্লাউড যখন গুণমান, আপডেট ডেটা এবং কেন্দ্রীভূত নিয়ন্ত্রণের প্রয়োজন হয়।
194~
195WebGPU, WebNN এবং বিল্ট-ইন AI API ব্রাউজারকে সর্বশক্তিমান করে না। তারা তাকে আরও প্রাপ্তবয়স্ক করে তোলে। এবং যারা ওয়েব পণ্য তৈরি করে তাদের জন্য, এটি বিশাল খবর।
196~
197## দরকারী সূত্র
198~
199- [WebGPU API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [WebGPU স্পেসিফিকেশন - W3C](https://www.w3.org/TR/webgpu/)
201- [অন্তর্নির্মিত AI - বিকাশকারীদের জন্য Chrome](https://developer.chrome.com/docs/ai/built-in)
202- [অন্তর্নির্মিত AI API - বিকাশকারীদের জন্য Chrome](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API](https://webnn.io/)
204~