Yerel LLM ile RAG: Ollama + LangChain + ChromaDB ile Türkçe Soru-Cevap Sistemi Kurulumu (2025 Rehberi)

RAG nedir, neden yerel?

RAG (Retrieval-Augmented Generation), büyük dil modellerini (LLM) kendi verinizle güçlendirmenin en pratik yollarından biridir. Model, önce vektör veritabanından ilgili pasajları arar (retrieval), ardından yanıtı bu pasajları referans alarak üretir (generation). Bu yaklaşım, hem doğruluk hem de güncellik sağlar. Yerel (on-prem/edge) kurulum ise hassas veriyi dışarı çıkarmadan çalıştığı için KVKK uyumu, gecikme ve maliyet açısından avantajlıdır.

Mimari genel bakış

Ollama yerel LLM’i (ör. Qwen2.5 7B) çalıştırır, LangChain iş akışını yönetir, ChromaDB vektör veritabanı olarak belgeleri tutar, Sentence-Transformers ise Türkçe uyumlu gömme (embedding) üretir. Sorgu akışı: Kullanıcı sorusu → Embedding → Chroma’dan benzer parçaların bulunması → Seçilmiş LLM ile bağlamsal yanıt.

Gereksinimler ve ortam

- İşletim sistemi: macOS, Linux veya WSL2’li Windows
- Python 3.10+
- 16 GB RAM önerilir (8 GB ile quantize modeller çalışır).
- GPU hızlandırma varsa avantajlı; yoksa 4-bit quantize modelleri tercih edin.

Kurulum adımları

1) Ollama’yı kurun ve modeli çekin:
curl -fsSL https://ollama.com/install.sh | sh
ollama pull qwen2.5:7b
Qwen2.5 çok dilli yapısıyla Türkçe’de başarılıdır. Daha hafif bir seçenek gerekiyorsa qwen2.5:3b veya llama3.1:8b-instruct da tercih edilebilir.

2) Python ortamını hazırlayın:
python -m venv .venv && source .venv/bin/activate
pip install langchain langchain-community chromadb sentence-transformers pypdf fastapi uvicorn
Embedding için Türkçe’de güçlü bir seçenek: intfloat/multilingual-e5-base veya sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2.

Veri hazırlama ve indeksleme

Belgelerinizi data/ klasörüne koyun (PDF, TXT, MD). PDF’ler için pypdf ile metin çıkarabilirsiniz. Amaç, büyük belgeleri 500–1000 karakterlik, 50–100 karakter örtüşmeli parçalara ayırmaktır. Bu sayede arama daha isabetli olur ve bağlam penceresini verimli kullanırsınız.

Örnek akış (özet):
- Belgeleri yükle: PDF/TXT okuma
- Parçala: 800 karakter, 120 örtüşme
- Embedding üret: multilingual-e5-base
- ChromaDB’ye yaz: kalıcı (persist) bir dizinde tut

Basit bir betik iskeleti:
from langchain_community.document_loaders import PyPDFLoader, TextLoader
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain_community.vectorstores import Chroma
from langchain_community.embeddings import HuggingFaceEmbeddings
loader = PyPDFLoader("data/rapor.pdf")
docs = loader.load()
splitter = RecursiveCharacterTextSplitter(chunk_size=800, chunk_overlap=120)
chunks = splitter.split_documents(docs)
emb = HuggingFaceEmbeddings(model_name="intfloat/multilingual-e5-base")
vect = Chroma.from_documents(chunks, emb, persist_directory="chroma_store")
vect.persist()

Arama + üretim zinciri

LangChain ile basit bir RAG zinciri kurabilirsiniz. Retriever’ı Chroma’dan oluşturun, Ollama LLM’i bağlayın ve istem (prompt) şablonu ile bağlamı enjekte edin. MMR (Maximal Marginal Relevance) ve top_k gibi ayarlarla oynayarak tekrar eden içerikleri azaltın ve çeşitliliği artırın.

Örnek sorgulama iskeleti:
from langchain_community.llms import Ollama
from langchain.prompts import PromptTemplate
vect = Chroma(persist_directory="chroma_store", embedding_function=emb)
retriever = vect.as_retriever(search_type="mmr", search_kwargs={"k": 5, "fetch_k": 20})
llm = Ollama(model="qwen2.5:7b", temperature=0.2)
template = ("Aşağıdaki bağlama dayanarak Türkçe, kaynaklara sadık ve kısa bir yanıt ver. "
"Bağlam:\n{context}\n\nSoru: {question}\nYanıt:")
prompt = PromptTemplate.from_template(template)
docs = retriever.get_relevant_documents("2024 finansal özet nedir?")
context = "\n\n".join([d.page_content for d in docs])
print(llm.invoke(prompt.format(context=context, question="2024 finansal özet nedir?")))

Doğruluk ve optimizasyon

- Chunk boyutu: 600–1000 karakter arası pratik. Daha küçük parça daha hassas arama, daha fazla parçayı LLM’e göndermek demektir. Bağlam penceresiyle dengeleme yapın.
- Reranker: GPU’nuz varsa bge-reranker-large gibi çapraz-encoder modeller ekleyerek bağlam kalitesini artırın.
- Top-k: 3–8 arası iyi bir başlangıç. Soru karmaşıksa artırın.
- Sıcaklık (temperature): 0.1–0.3 arası daha tutarlı, kaynaklara sadık yanıt sağlar.
- GYS/Değerlendirme: Küçük bir altın veri kümesi ile doğruluk ölçün. RAGAS gibi metriklerle bağlamsal doğruluğu takip edin.

Üretimde çalıştırma

Basit bir API için FastAPI idealdir. İsteğe göre streaming açarak ilk token’ı daha hızlı iletebilirsiniz. Chroma’yı kalıcı dizinle (persist_directory) başlatın ve yalnızca “okuma” modunda koşturun. Döküman güncellemeleri için zamanlanmış yeniden indeksleme (ör. günlük) stratejisi belirleyin.

Örnek uç nokta iskeleti:
from fastapi import FastAPI
app = FastAPI()
@app.get("/ask")
def ask(q: str):
  docs = retriever.get_relevant_documents(q)
  ctx = "\n\n".join(d.page_content for d in docs)
  ans = llm.invoke(prompt.format(context=ctx, question=q))
  return {"answer": ans}
uvicorn main:app --reload

Güvenlik, maliyet ve lisans notları

