midscene/apps/site/docs/zh/index.mdx

# Midscene.js - AI 驱动，带来愉悦的 UI 自动化体验

<video src="/introduction/Midscene.mp4" controls/>

## 通过 AI 执行交互、提取数据和断言

Midscene 提供了三种关键方法：交互（`.ai`, `.aiAction`, 提取 (`.aiQuery`), 断言 (`.aiAssert`)。

* 交互 - 用 `.ai` 方法描述步骤并执行交互
* 提取 - 用 `.aiQuery` 从 UI 中“理解”并提取数据，返回值是 JSON 格式，你可以尽情描述想要的数据结构
* 断言 - 用 `.aiAssert` 来执行断言

## 从 Chrome 插件开始快速体验

通过使用 Midscene.js Chrome 插件，你可以快速在任意网页上体验 Midscene 的主要功能，而无需编写任何代码。

点击 [这里](https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief) 从 Chrome Web Store 安装 Midscene 插件。

请参照文档 [通过 Chrome 插件快速体验](./quick-experience) 进行安装和配置。

## 多种代码集成形式

维护 Midscene 自动化脚本是一种全新的编码体验。例如，在网页上搜索耳机，你可以这样做：

```typescript
// 👀 输入关键字，执行搜索
await ai('在搜索框输入 "Headphones" ，敲回车');

// 👀 找到列表里耳机相关的信息
const items = await aiQuery(
  '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格'
);

console.log("headphones in stock", items);
```

有多种形式可以将 Midscene 集成到代码项目中：

* [使用 YAML 格式的自动化脚本](./automate-with-scripts-in-yaml)，如果你更喜欢写 YAML 文件而不是 Javascript 代码
* [使用 Chrome 插件的桥接模式](./bridge-mode-by-chrome-extension)，用它来通过脚本控制桌面 Chrome
* [集成到 Puppeteer](./integrate-with-puppeteer)
* [集成到 Playwright](./integrate-with-playwright)

## 可视化报告

运行结束后，Midscene 会提供可视化报告和调试 Playground，可以非常方便地调试提示和 AI 的响应。所有的中间数据，例如查询（Query）、计划（Planning）和动作（Actions），都可以被可视化。

此外，Midscene 报告里还集成了一个 Playground，用以在报告中重新运行 Prompt 并调试。

<p align="center">
  <img src="/report.gif" alt="visualized report" />
</p>


## 自定义模型

目前我们默认选择的是 OpenAI GPT-4o 作为模型，你也可以[自定义为其他多模态模型](./model-provider)。

## 直连模型端，无需三方服务

Midscene.js 是一个采用 MIT 许可证的开源项目 (GitHub: [Midscene](https://github.com/web-infra-dev/midscene/)) 。项目代码运行在用户的自有环境中，所有从页面收集的数据会依照用户的配置，直接传送到 OpenAI 或指定的自定义模型。因此，任何第三方平台均无法获取这些数据。

## 关注我们

* [GitHub - 请给我们点个 star](https://github.com/web-infra-dev/midscene)
* [Twitter](https://x.com/midscene_ai)
* [Discord](https://discord.gg/AFHJBdnn)
* [飞书交流群](https://applink.larkoffice.com/client/chat/chatter/add_by_link?link_token=291q2b25-e913-411a-8c51-191e59aab14d)