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: Автоматичний (все разом)

```bash
./start_sofia.sh
```

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

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

**Термінал 1: Sofia API**
```bash
source sofia_venv/bin/activate
python3 sofia_api.py
```

**Термінал 2: React Dev Server**
```bash
npm run dev
```

**Браузер:**
```
http://localhost:5173/sofia
```

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

```bash
# 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:**
```bash
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
```bash
curl -X POST http://localhost:8899/chat \
  -H "Content-Type: application/json" \
  -d '{"message": "Привіт Sofia!"}'
```

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

### POST /clear
```bash
curl -X POST http://localhost:8899/clear
```

### GET /history
```bash
curl http://localhost:8899/history
```

---

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

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

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

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

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

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

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

```bash
XAI_API_KEY=your_key_here
```

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

---

## 📊 Моніторинг

### Логи Sofia API:
```bash
tail -f sofia_api.log
```

### Логи Dev Server:
```bash
tail -f dev_server.log  # якщо запущено у фоні
```

### Перевірка процесів:
```bash
ps aux | grep -E "sofia_api|npm.*dev"
```

### Зупинити:
```bash
# Sofia API
pkill -f sofia_api.py

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

---

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

### "Cannot connect to Ollama"

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

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

### "Port 8899 already in use"

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

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

### "Port 5173 already in use"

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

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

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

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

---

## 📱 Функції

### ✅ Працює зараз:
- Чат з Sofia
- Історія повідомлень
- Статистика токенів
- Швидкі запити
- Очистити чат
- Responsive дизайн

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

---

## 🎯 Готово!

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

**Відкрити зараз:**
```bash
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        # Ця інструкція
```

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