内容
# 🚀 Foundry 本地与浏览器自动化演示
**一个现代的 Electron 桌面应用程序，演示了 Microsoft Foundry Local SDK 与 Playwright MCP（模型上下文协议）的集成，用于智能浏览器自动化。**
## ✨ 本应用程序的作用
本应用程序展示了本地 AI 模型与浏览器自动化的强大组合，在现代界面中演示了如何使用自然语言命令智能控制网页浏览器，使网页自动化对开发者和非技术用户都变得易于使用。
### 🎯 关键功能
- **🤖 本地 AI 集成**：使用 Microsoft Foundry Local SDK 在本地执行 AI 模型
- **🌐 智能浏览器自动化**：使用 Playwright MCP 通过自然语言控制浏览器
- **💬 自然语言命令**：用纯英文告诉浏览器该做什么
- **📸 视觉反馈**：自动截图捕获和显示
- **🎨 现代 UI**：漂亮的标签式界面，支持暗黑/亮色模式
- **📊 实时监控**：实时日志和状态指示器
- **🔧 内置诊断**：全面的测试和故障排除工具
## 🖼️ 应用程序界面
应用程序具有现代化的标签式界面，分为三个主要部分：
1. **AI 模型标签**：配置和测试 AI 模型连接
2. **浏览器自动化标签**：执行自然语言浏览器命令
3. **日志标签**：监控实时应用程序活动
*注意：要查看应用程序界面，请按照以下说明运行应用程序。*
## 🚀 快速开始
### 先决条件
- **Node.js v16+** 和 npm
- **Microsoft Foundry Local SDK** （可选 - 应用程序包含备用功能）
- **Windows/macOS/Linux** （跨平台支持）
### 安装和设置
1. **克隆仓库**
```bash
git clone <repository-url>
cd electron-app
```
2. **安装依赖项** （自动安装 Playwright 浏览器）
```bash
npm install
```
3. **启动应用程序**
```bash
npm start
```
就这样！应用程序将自动设置所需的一切，并启动时显示一个漂亮的启动画面。
## 📋 如何使用
### 🤖 AI 模型测试
1. 导航到 **AI 模型** 标签页
2. 从下拉菜单中选择一个模型（如果 Foundry Local 可用）
3. 输入提示并点击 **提交**
4. 在界面中查看 AI 响应
### 🌐 浏览器自动化
1. 进入 **浏览器自动化** 标签页
2. 在 MCP 提示字段中尝试这些示例命令：
**基本导航：**
```
Go to microsoft.com and take a screenshot
```
**复杂交互：**
```
Navigate to github.com, search for "playwright", and screenshot the results
```
**内容提取：**
```
Visit wikipedia.org, search for "artificial intelligence", and take a screenshot of the article
```
3. 点击 **运行 MCP 提示** 执行
4. 在界面中查看截图和结果
### 🔧 测试和诊断
- **运行 MCP 测试**：点击运行综合浏览器自动化测试
- **诊断 MCP**：检查 MCP 安装和配置
- **查看日志**：实时监控所有应用程序活动
## 🛠️ 可用命令
| 命令 | 描述 |
|---------|-------------|
| `npm start` | 启动应用程序并自动设置 |
| `npm test` | 运行所有自动化测试 |
| `npm run test:mcp` | 测试 Playwright MCP 功能 |
| `npm run diagnose:mcp` | 诊断 MCP 安装问题 |
| `npm run fix:mcp` | 重新安装 MCP 组件 |
| `npm run package` | 构建可分发包 |
## 🏗️ 架构
### 核心组件
```
├── main.js # Electron 主进程和 IPC 处理
├── renderer.js # UI 逻辑和事件处理
├── preload.js # 安全 IPC 桥接
├── browser-automation.js # Playwright MCP 集成
├── fallback-mcp.js # 备用自动化（当 MCP 不可用时）
├── theme.js # 暗黑/亮色模式和 UI 动画
└── tests/
├── mcp-test.js # 综合 MCP 测试
└── find-mcp.js # MCP 诊断
```
### UI 结构
```
├── index.html # 主应用程序布局
├── styles.css # 现代样式和动画
├── animation.css # UI 过渡效果
└── splash.html # 启动画面
```
## 🎨 功能展示
### 🌓 主题
- **自动暗黑/亮色模式**，根据系统偏好设置
- **手动主题切换**，平滑过渡
- **一致的配色方案**，贯穿整个界面
### 📱 响应式设计
- **标签式界面**，用于组织内容
- **基于卡片的布局**，带有细微的阴影和圆角
- **响应式控件**，适应窗口大小
### ⚡ 性能
- **延迟加载**，重组件
- **高效 IPC 通信**，进程间
- **后台处理**，非阻塞操作
### 🔒 安全
- **上下文隔离**，Electron 中启用
- **安全 IPC**，通过预加载脚本通信
- **沙盒渲染器**进程
## 🧪 测试
### 自动化测试
**运行所有测试：**
```bash
npm test
```
**测试特定功能：**
```bash
npm run test:mcp # 测试浏览器自动化
npm run test:browser # 测试基本浏览器功能
```
### 手动测试示例
尝试这些命令测试应用程序：
1. **简单导航测试**
```
Go to example.com and take a screenshot
```
2. **搜索测试**
```
Navigate to duckduckgo.com, search for "electron apps", take a screenshot
```
3. **多步骤测试**
```
Go to github.com, click on "Explore", then take a screenshot of the page
```
## 🚨 故障排除
### 常见问题
**MCP 不工作？**
```bash
npm run diagnose:mcp # 检查 MCP 安装
npm run fix:mcp # 重新安装 MCP 组件
```
**浏览器无法启动？**
```bash
npx playwright install # 安装浏览器二进制文件
```
**连接问题？**
- 确保 Foundry Local 已运行（如果使用 AI 功能）
- 检查防火墙设置
- 验证网络连接
### 获取帮助
1. **在应用程序中检查日志标签**，获取详细错误信息
2. **运行诊断**，使用 `npm run diagnose:mcp`
3. **检查控制台输出**，从终端运行
4. **查看应用程序界面中的错误信息**
## 🔧 高级配置
### 自定义模型配置
在 `renderer.js` 中编辑模型下拉选项，以添加您喜欢的模型。
### 浏览器自动化设置
在 `browser-automation.js` 中修改浏览器启动选项，以满足特定需求。
### UI 自定义
更新 `styles.css` 和 `animation.css`，以自定义应用程序外观。
## 📦 构建和分发
**创建可分发包：**
```bash
npm run package
```
这会在 `dist/` 目录中创建特定于平台的包：
- **Windows**：`.exe` 安装程序
- **macOS**：`.dmg` 磁盘镜像
- **Linux**：`.AppImage` 便携式应用程序
## 🛡️ 安全和隐私
- **本地处理**：所有 AI 推理都在本地进行（无云依赖）
- **安全自动化**：浏览器自动化在隔离上下文中运行
- **无数据收集**：应用程序不会收集或传输用户数据
- **开源**：完整源代码可供审查
## 📚 使用的技术
| 技术 | 目的 | 版本 |
|------------|---------|---------|
| **Electron** | 桌面应用程序框架 | ^29.0.0 |
| **Playwright** | 浏览器自动化 | ^1.52.0 |
| **@playwright/mcp** | 自然语言浏览器控制 | ^0.0.26 |
| **Node.js** | 运行时环境 | 16+ |
| **Microsoft Foundry Local** | 本地 AI 推理 | 最新 |
## 🎯 用例
此应用程序演示了多个实用用例：
- **🧪 AI 模型测试**：快速测试本地 AI 模型
- **🕷️ 网络爬虫**：从网站自动提取数据
- **🧑💻 浏览器测试**：使用自然语言进行自动 UI 测试
- **📊 监控**：自动网站监控和截图捕获
- **🎓 教育**：学习浏览器自动化和 AI 集成
- **🚀 原型设计**：自动化工作流的快速原型设计
## 🔮 未来增强功能
- **🤖 高级 AI 集成**：支持更多 AI 提供商
- **📝 脚本录制**：将浏览器操作记录为可重用的脚本
- **🔄 工作流构建器**：可视化工作流创建界面
- **☁️ 云集成**：可选的云 AI 模型支持
- **📱 移动支持**：基于 Electron 的移动应用程序版本
## 📄 许可证
该项目根据 MIT 许可证授权 - 有关详细信息，请参阅 [LICENSE](LICENSE) 文件。
## 🤝 贡献
欢迎贡献！请随意提交拉取请求。对于重大更改，请先打开问题讨论您要更改的内容。
## 🆘 支持
如果您遇到任何问题或有疑问：
1. **检查上面的故障排除部分**
2. **运行内置诊断** (`npm run diagnose:mcp`)
3. **查看应用程序日志**，在日志标签页中
4. **在 GitHub 上打开问题**，附上详细信息
---
**使用 Electron、Playwright 和 Microsoft Foundry Local SDK 构建**
MCP 市场