Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pelican Bicycle SVG Benchmark</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background-color: #fff; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 5px; | |
| color: #000; | |
| font-size: 1.8em; | |
| font-weight: 500; | |
| } | |
| .subtitle { | |
| text-align: center; | |
| color: #666; | |
| margin-bottom: 30px; | |
| font-size: 0.9em; | |
| } | |
| .models-container { | |
| margin-bottom: 40px; | |
| } | |
| .model-group { | |
| margin-bottom: 30px; | |
| background: white; | |
| border: 1px solid #eee; | |
| padding: 20px; | |
| } | |
| .model-group-header { | |
| font-weight: bold;; | |
| font-size: 1.1em; | |
| color: #333; | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid #f0f0f0; | |
| } | |
| .temperature-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| } | |
| @media (max-width: 768px) { | |
| .temperature-grid { | |
| grid-template-columns: 1fr; | |
| gap: 10px; | |
| } | |
| } | |
| .temp-card { | |
| border: 1px solid #eee; | |
| overflow: hidden; | |
| } | |
| .temp-header { | |
| padding: 8px; | |
| background: #fafafa; | |
| border-bottom: 1px solid #f0f0f0; | |
| font-size: 0.85em; | |
| text-align: center; | |
| color: #666; | |
| } | |
| .svg-preview { | |
| background: white; | |
| padding: 20px; | |
| height: 300px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .svg-preview svg { | |
| max-width: 100%; | |
| max-height: 180px; | |
| width: auto; | |
| height: auto; | |
| } | |
| .no-svg { | |
| color: #95a5a6; | |
| font-style: italic; | |
| text-align: center; | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: 50px; | |
| font-size: 1.2em; | |
| color: #7f8c8d; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 10px; | |
| } | |
| h1 { | |
| font-size: 1.5em; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| font-size: 0.8em; | |
| margin-bottom: 20px; | |
| } | |
| .model-group { | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .model-group-header { | |
| font-size: 1em; | |
| margin-bottom: 10px; | |
| padding-bottom: 8px; | |
| } | |
| .svg-preview { | |
| height: 250px; | |
| padding: 15px; | |
| } | |
| .temp-header { | |
| font-size: 0.8em; | |
| padding: 6px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Pelican Bicycle SVG Benchmark</h1> | |
| <p class="subtitle">Testing AI models' ability to create SVG art of a pelican riding a bicycle<br> | |
| Benchmark created by <a href="https://simonwillison.net/" target="_blank" style="color: #666;">Simon Willison</a><br> | |
| Inference done with <a href="https://router.huggingface.co/v1/models" target="_blank" style="color: #666;">https://router.huggingface.co/v1/models</a></p> | |
| <div class="models-container" id="modelsContainer"> | |
| <div class="loading">Loading model results...</div> | |
| </div> | |
| </div> | |
| <script> | |
| let allResults = []; | |
| async function loadResults() { | |
| try { | |
| const response = await fetch('benchmark_results.json'); | |
| allResults = await response.json(); | |
| displayModelGroups(allResults); | |
| } catch (error) { | |
| console.error('Error loading results:', error); | |
| document.getElementById('modelsContainer').innerHTML = | |
| '<div style="text-align: center; color: #999;">Error loading results</div>'; | |
| } | |
| } | |
| function displayModelGroups(results) { | |
| // Group results by model | |
| const modelGroups = {}; | |
| results.forEach(result => { | |
| if (!modelGroups[result.model_id]) { | |
| modelGroups[result.model_id] = {}; | |
| } | |
| modelGroups[result.model_id][result.temperature] = result; | |
| }); | |
| // Create HTML for each model group | |
| const modelsHtml = Object.entries(modelGroups).map(([modelId, temps]) => { | |
| // Check if at least one temperature has a successful result | |
| const hasSuccess = Object.values(temps).some(t => t.success); | |
| if (!hasSuccess) return ''; // Skip models with no successful results | |
| const temperatureCards = [0, 0.5, 1].map(temp => { | |
| const result = temps[temp]; | |
| if (!result || !result.success) { | |
| return ` | |
| <div class="temp-card"> | |
| <div class="temp-header">Temperature ${temp}</div> | |
| <div class="svg-preview"> | |
| <div class="no-svg">Failed</div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| return ` | |
| <div class="temp-card"> | |
| <div class="temp-header">Temperature ${temp}</div> | |
| <div class="svg-preview">${result.svg_content}</div> | |
| </div> | |
| `; | |
| }).join(''); | |
| return ` | |
| <div class="model-group"> | |
| <div class="model-group-header">${modelId}</div> | |
| <div class="temperature-grid"> | |
| ${temperatureCards} | |
| </div> | |
| </div> | |
| `; | |
| }).filter(html => html !== '').join(''); | |
| document.getElementById('modelsContainer').innerHTML = modelsHtml || | |
| '<div style="text-align: center; color: #999;">No successful results to display</div>'; | |
| } | |
| // Load results when page loads | |
| loadResults(); | |
| </script> | |
| </body> | |
| </html> |