Streaming arayüzü ile karakter karakter yazı efekti oluşturma

Bir yapay zekâ yanıtının tamamı hazırlandıktan sonra ekrana basılması, özellikle uzun cevaplarda kullanıcıya bekleme hissi verebilir. Streaming yaklaşımında ise sunucu, yanıtın tamamını beklemek yerine üretildikçe küçük parçalar gönderir. Arayüz de bu parçaları anında ekrana ekleyerek karakter karakter yazılıyormuş gibi görünen akıcı bir deneyim oluşturur.

Burada önemli bir ayrım var: Yapay zekâ servisleri çoğunlukla doğrudan tek tek karakter göndermez. Yanıtlar genellikle token veya metin parçaları hâlinde gelir. Kullanıcı açısından sonuç yine yazı yazılıyormuş gibi görünür; ancak uygulamanın teknik olarak yaptığı işlem, gelen parçaları sırayla birleştirmektir.

Streaming mantığı nasıl çalışır?

Tipik akış dört adımdan oluşur:

1. Tarayıcı, kullanıcının mesajını sunucuya gönderir.
2. Sunucu, yapay zekâ API'sine streaming seçeneğiyle istek yapar.
3. API, yanıtı küçük veri parçaları şeklinde iletir.
4. Sunucu veya tarayıcı, her parçayı arayüze ekler.

Bu iletişim için en yaygın yöntemlerden biri SSE, yani Server-Sent Events yaklaşımıdır. SSE, sunucunun açık bir HTTP bağlantısı üzerinden istemciye yeni olaylar göndermesine dayanır. WebSocket da kullanılabilir; ancak yalnızca sunucudan istemciye düzenli metin akışı gerekiyorsa SSE daha sade bir çözüm olabilir.

OpenAI uyumlu API kullanan platformlarda istek gövdesinde genellikle stream: true benzeri bir seçenek bulunur. Örneğin apicloud.com.tr üzerinden kullanılan bir API entegrasyonunda da uygulamanızın ilgili streaming desteğini ve dönen veri biçimini dokümantasyondan doğrulamanız gerekir. Alan adları, olay yapısı ve hata formatı sağlayıcıya göre değişebilir.

Tarayıcıda gelen parçaları ekrana yazdırma

Basit bir istemci tarafı uygulamasında fetch ile alınan yanıtın gövdesi okunabilir. ReadableStream üzerinden gelen veriler, TextDecoder yardımıyla metne dönüştürülür:

const response = await fetch("/api/chat", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    message: "Streaming nasıl çalışır?",
    stream: true
  })
});

const reader = response.body.getReader();
const decoder = new TextDecoder();
let answer = "";

while (true) {
  const { value, done } = await reader.read();

  if (done) break;

  const chunk = decoder.decode(value, { stream: true });
  answer += chunk;
  outputElement.textContent = answer;
}

Bu örnek, sunucunun doğrudan metin parçaları gönderdiği basit senaryoyu gösterir. Gerçek SSE yanıtlarında veri genellikle data: ile başlayan satırlarda bulunur ve olaylar boş satırlarla ayrılır. Bu nedenle her ağ parçasını tek başına eksiksiz bir olay kabul etmemek gerekir. Bir olay iki farklı ağ paketine bölünebilir veya tek pakette birden fazla olay bulunabilir.

Bu durumu yönetmek için gelen verileri bir tamponda tutup satır sonlarına göre ayrıştırmak gerekir. JSON içeren olaylarda da JSON parse işlemi, olayın tamamı elde edildikten sonra yapılmalıdır. Aksi hâlde geçici ve eksik bir veri parçası parse hatasına yol açabilir.

Kullanıcı deneyimini güçlendiren ayrıntılar

Streaming yalnızca metni hızlı göstermekten ibaret değildir. Kullanıcı deneyimi için aşağıdaki noktalar da önemlidir:

• İstek devam ederken gönder düğmesini devre dışı bırakın veya iptal seçeneği sunun.
• Kullanıcı yeni bir soru sorduğunda önceki akışı AbortController ile durdurun.
• Boş parçaları, bitiş sinyalini ve sağlayıcının hata mesajlarını ayrı işleyin.
• Yanıtı ekrana eklerken innerHTML yerine textContent kullanın. Markdown gösterecekseniz güvenilir bir ayrıştırıcı ve uygun HTML temizleme mekanizması kullanın.
• Otomatik kaydırmayı yalnızca kullanıcı zaten listenin altındaysa uygulayın. Kullanıcı eski mesajları incelerken ekranı zorla aşağı taşımayın.
• Bağlantı koptuğunda kullanıcıya yanıtın tamamlanmamış olabileceğini açıkça belirtin.

Karakter efekti ne zaman eklenmeli?

API parçaları hızlı geldiğinde metin ekranda bir anda büyüyebilir. Daha belirgin bir yazma efekti isteniyorsa gelen parçaları doğrudan basmak yerine kısa bir kuyrukta tutup karakter veya küçük metin grupları hâlinde gösterebilirsiniz. Bununla birlikte yapay bir gecikme, yanıtın gereksiz yere yavaş algılanmasına neden olabilir.

Genellikle en iyi yaklaşım, API'den gelen parçaları mümkün olduğunca hızlı göstermek ve yalnızca görsel ihtiyaç varsa küçük bir animasyon kullanmaktır. Böylece streaming'in temel avantajı olan düşük algılanan bekleme süresi korunur. Animasyonun tamamlanmasını beklemek yerine, yeni veri geldikçe görünür metni güncellemek daha doğal bir sonuç verir.