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~
33वेबजीपीयू ब्राउज़र से जीपीयू का उपयोग करने के लिए एक आधुनिक एपीआई है। यह सिर्फ अच्छे 3डी ग्राफ़िक्स के लिए नहीं है। यह इसलिए भी महत्वपूर्ण है क्योंकि यह कंप्यूटिंग के लिए उपयुक्त प्राइमेटिव्स को उजागर करता है: समानांतर वर्कलोड, शेडर्स, जीपीयू जो अच्छा करता है उसके करीब पाइपलाइन।
34~
35एआई, वैज्ञानिक विज़ुअलाइज़ेशन, 3डी संपादकों, वीडियो फ़िल्टर और रचनात्मक टूल के लिए, यह अंतर महसूस किया जाता है। WebGL ने वेब के लिए बहुत कुछ किया है, लेकिन WebGPU का जन्म वर्तमान के लिए बेहतर मॉडल के साथ हुआ था।
36~
37हालाँकि, लिखने वाली पहली चीज़ शेडर नहीं है। यह एक शांत सुविधा पहचान है:
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यह सुविधा एक महत्वपूर्ण बात कहती है: वेबजीपीयू हर डिवाइस पर दिया गया अधिकार नहीं है। यह सत्यापित करने की क्षमता है। कुछ ब्राउज़र इसका पूरी तरह से समर्थन नहीं करते हैं, कुछ जीपीयू की सीमाएँ हैं, कुछ एंटरप्राइज़ वातावरण सुविधाओं को अक्षम कर देते हैं, कुछ उपयोगकर्ता मामूली हार्डवेयर पर हैं।
58~
59## अंतर्निहित AI: जब ब्राउज़र मॉडल लाता है
60~
61क्रोम स्थानीय संकेतों, संक्षेपण, लेखन, पुनर्लेखन, अनुवाद, भाषा का पता लगाने और प्रूफरीडिंग जैसे कार्यों के लिए अंतर्निहित एपीआई पर जोर दे रहा है। यह विचार बहुत दिलचस्प है: ब्राउज़र मॉडल, उपलब्धता और अपडेट का प्रबंधन करता है; ऐप प्लेटफ़ॉर्म के करीब एक एपीआई का उपयोग करता है।
62~
63यदि यह अच्छा काम करता है, तो यह बहुत कुछ बदल देता है:
64~
65- सरल कार्यों के लिए कम सर्वर कॉल;
66- डेटा जो डिवाइस पर रह सकता है;
67- कम विलंबता;
68- ऑफ़लाइन या अर्ध-ऑफ़लाइन अनुभव;
69- लेखन और अनुवाद के लिए अधिक प्राकृतिक UX।
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- जटिल 3डी संपादक;
165- ब्राउज़र में गॉसियन स्प्लैटिंग;
166- वास्तविक समय वीडियो फ़िल्टर;
167- हल्का सीएडी;
168- वैज्ञानिक दृश्यावलोकन;
169- तत्काल पूर्वावलोकन के साथ रचनात्मक उपकरण;
170- यूआई के निकट दृष्टि अनुमान;
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- [वेबजीपीयू एपीआई - एमडीएन](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [वेबजीपीयू विनिर्देश - W3C](https://www.w3.org/TR/webgpu/)
201- [अंतर्निहित एआई - डेवलपर्स के लिए क्रोम](https://developer.chrome.com/docs/ai/built-in)
202- [अंतर्निहित एआई एपीआई - डेवलपर्स के लिए क्रोम](https://developer.chrome.com/docs/ai/built-in-apis)
203- [वेबएनएन एपीआई](https://webnn.io/)
204~