Потоковая передача ответов искусственного интеллекта в пользовательском интерфейсе
Научитесь передавать результаты работы искусственного интеллекта на внешний интерфейс токен за токеном, чтобы ваш SaaS-продукт воспринимался быстрым и отзывчивым, а не зависшим во время долгой генерации.
«Потоковая передача ответов искусственного интеллекта в пользовательском интерфейсе» — бесплатный урок AI SaaS Builder на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения AI SaaS Builder, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс AI SaaS Builder содержит 4 уроков всего.
Почему потоковая передача улучшает взаимодействие
Ожидание полного ответа в течение 10 секунд воспринимается как сбой. Потоковая передача показывает текст по мере его создания, благодаря чему приложение кажется быстрым и отзывчивым.
Как работает потоковая передача
Модель постепенно выдаёт токены. Сервер пересылает каждый фрагмент браузеру, который добавляет его на экран.
События, отправляемые сервером
SSE — это простой односторонний поток от сервера к клиенту через HTTP, идеально подходящий для потоковой передачи токенов.
res.setHeader('Content-Type', 'text/event-stream')
res.write('data: Hello\n\n')
res.write('data: world\n\n')Получение потока на клиенте
Используйте средство чтения потоковых данных Fetch (или EventSource), чтобы получать фрагменты и обновлять состояние по мере их поступления.
const reader = res.body.getReader()
while (true) {
const { value, done } = await reader.read()
if (done) break
appendText(new TextDecoder().decode(value))
}Постепенная отрисовка
Добавляйте фрагменты в буфер состояния и выполняйте отрисовку. Не перерисовывайте всю страницу для каждого токена, чтобы интерфейс оставался плавным.
setText(prev => prev + chunk)Индикатор набора текста
До получения первого токена показывайте анимацию загрузки или курсора, чтобы пользователи знали, что обработка началась.
Обработка отмены
Позвольте пользователям остановить долгую генерацию. Прервите запрос, чтобы сэкономить токены и деньги.
const controller = new AbortController()
fetch('/generate', { signal: controller.signal })
// stop button:
controller.abort()Безопасная потоковая передача Markdown
Неполный Markdown может некорректно отображаться в процессе передачи. Выполняйте постепенную отрисовку, но санитизируйте итоговый HTML, чтобы предотвратить внедрение.
Обработка ошибок в середине потока
Поток может прерваться. Обнаружьте повреждённый поток и покажите понятную возможность повторить попытку, а не оставляйте обрезанный текст.
Особенности доступности
Быстро обновляющийся текст может перегружать программы чтения с экрана. Используйте вежливые динамические области и объявляйте о завершении, а не о каждом токене.
<div aria-live="polite">{streamedText}</div>Когда не следует использовать потоковую передачу
Для коротких структурированных результатов (например, одного объекта JSON) потоковая передача усложняет код, почти не давая преимуществ. Используйте её для длинного текста, предназначенного для чтения человеком.
Быстрая проверка
Проверьте свои знания о потоковой передаче.
Итоги
Вы узнали, как работает потоковая передача токенов, как организовать её с помощью SSE, получать данные на клиенте, отображать их по мере поступления, показывать индикаторы набора текста, поддерживать отмену, обрабатывать ошибки в середине потока, обеспечивать доступность и понимать, когда потоковая передача не оправдана.
Часто задаваемые вопросы
Урок «Потоковая передача ответов искусственного интеллекта в пользовательском интерфейсе» бесплатный?
Да — полный текст урока «Потоковая передача ответов искусственного интеллекта в пользовательском интерфейсе» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс AI SaaS Builder, подпишись на CoddyKit PRO. Курс AI SaaS Builder содержит 4 уроков всего.
Чему я научусь в уроке «Потоковая передача ответов искусственного интеллекта в пользовательском интерфейсе»?
Научитесь передавать результаты работы искусственного интеллекта на внешний интерфейс токен за токеном, чтобы ваш SaaS-продукт воспринимался быстрым и отзывчивым, а не зависшим во время долгой генера… Ты практикуешь AI SaaS Builder с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать AI SaaS Builder?
Предыдущий опыт не требуется. AI SaaS Builder на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Потоковая передача ответов искусственного интеллекта в пользовательском интерфейсе»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке AI SaaS Builder?
Да. Каждый урок AI SaaS Builder включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Фреймворки клиентской части для SaaS
- Визуализация результатов работы искусственного интеллекта
- Лучшие практики пользовательского опыта (UX)
- Потоковая передача ответов искусственного интеллекта в пользовательском интерфейсе