Simple-Math-Benchmark / index.html
FlameF0X's picture
Update index.html
4ac51bd verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Math Benchmark</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: #333;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
h1, h2, h3, h4 {
color: #2d3748;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
color: #1a365d;
border-bottom: 3px solid #4299e1;
padding-bottom: 0.5rem;
}
h2 {
font-size: 1.8rem;
margin-top: 2rem;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.5rem;
}
.container {
background-color: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.model-card {
background-color: #f0f5ff;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 4px solid #4299e1;
}
.model-info {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.model-name {
font-weight: bold;
font-size: 1.2rem;
color: #2b6cb0;
}
.model-params {
background-color: #ebf8ff;
padding: 3px 8px;
border-radius: 12px;
font-size: 0.9rem;
color: #2c5282;
}
.performance-highlight {
background-color: #e6fffa;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
border-left: 3px solid #38b2ac;
}
.chart-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin: 30px 0;
}
.chart {
flex: 1;
min-width: 300px;
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.chart img {
width: 100%;
height: auto;
border-radius: 4px;
cursor: zoom-in;
transition: transform 0.3s ease;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
max-width: 90%;
max-height: 90%;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
}
.chart-caption {
text-align: center;
margin-top: 10px;
font-style: italic;
color: #718096;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
th {
background-color: #edf2f7;
font-weight: bold;
}
tr:hover {
background-color: #f7fafc;
}
.highlight {
background-color: #fffbeb;
}
.footer {
margin-top: 40px;
text-align: center;
color: #718096;
font-size: 0.9rem;
}
.key-finding {
background-color: #ebf8ff;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
border-left: 4px solid #3182ce;
}
.key-finding h3 {
margin-top: 0;
color: #2b6cb0;
}
</style>
</head>
<body>
<div class="container">
<h1>Simple Math Benchmark</h1>
<div class="key-finding">
<h3>Key Insight</h3>
<p>The data shows that some small language models (under 0.5B parameters) can demonstrate significant mathematical abilities, challenging the assumption that large parameter counts are required for basic math reasoning. Models tested using this <a href="https://github.com/FlameF0X/Simple-Math-Benchmark">link</a>.</p>
</div>
<h2>Model Overview</h2>
<p>This analysis compares the performance of various language models on mathematical problems, with a focus on compact models:</p>
<div class="model-card">
<div class="model-info">
<span class="model-name">FlameF0X/MathGPT2</span>
<span class="model-params">81.9M parameters</span>
</div>
<p>The highest performer among tested models, demonstrating remarkable mathematical abilities despite its tiny parameter count. Shows particular strength in addition operations with 58.3% accuracy and subtraction with 57.1% accuracy.</p>
<div class="performance-highlight">
<strong>Overall math accuracy:</strong> 42.0% on 100 test questions
</div>
</div>
<div class="model-card">
<div class="model-info">
<span class="model-name">aquif-moe-800m</span>
<span class="model-params">800M parameters</span>
</div>
<p>The second best performer, scoring 39.0% overall accuracy. Shows exceptional performance in subtraction (76.2%) and solid performance in addition (54.5%).</p>
<div class="performance-highlight">
<strong>Operation strength:</strong> 76.2% accuracy on subtraction
</div>
</div>
<div class="model-card">
<div class="model-info">
<span class="model-name">BrainrotLM-Assistant-362M</span>
<span class="model-params">362M parameters</span>
</div>
<p>Shows moderate mathematical abilities with 12.0% overall accuracy. Demonstrates particular strength in division operations (38.9%) and subtraction (22.7%).</p>
<div class="performance-highlight">
<strong>Operation strength:</strong> 38.9% accuracy on division
</div>
</div>
<h2>Performance Analysis</h2>
<div class="chart-container">
<div class="chart">
<img src="acc.png" alt="Chart showing model accuracy by operation type">
<div class="chart-caption">Figure 1: Accuracy by Mathematical Operation (%)</div>
</div>
<div class="chart">
<img src="numb.png" alt="Chart showing model performance on math problems">
<div class="chart-caption">Figure 2: Correct vs Incorrect Answers (100 questions each)</div>
</div>
</div>
<!-- Modal for image zoom -->
<div id="imageModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="zoomedImage">
</div>
<h2>Detailed Accuracy Results</h2>
<table>
<thead>
<tr>
<th>Model</th>
<th>Addition (+)</th>
<th>Subtraction (-)</th>
<th>Multiplication (*)</th>
<th>Division (/)</th>
<th>Exponentiation (**)</th>
<th>Overall</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>MathGPT2 (81.9M)</td>
<td>58.3%</td>
<td>57.1%</td>
<td>45.0%</td>
<td>24.1%</td>
<td>0.0%</td>
<td>42.0%</td>
</tr>
<tr>
<td>aquif-moe-800m (800M)</td>
<td>54.5%</td>
<td>76.2%</td>
<td>21.9%</td>
<td>18.2%</td>
<td>0.0%</td>
<td>39.0%</td>
</tr>
<tr>
<td>BrainrotLM-Assistant-362M (362M)</td>
<td>0.0%</td>
<td>22.7%</td>
<td>0.0%</td>
<td>38.9%</td>
<td>0.0%</td>
<td>12.0%</td>
</tr>
<tr>
<td>gonzalez-v1</td>
<td>5.3%</td>
<td>8.3%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>3.0%</td>
</tr>
<tr>
<td>VLM-1 (124M)</td>
<td>3.4%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>4.3%</td>
<td>0.0%</td>
<td>2.0%</td>
</tr>
<tr>
<td>gpt2</td>
<td>0.0%</td>
<td>7.4%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>2.0%</td>
</tr>
<tr>
<td>Snowflake-G0-Release</td>
<td>0.0%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>0.0%</td>
<td>0.0%</td>
</tr>
</tbody>
</table>
<h2>Key Observations</h2>
<ul>
<li><strong>Size doesn't always matter:</strong> MathGPT2 with only 81.9M parameters demonstrates impressive mathematical abilities, achieving 42.0% overall accuracy.</li>
<li><strong>Operation specialization:</strong> MathGPT2 excels at addition (58.3%) and subtraction (57.1%), while aquif-moe-800m shows exceptional strength in subtraction operations (76.2%).</li>
<li><strong>Architectural importance:</strong> The results suggest that architecture design and training approach may be more important than raw parameter count for specialized tasks.</li>
<li><strong>Zero performance:</strong> One of the tested models (Snowflake-G0-Release) showed no measurable mathematical ability on this test set.</li>
<li><strong>Division specialists:</strong> BrainrotLM-Assistant-362M shows specific strength in division operations (38.9%) despite lower performance in other areas.</li>
</ul>
<div class="key-finding">
<h3>Research Implications</h3>
<p>These results challenge conventional wisdom about language model scaling laws for mathematical reasoning capabilities. They suggest that highly specialized, compact models might offer a more efficient approach for specific reasoning tasks compared to general-purpose large models.</p>
</div>
<h2>Conclusion</h2>
<p>This analysis demonstrates that extremely small language models can exhibit significant mathematical reasoning abilities, with models as small as 81.9M parameters showing the ability to solve basic arithmetic problems. The standout performer, MathGPT2 with only 81.9M parameters, achieved an impressive 42.0% accuracy on a diverse set of 100 mathematical questions.</p>
<p>These findings suggest that efficient architectural design and specialized training approaches may be more important than raw parameter count when optimizing for specific reasoning capabilities. This could have significant implications for resource-constrained applications where deploying massive models is impractical.</p>
<p>Future research directions could include investigating what specific architectural choices enable these compact models to perform mathematical operations, and how these insights might be applied to develop more efficient specialized models for other reasoning tasks.</p>
<div class="footer">
<p>Data analysis based on benchmark results for MathGPT2 (81.9M), aquif-moe-800m (800M), BrainrotLM-Assistant-362M (362M), and other models</p>
<p>© 2025 • Created for educational purposes</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal
var zoomableImages = document.querySelectorAll(".chart img");
var modalImg = document.getElementById("zoomedImage");
// Add click event to all zoomable images
zoomableImages.forEach(function(image) {
image.onclick = function() {
modal.style.display = "flex";
modalImg.src = this.src;
};
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};
// Close the modal when clicking outside the image
modal.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
};
</script>
</body>
</html>