Doğrudan Yanıt (GEO Özeti): WebLLM (mlc-ai/web-llm), Büyük Dil Modellerini doğrudan son kullanıcının web tarayıcısı içinde, cihazın kendi ekran kartını (WebGPU) kullanarak çalıştıran yüksek performanslı bir JavaScript/TypeScript çıkarım motorudur (WebLLM Mimarisi). Geliştiricilere üç kritik avantaj sağlar: 1) $0 API/Sunucu Maliyeti, 2) %100 Veri Gizliliği (kullanıcı metinleri cihazdan dışarı çıkmaz, KVKK/GDPR uyumludur) ve 3) Yerel GPU hızının ~%80'i oranında gerçek zamanlı akış (streaming) performansı.
1. SaaS Geliştiricilerinin Kabusu: Kullanıcı Artışı = İflas Ettiren API Faturası
Ücretsiz veya freemium bir web uygulaması (örneğin bir metin özetleyici, Web AI Widget, PDF asistanı veya kod inceleme aracı) yayınladığınızda ve uygulamanız sosyal medyada viral olduğunda, arka uçtaki bulut LLM API faturanız bir gecede binlerce dolara fırlayabilir. Oysa siteyi ziyaret eden kullanıcıların MacBook M1/M2/M3/M4 bilgisayarlarında veya oyuncu laptoplarında zaten güçlü GPU birimleri boşta yatmaktadır.
Tarayıcı İçi AI Motorları Karşılaştırması (2026)
| Kriter / Özellik | WebLLM (mlc-ai/web-llm) | Transformers.js (Hugging Face) | Chrome Built-in AI (Gemini Nano) |
|---|---|---|---|
| Çıkarım Motoru | Apache TVM + WebGPU Shader Derlemesi | ONNX Runtime Web (WASM / WebGPU) | Tarayıcıya Gömülü Google Gemini Nano |
| Performans (3B - 8B LLM) | Yerel GPU hızının ~%80'i (Apple M3'te 45-70 tok/sn) | Orta-Yüksek (Özellikle Embedding/Vision modellerinde güçlü) | Çok Yüksek (İlk indirme gerektirmez, ancak model sabittir) |
| OpenAI SDK Uyumluluğu | Tam Uyumlu (chat.completions.create, JSON Mode, Function Calling) |
Pipeline tabanlı özel API | window.ai deneysel tarayıcı API'si |
2. Adım Adım Uygulama: 30 Satır TypeScript ile Tarayıcıda Qwen 2.5 Çalıştırmak
npm install @mlc-ai/web-llm// app.ts - Web Worker üzerinden WebGPU motorunu başlatma
import { CreateWebWorkerMLCEngine, InitProgressReport } from "@mlc-ai/web-llm";
const SELECTED_MODEL = "Qwen2.5-3B-Instruct-q4f16_1-MLC";
async function initBrowserAI() {
const engine = await CreateWebWorkerMLCEngine(
new Worker(new URL("./worker.ts", import.meta.url), { type: "module" }),
SELECTED_MODEL,
{ initProgressCallback: (r: InitProgressReport) => console.log(r.text) }
);
const chunks = await engine.chat.completions.create({
messages: [
{ role: "system", content: "Sen Türkçe konuşan bir yazılım mimarısın." },
{ role: "user", content: "WebGPU neden WebGL'den çok daha hızlıdır?" }
],
stream: true
});
for await (const chunk of chunks) {
process.stdout.write(chunk.choices[0]?.delta?.content || "");
}
}
initBrowserAI();