<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Evolution Table</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
<div id="app" class="container mx-auto bg-white shadow-lg rounded-lg p-6 relative">
<h1 class="text-3xl font-bold mb-4">AI Evolution Table</h1>
<button id="languageToggle" class="mb-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Cambiar a Español
</button>
<div id="watermark" class="absolute top-4 right-6 text-gray-400 text-sm">
Table by Raul Iglesias Julios
</div>
<!-- <input type="text" id="filter" placeholder="Filter table..." class="w-full p-2 mb-4 border rounded"> -->
<div class="overflow-x-auto">
<table id="aiTable" class="min-w-full bg-white">
<thead>
<tr>
<th class="sort" data-sort="model">Model</th>
<th class="sort" data-sort="year">Year</th>
<th class="sort" data-sort="chipType">Chip Type</th>
<th class="sort" data-sort="tflops">TFLOP/s (max)</th>
<th class="sort" data-sort="chipCount">Chip Count</th>
<th class="sort" data-sort="wallClock">Real time (days)</th>
<th class="sort" data-sort="totalTime">Virtual Time (years)</th>
<th class="sort" data-sort="cost">Cost (USD)</th>
<th class="sort" data-sort="energy">Energy (MWh)</th>
<th class="sort" data-sort="emissions">Emissions (tCO2eq)</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="asteriskNote" class="mt-2 text-sm text-gray-500"></div>
<div id="tableNote" class="mt-2 text-sm text-gray-500"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</body>
</html>th {
cursor: pointer;
padding: 12px;
text-align: left;
border-bottom: 2px solid #e5e7eb;
}
th:hover {
background-color: #f3f4f6;
}
td {
padding: 12px;
border-bottom: 1px solid #e5e7eb;
}
tr:hover {
background-color: #f9fafb;
}
.sort::after {
content: '↕';
margin-left: 5px;
opacity: 0.5;
}
.sort.asc::after {
content: '↑';
opacity: 1;
}
.sort.desc::after {
content: '↓';
opacity: 1;
}
#app {
position: relative;
overflow: hidden;
}
#watermark {
position: absolute;
top: 40px; /* Ajusta según necesites */
right: 20px; /* Ajusta según necesites */
font-size: 24px;
font-family: Arial, sans-serif;
transform: rotate(0deg); /* Opcional: para girar el texto */
z-index: 10;
color: BLUE;
}// Español
// © Raul Iglesias Julios Pérez 2024. Todos los derechos reservados. No se permite el uso, distribución, modificación o reproducción de este código en ninguna forma sin el permiso expreso por escrito de Raul Iglesias Julios. Licencia GPL-3.0.
// English
// © Raul Iglesias Julios 2024. All rights reserved. Unauthorized use, distribution, modification, or reproduction of this code is strictly prohibited without the express written permission of Raul Iglesias Julios. Licensed under GPL-3.0.
const aiModels = [
{ model: "GPT-3", year: 2020, chipType: "V100", tflops: 130, chipCount: 10000, wallClock: 15, totalTime: 405, cost: 9000000, energy: 576, emissions: null },
{ model: "GPT-4", year: 2022, chipType: "A100", tflops: 312, chipCount: 25000, wallClock: 95, totalTime: 6507, cost: 224000000, energy: 28800, emissions: 6912 },
{ model: "GPT-5*", year: 2024, chipType: "H100", tflops: 989, chipCount: 50000, wallClock: 120, totalTime: 16438, cost: 612000000, energy: 57600, emissions: 13824 },
{ model: "GPT-6*", year: 2026, chipType: "H200", tflops: 1500, chipCount: 100000, wallClock: 240, totalTime: 32876, cost: 1220000000, energy: 115200, emissions: 27648 },
{ model: "GPT-7*", year: 2028, chipType: "H300*", tflops: 3000, chipCount: 200000, wallClock: 480, totalTime: 65752, cost: 2440000000, energy: 230400, emissions: 55296 },
{ model: "GPT-8*", year: 2030, chipType: "H400*", tflops: 6000, chipCount: 400000, wallClock: 960, totalTime: 131504, cost: 4880000000, energy: 460800, emissions: 110592 },
{ model: "GPT-9*", year: 2032, chipType: "H500*", tflops: 12000, chipCount: 800000, wallClock: 1920, totalTime: 263008, cost: 9760000000, energy: 921600, emissions: 221184 },
{ model: "AGI (GPT-10)*", year: 2035, chipType: "Quantum Chips*", tflops: 50000, chipCount: 1600000, wallClock: 3840, totalTime: 526016, cost: 19500000000, energy: 1843200, emissions: 442368 },
];
let sortConfig = { key: null, direction: 'ascending' };
const tableBody = document.querySelector('#aiTable tbody');
//const filterInput = document.getElementById('filter');
const languageToggle = document.getElementById('languageToggle');
let isSpanish = false;
const translations = {
en: {
model: "Model",
year: "Year",
chipType: "Chip Type",
tflops: "TFLOP/s (max)",
chipCount: "Chip Count",
wallClock: "Real Time (days)",
totalTime: "Virtual Time (years)",
cost: "Cost (USD)",
energy: "Energy (GWh)",
emissions: "Emissions (tCO2eq)",
filter: "Filter table...",
asteriskNote: "* Estimated theoretical values based on trends, not accounting for new technologies.",
note: "Note: This table contains speculative data for future AI models. Actual values may vary.",
toggleLanguage: "Cambiar a Español",
credits: "Created by Raul Iglesias Julios"
},
es: {
model: "Modelo",
year: "Año",
chipType: "Tipo de Chip",
tflops: "TFLOP/s (máx)",
chipCount: "Cantidad de Chips",
wallClock: "Tiempo Real (días)",
totalTime: "Tiempo Virtual (años)",
cost: "Costo (USD)",
energy: "Energía (GWh)",
emissions: "Emisiones (tCO2eq)",
filter: "Filtrar tabla...",
asteriskNote: "* Valores teóricos estimados basados en tendencias, sin tener en cuenta nuevas tecnologías.",
note: "Nota: Esta tabla contiene datos especulativos para futuros modelos de IA. Los valores reales pueden variar.",
toggleLanguage: "Switch to English",
credits: "Creado por Raul Iglesias Julios"
}
};
function formatNumber(num) {
return num.toLocaleString(isSpanish ? 'es-ES' : 'en-US');
}
function formatCost(num) {
return `$${(num / 1000000).toFixed(2)}M`;
}
function renderTable(data) {
tableBody.innerHTML = '';
data.forEach(model => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${model.model}</td>
<td>${model.year}</td>
<td>${model.chipType}</td>
<td>${formatNumber(model.tflops)}</td>
<td>${formatNumber(model.chipCount)}</td>
<td>${formatNumber(model.wallClock)}</td>
<td>${formatNumber(model.totalTime)}</td>
<td>${formatCost(model.cost)}</td>
<td>${formatNumber(model.energy)}</td>
<td>${model.emissions !== null ? formatNumber(model.emissions) : '-'}</td>
`;
tableBody.appendChild(row);
});
}
function sortData(key) {
return [aiModels].sort((a, b) => {
let aValue = a[key];
let bValue = b[key];
if (typeof aValue === 'string') {
aValue = aValue.toLowerCase();
bValue = bValue.toLowerCase();
}
if (aValue < bValue) return sortConfig.direction === 'ascending' ? -1 : 1;
if (aValue > bValue) return sortConfig.direction === 'ascending' ? 1 : -1;
return 0;
});
}
function handleSort(key) {
if (sortConfig.key === key) {
sortConfig.direction = sortConfig.direction === 'ascending' ? 'descending' : 'ascending';
} else {
sortConfig = { key, direction: 'ascending' };
}
const sortedData = sortData(key);
renderTable(sortedData);
updateSortIndicators();
}
function updateSortIndicators() {
document.querySelectorAll('th').forEach(th => {
th.classList.remove('asc', 'desc');
if (th.dataset.sort === sortConfig.key) {
th.classList.add(sortConfig.direction === 'ascending' ? 'asc' : 'desc');
}
});
}
function handleFilter() {
const filterValue = filterInput.value.toLowerCase();
const filteredData = aiModels.filter(model =>
Object.values(model).some(value =>
value.toString().toLowerCase().includes(filterValue)
)
);
renderTable(filteredData);
}
function updateLanguage() {
const lang = isSpanish ? 'es' : 'en';
document.querySelectorAll('th').forEach(th => {
const key = th.dataset.sort;
th.textContent = translations[lang][key];
});
//filterInput.placeholder = translations[lang].filter;
document.getElementById('asteriskNote').textContent = translations[lang].asteriskNote;
document.getElementById('tableNote').textContent = translations[lang].note;
languageToggle.textContent = translations[lang].toggleLanguage;
document.getElementById('watermark').textContent = translations[lang].credits;
}
function toggleLanguage() {
isSpanish = !isSpanish;
updateLanguage();
renderTable(aiModels);
}
document.querySelectorAll('th').forEach(th => {
th.addEventListener('click', () => handleSort(th.dataset.sort));
});
/*filterInput.addEventListener('input', _.debounce(handleFilter, 300));*/
languageToggle.addEventListener('click', toggleLanguage);
renderTable(aiModels);
updateLanguage();
External CSS
This Pen doesn't use any external CSS resources.