Giriş
Tarayıcıda WebGPU desteğinin olgunlaşması, büyük dil modellerini (LLM) tamamen istemci tarafında çalıştırmayı pratik hale getirdi. Bu rehberde, WebLLM kullanarak Chrome/Edge gibi modern tarayıcılarda internet bağlantısı olmadan çalışan, gizliliğe duyarlı ve hızlı bir sohbet asistanını adım adım kuracağız. Amaç, hem geliştirici deneyimini sade tutmak hem de performans, gizlilik ve SEO açısından en iyi uygulamaları özetlemek.
Ön Gereksinimler
- Güncel bir tarayıcı: Chrome 113+ veya Edge 113+ önerilir. Firefox’ta WebGPU Nightly ile etkinleştirilebilir; macOS’te Safari 17+ destek sunar.
- Güncel ekran kartı sürücüleri: Windows’ta D3D12, Linux’ta Vulkan, macOS’te Metal backend ile WebGPU çalışır. Eski sürücüler “uygun GPU adaptörü bulunamadı” hatasına yol açabilir.
- Node.js 18+ (Vite veya benzeri bir bundler kullanacağız). Alternatif olarak CDN ile basit bir HTML sayfası da kullanılabilir.
Neden WebLLM?
WebLLM, MLC ekosisteminin tarayıcıya optimize edilmiş LLM çalışma zamanı. Avantajları:
- Gizlilik: Veriler cihazı terk etmez. Kurumsal ve kişisel gizlilik gerektiren iş akışları için idealdir.
- Kurulum Kolaylığı: Sunucu yok; CDN veya statik hosting ile dağıtım yapılabilir.
- Performans: 4-bit gibi quantization seçenekleriyle orta segment GPU’larda dahi akıcı deneyim sağlanır.
Hızlı Başlangıç: Vite + WebLLM
Aşağıdaki adımlar React örneğiyle gösterilmiştir; vanilla veya başka framework’ler de benzer şekilde ilerler.
1) Proje oluşturma:
npm create vite@latest webllm-demo -- --template react-ts
cd webllm-demo
npm install
2) Paketleri ekleme:
npm i @mlc-ai/web-llm
3) Basit bir sohbet bileşeni oluşturma (src/App.tsx):
import { useEffect, useState } from "react";
import { CreateMLCEngine, InitProgressReport } from "@mlc-ai/web-llm";
export default function App() {
const [engine, setEngine] = useState<any>(null);
const [loading, setLoading] = useState("Model hazırlanıyor...");
const [input, setInput] = useState("");
const [messages, setMessages] = useState([{ role: "system", content: "Yardımcı asistan." }]);
useEffect(() => {
const init = async () => {
const model = "Llama-3-8B-Instruct-q4f32_1-MLC"; // Donanımınıza göre daha küçük bir model seçebilirsiniz.
const eng = await CreateMLCEngine(model, {
initProgressCallback: (p: InitProgressReport) => {
setLoading(`${Math.round(p.progress * 100)}% - ${p.text}`);
},
});
setEngine(eng);
setLoading("");
};
init();
}, []);
const send = async () => {
if (!engine || !input.trim()) return;
const next = [...messages, { role: "user", content: input }];
setMessages(next);
setInput("");
const out = await engine.chat.completions.create({
messages: next,
temperature: 0.7,
max_tokens: 256,
});
const reply = out.choices[0].message.content;
setMessages([...next, { role: "assistant", content: reply }]);
};
return (
<div style={{ padding: 16 }}>
<h3>WebGPU + WebLLM Yerel Sohbet</h3>
{loading && <p>{loading}</p>}
{!loading && (
<>
<div style={{ whiteSpace: "pre-wrap", marginBottom: 12 }}>
{messages.map((m, i) => (
<div key={i}><b>{m.role}:</b> {m.content}</div>
))}
</div>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Bir soru yazın..."
style={{ width: "70%" }}
/>
<button onClick={send} style={{ marginLeft: 8 }}>Gönder</button>
</>
)}
</div>
);
}
4) Geliştirme sunucusunu çalıştırma:
npm run dev
İlk başlatmada model dosyaları indirileceği için yükleme biraz sürebilir. Tarayıcı konsolunda ilerleme yüzdesi ve ayrıntıları görürsünüz.
Model Seçimi ve Bellek
Model adı genelde “-MLC” soneki ve quantization içeren bir desen izler: örn. q4f32_1 gibi. 4-bit seçenekler performans/bellek dengesini iyi kurar. 7–8B parametreli Llama 3 veya Phi türevleri, modern entegre GPU’larda dahi çalışabilir. Yüksek VRAM’e sahipseniz daha büyük varyantlar deneyebilirsiniz.
Performans İpuçları
- WebGPU f16: Çoğu cihazda varsayılan olarak etkinleşir; mümkünse f16 yolunu kullanan modelleri tercih edin.
- Maksimum token: Yanıt başına max_tokens değerini gereksiz büyütmeyin; daha kısa yanıtlar daha hızlı üretilecektir.
- İlk yükleme önbelleği: Statik sunucuda HTTP cache ve Service Worker kullanarak model dosyalarını yerel önbelleğe alın; tekrar ziyaretlerde soğuk başlangıç azalır.
- İçerik güvenliği: Üretim ortamında COOP/COEP başlıkları ve sıkı CSP ile hem performans hem de güvenlikte tutarlılık sağlayın.
Güvenlik ve Gizlilik
Tarayıcıda çalışan bir LLM, sohbet içeriklerini dış servislere göndermediği için hassas verilerle çalışırken büyük avantaj sağlar. Yine de kullanıcı verilerini kalıcı olarak saklamadan önce açık rıza isteyin ve localStorage/IndexedDB kullanımını minimal tutun.
Karşılaşılan Yaygın Hatalar
- “No suitable GPU adapter”: Tarayıcınızı ve GPU sürücülerinizi güncelleyin. Linux’ta Vulkan, Windows’ta D3D12 desteğinin aktif olduğundan emin olun.
- Yavaş ilk yükleme: Modeli daha küçük bir varyantla değiştirin (ör. 4-bit), CDN/önbellek ayarlarınızı kontrol edin.
- Tarayıcı desteği: Kurumsal kısıtlı cihazlarda WebGPU devre dışı olabilir; BT politikalarını gözden geçirin veya alternatif tarayıcı deneyin.
SEO İçin Küçük Dokunuşlar
Başlık, meta açıklama ve alt başlıklarda “WebGPU”, “tarayıcıda LLM”, “WebLLM” gibi anahtar kelimeleri doğal akışta kullanın. İlk paragrafta hedef terimleri geçirip, alt başlıklarda soru bazlı ifadeler (ör. “Nasıl kurulur?”, “Hangi modeller hızlı?”) eklemek arama sonuçlarında tıklanma oranını artırır.
Sonuç
WebGPU, tarayıcıyı salt bir istemci olmaktan çıkarıp güçlü bir yerel AI yürütme katmanına dönüştürüyor. WebLLM ile dakikalar içinde çalışan bir sohbet asistanı kurabilir, kurumsal ortamlarda gizlilik avantajı sağlayabilir ve kullanıcılarınıza düşük gecikmeli deneyimler sunabilirsiniz. Küçük bir modelle başlayıp donanımınıza göre ölçeklenin; doğru quantization ve önbellekleme stratejileriyle fark edilir bir performans elde edeceksiniz.
