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