Streaming'de Karakter Karakter Yazı Efekti Nasıl Yapılır?

Giriş: Streaming ve Typewriter Efekti İlişkisi

Modern AI uygulamalarında, modelden gelen metinlerin anlık olarak ekrana yansıtılması kullanıcı deneyimini önemli ölçüde artırır. Ancak ham streaming çıktısı bazen ani ve düz görünebilir. Karakter karakter yazı efekti (typewriter effect), bu süreci daha akıcı ve etkileyici hale getirir. Bu yazıda, JavaScript ve WebSocket kullanarak bir AI streaming arayüzünde nasıl typewriter efekti uygulanacağını adım adım anlatacağım.

Temel Mantık: Stream'yi Parçalara Ayırmak

Streaming API'leri genellikle veriyi küçük parçalar (chunk) halinde gönderir. Bu parçaların her biri, ekranda tek tek karakter olarak gösterilmelidir. Bunu başarmak için iki temel bileşen gerekir:

1. Veri alma katmanı: API'den gelen stream'i dinler ve parçaları toplar.
2. Görselleştirme katmanı: Toplanan metni karakter karakter ekrana yazdırır.

İlk adım olarak, fetch veya WebSocket bağlantısı kurup stream'i okumamız gerekir. Örneğin, OpenAI uyumlu bir API'ye istek gönderirken response.body özelliği üzerinden bir ReadableStream elde edilir.

Kod ile Uygulama Adımları

Aşağıda basit bir JavaScript örneği üzerinden mantığı açıklayacağım:

async function streamWithTypewriter(apiUrl, prompt, container) {
  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let accumulatedText = '';

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

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

    // Her chunk'tan sonra içeriği güncelle
    typeWriterEffect(accumulatedText, container);
  }
}

function typeWriterEffect(text, container) {
  container.textContent = text;
}

Bu temel yapıda typeWriterEffect fonksiyonu, metnin tamamını anında günceller. Oysa biz karakter karakter yazılmasını istiyoruz. Bunun için ek bir gecikme mekanizması gerekir.

Gecikmeli Karakter Yazma Mantığı

Typewriter efektini gerçekleştirmek için her karakter arasına küçük bir bekleme süresi eklemeliyiz. Bunu yapmak için async/await ve setTimeout kullanabiliriz:

async function typewriterWrite(text, container, speed = 30) {
  container.textContent = '';
  
  for (let i = 0; i < text.length; i++) {
    container.textContent += text[i];
    await new Promise(resolve => setTimeout(resolve, speed));
  }
}

Ancak bu yaklaşım, tüm metni önceden bekletir ve streaming avantajını ortadan kaldırır. Gerçek streaming senaryosunda her yeni chunk geldiğinde, eksik kalan karakterler yazılmaya devam etmelidir. Bunun için daha gelişmiş bir strateji kullanmak gerekir.

Streaming ile Entegre Typewriter Çözümü

En pratik çözüm, her chunk geldiğinde sadece yeni eklenen kısmı yazmaktır. Böylece hem streaming hızı korunur hem de karakter karakter yazı efekti elde edilir:

async function streamTypewriter(apiUrl, prompt, container) {
  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let lastLength = 0;

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

    const chunk = decoder.decode(value, { stream: true });
    const newText = chunk.split('');
    
    // Her yeni karakter için gecikme
    for (const char of newText) {
      container.textContent += char;
      await new Promise(r => setTimeout(r, 20));
    }
  }
}

Bu kodda her bir karakter için 20 milisaniye bekleme süresi ayarlanmıştır. Hızı değiştirmek için speed parametresini düzenleyebilirsiniz. Ayrıca, API'nizden dönen verinin yapısına göre (JSON, SSE vb.) chunk işleme mantığını uyarlamak gerekebilir.

Performans ve Kullanıcı Deneyimi İpuçları

• Bekleme süresi: 20-50ms arası genellikle idealdir. Çok düşük değerler efekti hissettirmezken, çok yüksek değerler kullanıcının sıkılmasına neden olabilir.
• Cursor efekti: Son karakterden sonra yanıp sönen bir imleç (_) eklemek efekti güçlendirir.
• Hata yönetimi: Bağlantı kopması veya geçici hatalarda kullanıcıya geri bildirim vermek önemlidir.
• Stop butonu: Kullanıcı streaming'i durdurabilmeli ve metin tamamlanırsa efekt otomatik sona ermelidir.

Sonuç

Streaming arayüzlerinde typewriter efekti, kullanıcıya AI'nın düşünme sürecini canlı izleme fırsatı verir. Yukarıda paylaşılan teknikler, basit bir JavaScript uygulamasıyla kolayca hayata geçirilebilir. Unutmayın ki, her API'nin stream yapısı farklı olabilir; bu yüzden gelen veriyi doğru parse etmek ilk adımdır. Deneyimlerinizi ve geliştirdiğiniz çözümleri paylaşmaktan çekinmeyin.