# Operp-AI-Browser

**Repository Path**: garychk/operp-ai-browser

## Basic Information

- **Project Name**: Operp-AI-Browser
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-15
- **Last Updated**: 2026-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Opelix AI 智能浏览器

一款基于 AI 的智能浏览器应用，支持自然语言驱动的网页自动化操作。
![alt text](image.png)
## 项目特性

- 🤖 **AI 智能任务拆解**：将自然语言指令转化为自动化操作步骤
- 🌐 **多网站支持**：内置支持淘宝、百度、京东、谷歌、必应等主流网站
- 🖥️ **Electron 桌面应用**：跨平台桌面浏览器体验
- ⚡ **实时交互**：支持在浏览器窗口中实时执行 AI 指令

## 技术栈

| 分类     | 技术           | 版本      |
| ------ | ------------ | ------- |
| 前端框架   | Vue          | 3.5.x   |
| UI 组件  | Element Plus | 2.8.x   |
| 状态管理   | Pinia        | 2.2.x   |
| 构建工具   | Vite         | 5.4.x   |
| 桌面框架   | Electron     | 32.1.x  |
| 后端框架   | FastAPI      | 0.136.x |
| 浏览器自动化 | Playwright   | 1.60.x  |

## 项目结构

```
operp_ai_browser/
├── electron/              # Electron 主进程代码
│   ├── main.js           # 主窗口创建
│   ├── preload.js        # 预加载脚本
│   └── tabManager.js     # 标签页管理
├── server/               # Python 后端服务
│   ├── lib/             # Python 依赖（已忽略）
│   └── agent_engine.py  # AI 代理引擎核心逻辑
├── src/                 # Vue3 前端源码
│   ├── api/             # API 接口
│   │   ├── agentApi.js  # 代理服务接口
│   │   └── llmApi.js    # LLM 服务接口
│   ├── components/      # 组件
│   │   ├── AddressBar.vue    # 地址栏组件
│   │   ├── AiSidebar.vue     # AI 侧边栏
│   │   ├── TabItem.vue       # 标签页组件
│   │   └── WebviewContainer.vue # 网页容器
│   ├── store/           # Pinia 状态管理
│   │   └── useTabStore.js    # 标签页状态
│   ├── App.vue          # 根组件
│   ├── main.js          # 入口文件
│   └── style.css        # 全局样式
├── .gitignore          # Git 忽略配置
├── index.html          # HTML 模板
├── package.json        # 依赖配置
├── postcss.config.js   # PostCSS 配置
└── tailwind.config.js  # Tailwind CSS 配置
```

## 快速开始

### 环境要求

- Node.js >= 18.0.0
- Python >= 3.10
- npm >= 9.0.0

### 安装步骤

1. **克隆项目**

```bash
git clone <repository-url>
cd operp_ai_browser
```

1. **安装前端依赖**

```bash
npm install
```

1. **安装 Python 依赖**

```bash
pip install -r server/requirements.txt
# 或直接安装到 lib 目录
pip install fastapi uvicorn playwright -t server/lib/
playwright install
```

### 运行方式

#### 开发模式

```bash
npm run dev
```

这将同时启动：

- Vue 开发服务器 (<http://localhost:5173>)
- Electron 主进程

#### 启动后端服务

```bash
npm run server
```

#### 构建生产版本

```bash
npm run build
```

## 使用说明

### AI 任务指令示例

在 AI 侧边栏输入自然语言指令，系统会自动拆解并执行：

```
打开淘宝首页
搜索蓝牙耳机
打开百度搜索 AI
访问 https://example.com
```

## 核心功能

### 1. 任务拆解引擎 (`server/agent_engine.py`)

将自然语言任务转化为可执行的自动化步骤：

```python
def llm_plan_task(task: str):
    # 解析任务，提取需要打开的 URL
    # 返回操作步骤列表
    return [{"tool": "open_url", "params": {"url": url}}]
```

### 2. 浏览器自动化

使用 Playwright 实现网页自动化操作：

- `open_url`: 打开指定网页
- `click`: 点击页面元素
- `input_text`: 输入文本
- `extract_text`: 提取页面内容

### 3. Electron 集成

通过 Webview 组件实现浏览器窗口集成，支持在应用内直接浏览网页。

## 开发指南

### 目录职责

| 目录                | 职责说明                     |
| ----------------- | ------------------------ |
| `electron/`       | Electron 主进程、窗口管理、IPC 通信 |
| `server/`         | FastAPI 后端、AI 代理引擎、任务调度  |
| `src/`            | Vue3 前端、UI 组件、状态管理       |
| `src/api/`        | 前端 API 调用封装              |
| `src/components/` | Vue 组件                   |
| `src/store/`      | Pinia 状态管理               |

### 调试技巧

1. **打开开发者工具**: 开发模式下自动打开
2. **查看日志**: 控制台输出包含任务拆解和执行日志
3. **调试后端**: 运行 `npm run server` 后访问 <http://localhost:8000/docs>

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！