Strumieniowanie odpowiedzi AI w interfejsie użytkownika
Nauczą się Państwo strumieniować dane wyjściowe AI token po tokenie do frontendu, aby AI SaaS działał szybko i responsywnie zamiast sprawiać wrażenie zawieszonego podczas długiego generowania.
Strumieniowanie odpowiedzi AI w interfejsie użytkownika to bezpłatna lekcja AI SaaS Builder na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej AI SaaS Builder, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs AI SaaS Builder zawiera 4 lekcji w sumie.
Dlaczego strumieniowanie poprawia UX
Oczekiwanie 10 sekund na pełną odpowiedź sprawia wrażenie, że aplikacja nie działa. Strumieniowanie wyświetla tekst w miarę jego generowania, dzięki czemu aplikacja wydaje się szybka i aktywna.
Jak działa strumieniowanie
Model emituje tokeny stopniowo. Serwer przekazuje każdy fragment do przeglądarki, która dopisuje go na ekranie.
Server-Sent Events
SSE to prosty jednokierunkowy strumień z serwera do klienta przez HTTP, idealny do strumieniowania tokenów.
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')Odbieranie strumienia po stronie klienta
Należy użyć czytnika strumieniowania Fetch (lub EventSource), aby odczytywać fragmenty i aktualizować stan w miarę ich napływania.
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}Renderowanie przyrostowe
Należy dopisywać fragmenty do bufora stanu i renderować wynik. Proszę unikać ponownego renderowania całej strony po każdym tokenie, aby interfejs działał płynnie.
setText(prev => prev + chunk)Wyświetlanie wskaźnika pisania
Zanim pojawi się pierwszy token, należy wyświetlić animację ładowania lub kursora, aby użytkownicy wiedzieli, że przetwarzanie się rozpoczęło.
Obsługa anulowania
Należy pozwolić użytkownikom zatrzymać długie generowanie. Przerwanie żądania pozwala oszczędzić tokeny i pieniądze.
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()Bezpieczne strumieniowanie Markdown
Częściowy Markdown może być nieprawidłowo renderowany w trakcie strumieniowania. Należy renderować go stopniowo, ale na końcu oczyszczać wynikowy HTML, aby zapobiec wstrzyknięciom.
Obsługa błędów w trakcie strumieniowania
Strumienie mogą przestać działać w połowie. Należy wykryć przerwany strumień i wyświetlić wyraźną opcję ponowienia próby, zamiast pozostawiać ucięty tekst.
Kwestie dostępności
Szybko aktualizujący się tekst może przeciążyć czytniki ekranu. Proszę używać uprzejmych regionów na żywo i ogłaszać zakończenie, a nie każdy token.
<div aria-live="polite">{streamedText}</div>Kiedy nie stosować strumieniowania
W przypadku krótkich, ustrukturyzowanych wyników (takich jak pojedynczy obiekt JSON) strumieniowanie zwiększa złożoność, oferując niewiele korzyści. Należy rezerwować je dla długiego tekstu przeznaczonego dla człowieka.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat strumieniowania.
Podsumowanie
Dowiedziałeś się, jak działa strumieniowanie tokenów, jak dostarczać je za pomocą SSE, odbierać po stronie klienta, renderować przyrostowo, wyświetlać wskaźniki pisania, obsługiwać anulowanie, radzić sobie z błędami występującymi w trakcie strumieniowania, zapewnić dostępność oraz kiedy strumieniowanie nie jest warte zastosowania.
Często zadawane pytania
Czy lekcja „Strumieniowanie odpowiedzi AI w interfejsie użytkownika” jest bezpłatna?
Tak — pełny tekst „Strumieniowanie odpowiedzi AI w interfejsie użytkownika” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu AI SaaS Builder, przejdź na CoddyKit PRO. Kurs AI SaaS Builder zawiera 4 lekcji w sumie.
Co nauczysz się w „Strumieniowanie odpowiedzi AI w interfejsie użytkownika”?
Nauczą się Państwo strumieniować dane wyjściowe AI token po tokenie do frontendu, aby AI SaaS działał szybko i responsywnie zamiast sprawiać wrażenie zawieszonego podczas długiego generowania. Ćwiczysz AI SaaS Builder z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć AI SaaS Builder?
Nie wymagamy żadnego doświadczenia. AI SaaS Builder w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Strumieniowanie odpowiedzi AI w interfejsie użytkownika”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji AI SaaS Builder?
Tak. Każda lekcja AI SaaS Builder zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Frameworki frontendowe dla SaaS
- Wizualizacja wyników AI
- Najlepsze praktyki projektowania UX
- Strumieniowanie odpowiedzi AI w interfejsie użytkownika