1~
2لسنوات كان المتصفح هو الوجه الجميل للتطبيق وكانت السحابة هي المكان الذي تحدث فيه الأشياء الصعبة. يقوم المستخدم بكتابة ملف، والنقر عليه، وتحميله؛ ترسل الواجهة الأمامية كل شيء إلى الخادم؛ يستدعي الخادم نموذجًا؛ الجواب يعود.
3~
4يظل هذا المخطط مفيدًا جدًا، ولكنه ليس مجانيًا. تجلب كل مكالمة أسئلة حول زمن الوصول والتكلفة والتبعية للشبكة والخصوصية. إذا كان المستخدم يكتب جملة ويريد اقتراحًا، فسيتم وزنه بنصف ثانية. إذا كنت تصنف آلاف المدخلات الصغيرة، فإن البنسات تصبح نقودًا حقيقية. إذا كان النص حساسًا، فإن إرساله من الجهاز ليس خيارًا محايدًا.
5~
6ولهذا السبب فإن WebGPU والذكاء الاصطناعي الموجود على الجهاز في حالة من الضجيج. ليس لأننا سنقوم بتشغيل كل نموذج في المتصفح غدًا. لأن بعض الميزات الذكية يمكن أن تقترب من المستخدم.
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) من المتصفح. لا يقتصر الأمر على الرسومات ثلاثية الأبعاد الجميلة فقط. وهو مهم أيضًا لأنه يكشف عن العناصر الأولية المناسبة للحوسبة: أعباء العمل المتوازية، والتظليل، وخطوط الأنابيب الأقرب إلى ما تقوم به وحدات معالجة الرسومات بشكل جيد.
34~
35بالنسبة للذكاء الاصطناعي والتصور العلمي والمحررات ثلاثية الأبعاد ومرشحات الفيديو والأدوات الإبداعية، فإن هذا الاختلاف محسوس. لقد فعل 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تقول هذه الميزة شيئًا مهمًا: WebGPU ليس حقًا ممنوحًا على كل جهاز. إنها القدرة على التحقق. بعض المتصفحات لا تدعمها بشكل كامل، وبعض وحدات معالجة الرسومات بها قيود، وبعض بيئات المؤسسات تعمل على تعطيل الميزات، ويستخدم بعض المستخدمين أجهزة متواضعة.
58~
59## الذكاء الاصطناعي المدمج: عندما يقوم المتصفح بإحضار النموذج
60~
61يقوم Chrome بدفع واجهات برمجة التطبيقات المضمنة لمهام مثل المطالبات المحلية والتلخيص والكتابة وإعادة الكتابة والترجمة واكتشاف اللغة والتدقيق اللغوي. الفكرة مثيرة للاهتمام للغاية: يقوم المتصفح بإدارة النموذج والتوفر والتحديثات؛ يستخدم التطبيق واجهة برمجة التطبيقات (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بدون المقاييس، يصبح الذكاء الاصطناعي الموجود على الجهاز خيارًا جماليًا. ومع المقاييس، يصبح الأمر بمثابة رافعة للمنتج.
129~
130## تجربة المستخدم للنموذج مهمة
131~
132إذا احتاج المتصفح إلى تنزيل نموذج، فسيدركه المستخدم. لا تخفيه وراء الدوار الغامض. من الأفضل أن نكون واضحين: "نحن نجهز النموذج لاستخدام هذه الوظيفة بشكل أسرع وحتى في وضع عدم الاتصال."
133~
134تجربة جيدة:
135~
136- يظهر حالة التحضير.
137- لا يمنع الصفحة بأكملها؛
138- يسمح لك بمتابعة التراجع السحابي؛
139- وتجنب مفاجآت البطارية والذاكرة؛
140- تذكر النموذج كلما أمكن ذلك؛
141- اشرح الفائدة في جملة واحدة ملموسة.
142~
143أسوأ ما في الأمر هو أن الميزة "الذكية" تبدو معطلة لأنها تقوم بتنزيل شيء ما بصمت.
144~
145## الخصوصية: أفضل، وليست آمنة تلقائيًا
146~
147يمكن أن تكون معالجة البيانات الموجودة على الجهاز ميزة كبيرة. ليس من الضروري أن تخرج مسودة البريد الإلكتروني أو المستند الداخلي أو الملاحظة الشخصية من متصفحك لتلقي اقتراح.
148~
149ومع ذلك، المحلي لا يعني تلقائيا آمنة. ومع ذلك، عليك أن تفكر في:
150~
151- XSS.
152- سجلات عرضية؛
153- البيانات المحفوظة في التخزين؛
154- الحقن الفوري من محتوى غير موثوق به؛
155- الأذونات الممنوحة للنموذج؛
156- المخرجات المستخدمة في الإجراءات التلقائية.
157~
158إذا كان بإمكان النموذج المحلي قراءة صفحة ويب ثم ملء نموذج، فقد تحاول تلك الصفحة التعامل معه. إذا كان بإمكانه استدعاء الأداة، يلزم التأكيد. إذا كان ينتج مخرجات منظمة، فيجب التحقق من صحته. إن حقيقة تشغيله على الجهاز تقلل من بعض مخاطر الخصوصية، ولكنها لا تلغي نموذج الأمان.
159~
160## حيث يصبح الأمر مثيرًا للاهتمام حقًا
161~
162النص هو مجرد البداية. يجعل WebGPU تجارب الويب ذات مصداقية والتي كانت تبدو حتى وقت قريب وكأنها تطبيق أصلي:
163~
164- محررات ثلاثية الأبعاد معقدة؛
165- رش غاوسي في المتصفح؛
166- مرشحات الفيديو في الوقت الحقيقي.
167- CAD خفيف الوزن؛
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~
195لا تجعل WebGPU وWebNN وواجهات برمجة التطبيقات AI المضمنة المتصفح قويًا. يجعلونه أكثر نضجا. وبالنسبة لأولئك الذين يقومون ببناء منتجات الويب، فهذه أخبار ضخمة.
196~
197## مصادر مفيدة
198~
199- [واجهة برمجة تطبيقات WebGPU - MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
200- [مواصفات WebGPU - W3C](https://www.w3.org/TR/webgpu/)
201- [الذكاء الاصطناعي المدمج - Chrome للمطورين](https://developer.chrome.com/docs/ai/built-in)
202- [واجهات برمجة تطبيقات الذكاء الاصطناعي المضمنة - Chrome للمطورين](https://developer.chrome.com/docs/ai/built-in-apis)
203- [واجهة برمجة تطبيقات ويب إن](https://webnn.io/)
204~