spinny:~/writing $ vim webgpu-on-device-ai-browser.md
1~2수년 동안 브라우저는 애플리케이션의 멋진 얼굴이었고 클라우드는 어려운 일이 일어나는 곳이었습니다. 사용자가 파일을 쓰고, 클릭하고, 업로드합니다. 프런트엔드는 모든 것을 서버로 보냅니다. 서버가 모델을 호출합니다. 대답이 돌아옵니다.3~4이 계획은 여전히 매우 유용하지만 무료는 아닙니다. 모든 통화에는 대기 시간, 비용, 네트워크 종속성 및 개인 정보 보호 관련 질문이 발생합니다. 사용자가 문장을 작성 중이고 제안을 원한다면 0.5초가 중요합니다. 수천 개의 작은 입력을 분류하면 동전이 진짜 돈이 됩니다. 텍스트가 민감한 경우 장치 밖으로 보내는 것은 중립적인 선택이 아닙니다.5~6이것이 바로 WebGPU와 온디바이스 AI가 과대평가되는 이유입니다. 내일 브라우저에서 모든 모델을 실행할 것이기 때문이 아닙니다. 일부 지능형 기능이 사용자에게 더 가까이 다가갈 수 있기 때문입니다.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는 브라우저에서 GPU를 사용하기 위한 최신 API입니다. 단지 더 멋진 3D 그래픽을 위한 것이 아닙니다. 또한 GPU가 잘하는 기능에 더 가까운 병렬 워크로드, 셰이더, 파이프라인 등 컴퓨팅에 적합한 기본 요소를 노출하기 때문에 중요합니다.34~35AI, 과학적 시각화, 3D 편집기, 비디오 필터 및 크리에이티브 도구의 경우 이러한 차이가 느껴집니다. 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## 내장 AI: 브라우저가 모델을 가져올 때60~61Chrome은 로컬 프롬프트, 요약, 쓰기, 재작성, 번역, 언어 감지 및 교정과 같은 작업을 위해 내장 API를 추진하고 있습니다. 아이디어는 매우 흥미롭습니다. 브라우저는 모델, 가용성 및 업데이트를 관리합니다. 앱은 플랫폼에 더 가까운 API를 사용합니다.62~63잘 작동하면 많이 변합니다.64~65- 간단한 작업에 대한 서버 호출 수가 적습니다.66- 장치에 남아 있을 수 있는 데이터67- 낮은 대기 시간;68- 오프라인 또는 반오프라인 경험;69- 글쓰기와 번역을 위한 보다 자연스러운 UX.70~71그러나 이는 점진적인 향상으로 간주되어야 합니다. 일부 API는 안정적이고 다른 API는 오리진 트라이얼 또는 미리 보기 상태이며 다른 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지표가 없으면 온디바이스 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- XSS;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. 클라우드 대체 또는 우아한 성능 저하.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- [WebNN API](https://webnn.io/)204~
NORMAL · webgpu-on-device-ai-browser.md [readonly]204 lines · :q to close