Respons Kecerdasan Buatan secara Streaming di Antarmuka Pengguna
Pelajari cara mengalirkan keluaran kecerdasan buatan token demi token ke frontend agar SaaS kecerdasan buatan Anda terasa cepat dan responsif, bukan membeku selama proses pembuatan yang panjang.
Respons Kecerdasan Buatan secara Streaming di Antarmuka Pengguna adalah pelajaran AI SaaS Builder gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar AI SaaS Builder, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus AI SaaS Builder mencakup 4 pelajaran total.
Mengapa Streaming Meningkatkan UX
Menunggu 10 detik untuk mendapatkan jawaban lengkap terasa seperti aplikasi rusak. Streaming menampilkan teks saat dihasilkan, sehingga aplikasi terasa cepat dan hidup.
Cara Kerja Streaming
Model mengeluarkan token secara bertahap. Server meneruskan setiap potongan ke peramban, yang menambahkannya ke layar.
Peristiwa yang Dikirim Server
SSE adalah aliran satu arah sederhana dari server ke klien melalui HTTP, ideal untuk streaming token.
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')Mengonsumsi Aliran di Klien
Gunakan pembaca streaming Fetch (atau EventSource) untuk membaca potongan dan memperbarui status saat potongan tersebut tiba.
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}Merender Secara Bertahap
Tambahkan potongan ke buffer status lalu lakukan render. Hindari merender ulang seluruh halaman untuk setiap token agar UI tetap lancar.
setText(prev => prev + chunk)Menampilkan Indikator Mengetik
Sebelum token pertama tiba, tampilkan animasi pemuatan atau kursor agar pengguna mengetahui bahwa proses telah dimulai.
Menangani Pembatalan
Biarkan pengguna menghentikan pembuatan yang berlangsung lama. Batalkan permintaan untuk menghemat token dan biaya.
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()Merender Markdown Streaming dengan Aman
Markdown parsial dapat dirender secara aneh di tengah aliran. Lakukan render secara bertahap, tetapi bersihkan HTML final untuk mencegah injeksi.
Menangani Kesalahan di Tengah Aliran
Aliran dapat gagal di tengah jalan. Deteksi aliran yang terputus dan tampilkan opsi coba lagi yang jelas, alih-alih membiarkan teks terpotong.
Pertimbangan Aksesibilitas
Teks yang diperbarui dengan cepat dapat membuat pembaca layar kewalahan. Gunakan wilayah langsung yang sopan dan umumkan saat selesai, bukan setiap token.
<div aria-live="polite">{streamedText}</div>Kapan Tidak Perlu Melakukan Streaming
Untuk keluaran terstruktur yang singkat (seperti satu objek JSON), streaming menambah kompleksitas dengan sedikit manfaat. Gunakan streaming untuk teks yang panjang dan mudah dibaca manusia.
Pemeriksaan Singkat
Periksa pemahaman Anda tentang streaming.
Rangkuman
Anda telah mempelajari cara kerja streaming token, cara mengirimkannya dengan SSE, mengonsumsinya di klien, merendernya secara bertahap, menampilkan indikator pengetikan, mendukung pembatalan, menangani kesalahan di tengah streaming, menjaga aksesibilitasnya, serta mengetahui kapan streaming tidak sepadan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Respons Kecerdasan Buatan secara Streaming di Antarmuka Pengguna” gratis?
Ya — teks lengkap “Respons Kecerdasan Buatan secara Streaming di Antarmuka Pengguna” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus AI SaaS Builder, upgrade ke CoddyKit PRO. Kursus AI SaaS Builder mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Respons Kecerdasan Buatan secara Streaming di Antarmuka Pengguna”?
Pelajari cara mengalirkan keluaran kecerdasan buatan token demi token ke frontend agar SaaS kecerdasan buatan Anda terasa cepat dan responsif, bukan membeku selama proses pembuatan yang panjang. Kamu berlatih AI SaaS Builder dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai AI SaaS Builder?
Tidak diperlukan pengalaman sebelumnya. AI SaaS Builder di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Respons Kecerdasan Buatan secara Streaming di Antarmuka Pengguna” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran AI SaaS Builder ini?
Ya. Setiap pelajaran AI SaaS Builder menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Kerangka Kerja Frontend untuk SaaS
- Memvisualisasikan Keluaran Kecerdasan Buatan
- Praktik Terbaik Pengalaman Pengguna (UX)
- Respons Kecerdasan Buatan secara Streaming di Antarmuka Pengguna