127 lines
5.7 KiB
Markdown
127 lines
5.7 KiB
Markdown
# Бизнес-требования: Веб-интерфейс для 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
|