|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Huggingface环境矢量图形修复测试</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Microsoft YaHei', Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
color: #333; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
background: white; |
|
|
border-radius: 15px; |
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.header { |
|
|
background: linear-gradient(135deg, #ff6b6b, #ee5a24); |
|
|
color: white; |
|
|
padding: 30px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
margin: 0; |
|
|
font-size: 2.5em; |
|
|
font-weight: 300; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
margin: 10px 0 0 0; |
|
|
opacity: 0.9; |
|
|
font-size: 1.1em; |
|
|
} |
|
|
|
|
|
.content { |
|
|
padding: 40px; |
|
|
} |
|
|
|
|
|
.section { |
|
|
margin-bottom: 40px; |
|
|
padding: 25px; |
|
|
border: 2px solid #f0f0f0; |
|
|
border-radius: 10px; |
|
|
background: #fafafa; |
|
|
} |
|
|
|
|
|
.section h2 { |
|
|
color: #2c3e50; |
|
|
margin-top: 0; |
|
|
border-bottom: 3px solid #3498db; |
|
|
padding-bottom: 10px; |
|
|
} |
|
|
|
|
|
.test-area { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
flex-wrap: wrap; |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
.svg-container { |
|
|
flex: 1; |
|
|
min-width: 200px; |
|
|
padding: 20px; |
|
|
border: 2px dashed #ddd; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
background: white; |
|
|
} |
|
|
|
|
|
.svg-container h3 { |
|
|
margin-top: 0; |
|
|
color: #34495e; |
|
|
} |
|
|
|
|
|
.test-svg { |
|
|
margin: 10px; |
|
|
border: 1px solid #eee; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
margin: 20px 0; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
background: linear-gradient(135deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 12px 25px; |
|
|
margin: 5px; |
|
|
border-radius: 25px; |
|
|
cursor: pointer; |
|
|
font-size: 16px; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
|
|
|
.btn:active { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.btn.success { |
|
|
background: linear-gradient(135deg, #00b894, #00a085); |
|
|
} |
|
|
|
|
|
.btn.warning { |
|
|
background: linear-gradient(135deg, #fdcb6e, #e17055); |
|
|
} |
|
|
|
|
|
.btn.danger { |
|
|
background: linear-gradient(135deg, #fd79a8, #e84393); |
|
|
} |
|
|
|
|
|
.results { |
|
|
margin-top: 20px; |
|
|
padding: 20px; |
|
|
background: #f8f9fa; |
|
|
border-radius: 8px; |
|
|
border-left: 4px solid #007bff; |
|
|
} |
|
|
|
|
|
.log { |
|
|
background: #2c3e50; |
|
|
color: #ecf0f1; |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 14px; |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
white-space: pre-wrap; |
|
|
margin-top: 15px; |
|
|
} |
|
|
|
|
|
.environment-info { |
|
|
background: linear-gradient(135deg, #74b9ff, #0984e3); |
|
|
color: white; |
|
|
padding: 20px; |
|
|
border-radius: 10px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.environment-info h3 { |
|
|
margin-top: 0; |
|
|
} |
|
|
|
|
|
.fix-list { |
|
|
background: #d4edda; |
|
|
border: 1px solid #c3e6cb; |
|
|
border-radius: 8px; |
|
|
padding: 20px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
.fix-item { |
|
|
margin: 8px 0; |
|
|
padding: 8px 12px; |
|
|
background: white; |
|
|
border-radius: 5px; |
|
|
border-left: 4px solid #28a745; |
|
|
} |
|
|
|
|
|
.preview-container { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.preview-item { |
|
|
flex: 1; |
|
|
min-width: 300px; |
|
|
padding: 15px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
background: white; |
|
|
} |
|
|
|
|
|
.preview-item h4 { |
|
|
margin-top: 0; |
|
|
color: #495057; |
|
|
} |
|
|
|
|
|
.preview-image { |
|
|
max-width: 100%; |
|
|
border: 1px solid #eee; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.status { |
|
|
display: inline-block; |
|
|
padding: 4px 8px; |
|
|
border-radius: 12px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
margin-left: 10px; |
|
|
} |
|
|
|
|
|
.status.success { |
|
|
background: #d4edda; |
|
|
color: #155724; |
|
|
} |
|
|
|
|
|
.status.error { |
|
|
background: #f8d7da; |
|
|
color: #721c24; |
|
|
} |
|
|
|
|
|
.status.warning { |
|
|
background: #fff3cd; |
|
|
color: #856404; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>🚀 Huggingface环境矢量图形修复测试</h1> |
|
|
<p>专门针对Huggingface Spaces部署环境的矢量图形渲染优化</p> |
|
|
</div> |
|
|
|
|
|
<div class="content"> |
|
|
|
|
|
<div class="environment-info"> |
|
|
<h3>🌐 环境检测</h3> |
|
|
<div id="environment-status">正在检测环境...</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<h2>🔧 Huggingface环境修复措施</h2> |
|
|
<div class="fix-list"> |
|
|
<div class="fix-item">✅ 禁用CORS检查，使用allowTaint模式</div> |
|
|
<div class="fix-item">✅ 优化html2canvas配置，适配Docker Alpine环境</div> |
|
|
<div class="fix-item">✅ 简化SVG序列化，移除problematic属性</div> |
|
|
<div class="fix-item">✅ 使用btoa编码替代复杂的Base64实现</div> |
|
|
<div class="fix-item">✅ 添加多级回退机制，确保渲染成功</div> |
|
|
<div class="fix-item">✅ 针对Chromium浏览器优化SVG处理</div> |
|
|
<div class="fix-item">✅ 禁用foreignObject渲染，避免跨域问题</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<h2>🎨 测试SVG图形</h2> |
|
|
<div class="test-area"> |
|
|
<div class="svg-container"> |
|
|
<h3>几何图形</h3> |
|
|
<svg class="test-svg" width="150" height="100" id="svg1"> |
|
|
<rect x="10" y="10" width="60" height="40" fill="#ff6b6b" stroke="#c0392b" stroke-width="2"/> |
|
|
<circle cx="100" cy="30" r="20" fill="#3498db" stroke="#2980b9" stroke-width="2"/> |
|
|
<polygon points="80,60 100,80 120,60 110,90 90,90" fill="#2ecc71" stroke="#27ae60" stroke-width="2"/> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
<div class="svg-container"> |
|
|
<h3>路径图形</h3> |
|
|
<svg class="test-svg" width="150" height="100" id="svg2"> |
|
|
<path d="M20,50 Q40,20 60,50 T100,50" stroke="#9b59b6" stroke-width="3" fill="none"/> |
|
|
<path d="M10,80 L50,60 L90,80 L130,60" stroke="#f39c12" stroke-width="2" fill="none"/> |
|
|
<ellipse cx="75" cy="30" rx="30" ry="15" fill="#e74c3c" opacity="0.7"/> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
<div class="svg-container"> |
|
|
<h3>文本图形</h3> |
|
|
<svg class="test-svg" width="150" height="100" id="svg3"> |
|
|
<rect width="100%" height="100%" fill="#ecf0f1"/> |
|
|
<text x="75" y="30" text-anchor="middle" font-family="Arial" font-size="14" fill="#2c3e50">SVG文本</text> |
|
|
<text x="75" y="50" text-anchor="middle" font-family="Arial" font-size="12" fill="#7f8c8d">Huggingface</text> |
|
|
<text x="75" y="70" text-anchor="middle" font-family="Arial" font-size="10" fill="#95a5a6">优化测试</text> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
<div class="svg-container"> |
|
|
<h3>复杂图形</h3> |
|
|
<svg class="test-svg" width="150" height="100" id="svg4"> |
|
|
<defs> |
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" /> |
|
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" /> |
|
|
</linearGradient> |
|
|
</defs> |
|
|
<rect width="100%" height="100%" fill="url(#grad1)"/> |
|
|
<circle cx="75" cy="50" r="30" fill="white" opacity="0.8"/> |
|
|
<text x="75" y="55" text-anchor="middle" font-family="Arial" font-size="16" fill="#333">HF</text> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<h2>🧪 测试控制</h2> |
|
|
<div class="controls"> |
|
|
<button class="btn" onclick="testEnvironmentDetection()">检测环境</button> |
|
|
<button class="btn success" onclick="testSvgConversion()">测试SVG转换</button> |
|
|
<button class="btn warning" onclick="testHuggingfaceRenderer()">测试HF渲染器</button> |
|
|
<button class="btn danger" onclick="testExportFunction()">测试导出功能</button> |
|
|
<button class="btn" onclick="clearResults()">清除结果</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section"> |
|
|
<h2>📊 测试结果</h2> |
|
|
<div id="test-results" class="results"> |
|
|
<p>点击上方按钮开始测试...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="preview-container" id="preview-container" style="display: none;"> |
|
|
<div class="preview-item"> |
|
|
<h4>原始SVG</h4> |
|
|
<div id="original-svg"></div> |
|
|
</div> |
|
|
<div class="preview-item"> |
|
|
<h4>转换结果</h4> |
|
|
<div id="converted-result"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="log" id="log-area"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function isHuggingfaceEnvironment() { |
|
|
return ( |
|
|
window.location.hostname.includes('hf.space') || |
|
|
window.location.hostname.includes('huggingface.co') || |
|
|
window.location.hostname.includes('localhost') || |
|
|
window.location.hostname.includes('127.0.0.1') |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
function log(message, type = 'info') { |
|
|
const logArea = document.getElementById('log-area'); |
|
|
const timestamp = new Date().toLocaleTimeString(); |
|
|
const logEntry = `[${timestamp}] ${type.toUpperCase()}: ${message}\n`; |
|
|
logArea.textContent += logEntry; |
|
|
logArea.scrollTop = logArea.scrollHeight; |
|
|
console.log(logEntry); |
|
|
} |
|
|
|
|
|
|
|
|
function updateResults(content) { |
|
|
document.getElementById('test-results').innerHTML = content; |
|
|
} |
|
|
|
|
|
|
|
|
function clearResults() { |
|
|
document.getElementById('test-results').innerHTML = '<p>结果已清除，点击测试按钮开始新的测试...</p>'; |
|
|
document.getElementById('log-area').textContent = ''; |
|
|
document.getElementById('preview-container').style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
function testEnvironmentDetection() { |
|
|
log('开始环境检测测试'); |
|
|
|
|
|
const isHF = isHuggingfaceEnvironment(); |
|
|
const userAgent = navigator.userAgent; |
|
|
const hostname = window.location.hostname; |
|
|
|
|
|
const envInfo = { |
|
|
isHuggingface: isHF, |
|
|
hostname: hostname, |
|
|
userAgent: userAgent, |
|
|
isChromium: userAgent.includes('Chrome'), |
|
|
isDocker: userAgent.includes('HeadlessChrome'), |
|
|
viewport: `${window.innerWidth}x${window.innerHeight}` |
|
|
}; |
|
|
|
|
|
log(`环境检测结果: ${JSON.stringify(envInfo, null, 2)}`); |
|
|
|
|
|
const statusHtml = ` |
|
|
<h3>环境检测结果</h3> |
|
|
<p><strong>Huggingface环境:</strong> <span class="status ${isHF ? 'success' : 'warning'}">${isHF ? '是' : '否'}</span></p> |
|
|
<p><strong>主机名:</strong> ${hostname}</p> |
|
|
<p><strong>浏览器:</strong> ${envInfo.isChromium ? 'Chromium/Chrome' : '其他'}</p> |
|
|
<p><strong>Docker环境:</strong> ${envInfo.isDocker ? '是' : '否'}</p> |
|
|
<p><strong>视口尺寸:</strong> ${envInfo.viewport}</p> |
|
|
`; |
|
|
|
|
|
updateResults(statusHtml); |
|
|
|
|
|
|
|
|
document.getElementById('environment-status').innerHTML = ` |
|
|
<strong>当前环境:</strong> ${isHF ? 'Huggingface Spaces' : '本地开发'} |
|
|
<span class="status ${isHF ? 'success' : 'warning'}">${isHF ? 'HF环境' : '本地环境'}</span> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
function huggingfaceOptimizedSvg2Base64(element) { |
|
|
try { |
|
|
log('开始Huggingface优化的SVG转换'); |
|
|
|
|
|
const clonedElement = element.cloneNode(true); |
|
|
|
|
|
if (clonedElement.tagName.toLowerCase() === 'svg') { |
|
|
const svgElement = clonedElement; |
|
|
|
|
|
|
|
|
svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); |
|
|
|
|
|
|
|
|
const rect = element.getBoundingClientRect(); |
|
|
const width = rect.width || 100; |
|
|
const height = rect.height || 100; |
|
|
|
|
|
|
|
|
svgElement.setAttribute('width', width.toString()); |
|
|
svgElement.setAttribute('height', height.toString()); |
|
|
svgElement.setAttribute('viewBox', `0 0 ${width} ${height}`); |
|
|
|
|
|
|
|
|
const removeProblematicAttrs = (elem) => { |
|
|
const problematicAttrs = ['vector-effect', 'xmlns:xlink']; |
|
|
problematicAttrs.forEach(attr => { |
|
|
if (elem.hasAttribute && elem.hasAttribute(attr)) { |
|
|
elem.removeAttribute(attr); |
|
|
} |
|
|
}); |
|
|
|
|
|
if (elem.children) { |
|
|
Array.from(elem.children).forEach(child => { |
|
|
removeProblematicAttrs(child); |
|
|
}); |
|
|
} |
|
|
}; |
|
|
|
|
|
removeProblematicAttrs(svgElement); |
|
|
|
|
|
|
|
|
let svgString = svgElement.outerHTML; |
|
|
|
|
|
|
|
|
svgString = svgString.replace(/vector-effect="[^"]*"/g, ''); |
|
|
svgString = svgString.replace(/xmlns:xlink="[^"]*"/g, ''); |
|
|
|
|
|
|
|
|
if (!svgString.includes('xmlns="http://www.w3.org/2000/svg"')) { |
|
|
svgString = svgString.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"'); |
|
|
} |
|
|
|
|
|
log(`SVG字符串准备完成: 长度=${svgString.length}`); |
|
|
|
|
|
|
|
|
const base64 = btoa(unescape(encodeURIComponent(svgString))); |
|
|
const result = `data:image/svg+xml;base64,${base64}`; |
|
|
|
|
|
log('SVG转换成功'); |
|
|
return result; |
|
|
} |
|
|
|
|
|
throw new Error('不是SVG元素'); |
|
|
|
|
|
} catch (error) { |
|
|
log(`SVG转换失败: ${error.message}`, 'error'); |
|
|
|
|
|
|
|
|
const rect = element.getBoundingClientRect(); |
|
|
const width = rect.width || 100; |
|
|
const height = rect.height || 100; |
|
|
|
|
|
const placeholderSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"> |
|
|
<rect width="100%" height="100%" fill="#f5f5f5" stroke="#ddd" stroke-width="1"/> |
|
|
<text x="50%" y="50%" text-anchor="middle" dy="0.3em" font-family="Arial, sans-serif" font-size="14" fill="#999">SVG</text> |
|
|
</svg>`; |
|
|
|
|
|
const base64 = btoa(unescape(encodeURIComponent(placeholderSvg))); |
|
|
log('使用占位符SVG'); |
|
|
return `data:image/svg+xml;base64,${base64}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function testSvgConversion() { |
|
|
log('开始SVG转换测试'); |
|
|
|
|
|
const svgElements = document.querySelectorAll('.test-svg'); |
|
|
let successCount = 0; |
|
|
let totalCount = svgElements.length; |
|
|
const results = []; |
|
|
|
|
|
svgElements.forEach((svg, index) => { |
|
|
try { |
|
|
const startTime = performance.now(); |
|
|
const base64Result = huggingfaceOptimizedSvg2Base64(svg); |
|
|
const endTime = performance.now(); |
|
|
const duration = (endTime - startTime).toFixed(2); |
|
|
|
|
|
if (base64Result && base64Result.length > 100) { |
|
|
successCount++; |
|
|
results.push({ |
|
|
id: svg.id, |
|
|
status: 'success', |
|
|
duration: duration, |
|
|
size: base64Result.length, |
|
|
preview: base64Result.substring(0, 100) + '...' |
|
|
}); |
|
|
log(`SVG ${svg.id} 转换成功: ${duration}ms, 大小=${base64Result.length}`); |
|
|
} else { |
|
|
results.push({ |
|
|
id: svg.id, |
|
|
status: 'error', |
|
|
error: '转换结果无效' |
|
|
}); |
|
|
log(`SVG ${svg.id} 转换失败: 结果无效`, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
results.push({ |
|
|
id: svg.id, |
|
|
status: 'error', |
|
|
error: error.message |
|
|
}); |
|
|
log(`SVG ${svg.id} 转换失败: ${error.message}`, 'error'); |
|
|
} |
|
|
}); |
|
|
|
|
|
const successRate = ((successCount / totalCount) * 100).toFixed(1); |
|
|
|
|
|
let resultHtml = ` |
|
|
<h3>SVG转换测试结果</h3> |
|
|
<p><strong>成功率:</strong> ${successRate}% (${successCount}/${totalCount})</p> |
|
|
<div style="margin-top: 15px;"> |
|
|
`; |
|
|
|
|
|
results.forEach(result => { |
|
|
const statusClass = result.status === 'success' ? 'success' : 'error'; |
|
|
resultHtml += ` |
|
|
<div style="margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px;"> |
|
|
<strong>${result.id}:</strong> |
|
|
<span class="status ${statusClass}">${result.status}</span> |
|
|
${result.duration ? `<br>耗时: ${result.duration}ms` : ''} |
|
|
${result.size ? `<br>大小: ${result.size} 字符` : ''} |
|
|
${result.error ? `<br>错误: ${result.error}` : ''} |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
resultHtml += '</div>'; |
|
|
updateResults(resultHtml); |
|
|
|
|
|
log(`SVG转换测试完成: 成功率=${successRate}%`); |
|
|
} |
|
|
|
|
|
|
|
|
function testHuggingfaceRenderer() { |
|
|
log('开始Huggingface渲染器测试'); |
|
|
|
|
|
const isHF = isHuggingfaceEnvironment(); |
|
|
|
|
|
|
|
|
const config = { |
|
|
useCORS: false, |
|
|
allowTaint: true, |
|
|
foreignObjectRendering: false, |
|
|
scale: isHF ? 1 : 2, |
|
|
logging: false, |
|
|
timeout: 30000 |
|
|
}; |
|
|
|
|
|
log(`渲染配置: ${JSON.stringify(config, null, 2)}`); |
|
|
|
|
|
|
|
|
const svgElements = document.querySelectorAll('.test-svg'); |
|
|
const testResults = []; |
|
|
|
|
|
svgElements.forEach((svg, index) => { |
|
|
try { |
|
|
const rect = svg.getBoundingClientRect(); |
|
|
const hasValidDimensions = rect.width > 0 && rect.height > 0; |
|
|
|
|
|
testResults.push({ |
|
|
id: svg.id, |
|
|
dimensions: `${rect.width}x${rect.height}`, |
|
|
hasValidDimensions, |
|
|
childCount: svg.children.length, |
|
|
status: hasValidDimensions ? 'ready' : 'warning' |
|
|
}); |
|
|
|
|
|
log(`${svg.id}: 尺寸=${rect.width}x${rect.height}, 子元素=${svg.children.length}`); |
|
|
} catch (error) { |
|
|
testResults.push({ |
|
|
id: svg.id, |
|
|
status: 'error', |
|
|
error: error.message |
|
|
}); |
|
|
log(`${svg.id}: 检查失败 - ${error.message}`, 'error'); |
|
|
} |
|
|
}); |
|
|
|
|
|
let resultHtml = ` |
|
|
<h3>Huggingface渲染器测试</h3> |
|
|
<p><strong>环境:</strong> ${isHF ? 'Huggingface Spaces' : '本地环境'}</p> |
|
|
<p><strong>配置:</strong> CORS=${config.useCORS}, AllowTaint=${config.allowTaint}, Scale=${config.scale}</p> |
|
|
<div style="margin-top: 15px;"> |
|
|
`; |
|
|
|
|
|
testResults.forEach(result => { |
|
|
const statusClass = result.status === 'ready' ? 'success' : |
|
|
result.status === 'warning' ? 'warning' : 'error'; |
|
|
resultHtml += ` |
|
|
<div style="margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px;"> |
|
|
<strong>${result.id}:</strong> |
|
|
<span class="status ${statusClass}">${result.status}</span> |
|
|
${result.dimensions ? `<br>尺寸: ${result.dimensions}` : ''} |
|
|
${result.childCount !== undefined ? `<br>子元素: ${result.childCount}` : ''} |
|
|
${result.error ? `<br>错误: ${result.error}` : ''} |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
resultHtml += '</div>'; |
|
|
updateResults(resultHtml); |
|
|
|
|
|
log('Huggingface渲染器测试完成'); |
|
|
} |
|
|
|
|
|
|
|
|
function testExportFunction() { |
|
|
log('开始导出功能测试'); |
|
|
|
|
|
const testSvg = document.getElementById('svg1'); |
|
|
if (!testSvg) { |
|
|
log('找不到测试SVG元素', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
try { |
|
|
|
|
|
document.getElementById('preview-container').style.display = 'flex'; |
|
|
|
|
|
|
|
|
const originalContainer = document.getElementById('original-svg'); |
|
|
const svgClone = testSvg.cloneNode(true); |
|
|
originalContainer.innerHTML = ''; |
|
|
originalContainer.appendChild(svgClone); |
|
|
|
|
|
|
|
|
const base64Result = huggingfaceOptimizedSvg2Base64(testSvg); |
|
|
|
|
|
|
|
|
const resultContainer = document.getElementById('converted-result'); |
|
|
const img = document.createElement('img'); |
|
|
img.src = base64Result; |
|
|
img.className = 'preview-image'; |
|
|
img.onload = () => { |
|
|
log('转换结果图片加载成功'); |
|
|
}; |
|
|
img.onerror = () => { |
|
|
log('转换结果图片加载失败', 'error'); |
|
|
}; |
|
|
|
|
|
resultContainer.innerHTML = ''; |
|
|
resultContainer.appendChild(img); |
|
|
|
|
|
const resultHtml = ` |
|
|
<h3>导出功能测试结果</h3> |
|
|
<p><strong>状态:</strong> <span class="status success">成功</span></p> |
|
|
<p><strong>Base64长度:</strong> ${base64Result.length} 字符</p> |
|
|
<p><strong>数据类型:</strong> ${base64Result.substring(0, 30)}...</p> |
|
|
<p>请查看下方预览区域对比原始SVG和转换结果。</p> |
|
|
`; |
|
|
|
|
|
updateResults(resultHtml); |
|
|
log('导出功能测试完成'); |
|
|
|
|
|
} catch (error) { |
|
|
const resultHtml = ` |
|
|
<h3>导出功能测试结果</h3> |
|
|
<p><strong>状态:</strong> <span class="status error">失败</span></p> |
|
|
<p><strong>错误:</strong> ${error.message}</p> |
|
|
`; |
|
|
|
|
|
updateResults(resultHtml); |
|
|
log(`导出功能测试失败: ${error.message}`, 'error'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
log('页面加载完成，开始初始化'); |
|
|
testEnvironmentDetection(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