- Veri gizliliği: PII içeren alanları maskeleyin; loglarda ham sorgu ve belgeleri tutmayın. Diskte Chroma klasörünü şifreli bir birimde saklayın.
- Lisans: Kullandığınız model ve embedding lisansını kontrol edin; ticarî kullanımlarda kısıtlar olabilir.
- Maliyet: Yerel kurulum bulut token maliyetini düşürür, ancak donanım kaynağına ihtiyaç duyar. 4-bit quantize modeller düşük RAM’de dengeli performans sağlar.

Sorun giderme

- Yavaş yanıt: Embedding modelini daha hafife çekin (MiniLM), top_k’yı düşürün, quantize LLM kullanın.
- Alakasız bağlam: Chunk boyutunu artırın, MMR’ı açın, gerekirse reranker ekleyin.
- Bozuk indeks: chroma_store klasörünü temizleyip yeniden indeksleyin; gömme modelini değiştirdiyseniz indeksin de değişmesi gerekir.
- Hallüsinasyon: Prompt’a “Kaynak verilmeyen bilgiyi üretme” kuralını ekleyin, temperature’ı düşürün ve bağlamı zenginleştirin.

Sonuç

Bu rehberde Ollama + LangChain + ChromaDB ve çok dilli embedding’lerle yerel bir Türkçe RAG sistemi kurmanın hızlı yolunu gördünüz. Doğru chunking, iyi bir retriever ve tutarlı istem tasarımıyla, Türkçe dokümanlarınıza dayalı güvenilir bir soru-cevap deneyimi sağlayabilirsiniz. İhtiyaca göre model boyutunu, indeks ayarlarını ve dağıtım mimarisini optimize ederek sistemi üretim kalitesine taşıyın.

Docker Distroless ile Node.js API’nizi Hafif ve Güvenli Hale Getirme (Multi-Stage Build Rehberi)

Giriş

Üretim ortamında konteyner imaj boyutu, güvenlik yüzeyi ve başlatma hızı kritik öneme sahiptir. Geleneksel Node.js tabanlı imajlar (ör. Debian/Alpine) paket yöneticileri, shell ve gereksiz araçlar içerdiğinden hem büyük olur hem de CVE yüzeyi genişler. Bu yazıda, Docker Multi-Stage Build ve Distroless yaklaşımını birleştirerek, Node.js 20 tabanlı bir API’yi onlarca megabayta düşürüp, saldırı yüzeyini minimize etmeyi gösteriyorum.

Neden Distroless?

Distroless imajlar, uygulamanızı çalıştırmak için gerekli en minimal dosyaları içerir; shell, paket yöneticisi veya gereksiz araçlar yoktur. Bu sayede: (1) İmaj boyutu küçülür, (2) Potansiyel güvenlik açıkları azalır, (3) Soğuk başlatma hızlanır, (4) Tedarik zinciri şeffaflığı artar. Dezavantajı ise hata ayıklamanın klasik yöntemlerle (bash, curl) yapılamamasıdır; ancak doğru loglama ve metrikler bu ihtiyacı büyük ölçüde ortadan kaldırır.

Ön Koşullar

- Docker 24+ (BuildKit aktif önerilir)
- Node.js 20 LTS ile uyumlu bir proje (ör. Express, Fastify, NestJS)
- Üretim derlemesi yapan bir betik: npm run build (ör. TypeScript için tsc)

Multi-Stage Dockerfile Mantığı

Amaç, bağımlılıkları ve derlemeyi ağır bir builder evresinde yapmak, ardından sadece çalışması gereken artefaktları Distroless evresine kopyalamaktır. Aşağıda örnek bir Dockerfile yapısı yer alır:

# 1) Bağımlılıklar
FROM node:20-bookworm-slim AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

# 2) Derleme
FROM deps AS build
COPY . .
RUN npm run build && npm prune --production

# 3) Distroless (final)
FROM gcr.io/distroless/nodejs20-debian12 AS runner
WORKDIR /app
ENV NODE_ENV=production
# Distroless'ta yerleşik 'nonroot' kullanıcısı mevcut
USER nonroot
COPY --from=build /app/dist ./dist
COPY --from=build /app/package*.json ./
COPY --from=build /app/node_modules ./node_modules
EXPOSE 3000
# Distroless nodejs imajı 'node' ENTRYPOINT'i ile gelir
CMD ["dist/index.js"]

Adım Adım Kurulum

1) package.json’ı hazırlayın: Üretim derlemesi için "build" komutunuz olsun (ör. "build": "tsc"). Sunucuyu relative path ile başlatabileceğinizden emin olun (ör. "start": "node dist/index.js").

2) Dockerfile’ı ekleyin: Yukarıdaki örneği kök dizine Dockerfile adıyla koyun. TypeScript kullanıyorsanız dist klasörünün üretildiğinden emin olun.

3) İmajı derleyin: docker build -t api:distroless . komutuyla derleyin. Build cache’i hızlandırmak için package*.json dosyalarını erken kopyaladığımıza dikkat edin.

4) Konteyneri çalıştırın: docker run -p 3000:3000 api:distroless komutuyla ayağa kaldırın. Uygulamanız http://localhost:3000 üzerinden yanıt vermelidir.

Güvenlik ve İyileştirme İpuçları

Non-root çalıştırma: Distroless imajlarda USER nonroot kritik bir adımdır. Bu, olası bir ihlalde yetkileri sınırlar.

ENV ve gizli bilgiler: Üretimde sırları ENV ile bake etmeyin. Orkestratör (Kubernetes Secrets, ECS, Swarm) üzerinden enjekte edin. Yerel testte --env-file kullanabilirsiniz.

SBOM ve tarama: Tedarik zinciri görünürlüğü için Syft ile SBOM çıkarın (syft packages docker:api:distroless) ve Grype/Trivy ile tarayın. Distroless, raporlanan CVE sayısını anlamlı biçimde azaltır.

Boyut ve performans: Tipik bir Node imajı 300–900 MB olabilirken distroless ile 70–150 MB bandı sık görülür. Daha küçük imaj, daha hızlı pull ve daha hızlı ölçekleme demektir.

Healthcheck: Distroless’ta shell olmadığından curl yoktur. Sağlık kontrolünü uygulama içi /health endpoint’i ile orkestratörden yapın. Alternatif olarak Node ile bir komut yazabilirsiniz (ör. HEALTHCHECK CMD ["node","-e","require('http').request({host:'127.0.0.1',port:3000,path:'/health'},r=>process.exit(r.statusCode===200?0:1)).on('error',()=>process.exit(1)).end()"]).

