Delete cloud-browser

cloud-browser/.env.example

@@ -1,7 +0,0 @@
-# 浏览器配置
-VIEWPORT_WIDTH=1280
-VIEWPORT_HEIGHT=800
-DEFAULT_URL=https://www.google.com
-
-# 服务配置
-PORT=7860

cloud-browser/Dockerfile

@@ -1,26 +0,0 @@
-FROM mcr.microsoft.com/playwright/python:v1.40.0-jammy
-
-WORKDIR /app
-
-# Install dependencies
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Install browsers
-RUN playwright install chromium
-RUN playwright install-deps chromium
-
-# Copy application
-COPY . .
-
-# Environment variables
-ENV PORT=7860
-ENV VIEWPORT_WIDTH=1280
-ENV VIEWPORT_HEIGHT=800
-ENV DEFAULT_URL=https://www.google.com
-
-# Expose port
-EXPOSE 7860
-
-# Run the application
-CMD ["python", "app.py"]

cloud-browser/README.md

@@ -1,133 +0,0 @@
-# 云浏览器 - 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

cloud-browser/app.py

@@ -1,317 +0,0 @@
-import os
-import io
-import base64
-import time
-from flask import Flask, render_template, request, jsonify, send_file
-from playwright.sync_api import sync_playwright, TimeoutError as PlaywrightTimeoutError
-
-app = Flask(__name__)
-
-# 浏览器实例管理
-browser_instance = None
-page_instance = None
-playwright_instance = None
-
-# 配置
-VIEWPORT_WIDTH = int(os.environ.get('VIEWPORT_WIDTH', 1280))
-VIEWPORT_HEIGHT = int(os.environ.get('VIEWPORT_HEIGHT', 800))
-DEFAULT_URL = os.environ.get('DEFAULT_URL', 'https://www.google.com')
-
-
-def get_browser():
-    """获取或创建浏览器实例"""
-    global browser_instance, page_instance, playwright_instance
-    
-    if browser_instance is None:
-        playwright_instance = sync_playwright().start()
-        browser_instance = playwright_instance.chromium.launch(
-            headless=True,
-            args=[
-                '--no-sandbox',
-                '--disable-dev-shm-usage',
-                '--disable-gpu',
-                '--disable-extensions',
-                '--disable-web-security',
-                '--disable-features=IsolateOrigins,site-per-process',
-            ]
-        )
-        context = browser_instance.new_context(
-            viewport={'width': VIEWPORT_WIDTH, 'height': VIEWPORT_HEIGHT},
-            user_agent='Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
-        )
-        page_instance = context.new_page()
-        page_instance.goto(DEFAULT_URL, timeout=30000, wait_until='domcontentloaded')
-    
-    return page_instance
-
-
-def take_screenshot():
-    """截取当前页面截图"""
-    page = get_browser()
-    try:
-        screenshot = page.screenshot(
-            type='jpeg',
-            quality=80,
-            full_page=False
-        )
-        return base64.b64encode(screenshot).decode('utf-8')
-    except Exception as e:
-        print(f"Screenshot error: {e}")
-        return None
-
-
-@app.route('/')
-def index():
-    """主页"""
-    return render_template('index.html', 
-                         viewport_width=VIEWPORT_WIDTH,
-                         viewport_height=VIEWPORT_HEIGHT)
-
-
-@app.route('/api/navigate', methods=['POST'])
-def navigate():
-    """导航到指定网址"""
-    data = request.get_json()
-    url = data.get('url', '')
-    
-    if not url:
-        return jsonify({'success': False, 'error': '请输入网址'})
-    
-    # 自动添加 https://
-    if not url.startswith('http://') and not url.startswith('https://'):
-        url = 'https://' + url
-    
-    try:
-        page = get_browser()
-        page.goto(url, timeout=30000, wait_until='domcontentloaded')
-        time.sleep(0.5)  # 等待页面渲染
-        
-        screenshot = take_screenshot()
-        current_url = page.url
-        title = page.title()
-        
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot,
-            'url': current_url,
-            'title': title
-        })
-    except PlaywrightTimeoutError:
-        return jsonify({'success': False, 'error': '页面加载超时'})
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/screenshot')
-def screenshot():
-    """获取当前页面截图"""
-    try:
-        page = get_browser()
-        screenshot = take_screenshot()
-        current_url = page.url
-        title = page.title()
-        
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot,
-            'url': current_url,
-            'title': title
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/click', methods=['POST'])
-def click():
-    """处理点击事件"""
-    data = request.get_json()
-    x = data.get('x', 0)
-    y = data.get('y', 0)
-    
-    try:
-        page = get_browser()
-        # 点击指定坐标
-        page.mouse.click(x, y)
-        time.sleep(0.3)  # 等待页面响应
-        
-        screenshot = take_screenshot()
-        current_url = page.url
-        title = page.title()
-        
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot,
-            'url': current_url,
-            'title': title
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/type', methods=['POST'])
-def type_text():
-    """处理键盘输入"""
-    data = request.get_json()
-    text = data.get('text', '')
-    
-    try:
-        page = get_browser()
-        page.keyboard.type(text)
-        time.sleep(0.2)
-        
-        screenshot = take_screenshot()
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/keypress', methods=['POST'])
-def keypress():
-    """处理特殊按键"""
-    data = request.get_json()
-    key = data.get('key', '')
-    
-    try:
-        page = get_browser()
-        
-        # 处理特殊按键
-        key_map = {
-            'Enter': 'Enter',
-            'Backspace': 'Backspace',
-            'Tab': 'Tab',
-            'Escape': 'Escape',
-            'ArrowUp': 'ArrowUp',
-            'ArrowDown': 'ArrowDown',
-            'ArrowLeft': 'ArrowLeft',
-            'ArrowRight': 'ArrowRight',
-            ' ': 'Space',
-        }
-        
-        if key in key_map:
-            page.keyboard.press(key_map[key])
-        elif len(key) == 1:
-            page.keyboard.press(key)
-        
-        time.sleep(0.2)
-        screenshot = take_screenshot()
-        
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/scroll', methods=['POST'])
-def scroll():
-    """处理滚动"""
-    data = request.get_json()
-    delta_x = data.get('deltaX', 0)
-    delta_y = data.get('deltaY', 0)
-    
-    try:
-        page = get_browser()
-        page.mouse.wheel(delta_x, delta_y)
-        time.sleep(0.2)
-        
-        screenshot = take_screenshot()
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/go-back', methods=['POST'])
-def go_back():
-    """后退"""
-    try:
-        page = get_browser()
-        page.go_back()
-        time.sleep(0.5)
-        
-        screenshot = take_screenshot()
-        current_url = page.url
-        title = page.title()
-        
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot,
-            'url': current_url,
-            'title': title
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/go-forward', methods=['POST'])
-def go_forward():
-    """前进"""
-    try:
-        page = get_browser()
-        page.go_forward()
-        time.sleep(0.5)
-        
-        screenshot = take_screenshot()
-        current_url = page.url
-        title = page.title()
-        
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot,
-            'url': current_url,
-            'title': title
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/reload', methods=['POST'])
-def reload():
-    """刷新"""
-    try:
-        page = get_browser()
-        page.reload()
-        time.sleep(0.5)
-        
-        screenshot = take_screenshot()
-        current_url = page.url
-        title = page.title()
-        
-        return jsonify({
-            'success': True,
-            'screenshot': screenshot,
-            'url': current_url,
-            'title': title
-        })
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)})
-
-
-@app.route('/api/status')
-def status():
-    """获取浏览器状态"""
-    try:
-        page = get_browser()
-        return jsonify({
-            'success': True,
-            'ready': True,
-            'url': page.url,
-            'title': page.title()
-        })
-    except Exception as e:
-        return jsonify({
-            'success': True,
-            'ready': False,
-            'error': str(e)
-        })
-
-
-if __name__ == '__main__':
-    port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port, debug=False, threaded=True)

