Add files drag and drop, add chromaDB knowledge base support.
This commit is contained in:
emil
@@ -1,119 +1,122 @@
|
||||
# AIUI - Web Chat Interface
|
||||
# AIUI Chat
|
||||
|
||||
A modern, responsive web interface for AI chat with OpenAI-compatible API support and streaming responses.
|
||||
AIUI Chat — это современный веб-интерфейс для общения с LLM (большими языковыми моделями), вдохновленный Open WebUI. Поддерживает любой OpenAI-compatible API (OpenAI, Ollama, LM Studio, vLLM и другие).
|
||||
|
||||
## Features
|
||||
## Особенности
|
||||
|
||||
- 💬 Real-time streaming chat responses
|
||||
- 🌙 Beautiful dark theme
|
||||
- 📱 Fully responsive (desktop + mobile)
|
||||
- 🔧 Customizable API settings (base URL, model, API key)
|
||||
- 📜 Multiple conversation support
|
||||
- ✨ Markdown rendering with syntax highlighting
|
||||
- ⚡ Built with React + TypeScript + Tailwind CSS + Vite
|
||||
- Чат с поддержкой **streaming** ответов
|
||||
- Управление **историей** диалогов
|
||||
- Настройки API, модели, temperature, max tokens
|
||||
- Загрузка файлов в чат
|
||||
- **Базы знаний** с ChromaDB — загружайте документы и получайте ответы с учетом контекста
|
||||
- Адаптивный дизайн (десктоп + мобильные)
|
||||
- Темная тема в стиле modern tech
|
||||
|
||||
## Project Structure
|
||||
## Структура проекта
|
||||
|
||||
```
|
||||
AIUI/
|
||||
├── frontend/ # React frontend
|
||||
├── frontend/ # React + TypeScript + Tailwind CSS
|
||||
│ ├── src/
|
||||
│ │ ├── components/ # React components
|
||||
│ │ ├── hooks/ # Custom hooks
|
||||
│ │ ├── services/ # API services
|
||||
│ │ ├── stores/ # State management (Zustand)
|
||||
│ │ ├── types/ # TypeScript types
|
||||
│ │ └── utils/ # Utilities
|
||||
│ │ ├── components/ # UI компоненты
|
||||
│ │ │ ├── chat/ # Компоненты чата
|
||||
│ │ │ ├── layout/ # Layout компоненты
|
||||
│ │ │ └── knowledge/ # Компоненты баз знаний
|
||||
│ │ ├── services/ # API сервисы
|
||||
│ │ ├── stores/ # Zustand stores
|
||||
│ │ ├── types/ # TypeScript типы
|
||||
│ │ └── utils/ # Утилиты
|
||||
│ └── package.json
|
||||
├── backend/ # Express proxy server
|
||||
├── backend/ # Express.js proxy сервер
|
||||
│ └── src/
|
||||
│ └── index.js
|
||||
├── package.json # Root package.json with workspace scripts
|
||||
└── README.md
|
||||
│ └── index.js # Основной сервер
|
||||
└── package.json # Root package.json
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
## Быстрый старт
|
||||
|
||||
### Prerequisites
|
||||
- Node.js 18+
|
||||
- npm
|
||||
|
||||
### 1. Install Dependencies
|
||||
### 1. Установка зависимостей
|
||||
|
||||
```bash
|
||||
# Install root dependencies
|
||||
npm install
|
||||
|
||||
# Install backend dependencies
|
||||
cd backend && npm install && cd ..
|
||||
|
||||
# Install frontend dependencies
|
||||
cd frontend && npm install && cd ..
|
||||
```
|
||||
|
||||
### 2. Start the Application
|
||||
Это установит зависимости для root, frontend и backend.
|
||||
|
||||
### 2. Настройка API
|
||||
|
||||
Запустите frontend и backend, затем откройте настройки (иконка шестеренки) и укажите:
|
||||
|
||||
- **API Base URL** — например `https://api.openai.com/v1` или `http://localhost:11434/v1` (для Ollama)
|
||||
- **API Key** — ваш ключ
|
||||
- **Model** — например `gpt-4`, `gpt-3.5-turbo`, `llama2` и т.д.
|
||||
- **Temperature** и **Max Tokens** — по желанию
|
||||
- **System Prompt** — системный промпт
|
||||
- **Embedding Model** — для баз знаний (например `text-embedding-3-small`)
|
||||
- **ChromaDB Directory** — путь к хранилищу ChromaDB
|
||||
|
||||
### 3. Запуск
|
||||
|
||||
```bash
|
||||
# Start both frontend and backend
|
||||
npm run dev
|
||||
# Запуск backend (порт 3001)
|
||||
npm run dev:backend
|
||||
|
||||
# В другом терминале — запуск frontend (порт 3000)
|
||||
npm run dev:frontend
|
||||
```
|
||||
|
||||
Or start them separately:
|
||||
Frontend запустится на `http://localhost:3000` и будет проксировать API-запросы на backend.
|
||||
|
||||
### Production сборка
|
||||
|
||||
```bash
|
||||
# Terminal 1 - Backend (port 3001)
|
||||
npm run backend
|
||||
# Сборка frontend
|
||||
npm run build:frontend
|
||||
|
||||
# Terminal 2 - Frontend (port 3000)
|
||||
npm run frontend
|
||||
# Запуск backend (раздает собранный frontend)
|
||||
npm run start:backend
|
||||
```
|
||||
|
||||
### 3. Open in Browser
|
||||
## Базы знаний (Knowledge Bases)
|
||||
|
||||
Navigate to http://localhost:3000
|
||||
Базы знаний позволяют загружать документы и использовать их как контекст для ответов LLM.
|
||||
|
||||
## Usage
|
||||
### Как использовать:
|
||||
|
||||
1. **Configure API**: Click the settings icon (⚙️) in the top right to set your:
|
||||
- API Base URL (e.g., `https://api.openai.com/v1`)
|
||||
- API Key
|
||||
- Model name (e.g., `gpt-4o-mini`, `gpt-4o`)
|
||||
1. Откройте панель **Knowledge Bases** (иконка базы данных в сайдбаре)
|
||||
2. Создайте новую базу знаний
|
||||
3. Загрузите документы (`.txt`, `.md`, `.pdf`, `.docx`)
|
||||
4. В сайдбаре выберите базу знаний для текущего диалога
|
||||
5. Задавайте вопросы — LLM будет использовать контекст из документов
|
||||
|
||||
2. **Start Chatting**: Click "New Chat" and send a message!
|
||||
### Технические детали:
|
||||
|
||||
3. **Mobile**: The sidebar is collapsible - use the ☰ button to toggle it.
|
||||
- Документы разбиваются на **чанки** по ~500 символов с перекрытием
|
||||
- Для каждого чанка генерируется **embedding** через API
|
||||
- Чанки хранятся в **ChromaDB** (векторная база данных)
|
||||
- При отправке сообщения запрос эмбеддится и ищутся похожие чанки через semantic search
|
||||
- Найденный контекст добавляется к системному промпту
|
||||
|
||||
## Development
|
||||
## API Endpoints
|
||||
|
||||
### Build for Production
|
||||
Backend проксирует запросы к OpenAI-compatible API:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
| Endpoint | Method | Описание |
|
||||
|----------|--------|----------|
|
||||
| `/api/v1/chat/completions` | POST | Streaming чат |
|
||||
| `/api/v1/models` | POST | Список моделей |
|
||||
| `/api/files/upload` | POST | Загрузка файлов |
|
||||
| `/api/files` | GET | Список файлов |
|
||||
| `/api/files/:id` | DELETE | Удаление файла |
|
||||
| `/api/knowledge` | GET | Список баз знаний |
|
||||
| `/api/knowledge` | POST | Создать базу знаний |
|
||||
| `/api/knowledge/:id` | DELETE | Удалить базу знаний |
|
||||
| `/api/knowledge/:id/files` | POST | Добавить файл в базу |
|
||||
| `/api/knowledge/:id/files/:fileId` | DELETE | Удалить файл из базы |
|
||||
| `/api/knowledge/:id/query` | POST | Поиск по базе знаний |
|
||||
|
||||
### Build Frontend Only
|
||||
## Технологии
|
||||
|
||||
```bash
|
||||
cd frontend && npm run build
|
||||
```
|
||||
|
||||
## API Configuration
|
||||
|
||||
The interface supports any OpenAI-compatible API:
|
||||
|
||||
| Provider | Base URL | Example Models |
|
||||
|----------|----------|----------------|
|
||||
| OpenAI | `https://api.openai.com/v1` | gpt-4o-mini, gpt-4o |
|
||||
| OpenRouter | `https://openrouter.ai/api/v1` | varies |
|
||||
| Local (Ollama) | `http://localhost:11434/v1` | llama2, mistral |
|
||||
| Custom | Your endpoint | Your models |
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Frontend**: React 18, TypeScript, Tailwind CSS, Vite, Zustand, Lucide Icons
|
||||
- **Backend**: Express, CORS, node-fetch
|
||||
- **Build**: TypeScript Compiler, Vite
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
- **Frontend**: React 18, TypeScript, Tailwind CSS, Zustand, Lucide icons
|
||||
- **Backend**: Node.js, Express.js, ChromaDB, Multer
|
||||
- **Build**: Vite
|
||||
|
||||
Reference in New Issue
Block a user