spinny:~/writing $ vim webgpu-on-device-ai-browser.md
1~2برای سالها مرورگر چهره خوب برنامه بود و ابر مکانی بود که اتفاقات سخت در آن رخ میداد. کاربر یک فایل را می نویسد، کلیک می کند، آپلود می کند. فرانت اند همه چیز را به سرور ارسال می کند. سرور یک مدل را فراخوانی می کند. جواب برمی گردد3~4این طرح بسیار مفید است، اما رایگان نیست. هر تماسی سوالات تاخیر، هزینه، وابستگی شبکه و حریم خصوصی را به همراه دارد. اگر کاربر در حال نوشتن جمله ای باشد و پیشنهادی بخواهد، نیم ثانیه وزن می کند. اگر هزاران ورودی کوچک را طبقه بندی کنید، سکه ها به پول واقعی تبدیل می شوند. اگر متن حساس است، ارسال آن از دستگاه یک انتخاب خنثی نیست.5~6به همین دلیل است که WebGPU و هوش مصنوعی روی دستگاه در هیاهو هستند. نه به این دلیل که فردا هر مدلی را در مرورگر اجرا خواهیم کرد. زیرا برخی از ویژگی های هوشمند می توانند به کاربر نزدیک شوند.7~8## لازم نیست همه چیز محلی شود9~10نسخه کودکانه استدلال این است: "ابر در مقابل دستگاه". نسخه مفید آن ترکیبی است.11~12برخی از کارها در دستگاه عالی به نظر می رسند: خلاصه های کوتاه، تشخیص زبان، بازنویسی نور، طبقه بندی ساده، فیلترهای تصویر، مدل های دید کوچک، تجربیات خلاقانه با بازخورد فوری.13~14سایر وظایف در فضای ابری بهتر باقی می مانند: استدلال پیچیده، مدل های مرزی، داده های سمت سرور، حسابرسی متمرکز، کیفیت یکنواخت، گردش کار که در آن باید هر مرحله را به دقت کنترل کنید.15~16معماری سالم در زمان اجرا تصمیم می گیرد:17~18```mermaid19flowchart TD20 User[کاربر] --> Browser[مرورگرها]21 Browser --> Detect[تشخیص ویژگی]22 Detect -->|پشتیبانی می شود| Local[استنباط محلی]23 Detect -->|پشتیبانی نمی شود| Cloud[بازگشتی ابری]24 Local --> UX[پاسخ سریع]25 Cloud --> UX26 UX --> Metrics[معیارها و کیفیت]27```28~29مرورگر مجبور نیست در برابر ابر پیروز شود. باید ابر را از انجام کارهایی که نیازی به انجام آن وجود ندارد نجات دهد.30~31## چرا WebGPU مهم است32~33WebGPU یک API مدرن برای استفاده از GPU از مرورگر است. این فقط برای گرافیک های سه بعدی زیباتر نیست. همچنین مهم است زیرا موارد اولیه مناسب برای محاسبات را نشان می دهد: بارهای کاری موازی، سایه زن ها، خطوط لوله نزدیک به آنچه که GPU ها به خوبی انجام می دهند.34~35برای هوش مصنوعی، تجسم علمی، ویرایشگرهای سه بعدی، فیلترهای ویدئویی و ابزارهای خلاقانه، این تفاوت احساس می شود. WebGL کارهای زیادی برای وب انجام داده است، اما WebGPU با مدلی متولد شد که برای زمان حال مناسب تر است.36~37اما اولین چیزی که باید بنویسید سایه زن نیست. این یک تشخیص ویژگی هوشیار است:38~39```typescript40export 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```typescript74type 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```typescript99interface 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~
NORMAL · webgpu-on-device-ai-browser.md [readonly]204 lines · :q to close