Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Model Benchmark: First Grade Math</title> | |
| <style> | |
| :root { | |
| --primary: #4a6fa5; | |
| --secondary: #6b8cbe; | |
| --accent: #ff6b6b; | |
| --background: #f5f7fa; | |
| --card-bg: #ffffff; | |
| --text-dark: #2d3748; | |
| --text-light: #4a5568; | |
| --success: #48bb78; | |
| --error: #e53e3e; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--background); | |
| margin: 0; | |
| padding: 0; | |
| color: var(--text-dark); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| padding: 30px 0; | |
| border-radius: 12px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: 2.4rem; | |
| font-weight: 700; | |
| } | |
| h2 { | |
| color: var(--primary); | |
| font-size: 1.8rem; | |
| margin-top: 40px; | |
| margin-bottom: 20px; | |
| position: relative; | |
| padding-bottom: 10px; | |
| } | |
| h2::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 60px; | |
| height: 4px; | |
| background: var(--accent); | |
| border-radius: 2px; | |
| } | |
| .chart-container { | |
| background: var(--card-bg); | |
| border-radius: 12px; | |
| padding: 30px; | |
| box-shadow: 0 8px 20px rgba(0,0,0,0.06); | |
| margin: 30px 0; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08); | |
| } | |
| .model-info { | |
| background: var(--card-bg); | |
| border-radius: 12px; | |
| padding: 30px; | |
| box-shadow: 0 8px 20px rgba(0,0,0,0.06); | |
| } | |
| .model-cards { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .model-card { | |
| background: var(--card-bg); | |
| border-radius: 10px; | |
| padding: 20px; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.05); | |
| border-left: 5px solid var(--primary); | |
| width: calc(33% - 20px); | |
| min-width: 250px; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 15px rgba(0,0,0,0.1); | |
| } | |
| .model-name { | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .stats { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 15px; | |
| } | |
| .stat { | |
| text-align: center; | |
| flex: 1; | |
| } | |
| .stat-value { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .correct { | |
| color: var(--success); | |
| } | |
| .incorrect { | |
| color: var(--error); | |
| } | |
| .stat-label { | |
| font-size: 0.85rem; | |
| color: var(--text-light); | |
| } | |
| .accuracy-bar { | |
| height: 8px; | |
| background: #f0f0f0; | |
| border-radius: 4px; | |
| margin-top: 10px; | |
| overflow: hidden; | |
| } | |
| .accuracy-fill { | |
| height: 100%; | |
| background: var(--primary); | |
| border-radius: 4px; | |
| } | |
| footer { | |
| margin-top: 40px; | |
| text-align: center; | |
| color: var(--text-light); | |
| font-size: 0.9rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Model Benchmark: First Grade Math</h1> | |
| <p>Performance comparison across 1,000 questions per model</p> | |
| </header> | |
| <div class="chart-container"> | |
| <h2>Performance Overview</h2> | |
| <img src="download.png" alt="Model Benchmark Chart"> | |
| </div> | |
| <div class="model-info"> | |
| <h2>Models Benchmarked</h2> | |
| <div class="model-cards"> | |
| <div class="model-card"> | |
| <div class="model-name">FlameF0X/MathGPT2</div> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <div class="stat-value correct">763</div> | |
| <div class="stat-label">Correct</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value incorrect">237</div> | |
| <div class="stat-label">Incorrect</div> | |
| </div> | |
| </div> | |
| <div class="accuracy-bar"> | |
| <div class="accuracy-fill" style="width: 76.3%"></div> | |
| </div> | |
| </div> | |
| <div class="model-card"> | |
| <div class="model-name">FlameF0X/Muffin-2.9b-1C25</div> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <div class="stat-value correct">9</div> | |
| <div class="stat-label">Correct</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value incorrect">991</div> | |
| <div class="stat-label">Incorrect</div> | |
| </div> | |
| </div> | |
| <div class="accuracy-bar"> | |
| <div class="accuracy-fill" style="width: 0.9%"></div> | |
| </div> | |
| </div> | |
| <div class="model-card"> | |
| <div class="model-name">FlameF0X/MuffinFace-2</div> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <div class="stat-value correct">8</div> | |
| <div class="stat-label">Correct</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-value incorrect">992</div> | |
| <div class="stat-label">Incorrect</div> | |
| </div> | |
| </div> | |
| <div class="accuracy-bar"> | |
| <div class="accuracy-fill" style="width: 0.8%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Benchmark results as of April 2025</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |