WebLLM ile Kişiselleştirme: Kullanıcı Davranışlarına Göre Dinamik İçerikler

Dijital pazarlamada hepimizin aşina olduğu o standart mesajları düşünün: “Fırsatları Kaçırma!”, “Hemen Alışverişe Başla!”. Peki, bu mesajlar ne kadar etkili? Artık kullanıcılar, kendilerini anlayan, onlara özel ve anlamlı deneyimler bekliyor.

Bu beklentiden yola çıkarak bir soru sordum: “Kullanıcı verilerini tamamen gizli tutarak, yani sunucuya hiçbir bilgi göndermeden, tamamen tarayıcı üzerinde çalışan bir yapay zeka ile kişiye özel pazarlama mesajları üretebilir miyiz?”

Cevap: Evet! Ve bu yazıda, WebLLM teknolojisini kullanarak bu sorunun cevabını nasıl somut bir projeye dönüştürdüğümü adım adım anlatacağım.

Sorun: Jenerik Mesajlar ve Gizlilik İkilemi

Klasik e-ticaret siteleri, tüm ziyaretçilere genellikle aynı başlıkları ve karşılama mesajlarını gösterir. Bu durum, potansiyel müşterilerle bağ kurma fırsatını kaçırmamıza neden olur. Kişiselleştirme yapmak istediğimizde ise genellikle kullanıcının hassas verilerini (gezinme geçmişi, ilgi alanları vb.) sunucularımıza toplamamız gerekir. Bu da hem maliyetlidir hem de KVKK/GDPR gibi gizlilik regülasyonları açısından ciddi sorumluluklar getirir.

Çözüm: Tarayıcıda Çalışan Yapay Zeka – WebLLM

Projenin odağında WebLLM yatıyor. WebLLM, Büyük Dil Modellerini (LLM) sunucuya ihtiyaç duymadan, doğrudan tarayıcı üzerinde çalıştırmamızı sağlayan bir teknoloji.

Kısacası WebLLM;

Geleneksel yapay zeka uygulamalarında (örneğin bir chatbot kullandığınızda), yazdığınız her mesaj internet üzerinden bir sunucuya gönderilir, orada devasa bir model tarafından işlenir ve cevap size geri yollanır. WebLLM ise bu denklemi tamamen değiştirir. Bu devrimsel teknoloji, Llama 3, Gemma gibi güçlü Büyük Dil Modellerini (LLM) sunucuya ihtiyaç duymadan, doğrudan kullanıcının web tarayıcısı içinde çalıştırmamızı sağlar. Yani tüm yapay zeka hesaplaması, kullanıcının kendi bilgisayarında veya telefonunda, tamamen güvenli bir ortamda gerçekleşir.

Bunun anlamı ne?

• %100 Gizlilik: Kullanıcıya ait çerez (cookie) bilgileri gibi veriler, analiz ve içerik üretimi için tarayıcının dışına asla çıkmaz.
• Sıfır Gecikme: Sunucuya gidip gelme süresi olmadığı için içerik üretimi anlıktır.
• Düşük Maliyet: Pahalı API çağrılarına veya sunucu altyapısına gerek kalmaz.

Projenin Anatomisi: “TechMart” Demo Sayfası

Bu konsepti kanıtlamak için “TechMart” adında sahte bir e-ticaret sitesinin “Bilgisayar” kategorisi sayfasını oluşturdum.

Adım 1: Kullanıcı Profillerini Simüle Etmek

Gerçek bir senaryoda, kullanıcının geçmiş davranışları tarayıcıdaki çerezlerde saklanır. Ben bu durumu simüle etmek için çeşitli kullanıcı personaları oluşturdum. Sayfa her yüklendiğinde, bu personalardan biri rastgele seçiliyor.

Kod içerisinde örneği:


// Kullanıcı profilleri (cookie simülasyonu)
const USER_PROFILES = [
{
persona: "Gaming Enthusiast",
ageGroup: "25-35",
interest: "gaming",
budget: "15000-30000"
},
{
persona: "Business Professional",
ageGroup: "35-45",
interest: "is",
budget: "30000+"
},
{
persona: "Creative Professional",
ageGroup: "25-35",
interest: "grafik",
budget: "30000+"
}
];

Bu sayede “Oyun Tutkunu” bir kullanıcı ile “İş Profesyoneli” bir kullanıcıya farklı mesajlar gösterebileceğiz.

