Streaming Arayüzü: Karakter Karakter Yazı Efekti Rehberi
Giriş
Modern web arayüzlerinde, özellikle sohbet botları ve akıştabanlı metin sunumlarında karşılaştığınız o canlı hissiyatı veren yazı efekti, teknik dünyada genellikle streaming text effect veya typewriter animation olarak bilinir. Bu efekt, kullanıcının metnin canlı olarak üretiliyormuş gibi hiss etmesini sağlar ve deneyimi önemli ölçüde iyileştirir. Bu yazıda, bu efekti nasıl uygulayabileceğinizi adım adım anlatacağız.
Temel Kavramlar
Karakter karakter yazı efekti, arka planda bir API'den gelen verinin parça parça işlenerek ekrana yansıtılması prensibine dayanır. Kullanıcılar genellikle OpenAI, Claude veya benzeri Large Language Model (LLM) servislerinden stream JSON formatında veri alır. Bu veri blokları, metin parçaları halinde sunulur ve frontend tarafında her bir karakter veya kelime adım adım ekrana bastırılır.
İki temel yaklaşım vardır:
- Tamamını bekle, sonra yaz: Tüm yanıt oluşana kadar bekleyip ardından yazdırma efekti uygula.
- Akkış halinde yaz: Her gelen token'ı anında ekrana yansıt.
İkinci yöntem daha gerçekçi bir deneyim sunar ve günümüzde yaygın olarak tercih edilir.
Uygulama Adımları
1. Backend'den Stream Verisi Alma
Geliştirdiğiniz uygulama, LLM servisine istek gönderirken stream modunu etkinleştirmelidir. Örneğin, bir API çağrısı sırasında stream: true parametresi ile yanıtın chunk chunk gelmesi sağlanır. Gelen her bir chunk, içinde bir metin parçası barındırır.
2. Frontend'de Akışın İşlenmesi
JavaScript tarafında, gelen stream'i bir okuyucu ile satır satır veya token token işlersiniz. Her okunan bloktan metin kısmı ayrıştırılır ve bir değişkende biriktirilir.
3. Karakter Karakter Yazma Animasyonu
Biriktirilen metin, bir interval veya requestAnimationFrame yardımıyla karakter karakter ekrana yazdırılır. Bu aşamada dikkat edilmesi gereken nokta, her yeni karakter eklendiğinde imlecin de hareket etmesidir. CSS ile cursor animasyonu ekleyerek efekti daha da canlı hale getirebilirsiniz.
Önemli detay: Metin çok uzunsa, her karakter için DOM güncellemesi yapmak performansı düşürebilir. Bu nedenle, karakterleri toplu halde bir HTML span içine yazmak ve sadece gerekli anlarda güncellemek daha performanslıdır.
4. Hata Yönetimi ve Tamamlanma
Akış sırasında bir hata oluşursa kullanıcıya bildirim göstermek, akış tamamlandığında ise imlecin kaybolmasını veya yanıtın sonlandığını belirten bir işaret koymak iyi bir kullanıcıl deneyimi sağlar.
Sonuç
Karakter karakter yazı efekti, streaming arayüzlerde kullanıcının metni takip etme hissini güçlendiren basit ama etkili bir tekniktir. Backend'den stream verisini doğru almak, frontend'de akışı yönetmek ve performanslı bir DOM güncellemesi sağlamak bu uygulamanın anahtarıdır.
Eğer Türkiye'de OpenAI uyumlu bir API servisi arayışındaysanız, apicloud.com.tr üzerinde TL cinsinden bakiye sistemiyle çalışan çözümler de mevcut. Böylece hem teknik altyapınızı kurarken hem de maliyet kontrolünü sağlayarak projelerinizi hayata geçirebilirsiniz.