llm-agent-backend/docs/tech_assignment/TechSpecification.md

ТЗ: Интерактивный Агент с LLM и Визуализацией Графа Диалогов

Цель: Создать десктопное приложение-агента, позволяющее взаимодействовать с внешними LLM (Gemini, Mistral) через API, выполнять сложные действия по слеш-командам и визуализировать историю диалогов в виде графа.

1. LLM:

• Использовать только внешние модели: Gemini (через LangChain), Mistral (через HTTP API).
• Заглушка для Ollama (пустой словарь LOCAL_MODELS).

2. Веб-интерфейс (React):

• Три панели:
  • История диалогов (различные графы запросов), по умолчанию слева.
  • Визуализация активного графа сообщений (React Flow + Dagre), по умолчанию по центру.
  • Чат с выбранной веткой активного графа, по умолчанию справа.
• Активный чат = выбранный лист графа.
• Клик по ноду = показ сообщений от корня до нода.
• Разные цвета для нодов пользователя и LLM.

3. Хранение:

• Бэкенд хранит историю графов запросов.
• IndexedDB (dexie.js или idb) для временного хранения активного графа на фронтенде (опционально).

4. Суммаризация истории:

• Комбинация: последние N сообщений + суммаризация старой истории через LLM (Gemini).

5. Анализ изображений:

• Gemini Vision API, заглушка для расширения.

6. Платформы субтитров:

• Google Meet и Microsoft Teams: возможность получения текущих, не финальных субтитров (API или polling/webhook).

7. Генерация изображений:

• Вызов удаленного эндпоинта bingart.

Эндпоинт генерации изображений

• URL: <URL_удаленного_ресурса>/generate-images
• Метод: GET или POST.
• Параметры:
  • prompt (строка): Текст запроса для генерации изображения. Передается либо как query parameter в GET-запросе, либо как form data в POST-запросе.
• Результат (JSON):
  • image_urls (массив строк): Список URL сгенерированных изображений (до 4 штук).
  • error (строка, опционально): Сообщение об ошибке, если генерация не удалась.

Пример успешного ответа:

{
  "image_urls": [
    "url1",
    "url2",
    "url3",
    "url4"
  ]
}

Пример ответа с ошибкой:

{
  "error": "Не удалось получить изображения."
}

8. Команды:

• Слеш-команды (/) с автодополнением (React Autosuggest).
• Команды хранятся в базе данных на бэкенде.
• Запуск workflow через LangGraph.

9. LangGraph:

• Оркестрация сложных workflow по слеш-командам.
• Узлы: генерация, LLM, анализ изображений, субтитры, управление состоянием.

10. Реализация:

• Frontend: React, React Flow, Dagre, React Autosuggest.
• Backend: API для LLM, субтитров, bingart, LangGraph, база данных (хранение истории графов).

11. Язык:

• Русский.

Типичный workflow:

1. Пользователь вводит /команда.
2. Frontend отправляет запрос на бэкенд.
3. Бэкенд запускает LangGraph workflow, соответствующий команде:
   • Подставляет релевантный команде промпт (если необходимо).
   • Вызывает LLM (Gemini или Mistral).
   • Анализирует изображения (если необходимо).
   • Запрашивает текущие субтитры (если необходимо в рамках команды, это одна из команд).
   • Запрашивает генерацию изображений на удалённом эндпоинте и ждёт ответа.
   • Обрабатывает результаты и формирует ответ.
4. Бэкенд сохраняет новый граф запроса в базе данных (или обновляет существующий).
5. Бэкенд отправляет данные активного графа на фронтенд.
6. Frontend отображает граф и чат.

Приоритеты:

1. Базовая функциональность чата с Gemini/Mistral и визуализацией графа.
2. Реализация слеш-команд через LangGraph.
3. Интеграция с Google Meet/MS Teams (получение текущих субтитров).

Использовать:

• React Flow (с примерами Dagre).
• LangGraph.
• dexie.js или idb (опционально, для временного хранения на фронтенде).
• React Autosuggest.