Kullanıcı Arayüzünde Yapay Zeka Yanıtlarını Akış Olarak Sunma
Uzun üretimler sırasında yapay zeka SaaS'ınızın donmuş görünmek yerine hızlı ve duyarlı hissettirmesi için yapay zeka çıktısını belirteç belirteç ön yüze aktarmayı öğrenin.
Kullanıcı Arayüzünde Yapay Zeka Yanıtlarını Akış Olarak Sunma, CoddyKit'te ücretsiz bir AI SaaS Builder dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, AI SaaS Builder öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. AI SaaS Builder kursu toplamda 4 dersten oluşur.
Akış UX'i Neden İyileştirir
Tam bir yanıt için 10 saniye beklemek uygulamanın bozuk olduğu hissini verir. Akış, metni oluşturuldukça göstererek uygulamanın hızlı ve canlı hissettirmesini sağlar.
Akış Nasıl Çalışır
Model, token'ları kademeli olarak üretir. Sunucu her parçayı tarayıcıya iletir ve tarayıcı da bunu ekrana ekler.
Sunucu Tarafından Gönderilen Olaylar
SSE, HTTP üzerinden sunucudan istemciye gönderilen basit, tek yönlü bir akıştır ve token akışı için idealdir.
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')İstemcide Akış Tüketme
Parçaları okumak ve geldikçe durumu güncellemek için Fetch akış okuyucusunu (veya EventSource) kullanın.
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}Kademeli Görüntüleme
Parçaları bir durum arabelleğine ekleyip görüntüleyin. Kullanıcı arayüzünü akıcı tutmak için her token'da sayfanın tamamını yeniden görüntülemekten kaçının.
setText(prev => prev + chunk)Yazma Göstergesini Gösterme
İlk token gelmeden önce, kullanıcıların işlemin başladığını anlaması için bir yükleniyor veya imleç animasyonu gösterin.
İptali Ele Alma
Kullanıcıların uzun süren bir üretimi durdurmasına izin verin. Token'lardan ve paradan tasarruf etmek için isteği iptal edin.
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()Markdown Akışını Güvenle İşleme
Kısmi Markdown, akış ortasında tuhaf görünebilir. Kademeli olarak görüntüleyin, ancak enjeksiyonu önlemek için son HTML'yi temizleyin.
Akış Ortasında Hata İşleme
Akışlar ortasında başarısız olabilir. Kesilmiş metin bırakmak yerine, bozulan akışı algılayın ve anlaşılır bir yeniden deneme seçeneği gösterin.
Erişilebilirlik Hususları
Hızla güncellenen metinler ekran okuyucuları zorlayabilir. Kibar canlı bölgeler kullanın ve her belirteci değil, tamamlanma durumunu duyurun.
<div aria-live="polite">{streamedText}</div>Akış Kullanılmaması Gereken Durumlar
Kısa ve yapılandırılmış çıktılar için (tek bir JSON nesnesi gibi) akış kullanmak, çok az fayda karşılığında karmaşıklık ekler. Akışı uzun, insanların okuyabileceği metinler için ayırın.
Hızlı Kontrol
Akış hakkındaki bilginizi kontrol edin.
Özet
Belirteç akışının nasıl çalıştığını, bunun SSE ile nasıl sunulacağını, istemcide nasıl tüketileceğini, aşamalı olarak nasıl işleneceğini, yazıyor göstergelerinin nasıl gösterileceğini, iptal desteğinin nasıl sağlanacağını, akış ortasındaki hataların nasıl ele alınacağını, erişilebilirliğin nasıl korunacağını ve akış kullanmanın ne zaman buna değmeyeceğini öğrendiniz.
Sıkça Sorulan Sorular
“Kullanıcı Arayüzünde Yapay Zeka Yanıtlarını Akış Olarak Sunma” dersi ücretsiz mi?
Evet — “Kullanıcı Arayüzünde Yapay Zeka Yanıtlarını Akış Olarak Sunma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve AI SaaS Builder kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. AI SaaS Builder kursu toplamda 4 dersten oluşur.
“Kullanıcı Arayüzünde Yapay Zeka Yanıtlarını Akış Olarak Sunma” dersinde ne öğreneceğim?
Uzun üretimler sırasında yapay zeka SaaS'ınızın donmuş görünmek yerine hızlı ve duyarlı hissettirmesi için yapay zeka çıktısını belirteç belirteç ön yüze aktarmayı öğrenin. AI SaaS Builder ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
AI SaaS Builder öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te AI SaaS Builder, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Kullanıcı Arayüzünde Yapay Zeka Yanıtlarını Akış Olarak Sunma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu AI SaaS Builder dersinde kod yazıp çalıştırabilir miyim?
Evet. Her AI SaaS Builder dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- SaaS için Ön Uç Çerçeveleri
- Yapay Zeka Çıktılarını Görselleştirme
- Kullanıcı Deneyimi (UX) için En İyi Uygulamalar
- Kullanıcı Arayüzünde Yapay Zeka Yanıtlarını Akış Olarak Sunma