为 Phone Agent 添加基于 Gradio 的可视化 Web 界面,提供无需命令行的友好交互方式。

README.md

@@ -232,6 +232,48 @@ python scripts/check_deployment_cn.py --base-url http://你的IP:你的端口/v1
 
 ## 使用 AutoGLM
 
+### Web UI 界面
+
+Phone Agent 提供了可视化的 Web 界面，无需命令行即可轻松使用。
+
+#### 启动 WebUI
+
+```bash
+python web_ui.py
+```
+
+启动后，在浏览器中访问 [http://127.0.0.1:7860](http://127.0.0.1:7860)
+
+![WebUI界面](resources/iShot_2025-12-14_16.27.01.png)
+
+#### 📖 使用指南
+
+**快速开始**
+
+1. **检查环境**: 前往"系统检查"标签页，运行系统检查确保环境配置正确
+2. **配置设置**: 在"配置"区域设置模型API地址和API Key
+3. **选择设备**: 点击"刷新设备"按钮，从下拉列表中选择目标设备
+4. **输入任务**: 在任务输入框中用自然语言描述您的需求
+5. **执行任务**: 点击"执行任务"按钮，系统会自动控制手机完成任务
+
+**功能说明**
+
+💬 **对话控制**
+- 任务执行: 支持流式输出，实时显示AI的思考过程和执行动作
+- 截图显示: 右侧实时显示设备当前屏幕状态
+- 新对话: 清空当前上下文，开始全新的任务会话
+
+🔍 **系统检查**
+- 检查ADB工具安装状态
+- 检查设备连接状态
+- 检查ADB Keyboard安装状态
+- 检查模型API连接状态
+
+📱 **设备管理**
+- 查看所有已连接设备
+- 支持USB和WiFi连接
+- 远程设备连接功能
+
 ### 命令行
 
 根据你部署的模型, 设置 `--base-url` 和 `--model` 参数. 例如:

README_en.md

@@ -182,6 +182,62 @@ python scripts/check_deployment_en.py --base-url https://api.parasail.io/v1 --mo
 Upon successful execution, the script will display the model's inference result and token statistics, helping you confirm whether the model deployment is working correctly.
 
 ## Using AutoGLM
+### Web UI Interface
+
+Phone Agent provides a visual web interface that can be easily used without the need for command lines.
+
+#### Starting WebUI
+
+```bash
+python web_ui.py
+
+```
+
+After starting, access [http://127.0.0.1:7860](http://127.0.0.1:7860) in your browser
+
+![WebUI Interface](resources/iShot_2025-12-14_16.27.01.png)
+
+#### 📖 User Guide
+
+**Quick Start**
+
+1. **Check Environment**: Go to the "System Check" tab and run a system check to ensure the environment is configured correctly.
+
+2. **Configuration Settings**: Set the model API address and API Key in the "Configuration" area.
+
+3. **Select Device**: Click the "Refresh Device" button and select the target device from the drop-down list.
+
+4. **Enter Task**: Describe your requirements in natural language in the task input box.
+
+5. **Execute Task**: Click the "Execute Task" button, and the system will automatically control the phone to complete the task.
+
+**Function Description**
+
+💬 **Dialogue Control**
+
+- Task Execution: Supports streaming output, displaying the AI's thought process and actions in real time.
+
+- Screenshot Display: Real-time display of the device's current screen status on the right.
+
+- New Dialogue: Clears the current context and starts a completely new task session.
+
+🔍 **System Checks**
+
+- Check ADB tool installation status
+
+- Check device connection status
+
+- Check ADB Keyboard installation status
+
+- Check model API connection status
+
+📱 **Device Management**
+
+- View all connected devices
+
+- Supports USB and WiFi connections
+
+- Remote device connection function
 
 ### Command Line
 

requirements.txt

@@ -1,5 +1,6 @@
 Pillow>=12.0.0
 openai>=2.9.0
+gradio>=5.18.0
 
 # For Model Deployment