Sık Yapılan Hatalar

COPY sırası: COPY . . satırını npm ci’dan önce yazmak, her değişimde cache’i bozar ve build’i yavaşlatır. Önce package*.json, sonra bağımlılıklar, en sonda kaynak kod.

Gereksiz dev bağımlılıkları: Üretim imajına devDependencies taşımayın. npm prune --production veya npm ci --omit=dev kullanın.

Shell beklentisi: Distroless’ta /bin/sh yoktur. Debug için logs, structured logging (JSON) ve APM/Tracing (OpenTelemetry) tercih edin. İhtiyaç halinde aynı artefaktlarla ikinci bir “debug” imajı üretebilirsiniz (ör. Alpine tabanlı).

Güncel Pratikler

- Node 20 LTS kullanın ve düzenli güvenlik güncellemelerini takip edin.
- İmajınızı cosign ile imzalayıp politikalar aracılığıyla doğrulayın.
- Read-only root filesystem ve drop capabilities (Kubernetes) gibi kısıtlamalarla koşun.
- ROOTLESS Docker ya da Pod Security Standartlarıyla ek sertleştirme sağlayın.

Sonuç

Distroless ve Multi-Stage Build, Node.js servislerinizi hem hafif hem de güvenli hale getirmenin pratik bir yoludur. Daha küçük imajlar, daha hızlı dağıtım ve daha düşük saldırı yüzeyi anlamına gelir. Üretime geçerken non-root kullanıcı, SBOM, tarama ve gözlemlenebilirlik (logs/metrics/traces) gibi temel prensipleri uyguladığınızda, bakım maliyeti düşer ve ölçeklenebilirlik artar. Mevcut Dockerfile’ınızı yukarıdaki adımlarla iyileştirerek ilk günden somut kazanım elde edebilirsiniz.

WebAuthn ve Passkey ile Parolasız Kimlik Doğrulama: Next.js + Node.js ile Uçtan Uca Kurulum

Giriş

Parolalar bitmek bilmeyen bir güvenlik ve kullanıcı deneyimi sorunu. WebAuthn ve Passkey (FIDO2) standartları, hem güvenliği artıran hem de kullanıcıyı zahmetten kurtaran parolasız kimlik doğrulama sunuyor. Bu yazıda, Next.js ve Node.js kullanarak uçtan uca bir WebAuthn akışını nasıl kuracağınızı adım adım anlatıyorum. Hem modern tarayıcı desteğini, hem de üretim ortamında dikkat edilmesi gerekenleri ele alacağız.

WebAuthn ve Passkey Nedir?

WebAuthn, W3C ve FIDO Alliance tarafından geliştirilen, tarayıcı üzerinden güvenli anahtar tabanlı kimlik doğrulama standardıdır. Passkey ise kullanıcıların cihazlarında saklanan ve bulut üzerinden senkronize olabilen (Apple iCloud, Google Password Manager vb.) WebAuthn kimlik bilgileridir. Kısaca: kullanıcı, parolaya gerek duymadan cihaz biyometrisi (Face ID, Touch ID, Windows Hello) veya güvenlik anahtarı (YubiKey) ile giriş yapar.

Kavramsal olarak iki akış var: Kayıt (Registration) ve Giriş (Authentication). Sunucu, benzersiz bir challenge üretir; tarayıcıda navigator.credentials.create() veya navigator.credentials.get() çağrıları yapılır; elde edilen yanıt sunucu tarafından doğrulanır. Doğrulama sonrası, kullanıcı artık parolasız giriş yapabilir.

Mimari Özeti

- Relying Party (RP): Uygulamanızın alan adıyla tanımlanır (ör. rpId: "ornek.com"). Bu değer kök alan adınız olmalıdır.

- Attestation ve Assertion: Kayıtta attestation, girişte assertion doğrulanır. Üretimde çoğunlukla attestation: "none" kullanılır.

- Depolama: Kamu anahtarı, credential ID ve counter gibi veriler sunucuda saklanır. Challenge için kısa süreli bir önbellek (Redis) önerilir.

Ön Koşullar

- Next.js 14+ (App Router önerilir), Node.js 18+.

- HTTPS zorunlu (geliştirmede localhost hariç). Üretimde gerçek bir alan adıyla test edin.

- Kütüphaneler: @simplewebauthn/server ve @simplewebauthn/browser. Bu ikili, challenge üretimi ve doğrulama işini hataya yer bırakmadan kolaylaştırır.

Adım 1: Projeyi Hazırlayın

Next.js projesini oluşturun ve bağımlılıkları kurun: npm i @simplewebauthn/server @simplewebauthn/browser. App Router ile app/api altında dört endpoint planlayın: /webauthn/register/options, /webauthn/register/verify, /webauthn/login/options, /webauthn/login/verify.

Sunucu tarafında yapılandırma için değişkenleri belirleyin: rpName, rpID (alan adınız), origin (ör. https://app.ornek.com). Bu üçü birbirine tam uyumlu olmalıdır; aksi halde tarayıcı doğrulamayı reddeder.

Adım 2: Kayıt (Registration) Akışı

1) Options üretimi: Sunucu, oturumu açık kullanıcının (ör. user.id, user.name) bilgileriyle generateRegistrationOptions çağırır. attestation: "none", authenticatorSelection için residentKey: "preferred" ve userVerification: "preferred" yeterlidir.

2) Challenge saklama: Dönen options.challenge değerini kullanıcının oturumuna veya Redis’e yazın. Bu değer tek kullanımlık ve kısa ömürlü olmalıdır.

3) İstemci işlem: Tarayıcıda startRegistration(options) veya yerel API ile navigator.credentials.create({ publicKey: options }) çağırın. Kullanıcı, cihaz biyometrisiyle onaylar ve bir attestation yanıtı oluşur.

4) Doğrulama: Yanıt sunucuya gönderilir ve verifyRegistrationResponse ile doğrulanır. Başarılıysa credentialID, publicKey, counter, transports gibi alanları veritabanına kaydedin.

Not: Binary verilerin JSON’a taşınmasında base64url dönüşümleri gerekir. @simplewebauthn bu dönüşümleri kolaylaştırır; farklı bir yaklaşım kullanıyorsanız, ArrayBuffer ↔ base64url dönüşümleri için tutarlı yardımcı fonksiyonlar geliştirin.

Adım 3: Giriş (Authentication) Akışı

