左侧： 实时手机投屏 (1080p@60fps)
右侧： AI 智能助手（双模式切换）
上半部分： 任务对话输入区
下半部分： AutoGLM 实时执行过程可视化
| 功能模块 | 说明 | 技术亮点 |
|---|---|---|
| 💬 A模式 - AI对话 | 基于GLM-4的智能对话系统 | 支持流式输出，实时响应 |
| 🤖 B模式 - 智能控制 | AutoGLM驱动的手机自动化 | 视觉理解+操作执行，自然语言控制 |
| 📱 实时投屏 | scrcpy超低延迟视频流 | 1080p分辨率，60fps流畅度 |
| � 无线ADB连接 | 内置配对和连接管理 | 在UI上直接配对，无需命令行 |
| 🔄 执行可视化 | 实时显示AI思考与操作 | 分步骤展示，过程透明 |
-
🚄 高性能投屏
- 基于 scrcpy 原生视频流，延迟 < 100ms
- 支持 1080p/60fps 高清流畅显示
- JPEG 高质量编码 + CSS 渲染优化
- 可折叠控制面板，最大化投屏区域
-
🔌 无线ADB管理
- 图形化配对：在Web界面直接输入配对信息
- 快速连接：已配对设备一键连接
- 智能收起：连接/投屏成功后自动隐藏控制面板
- 状态实时显示：连接状态、设备信息一目了然
-
🧠 双模式 AI 引擎
- A模式：GLM-4 流式对话，支持多轮交互
- B模式：AutoGLM 视觉智能体，自主手机控制
-
🎨 现代化 Web UI
- 极简企业级设计风格（类 SaaS 产品）
- 纯白悬浮卡片 + 浅灰网格背景
- 响应式布局，自适应屏幕尺寸
- WebSocket 实时通信，无刷新交互
- 细腻的动画和交互反馈
-
🔌 灵活架构
- 前后端分离，易于扩展
- 模块化设计，清晰的代码组织
- 支持多设备并发（未来扩展）
┌─────────────────────────────────────────────────────────────┐
│ 浏览器客户端 │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ 左侧：手机投屏 │ │ 右侧：AI 控制台 │ │
│ │ • scrcpy 视频 │ │ • 模式切换 │ │
│ │ • 实时显示 │ │ • 对话输入 │ │
│ │ │ │ • 执行过程 │ │
│ └──────────────────┘ └──────────────────┘ │
└────────────┬─────────────────────────┬─────────────────────┘
│ WebSocket (Socket.IO) │
│ │
┌────────────▼──────────────────────────▼─────────────────────┐
│ Flask Web Server │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 投屏服务 │ │ A模式 GLM-4 │ │ B模式 AutoGLM│ │
│ │ scrcpy Client│ │ Normal Chat │ │ Phone Agent │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ │ ADB │ HTTPS │ HTTP:8080 │
│ │ │ │ │
│ ┌──────▼─────────────────▼──────────────────▼──────┐ │
│ │ 设备控制层 - Accessibility Service │ │
│ └──────────────────────┬───────────────────────────┘ │
└─────────────────────────┼─────────────────────────────────────┘
│ ADB (投屏) + HTTP (控制)
│
┌───────────▼───────────┐
│ Android 手机设备 │
│ • ADB: 投屏视频流 │
│ • HTTP:8080 控制接口 │
│ 192.168.2.10 │
└───────────────────────┘
-
投屏流程（左侧显示）
手机屏幕 → scrcpy Server (手机端) → scrcpy Client (服务器) → JPEG 编码 → WebSocket 推送 → 浏览器显示 -
A模式对话流程
用户输入 → Flask 后端 → GLM-4 API (流式) → 逐字返回 → 浏览器显示 -
B模式控制流程 ⭐ 使用 Accessibility Service
用户指令 → AutoGLM Agent → HTTP 请求截图 (port:8080) → GLM 视觉分析 → 生成操作指令 → HTTP 发送操作 (port:8080) → Accessibility Service 执行 → 反馈结果Accessibility 优势：
- ✅ 支持文本输入（包括中文）
- ✅ 更稳定的点击和滑动
- ✅ 无需 ADB 键盘
- ✅ 原生无障碍服务支持
- 操作系统: macOS / Linux / Windows
- Python: 3.11 或更高版本
- ADB: Android Debug Bridge（用于手机通信）
- scrcpy: 手机投屏工具
- 浏览器: Chrome / Firefox / Safari / Edge（现代浏览器）
- Android 5.0+ (推荐 Android 11+)
- 开启开发者选项 + USB 调试
- 支持无线调试（用于 scrcpy 投屏）
- 安装 Accessibility Service 应用（B模式控制必需）
- 用于接收控制指令（HTTP 端口 8080）
- 执行点击、滑动、输入等操作
git clone <repository-url>
cd autoglm-uimacOS:
brew install android-platform-tools scrcpyUbuntu/Debian:
sudo apt install android-tools-adb scrcpyWindows:
- 下载 ADB Platform Tools
- 下载 scrcpy
# 创建并激活虚拟环境
python3.11 -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
# 安装依赖
pip install -r requirements.txt
# 安装 AutoGLM（B模式必需）
cd AutoGLM-phone/Open-AutoGLM
pip install -e .
cd ../..device:
ip: "192.168.2.10" # 手机的 IP 地址（可在Web界面配对后自动获取）
adb_port: 35405 # ADB 无线调试端口（用于 scrcpy 投屏）
ai:
api_key: "your-api-key" # 智谱 GLM API 密钥
model: "glm-4" # 模型名称提示：
device.ip和device.adb_port可在 Web 界面配对成功后自动获取- 也可以手动在手机的"无线调试"页面查看并填写
- 首次使用推荐通过 Web 界面的 ADB 配对功能自动配置
在 AutoGLM-phone/Open-AutoGLM/ 目录下创建 .env 文件：
# Accessibility Service 配置
device_ip="192.168.2.10" # 与 config.yaml 中的 IP 保持一致获取 API 密钥: 智谱开放平台
Android 11+ 推荐方式：
- 手机进入：设置 → 开发者选项 → 无线调试
- 开启"无线调试"开关
- 在 Web 界面配对连接（参见"使用指南"部分）
- 无需命令行操作
- 直接在界面上完成配对和连接
Android 10 及以下（USB转无线）：
# USB 连接手机后
adb tcpip 5555
adb connect <手机IP>:5555验证连接：
adb devices
# 应该显示: <IP>:<端口> deviceB模式控制依赖 Accessibility Service 应用，该应用提供 HTTP 接口（端口 8080）用于：
- 截图获取
- 点击操作
- 滑动操作
- 文本输入（支持中文）
- 应用启动
安装步骤：
-
安装 APK
项目已包含预编译的 APK：
app_in_android/app-debug.apk方式1：通过 ADB 安装（推荐）
# 确保手机已通过 USB 或无线连接 adb devices # 安装应用 adb install app_in_android/app-debug.apk # 如果提示已安装，使用 -r 参数重新安装 adb install -r app_in_android/app-debug.apk
方式2：手动安装
- 将
app_in_android/app-debug.apk传输到手机 - 在手机上点击安装（需开启"允许安装未知来源应用"）
- 将
-
授予无障碍权限：
- 设置 → 无障碍 → 找到 "AutoGLM Accessibility Service" → 开启服务
- 授予所有请求的权限
-
启动服务：
- 打开应用（应用名称：AutoGLM Service）
- 点击 "启动服务" 按钮
- 确认服务状态显示 "运行中 (端口 8080)"
-
验证连接：
# 替换 <手机IP> 为你的实际 IP 地址 curl "http://<手机IP>:8080/screenshot" # 应该返回截图数据（base64 编码的图片） # 或者在浏览器访问测试页面 # http://<手机IP>:8080/status
配置要点：
- 📱 应用名称：AutoGLM Service / AutoGLM 无障碍服务
- 📦 APK 位置：
app_in_android/app-debug.apk（项目自带） - 🔌 服务端口：8080（HTTP 接口）
- 🌐 确保手机和电脑在同一局域网
- ⚡ 关闭手机省电模式（避免服务被杀后台）
- 🔋 在电池优化中将应用设为"不优化"
- 🔒 授予所有无障碍权限和悬浮窗权限
python web_server.py看到以下输出表示启动成功：
[autoglm-ui] [INFO] ======================================
[autoglm-ui] [INFO] AutoGLM Cockpit Web 服务器启动
[autoglm-ui] [INFO] 访问地址: http://localhost:5000
[autoglm-ui] [INFO] 设备: 192.168.2.10:35405
[autoglm-ui] [INFO] ======================================
[AutoGLMAgent] 使用 Accessibility 方法连接设备
[AutoGLMAgent] 初始化成功，设备: 192.168.2.10:35405
┌─────────────────────────────────────────────────────────┐
│ AutoGLM Cockpit │
├─────────────────────┬───────────────────────────────────┤
│ 📱 手机投屏 │ 🤖 AI 助手 │
│ [已连接] [收起设置] │ ┌───────┬───────┐ │
│ │ │ A模式 │ B模式 │ │
│ ┌───────────────┐ │ └───────┴───────┘ │
│ │ ADB 配对/连接 │ │ │
│ │ • 配对设备 │ │ [对话消息区域] │
│ │ • 快速连接 │ │ │
│ └───────────────┘ │ ┌─────────────────────┐ │
│ │ │ 输入消息... │ │
│ [手机屏幕实时画面] │ └─────────────────────┘ │
│ │ [发送] │
│ [启动投屏] │ │
└─────────────────────┴───────────────────────────────────┘
方法1：配对新设备（Android 11+）
-
手机操作：
- 进入：设置 → 开发者选项 → 无线调试
- 点击"使用配对码配对设备"
- 记下显示的：IP地址、配对端口、配对码
-
Web界面操作：
- 点击左侧"配对设备"标签
- 依次输入：设备IP、配对端口、配对码（6位数字）
- 点击"🔗 开始配对"
- 等待配对成功提示
-
自动切换到"快速连接"：
- IP地址已自动填入
- 点击"⚡ 快速连接"
- 连接成功后状态显示为"已连接"
方法2：连接已配对设备
- 点击"快速连接"标签
- 输入设备IP（端口默认5555）
- 点击"⚡ 快速连接"
连接成功后：
- 状态指示灯变为绿色
- ADB控制面板自动收起
- 投屏区域最大化显示
- 可点击"收起设置/展开设置"按钮管理面板
其他功能：
- "❌ 断开连接"：断开所有ADB连接
- "📋 查看设备"：查看已连接设备列表
- 确保ADB已连接（状态为"已连接"）
- 点击左侧"启动投屏"按钮
- 等待连接（约2-3秒）
- 手机屏幕实时显示在左侧面板
- 控制面板自动收起，投屏画面最大化
投屏参数：
- 分辨率：1080p
- 帧率：60 FPS
- 编码：JPEG (质量100)
- 延迟：< 100ms
- 点击右侧"A模式: 聊天"
- 在输入框输入消息
- 按 Enter 发送（Shift+Enter 换行）
- AI 实时流式回复
使用场景：
- 日常对话交流
- 问题咨询
- 创意写作
- 代码辅助
- 点击右侧"B模式: 控制"
- 界面自动分为上下两部分：
- 上半部分：输入任务指令
- 下半部分：执行过程可视化
- 输入手机控制指令，例如：
- "打开微信"
- "发送消息给张三"
- "打开设置并调整音量"
- 观察下半部分的执行过程：
- 🤔 思考步骤：AI 分析任务
- ⚡ 执行操作：实际操作手机
- ✅ 执行结果：任务完成反馈
执行流程可视化：
🤔 思考中: 分析用户指令
📱 正在获取手机屏幕状态...
🤖 调用AI模型分析任务
⚡ 执行操作: 点击微信图标
⚡ 执行操作: 输入搜索内容
✅ 执行结果: 任务完成
| 快捷键 | 功能 |
|---|---|
Enter |
发送消息 |
Shift + Enter |
输入换行 |
Ctrl + / |
清空输入框 |
autoglm-ui/
├── web_server.py # Flask 应用入口
├── config.yaml # 配置文件
├── requirements.txt # Python 依赖
├── README.md # 本文档
│
├── scripts/ # 脚本工具
│ ├── adb_pair_correct.py # ADB 配对脚本
│ └── check_dependencies.py # 依赖检查脚本
│
├── docs/ # 项目文档
│ ├── PROJECT_STRUCTURE.md # 详细结构文档
│ ├── ADB_PAIRING_GUIDE.md # ADB 配对指南
│ └── WEB_README.md # Web 版使用说明
│
├── app_in_android/ # Android 应用
│ └── app-debug.apk # AutoGLM Accessibility Service APK
│
├── templates/ # HTML 模板
│ └── index.html # 主页面
│
├── static/ # 静态资源
│ ├── css/
│ │ └── style.css # 样式表
│ └── js/
│ └── main.js # 前端逻辑
│
├── ai/ # AI 模块
│ ├── normal_chat.py # GLM-4 对话
│ └── autoglm_agent.py # AutoGLM 智能体
│
├── device/ # 设备控制
│ └── adb_manager.py # ADB 管理器
│
├── utils/ # 工具函数
│ ├── config.py # 配置加载
│ └── logger.py # 日志系统
│
├── data/ # 数据文件
│ ├── 01.png # 截图1
│ └── 02.png # 截图2
│
└── AutoGLM-phone/ # AutoGLM 子模块
└── Open-AutoGLM/ # 开源 AutoGLM
| 技术 | 版本 | 用途 |
|---|---|---|
| Flask | 3.0+ | Web 框架 |
| Flask-SocketIO | 5.3+ | WebSocket 通信 |
| Eventlet | 0.33+ | 异步 I/O |
| zhipuai | 2.0+ | 智谱 AI SDK |
| OpenCV | 4.8+ | 图像处理 |
| scrcpy-client | - | 投屏客户端 |
| 技术 | 用途 |
|---|---|
| HTML5 | 页面结构 |
| CSS3 | 样式设计 |
| JavaScript (ES6+) | 交互逻辑 |
| Socket.IO Client | 实时通信 |
| 模型 | 用途 | 提供商 |
|---|---|---|
| GLM-4 | A模式对话 | 智谱AI |
| AutoGLM-Phone | B模式控制 | 智谱AI |
编辑 web_server.py 中的 scrcpy 参数：
client = Client(
device=device,
max_width=1080, # 分辨率：720/1080/1920
bitrate=8000000, # 比特率：8Mbps
max_fps=60 # 帧率：15/30/60
)如果 GLM API 连接超时，配置代理：
编辑 ai/autoglm_agent.py：
os.environ["HTTP_PROXY"] = "http://proxy:port"
os.environ["HTTPS_PROXY"] = "http://proxy:port"编辑 utils/logger.py 调整日志详细程度。
答案：项目已自带 APK 文件！
APK 位置：
app_in_android/app-debug.apk快速安装：
# 方法1：通过 ADB 安装（最简单）
adb install app_in_android/app-debug.apk
# 方法2：手动安装
# 1. 将 app-debug.apk 传输到手机（如微信/QQ 发送给自己）
# 2. 在手机上点击 apk 文件安装
# 3. 如果提示“未知来源”，需在设置中允许安装应用信息：
- 📱 应用名称：AutoGLM Service
- 🔌 服务端口：8080
- 🔒 需要权限：无障碍权限 + 悬浮窗权限
- ⚡ 功能：接收 HTTP 指令，控制手机操作
安装后记得：
- 在 设置 → 无障碍 中开启服务
- 打开应用，点击 "启动服务"
- 确认显示 "运行中 (端口 8080)"
错误信息：Connection timeout to <IP>:8080
解决方案：
- 确认 Accessibility Service 应用已启动
- 检查无障碍权限是否开启
- 确保手机和电脑在同一局域网
- 关闭手机防火墙
- 测试连接：
curl "http://<IP>:8080/screenshot" - 重启 Accessibility Service 应用
解决方案：
- 确认使用的是 Accessibility 方法（非 ADB 键盘）
- 检查 Accessibility Service 版本
- 确保输入法支持中文
- 重启 Accessibility 服务
解决方案：
- 检查 ADB 连接：
adb devices - 手机屏幕保持唤醒
- 重启投屏服务
- 检查防火墙设置
原因：网络访问 GLM API 超时
解决方案：
- 配置网络代理
- 检查 API 密钥有效性
- 使用本地模型（高级）
解决方案：
- 优先使用 Web 界面连接（推荐）
- 点击左侧"展开设置"按钮
- 使用"配对设备"或"快速连接"功能
- 无需手动执行命令行操作
- 确保手机和电脑在同一局域网
- 关闭手机省电模式
- 使用 USB 连接代替无线
- 重启 ADB 服务：
adb kill-server && adb start-server
常见原因和解决方案：
-
配对码输入错误
- 配对码是 6 位数字
- 注意区分数字 0 和字母 O
- 配对码有效期约 60 秒，过期需重新获取
-
配对端口填写错误
- 手机显示的配对端口通常是 5 位数（如 37045）
- 不要与 ADB 端口（默认 5555）混淆
- 每次点击"使用配对码配对设备"端口都会变化
-
IP 地址填写错误
- 格式：192.168.x.x
- 确保手机和电脑在同一局域网
- 可在手机的"无线调试"页面顶部查看完整 IP
-
网络连接问题
- 手机和电脑必须在同一 Wi-Fi 网络
- 关闭 VPN 可能会影响连接
- 部分企业网络可能限制设备间通信
-
ADB 服务未启动
- 确保电脑已安装 ADB（Android Platform Tools）
- 验证命令：
adb version - 如未安装，参考"快速开始"部分安装
成功配对后：
- 系统会自动切换到"快速连接"标签
- 下次连接只需输入 IP，无需再次配对
- 设备信息会显示在"查看设备"列表中
解决方案：
- 检查端口 5000 是否被占用
- 清除浏览器缓存
- 使用 Chrome/Firefox 浏览器
- 检查防火墙/代理设置
UI 大改版 + 无线连接集成
✨ 新功能
- 🔗 内置无线ADB配对和连接管理
- Web界面直接配对，无需命令行
- 支持配对新设备和快速连接已配对设备
- 实时状态显示和连接日志
- 断开连接和设备列表查看
- 📱 可折叠ADB控制面板
- 连接/投屏成功后自动收起
- 投屏区域最大化显示
- 手动展开/收起切换
- 🎨 全新UI设计风格
- 从暗黑科技风改为现代极简白色风格
- 纯白悬浮卡片设计
- 浅灰色网格背景（类 SaaS 产品）
- 黑白灰主色调，去除蓝绿渐变
🎨 UI优化
- 精简化按钮设计，纯黑色主按钮
- 细腻的悬停和点击反馈动画
- 优化标题栏布局，集成状态指示
- 改进面板阴影和边框效果
- 更清晰的文字层级和排版
📱 投屏优化
- 投屏背景改为透明/浅灰色
- 去除黑色边框，视觉更统一
- 自动收起控制面板，画面更大
🐛 修复
- 修复投屏区域被设置面板挤压的问题
- 优化连接状态同步机制
重大更新
✨ 新功能
- 🔄 切换到 Accessibility Service 方法进行手机控制
- ⌨️ 支持中文文本输入（无需 ADB 键盘）
- 📊 B模式执行过程实时流式显示
- 🎨 右侧下半部分左右分栏布局：摘要 + 详细日志
🎨 优化
- 改进 IP 地址解析逻辑（自动去除端口号）
- 优化日志输出格式和高亮显示
- 更稳定的 HTTP 控制接口
- 终端风格的详细日志区域
🐛 修复
- 修复 device_id 格式导致的连接错误
- 修复默认 IP 地址硬编码问题
- 解决文本输入功能不可用问题
- 优化流式输出的缓冲机制
初始版本发布
✨ 新功能
- 实现基于 scrcpy 的实时投屏系统
- 集成 GLM-4 AI 对话功能（A模式）
- 集成 AutoGLM 智能手机控制（B模式）
- 开发现代化 Web UI 界面
- B模式上下分屏执行过程可视化
🎨 优化
- 投屏优化至 1080p@60fps
- JPEG 高质量编码
- WebSocket 实时通信
- 响应式布局设计
🐛 修复
- 修复 Qt 框架兼容性问题
- 解决 eventlet 与 HTTP 客户端冲突
- 优化 AutoGLM ModelConfig 参数
- 修复设备 ID 传递问题
欢迎贡献代码、报告问题或提出建议！
- Fork 本项目
- 创建特性分支：
git checkout -b feature/AmazingFeature - 提交更改：
git commit -m 'Add some AmazingFeature' - 推送分支：
git push origin feature/AmazingFeature - 提交 Pull Request
本项目采用 MIT 许可证 - 详见 LICENSE 文件
- 问题反馈: GitHub Issues
- 功能建议: GitHub Discussions
⭐ 如果这个项目对你有帮助，请给一个 Star！⭐
Made with ❤️ by AutoGLM Cockpit Team