1 
2เป็นเวลาหลายปีที่เบราว์เซอร์เป็นหน้าตาที่สวยงามของแอปพลิเคชัน และระบบคลาวด์คือจุดที่เรื่องยากๆ เกิดขึ้น ผู้ใช้เขียน คลิก อัพโหลดไฟล์ ส่วนหน้าส่งทุกอย่างไปยังเซิร์ฟเวอร์ เซิร์ฟเวอร์เรียกโมเดล คำตอบกลับมา
3 
4โครงการนี้ยังคงมีประโยชน์มาก แต่ก็ไม่ฟรี การโทรทุกครั้งทำให้เกิดความล่าช้า ค่าใช้จ่าย การพึ่งพาเครือข่าย และคำถามเกี่ยวกับความเป็นส่วนตัว หากผู้ใช้เขียนประโยคและต้องการคำแนะนำ ให้ใช้เวลาครึ่งวินาที หากคุณจำแนกปัจจัยการผลิตเล็กๆ น้อยๆ นับพันเพนนีก็จะกลายเป็นเงินจริง หากข้อความมีความละเอียดอ่อน การส่งออกจากอุปกรณ์ก็ไม่ใช่ทางเลือกที่เป็นกลาง
5 
6นั่นเป็นเหตุผลว่าทำไม WebGPU และ AI บนอุปกรณ์ถึงได้รับความนิยม ไม่ใช่เพราะเราจะเรียกใช้ทุกรุ่นในเบราว์เซอร์พรุ่งนี้ เพราะฟีเจอร์อัจฉริยะบางอย่างสามารถเข้าใกล้ผู้ใช้ได้มากขึ้น
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 จากเบราว์เซอร์ ไม่ใช่เพียงเพื่อกราฟิก 3D ที่สวยงามยิ่งขึ้นเท่านั้น นอกจากนี้ยังเป็นสิ่งสำคัญเนื่องจากจะเปิดเผยสิ่งพื้นฐานที่เหมาะสมสำหรับการประมวลผล: ปริมาณงานแบบขนาน, เชเดอร์, ไปป์ไลน์ที่ใกล้เคียงกับสิ่งที่ GPU ทำได้ดี
34 
35สำหรับ AI การสร้างภาพทางวิทยาศาสตร์ โปรแกรมแก้ไข 3 มิติ ตัวกรองวิดีโอ และเครื่องมือสร้างสรรค์ รู้สึกถึงความแตกต่างนี้ได้ 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## AI ในตัว: เมื่อเบราว์เซอร์นำโมเดลมา
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 
96Cloud Fallback ไม่ใช่ความพ่ายแพ้ เป็นส่วนหนึ่งของผลิตภัณฑ์
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หากไม่มีการวัดผล AI บนอุปกรณ์ก็จะกลายเป็นตัวเลือกที่สวยงาม ด้วยตัวชี้วัด มันจะกลายเป็นคันโยกผลิตภัณฑ์
129 
130## UX ของโมเดลมีความสำคัญ
131 
132หากเบราว์เซอร์จำเป็นต้องดาวน์โหลดโมเดล ผู้ใช้จะรับรู้ได้ อย่าซ่อนมันไว้ข้างหลังสปินเนอร์ที่คลุมเครือ ให้ชัดเจนดีกว่า: "เราเตรียมโมเดลเพื่อใช้ฟังก์ชันนี้เร็วขึ้นและออฟไลน์ด้วย"
133 
134ประสบการณ์ที่ดี:
135 
136- แสดงสถานะการเตรียมการ
137- ไม่ปิดกั้นทั้งหน้า
138- ช่วยให้คุณสามารถใช้ระบบคลาวด์สำรองต่อไปได้
139- หลีกเลี่ยงแบตเตอรี่และหน่วยความจำที่น่าประหลาดใจ
140- จำโมเดลทุกครั้งที่เป็นไปได้
141- อธิบายประโยชน์ในประโยคเดียวที่เป็นรูปธรรม
142 
143สิ่งที่แย่ที่สุดคือฟีเจอร์ "อัจฉริยะ" ที่ดูเหมือนจะใช้งานไม่ได้เพราะกำลังดาวน์โหลดบางอย่างอย่างเงียบๆ
144 
145## ความเป็นส่วนตัว: ดีกว่า ไม่ปลอดภัยโดยอัตโนมัติ
146 
147การประมวลผลข้อมูลบนอุปกรณ์อาจเป็นข้อได้เปรียบอย่างมาก อีเมลฉบับร่าง เอกสารภายใน หรือบันทึกส่วนตัวไม่จำเป็นต้องออกจากเบราว์เซอร์เพื่อรับคำแนะนำ
148 
149อย่างไรก็ตาม ท้องถิ่นไม่ได้หมายความว่าปลอดภัยโดยอัตโนมัติ อย่างไรก็ตาม คุณต้องคำนึงถึง:
150 
151- เอสเอสเอส;
152- บันทึกโดยไม่ได้ตั้งใจ
153- ข้อมูลที่บันทึกไว้ในที่จัดเก็บ
154- การฉีดทันทีจากเนื้อหาที่ไม่น่าเชื่อถือ
155- การอนุญาตที่มอบให้กับโมเดล
156- เอาต์พุตที่ใช้ในการดำเนินการอัตโนมัติ
157 
158หากโมเดลท้องถิ่นสามารถอ่านเว็บเพจแล้วกรอกแบบฟอร์มได้ เพจนั้นก็สามารถพยายามจัดการมันได้ หากสามารถเรียกเครื่องมือได้ จำเป็นต้องมีการยืนยัน หากสร้างเอาต์พุตที่มีโครงสร้าง จะต้องได้รับการตรวจสอบความถูกต้อง ความจริงที่ว่าอุปกรณ์ทำงานบนอุปกรณ์ช่วยลดความเสี่ยงด้านความเป็นส่วนตัว แต่ไม่ได้กำจัดรูปแบบการรักษาความปลอดภัย
159 
160## มันน่าสนใจตรงไหน.
161 
162ข้อความเป็นเพียงจุดเริ่มต้น WebGPU ทำให้ประสบการณ์การใช้งานเว็บมีความน่าเชื่อถือจนเมื่อไม่นานมานี้ดูเหมือนเป็นแอปแบบเนทีฟ:
163 
164- โปรแกรมแก้ไข 3D ที่ซับซ้อน
165- การสาดแบบเกาส์ในเบราว์เซอร์
166- ตัวกรองวิดีโอแบบเรียลไทม์
167- CAD น้ำหนักเบา;
168- การสร้างภาพข้อมูลทางวิทยาศาสตร์
169- เครื่องมือสร้างสรรค์พร้อมดูตัวอย่างทันที
170- การอนุมานการมองเห็นใกล้กับ UI;
171- เกมเบราว์เซอร์ที่ทะเยอทะยานมากขึ้น
172 
173ส่วนหน้า กราฟิก และการเรียนรู้ของเครื่องเริ่มผสมผสานกันที่นี่ มันเป็นพื้นที่ที่ค่อนข้างอึดอัด แต่ก็อุดมสมบูรณ์เช่นกัน เบราว์เซอร์กลับมาเป็นแพลตฟอร์มแอปพลิเคชันที่จริงจัง ไม่ใช่แค่ที่ที่เราวางแบบฟอร์มและแดชบอร์ด
174 
175## รายการตรวจสอบก่อนการผลิต
176 
177ก่อนที่จะแสดงคุณสมบัติบนอุปกรณ์ต่อหน้าผู้ใช้ ฉันจะตรวจสอบ:
178 
1791. กำหนดเป้าหมายเบราว์เซอร์และอุปกรณ์
1802. Cloud fallback หรือการเสื่อมสภาพที่สวยงาม
1813. เวลาในการดาวน์โหลดและแคชโมเดล
1824. หน่วยความจำและแบตเตอรี่บนฮาร์ดแวร์โดยเฉลี่ย
1835. คุณภาพเมื่อเทียบกับเวอร์ชันคลาวด์
1846. นโยบายความเป็นส่วนตัวและข้อความของผู้ใช้
1857. การทดสอบด้วยอินพุตที่ไม่เป็นมิตร
1868. แยกเมตริกสำหรับรันไทม์ในเครื่องและบนคลาวด์
1879. วางแผนที่จะอัปเดตหรือปิดใช้งานเทมเพลต
188 
189มันเป็นรายการที่เป็นรูปธรรมเพราะปัญหาเป็นรูปธรรม คุณลักษณะ AI ที่ช้า เปราะบาง หรือทึบแสงไม่ได้ดีขึ้นเพียงเพราะมันทำงานในเบราว์เซอร์
190 
191## การประนีประนอมที่ถูกต้อง
192 
193ฉันไม่เชื่อว่าอนาคตคือ "ทุกสิ่งบนอุปกรณ์" และฉันไม่คิดว่าคลาวด์จะยังคงเป็นเพียงที่เดียวที่สมเหตุสมผลสำหรับการอนุมานเช่นกัน อนาคตที่เป็นไปได้มากที่สุดคือการผสมผสาน: ในท้องถิ่นเมื่อปรับปรุงเวลาแฝง ความเป็นส่วนตัว หรือต้นทุน คลาวด์เมื่อจำเป็นต้องมีคุณภาพ ข้อมูลที่อัปเดต และการควบคุมแบบรวมศูนย์
194 
195WebGPU, WebNN และ AI 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- [AI ในตัว - Chrome สำหรับนักพัฒนา](https://developer.chrome.com/docs/ai/built-in)
202- [AI API ในตัว - Chrome สำหรับนักพัฒนา](https://developer.chrome.com/docs/ai/built-in-apis)
203- [เว็บเอ็นเอ็นเอพีไอ](https://webnn.io/)
204