Spaces:

CatPtain
/

page_shot

Running

File size: 19,559 Bytes

4f43bf9

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