Adım 2: WebLLM Kullanımı

Sıradaki adım, seçilen kullanıcı profiline göre dinamik bir başlık üretmekti. Burada WebLLM ve doğru bir “prompt” (yapay zekaya verdiğimiz komut) devreye giriyor.

Öncelikle, @mlc-ai/web-llm kütüphanesini kullanarak Meta’nın Llama 3.1 8B modelini tarayıcıda çalıştırdım.


// WebLLM import ve yükleme
import { CreateMLCEngine } from 'https://esm.run/@mlc-ai/web-llm';

mlcEngine = await CreateMLCEngine(
"Llama-3.1-8B-Instruct-q4f32_1-MLC",
{
initProgressCallback: (report) => {
// Yüklenme durumunu kullanıcıya gösteren kısım...
}
}
);

Model yüklendikten sonra, ona ne yapması gerektiğini anlatan prompt’u gönderdim. Projenin ana noktasıda aslında tam olarak bu prompt:

PROMPT ÖRNEĞİ

Sen e-ticaret başlık uzmanısın. TechMart sitesinde Bilgisayar kategorisi için kişiselleştirilmiş başlık yaz.

Kullanıcı Profili: Gaming Enthusiast

• Yaş: 25-35
• İlgi: gaming
• Bütçe: 15000-30000

Sadece başlığı yaz, 6-10 kelime, dikkat çekici, CTA odaklı:

Prompt’un kısaca özeti;

1. Rol Atama: “Sen e-ticaret başlık uzmanısın.” diyerek yapay zekaya bir kimlik verdim.
2. Bağlam Sunma: Site ve kategori bilgilerini vererek ne için başlık yazacağını belirttim.
3. Veri Enjeksiyonu: Simüle edilmiş kullanıcı profili bilgilerini dinamik olarak ekledim.

Net Talimatlar: “Sadece başlığı yaz”, “6-10 kelime”, “CTA odaklı” gibi kurallarla istediğim formatta bir çıktı almayı garantiledim.

Not: Ben başlık üretme üzerinden gittim ama siz buradaki durumu değiştirebilir farklı içerik çalışmaları yapabilirsiniz.

Adım 3: Sonuç – Statikten Dinamiğe Geçiş

WebLLM bu prompt’u işledikten sonra saniyeler içinde kişiye özel bir başlık üretti. Son adım ise bu başlığı sayfada belirgin bir şekilde göstermekti.

Önce:

Standart ve sıkıcı bir “Bilgisayar Kategorisi” başlığı.

Sonra (Örnek: “Gaming Enthusiast” profili için):

Yapay zeka tarafından üretilen dinamik ve dikkat çekici bir başlık! Örneğin: “Oyun Arenasının Hakimi Ol: Güçlü Bilgisayarlar Seni Bekliyor!”

Bu başlık, sadece metin olarak değişmekle kalmadı, aynı zamanda CSS ile de vurgulanarak kullanıcının dikkatini hemen çekecek şekilde tasarlandı.

Örnek ekran görüntüsü;

Kullanıcı profilini tanıması

Oluşturulan başlık;

Webllm ile Başka Neler Yapılabilir?

Bu demo, sadece bir başlangıç. Aynı mantıkla:

• Kullanıcının daha önce incelediği ürünlere göre ana sayfada dinamik ürün öneri blokları oluşturulabilir.
• Sepetini terk eden bir kullanıcı geri döndüğünde, sepetindeki ürünlere özel indirim teklifleri içeren başlıklar gösterilebilir.
• Sitede geçirilen süreye veya ziyaret sıklığına göre farklı sadakat mesajları üretilebilir.

Tüm bunları, kullanıcının verilerini sunucuya gönderme zorunluluğu olmadan, tamamen gizlilik odaklı bir şekilde yapabiliriz.

Sonuç

WebLLM gibi cihaz üzerinde çalışan yapay zeka teknolojileri, dijital pazarlama ve kullanıcı deneyimi alanında yeni bir çağın ve yeni fırsatların ortaya çıkışını gösteriyor.

Yaptığım demodaki tüm kodlara ise github üzerinden erişebilirsiniz. Linki: https://github.com/emrebalci35/webllm

WebLLM için daha detaylı bilgi için ise: https://github.com/mlc-ai/web-llm inceleyebilirsiniz.