# ai2ui

**Repository Path**: godY/ai2ui

## Basic Information

- **Project Name**: ai2ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-22
- **Last Updated**: 2026-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能监控管理 Agent

一个基于 A2UI 协议的智能监控管理系统，通过自然语言交互，动态生成包含实时视频流、数据表格和统计图表的富交互 UI。

## 技术栈

### 后端
- Python 3.10+
- FastAPI
- LangChain
- DeepSeek API

### 前端
- Vue 3
- TypeScript
- Vite
- Vuetify
- A2UI 协议

## 项目结构

```
ai2ui/
├── backend/              # FastAPI 后端
│   ├── main.py          # API 入口
│   ├── requirements.txt # Python 依赖
│   ├── agent/           # Agent 模块
│   ├── data/            # 摄像头数据
│   └── schemas/         # Pydantic 模型
├── frontend/            # Vue 3 前端
│   ├── src/
│   │   ├── App.vue
│   │   ├── main.ts
│   │   ├── components/  # Vue 组件
│   │   └── services/    # API 服务
│   ├── package.json
│   └── vite.config.ts
├── docs/                # 文档
│   ├── prd/
│   │   └── PRD-v3.2.md # 产品需求文档
│   └── design/
│       └── DESIGN-v3.2.md # 技术设计文档
└── camera_list.md       # 摄像头数据源
```

## 快速开始

### 前置要求

- Python 3.10+
- Node.js 18+
- uv (Python 包管理器)

### 环境配置

1. 复制 `backend/.env.example` 为 `backend/.env`
2. 配置 DeepSeek API 密钥：

```env
DEEPSEEK_API_KEY=your_api_key_here
DEEPSEEK_BASE_URL=https://api.deepseek.com
DEEPSEEK_MODEL=deepseek-chat
BACKEND_PORT=8000
```

### 后端启动

```bash
cd backend
uv pip install -r requirements.txt
uv run uvicorn main:app --reload --port 8000
```

后端 API 文档：`http://localhost:8000/docs`

### 前端启动

```bash
cd frontend
npm install
npm run dev
```

前端访问：`http://localhost:5173`

## API 接口

### `/api/health`
健康检查接口

### `/api/welcome`
获取欢迎信息和快速指令

### `/api/chat`
聊天接口，接收用户消息，返回 A2UI 协议 JSON

**请求**：
```json
{
  "message": "查看北区的摄像头",
  "session_id": "optional-uuid"
}
```

**响应**：
```json
{
  "success": true,
  "data": {
    "updateComponents": {
      "surfaceId": "main-chat",
      "components": [...]
    }
  },
  "session_id": "uuid"
}
```

## A2UI 协议

项目采用 A2UI v0.9 协议，使用 Adjacency List 扁平模型。

### 组件目录

- `Column` - 垂直布局
- `Row` - 水平布局
- `Card` - 卡片容器
- `Text` - 文本组件
- `VideoPlayer` - 视频播放器（HLS）
- `CameraStatsChart` - 统计图表

### 协议示例

```json
{
  "updateComponents": {
    "surfaceId": "main-chat",
    "components": [
      {"id": "root", "component": "Column", "children": ["title", "card1"]},
      {"id": "title", "component": "Text", "text": "北区摄像头"},
      {"id": "card1", "component": "Card", "children": ["video1"], "props": {"title": "CAM-005"}}
    ]
  }
}
```

## 功能特性

- [x] 自然语言查询摄像头
- [x] 按区域筛选摄像头
- [x] 查看摄像头详情和视频流
- [x] 统计图表展示
- [x] 快速指令按钮
- [x] HLS 视频播放

## 开发

### 后端开发

```bash
cd backend
uv pip install -r requirements.txt
uv run pytest  # 运行测试
```

### 前端开发

```bash
cd frontend
npm install
npm run dev    # 开发模式
npm run build  # 构建
```

## 文档

- [产品需求文档](docs/prd/PRD-v3.2.md)
- [技术设计文档](docs/design/DESIGN-v3.2.md)

## 许可证

Apache 2.0