5.7 KiB
Бизнес-требования: Веб-интерфейс для Snowbike RAG
1. Проблема
API работает, но пользоваться им можно только через curl. Нужен красивый и удобный веб-интерфейс для поиска по базе знаний сноубайков.
2. Что хотим получить
Страницу в браузере, где можно задать вопрос и получить красивый ответ с источниками.
URL: https://openclaw.mva154.duckdns.org/snowbike-rag/
3. Функциональные требования
3.1 Страница поиска (главная)
• Поле ввода запроса (большое, по центру экрана) • Кнопка «Найти» или отправка по Enter • История последних запросов (локально, в браузере)
3.2 Результаты поиска
• Ответ LLM — красиво оформленный (Markdown → HTML) • Источники — список карточек:
- Дата сообщения
- Название топика (цветовая метка)
- Превью текста (2-3 строки, с выделением ключевых слов)
- Ссылка на оригинальное сообщение в Telegram (если возможно:
https://t.me/snowbikerussia/{message_id}) • Количество найденных источников • Время ответа (мс)
3.3 Фильтры (опционально, но желательно)
• Выбор топика (чекбоксы или мультиселект) • Сортировка: по релевантности / по дате • Лимит результатов: 5 / 10 / 20
3.4 Статистика
• Ссылка или панель «О базе данных»:
- Всего сообщений
- Количество топиков
- Последнее обновление
- Статус ChromaDB (заполняется / готов)
4. Технические требования
4.1 Стек
• Flask (уже есть, порт 5557) • HTML + CSS + JavaScript (без сборщиков, без React/Vue) • Tailwind CSS через CDN (для быстрой стилизации) • Markdown-рендеринг ответов: marked.js через CDN • Подсветка синтаксиса в коде (если есть в ответах): highlight.js через CDN
4.2 Адаптивность
• Мобильная версия (responsive) • Хорошо выглядит на экране телефона (основной сценарий использования)
4.3 Скорость
• Страница загружается < 1 секунды • Запрос показывает спиннер/анимацию загрузки • Результаты появляются плавно (fade-in)
4.4 Цветовая схема
• Тёмная тема (по умолчанию) • Акцентный цвет: синий (#3B82F6) или оранжевый (#F97316) • Фон: #0F172A (тёмно-синий) • Текст: #F1F5F9 (светло-серый) • Карточки: #1E293B (чуть светлее фона)
5. UX-требования
5.1 Поле ввода
• Placeholder: «Спросите про сноубайки...» • Автофокус при загрузке • Многострочное поле (textarea, 2 строки) • Кнопка отправки справа (иконка 🔍)
5.2 Ответ
• Заголовок: «Ответ» • Текст ответа — основной контент (крупный шрифт) • Источники — ниже ответа, в виде списка • Каждый источник — мини-карточка с датой, топиком, превью
5.3 Анимации
• Спиннер при загрузке (dots или skeleton) • Плавное появление результатов (fadeIn 0.3s) • Hover-эффект на карточках источников
5.4 Ошибки
• Если API недоступен: «Сервис временно недоступен» • Если нет результатов: «По вашему запросу ничего не найдено» • Если запрос слишком короткий: «Введите более точный запрос»
6. Что НЕ входит
• Авторизация и пользовательские аккаунты • История запросов на сервере (только localStorage) • Экспорт результатов (PDF, Markdown) • Голосовой ввод • Переключение языка
7. Критерии приёмки
✅ Открывается https://openclaw.mva154.duckdns.org/snowbike-rag/ — видно страницу поиска
✅ Ввод «какое масло для Polaris» → ответ с источниками за < 15 секунд
✅ Ответ красиво оформлен (заголовки, списки, выделение)
✅ Источники — карточки с датой, топиком, превью
✅ Хорошо выглядит на телефоне
✅ Тёмная тема
✅ Загрузка показывает спиннер
8. Приоритет
Сейчас: Страница поиска + результаты + адаптивность Позже: Фильтры по топикам, статистика, ссылки в Telegram