Spaces:
Paused
Paused
| title: 云浏览器 - Cloud Browser | |
| emoji: 🌐 | |
| colorFrom: indigo | |
| colorTo: purple | |
| sdk: docker | |
| app_file: app.py | |
| pinned: false | |
| # 云浏览器 - Cloud Browser | |
| 一个基于 Hugging Face Spaces 的云浏览器应用，在服务器端运行浏览器，用户本地只需要看画面和操作，就像云电脑一样。 | |
| ## ✨ 功能特性 | |
| - 🌐 **云端浏览器**：所有网页都在服务器端加载和渲染 | |
| - 🖱️ **点击操作**：直接在画面上点击，就像操作真实浏览器 | |
| - ⌨️ **键盘输入**：点击画面后直接打字，文字输入到云端浏览器 | |
| - 📜 **滚动页面**：使用鼠标滚轮在画面上滚动 | |
| - 🎮 **玩网页游戏**：输入游戏网址，在云端运行，本地不占资源 | |
| - 🎨 **科技感界面**：深色主题，渐变设计，现代化 UI | |
| - 📊 **实时状态**：显示当前网址、页面标题、延迟等信息 | |
| ## 🚀 部署到 Hugging Face Spaces | |
| ### 方法：Docker 部署 | |
| 1. 在 Hugging Face 创建一个新的 Space，选择 **Docker** 作为 SDK | |
| 2. 将本项目的所有文件上传到 Space 仓库 | |
| 3. 等待部署完成（首次部署会比较慢，需要下载浏览器） | |
| 4. 访问你的 Space 即可使用 | |
| ### 注意事项 | |
| - 首次启动需要下载 Chromium 浏览器，可能需要 1-2 分钟 | |
| - 建议使用至少 2GB 内存的 Space 配置 | |
| - 浏览器是单实例的，所有用户共享同一个浏览器会话 | |
| ## 💻 本地运行 | |
| ```bash | |
| # 安装依赖 | |
| pip install -r requirements.txt | |
| # 安装浏览器 | |
| playwright install chromium | |
| playwright install-deps chromium | |
| # 运行 | |
| python app.py | |
| ``` | |
| 访问 http://localhost:7860 即可使用。 | |
| ## ⚙️ 环境变量配置 | |
| | 变量名 | 说明 | 默认值 | | |
| |--------|------|--------| | |
| | `PORT` | 服务端口 | 7860 | | |
| | `VIEWPORT_WIDTH` | 浏览器视口宽度 | 1280 | | |
| | `VIEWPORT_HEIGHT` | 浏览器视口高度 | 800 | | |
| | `DEFAULT_URL` | 默认打开的网址 | https://www.google.com | | |
| ## 🎯 使用说明 | |
| ### 访问网页 | |
| 1. 在地址栏输入网址（例如 google.com） | |
| 2. 按回车或点击前往按钮 | |
| 3. 等待页面加载完成 | |
| ### 点击操作 | |
| - 直接在浏览器画面上点击 | |
| - 点击位置会精确映射到云端浏览器 | |
| ### 键盘输入 | |
| 1. 点击浏览器画面获得焦点 | |
| 2. 直接打字，文字会输入到云端浏览器 | |
| 3. 支持 Enter、Backspace、方向键等特殊按键 | |
| ### 滚动页面 | |
| - 使用鼠标滚轮在画面上滚动 | |
| - 滚动会同步到云端浏览器 | |
| ### 浏览器控制 | |
| - 后退按钮：返回上一页 | |
| - 前进按钮：前进到下一页 | |
| - 刷新按钮：重新加载当前页面 | |
| ## 🏗️ 技术栈 | |
| - **后端**：Flask + Playwright (Python) | |
| - **前端**：HTML + CSS + JavaScript | |
| - **浏览器引擎**：Chromium (Playwright 驱动) | |
| - **部署**：Docker + Hugging Face Spaces | |
| ## ⚠️ 注意事项 | |
| ### 延迟问题 | |
| - 每次操作都需要发送请求到服务器并等待截图返回 | |
| - 会有一定的延迟（通常 100-500ms） | |
| - 不适合需要快速反应的游戏 | |
| ### 资源消耗 | |
| - 浏览器运行会占用较多内存 | |
| - Hugging Face Spaces 免费版可能会有限制 | |
| ### 安全性 | |
| - 用户可以访问任意网站 | |
| - 所有用户共享同一个浏览器实例 | |
| - 不建议在公共 Space 中登录重要账号 | |
| ### 音频问题 | |
| - 当前版本不支持音频传输 | |
| - 网页视频和游戏没有声音 | |
| ## 🔧 工作原理 | |
| ``` | |
| 用户操作 → 发送到服务器 → Playwright 执行 → 截图 → 返回给用户显示 | |
| ``` | |
| 1. 服务器端运行无头 Chromium 浏览器 | |
| 2. 用户在前端点击/输入/滚动 | |
| 3. 操作通过 HTTP 请求发送到后端 | |
| 4. Playwright 在浏览器中模拟执行操作 | |
| 5. 截取当前页面截图 | |
| 6. 将截图返回给前端显示 | |
| ## 📝 改进方向 | |
| - [ ] 使用 WebSocket 替代 HTTP，降低延迟 | |
| - [ ] 支持多用户隔离（每个用户独立浏览器） | |
| - [ ] 添加音频传输支持 | |
| - [ ] 优化截图传输（增量更新、视频流等） | |
| - [ ] 添加书签/历史记录功能 | |
| - [ ] 支持调整视口大小 | |
| - [ ] 添加密码保护 | |
| - [ ] 支持文件上传下载 | |
| ## 📄 License | |
| MIT License | |