ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
Your Browser is the New Doctor: Building a Zero-Latency, Private AI Symptom Screener with WebLLM & WebGPU ๐Ÿฉบ๐Ÿ’ป
Dev.toDev.to
AI/ML

WebGPU ๊ธฐ๋ฐ˜ WebLLM ๋„์ž…์œผ๋กœ ์„œ๋ฒ„ ๋น„์šฉ 0์› ๋ฐ ์™„์ „ํ•œ ๊ฐœ์ธ์ •๋ณด ๋ณดํ˜ธ ๊ตฌํ˜„

Your Browser is the New Doctor: Building a Zero-Latency, Private AI Symptom Screener with WebLLM & WebGPU ๐Ÿฉบ๐Ÿ’ป

wellallyTech2026๋…„ 4์›” 14์ผ4๋ถ„intermediate

Context

๋ฏผ๊ฐํ•œ ์˜๋ฃŒ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์‹œ ๋ฐœ์ƒํ•˜๋Š” ํด๋ผ์šฐ๋“œ ์„œ๋ฒ„ ์ „์†ก์— ๋”ฐ๋ฅธ ๊ฐœ์ธ์ •๋ณด ์œ ์ถœ ์œ„ํ—˜๊ณผ ๋„คํŠธ์›Œํฌ ์ง€์—ฐ ์‹œ๊ฐ„์ด๋ผ๋Š” ๊ตฌ์กฐ์  ํ•œ๊ณ„ ์กด์žฌ. ๊ธฐ์กด AI ์•ฑ์˜ Thin Client-Heavy Backend ๊ตฌ์กฐ๋กœ๋Š” ์‹ค์‹œ๊ฐ„์„ฑ๊ณผ ๋ฐ์ดํ„ฐ ํ”„๋ผ์ด๋ฒ„์‹œ๋ฅผ ๋™์‹œ์— ์ถฉ์กฑํ•˜๊ธฐ ์–ด๋ ค์šด ์ƒํ™ฉ ๋ถ„์„.

Technical Solution

  • TVM.js ์˜ค์ผ€์ŠคํŠธ๋ ˆ์ด์…˜ ๋ ˆ์ด์–ด ํ™œ์šฉ์„ ํ†ตํ•œ ๋กœ์ปฌ GPU ๊ธฐ๋ฐ˜ ๋ชจ๋ธ ๊ฐ€์ค‘์น˜ ์ง์ ‘ ์‹คํ–‰ ๊ตฌ์กฐ ์„ค๊ณ„
  • WebGPU API ์ง€์› ์—ฌ๋ถ€ ํŒ๋‹จ ๋กœ์ง์„ ํ†ตํ•œ ํ•˜๋“œ์›จ์–ด ๊ฐ€์† ๊ฐ€๋Šฅ ์—ฌ๋ถ€ ์‚ฌ์ „ ๊ฒ€์ฆ ๋ฐ WASM/CPU Fallback ์ „๋žต ์ˆ˜๋ฆฝ
  • Llama-3-8B-Instruct-q4f16_1-MLC ๋ฐ Phi-3-mini ๋“ฑ Quantized ๋ชจ๋ธ ์ฑ„ํƒ์œผ๋กœ ์˜๋ฃŒ ์ถ”๋ก  ๋Šฅ๋ ฅ๊ณผ ๋‹ค์šด๋กœ๋“œ ํฌ๊ธฐ ๊ฐ„์˜ Trade-off ์ตœ์ ํ™”
  • Streaming Response ๊ตฌํ˜„์„ ํ†ตํ•œ ์‚ฌ์šฉ์ž ์ฒด๊ฐ ์ง€์—ฐ ์‹œ๊ฐ„(Perceived Latency) ์ตœ์†Œํ™”
  • Client-side Inference ๊ธฐ๋ฐ˜์˜ Zero-server ์•„ํ‚คํ…์ฒ˜ ์ „ํ™˜์œผ๋กœ ๋ฐ์ดํ„ฐ ์™ธ๋ถ€ ์œ ์ถœ ๊ฒฝ๋กœ ์›์ฒœ ์ฐจ๋‹จ

1. navigator.gpu API๋ฅผ ํ†ตํ•œ WebGPU ์ง€์› ์—ฌ๋ถ€ ํ™•์ธ ๋กœ์ง ๊ตฌํ˜„

2. ๋ชจ๋ธ ์‚ฌ์ด์ฆˆ์™€ ์ถ”๋ก  ์„ฑ๋Šฅ์˜ ๊ท ํ˜•์„ ์œ„ํ•œ Quantization ์ „๋žต ์ˆ˜๋ฆฝ

3. ๋Œ€์šฉ๋Ÿ‰ ๋ชจ๋ธ ๊ฐ€์ค‘์น˜ ๋กœ๋“œ ์‹œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์œ„ํ•œ Progress Callback ์ธํ„ฐํŽ˜์ด์Šค ์„ค๊ณ„

4. ํ•˜๋“œ์›จ์–ด ๋ฏธ์ง€์› ํ™˜๊ฒฝ์„ ์œ„ํ•œ WASM ๊ธฐ๋ฐ˜ Fallback ๊ฒฝ๋กœ ํ™•๋ณด

์›๋ฌธ ์ฝ๊ธฐ