microdao-daarion/SOFIA_WEB_UI.md

🌐 Sofia Web Interface - Ready!

✅ Що встановлено:

1. React компонент - src/pages/SofiaChatPage.tsx

   • Красивий градієнтний дизайн (purple/pink)
   • Історія повідомлень
   • Статистика токенів
   • Швидкі запити (quick actions)

2. FastAPI Backend - sofia_api.py

   • REST API на порту 8899
   • Підтримка Ollama + Grok API
   • CORS налаштовано
   • Історія розмов

3. Роутинг - додано /sofia в App.tsx

---

🚀 Запуск

Варіант 1: Автоматичний (все разом)

./start_sofia.sh

Цей скрипт:

• ✅ Перевіряє Ollama
• ✅ Запускає Sofia API (порт 8899)
• ✅ Запускає React dev server (порт 5173)
• ✅ Відкриває браузер

Варіант 2: Ручний (окремо)

Термінал 1: Sofia API

source sofia_venv/bin/activate
python3 sofia_api.py

Термінал 2: React Dev Server

npm run dev

Браузер:

http://localhost:5173/sofia

Варіант 3: Фоновий режим

# Sofia API
nohup sofia_venv/bin/python3 sofia_api.py > sofia_api.log 2>&1 &

# Dev Server
npm run dev

---

🎯 Доступ

София доступна за адресою:

http://localhost:5173/sofia

API документація:

http://localhost:8899/docs

Health Check:

curl http://localhost:8899/health

---

💬 Інтерфейс

Головний екран:

• 🎨 Градієнтний дизайн (purple → pink)
• 👤 Профіль Sofia (Chief AI Engineer)
• 🤖 qwen2.5-coder:32b badge
• 🗑️ Кнопка очистити чат

Швидкі запити:

1. 💼 Розкажи про свою роль
2. 🤖 Які моделі для NLP?
3. 🏗️ Multi-agent архітектура
4. 📚 RAG vs Fine-tuning

Повідомлення:

• Користувач: градієнт blue → cyan (праворуч)
• Sofia: сірий фон (ліворуч)
• Показує час + токени
• Історія зберігається

Введення:

• Enter - відправити
• Shift+Enter - новий рядок
• Автоскрол до нових повідомлень

---

🔧 API Endpoints

POST /chat

curl -X POST http://localhost:8899/chat \
  -H "Content-Type: application/json" \
  -d '{"message": "Привіт Sofia!"}'

Response:

{
  "response": "Привіт! Як можу допомогти?",
  "tokens": 50,
  "model": "qwen2.5-coder:32b",
  "provider": "ollama"
}

POST /clear

curl -X POST http://localhost:8899/clear

GET /history

curl http://localhost:8899/history

---

🎨 Кастомізація

Зміна кольорів (SofiaChatPage.tsx):

// Головний градієнт
from-purple-500 to-pink-500  →  from-blue-500 to-cyan-500

// Фон
from-purple-50 via-white to-pink-50  →  інший градієнт

Зміна моделі (.env):

OLLAMA_MODEL=deepseek-r1:70b  # Для складних задач
OLLAMA_MODEL=mistral-nemo:12b # Для швидкості

Підключення Grok API (.env):

XAI_API_KEY=your_key_here

Sofia автоматично переключиться на Grok.

---

📊 Моніторинг

Логи Sofia API:

tail -f sofia_api.log

Логи Dev Server:

tail -f dev_server.log  # якщо запущено у фоні

Перевірка процесів:

ps aux | grep -E "sofia_api|npm.*dev"

Зупинити:

# Sofia API
pkill -f sofia_api.py

# Dev Server
pkill -f "npm.*dev"

---

🐛 Вирішення проблем

"Cannot connect to Ollama"

# Перевірити
ps aux | grep ollama

# Запустити
ollama serve

"Port 8899 already in use"

# Знайти процес
lsof -i :8899

# Зупинити
kill -9 <PID>

"Port 5173 already in use"

# Використати інший порт
npm run dev -- --port 3000

# Змінити в SofiaChatPage.tsx:
const sofiaUrl = 'http://localhost:8899';

Білий екран / помилка компіляції

# Перезапустити dev server
pkill -f "npm.*dev"
npm run dev

---

📱 Функції

✅ Працює зараз:

• Чат з Sofia
• Історія повідомлень
• Статистика токенів
• Швидкі запити
• Очистити чат
• Responsive дизайн

🔜 Майбутнє:

• 🎤 Голосовий режим (STT/TTS)
• 📎 Завантаження файлів
• 🖼️ Обробка зображень (з llava)
• 💾 Збереження чатів
• 🔐 Аутентифікація

---

🎯 Готово!

Sofia веб-інтерфейс працює! 🎉

Відкрити зараз:

open http://localhost:5173/sofia

Або перейти в браузері:

http://localhost:5173/sofia

---

📚 Структура файлів

microdao-daarion/
├── sofia_agent.py          # CLI агент
├── sofia_api.py            # FastAPI backend
├── start_sofia.sh          # Startup скрипт
├── sofia_venv/             # Python venv
├── src/
│   └── pages/
│       └── SofiaChatPage.tsx  # React компонент
└── SOFIA_WEB_UI.md        # Ця інструкція

Успішного використання! 🚀