Hugging Face's logo

Spaces:
FlameF0X
/
Benchmark
Running

App Files Community
Benchmark / index.html
FlameF0X's picture
FlameF0X
Update index.html
a90aa73 verified
raw
history blame contribute delete
32.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnowflakeCore Model Benchmark Dashboard</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts - Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
/* Custom styles for pseudo-bar charts to ensure responsiveness and visual appeal */
.bar-container {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.bar-label {
width: 120px; /* Fixed width for labels */
flex-shrink: 0;
font-size: 0.875rem; /* text-sm */
color: #4B5563; /* text-gray-700 */
}
.bar-wrapper {
flex-grow: 1;
height: 1.5rem; /* h-6 */
background-color: #E5E7EB; /* bg-gray-200 */
border-radius: 0.25rem; /* rounded */
overflow: hidden;
position: relative;
}
.bar {
height: 100%;
border-radius: 0.25rem; /* rounded */
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 0.5rem;
color: white;
font-weight: 500;
font-size: 0.75rem; /* text-xs */
transition: width 0.5s ease-in-out; /* Smooth transition for width changes */
}
.bar-value {
margin-left: 0.5rem;
font-weight: 600;
font-size: 0.875rem; /* text-sm */
color: #1F2937; /* text-gray-800 */
min-width: 50px; /* Ensure space for value */
text-align: right;
}
.line-chart-table th, .line-chart-table td {
padding: 0.75rem; /* p-3 */
border-bottom: 1px solid #E5E7EB; /* border-gray-200 */
text-align: left;
}
.line-chart-table th {
background-color: #F9FAFB; /* bg-gray-50 */
font-weight: 600;
color: #374151; /* text-gray-700 */
}
.line-chart-table tr:last-child td {
border-bottom: none;
}
</style>
</head>
<body class="bg-gray-50">
<div class="w-full min-h-screen p-6">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 mb-2">
SnowflakeCore Model Benchmark Dashboard
</h1>
<p class="text-gray-600">
Comprehensive performance analysis of SnowflakeCore-G1-Tiny models across multiple benchmarks
</p>
</div>
<!-- Navigation Tabs -->
<div class="flex gap-2 mb-6" id="tab-navigation">
<button id="tab-overview"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-blue-600 text-white">
Overview
</button>
<button id="tab-textgen"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200">
Text Generation
</button>
<button id="tab-memory"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200">
Memory Usage
</button>
<button id="tab-comparison"
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200">
Model Comparison
</button>
</div>
<!-- Overview Tab Content -->
<div id="overview-content" class="space-y-6">
<!-- Key Metrics Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white p-6 rounded-lg shadow-sm border">
<div class="text-2xl font-bold text-blue-600">355.87M</div>
<div class="text-gray-600">Total Parameters</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border">
<div class="text-2xl font-bold text-green-600">1.36 GB</div>
<div class="text-gray-600">Model Size</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border">
<div class="text-2xl font-bold text-purple-600">65.96</div>
<div class="text-gray-600">Avg Speed (tokens/s)</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border">
<div class="text-2xl font-bold text-orange-600">1.05 GB</div>
<div class="text-gray-600">Peak Memory</div>
</div>
</div>
<!-- Performance Radar Chart (represented as a detailed list/table) -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Performance Radar</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Metric
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Base Model
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Instruct Model
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<!-- Data will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
<!-- Quick Comparison (Bar Chart - represented visually) -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Model Comparison Overview</h3>
<div id="overview-comparison-chart" class="space-y-4">
<!-- Bars will be populated by JavaScript -->
</div>
</div>
</div>
<!-- Text Generation Tab Content -->
<div id="textgen-content" class="hidden space-y-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Generation Speed -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Generation Speed</h3>
<div id="textgen-speed-chart" class="space-y-4">
<!-- Bars will be populated by JavaScript -->
</div>
<div class="mt-4 text-sm text-gray-600">
<p>Base model generates text 7% faster than the instruction-tuned variant</p>
</div>
</div>
<!-- Token Length -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Average Token Length</h3>
<div id="textgen-token-chart" class="space-y-4">
<!-- Bars will be populated by JavaScript -->
</div>
<div class="mt-4 text-sm text-gray-600">
<p>Instruction model produces slightly shorter responses on average</p>
</div>
</div>
<!-- Vocabulary Diversity -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Vocabulary Diversity</h3>
<div id="textgen-vocab-chart" class="space-y-4">
<!-- Bars will be populated by JavaScript -->
</div>
<div class="mt-4 text-sm text-gray-600">
<p>Base model shows higher vocabulary diversity (16.6% vs 12.9%)</p>
</div>
</div>
<!-- Performance Summary -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Text Generation Summary</h3>
<div class="space-y-4">
<div class="flex justify-between items-center p-3 bg-blue-50 rounded">
<span class="font-medium">Generation Speed Winner</span>
<span class="text-blue-600 font-semibold">Base Model (+7%)</span>
</div>
<div class="flex justify-between items-center p-3 bg-red-50 rounded">
<span class="font-medium">Conciseness Winner</span>
<span class="text-red-600 font-semibold">Instruct Model</span>
</div>
<div class="flex justify-between items-center p-3 bg-orange-50 rounded">
<span class="font-medium">Vocabulary Diversity</span>
<span class="text-orange-600 font-semibold">Base Model (+29%)</span>
</div>
</div>
</div>
</div>
</div>
<!-- Memory Usage Tab Content -->
<div id="memory-content" class="hidden space-y-6">
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Memory Usage by Sequence Length</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 line-chart-table">
<thead>
<tr>
<th>Sequence Length</th>
<th>Base Model (GB)</th>
<th>Instruct Model (GB)</th>
</tr>
</thead>
<tbody>
<!-- Data will be populated by JavaScript -->
</tbody>
</table>
</div>
<div class="mt-4 text-sm text-gray-600">
<p>Both models show identical memory usage patterns across different sequence lengths</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Memory Growth Chart (represented visually) -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Memory Growth Rate</h3>
<div id="memory-growth-chart" class="space-y-4">
<!-- Bars will be populated by JavaScript -->
</div>
</div>
<!-- Memory Efficiency Metrics -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Memory Efficiency</h3>
<div class="space-y-4">
<div class="flex justify-between items-center p-3 bg-blue-50 rounded">
<span class="font-medium">Min Memory (128 seq)</span>
<span class="text-blue-600 font-semibold">0.683 GB</span>
</div>
<div class="flex justify-between items-center p-3 bg-purple-50 rounded">
<span class="font-medium">Max Memory (2048 seq)</span>
<span class="text-purple-600 font-semibold">1.049 GB</span>
</div>
<div class="flex justify-between items-center p-3 bg-green-50 rounded">
<span class="font-medium">Memory Growth</span>
<span class="text-green-600 font-semibold">+53.6%</span>
</div>
<div class="flex justify-between items-center p-3 bg-orange-50 rounded">
<span class="font-medium">Memory/Parameter Ratio</span>
<span class="text-orange-600 font-semibold">2.95 MB/M</span>
</div>
</div>
</div>
</div>
</div>
<!-- Model Comparison Tab Content -->
<div id="comparison-content" class="hidden space-y-6">
<!-- Side-by-side comparison -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
<h3 class="text-lg font-semibold mb-4 text-blue-700">SnowflakeCore-G1-Tiny (Base)</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">Generation Speed</span>
<span class="font-semibold">68.23 tokens/s</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Avg Token Length</span>
<span class="font-semibold">55.6 tokens</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Vocabulary Diversity</span>
<span class="font-semibold">16.6%</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Peak Memory</span>
<span class="font-semibold">1.049 GB</span>
</div>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-purple-500">
<h3 class="text-lg font-semibold mb-4 text-purple-700">SnowflakeCore-G1-Tiny-Instruct</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">Generation Speed</span>
<span class="font-semibold">63.69 tokens/s</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Avg Token Length</span>
<span class="font-semibold">51.0 tokens</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Vocabulary Diversity</span>
<span class="font-semibold">12.9%</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Peak Memory</span>
<span class="font-semibold">1.049 GB</span>
</div>
</div>
</div>
</div>
<!-- Detailed Comparison Chart (Bar Chart - represented visually) -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Detailed Performance Comparison</h3>
<div id="detailed-comparison-chart" class="space-y-4">
<!-- Bars will be populated by JavaScript -->
</div>
</div>
<!-- Recommendations -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Model Selection Recommendations</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 bg-blue-50 rounded-lg">
<h4 class="font-semibold text-blue-800 mb-2">Choose Base Model When:</h4>
<ul class="text-sm text-blue-700 space-y-1">
<li>• Maximum generation speed is critical</li>
<li>• Need diverse vocabulary output</li>
<li>• Working with creative writing tasks</li>
<li>• Fine-tuning for specific domains</li>
</ul>
</div>
<div class="p-4 bg-purple-50 rounded-lg">
<h4 class="font-semibold text-purple-800 mb-2">Choose Instruct Model When:</h4>
<ul class="text-sm text-purple-700 space-y-1">
<li>• Need instruction-following behavior</li>
<li>• Prefer concise, focused responses</li>
<li>• Working with Q&A or chat applications</li>
<li>• Want more predictable output format</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-8 text-center text-sm text-gray-500">
<p>Data extracted from SnowflakeCore model benchmarks • All metrics verified through synthetic testing</p>
</div>
</div>
</div>
<script>
// Data Definitions
const textGenData = [
{
metric: 'Generation Speed',
'Base Model': 68.23,
'Instruct Model': 63.69,
unit: 'tokens/s'
},
{
metric: 'Avg Token Length',
'Base Model': 55.6,
'Instruct Model': 51.0,
unit: 'tokens'
},
{
metric: 'Vocabulary Diversity',
'Base Model': 16.6,
'Instruct Model': 12.9,
unit: '%'
}
];
const memoryData = [
{ sequence: 128, 'Base Model': 0.683, 'Instruct Model': 0.683 },
{ sequence: 512, 'Base Model': 0.732, 'Instruct Model': 0.732 },
{ sequence: 1024, 'Base Model': 0.818, 'Instruct Model': 0.818 },
{ sequence: 2048, 'Base Model': 1.049, 'Instruct Model': 1.049 }
];
const modelSizeData = [
{ name: 'Parameters', value: 355.87, unit: 'M' },
{ name: 'Model Size', value: 1357.54, unit: 'MB' }
];
const radarData = [
{ metric: 'Speed', 'Base Model': 68.23, 'Instruct Model': 63.69, max: 80 },
{ metric: 'Token Length', 'Base Model': 55.6, 'Instruct Model': 51.0, max: 70 },
{ metric: 'Vocabulary', 'Base Model': 16.6, 'Instruct Model': 12.9, max: 20 },
{ metric: 'Memory Efficiency', 'Base Model': 95, 'Instruct Model': 95, max: 100 }
];
// Color schemes for visual bars
const colors = {
'Base Model': '#4F46E5', // Indigo-600
'Instruct Model': '#7C3AED', // Purple-600
'Base Model Alt1': '#059669', // Emerald-600
'Instruct Model Alt1': '#DC2626', // Red-600
'Base Model Alt2': '#D97706', // Orange-600
'Instruct Model Alt2': '#7C2D12' // Amber-900 (darker orange)
};
let activeTab = 'overview'; // Initial active tab
/**
* Renders a bar chart-like visualization using HTML divs.
* @param {HTMLElement} container - The DOM element to render the bars into.
* @param {Array<Object>} data - The data array for the chart.
* @param {string} labelKey - The key for the label (e.g., 'metric', 'sequence').
* @param {Array<Object>} barKeys - An array of objects { key: 'dataKey', color: 'tailwind-color-class' }.
* @param {number} maxValue - The maximum value for scaling the bars.
* @param {Function} [unitFormatter] - Optional function to format the unit display.
*/
function renderBarChart(container, data, labelKey, barKeys, maxValue, unitFormatter = (value, unit) => `${value} ${unit || ''}`) {
container.innerHTML = ''; // Clear previous content
data.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.className = 'mb-6'; // Add some spacing between items
const labelDiv = document.createElement('div');
labelDiv.className = 'text-sm font-semibold text-gray-800 mb-2';
labelDiv.textContent = item[labelKey];
itemDiv.appendChild(labelDiv);
barKeys.forEach(barInfo => {
const value = item[barInfo.key];
const widthPercentage = (value / maxValue) * 100;
const barContainer = document.createElement('div');
barContainer.className = 'bar-container';
const modelLabel = document.createElement('span');
modelLabel.className = 'bar-label';
modelLabel.textContent = barInfo.key;
barContainer.appendChild(modelLabel);
const barWrapper = document.createElement('div');
barWrapper.className = 'bar-wrapper';
const barDiv = document.createElement('div');
barDiv.className = `bar ${barInfo.color}`;
barDiv.style.width = `${widthPercentage}%`;
barDiv.textContent = unitFormatter(value, item.unit);
barWrapper.appendChild(barDiv);
barContainer.appendChild(barWrapper);
container.appendChild(itemDiv);
itemDiv.appendChild(barContainer);
});
});
}
/**
* Renders a table for line chart data.
* @param {HTMLElement} container - The tbody element of the table.
* @param {Array<Object>} data - The data array.
* @param {string} xKey - The key for the X-axis (e.g., 'sequence').
* @param {Array<string>} yKeys - Array of keys for Y-axis values (e.g., ['Base Model', 'Instruct Model']).
* @param {Function} [formatter] - Optional function to format the cell value.
*/
function renderLineChartTable(container, data, xKey, yKeys, formatter = (value) => value) {
container.innerHTML = ''; // Clear previous content
data.forEach(item => {
const row = document.createElement('tr');
row.className = 'hover:bg-gray-50';
const xCell = document.createElement('td');
xCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
xCell.textContent = item[xKey];
row.appendChild(xCell);
yKeys.forEach(key => {
const yCell = document.createElement('td');
yCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
yCell.textContent = formatter(item[key]);
row.appendChild(yCell);
});
container.appendChild(row);
});
}
/**
* Renders the Performance Radar data as a table.
* @param {HTMLElement} container - The tbody element of the table.
* @param {Array<Object>} data - The radar data.
*/
function renderRadarTable(container, data) {
container.innerHTML = '';
data.forEach(item => {
const row = document.createElement('tr');
row.className = 'hover:bg-gray-50';
const metricCell = document.createElement('td');
metricCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
metricCell.textContent = item.metric;
row.appendChild(metricCell);
const baseModelCell = document.createElement('td');
baseModelCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
baseModelCell.textContent = `${item['Base Model']} ${item.metric === 'Memory Efficiency' ? '%' : ''}`;
row.appendChild(baseModelCell);
const instructModelCell = document.createElement('td');
instructModelCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
instructModelCell.textContent = `${item['Instruct Model']} ${item.metric === 'Memory Efficiency' ? '%' : ''}`;
row.appendChild(instructModelCell);
container.appendChild(row);
});
}
/**
* Updates the visibility of content sections and active tab styling.
*/
function updateContentVisibility() {
// Hide all content sections
document.querySelectorAll('[id$="-content"]').forEach(section => {
section.classList.add('hidden');
});
// Show the active content section
document.getElementById(`${activeTab}-content`).classList.remove('hidden');
// Update tab button styles
document.querySelectorAll('#tab-navigation button').forEach(button => {
if (button.id === `tab-${activeTab}`) {
button.classList.remove('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
button.classList.add('bg-blue-600', 'text-white');
} else {
button.classList.remove('bg-blue-600', 'text-white');
button.classList.add('bg-gray-100', 'text-gray-700', 'hover:bg-gray-200');
}
});
}
/**
* Renders all dynamic content based on the active tab.
*/
function renderAllContent() {
// Overview Tab Charts
if (activeTab === 'overview') {
renderRadarTable(
document.querySelector('#overview-content .bg-white:nth-child(2) tbody'),
radarData
);
renderBarChart(
document.getElementById('overview-comparison-chart'),
textGenData,
'metric',
[
{ key: 'Base Model', color: 'bg-blue-600' },
{ key: 'Instruct Model', color: 'bg-purple-600' }
],
// Determine max value dynamically for scaling
Math.max(...textGenData.flatMap(d => [d['Base Model'], d['Instruct Model']])) * 1.1 // 10% buffer
);
}
// Text Generation Tab Charts
else if (activeTab === 'textgen') {
// Generation Speed
renderBarChart(
document.getElementById('textgen-speed-chart'),
[textGenData[0]],
'metric',
[
{ key: 'Base Model', color: 'bg-blue-600' },
{ key: 'Instruct Model', color: 'bg-purple-600' }
],
Math.max(textGenData[0]['Base Model'], textGenData[0]['Instruct Model']) * 1.1
);
// Token Length
renderBarChart(
document.getElementById('textgen-token-chart'),
[textGenData[1]],
'metric',
[
{ key: 'Base Model', color: 'bg-emerald-600' },
{ key: 'Instruct Model', color: 'bg-red-600' }
],
Math.max(textGenData[1]['Base Model'], textGenData[1]['Instruct Model']) * 1.1
);
// Vocabulary Diversity
renderBarChart(
document.getElementById('textgen-vocab-chart'),
[textGenData[2]],
'metric',
[
{ key: 'Base Model', color: 'bg-orange-600' },
{ key: 'Instruct Model', color: 'bg-amber-900' }
],
Math.max(textGenData[2]['Base Model'], textGenData[2]['Instruct Model']) * 1.1
);
}
// Memory Usage Tab Charts
else if (activeTab === 'memory') {
renderLineChartTable(
document.querySelector('#memory-content .line-chart-table tbody'),
memoryData,
'sequence',
['Base Model', 'Instruct Model'],
(value) => `${value} GB`
);
renderBarChart(
document.getElementById('memory-growth-chart'),
memoryData,
'sequence',
[
{ key: 'Base Model', color: 'bg-sky-500' }, // Tailwind sky-500
{ key: 'Instruct Model', color: 'bg-violet-500' } // Tailwind violet-500
],
Math.max(...memoryData.map(d => Math.max(d['Base Model'], d['Instruct Model']))) * 1.1,
(value, unit) => `${value} GB`
);
}
// Model Comparison Tab Charts
else if (activeTab === 'comparison') {
renderBarChart(
document.getElementById('detailed-comparison-chart'),
textGenData,
'metric',
[
{ key: 'Base Model', color: 'bg-blue-600' },
{ key: 'Instruct Model', color: 'bg-purple-600' }
],
Math.max(...textGenData.flatMap(d => [d['Base Model'], d['Instruct Model']])) * 1.1
);
}
}
// Event Listeners for Tab Navigation
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('tab-navigation').addEventListener('click', (event) => {
if (event.target.tagName === 'BUTTON') {
const newTab = event.target.id.replace('tab-', '');
if (newTab !== activeTab) {
activeTab = newTab;
updateContentVisibility();
renderAllContent(); // Re-render content for the new tab
}
}
});
// Initial render
updateContentVisibility();
renderAllContent();
});
</script>
</body>
</html>