1) Options üretimi: Sunucu generateAuthenticationOptions ile yeni bir challenge üretir. Dilerseniz sadece kullanıcıya ait allowCredentials listesi dönebilir veya passkey’lerin “discovered” kullanımına izin vermek için boş da bırakabilirsiniz.

2) İstemci işlem: Tarayıcıda startAuthentication(options) ya da navigator.credentials.get({ publicKey: options }) çağrılır. Kullanıcı biyometrik onayı verir.

3) Doğrulama: Sunucu, verifyAuthenticationResponse ile yanıtı doğrular; counter değerini günceller ve başarılıysa oturum veya token üretir (HTTP only, SameSite=Strict bir çerez önerilir).

Güvenlik ve Üretim İpuçları

- Origin ve rpID eşleşmesi: origin tam URL, rpID kök alan adı olmalı. https://login.ornek.com ile rpID: "ornek.com" uyumludur.

- HTTPS zorunlu: Geliştirme dışında güvenli olmayan kökenlerde WebAuthn çalışmaz.

- Attestation politikası: Kurumsal cihaz kökenini doğrulamak gerekmiyorsa none en pratik seçenek.

- Kullanıcı doğrulaması: userVerification: "required" güvenliği artırır; deneyim açısından “preferred” daha esnek olabilir.

- Passkey senkronizasyonu: Çok cihazlı deneyim için kullanıcıya aynı ekosistemde (iCloud / Google) senkronizasyonu etkinleştirmesini anlatın.

- Conditional UI: Chrome’da parolasız “otomatik” akış için navigator.credentials.get({ mediation: "conditional" }) ve ilgili bayrakları düşünün.

- Geri dönüş: İlk aşamada SMS/e-posta yedek yöntem bulundurun ancak uzun vadede phishing’e dayanıklı seçeneklere yönelin.

Sık Karşılaşılan Hatalar

- NotAllowedError: Kullanıcı akışı iptal etti veya tarayıcı UI zaman aşımına uğradı. Zaman aşımını düşürün ve açık geri bildirim gösterin.

- InvalidStateError: Aynı cihazda aynı kullanıcı için tekrar kayıt yapılmak isteniyor olabilir. Kayıt öncesi kullanıcıya mevcut passkey’leri gösterip yönetin.

- RP ID uyuşmazlığı: Alt alan adı/Origin ve rpID yanlış ayarlandığında doğrulama başarısız olur. Üretim alan adınızla birebir test edin.

Dağıtım ve Sonuç

Uygulamayı dağıtırken, ters proxy (Nginx) üzerinden HTTP → HTTPS zorlaması yapın. Load balancer arkasında gerçek istemci IP’sini günlüğe almak için X-Forwarded-For başlığını doğru iletin. CDN veya WAF kullanıyorsanız WebAuthn isteklerinin gövde boyutu ve header’larını kısıtlamadığından emin olun.

Sonuç olarak, WebAuthn ve Passkey ile Next.js + Node.js üzerinde parolasız kimlik doğrulama kurmak düşündüğünüzden daha erişilebilir. Doğru rpID/origin eşleşmesi, sağlam challenge saklama, güvenli çerez ayarları ve iyi bir kullanıcı akışı ile hem güvenlik seviyenizi yükseltir hem de dönüşüm oranlarını artırırsınız. Bugün basit bir kayıt/giriş prototipi hazırlayıp ekibinizle birlikte deneyin; parolaları geride bırakma vakti geldi.

3.

Yerel LLM Kurulumu: Ollama ve Open WebUI ile Hızlı ve Güvenli Yapılandırma Rehberi

Giriş: Neden Yerel LLM?

Gizlilik, düşük gecikme ve maliyet kontrolü, büyük dil modellerini (LLM) yerelde çalıştırmanın en önemli avantajları. Bu rehberde, açık kaynak ekosistemde hızla popülerleşen Ollama ile modelleri nasıl indireceğinizi ve Open WebUI üzerinden nasıl yöneteceğinizi adım adım göstereceğim. Amaç, teknik bariyeri düşük tutarak pratik bir kurulum sağlamak ve GPU hızlandırma, belge tabanlı arama (RAG) gibi ileri kullanım senaryolarına hızlıca geçebilmek.

Ön Koşullar ve Mimari

