# aiweb

**Repository Path**: jaymon/aiweb

## Basic Information

- **Project Name**: aiweb
- **Description**: 用自然语言描述需求,让api作为"编译器",桥接playwright codegen生成操作json,操作json会交给流外一个叫执行器的项目或者叫回放程序(客户端),去使用这个操作对象,用AI来跳过,各大平台web页面的编译过程变化.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-10-13
- **Last Updated**: 2025-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🤖 AI Web 自动化脚本生成器

基于自然语言描述生成 Playwright 自动化脚本的 Electron 应用程序。

## ✨ 功能特性

- 🎯 **自然语言输入**: 用简单的中文描述你想要自动化的操作流程
- 🧠 **AI 驱动**: 使用 Kimi K2 API 将自然语言转换为标准化的操作脚本
- 📋 **标准化输出**: 生成符合 Playwright 规范的 JSON 操作脚本
- 💾 **文件管理**: 支持保存和导出生成的脚本文件
- ✅ **脚本验证**: 自动验证生成脚本的格式和完整性
- 🎨 **现代界面**: 基于 Vue 3 + TypeScript 的美观用户界面

## 🚀 快速开始

### 环境要求

- Node.js 16+
- npm 或 yarn

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建应用

```bash
npm run build
```

## 🔧 配置说明

### API 配置

1. 获取 Kimi API Key：访问 [Kimi 开放平台](https://platform.moonshot.cn/)
2. 在应用中输入你的 API Key
3. API Key 会安全地保存在本地存储中

### 使用示例

**输入示例**：
```
登录B站账号，上传 test.mp4 视频，标题为"测试视频"，简介写"自动化测试"
```

**输出示例**：
```json
[
  {"action": "goto", "url": "https://www.bilibili.com"},
  {"action": "click", "selector": "text=登录"},
  {"action": "fill", "selector": "#username", "value": "{{USERNAME}}"},
  {"action": "fill", "selector": "#password", "value": "{{PASSWORD}}"},
  {"action": "click", "selector": "button:has-text('登录')"},
  {"action": "wait", "timeout": 2000},
  {"action": "click", "selector": "text=投稿"},
  {"action": "upload", "selector": "input[type=file]", "value": "{{FILE_PATH}}"},
  {"action": "wait", "timeout": 3000},
  {"action": "click", "selector": "text=立即投稿"}
]
```

## 📋 支持的操作类型

- `goto`: 导航到指定 URL
- `click`: 点击元素
- `fill`: 填写表单字段
- `upload`: 上传文件
- `wait`: 等待指定时间
- `select`: 选择下拉选项

## 🔗 占位符支持

生成的脚本支持以下占位符，便于在执行时动态替换：

- `{{USERNAME}}`: 用户名
- `{{PASSWORD}}`: 密码
- `{{FILE_PATH}}`: 文件路径
- `{{TITLE}}`: 标题
- `{{DESCRIPTION}}`: 描述
- 以及其他自定义占位符

## 📁 项目结构

```
src/
├── components/          # Vue 组件
│   └── ScriptGenerator.vue
├── services/           # API 服务
│   └── kimiApi.ts
├── types/              # TypeScript 类型定义
│   ├── index.ts
│   └── electron.d.ts
├── utils/              # 工具函数
│   ├── validator.ts
│   ├── fileManager.ts
│   └── schema.json
└── App.vue
electron/
├── main.ts             # Electron 主进程
└── preload.ts          # 预加载脚本
```

## 🛠️ 技术栈

- **前端**: Vue 3 + TypeScript + Vite
- **桌面**: Electron
- **AI**: Kimi K2 API
- **样式**: 原生 CSS + 现代设计

## 📝 开发说明

### 添加新的操作类型

1. 在 `src/types/index.ts` 中更新 `WebAction` 接口
2. 在 `src/utils/schema.json` 中添加新的 schema 规则
3. 在 `src/utils/validator.ts` 中添加验证逻辑
4. 更新 API 提示词以支持新操作

### 自定义 AI 提示词

编辑 `src/services/kimiApi.ts` 中的 `createPrompt` 方法来调整 AI 的行为和输出格式。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

MIT License