Spaces:

CatPtain
/

page_shot

Paused

App Files Files Community

CatPtain commited on Jun 5, 2025

Commit

4f43bf9

verified ·

1 Parent(s): 557d451

Upload 4 files

Browse files

Files changed (2) hide show

hf-test.html +473 -0
test-hf-api.sh +191 -0

hf-test.html ADDED Viewed

	@@ -0,0 +1,473 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF Spaces Screenshot API 测试</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            max-width: 1000px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 12px;
+            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #2c3e50;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .form-group {
+            margin: 20px 0;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #333;
+        }
+        input, textarea, select {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e1e8ed;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+        input:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #3498db;
+        }
+        .input-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 15px;
+        }
+        button {
+            background: linear-gradient(135deg, #3498db, #2980b9);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            margin: 10px 5px;
+            transition: all 0.3s;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
+        }
+        button:disabled {
+            background: #bdc3c7;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .test-btn {
+            background: linear-gradient(135deg, #27ae60, #229954);
+        }
+        .health-btn {
+            background: linear-gradient(135deg, #e74c3c, #c0392b);
+        }
+        #result {
+            margin-top: 30px;
+            padding: 20px;
+            border-radius: 8px;
+            border-left: 4px solid #3498db;
+            background: #f8f9fa;
+        }
+        .loading {
+            color: #f39c12;
+            font-style: italic;
+        }
+        .error {
+            color: #e74c3c;
+            background: #fdf2f2;
+            border-left-color: #e74c3c;
+        }
+        .success {
+            color: #27ae60;
+            background: #f0f9f4;
+            border-left-color: #27ae60;
+        }
+        .screenshot-result img {
+            max-width: 100%;
+            border: 2px solid #e1e8ed;
+            border-radius: 8px;
+            margin-top: 15px;
+        }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin: 20px 0;
+        }
+        .stat-card {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            border: 1px solid #e1e8ed;
+            text-align: center;
+        }
+        .stat-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #2c3e50;
+        }
+        .stat-label {
+            color: #7f8c8d;
+            font-size: 12px;
+            margin-top: 5px;
+        }
+        pre {
+            background: #2c3e50;
+            color: #ecf0f1;
+            padding: 15px;
+            border-radius: 8px;
+            overflow-x: auto;
+            font-size: 12px;
+        }
+        .example-urls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 10px;
+            margin: 15px 0;
+        }
+        .example-url {
+            background: #ecf0f1;
+            padding: 8px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+            text-align: center;
+            transition: background 0.3s;
+        }
+        .example-url:hover {
+            background: #d5dbdb;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>📸 Hugging Face Spaces Screenshot API 测试工具</h1>
+        <div class="form-group">
+            <label for="spaceUrl">🚀 Hugging Face Space URL:</label>
+            <input type="text" id="spaceUrl"
+                   placeholder="https://your-username-your-space-name.hf.space"
+                   value="">
+            <small style="color: #7f8c8d;">请输入你的 HF Space 完整地址</small>
+        </div>
+        <div class="form-group">
+            <label for="authToken">🔐 认证 Token (可选):</label>
+            <input type="password" id="authToken"
+                   placeholder="hf_your_token_here 或自定义 API key">
+            <small style="color: #7f8c8d;">私有 Space 需要 HF token，或使用自定义 API key</small>
+        </div>
+        <div class="form-group">
+            <label for="targetUrl">🌐 要截图的网址:</label>
+            <input type="text" id="targetUrl" value="https://www.baidu.com">
+            <div class="example-urls">
+                <div class="example-url" onclick="setUrl('https://www.baidu.com')">百度</div>
+                <div class="example-url" onclick="setUrl('https://www.google.com')">Google</div>
+                <div class="example-url" onclick="setUrl('https://github.com')">GitHub</div>
+                <div class="example-url" onclick="setUrl('https://huggingface.co')">HuggingFace</div>
+                <div class="example-url" onclick="setUrl('https://www.wikipedia.org')">Wikipedia</div>
+                <div class="example-url" onclick="setUrl('https://stackoverflow.com')">Stack Overflow</div>
+            </div>
+        </div>
+        <div class="input-row">
+            <div class="form-group">
+                <label for="width">📐 宽度 (px):</label>
+                <input type="number" id="width" value="1280" min="100" max="1600">
+            </div>
+            <div class="form-group">
+                <label for="height">📏 高度 (px):</label>
+                <input type="number" id="height" value="720" min="100" max="1200">
+            </div>
+            <div class="form-group">
+                <label for="quality">🎯 质量 (%):</label>
+                <input type="number" id="quality" value="75" min="10" max="100">
+            </div>
+        </div>
+        <div style="text-align: center; margin: 30px 0;">
+            <button onclick="testHealth()" class="health-btn">🔍 健康检查</button>
+            <button onclick="testStatus()" class="test-btn">📊 状态检查</button>
+            <button onclick="takeScreenshot()" id="screenshotBtn">📸 截图测试</button>
+        </div>
+        <div id="result"></div>
+    </div>
+    <script>
+        function setUrl(url) {
+            document.getElementById('targetUrl').value = url;
+        }
+        function getHeaders() {
+            const token = document.getElementById('authToken').value.trim();
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            if (token) {
+                if (token.startsWith('hf_')) {
+                    headers['Authorization'] = `Bearer ${token}`;
+                } else {
+                    headers['X-API-Key'] = token;
+                }
+            }
+            return headers;
+        }
+        function getBaseUrl() {
+            const spaceUrl = document.getElementById('spaceUrl').value.trim();
+            if (!spaceUrl) {
+                alert('请先输入 Hugging Face Space URL');
+                return null;
+            }
+            return spaceUrl.endsWith('/') ? spaceUrl.slice(0, -1) : spaceUrl;
+        }
+        async function testHealth() {
+            const baseUrl = getBaseUrl();
+            if (!baseUrl) return;
+            document.getElementById('result').innerHTML = '<p class="loading">🔍 正在检查健康状态...</p>';
+            try {
+                const response = await fetch(`${baseUrl}/`, {
+                    headers: getHeaders()
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    document.getElementById('result').innerHTML = `
+                        <div class="success">
+                            <h3>✅ 健康检查成功</h3>
+                            <div class="stats">
+                                <div class="stat-card">
+                                    <div class="stat-value">${data.version}</div>
+                                    <div class="stat-label">版本</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${data.platform}</div>
+                                    <div class="stat-label">平台</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${data.status}</div>
+                                    <div class="stat-label">状态</div>
+                                </div>
+                            </div>
+                            <details>
+                                <summary style="cursor: pointer; margin: 10px 0;">📋 详细信息</summary>
+                                <pre>${JSON.stringify(data, null, 2)}</pre>
+                            </details>
+                        </div>
+                    `;
+                } else {
+                    const error = await response.text();
+                    document.getElementById('result').innerHTML = `
+                        <div class="error">
+                            <h3>❌ 健康检查失败</h3>
+                            <p>状态码: ${response.status}</p>
+                            <p>错误信息: ${error}</p>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                document.getElementById('result').innerHTML = `
+                    <div class="error">
+                        <h3>❌ 连接失败</h3>
+                        <p>请检查 Space URL 是否正确</p>
+                        <p>错误: ${error.message}</p>
+                    </div>
+                `;
+            }
+        }
+        async function testStatus() {
+            const baseUrl = getBaseUrl();
+            if (!baseUrl) return;
+            document.getElementById('result').innerHTML = '<p class="loading">📊 正在获取状态信息...</p>';
+            try {
+                const response = await fetch(`${baseUrl}/status`, {
+                    headers: getHeaders()
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    document.getElementById('result').innerHTML = `
+                        <div class="success">
+                            <h3>📊 系统状态</h3>
+                            <div class="stats">
+                                <div class="stat-card">
+                                    <div class="stat-value">${data.system?.cpuUsage || 'N/A'}</div>
+                                    <div class="stat-label">CPU 使用率</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${data.system?.uptime || 'N/A'}</div>
+                                    <div class="stat-label">运行时间</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${data.queue?.activeRequests || 0}</div>
+                                    <div class="stat-label">活跃请求</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${data.queue?.maxConcurrent || 3}</div>
+                                    <div class="stat-label">最大并发</div>
+                                </div>
+                            </div>
+                            <details>
+                                <summary style="cursor: pointer; margin: 10px 0;">📋 完整状态</summary>
+                                <pre>${JSON.stringify(data, null, 2)}</pre>
+                            </details>
+                        </div>
+                    `;
+                } else {
+                    const error = await response.text();
+                    document.getElementById('result').innerHTML = `
+                        <div class="error">
+                            <h3>❌ 状态检查失败</h3>
+                            <p>状态码: ${response.status}</p>
+                            <p>错误信息: ${error}</p>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                document.getElementById('result').innerHTML = `
+                    <div class="error">
+                        <h3>❌ 连接失败</h3>
+                        <p>错误: ${error.message}</p>
+                    </div>
+                `;
+            }
+        }
+        async function takeScreenshot() {
+            const baseUrl = getBaseUrl();
+            if (!baseUrl) return;
+            const url = document.getElementById('targetUrl').value.trim();
+            const width = parseInt(document.getElementById('width').value);
+            const height = parseInt(document.getElementById('height').value);
+            const quality = parseInt(document.getElementById('quality').value);
+            if (!url) {
+                alert('请输入要截图的网址');
+                return;
+            }
+            const btn = document.getElementById('screenshotBtn');
+            btn.disabled = true;
+            btn.textContent = '📸 截图中...';
+            document.getElementById('result').innerHTML = '<p class="loading">📸 正在生成截图，请稍候...</p>';
+            const startTime = Date.now();
+            try {
+                const response = await fetch(`${baseUrl}/screenshot`, {
+                    method: 'POST',
+                    headers: getHeaders(),
+                    body: JSON.stringify({ url, width, height, quality })
+                });
+                const endTime = Date.now();
+                const duration = ((endTime - startTime) / 1000).toFixed(2);
+                if (response.ok) {
+                    const blob = await response.blob();
+                    const imageUrl = URL.createObjectURL(blob);
+                    const size = (blob.size / 1024).toFixed(1);
+                    document.getElementById('result').innerHTML = `
+                        <div class="success screenshot-result">
+                            <h3>✅ 截图成功!</h3>
+                            <div class="stats">
+                                <div class="stat-card">
+                                    <div class="stat-value">${size} KB</div>
+                                    <div class="stat-label">文件大小</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${width}×${height}</div>
+                                    <div class="stat-label">尺寸</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${quality}%</div>
+                                    <div class="stat-label">质量</div>
+                                </div>
+                                <div class="stat-card">
+                                    <div class="stat-value">${duration}s</div>
+                                    <div class="stat-label">耗时</div>
+                                </div>
+                            </div>
+                            <p>目标网址: <a href="${url}" target="_blank">${url}</a></p>
+                            <img src="${imageUrl}" alt="Screenshot" loading="lazy">
+                            <div style="margin-top: 15px;">
+                                <a href="${imageUrl}" download="screenshot.jpg"
+                                   style="background: #27ae60; color: white; padding: 10px 20px; text-decoration: none; border-radius: 6px;">
+                                   💾 下载图片
+                                </a>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    const error = await response.json();
+                    document.getElementById('result').innerHTML = `
+                        <div class="error">
+                            <h3>❌ 截图失败</h3>
+                            <p><strong>状态码:</strong> ${response.status}</p>
+                            <p><strong>错误类型:</strong> ${error.error || '未知错误'}</p>
+                            <p><strong>错误信息:</strong> ${error.message || '无详细信息'}</p>
+                            <p><strong>耗时:</strong> ${duration}s</p>
+                            ${error.cpuUsage ? `<p><strong>CPU使用率:</strong> ${error.cpuUsage}</p>` : ''}
+                            ${error.activeRequests ? `<p><strong>活跃请求:</strong> ${error.activeRequests}</p>` : ''}
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                const endTime = Date.now();
+                const duration = ((endTime - startTime) / 1000).toFixed(2);
+                document.getElementById('result').innerHTML = `
+                    <div class="error">
+                        <h3>❌ 网络错误</h3>
+                        <p><strong>错误:</strong> ${error.message}</p>
+                        <p><strong>耗时:</strong> ${duration}s</p>
+                        <p>请检查网络连接和 Space 状态</p>
+                    </div>
+                `;
+            } finally {
+                btn.disabled = false;
+                btn.textContent = '📸 截图测试';
+            }
+        }
+        // 页面加载时尝试从 URL 获取 Space 地址
+        window.onload = function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const spaceUrl = urlParams.get('space');
+            if (spaceUrl) {
+                document.getElementById('spaceUrl').value = spaceUrl;
+            }
+        };
+    </script>
+</body>
+</html>

test-hf-api.sh ADDED Viewed

	@@ -0,0 +1,191 @@

+#!/bin/bash
+# HF Spaces Screenshot API 测试脚本
+# 使用方法: ./test-hf-api.sh [SPACE_URL] [HF_TOKEN]
+# 配置
+SPACE_URL="${1:-https://your-username-your-space-name.hf.space}"
+HF_TOKEN="${2:-}"
+TEST_URL="https://www.baidu.com"
+# 颜色输出
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+echo -e "${BLUE}🚀 HF Spaces Screenshot API 测试工具${NC}"
+echo "======================================"
+echo "Space URL: $SPACE_URL"
+echo "Token: ${HF_TOKEN:+已设置}${HF_TOKEN:-未设置}"
+echo ""
+# 构建认证头
+AUTH_HEADER=""
+if [ ! -z "$HF_TOKEN" ]; then
+    if [[ $HF_TOKEN == hf_* ]]; then
+        AUTH_HEADER="Authorization: Bearer $HF_TOKEN"
+        echo -e "${GREEN}✅ 使用 HF Token 认证${NC}"
+    else
+        AUTH_HEADER="X-API-Key: $HF_TOKEN"
+        echo -e "${GREEN}✅ 使用自定义 API Key 认证${NC}"
+    fi
+else
+    echo -e "${YELLOW}⚠️  无认证信息，使用公开访问${NC}"
+fi
+echo ""
+# 测试 1: 健康检查
+echo -e "${BLUE}📋 测试 1: 健康检查${NC}"
+echo "GET $SPACE_URL/"
+echo ""
+if [ ! -z "$AUTH_HEADER" ]; then
+    HEALTH_RESPONSE=$(curl -s -w "HTTP_CODE:%{http_code}" -H "$AUTH_HEADER" "$SPACE_URL/")
+else
+    HEALTH_RESPONSE=$(curl -s -w "HTTP_CODE:%{http_code}" "$SPACE_URL/")
+fi
+HTTP_CODE=$(echo "$HEALTH_RESPONSE" | grep -o "HTTP_CODE:[0-9]*" | cut -d: -f2)
+RESPONSE_BODY=$(echo "$HEALTH_RESPONSE" | sed 's/HTTP_CODE:[0-9]*$//')
+if [ "$HTTP_CODE" -eq 200 ]; then
+    echo -e "${GREEN}✅ 健康检查成功 (HTTP $HTTP_CODE)${NC}"
+    echo "$RESPONSE_BODY" | python3 -m json.tool 2>/dev/null || echo "$RESPONSE_BODY"
+else
+    echo -e "${RED}❌ 健康检查失败 (HTTP $HTTP_CODE)${NC}"
+    echo "$RESPONSE_BODY"
+fi
+echo ""
+echo "======================================"
+# 测试 2: 状态检查
+echo -e "${BLUE}📊 测试 2: 状态检查${NC}"
+echo "GET $SPACE_URL/status"
+echo ""
+if [ ! -z "$AUTH_HEADER" ]; then
+    STATUS_RESPONSE=$(curl -s -w "HTTP_CODE:%{http_code}" -H "$AUTH_HEADER" "$SPACE_URL/status")
+else
+    STATUS_RESPONSE=$(curl -s -w "HTTP_CODE:%{http_code}" "$SPACE_URL/status")
+fi
+HTTP_CODE=$(echo "$STATUS_RESPONSE" | grep -o "HTTP_CODE:[0-9]*" | cut -d: -f2)
+RESPONSE_BODY=$(echo "$STATUS_RESPONSE" | sed 's/HTTP_CODE:[0-9]*$//')
+if [ "$HTTP_CODE" -eq 200 ]; then
+    echo -e "${GREEN}✅ 状态检查成功 (HTTP $HTTP_CODE)${NC}"
+    echo "$RESPONSE_BODY" | python3 -m json.tool 2>/dev/null || echo "$RESPONSE_BODY"
+else
+    echo -e "${RED}❌ 状态检查失败 (HTTP $HTTP_CODE)${NC}"
+    echo "$RESPONSE_BODY"
+fi
+echo ""
+echo "======================================"
+# 测试 3: 截图测试
+echo -e "${BLUE}📸 测试 3: 截图测试${NC}"
+echo "POST $SPACE_URL/screenshot"
+echo "目标URL: $TEST_URL"
+echo ""
+# 准备请求数据
+REQUEST_DATA='{
+  "url": "'$TEST_URL'",
+  "width": 1280,
+  "height": 720,
+  "quality": 75
+}'
+echo "请求数据:"
+echo "$REQUEST_DATA" | python3 -m json.tool 2>/dev/null || echo "$REQUEST_DATA"
+echo ""
+# 执行截图请求
+START_TIME=$(date +%s.%N)
+if [ ! -z "$AUTH_HEADER" ]; then
+    curl -X POST "$SPACE_URL/screenshot" \
+         -H "Content-Type: application/json" \
+         -H "$AUTH_HEADER" \
+         -d "$REQUEST_DATA" \
+         -w "HTTP_CODE:%{http_code}\nTIME_TOTAL:%{time_total}s\nSIZE_DOWNLOAD:%{size_download} bytes\n" \
+         -o "test_screenshot_$(date +%s).jpg" \
+         -s > curl_output.tmp
+else
+    curl -X POST "$SPACE_URL/screenshot" \
+         -H "Content-Type: application/json" \
+         -d "$REQUEST_DATA" \
+         -w "HTTP_CODE:%{http_code}\nTIME_TOTAL:%{time_total}s\nSIZE_DOWNLOAD:%{size_download} bytes\n" \
+         -o "test_screenshot_$(date +%s).jpg" \
+         -s > curl_output.tmp
+fi
+# 解析结果
+HTTP_CODE=$(grep "HTTP_CODE:" curl_output.tmp | cut -d: -f2)
+TIME_TOTAL=$(grep "TIME_TOTAL:" curl_output.tmp | cut -d: -f2)
+SIZE_DOWNLOAD=$(grep "SIZE_DOWNLOAD:" curl_output.tmp | cut -d: -f2 | cut -d' ' -f1)
+if [ "$HTTP_CODE" -eq 200 ]; then
+    echo -e "${GREEN}✅ 截图成功 (HTTP $HTTP_CODE)${NC}"
+    echo "⏱️  响应时间: $TIME_TOTAL"
+    echo "📦 文件大小: $SIZE_DOWNLOAD bytes ($(echo "scale=1; $SIZE_DOWNLOAD/1024" | bc)KB)"
+    echo "💾 保存位置: test_screenshot_$(date +%s).jpg"
+    # 检查文件是否存在且大小合理
+    LATEST_FILE=$(ls -t test_screenshot_*.jpg 2>/dev/null | head -1)
+    if [ -f "$LATEST_FILE" ] && [ -s "$LATEST_FILE" ]; then
+        FILE_SIZE=$(stat -f%z "$LATEST_FILE" 2>/dev/null || stat -c%s "$LATEST_FILE" 2>/dev/null)
+        echo "✅ 文件验证通过，大小: ${FILE_SIZE} bytes"
+    else
+        echo -e "${YELLOW}⚠️  文件可能损坏或为空${NC}"
+    fi
+else
+    echo -e "${RED}❌ 截图失败 (HTTP $HTTP_CODE)${NC}"
+    # 显示错误信息
+    SCREENSHOT_FILE=$(ls -t test_screenshot_*.jpg 2>/dev/null | head -1)
+    if [ -f "$SCREENSHOT_FILE" ]; then
+        echo "错误信息:"
+        cat "$SCREENSHOT_FILE"
+    fi
+fi
+# 清理临时文件
+rm -f curl_output.tmp
+echo ""
+echo "======================================"
+# 测试总结
+echo -e "${BLUE}📋 测试总结${NC}"
+echo ""
+if [ "$HTTP_CODE" -eq 200 ]; then
+    echo -e "${GREEN}🎉 所有测试通过！API 工作正常${NC}"
+    echo ""
+    echo "💡 使用建议:"
+    echo "  - 可以在生产环境中使用此 API"
+    echo "  - 建议设置适当的速率限制"
+    echo "  - 监控服务器资源使用情况"
+    if [ -z "$HF_TOKEN" ]; then
+        echo ""
+        echo -e "${YELLOW}🔐 安全建议: 考虑将 Space 设为私有并使用 HF Token${NC}"
+    fi
+else
+    echo -e "${RED}❌ 测试失败，请检查以下问题:${NC}"
+    echo "  1. Space URL 是否正确"
+    echo "  2. Space 是否正在运行"
+    echo "  3. 是否需要认证 token"
+    echo "  4. 网络连接是否正常"
+fi
+echo ""
+echo "🔗 更多信息:"
+echo "  - Demo界面: $SPACE_URL/demo"
+echo "  - API文档: 查看 README.md"
+echo "  - 健康检查: $SPACE_URL/"