Ollama; macOS’ta Metal, Linux’ta CUDA/ROCm, Windows’ta DirectML/CUDA (uyum durumuna göre) ile çalışır. Open WebUI, Ollama’nın sunduğu yerel API’ye (varsayılan http://localhost:11434) bağlanarak tarayıcı tabanlı bir arayüz sunar. İkisini tek makinede koşturabilir, Docker ile izole edebilir veya sunucuya taşıyabilirsiniz.

Kurulum: Ollama

macOS: Homebrew ile brew install ollama komutunu çalıştırın. Ardından ollama serve ile servisi başlatın. Apple Silicon’da GPU hızlandırma otomatik devreye girer.

Linux: Terminalde curl -fsSL https://ollama.com/install.sh | sh komutunu çalıştırın. NVIDIA GPU için sürücü ve CUDA kurulumu yaptığınızdan emin olun. Servisi systemctl enable --now ollama ile kalıcılaştırabilirsiniz.

Windows: Resmi .msi yükleyicisiyle kurulum yapın. Ollama Tray ile servis başlatılabilir. GPU hızlandırma için güncel sürücüler ve desteklenen backend gereklidir.

İlk Modeli İndirme ve Çalıştırma

Popüler ve hızlı bir başlangıç için ollama pull llama3:8b veya ollama pull mistral:7b komutlarını kullanın. Ardından ollama run llama3:8b diyerek etkileşime geçin. Soruları terminalden yazabilir veya REST API ile programatik çağrılar yapabilirsiniz.

API örneği: curl http://localhost:11434/api/generate -d '{"model":"llama3:8b","prompt":"Merhaba, bugünün tarihi?"}'. Yanıtlarda gecikme görürseniz daha düşük quantizasyon (ör. q4_K_M) indirmeyi değerlendirin.

Open WebUI ile Grafik Arayüz

Open WebUI, sohbet geçmişi, çoklu model, belge ekleme ve RAG gibi özellikleri tek ekranda sunar. Docker ile hızlı kurulum için iki konteyner yeterlidir.

Ollama (Docker): docker run -d --name ollama -p 11434:11434 --gpus all -v ollama:/root/.ollama ollama/ollama

Open WebUI: Linux’ta Ollama’ya erişim için host gateway ekleyin: docker run -d --name open-webui -p 3000:8080 --add-host=host.docker.internal:host-gateway -e OLLAMA_API_BASE_URL=http://host.docker.internal:11434 -v open-webui:/app/backend/data open-webui/open-webui:latest

Windows/macOS’ta genellikle host.docker.internal otomatik çalışır. Tarayıcıdan http://localhost:3000 adresine giderek arayüze ulaşabilirsiniz.

RAG: Belgelerle Akıllı Yanıtlar

Open WebUI içinde “Knowledge” veya “Documents” bölümünden PDF, Markdown, TXT gibi belgeleri ekleyebilir ve indeksleyebilirsiniz. Ardından sohbet penceresinde ilgili bilgi tabanını seçtiğinizde model, cevaplarını bu içeriklere dayandırır. Küçük veri kümelerinde arama oldukça hızlıdır; büyük koleksiyonlarda bellek yükünü azaltmak için daha düşük boyutlu modeller ve hafif embedding’ler tercih edin.

Performans ve İnce Ayar

- Quantization: q4 varyantları RAM ve VRAM kullanımını düşürür; kalite/akıcılık dengesi için q5 veya q6 deneyin.
- İş Parçacığı: OLLAMA_NUM_PARALLEL ile eşzamanlı istek sayısını, --num-ctx ile bağlam penceresini ayarlayın.
- GPU Paylaşımı: Birden fazla model kullanıyorsanız aynı anda çalıştırmak yerine sıraya almayı tercih edin. GPU belleği dolarsa CPU’ya düşerek performans keskin biçimde azalabilir.
- Model Seçimi: Kod tamamlama için “Coder” varyantları; uzun bağlam gerektiren işlerde “Instruct” ve geniş context pencereli sürümler daha verimlidir.

Güvenlik ve Ağ Erişimi

Ollama’nın API’sini dış dünyaya açacaksanız bir ters vekil (ör. Caddy, Nginx) arkasında temel kimlik doğrulama uygulayın. Ev ağı senaryosunda sadece localhost’a bağlayın ve 11434 portunu yönlendirmeyin. Open WebUI kullanıcı hesapları oluşturmanıza izin verir; rol tabanlı erişimle modellerin kimler tarafından kullanılabileceğini sınırlayın.

Sorun Giderme

- Yavaş yanıt: Daha küçük modeli veya düşük quantizasyonu deneyin; CPU moduna düşmediğinizden emin olun.
- GPU tanınmıyor: Sürücü/CUDA güncellemelerini kontrol edin. Docker’da --gpus all bayrağı ve NVIDIA Container Toolkit gereklidir.
- Bağlantı hatası: Open WebUI’de OLLAMA_API_BASE_URL değerini ve ağ köprüsünü doğrulayın; Linux’ta --add-host parametresini eklemeyi unutmayın.
- Disk doluyor: Kullanmadığınız modelleri ollama rm model-adı ile kaldırın; hacim boyutlarını düzenli izleyin.

Sonuç

Ollama + Open WebUI ikilisiyle yerel LLM deneyimi, hem bireysel üretkenlik hem de kurumsal prototipleme için güçlü bir zemin sunuyor. Kurulum basit, yönetim pratik ve maliyet öngörülebilir. Başlangıçta hafif bir modelle ilerleyip ihtiyaçlara göre ölçeklendirmek, GPU kaynaklarını dikkatle planlamak ve güvenlik katmanlarını erken eklemek uzun vadede en sağlıklı yaklaşım olacaktır.

Traefik v3 ile Docker Compose Üzerinde Çoklu Alan Adı ve Otomatik SSL: Adım Adım Rehber

Bir sunucuda birden fazla web uygulamasını farklı alan adlarıyla güvenli (HTTPS) şekilde yayınlamak istiyorsanız, modern bir ters proxy çözümü olan Traefik v3 harika bir seçenek. Bu rehberde, Docker Compose kullanarak Traefik v3 ile otomatik Let’s Encrypt sertifika yönetimini, HTTP’den HTTPS’e yönlendirmeyi ve birden fazla alan adını tek yapılandırmada yönetmeyi adım adım göstereceğim.

Traefik v3 nedir ve neden tercih edilmeli?

Traefik v3, konteyner tabanlı mimariler için optimize edilmiş, otomatik keşif ve sade etiketleme (label) mantığıyla çalışan bir ters proxy ve yük dengeleyicidir. Docker, Kubernetes ve diğer sağlayıcılarla derin entegrasyon sunar. v3 sürümü, performans ve yapılandırma deneyiminde iyileştirmeler getirirken, Let’s Encrypt ile otomatik TLS/SSL sertifikalandırmayı pratik hale getirir.

Ön koşullar ve DNS

- Bir Linux sunucu (Ubuntu/Debian/CentOS vb.)

- Docker ve Docker Compose kurulu

- Alan adınızda, sunucunuzun IP adresine işaret eden A/AAAA kayıtları (örnek: app.example.com ve traefik.example.com)

İpucu: Cloudflare kullanıyorsanız ve HTTP-01 doğrulaması yapacaksanız, ilgili DNS kaydını “DNS only” (turuncu bulut kapalı) olarak ayarlayın; aksi halde Let’s Encrypt doğrulaması başarısız olabilir.

Adım 1: Docker ağı ve klasörler

Aşağıdaki ağ, farklı Compose dosyaları arasında servisleri paylaşmanızı sağlar. Oluşturun:

docker network create web
mkdir -p traefik/letsencrypt
touch traefik/letsencrypt/acme.json
chmod 600 traefik/letsencrypt/acme.json

Adım 2: Traefik v3 için docker-compose.yml

Aşağıdaki dosya, Traefik’i 80/443 portlarına bağlar, Let’s Encrypt’i HTTP-01 ile etkinleştirir, HTTP’yi otomatik olarak HTTPS’e yönlendirir ve güvenli bir kontrol paneli kurar. E-postayı ve alan adlarını kendinize göre düzenlemeyi unutmayın.

version: "3.8"

services:
  traefik:
    image: traefik:v3.0
    container_name: traefik
    command:
      - --providers.docker=true
      - --providers.docker.exposedbydefault=false
      - --entrypoints.web.address=:80
      - --entrypoints.websecure.address=:443
      - --entrypoints.web.http.redirections.entrypoint.to=websecure
      - --entrypoints.web.http.redirections.entrypoint.scheme=https
      - [email protected]
      - --certificatesresolvers.letsencrypt.acme.storage=/letsencrypt/acme.json
      - --certificatesresolvers.letsencrypt.acme.httpchallenge=true
      - --certificatesresolvers.letsencrypt.acme.httpchallenge.entrypoint=web
      - --api.dashboard=true
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./traefik/letsencrypt:/letsencrypt
    networks:
      - web
    labels:
      - "traefik.enable=true"
      # Dashboard için güvenli router
      - "traefik.http.routers.api.rule=Host(`traefik.example.com`)"
      - "traefik.http.routers.api.service=api@internal"
      - "traefik.http.routers.api.entrypoints=websecure"
      - "traefik.http.routers.api.tls.certresolver=letsencrypt"
      # Basit BasicAuth middleware (parolayı hashleyip $$ ile kaçırın)
      - "traefik.http.middlewares.basicauth.basicauth.users=admin:$$2y$$12$$REPLACE_WITH_YOUR_BCRYPT_HASH"
      - "traefik.http.routers.api.middlewares=basicauth@docker"

  # Örnek uygulama
  whoami:
    image: traefik/whoami
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.whoami.rule=Host(`app.example.com`)"
      - "traefik.http.routers.whoami.entrypoints=websecure"
      - "traefik.http.routers.whoami.tls.certresolver=letsencrypt"
    networks:
      - web

networks:
  web:
    external: true

Bu dosyada iki önemli nokta var: “exposedbydefault=false” etiketsiz konteynerların dış dünyaya açılmasını engeller; “http redirections” ise tüm HTTP trafiğini otomatik olarak HTTPS’e taşır. Dashboard’ı traefik.example.com üzerinden basit bir BasicAuth ile koruyoruz. Parola hash’ini üretmek için şu komutlardan birini kullanabilirsiniz:

# OpenSSL ile bcrypt:
htpasswd -nbB admin SIFRENIZ

# Ya da Python:
python3 -c "import bcrypt; print(b'admin:' + bcrypt.hashpw(b'SIFRENIZ', bcrypt.gensalt()))"

Elde ettiğiniz hash’i compose dosyasına yapıştırırken $ karakterlerini $$ ile kaçırın; aksi halde Compose bunu çevresel değişken sanacaktır.

Adım 3: Servis ekleme ve çoklu alan adı

Yeni bir servis eklemek için ilgili konteynere “traefik.enable=true” etiketi ve “rule=Host(`sub.example.com`)" kuralı tanımlayın. Her servis için ayrı router, entrypoint ve TLS resolver atayabilirsiniz. Örneğin bir Node.js uygulaması için:

myapp:
  image: node:20-alpine
  working_dir: /app
  command: ["node", "server.js"]
  volumes:
    - ./myapp:/app
  labels:
    - "traefik.enable=true"
    - "traefik.http.routers.myapp.rule=Host(`api.example.com`)"
    - "traefik.http.routers.myapp.entrypoints=websecure"
    - "traefik.http.routers.myapp.tls.certresolver=letsencrypt"
  networks:
    - web

Statik dosya sunucuları, PHP-FPM arkasındaki Nginx veya Go/Rust uygulamaları da benzer şekilde etiketlenir. Tüm servisler aynı “web” ağına bağlı oldukça Traefik onları otomatik keşfeder.

Güvenlik ve en iyi uygulamalar

- Dashboard’ı mutlaka alt alan adı ve BasicAuth (veya IP kısıtlaması) ile koruyun.

- “acme.json” dosyasını 600 izinleriyle saklayın; sertifika anahtarları bu dosyada tutulur.

- Gereksiz portları açmayın; yalnızca 80 ve 443 çoğu kurulum için yeterlidir.

- Üretimde otomatik yeniden başlatma politikası (“restart: unless-stopped”) kullanabilirsiniz.

Sık karşılaşılan hatalar ve çözümler

- Sertifika alınamadı: DNS kayıtlarınız doğru mu? Cloudflare “proxied” açık mı? HTTP-01 için kapalı olmalı. Alternatif olarak DNS-01 challenge kullanarak wildcard (*.example.com) alabilirsiniz.

- 80/443 dinlenemiyor: Sunucuda bu portları kullanan farklı bir servis (ör. Nginx) çalışıyor olabilir. Kapatın veya taşıyın.

- Rate limit: Let’s Encrypt test sırasında üretim yerine staging sunucularını deneyin. Traefik için “acme.caserver” parametresiyle staging’e geçebilirsiniz.

- “acme.json permission denied”: Dosya izinlerini 600 yapın ve doğru mount yolunu kontrol edin.

Sonuç

Traefik v3 ve Docker Compose ile çok sayıda servisi tek bir sunucu üzerinde, otomatik SSL ve modern yönlendirme yetenekleriyle dakikalar içinde yayına alabilirsiniz. Etiket tabanlı mimari, CI/CD süreçlerine rahatça entegre olurken, yeniden başlatma ihtiyacı olmadan konfigürasyon değişikliklerini devreye almanızı sağlar. Üstelik ölçeklenebilir ve gözlemlenebilir bir altyapının temelini atmış olursunuz.

Tarayıcıda Python Çalıştırma Rehberi: WebAssembly ve Pyodide ile Adım Adım

WebAssembly (WASM) ve Pyodide sayesinde Python kodunu doğrudan tarayıcıda, sunucuya ihtiyaç duymadan çalıştırmak artık mümkün. Bu yazıda, Pyodide nedir, nasıl entegre edilir, paket yönetimi ve performans ipuçları nelerdir gibi sorulara adım adım yanıt veriyorum. Hedefimiz, hem modern web uygulamalarına Python gömmenin pratik yolunu göstermek hem de gerçek hayatta işinize yarayacak optimizasyon önerilerini sunmak.

Pyodide Nedir?

Pyodide, CPython yorumlayıcısını ve birçok bilimsel Python paketini WebAssembly’ye derleyerek tarayıcıda çalıştırmanıza olanak tanır. NumPy, Pandas, Matplotlib gibi kütüphanelerin “pure-Python” olanlarını veya WASM’a derlenmiş varyantlarını tarayıcıya getirir. Ağ bağlantısı olmasa bile, gerekli dosyalar indirildikten sonra kodunuzu yerel olarak işletir. Bu da interaktif eğitim içerikleri, gömülü veri görselleştirme, offline notebook deneyimleri ve güvenli istemci tarafı prototipleme için güçlü bir zemin sunar.

Hızlı Başlangıç: Basit Entegrasyon

Aşağıdaki minimal örnekle tarayıcıda Python çalıştırabilirsiniz. Kodu bir HTML dosyasına koyup açmanız yeterli.

<!-- Pyodide yükleyici -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.0/full/pyodide.js"></script>
<script>
(async () => {
const pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.0/full/" });
await pyodide.runPythonAsync(`import sys; print(sys.version)`);
const result = await pyodide.runPythonAsync("sum(range(10))");
console.log("Python sonucu:", result);
})();
</script>

Burada loadPyodide ile WASM tabanlı Python ortamı yükleniyor, ardından runPythonAsync ile kod yürütülüyor. Konsolda Python sürümü ve örnek bir hesaplamanın sonucu görünecektir.

Paket Yönetimi: micropip ve Yerleşik Paketler

Pyodide, birçok popüler kütüphaneyi hazır olarak getirir. Ek bir pakete ihtiyaç duyduğunuzda micropip ile pure-Python paketleri (C uzantısı gerektirmeyenler) kolayca kurulabilir.

await pyodide.runPythonAsync(`import micropip; await micropip.install("requests")`);

NumPy veya Pandas gibi ağır paketler için Pyodide’ın yerleşik kaynaklarını kullanmak daha verimlidir. Bunlar çoğunlukla pyodide.loadPackage ile önceden yüklenebilir:

await pyodide.loadPackage(["numpy", "pandas"]);

Paket yüklemelerini sayfa ilk açılışında toplu yapmak, kullanıcı etkileşimi sırasında gecikmeleri azaltır. İlk kez yüklemede CDN’den indirme yapılırken, sonraki sayfa yenilemelerinde tarayıcı önbelleğinden faydalanılır.

Tarayıcı Dosya Sistemi ve Veri Paylaşımı

Pyodide, Emscripten’in sanal dosya sistemini (MEMFS) kullanır. JavaScript tarafındaki veriyi Python tarafına aktarmak için dosya sistemine yazmak pratik bir yöntemdir:

const csv = "a,b\\n1,2\\n3,4";
pyodide.FS.writeFile("/tmp/data.csv", csv);
await pyodide.runPythonAsync(`import pandas as pd; df = pd.read_csv("/tmp/data.csv"); print(df.sum().to_dict())`);

Alternatif olarak, doğrudan JS-Python köprüsünden yararlanabilir ve pyodide.toPy / pyodide.toJs ile veri alışverişi yapabilirsiniz. Büyük verilerde kopyalamayı en aza indirmek için bu köprüleri tercih edin.

Performans İpuçları

- Lazy yükleme yapın: İlk ekranda gerekmeyen büyük paketleri, kullanıcı etkileşimiyle tetiklenen aşamada yükleyin.
- runPython yerine runPythonAsync kullanın: Uzun süren işlemler UI’ı kilitlemesin.
- Ön ısıtma (warm-up): Sayfa yüklenir yüklenmez küçük bir Python ifadesi çalıştırmak, JIT yoksa bile modül başlatmalarını önceden yaparak ilk gerçek görevde gecikmeyi azaltır.
- Önbellekleme: CDN varlıklarını (pyodide.js, .wasm, paket indeksleri) Service Worker ile cache-first stratejisiyle saklayın. Böylece offline veya zayıf ağda bile hızlı açılış sağlanır.
- Veri boyutunu sınırlayın: Tarayıcı belleği kısıtlıdır. Tek seferde işlenen veri setlerini makul boyutta tutun ve gereksiz kopyalardan kaçının.

Güvenlik ve Sandbox

Pyodide, tarayıcının güvenli çalışma alanında koşar. Varsayılan olarak yerel dosya sistemine erişemez ve ağ istekleri tarayıcı CORS kurallarına tabidir. Üçüncü taraf paketleri yüklerken yalnızca güvendiğiniz kaynakları kullanın. Kullanıcıdan gelen Python kodunu çalıştıracaksanız, suistimali azaltmak için zaman sınırı, bellek sınırı ve izinli API listesi (allowlist) gibi korumalar düşünün.

Ne Zaman Pyodide? Ne Zaman Sunucu?

- Pyodide’ı tercih edin: Hızlı prototip, eğitim içerikleri, etkileşimli dokümantasyon, gizlilik gerektiren istemci tarafı analizler, offline kullanım senaryoları.
- Sunucuyu tercih edin: Büyük veri işlemleri, yoğun CPU bellek kullanımı, kurumsal paket bağımlılıkları, kalıcı depolama ve erişim kontrolünün kritik olduğu projeler.

Örnek Kullanım: Mini Veri Görselleştirme

Aşağıdaki örnek, küçük bir veri kümesiyle Matplotlib’i kullanır. İlk etapta paketi yükleyin, ardından grafiği base64 olarak üretip bir <img> etiketine atayabilirsiniz. (Bu yazıda görsel eklemiyoruz, ancak yaklaşım bu şekildedir.)

await pyodide.loadPackage(["matplotlib", "numpy"]);
const png = await pyodide.runPythonAsync(`import matplotlib.pyplot as plt, io, base64, numpy as np
x = np.linspace(0, 2*np.pi, 200)
y = np.sin(x)
plt.figure(figsize=(3,2), dpi=150)
plt.plot(x, y)
buf = io.BytesIO()
plt.savefig(buf, format="png", bbox_inches="tight")
base64.b64encode(buf.getvalue()).decode()`);
// document.getElementById("plot").src = "data:image/png;base64," + png;

Sonuç

Pyodide ve WebAssembly, Python’u tarayıcıya taşıyarak ön uç geliştirmeye yeni kapılar açıyor. Doğru paket yönetimi, akıllı önbellekleme ve verimli veri paylaşımıyla hem akıcı bir kullanıcı deneyimi hem de sürdürülebilir performans elde edebilirsiniz. Küçük başlayın, ihtiyaç duydukça paketleri ve optimizasyonları ekleyin. Böylece ister eğitim amaçlı mini bir laboratuvar, ister ürününüze gömülü etkileşimli bir analiz modülü geliştirin; modern webin olanaklarından en iyi şekilde yararlanırsınız.

Rust ve WebAssembly ile Tarayıcıda Yüksek Performanslı Görüntü Filtresi Geliştirme (Adım Adım)

Giriş

Tarayıcıda yüksek performanslı görüntü işleme yapmak çoğu zaman JavaScript ile zorlayıcı olabilir. Rust ve WebAssembly (WASM) ikilisi sayesinde, CPU yoğun işlemleri güvenli ve hızlı biçimde web tarafına taşıyabilirsiniz. Bu rehberde, Rust ile basit bir gri tonlama filtresi yazacak, wasm-bindgen ve wasm-pack kullanarak WebAssembly’ye derleyecek ve sonucu bir web projesinde çağıracağız. Amaç sade, pratik ve SEO uyumlu bir anlatımla sizi hızlıca üretken hale getirmek.

Neden Rust + WebAssembly?

WebAssembly, tarayıcıda neredeyse yerel hızda çalışabilen bir bayt kod formatıdır. Rust ise bellek güvenliği, sıfır maliyetli soyutlamalar ve modern dil özellikleriyle WebAssembly hedefi için biçilmiş kaftandır. Bu kombinasyon sayesinde, görüntü işleme, ses işleme, veri sıkıştırma gibi CPU yoğun iş yüklerini JavaScript’in tek iş parçacıklı darboğazından çıkarır ve kullanıcıya akıcı bir deneyim sunarsınız.

Önkoşullar ve Kurulum

Başlamadan önce sisteminizde Rust (stable), wasm-pack ve bir paket yöneticisi (npm veya pnpm) kurulu olmalı. Kurulum komutları: curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh ve cargo install wasm-pack. Web tarafı için basit bir Vite veya React projesi işinizi görecektir.

Rust Kütüphanesini Oluşturma

Yeni bir Rust kütüphanesi oluşturun: cargo new --lib image_filter_wasm. Ardından Cargo.toml dosyanızı aşağıdaki gibi düzenleyin:

[package]
name = "image_filter_wasm"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Gri Tonlama Filtresi Yazımı

Temel yaklaşımımız, bir Uint8Array içindeki RGBA piksel verisini alıp, gri tonlama uygulayarak yine Uint8Array olarak geri döndürmek. src/lib.rs içeriği örneği:

use wasm_bindgen::prelude::*;
use js_sys::Uint8Array;

#[wasm_bindgen]
pub fn grayscale(input: Uint8Array) -> Uint8Array {
  let mut data = input.to_vec();
  let len = data.len();
  let mut i = 0;
  while i + 3 < len {
    let r = data[i] as u32;
    let g = data[i + 1] as u32;
    let b = data[i + 2] as u32;
    // Luma (BT.709) yaklaşımı
    let y = (0.2126 * r as f32 + 0.7152 * g as f32 + 0.0722 * b as f32) as u8;
    data[i] = y;
    data[i + 1] = y;
    data[i + 2] = y;
    i += 4;
  }
  Uint8Array::from(&data[..])
}

Yukarıdaki örnekte wasm-bindgen ile Uint8Array türünü kullanarak kopyalama maliyetini yönetilebilir düzeyde tutuyoruz. Daha ileri optimizasyonlar için tek seferlik bellek ayırma ve işaretçi tabanlı API’ler de tercih edilebilir.

WebAssembly’ye Derleme

Klasör kökünde wasm-pack build --target web çalıştırın. Bu komut pkg klasöründe tarayıcı uyumlu JS wrapper ve .wasm dosyasını üretir. Alternatif olarak --target bundler ile bundler tabanlı projelere uygun çıktı alabilirsiniz.

Web Projesine Entegrasyon (React Örneği)

Bir React projesinde, canvas üzerinden ImageData elde edip pikselleri WASM fonksiyonuna aktaracağız. Basit bir akış şu şekilde olabilir:

import init, { grayscale } from "./pkg/image_filter_wasm.js";

async function runFilter(ctx, width, height) {
  await init();
  const imageData = ctx.getImageData(0, 0, width, height);
  const input = new Uint8Array(imageData.data.buffer.slice(0));
  const output = grayscale(input);
  imageData.data.set(output);
  ctx.putImageData(imageData, 0, 0);
}

Bu kod, canvas içindeki görseli alır, pikselleri grayscale fonksiyonundan geçirir ve yeniden kanvasa yazar. Geri dönüşte yeni bir Uint8Array aldığımız için doğrudan set ile kopyalamak yeterlidir.

Performans İpuçları

- Kopyalamaları azaltın: Sürekli yeni Uint8Array oluşturmak yerine, tek bir tamponu tekrar kullanacak bir API tasarlayın (ör. işaretçi ve uzunluk üzerinden, ileri düzey wasm-bindgen teknikleriyle).
- SIMD etkinleştirin: Rust’ta wasm32-unknown-unknown hedefi için SIMD desteği stabildir. Yapılandırmada RUSTFLAGS="-C target-feature=+simd128" kullanabilir, wasm-opt -O3 ile Binaryen optimizasyonlarına başvurabilirsiniz.
- İş yükünü ayırın: Büyük resimlerde ana iş parçacığını kilitlememek için Web Worker üzerinden çağrı yapın. Çok iş parçacığı (WASM threads) kullanacaksanız SharedArrayBuffer gerekeceğinden COOP/COEP ile Cross-Origin Isolation aktif olmalı.

Karşılaşılabilecek Sorunlar

- Paketleme: Bazı bundler’lar .wasm dosyalarının kopyalanması ve yüklenmesi için özel yapılandırma ister. --target web çıktısı, modern bundler’larla genelde sorunsuzdur.
- Tür uyumsuzluğu: ImageData.data Uint8ClampedArray döndürür. Bu nedenle Uint8Array dönüşümü yaptığımızdan emin olmalıyız.
- Boyut: WASM paketinin boyutunu düşük tutmak için gereksiz bağımlılıklardan kaçının ve wasm-opt kullanın.

Test ve Ölçüm

Basit bir FPS sayacı veya zaman damgası ile performance.now() ölçümleri alarak JavaScript ve WASM sürümlerini kıyaslayın. Büyük çözünürlükteki görsellerde, Rust + WebAssembly yaklaşımının belirgin şekilde daha düşük gecikme ve daha yüksek kare/saniye ürettiğini göreceksiniz.

Sonuç

Rust ve WebAssembly, tarayıcıda yüksek performanslı görüntü işleme için güçlü ve sürdürülebilir bir çözüm sunar. Bu rehberde, sıfırdan bir gri tonlama filtresi yazarak derleme, entegrasyon ve optimizasyon adımlarını gördük. Aynı yöntemi keskinleştirme, bulanıklaştırma, kenar algılama gibi farklı filtrelerle genişletebilir, hatta gerçek zamanlı kamera akışlarına uygulayabilirsiniz. Modern web uygulamalarında performansı öne çıkarmak istiyorsanız, Rust + WASM öğrenme eğrisine kesinlikle değer.