Что нужно сделать: Опишите дизайн чата словами, доведите его тремя итерациями и подключите стриминг.
Шаги:
Откройте WorkAI и проект из Дней 1–3.
Убедитесь что в панели AI выбран режим Создание (переключатель над полем ввода). Отправьте готовый промпт как есть — или опишите свой вариант чата:
Переделай интерфейс в чат: - Хранить историю сообщений — каждое сообщение пользователя и ответ ассистента добавлять в список - Отображать их как пузыри: сообщения пользователя — справа, синий пузырь; ассистента — слева, тёмно-серый пузырь - Тёмный фон (#1a1a2e) - Скруглённые углы у пузырей - Поле ввода внизу, зафиксировано - Кнопка «Отправить» справа от поля
Нажмите «Сохранить» — посмотрите результат в предпросмотре.
Итерация 1. Выберите один элемент который хочется улучшить — и напишите конкретный запрос. Пример: «Увеличь отступы внутри пузырей — сейчас тесно». Нажмите «Сохранить», проверьте в предпросмотре.
Итерация 2. Ещё одно изменение — одно. Пример: «Добавь подписи над пузырями: "Вы" для пользователя, "Ассистент" для ответов». Нажмите «Сохранить», проверьте.
Подключите стриминг. В панели AI напишите:
Найди официальную документацию OpenAI по стримингу chat completions через fetch без SDK и реализуй стриминг в проекте по ней. Ответ должен появляться слово за словом. Оставь текущий путь ProxyAPI, Authorization: Bearer <ключ> и поле model в запросе без изменений.
Нажмите «Сохранить». Задайте вопрос в предпросмотре и убедитесь что слова появляются по одному.
Задайте ассистенту минимум 3 вопроса по теме вашего проекта — проведите полноценный диалог.
Как проверить, что всё правильно:
Если что-то пошло не так:
ERR_CONNECTION_REFUSED. Откройте историю чатов (иконка с часами вверху), выберите последний чат с проектом и напишите: «подними сервер».Частые ошибки:
Ошибка: написать всё в один промпт — «сделай красиво с анимациями и тёмной темой и иконками». AI получает пять задач сразу — угадывает приоритеты, результат непредсказуемый. Как исправить: один промпт — одно конкретное изменение. Принцип тот же что и с ответами ассистента.
Ошибка: расплывчатое описание дизайна — «сделай современнее», «добавь стиль». WorkAI не знает что это значит именно для вас. Как исправить: используйте термины из урока — background, padding, border-radius. Называйте конкретные цвета и элементы.
Необязательно: Запишите три вещи которые хотели бы добавить в ассистента если бы пользовались им каждый день. Это пригодится завтра.
Реакции на стриминг обычно делятся — одни «вау», другие «ну и что». Напишите в комментариях: ощущение от разговора с ассистентом изменилось когда слова пошли по одному?