|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>SnowflakeCore vs GPT-2: Benchmark Results</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> |
|
|
<style> |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #1a1a2e; |
|
|
min-height: 100vh; |
|
|
color: #e0e0e0; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
text-align: center; |
|
|
margin-bottom: 40px; |
|
|
background-color: #2a2a4a; |
|
|
padding: 30px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 2.5em; |
|
|
margin-bottom: 10px; |
|
|
color: #8be9fd; |
|
|
} |
|
|
|
|
|
.header p { |
|
|
font-size: 1.1em; |
|
|
color: #b3b3b3; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.highlight { |
|
|
display: inline-block; |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
padding: 8px 18px; |
|
|
border-radius: 5px; |
|
|
font-weight: bold; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
|
|
|
.charts-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); |
|
|
gap: 30px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
|
|
|
.chart-container { |
|
|
background-color: #2a2a4a; |
|
|
padding: 25px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
transition: none; |
|
|
} |
|
|
|
|
|
.chart-container h3 { |
|
|
margin-bottom: 20px; |
|
|
font-size: 1.2em; |
|
|
text-align: center; |
|
|
color: #e0e0e0; |
|
|
} |
|
|
|
|
|
.chart-wrapper { |
|
|
position: relative; |
|
|
height: 350px; |
|
|
} |
|
|
|
|
|
|
|
|
.summary { |
|
|
background-color: #2a2a4a; |
|
|
padding: 30px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.summary h2 { |
|
|
margin-bottom: 20px; |
|
|
color: #e0e0e0; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
|
|
|
.metrics-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
|
|
gap: 20px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
|
|
|
.metric-card { |
|
|
background-color: #3a3a5a; |
|
|
color: #e0e0e0; |
|
|
padding: 20px; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
border: 1px solid #4a4a6a; |
|
|
} |
|
|
|
|
|
.metric-card.winner { |
|
|
background-color: #388e3c; |
|
|
border-color: #4CAF50; |
|
|
} |
|
|
|
|
|
.metric-card h4 { |
|
|
margin-bottom: 8px; |
|
|
font-size: 1em; |
|
|
} |
|
|
|
|
|
.metric-card p { |
|
|
font-size: 0.85em; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
|
|
|
.model-specs { |
|
|
background-color: #2a2a4a; |
|
|
padding: 25px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
margin-top: 30px; |
|
|
} |
|
|
|
|
|
.model-specs h2 { |
|
|
text-align: center; |
|
|
color: #e0e0e0; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.specs-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.spec-item { |
|
|
text-align: center; |
|
|
padding: 15px; |
|
|
border: 1px solid #4a4a6a; |
|
|
border-radius: 8px; |
|
|
background-color: #3a3a5a; |
|
|
} |
|
|
|
|
|
.spec-item h4 { |
|
|
color: #e0e0e0; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.spec-item p { |
|
|
font-size: 0.9em; |
|
|
color: #b3b3b3; |
|
|
} |
|
|
|
|
|
.spec-item.snowflake { |
|
|
border-color: #4CAF50; |
|
|
background-color: #3a4a3a; |
|
|
} |
|
|
|
|
|
.spec-item.gpt2 { |
|
|
border-color: #d32f2f; |
|
|
background-color: #4a3a3a; |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
text-align: center; |
|
|
margin-top: 40px; |
|
|
padding: 20px; |
|
|
background-color: #2a2a4a; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
color: #e0e0e0; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.charts-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.header h1 { |
|
|
font-size: 2em; |
|
|
} |
|
|
|
|
|
.chart-wrapper { |
|
|
height: 300px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="header"> |
|
|
<h1>SnowflakeCore vs GPT-2</h1> |
|
|
<p>Comprehensive Benchmark Comparison</p> |
|
|
<div class="highlight">SnowflakeCore Demonstrates Strong Performance in Text Quality Metrics</div> |
|
|
</div> |
|
|
|
|
|
<div class="charts-grid"> |
|
|
<div class="chart-container"> |
|
|
<h3>N-gram Diversity Comparison</h3> |
|
|
<div class="chart-wrapper"> |
|
|
<canvas id="ngramChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<h3>Text Generation Speed</h3> |
|
|
<div class="chart-wrapper"> |
|
|
<canvas id="speedChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<h3>N-gram Repetition Rate</h3> |
|
|
<div class="chart-wrapper"> |
|
|
<canvas id="repetitionChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chart-container"> |
|
|
<h3>Vocabulary Diversity</h3> |
|
|
<div class="chart-wrapper"> |
|
|
<canvas id="vocabChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="summary"> |
|
|
<h2>Key Results Summary</h2> |
|
|
<div class="metrics-grid"> |
|
|
<div class="metric-card winner"> |
|
|
<h4>Improved N-gram Diversity</h4> |
|
|
<p>SnowflakeCore models show higher distinct bigram and trigram ratios.</p> |
|
|
</div> |
|
|
<div class="metric-card winner"> |
|
|
<h4>Reduced Repetition</h4> |
|
|
<p>Significantly lower n-gram repetition rates, especially for trigrams.</p> |
|
|
</div> |
|
|
<div class="metric-card winner"> |
|
|
<h4>Enhanced Vocabulary Usage</h4> |
|
|
<p>GT-Tiny2 achieves the highest vocabulary diversity ratio.</p> |
|
|
</div> |
|
|
<div class="metric-card"> |
|
|
<h4>Speed Comparison</h4> |
|
|
<p>GPT-2 is faster at ~47 tok/sec compared to SnowflakeCore's ~22-23 tok/sec.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="model-specs"> |
|
|
<h2>Model Specifications</h2> |
|
|
<div class="specs-grid"> |
|
|
<div class="spec-item snowflake"> |
|
|
<h4>SnowflakeCore-G1-Tiny</h4> |
|
|
<p><strong>Parameters:</strong> 355,871,744</p> |
|
|
<p><strong>Size:</strong> 1357.54 MB</p> |
|
|
<p><strong>Speed:</strong> 22.12 tok/sec</p> |
|
|
</div> |
|
|
<div class="spec-item snowflake"> |
|
|
<h4>SnowflakeCore-G1-Tiny2</h4> |
|
|
<p><strong>Parameters:</strong> 355,871,744</p> |
|
|
<p><strong>Size:</strong> 1357.54 MB</p> |
|
|
<p><strong>Speed:</strong> 22.13 tok/sec</p> |
|
|
</div> |
|
|
<div class="spec-item gpt2"> |
|
|
<h4>GPT-2</h4> |
|
|
<p><strong>Parameters:</strong> 124,439,808</p> |
|
|
<p><strong>Size:</strong> 474.70 MB</p> |
|
|
<p><strong>Speed:</strong> 47.73 tok/sec</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer"> |
|
|
<p><strong>Conclusion:</strong> SnowflakeCore demonstrates superior text quality metrics with comparable parameter efficiency, indicating architectural advancements over GPT-2 in these specific areas.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const ngramCtx = document.getElementById('ngramChart').getContext('2d'); |
|
|
new Chart(ngramCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['GT-Tiny', 'GT-Tiny2', 'GPT-2'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Bigram', |
|
|
data: [0.6111, 0.7408, 0.6408], |
|
|
backgroundColor: 'rgba(139, 233, 253, 0.7)', |
|
|
borderColor: 'rgba(139, 233, 253, 1)', |
|
|
borderWidth: 1 |
|
|
}, |
|
|
{ |
|
|
label: 'Trigram', |
|
|
data: [0.7421, 0.8834, 0.7946], |
|
|
backgroundColor: 'rgba(80, 250, 123, 0.7)', |
|
|
borderColor: 'rgba(80, 250, 123, 1)', |
|
|
borderWidth: 1 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
labels: { |
|
|
color: '#e0e0e0' |
|
|
} |
|
|
}, |
|
|
tooltip: { |
|
|
backgroundColor: 'rgba(0,0,0,0.8)', |
|
|
titleColor: '#e0e0e0', |
|
|
bodyColor: '#e0e0e0' |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
max: 1, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Distinct N-gram Ratio', |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const speedCtx = document.getElementById('speedChart').getContext('2d'); |
|
|
new Chart(speedCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['GT-Tiny', 'GT-Tiny2', 'GPT-2'], |
|
|
datasets: [{ |
|
|
label: 'Tokens per Second', |
|
|
data: [22.12, 22.13, 47.73], |
|
|
backgroundColor: 'rgba(139, 233, 253, 0.7)', |
|
|
borderColor: 'rgba(139, 233, 253, 1)', |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
backgroundColor: 'rgba(0,0,0,0.8)', |
|
|
titleColor: '#e0e0e0', |
|
|
bodyColor: '#e0e0e0' |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Average Tokens per Second', |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const repetitionCtx = document.getElementById('repetitionChart').getContext('2d'); |
|
|
new Chart(repetitionCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['GT-Tiny', 'GT-Tiny2', 'GPT-2'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Bigram', |
|
|
data: [0.3889, 0.2592, 0.3592], |
|
|
backgroundColor: 'rgba(189, 147, 249, 0.7)', |
|
|
borderColor: 'rgba(189, 147, 249, 1)', |
|
|
borderWidth: 1 |
|
|
}, |
|
|
{ |
|
|
label: 'Trigram', |
|
|
data: [0.2579, 0.1166, 0.2054], |
|
|
backgroundColor: 'rgba(255, 85, 85, 0.7)', |
|
|
borderColor: 'rgba(255, 85, 85, 1)', |
|
|
borderWidth: 1 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
labels: { |
|
|
color: '#e0e0e0' |
|
|
} |
|
|
}, |
|
|
tooltip: { |
|
|
backgroundColor: 'rgba(0,0,0,0.8)', |
|
|
titleColor: '#e0e0e0', |
|
|
bodyColor: '#e0e0e0' |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
max: 0.45, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Repetition Rate', |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const vocabCtx = document.getElementById('vocabChart').getContext('2d'); |
|
|
new Chart(vocabCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['GT-Tiny', 'GT-Tiny2', 'GPT-2'], |
|
|
datasets: [{ |
|
|
label: 'Vocabulary Diversity Ratio', |
|
|
data: [0.2780, 0.3440, 0.2590], |
|
|
backgroundColor: 'rgba(80, 250, 123, 0.7)', |
|
|
borderColor: 'rgba(80, 250, 123, 1)', |
|
|
borderWidth: 1 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
backgroundColor: 'rgba(0,0,0,0.8)', |
|
|
titleColor: '#e0e0e0', |
|
|
bodyColor: '#e0e0e0' |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
}, |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
max: 0.4, |
|
|
title: { |
|
|
display: true, |
|
|
text: 'Vocabulary Diversity Ratio', |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
ticks: { |
|
|
color: '#e0e0e0' |
|
|
}, |
|
|
grid: { |
|
|
color: 'rgba(255, 255, 255, 0.1)' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
