प्रॉम्प्ट और दायरा
एक वेब एप्लिकेशन इमेज-अपलोड गोपनीयता जोखिम और नेटवर्क लेटेंसी को कम करने के लिए ब्राउज़र में स्थानीय रूप से एक इमेज-वर्गीकरण मॉडल चलाना चाहता है। टीम मई 2026 W3C Web Neural Network API Candidate Recommendation Draft पर विचार कर रही है। WebNN एक कम्प्यूटेशनल-ग्राफ API है जो CPU, GPU और NPU निष्पादन को लक्षित कर सकता है; विनिर्देश (specification) अभी भी विकसित हो रहा है, इसलिए Candidate Recommendation Draft हर ब्राउज़र में स्थिर समर्थन का वादा नहीं है।
मॉडल रूपांतरण, ग्राफ निर्माण और संकलन, इन्फ्रेंस डिस्पैच, डिवाइस चयन, फ़ॉलबैक और रिलीज़ सत्यापन को कवर करते हुए एक संपूर्ण उत्तर दें।
साक्षात्कारकर्ता क्या मूल्यांकन करता है
साक्षात्कारकर्ता एक स्पष्ट "एक बार बनाएं, कई बार निष्पादित करें" (build once, execute many times) जीवनचक्र और एसिंक्रोनस MLGraphBuilder.build() संकलन तथा एसिंक्रोनस MLContext.dispatch() निष्पादन के बीच अंतर की तलाश करता है। WebNN को हार्डवेयर-अज्ञेयवादी (hardware-agnostic) अमूर्तता के रूप में वर्णित किया जाना चाहिए, न कि इस गारंटी के रूप में कि प्रत्येक ऑपरेटर हर डिवाइस पर समान रूप से प्रदर्शन करता है।
मजबूत उत्तर ऑपरेटर कवरेज, टेन्सर बाइंडिंग, मुख्य-थ्रेड (main-thread) ब्लॉकिंग, क्षमता पहचान, गोपनीयता और फिंगरप्रिंटिंग, ब्राउज़र अनुकूलता और एक प्रतिवर्ती (reversible) कैनरी योजना पर चर्चा करते हैं।
उत्तर देने से पहले स्पष्टीकरण संबंधी प्रश्न
- क्या मॉडल निश्चित आकारों (fixed shapes) का उपयोग करता है, या इसे गतिशील आकारों (dynamic shapes) और एकाधिक प्रिसिजन (precisions) का समर्थन करना चाहिए?
- क्या लक्षित ब्राउज़र और ऑपरेटिंग सिस्टम समान ऑपरेटरों और बैकएंड को प्रदर्शित करते हैं?
- क्या इन्फ्रेंस को ऑफ़लाइन रहना चाहिए, या एक सुरक्षित सर्वर फ़ॉलबैक स्वीकार्य है?
- क्या लक्ष्य फ़र्स्ट-पेंट गति, प्रति-फ़्रेम लेटेंसी, थ्रूपुट, ऊर्जा या गोपनीयता है?
- क्या मॉडल संवेदनशील छवियों को संसाधित करता है, और क्या हार्डवेयर क्षमता एक फिंगरप्रिंट सिग्नल बन सकती है?
30-सेकंड का उत्तर ढांचा
"मैं WebNN को एक उम्मीदवार निष्पादन बैकएंड के रूप में मानूंगा। पहले मैं मॉडल ऑपरेटरों और टेन्सर लेआउट को मान्य करूंगा, फिर ग्राफ निर्माण और संकलन को इन्फ्रेंस पथ से बाहर ले जाऊंगा। संकलन और डिस्पैच एसिंक्रोनस हैं, जिनमें नामित टेन्सर इनपुट और आउटपुट को बांधते हैं। रिलीज़ से पहले मैं एक ब्राउज़र, डिवाइस और मॉडल-संस्करण मैट्रिक्स बनाऊंगा; असमर्थित क्षमताएं या संकलन विफलताएं स्पष्ट डेटा सीमा के साथ WebAssembly या सर्वर पर फ़ॉलबैक करेंगी। मैं पहले संकलन, स्थिर-अवस्था इन्फ्रेंस, मेमोरी, ऊर्जा और मुख्य-थ्रेड जवाबदेही को मापूंगा, धीरे-धीरे कैनरी करूंगा, और एक किल स्विच रखूंगा।"
चरण-दर-चरण गहन उत्तर
मॉडल अनुबंध को फ्रीज करें
इनपुट आकार, डेटा प्रकार, लेआउट, सामान्यीकरण (normalization), आउटपुट लेबल और एक त्रुटि सहनशीलता तय करें। मॉडल को एक समर्थित ऑपरेटर सबग्राफ में बदलें, उपयोगकर्ता डिवाइस पर आंशिक निष्पादन के बाद के बजाय ग्राफ निर्माण के दौरान ही असमर्थित ऑपरेटरों का पता लगाएं। परत-दर-परत तुलना के लिए WebAssembly या सर्वर संदर्भ कार्यान्वयन बनाए रखें।
ग्राफ बनाएं और संकलित करें
navigator.ml के माध्यम से एक संदर्भ और MLGraphBuilder बनाएं, फिर इनपुट, स्थिरांक और ऑपरेटरों को संयोजित करें। build() ग्राफ को संकलित करता है और एक Promise लौटाता है; प्रत्येक बिल्डर के पास एक ग्राफ होना चाहिए। ग्राफ को पहले से या एक Worker में वार्म करें ताकि पहला संकलन क्लिक लेटेंसी न बने।
const context = await navigator.ml.createContext({ deviceType: 'gpu' });
const builder = new MLGraphBuilder(context);
const input = builder.input('image', {
dataType: 'float32',
dimensions: [1, 224, 224, 3],
});
const weights = builder.constant(weightDescriptor, weightBuffer);
const logits = builder.conv2d(input, weights, convOptions);
const graph = await builder.build({ logits });डिवाइस विकल्प केवल एक उम्मीदवार नीति है; प्रत्येक मान को स्वीकार करने का अनुमान लगाने के बजाय लक्ष्य ब्राउज़र और विनिर्देश संस्करण के विरुद्ध कार्यान्वयन को मान्य किया जाना चाहिए।
एसिंक्रोनस निष्पादन और मेमोरी प्रवाह को डिज़ाइन करें
dispatch() ग्राफ निष्पादन को एक निष्पादन समयरेखा पर सबमिट करता है और तुरंत वापस आ जाता है। नामित इनपुट और आउटपुट टेन्सर को बाइंड करें, फिर निष्पादन पूरा होने के बाद परिणाम पढ़ें। प्रति फ़्रेम आवंटित करने के बजाय बार-बार इन्फ्रेंस के लिए संकलित ग्राफ, संदर्भ और बफ़र्स का पुन: उपयोग करें। कैमरा स्ट्रीम को बैकप्रेशर की आवश्यकता होती है: एक अनबाउंड कतार बनाने के बजाय नया फ़्रेम ड्रॉप या मर्ज करें जबकि पिछला फ़्रेम अभी भी चल रहा हो।
डिवाइस और फ़ॉलबैक चुनें
CPU, GPU, या NPU चुनने से पहले API, ऑपरेटर और मॉडल समर्थन का पता लगाएं। डिवाइस की उपलब्धता यह साबित नहीं करती कि लक्ष्य ऑपरेटर कुशल हैं; एंड-टू-एंड मापों के आधार पर चयन करें। एक फ़ॉलबैक श्रृंखला WebNN → WebAssembly → सर्वर हो सकती है, लेकिन प्रत्येक स्तर को प्रीप्रोसेसिंग और परिणाम जांच साझा करनी चाहिए। एक सर्वर फ़ॉलबैक छवियों को अपलोड करता है, इसलिए UI और नेटवर्क परत को सहमति और प्रतिधारण सीमाओं को स्पष्ट रूप से बताना चाहिए।
मुख्य थ्रेड और इंटरैक्शन को सुरक्षित रखें
ग्राफ निर्माण, संकलन, प्रीप्रोसेसिंग और पोस्टप्रोसेसिंग इंटरैक्शन को प्रभावित कर सकते हैं। भारी काम को एक Dedicated Worker में रखें और मुख्य थ्रेड को इनपुट कैप्चर और UI स्थिति पर बनाए रखें। पुराने परिणामों को खारिज करने के लिए रद्दीकरण या अनुक्रम संख्याओं (sequence numbers) का उपयोग करें। केवल औसत इन्फ्रेंस समय ही नहीं, बल्कि लंबे कार्यों (long tasks), इनपुट बर्स्ट और बैकग्राउंड-टैब रिकवरी को मापें।
शुद्धता और अनुकूलता मैट्रिक्स बनाएं
ब्राउज़र संस्करण, ऑपरेटिंग सिस्टम, डिवाइस प्रकार, मॉडल प्रिसिजन और ऑपरेटर सेट का मैट्रिक्स बनाएं। संदर्भ बैकएंड के साथ आउटपुट, सटीकता और सीमा इनपुट की तुलना करें। संकलन विफलताओं, असमर्थित ऑपरेटरों, डिवाइस हानि और संदर्भ विनाश को रिकॉर्ड करें। चूंकि W3C दस्तावेज़ अभी भी एक Candidate Recommendation Draft है, इसलिए रिलीज़ योजना में विनिर्देश परिवर्तनों और कार्यान्वयन अंतरों की अनुमति होनी चाहिए।
गोपनीयता, अनुमतियों और फिंगरप्रिंटिंग को संभालें
स्थानीय निष्पादन इमेज अपलोड को कम करता है, लेकिन मॉडल फ़ाइलें, कैश और टेलीमेट्री अभी भी जानकारी लीक कर सकते हैं। केवल आवश्यक भार (weights) को कैश करें, इनपुट सुविधाओं को लॉग करने से बचें, और डिवाइस प्रकार को उपयोगकर्ता पहचानकर्ता में न बदलें। विनिर्देश बताता है कि डिवाइस शेड्यूलिंग फिंगरप्रिंट सिग्नल बना सकती है; इसलिए क्षमता परिणामों को न्यूनतम और अल्पकालिक रखा जाना चाहिए, जिसमें एक सॉफ्टवेयर या सर्वर विकल्प मौजूद हो।
कैनरी, निगरानी और रोलबैक
एक गैर-संवेदनशील मॉडल और एक छोटे ब्राउज़र सेट के साथ शुरुआत करें। पहले संकलन, स्थिर-अवस्था P50/P95, मुख्य-थ्रेड लंबे कार्यों, मेमोरी, ऊर्जा, विफलता दर और फ़ॉलबैक दर की तुलना करें। मॉडल या ब्राउज़र अपग्रेड पर मैट्रिक्स को फिर से चलाएं। यदि डिवाइस क्रैश होते हैं, सटीकता में गिरावट आती है, ऊर्जा अत्यधिक खर्च होती है, या गोपनीयता आवश्यकताएं विफल होती हैं, तो WebNN को अक्षम करें और संदर्भ बैकएंड का उपयोग करें; विश्लेषण के लिए संस्करण, डिवाइस और मॉडल हैश बनाए रखें।
उच्च गुणवत्ता वाला मॉडल उत्तर
"मैं मॉडल इनपुट, आउटपुट और त्रुटि अनुबंध को फ्रीज करूंगा, फिर WebNN में ऑपरेटर मैपिंग को सत्यापित करूंगा। ग्राफ को एक बार बनाया और संकलित किया जाता है; build() और dispatch() एसिंक्रोनस प्रवाह का पालन करते हैं, और इन्फ्रेंस लूप अपने संदर्भ और बफ़र्स का पुन: उपयोग करता है। रिलीज़ मैट्रिक्स ब्राउज़र, डिवाइस और मॉडल संस्करणों को कवर करता है, जिसमें Workers संकलन और प्रीप्रोसेसिंग को संभालते हैं। WebNN, WebAssembly और सर्वर एक अवलोकनीय फ़ॉलबैक श्रृंखला बनाते हैं, और सर्वर फ़ॉलबैक अपलोड सीमा को बताता है। कैनरी मेट्रिक्स में पहली और स्थिर-अवस्था लेटेंसी, लंबे कार्य, मेमोरी, ऊर्जा, सटीकता और विफलता दर शामिल हैं; एक किल स्विच तुरंत संदर्भ बैकएंड को पुनर्स्थापित करता है।"
सामान्य गलतियाँ
- एक Candidate Recommendation को सार्वभौमिक समर्थन मानना → ब्राउज़र या ऑपरेटर की कमी उपयोगकर्ताओं के अनुभव को बाधित करती है → एक संस्करण और क्षमता मैट्रिक्स बनाएं।
- प्रत्येक अनुरोध पर ग्राफ को संकलित करना → पहले रन की लागत बार-बार आती है → संकलित ग्राफ को वार्म करें और पुन: उपयोग करें।
- केवल एक आदर्श GPU पर बेंचमार्किंग करना → CPU या NPU पथ विफल हो जाते हैं → प्रत्येक बैकएंड पर एंड-टू-एंड मापें।
- डिस्पैच को सिंक्रोनस मानना → रुकावट (jank) या अव्यवस्थित परिणाम → एसिंक्रोनस स्थिति और अनुक्रम संख्याओं का उपयोग करें।
- प्रत्येक कैमरा फ़्रेम को कतारबद्ध करना → लेटेंसी बिना किसी सीमा के बढ़ती है → बैकप्रेशर लागू करें और पुराने फ़्रेम छोड़ें।
- डिवाइस क्षमता को पहचान के रूप में रिपोर्ट करना → फिंगरप्रिंट का जोखिम बढ़ता है → पहचान को न्यूनतम करें और एक सॉफ्टवेयर फ़ॉलबैक बनाए रखें।
अनुवर्ती प्रश्न और उत्तर
अनुवर्ती प्रश्न 1: सीधे WebGPU का उपयोग क्यों नहीं करते?
WebGPU निचले स्तर के संसाधनों और शेडर नियंत्रण को प्रदर्शित करता है, जो कस्टम ऑपरेटरों और सूक्ष्म शेड्यूलिंग के लिए उपयुक्त है। WebNN एक उच्च-स्तरीय तंत्रिका नेटवर्क ग्राफ अमूर्तता प्रदान करता है जो फ्रेमवर्क और हार्डवेयर बैकएंड पर अधिक सीधे मैप करता है। ऑपरेटर कवरेज, रखरखाव क्षमता, प्रदर्शन लक्ष्यों और गोपनीयता सीमाओं के आधार पर चयन करें।
अनुवर्ती प्रश्न 2: संकलन में दस सेकंड लगते हैं। आप उपयोगकर्ता-दृश्यमान प्रतीक्षा से कैसे बचते हैं?
मॉडल लोडिंग और संकलन को एक Worker में ले जाएं, निष्क्रिय समय के दौरान वार्म करें, और अखंडता-जांचे गए भार को कैश करें। यदि पहला अनुरोध अभी भी अनुपलब्ध है, तो एक सच्ची स्थिति दिखाएं और WebAssembly या सर्वर फ़ॉलबैक का उपयोग करें; संकलन विफलता को कभी भी नकली आउटपुट के पीछे न छिपाएं।
अनुवर्ती प्रश्न 3: GPU आउटपुट कभी-कभी संदर्भ से भिन्न होता है। आप क्या करते हैं?
फ़्लोटिंग-पॉइंट राउंडिंग, प्रिसिजन रूपांतरण, ऑपरेटर कार्यान्वयन अंतर और एक वास्तविक मॉडल दोष को अलग करें। निश्चित इनपुट, मध्यवर्ती टेन्सर और सहनशीलता सीमाओं के साथ पुनरुत्पादन करें; यदि उत्पाद सहनशीलता पार हो जाती है, तो किसी अन्य बैकएंड का उपयोग करें और ब्राउज़र, ड्राइवर और मॉडल संस्करणों को रिकॉर्ड करें।
अनुवर्ती प्रश्न 4: उपयोगकर्ता इमेज अपलोड करने से मना करता है और WebNN अनुपलब्ध है। फिर क्या?
स्थानीय WebAssembly या एक स्पष्ट अनुपलब्ध स्थिति की पेशकश करें; उपयोगकर्ता की पसंद को बायपास न करें। उत्पाद मॉडल की जटिलता को कम कर सकता है या एक मैन्युअल प्रवाह की पेशकश कर सकता है, लेकिन इसे डेटा सीमा को पारदर्शी रखना चाहिए।