Streaming Arayüzü: Karakter Karakter Yazı Efekti Nasıl Yapılır?

Giriş: Neden Streaming Efektine İhtiyacımız Var?

Kullanıcılar, bir yapay zekâ asistanıyla etkileşime geçtiğinde cevabın anında ve akıcı bir şekilde belirmesini ister. Geleneksel yöntemlerde tüm cevap sunucuda tamamlanıncaya kadar beklenir ve sonra ekranda görünür. Ancak streaming (yayın akışı) arayüzü, cevabın parça parça, karakter karakter ekrana yazılmasını sağlayarak çok daha doğal ve etkileyici bir deneyim sunar. Bu yazıda, bir AI API'sinden gelen cevabın karakter karakter yazı efektiyle nasıl sunulacağını adım adım açıklayacağız.

Temel Mantık: Server-Sent Events ve Akış Okuma

Streaming efektinin arkasındaki temel mantık, sunucunun cevabı tamamlayana kadar bağlantıyı açık tutması ve her parçayı geldikçe istemciye iletmek içindir. Sen Apicloud gibi OpenAI uyumlu API platformlarında bu işlem genellikle Server-Sent Events (SSE) protokolü üzerinden gerçekleşir. API'ye yapılan istek sırasında streaming parametresi aktif edilir ve sunucu, response'ı token token göndermeye başlar. İstemci tarafında bu akışı okuyup ekranda göstermek için JavaScript ile bir stream reader kullanılır. Her gelen chunk (parça) ekranda bir sonraki karakter olarak görüntülenir.

Uygulama Adımları: Adım Adım Kod Örneği

İlk olarak, API'ye gönderilecek istek yapılandırılmalıdır. OpenAI uyumlu bir kütüphane veya doğrudan fetch kullanarak streaming modu etkinleştirilebilir. İşte temel bir örnek:

const response = await fetch("https://api.apicloud.com.tr/v1/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
  },
  body: JSON.stringify({
    model: "gpt-4",
    messages: [{ role: "user", content: "Merhaba, nasılsın?" }],
    stream: true
  })
});

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);
  const lines = chunk.split("\n").filter(line => line.trim().startsWith("data:"));
  
  for (const line of lines) {
    const data = line.replace("data: ", "").trim();
    if (data === "[DONE]") continue;
    
    try {
      const json = JSON.parse(data);
      const token = json.choices[0]?.delta?.content || "";
      accumulatedText += token;
      displayText(accumulatedText);
    } catch (e) {}
  }
}

Yukarıdaki kodda, displayText() fonksiyonu ekranda metni günceller. Bu fonksiyon, accumulatedText değişkenini bir <div> veya <textarea> elementine atayarak anlık olarak görüntüleyebilir.

Dikkat Edilmesi Gereken Püf Noktaları

Streaming efekti gerçekleştirilirken dikkat edilmesi gereken birkaç önemli nokta vardır. İlk olarak, her token geldiğinde DOM'u güncellemek performans etkisi yaratabilir. Bu nedenle, mümkünse requestAnimationFrame veya benzeri bir mekanizma kullanarak güncellemeleri senkronize etmek faydalıdır. İkinci olarak, API'den gelen verinin doğru parse edilmesi önemlidir. Bazı platformlarda hata mesajları veya boş chunk'lar gelebilir; bunlar kontrolsüz şekilde işlenirse kullanıcıya hatalı görünüm oluşabilir. Son olarak, kullanıcıya "yazıyor..." hissi vermek için imleç animasyonu eklemek arayüz kalitesini artırır. Bu tür detaylar, teknik altyapının ötesinde kullanıcı deneyimini doğrudan etkiler.

Sen Apicloud gibi platformlar, OpenAI standardına uygun streaming desteği sunduğu için yukarıdaki yaklaşım doğrudan uygulanabilir. API key'inizi güvende tutarak ve streaming parametresini aktif ederek bu efekti kendi projenizde kolayca hayata geçirebilirsiniz.