Экраны работающего UI¶

Это не макеты: ниже находятся снимки интерфейса, снятые 27 августа 2026 года с локально развёрнутого TenderLens. В момент проверки работали FastAPI, PostgreSQL с pgvector, NATS JetStream, crawler, indexer и локальная Ollama. Нажатие на снимок открывает исходный PNG целиком.

Один экран — несколько состояний

У приложения один маршрут /, а не набор отдельных страниц. Поэтому галерея показывает все значимые состояния одного экрана: пустую форму, ожидание ответа, Search, Ask, ошибку валидации и responsive-варианты.

8реальных снимков

1440 pxdesktop viewport

390 pxmobile viewport

Ollamaреальный Ask-ответ

Что было проверено¶

Состояние	Действие	Наблюдаемое доказательство
Начальный экран	открыть `http://localhost:8000/`	health-индикатор сообщает, что API готов
Loading	отправить Search	кнопка заблокирована, показано состояние ожидания
Search	запросить закупки о серверах	API вернул пять релевантных фрагментов из PostgreSQL/pgvector
Ask	задать вопрос о найденной закупке	Ollama сформировала ответ и UI показал пять источников
Validation	отправить форму без ключа	запрос не ушёл, показана понятная ошибка
Responsive	повторить Home/Search/Ask при ширине 390 px	блоки перестроились без горизонтальной прокрутки

API-ключ на снимках скрыт нативным полем type=password. Для съёмки использовался временный ключ, который после проверки отключён. Внешних или тестовых секретов в PNG нет.

Desktop¶

1. Начальный экран¶

Пустое состояние сразу объясняет два режима работы, показывает статус API, форму запроса, лимит и подсказку по горячей клавише.

Начальный экран TenderLens на desktop — Desktop · 1440 px · API готов принимать запросы.

2. Выполнение запроса¶

Во время сетевого запроса форма остаётся на месте, кнопка недоступна для повторного нажатия, а текст статуса сообщает пользователю, что идёт поиск.

Состояние загрузки TenderLens — Desktop · Search выполняется · повторная отправка заблокирована.

3. Результаты Search¶

Запрос DNS Nákup serverov servers procurement вернул пять фрагментов. Каждая карточка содержит заголовок, текст, similarity score, источник и ссылку на исходную закупку.

Пять результатов в режиме Search — Desktop · пять результатов pgvector. Нажмите, чтобы увидеть длинный снимок целиком.

4. Ответ Ask от реальной Ollama¶

На вопрос What is the DNS Nákup serverov procurement about? локальная модель сформировала краткий ответ по найденному контексту. Под ответом видны те пять фрагментов, которые были переданы модели как источники.

Ответ реальной Ollama и пять источников — Desktop · реальный Ollama inference · ответ и пять источников.

Время ответа

На CPU локальная генерация заняла около 162 секунд. Для воспроизводимого снимка фоновые crawler/indexer были временно приостановлены, чтобы они не конкурировали с Ask за Ollama; API, БД, NATS и сама модель продолжали работать. После съёмки оба worker были возобновлены.

5. Ошибка валидации¶

Если ключ не введён, браузер не отправляет запрос и показывает сообщение Укажите API-ключ в заголовке формы.. Фокус возвращается в проблемное поле.

Ошибка валидации при отсутствии API-ключа — Desktop · локальная валидация · запрос к API не выполнен.

Mobile¶

Снимки сделаны при viewport 390 px. Полные Search/Ask-страницы длинные; превью ограничены по высоте, а оригинал открывается нажатием.

Результаты Search на мобильном экране — Search · пять карточек · 390 px.

Ответ Ask на мобильном экране — Ask · ответ Ollama и источники · 390 px.

Начальный экран TenderLens на мобильном устройстве — Начальный экран · responsive layout · 390 px.

Как повторить проверку вручную¶

Выполните полный запуск и дождитесь healthy у API.
Создайте временный ключ командой из раздела API-ключи.
Откройте http://localhost:8000/, вставьте ключ и выберите Search.
Отправьте DNS Nákup serverov servers procurement — должны появиться карточки источников.
Переключитесь на Ask и отправьте What is the DNS Nákup serverov procurement about? — после inference появятся ответ и источники.
Удалите ключ и повторите отправку — UI должен показать локальную ошибку.
Откройте DevTools, задайте ширину 390 px и повторите Search/Ask.
После проверки отключите временный ключ.

Логика экрана и ссылки на конкретные функции описаны в статье Web UI, а готовые HTTP-запросы — в примерах API.

Границы доказательства¶

Снимки подтверждают отрисовку и реальные ответы конкретного запущенного стенда. Они не заменяют автоматические тесты, проверку повторного crawl, rate-limit и доставку событий. Для этого служат каталог тестов и traceability-матрица.

Дизайн-референсы¶

search-wireframe.png и search-wireframe-mobile.png — исходные wireframe, по которым проектировалась иерархия. Это не доказательство запуска и не скриншоты production UI.