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 یک API مدرن برای استفاده از GPU از مرورگر است. این فقط برای گرافیک های سه بعدی زیباتر نیست. همچنین مهم است زیرا موارد اولیه مناسب برای محاسبات را نشان می دهد: بارهای کاری موازی، سایه زن ها، خطوط لوله نزدیک به آنچه که 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 حقی نیست که برای هر دستگاهی اعطا شود. این یک توانایی برای تأیید است. برخی از مرورگرها به طور کامل از آن پشتیبانی نمی کنند، برخی از GPU ها محدودیت هایی دارند، برخی از محیط های سازمانی ویژگی ها را غیرفعال می کنند، برخی از کاربران از سخت افزار متوسطی استفاده می کنند.
58 
59## هوش مصنوعی داخلی: زمانی که مرورگر مدل را می آورد
60 
61Chrome APIهای داخلی را برای کارهایی مانند درخواست‌های محلی، خلاصه‌سازی، نوشتن، بازنویسی، ترجمه، تشخیص زبان و تصحیح انجام می‌دهد. ایده بسیار جالب است: مرورگر مدل، در دسترس بودن و به روز رسانی را مدیریت می کند. این برنامه از یک API نزدیکتر به پلتفرم استفاده می کند.
62 
63اگر خوب کار کند، تغییرات زیادی می کند:
64 
65- تماس های سرور کمتر برای کارهای ساده؛
66- داده هایی که ممکن است در دستگاه باقی بماند؛
67- تأخیر کمتر؛
68- تجربیات آفلاین یا نیمه آفلاین؛
69- UX طبیعی تر برای نوشتن و ترجمه.
70 
71اما باید به عنوان افزایش پیشرونده در نظر گرفته شود. برخی از APIها پایدار هستند، برخی دیگر در آزمایش اولیه یا پیش نمایش هستند، برخی دیگر هنوز به نسخه، زبان و دستگاه بستگی دارند.
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## بازگشت یک برنامه غم انگیز B نیست
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## UX مدل مهم است
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 
195WebGPU، WebNN و 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- [هوش مصنوعی داخلی - Chrome for Developers](https://developer.chrome.com/docs/ai/built-in)
202- [APIهای AI داخلی - Chrome for Developers](https://developer.chrome.com/docs/ai/built-in-apis)
203- [WebNN API](https://webnn.io/)
204