spinny:~/writing $ less webgpu-on-device-ai-browser.md
12वर्षों तक ब्राउज़र एप्लिकेशन का अच्छा चेहरा था और क्लाउड वह स्थान था जहां कठिन चीजें घटित होती थीं। उपयोगकर्ता फ़ाइल लिखता है, क्लिक करता है, अपलोड करता है; फ्रंटएंड सब कुछ सर्वर को भेजता है; सर्वर एक मॉडल को कॉल करता है; उत्तर वापस आता है.34यह योजना बहुत उपयोगी है, लेकिन मुफ़्त नहीं है। प्रत्येक कॉल विलंबता, लागत, नेटवर्क निर्भरता और गोपनीयता प्रश्न लेकर आती है। यदि उपयोगकर्ता एक वाक्य लिख रहा है और एक सुझाव चाहता है, तो आधे सेकंड का वजन होता है। यदि आप हजारों छोटे इनपुटों को वर्गीकृत कर रहे हैं, तो पेनी वास्तविक धन बन जाते हैं। यदि पाठ संवेदनशील है, तो उसे डिवाइस से भेजना कोई तटस्थ विकल्प नहीं है।56इसीलिए WebGPU और ऑन-डिवाइस AI प्रचार में हैं। इसलिए नहीं कि हम कल हर मॉडल को ब्राउज़र में चलाएंगे। क्योंकि कुछ इंटेलिजेंट फीचर्स यूजर के करीब पहुंच सकते हैं।78## जरूरी नहीं कि हर चीज स्थानीय हो जाए910तर्क का बचकाना संस्करण है: "क्लाउड बनाम डिवाइस"। उपयोगी संस्करण हाइब्रिड है.1112कुछ कार्य डिवाइस पर बहुत अच्छे लगते हैं: संक्षिप्त सारांश, भाषा का पता लगाना, प्रकाश पुनर्लेखन, सरल वर्गीकरण, छवि फ़िल्टर, छोटे दृष्टि मॉडल, तत्काल प्रतिक्रिया के साथ रचनात्मक अनुभव।1314अन्य कार्य क्लाउड में बेहतर रहते हैं: जटिल तर्क, फ्रंटियर मॉडल, सर्वर-साइड डेटा, केंद्रीकृत ऑडिट, समान गुणवत्ता, वर्कफ़्लो जहां आपको प्रत्येक चरण को सावधानीपूर्वक नियंत्रित करना होता है।1516स्वस्थ आर्किटेक्चर रनटाइम पर निर्णय लेता है:1718```mermaid19flowchart TD20 User[उपयोगकर्ता] --> Browser[ब्राउज़र्स]21 Browser --> Detect[सुविधा का पता लगाना]22 Detect -->|समर्थित| Local[स्थानीय अनुमान]23 Detect -->|समर्थित नहीं| Cloud[बादल वापसी]24 Local --> UX[त्वरित प्रतिक्रिया]25 Cloud --> UX26 UX --> Metrics[मेट्रिक्स और गुणवत्ता]27```2829ब्राउज़र को क्लाउड के ख़िलाफ़ जीतना ज़रूरी नहीं है। इसे क्लाउड को वह काम करने से बचाना होगा जिसे वहां करने की आवश्यकता नहीं है।3031## WebGPU क्यों मायने रखता है3233वेबजीपीयू ब्राउज़र से जीपीयू का उपयोग करने के लिए एक आधुनिक एपीआई है। यह सिर्फ अच्छे 3डी ग्राफ़िक्स के लिए नहीं है। यह इसलिए भी महत्वपूर्ण है क्योंकि यह कंप्यूटिंग के लिए उपयुक्त प्राइमेटिव्स को उजागर करता है: समानांतर वर्कलोड, शेडर्स, जीपीयू जो अच्छा करता है उसके करीब पाइपलाइन।3435एआई, वैज्ञानिक विज़ुअलाइज़ेशन, 3डी संपादकों, वीडियो फ़िल्टर और रचनात्मक टूल के लिए, यह अंतर महसूस किया जाता है। WebGL ने वेब के लिए बहुत कुछ किया है, लेकिन WebGPU का जन्म वर्तमान के लिए बेहतर मॉडल के साथ हुआ था।3637हालाँकि, लिखने वाली पहली चीज़ शेडर नहीं है। यह एक शांत सुविधा पहचान है:3839```typescript40export async function requestWebGpuDevice() {41 if (!('gpu' in navigator)) {42 return null;43 }4445 const adapter = await navigator.gpu.requestAdapter({46 powerPreference: 'high-performance',47 });4849 if (!adapter) {50 return null;51 }5253 return adapter.requestDevice();54}55```5657यह सुविधा एक महत्वपूर्ण बात कहती है: वेबजीपीयू हर डिवाइस पर दिया गया अधिकार नहीं है। यह सत्यापित करने की क्षमता है। कुछ ब्राउज़र इसका पूरी तरह से समर्थन नहीं करते हैं, कुछ जीपीयू की सीमाएँ हैं, कुछ एंटरप्राइज़ वातावरण सुविधाओं को अक्षम कर देते हैं, कुछ उपयोगकर्ता मामूली हार्डवेयर पर हैं।5859## अंतर्निहित AI: जब ब्राउज़र मॉडल लाता है6061क्रोम स्थानीय संकेतों, संक्षेपण, लेखन, पुनर्लेखन, अनुवाद, भाषा का पता लगाने और प्रूफरीडिंग जैसे कार्यों के लिए अंतर्निहित एपीआई पर जोर दे रहा है। यह विचार बहुत दिलचस्प है: ब्राउज़र मॉडल, उपलब्धता और अपडेट का प्रबंधन करता है; ऐप प्लेटफ़ॉर्म के करीब एक एपीआई का उपयोग करता है।6263यदि यह अच्छा काम करता है, तो यह बहुत कुछ बदल देता है:6465- सरल कार्यों के लिए कम सर्वर कॉल;66- डेटा जो डिवाइस पर रह सकता है;67- कम विलंबता;68- ऑफ़लाइन या अर्ध-ऑफ़लाइन अनुभव;69- लेखन और अनुवाद के लिए अधिक प्राकृतिक UX।7071लेकिन इसे प्रगतिशील वृद्धि के रूप में माना जाना चाहिए। कुछ एपीआई स्थिर हैं, अन्य मूल परीक्षण या पूर्वावलोकन में हैं, अन्य अभी भी संस्करण, भाषा और डिवाइस पर निर्भर हैं।7273```typescript74type LocalCapability = 'available' | 'downloadable' | 'unsupported';7576export async function getLocalSummarizerCapability(): Promise<LocalCapability> {77 const SummarizerApi = (globalThis as any).Summarizer;7879 if (!SummarizerApi?.availability) {80 return 'unsupported';81 }8283 const availability = await SummarizerApi.availability();8485 if (availability === 'available') return 'available';86 if (availability === 'downloadable') return 'downloadable';8788 return 'unsupported';89}90```9192विशिष्ट कोड बदल जाएगा, लेकिन पैटर्न बना रहेगा: आप उपलब्धता की जांच करते हैं, किसी भी डाउनलोड की व्याख्या करते हैं, फ़ॉलबैक की पेशकश करते हैं और गुणवत्ता मापते हैं।9394## फ़ॉलबैक कोई दुखद योजना बी नहीं है9596बादलों का गिरना कोई हार नहीं है. यह उत्पाद का हिस्सा है.9798```typescript99interface AiRequest {100 task: 'summarize' | 'rewrite' | 'classify';101 input: string;102}103104interface AiResult {105 output: string;106 runtime: 'local' | 'cloud';107}108109export async function runAiTask(request: AiRequest): Promise<AiResult> {110 const local = await tryLocalAi(request);111112 if (local) {113 return { output: local, runtime: 'local' };114 }115116 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());121122 return { output: cloud.output, runtime: 'cloud' };123}124```125126यह आर्किटेक्चर आपको उत्तरोत्तर सुधार करने की अनुमति देता है। स्थानीय समर्थन वाले लोगों को बेहतर विलंबता और गोपनीयता मिलती है। जिनके पास यह नहीं है वे अभी भी इस सुविधा का उपयोग करते हैं। आप स्थानीय अनुरोधों, समय, त्रुटियों, स्मृति, कथित गुणवत्ता और लागत का प्रतिशत माप सकते हैं।127128मेट्रिक्स के बिना, ऑन-डिवाइस AI एक सौंदर्यवादी विकल्प बन जाता है। मेट्रिक्स के साथ, यह एक उत्पाद लीवर बन जाता है।129130## मॉडल का UX मायने रखता है131132यदि ब्राउज़र को किसी मॉडल को डाउनलोड करने की आवश्यकता होती है, तो उपयोगकर्ता इसे समझ लेता है। इसे किसी अस्पष्ट स्पिनर के पीछे न छिपाएं। स्पष्ट होना बेहतर होगा: "हम इस फ़ंक्शन को तेज़ी से और ऑफ़लाइन भी उपयोग करने के लिए मॉडल तैयार करते हैं।"133134एक अच्छा अनुभव:135136- तैयारी की स्थिति दिखाता है;137- पूरे पेज को ब्लॉक नहीं करता;138- आपको क्लाउड फ़ॉलबैक जारी रखने की अनुमति देता है;139- बैटरी और मेमोरी आश्चर्य से बचें;140- जब भी संभव हो मॉडल को याद रखें;141- एक ठोस वाक्य में लाभ बताएं।142143सबसे खराब चीज़ एक "स्मार्ट" सुविधा है जो टूटी हुई दिखाई देती है क्योंकि यह चुपचाप कुछ डाउनलोड कर रही है।144145## गोपनीयता: बेहतर, स्वचालित रूप से सुरक्षित नहीं146147डिवाइस पर डेटा प्रोसेस करना एक बड़ा फायदा हो सकता है। ड्राफ्ट ईमेल, आंतरिक दस्तावेज़, या व्यक्तिगत नोट को सुझाव प्राप्त करने के लिए आपके ब्राउज़र को छोड़ने की आवश्यकता नहीं है।148149हालाँकि, स्थानीय का मतलब स्वचालित रूप से सुरक्षित नहीं है। हालाँकि, आपको इस बारे में सोचने की ज़रूरत है:150151- एक्सएसएस;152- आकस्मिक लॉग;153- भंडारण में सहेजा गया डेटा;154- अविश्वसनीय सामग्री से शीघ्र इंजेक्शन;155- मॉडल को दी गई अनुमतियाँ;156- स्वचालित क्रियाओं में उपयोग किए जाने वाले आउटपुट।157158यदि कोई स्थानीय मॉडल किसी वेब पेज को पढ़ सकता है और फिर एक फॉर्म भर सकता है, तो वह पेज उसमें हेरफेर करने का प्रयास कर सकता है। यदि यह टूल को कॉल कर सकता है, तो पुष्टि की आवश्यकता है। यदि यह संरचित आउटपुट उत्पन्न करता है, तो इसे मान्य किया जाना चाहिए। तथ्य यह है कि यह डिवाइस पर चलता है, कुछ गोपनीयता जोखिमों को कम करता है, लेकिन सुरक्षा मॉडल को समाप्त नहीं करता है।159160## जहां यह वास्तव में दिलचस्प हो जाता है161162पाठ तो बस शुरुआत है. WebGPU वेब अनुभवों को विश्वसनीय बनाता है जो हाल तक एक मूल ऐप की तरह लगता था:163164- जटिल 3डी संपादक;165- ब्राउज़र में गॉसियन स्प्लैटिंग;166- वास्तविक समय वीडियो फ़िल्टर;167- हल्का सीएडी;168- वैज्ञानिक दृश्यावलोकन;169- तत्काल पूर्वावलोकन के साथ रचनात्मक उपकरण;170- यूआई के निकट दृष्टि अनुमान;171- अधिक महत्वाकांक्षी ब्राउज़र गेम।172173यहां फ्रंटएंड, ग्राफिक्स और मशीन लर्निंग का मिश्रण शुरू होता है। यह कुछ हद तक अजीब क्षेत्र है, लेकिन उपजाऊ भी है: ब्राउज़र एक गंभीर एप्लिकेशन प्लेटफ़ॉर्म बन जाता है, न कि केवल वह स्थान जहां हम फॉर्म और डैशबोर्ड डालते हैं।174175## उत्पादन से पहले चेकलिस्ट176177उपयोगकर्ताओं के सामने ऑन-डिवाइस सुविधा डालने से पहले, मैं जाँच करूँगा:1781791. ब्राउज़र और डिवाइस को लक्षित करें.1802. बादल का गिरना या सुरुचिपूर्ण गिरावट।1813. डाउनलोड समय और मॉडल कैश.1824. औसत हार्डवेयर पर मेमोरी और बैटरी।1835. क्लाउड संस्करण की तुलना में गुणवत्ता।1846. गोपनीयता नीति और उपयोगकर्ता संदेश.1857. शत्रुतापूर्ण इनपुट के साथ परीक्षण.1868. स्थानीय और क्लाउड रनटाइम के लिए अलग-अलग मेट्रिक्स।1879. टेम्पलेट को अद्यतन या अक्षम करने की योजना बनाएं.188189यह एक ठोस सूची है क्योंकि समस्या ठोस है। एक धीमी, नाजुक या अपारदर्शी एआई सुविधा सिर्फ ब्राउज़र में चलने से बेहतर नहीं हो जाती।190191## सही समझौता192193मैं नहीं मानता कि भविष्य "डिवाइस पर सब कुछ" है। और मुझे नहीं लगता कि बादल अनुमान के लिए एकमात्र उचित स्थान रहेगा। सबसे संभावित भविष्य एक मिश्रण है: स्थानीय जब यह विलंबता, गोपनीयता या लागत में सुधार करता है; गुणवत्ता, अद्यतन डेटा और केंद्रीकृत नियंत्रण की आवश्यकता होने पर क्लाउड।194195WebGPU, WebNN और अंतर्निहित AI API ब्राउज़र को सर्वशक्तिमान नहीं बनाते हैं। वे उसे और अधिक वयस्क बनाते हैं। और वेब उत्पाद बनाने वालों के लिए यह बहुत बड़ी खबर है।196197## उपयोगी स्रोत198199- [वेबजीपीयू एपीआई - एमडीएन](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
:वेबजीपीयू और ऑन-डिवाइस एआई: ब्राउज़र एक गंभीर रनटाइम बनता जा रहा हैlines 1-204 (END) — press q to close