---
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