cloud-browser/requirements.txt

@@ -1,3 +0,0 @@
-Flask==3.0.0
-playwright==1.40.0
-Werkzeug==3.0.1

cloud-browser/static/css/style.css

@@ -1,427 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-    min-height: 100vh;
-    color: #fff;
-}
-
-.container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-/* Header */
-.header {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(10px);
-    border-radius: 16px;
-    padding: 20px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    margin-bottom: 16px;
-}
-
-.header-left {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.header-icon {
-    font-size: 32px;
-    background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.header-title {
-    font-size: 24px;
-    font-weight: 700;
-    background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.badge {
-    background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
-    color: white;
-    padding: 6px 12px;
-    border-radius: 20px;
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 500;
-}
-
-/* Status Indicator */
-.status-indicator {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 20px;
-    font-size: 14px;
-}
-
-.status-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #ffc107;
-    animation: pulse 2s infinite;
-}
-
-.status-dot.connected {
-    background: #4caf50;
-}
-
-.status-dot.error {
-    background: #f44336;
-}
-
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-/* Browser Toolbar */
-.browser-toolbar {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(10px);
-    border-radius: 12px;
-    padding: 12px 16px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    margin-bottom: 16px;
-}
-
-.nav-buttons {
-    display: flex;
-    gap: 8px;
-}
-
-.nav-btn {
-    width: 36px;
-    height: 36px;
-    border: none;
-    border-radius: 8px;
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.nav-btn:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.05);
-}
-
-.nav-btn:active {
-    transform: scale(0.95);
-}
-
-/* URL Bar */
-.url-bar {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-    padding: 4px 4px 4px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-}
-
-.url-bar:focus-within {
-    border-color: rgba(0, 212, 255, 0.5);
-    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
-}
-
-.url-icon {
-    color: #4caf50;
-    margin-right: 10px;
-    font-size: 14px;
-}
-
-.url-bar input {
-    flex: 1;
-    background: transparent;
-    border: none;
-    color: #fff;
-    font-size: 14px;
-    outline: none;
-    padding: 8px 0;
-}
-
-.url-bar input::placeholder {
-    color: rgba(255, 255, 255, 0.4);
-}
-
-.go-btn {
-    width: 36px;
-    height: 36px;
-    border: none;
-    border-radius: 8px;
-    background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.go-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
-}
-
-/* Browser Viewport */
-.browser-viewport {
-    position: relative;
-    background: #000;
-    border-radius: 12px;
-    overflow: hidden;
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-    aspect-ratio: 1280 / 800;
-    max-height: 70vh;
-    cursor: crosshair;
-}
-
-.screenshot-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.screenshot-img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    display: block;
-}
-
-/* Loading Overlay */
-.loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    transition: opacity 0.3s ease;
-}
-
-.loading-overlay.hidden {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.loading-content {
-    text-align: center;
-}
-
-.loading-icon {
-    font-size: 48px;
-    color: #00d4ff;
-    margin-bottom: 16px;
-}
-
-.loading-text {
-    font-size: 16px;
-    color: rgba(255, 255, 255, 0.8);
-}
-
-/* Keyboard Capture (hidden) */
-.keyboard-capture {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-}
-
-/* Info Bar */
-.info-bar {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(10px);
-    border-radius: 12px;
-    padding: 12px 20px;
-    display: flex;
-    gap: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    margin-top: 16px;
-    flex-wrap: wrap;
-}
-
-.info-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.7);
-}
-
-.info-item i {
-    color: #00d4ff;
-}
-
-.info-item span {
-    max-width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-/* Tips Section */
-.tips-section {
-    margin-top: 24px;
-}
-
-.tips-section h3 {
-    font-size: 18px;
-    margin-bottom: 16px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.tips-section h3 i {
-    color: #ffc107;
-}
-
-.tips-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 16px;
-}
-
-.tip-card {
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(10px);
-    border-radius: 12px;
-    padding: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-}
-
-.tip-card:hover {
-    background: rgba(255, 255, 255, 0.08);
-    transform: translateY(-2px);
-    border-color: rgba(0, 212, 255, 0.3);
-}
-
-.tip-icon {
-    font-size: 28px;
-    margin-bottom: 12px;
-    background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-.tip-card h4 {
-    font-size: 16px;
-    margin-bottom: 8px;
-    color: #fff;
-}
-
-.tip-card p {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.6);
-    line-height: 1.5;
-}
-
-/* Toast */
-.toast {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: 2000;
-    transform: translateX(120%);
-    transition: transform 0.3s ease;
-}
-
-.toast.show {
-    transform: translateX(0);
-}
-
-.toast-content {
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(10px);
-    padding: 14px 20px;
-    border-radius: 12px;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 14px;
-    font-weight: 500;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.toast-icon.success {
-    color: #4caf50;
-}
-
-.toast-icon.error {
-    color: #f44336;
-}
-
-.toast-icon.info {
-    color: #00d4ff;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .container {
-        padding: 10px;
-    }
-    
-    .header {
-        flex-direction: column;
-        gap: 12px;
-        padding: 16px;
-    }
-    
-    .browser-toolbar {
-        flex-wrap: wrap;
-    }
-    
-    .info-bar {
-        flex-direction: column;
-        gap: 8px;
-    }
-    
-    .info-item span {
-        max-width: 100%;
-    }
-    
-    .tips-grid {
-        grid-template-columns: 1fr;
-    }
-}

cloud-browser/static/js/app.js

@@ -1,438 +0,0 @@
-// DOM Elements
-const screenshotImg = document.getElementById('screenshotImg');
-const browserViewport = document.getElementById('browserViewport');
-const loadingOverlay = document.getElementById('loadingOverlay');
-const loadingText = document.getElementById('loadingText');
-const urlInput = document.getElementById('urlInput');
-const goBtn = document.getElementById('goBtn');
-const backBtn = document.getElementById('backBtn');
-const forwardBtn = document.getElementById('forwardBtn');
-const reloadBtn = document.getElementById('reloadBtn');
-const keyboardCapture = document.getElementById('keyboardCapture');
-const statusDot = document.querySelector('.status-dot');
-const statusText = document.getElementById('statusText');
-const currentUrlEl = document.getElementById('currentUrl');
-const pageTitleEl = document.getElementById('pageTitle');
-const latencyEl = document.getElementById('latency');
-
-// Toast
-const toast = document.getElementById('toast');
-const toastIcon = document.getElementById('toastIcon');
-const toastMessage = document.getElementById('toastMessage');
-
-// State
-let isLoading = false;
-let lastRequestTime = 0;
-let isBrowserReady = false;
-let autoRefreshInterval = null;
-
-// Toast function
-function showToast(message, type = 'success') {
-    toastMessage.textContent = message;
-    toastIcon.className = 'toast-icon fas ';
-    
-    if (type === 'success') {
-        toastIcon.classList.add('fa-check-circle', 'success');
-    } else if (type === 'error') {
-        toastIcon.classList.add('fa-exclamation-circle', 'error');
-    } else {
-        toastIcon.classList.add('fa-info-circle', 'info');
-    }
-    
-    toast.classList.add('show');
-    
-    setTimeout(() => {
-        toast.classList.remove('show');
-    }, 3000);
-}
-
-// Update status
-function updateStatus(status, text) {
-    statusDot.className = 'status-dot';
-    if (status === 'connected') {
-        statusDot.classList.add('connected');
-    } else if (status === 'error') {
-        statusDot.classList.add('error');
-    }
-    statusText.textContent = text;
-}
-
-// Show loading
-function showLoading(text = '加载中...') {
-    loadingText.textContent = text;
-    loadingOverlay.classList.remove('hidden');
-    isLoading = true;
-}
-
-// Hide loading
-function hideLoading() {
-    loadingOverlay.classList.add('hidden');
-    isLoading = false;
-}
-
-// Update screenshot
-function updateScreenshot(data) {
-    if (data.screenshot) {
-        screenshotImg.src = 'data:image/jpeg;base64,' + data.screenshot;
-    }
-    if (data.url) {
-        currentUrlEl.textContent = data.url;
-        urlInput.value = data.url;
-    }
-    if (data.title) {
-        pageTitleEl.textContent = data.title;
-    }
-    
-    // Calculate latency
-    if (lastRequestTime > 0) {
-        const latency = Date.now() - lastRequestTime;
-        latencyEl.textContent = latency + 'ms';
-    }
-}
-
-// Navigate to URL
-async function navigateTo(url) {
-    if (isLoading) return;
-    
-    showLoading('正在加载页面...');
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/navigate', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ url: url })
-        });
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-            hideLoading();
-            showToast('页面加载成功', 'success');
-        } else {
-            hideLoading();
-            showToast(data.error || '加载失败', 'error');
-        }
-    } catch (error) {
-        hideLoading();
-        showToast('网络错误: ' + error.message, 'error');
-        console.error('Navigate error:', error);
-    }
-}
-
-// Get screenshot
-async function refreshScreenshot() {
-    if (isLoading) return;
-    
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/screenshot');
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-            return true;
-        }
-        return false;
-    } catch (error) {
-        console.error('Screenshot error:', error);
-        return false;
-    }
-}
-
-// Handle click
-async function handleClick(x, y) {
-    if (isLoading || !isBrowserReady) return;
-    
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/click', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ x: x, y: y })
-        });
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-        }
-    } catch (error) {
-        console.error('Click error:', error);
-    }
-}
-
-// Handle type
-async function handleType(text) {
-    if (isLoading || !isBrowserReady) return;
-    
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/type', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ text: text })
-        });
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-        }
-    } catch (error) {
-        console.error('Type error:', error);
-    }
-}
-
-// Handle keypress
-async function handleKeypress(key) {
-    if (isLoading || !isBrowserReady) return;
-    
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/keypress', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ key: key })
-        });
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-        }
-    } catch (error) {
-        console.error('Keypress error:', error);
-    }
-}
-
-// Handle scroll
-async function handleScroll(deltaX, deltaY) {
-    if (isLoading || !isBrowserReady) return;
-    
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/scroll', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ deltaX: deltaX, deltaY: deltaY })
-        });
-        
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-        }
-    } catch (error) {
-        console.error('Scroll error:', error);
-    }
-}
-
-// Navigation functions
-async function goBack() {
-    if (isLoading) return;
-    
-    showLoading('后退中...');
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/go-back', { method: 'POST' });
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-            hideLoading();
-        } else {
-            hideLoading();
-            showToast(data.error || '操作失败', 'error');
-        }
-    } catch (error) {
-        hideLoading();
-        showToast('网络错误', 'error');
-    }
-}
-
-async function goForward() {
-    if (isLoading) return;
-    
-    showLoading('前进中...');
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/go-forward', { method: 'POST' });
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-            hideLoading();
-        } else {
-            hideLoading();
-            showToast(data.error || '操作失败', 'error');
-        }
-    } catch (error) {
-        hideLoading();
-        showToast('网络错误', 'error');
-    }
-}
-
-async function reload() {
-    if (isLoading) return;
-    
-    showLoading('刷新中...');
-    lastRequestTime = Date.now();
-    
-    try {
-        const response = await fetch('/api/reload', { method: 'POST' });
-        const data = await response.json();
-        
-        if (data.success) {
-            updateScreenshot(data);
-            hideLoading();
-        } else {
-            hideLoading();
-            showToast(data.error || '刷新失败', 'error');
-        }
-    } catch (error) {
-        hideLoading();
-        showToast('网络错误', 'error');
-    }
-}
-
-// Calculate click coordinates
-function getClickCoordinates(event) {
-    const rect = screenshotImg.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-    
-    // Calculate scale
-    const scaleX = viewportWidth / rect.width;
-    const scaleY = viewportHeight / rect.height;
-    
-    // Use the smaller scale to maintain aspect ratio
-    const scale = Math.min(scaleX, scaleY);
-    
-    // Calculate actual coordinates in the viewport
-    const actualX = Math.round(x * scale);
-    const actualY = Math.round(y * scale);
-    
-    return { x: actualX, y: actualY };
-}
-
-// Event Listeners
-
-// URL input
-goBtn.addEventListener('click', () => {
-    const url = urlInput.value.trim();
-    if (url) {
-        navigateTo(url);
-    }
-});
-
-urlInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-        const url = urlInput.value.trim();
-        if (url) {
-            navigateTo(url);
-        }
-    }
-});
-
-// Navigation buttons
-backBtn.addEventListener('click', goBack);
-forwardBtn.addEventListener('click', goForward);
-reloadBtn.addEventListener('click', reload);
-
-// Viewport click
-browserViewport.addEventListener('click', (e) => {
-    if (!isBrowserReady) return;
-    
-    // Focus the hidden input to capture keyboard
-    keyboardCapture.focus();
-    
-    const coords = getClickCoordinates(e);
-    handleClick(coords.x, coords.y);
-});
-
-// Keyboard input
-keyboardCapture.addEventListener('input', (e) => {
-    const text = e.target.value;
-    if (text) {
-        handleType(text);
-        e.target.value = '';
-    }
-});
-
-keyboardCapture.addEventListener('keydown', (e) => {
-    // Handle special keys
-    const specialKeys = ['Enter', 'Backspace', 'Tab', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-    
-    if (specialKeys.includes(e.key)) {
-        e.preventDefault();
-        handleKeypress(e.key);
-    }
-});
-
-// Scroll
-browserViewport.addEventListener('wheel', (e) => {
-    e.preventDefault();
-    handleScroll(e.deltaX, e.deltaY);
-}, { passive: false });
-
-// Initialize
-async function init() {
-    updateStatus('connecting', '连接中...');
-    showLoading('正在启动云浏览器...');
-    
-    // Check browser status
-    try {
-        const response = await fetch('/api/status');
-        const data = await response.json();
-        
-        if (data.ready) {
-            isBrowserReady = true;
-            updateStatus('connected', '已连接');
-            currentUrlEl.textContent = data.url || '-';
-            pageTitleEl.textContent = data.title || '-';
-            
-            // Get initial screenshot
-            await refreshScreenshot();
-            hideLoading();
-        } else {
-            // Try to initialize by getting screenshot
-            showLoading('正在初始化浏览器...');
-            const success = await refreshScreenshot();
-            
-            if (success) {
-                isBrowserReady = true;
-                updateStatus('connected', '已连接');
-                hideLoading();
-            } else {
-                updateStatus('error', '连接失败');
-                loadingText.textContent = '浏览器启动失败，请刷新页面重试';
-            }
-        }
-    } catch (error) {
-        updateStatus('error', '连接失败');
-        loadingText.textContent = '无法连接到服务器';
-        console.error('Init error:', error);
-    }
-}
-
-// Start
-document.addEventListener('DOMContentLoaded', init);

cloud-browser/templates/index.html

@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>云浏览器 - Cloud Browser</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-</head>
-<body>
-    <div class="container">
-        <!-- Header -->
-        <header class="header">
-            <div class="header-left">
-                <i class="fas fa-cloud header-icon"></i>
-                <h1 class="header-title">云浏览器</h1>
-                <span class="badge">
-                    <i class="fas fa-server"></i>
-                    云端运行
-                </span>
-            </div>
-            <div class="header-right">
-                <span class="status-indicator" id="statusIndicator">
-                    <span class="status-dot"></span>
-                    <span class="status-text" id="statusText">连接中...</span>
-                </span>
-            </div>
-        </header>
-
-        <!-- Browser Toolbar -->
-        <div class="browser-toolbar">
-            <div class="nav-buttons">
-                <button class="nav-btn" id="backBtn" title="后退">
-                    <i class="fas fa-arrow-left"></i>
-                </button>
-                <button class="nav-btn" id="forwardBtn" title="前进">
-                    <i class="fas fa-arrow-right"></i>
-                </button>
-                <button class="nav-btn" id="reloadBtn" title="刷新">
-                    <i class="fas fa-redo"></i>
-                </button>
-            </div>
-            
-            <div class="url-bar">
-                <i class="fas fa-lock url-icon"></i>
-                <input type="text" id="urlInput" placeholder="输入网址，例如 google.com" value="">
-                <button class="go-btn" id="goBtn">
-                    <i class="fas fa-arrow-right"></i>
-                </button>
-            </div>
-        </div>
-
-        <!-- Browser Viewport -->
-        <div class="browser-viewport" id="browserViewport">
-            <div class="loading-overlay" id="loadingOverlay">
-                <div class="loading-content">
-                    <i class="fas fa-spinner fa-spin loading-icon"></i>
-                    <p class="loading-text" id="loadingText">正在启动云浏览器...</p>
-                </div>
-            </div>
-            
-            <div class="screenshot-container" id="screenshotContainer">
-                <img id="screenshotImg" class="screenshot-img" alt="Browser screenshot">
-            </div>
-            
-            <!-- Hidden input for keyboard capture -->
-            <input type="text" id="keyboardCapture" class="keyboard-capture" autocomplete="off">
-        </div>
-
-        <!-- Info Bar -->
-        <div class="info-bar">
-            <div class="info-item">
-                <i class="fas fa-globe"></i>
-                <span id="currentUrl">等待加载...</span>
-            </div>
-            <div class="info-item">
-                <i class="fas fa-file-alt"></i>
-                <span id="pageTitle">-</span>
-            </div>
-            <div class="info-item">
-                <i class="fas fa-tachometer-alt"></i>
-                <span id="latency">-</span>
-            </div>
-        </div>
-
-        <!-- Tips -->
-        <div class="tips-section">
-            <h3><i class="fas fa-lightbulb"></i> 使用提示</h3>
-            <div class="tips-grid">
-                <div class="tip-card">
-                    <i class="fas fa-mouse-pointer tip-icon"></i>
-                    <h4>点击操作</h4>
-                    <p>直接在画面上点击，就像操作真实浏览器一样</p>
-                </div>
-                <div class="tip-card">
-                    <i class="fas fa-keyboard tip-icon"></i>
-                    <h4>键盘输入</h4>
-                    <p>点击画面后直接打字，文字会输入到云端浏览器</p>
-                </div>
-                <div class="tip-card">
-                    <i class="fas fa-mouse tip-icon"></i>
-                    <h4>滚动页面</h4>
-                    <p>使用鼠标滚轮在画面上滚动</p>
-                </div>
-                <div class="tip-card">
-                    <i class="fas fa-gamepad tip-icon"></i>
-                    <h4>玩网页游戏</h4>
-                    <p>输入游戏网址，在云端运行，本地不占资源</p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Toast -->
-    <div class="toast" id="toast">
-        <div class="toast-content">
-            <i class="toast-icon" id="toastIcon"></i>
-            <span id="toastMessage"></span>
-        </div>
-    </div>
-
-    <script>
-        const viewportWidth = {{ viewport_width }};
-        const viewportHeight = {{ viewport_height }};
-    </script>
-    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
-</body>
-</html>