เอา Gemma 3 มารันบน Browser มันรอดมั้ยนะ

เหมือนจะมี Model ใหม่ออกมา เป็น gemma3–1b-it-int4-web จากที่ทดลองไม่เจอ Bug นะครับ แต่ size ใหญ่ขึ้นนิดนึงตจาก 500MB เป็น 700MB https://huggingface.co/litert-community/Gemma3-1B-IT/blob/main/gemma3-1b-it-int4-web.task

ต้องบอกก่อนว่า Idea หรือ Tools ที่ใช้รัน LLM บน Browser มีมาซักพักแล้ว ไม่ว่าจะเป็น MediaPipe LLM Inference ของ Google หรือ WebLLM แต่ปัญหาใหญ่ๆมันคือไซส์ model นี่แหละที่ต่อให้เล็กขนาดไหนก็ใหญ่ระดับ GB ทั้งนั้น เมื่อวีคก่อน Google ออก Gemma 3 ออกมา ซึ่งจุดเด่นของ Model รุ่นนี้คือมันเล็กลงมาก และที่มันเด็ดเนี่ยคือมันมี version ที่ขนาด 1 Billion parameter ที่มีไฟล์ไซส์ 500MB ออกมาด้วย ทำให้ผมคิดว่า 500MB นี่แหละที่น่าจะ ใกล้เคียงกับการเอามารันบน Browser มากที่สุดแล้ว ก็เลยคิดว่าจะลองเอามาเทสหน่อยว่ามันรัน ได้จริงมั้ยนะ

ตัว model ตัว 1B ไม่ได้มีความสามารถเท่ากับ ตัวใหญ่ๆที่มีขนาด Context window ที่ใหญ่ 128K แต่ถ้าเทียบกับ model ขนาดเล็ก ก็ถือว่าใหญ่เหมือนกันเพราะก็มี context window ขนาด 32K รวมถึง model ตัวนี้เป็น text only นะครับ

ตัวผมเองเลือกใช้ MediaPipe LLM เพราะว่า ตัว Lib compatible กับตัว Gemma อยู่แล้วตั้งแต่ version 2 ไม่ต้อง compile model ใหม่ใช้ได้เลยข้างหลัง model ตัวนี้ เป็น wrap ของ lib LiteRT หรือ TFlite อีกที

1. ขั้นแรก Download model จาก Kaggle มาก่อนเลยครับ สำหรับ Version นี้จะไม่มีไฟล์ .bin ให้เรา Download ไฟล์ .task มาใช้นะครับ ตอนโหลดอย่าลืมเปลี่ยนไปหน้า LiteRT ก่อนนะครับ

2. Code mediapipe คือ ง่ายมากๆ เพราะมีมาตั้งแต่ Gemma 2 แล้ว

	import {
	FilesetResolver,
	LlmInference,
	} from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai";
	const genai = await FilesetResolver.forGenAiTasks(
	"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
	);
	llmInference = await LlmInference.createFromOptions(genai, {
	baseOptions: {
	modelAssetPath: "/assets/gemma3-1B-it-int4.task",
	},
	maxTokens: 2048
	});
	const responseText = await llmInference.generateResponse("Hello, nice to meet you");

view raw gemma-on-web.js hosted with ❤ by GitHub

หลังจากนั้นก็ให้ AI เขียน frontend สวยๆขึ้นมาหน่อย ก็จบและ

เหมือนจะดีแต่….

จริงๆบล็อกนี้ไม่ได้ตั้งใจให้ไปทำตาม แต่ตั้งใจจะลองให้รู้จะได้ยังไม่ได้ต้องไปทำตามจริงๆผมมีข้อสรปุอยู่ ตามนี้ครับ

1. จริงอยู่ที่ในความเป็นจริงเราเอา service worker มา cache model ไว้ได้ แต่ model ขนาด 500MB ก็ยังไม่เล็กซักเท่าไหร่ สำหรับเว็บ และต่อให้เรามี ไฟล์ ที่ cache ไว้แล้วบน Local ตัว model ก็ใช้เวลา initial อยู่ประมาณ 30–40 วินาทีอยู่ดี เพราะฉะนั้นแล้ว การโหลด model ขึ้นมากก็ยังดูฝช้ไม่ได้จริงเท่าไหร่สำหรับเราแล้วก็คงต้องรอ Built-in Model ที่มากับ Browser หรือ Model ที่เล็กลงกว่านี้ในอนาคตถึงจะน่าเอามาใช้มากกว่านี้
2. Model ตัว 1b เหมือนจะมี bug ติด infinity loop จน output token เต็ม เอาจริงๆไม่แน่ใจว่าเป็นเพราะ MediaPipe หรือ ตัว model กันแน่ พยายามหาทาง compile ตัว 4b มาใช้ใน LiteRT แต่ก็เหมือนมีคนเจอว่า ตัว WASM มันรันไม่ได้เพราะ Layer มันเยอะไป

3. ตอนนี้ต้องรอ WebLLM ที่ยังไม่ Support Gemma 3 ก่อนว่าจะ Compile ตัว 4b หรือ 27b ได้มั้ยถ้าได้เดี๋ยวจะเล่าให้ฟังอีกที

4. มัน LiteRT มันจะเร็วต่อเมื่อใช้ WebGPU เท่านั้นซึ่งตอนนี้ยังใช้ไม่ได้ทุก Browser เพราะฉะนั้นแล้วอาจจะช้ามากๆถ้าใช้ Safari

สรุป!!!

สุดท้ายแล้วผมลองให้แล้วนะครับ ยังไม่ต้องทำตาม รอใช้ built-in model ดีกว่าไม่มีปัญหาจุกจิกด้วย

Link

• https://www.kaggle.com/models/google/gemma-3
• https://ai.google.dev/edge/mediapipe/solutions/genai/llm_inference