1354 lines
58 KiB
HTML
1354 lines
58 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Model Differences</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--neon-cyan: #00f0ff;
|
|
--neon-magenta: #ff00e5;
|
|
--neon-green: #39ff14;
|
|
--neon-purple: #b026ff;
|
|
--neon-orange: #ff6e00;
|
|
--neon-yellow: #ffe600;
|
|
--bg-dark: #0a0a12;
|
|
--bg-card: #0d0d1a;
|
|
--bg-card-hover: #12122a;
|
|
--text-primary: #e0e0e0;
|
|
--text-muted: #6a6a8a;
|
|
--glow-cyan: 0 0 10px #00f0ff, 0 0 40px #00f0ff44;
|
|
--glow-magenta: 0 0 10px #ff00e5, 0 0 40px #ff00e544;
|
|
--glow-green: 0 0 10px #39ff14, 0 0 40px #39ff1444;
|
|
--glow-purple: 0 0 10px #b026ff, 0 0 40px #b026ff44;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--bg-dark);
|
|
color: var(--text-primary);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ANIMATED GRID BACKGROUND */
|
|
.grid-bg {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(0,240,255,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,240,255,0.03) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* PARTICLE CANVAS */
|
|
#particles {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* NAV */
|
|
nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 18px 50px;
|
|
background: rgba(10,10,18,0.85);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid #1a1a2e;
|
|
}
|
|
.logo {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 900;
|
|
color: var(--neon-cyan);
|
|
text-shadow: var(--glow-cyan);
|
|
letter-spacing: 3px;
|
|
}
|
|
.nav-links { display: flex; gap: 35px; list-style: none; }
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
transition: color 0.3s, text-shadow 0.3s;
|
|
position: relative;
|
|
}
|
|
.nav-links a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px; left: 0;
|
|
width: 0; height: 2px;
|
|
background: var(--neon-cyan);
|
|
box-shadow: var(--glow-cyan);
|
|
transition: width 0.3s;
|
|
}
|
|
.nav-links a:hover { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
|
|
.nav-links a:hover::after { width: 100%; }
|
|
|
|
/* HERO */
|
|
.hero {
|
|
position: relative;
|
|
z-index: 1;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 120px 20px 80px;
|
|
}
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 20px;
|
|
border: 1px solid var(--neon-cyan);
|
|
border-radius: 50px;
|
|
font-size: 0.8rem;
|
|
color: var(--neon-cyan);
|
|
margin-bottom: 30px;
|
|
animation: pulse-border 2s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse-border {
|
|
0%, 100% { box-shadow: 0 0 5px #00f0ff44; }
|
|
50% { box-shadow: 0 0 20px #00f0ff88; }
|
|
}
|
|
.hero-badge .dot {
|
|
width: 6px; height: 6px;
|
|
background: var(--neon-green);
|
|
border-radius: 50%;
|
|
animation: blink 1.5s infinite;
|
|
}
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
.hero h1 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: clamp(2.5rem, 6vw, 5rem);
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero h1 .cyan { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
|
|
.hero h1 .magenta { color: var(--neon-magenta); text-shadow: var(--glow-magenta); }
|
|
.hero h1 .green { color: var(--neon-green); text-shadow: var(--glow-green); }
|
|
.hero-sub {
|
|
font-size: 1.15rem;
|
|
color: var(--text-muted);
|
|
max-width: 620px;
|
|
line-height: 1.7;
|
|
margin-bottom: 40px;
|
|
}
|
|
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
|
|
.neon-btn {
|
|
padding: 14px 36px;
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.3s;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.neon-btn-primary {
|
|
background: var(--neon-cyan);
|
|
color: #000;
|
|
border: 2px solid var(--neon-cyan);
|
|
box-shadow: var(--glow-cyan);
|
|
}
|
|
.neon-btn-primary:hover {
|
|
background: transparent;
|
|
color: var(--neon-cyan);
|
|
box-shadow: 0 0 20px #00f0ff66, inset 0 0 20px #00f0ff22;
|
|
}
|
|
.neon-btn-outline {
|
|
background: transparent;
|
|
color: var(--neon-magenta);
|
|
border: 2px solid var(--neon-magenta);
|
|
}
|
|
.neon-btn-outline:hover {
|
|
background: var(--neon-magenta);
|
|
color: #000;
|
|
box-shadow: var(--glow-magenta);
|
|
}
|
|
|
|
/* FLOATING ORBS */
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.15;
|
|
animation: float 8s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
.orb-1 { width: 400px; height: 400px; background: var(--neon-cyan); top: 10%; left: -5%; animation-delay: 0s; }
|
|
.orb-2 { width: 350px; height: 350px; background: var(--neon-magenta); top: 20%; right: -5%; animation-delay: 2s; }
|
|
.orb-3 { width: 300px; height: 300px; background: var(--neon-purple); bottom: 10%; left: 30%; animation-delay: 4s; }
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
50% { transform: translateY(-30px) scale(1.1); }
|
|
}
|
|
|
|
/* SECTIONS */
|
|
section {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 100px 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.section-label {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
color: var(--neon-magenta);
|
|
text-shadow: var(--glow-magenta);
|
|
margin-bottom: 12px;
|
|
}
|
|
.section-title {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
.section-desc {
|
|
color: var(--text-muted);
|
|
max-width: 600px;
|
|
line-height: 1.7;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
/* STAT COUNTERS */
|
|
.stats-bar {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 60px;
|
|
padding: 60px 20px;
|
|
flex-wrap: wrap;
|
|
border-top: 1px solid #1a1a2e;
|
|
border-bottom: 1px solid #1a1a2e;
|
|
background: rgba(13,13,26,0.6);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.stat-item { text-align: center; }
|
|
.stat-num {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 2.8rem;
|
|
font-weight: 900;
|
|
color: var(--neon-cyan);
|
|
text-shadow: var(--glow-cyan);
|
|
}
|
|
.stat-num.magenta { color: var(--neon-magenta); text-shadow: var(--glow-magenta); }
|
|
.stat-num.green { color: var(--neon-green); text-shadow: var(--glow-green); }
|
|
.stat-num.purple { color: var(--neon-purple); text-shadow: var(--glow-purple); }
|
|
.stat-label { color: var(--text-muted); font-size: 0.85rem; margin-top: 6px; }
|
|
|
|
/* MODEL CARDS */
|
|
.model-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
.model-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 16px;
|
|
padding: 32px 28px;
|
|
transition: all 0.4s;
|
|
cursor: default;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.model-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
|
|
opacity: 0;
|
|
transition: opacity 0.4s;
|
|
}
|
|
.model-card:hover {
|
|
border-color: #2a2a4e;
|
|
background: var(--bg-card-hover);
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 20px 60px rgba(0,240,255,0.08);
|
|
}
|
|
.model-card:hover::before { opacity: 1; }
|
|
.model-card .card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
|
|
.card-icon {
|
|
width: 48px; height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.4rem;
|
|
}
|
|
.card-icon.cyan { background: #00f0ff12; border: 1px solid #00f0ff33; }
|
|
.card-icon.magenta { background: #ff00e512; border: 1px solid #ff00e533; }
|
|
.card-icon.green { background: #39ff1412; border: 1px solid #39ff1433; }
|
|
.card-icon.purple { background: #b026ff12; border: 1px solid #b026ff33; }
|
|
.card-icon.orange { background: #ff6e0012; border: 1px solid #ff6e0033; }
|
|
.model-card h3 { font-size: 1.15rem; font-weight: 600; }
|
|
.model-card .model-type { font-size: 0.75rem; color: var(--text-muted); font-family: 'Orbitron', sans-serif; letter-spacing: 1px; }
|
|
.model-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; margin-bottom: 18px; }
|
|
.model-tags { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.tag {
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.tag.cyan { background: #00f0ff15; color: var(--neon-cyan); border: 1px solid #00f0ff33; }
|
|
.tag.magenta { background: #ff00e515; color: var(--neon-magenta); border: 1px solid #ff00e533; }
|
|
.tag.green { background: #39ff1415; color: var(--neon-green); border: 1px solid #39ff1433; }
|
|
.tag.purple { background: #b026ff15; color: var(--neon-purple); border: 1px solid #b026ff33; }
|
|
|
|
/* TABS */
|
|
.tabs-container { margin-bottom: 40px; }
|
|
.tab-buttons {
|
|
display: flex;
|
|
gap: 4px;
|
|
background: #0d0d1a;
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 12px;
|
|
padding: 4px;
|
|
width: fit-content;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tab-btn {
|
|
padding: 10px 24px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
transition: all 0.3s;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.tab-btn.active {
|
|
background: var(--neon-cyan);
|
|
color: #000;
|
|
box-shadow: var(--glow-cyan);
|
|
}
|
|
.tab-btn:hover:not(.active) { color: var(--neon-cyan); }
|
|
.tab-content { display: none; animation: fadeIn 0.4s ease; }
|
|
.tab-content.active { display: block; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* COMPARISON TABLE */
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
background: var(--bg-card);
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.comparison-table thead th {
|
|
padding: 18px 20px;
|
|
text-align: left;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
color: var(--neon-cyan);
|
|
background: #0a0a1a;
|
|
border-bottom: 1px solid #1a1a2e;
|
|
}
|
|
.comparison-table tbody td {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #1a1a2e11;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
.comparison-table tbody tr { transition: background 0.3s; }
|
|
.comparison-table tbody tr:hover { background: #00f0ff08; }
|
|
.comparison-table tbody tr:last-child td { border-bottom: none; }
|
|
.comparison-table .model-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
.bar-container {
|
|
width: 100%;
|
|
height: 6px;
|
|
background: #1a1a2e;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
margin-top: 4px;
|
|
}
|
|
.bar-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
transition: width 1.5s ease;
|
|
width: 0;
|
|
}
|
|
.bar-fill.cyan { background: var(--neon-cyan); box-shadow: 0 0 8px #00f0ff66; }
|
|
.bar-fill.magenta { background: var(--neon-magenta); box-shadow: 0 0 8px #ff00e566; }
|
|
.bar-fill.green { background: var(--neon-green); box-shadow: 0 0 8px #39ff1466; }
|
|
.bar-fill.purple { background: var(--neon-purple); box-shadow: 0 0 8px #b026ff66; }
|
|
|
|
/* ARCHITECTURE EXPLORER */
|
|
.arch-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.arch-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 16px;
|
|
padding: 28px 24px;
|
|
cursor: pointer;
|
|
transition: all 0.4s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.arch-card.active {
|
|
border-color: var(--neon-cyan);
|
|
box-shadow: 0 0 30px #00f0ff15;
|
|
}
|
|
.arch-card:hover { border-color: #2a2a4e; transform: translateY(-4px); }
|
|
.arch-card h4 { font-size: 1rem; margin-bottom: 8px; }
|
|
.arch-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
|
|
.arch-detail {
|
|
display: none;
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #1a1a2e;
|
|
animation: fadeIn 0.4s ease;
|
|
}
|
|
.arch-detail.active { display: block; }
|
|
.arch-detail h5 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 0.75rem;
|
|
color: var(--neon-magenta);
|
|
text-shadow: var(--glow-magenta);
|
|
margin-bottom: 10px;
|
|
letter-spacing: 2px;
|
|
}
|
|
.arch-detail ul { list-style: none; }
|
|
.arch-detail ul li {
|
|
padding: 6px 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.arch-detail ul li::before {
|
|
content: '▸';
|
|
color: var(--neon-cyan);
|
|
}
|
|
|
|
/* INTERACTIVE TOGGLE COMPARISON */
|
|
.toggle-section { margin-top: 40px; }
|
|
.toggle-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.toggle-label {
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
.toggle-label.left { color: var(--neon-cyan); }
|
|
.toggle-label.right { color: var(--text-muted); }
|
|
.toggle-switch {
|
|
width: 56px; height: 28px;
|
|
background: #1a1a2e;
|
|
border-radius: 14px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
border: 1px solid #2a2a4e;
|
|
transition: all 0.3s;
|
|
}
|
|
.toggle-switch .knob {
|
|
width: 22px; height: 22px;
|
|
background: var(--neon-cyan);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 2px; left: 2px;
|
|
transition: all 0.3s;
|
|
box-shadow: var(--glow-cyan);
|
|
}
|
|
.toggle-switch.right .knob {
|
|
left: 30px;
|
|
background: var(--neon-magenta);
|
|
box-shadow: var(--glow-magenta);
|
|
}
|
|
.comparison-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
|
.comp-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 16px;
|
|
padding: 30px 24px;
|
|
transition: all 0.4s;
|
|
}
|
|
.comp-card h4 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 1rem;
|
|
margin-bottom: 16px;
|
|
}
|
|
.comp-card.cyan-h h4 { color: var(--neon-cyan); }
|
|
.comp-card.magenta-h h4 { color: var(--neon-magenta); }
|
|
.comp-card .comp-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #1a1a2e22;
|
|
font-size: 0.88rem;
|
|
}
|
|
.comp-card .comp-row:last-child { border-bottom: none; }
|
|
.comp-row .label { color: var(--text-muted); }
|
|
.comp-row .value { font-weight: 600; }
|
|
|
|
/* ACCORDION */
|
|
.accordion { margin-top: 40px; }
|
|
.accordion-item {
|
|
background: var(--bg-card);
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 12px;
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
transition: border-color 0.3s;
|
|
}
|
|
.accordion-item.open { border-color: #2a2a4e; }
|
|
.accordion-header {
|
|
padding: 20px 24px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
transition: color 0.3s;
|
|
}
|
|
.accordion-header:hover { color: var(--neon-cyan); }
|
|
.accordion-arrow {
|
|
width: 24px; height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.3s;
|
|
color: var(--text-muted);
|
|
}
|
|
.accordion-item.open .accordion-arrow { transform: rotate(180deg); color: var(--neon-cyan); }
|
|
.accordion-body {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.4s ease, padding 0.4s ease;
|
|
}
|
|
.accordion-item.open .accordion-body {
|
|
max-height: 500px;
|
|
padding: 0 24px 20px;
|
|
}
|
|
.accordion-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; }
|
|
|
|
/* INTERACTIVE QUIZ */
|
|
.quiz-container {
|
|
background: var(--bg-card);
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 16px;
|
|
padding: 40px 32px;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.quiz-progress {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.quiz-dot {
|
|
flex: 1;
|
|
height: 4px;
|
|
background: #1a1a2e;
|
|
border-radius: 2px;
|
|
transition: all 0.3s;
|
|
}
|
|
.quiz-dot.done { background: var(--neon-green); box-shadow: 0 0 8px #39ff1466; }
|
|
.quiz-dot.current { background: var(--neon-cyan); box-shadow: var(--glow-cyan); }
|
|
.quiz-question {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 1rem;
|
|
margin-bottom: 24px;
|
|
color: var(--text-primary);
|
|
}
|
|
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
|
|
.quiz-option {
|
|
padding: 14px 20px;
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-size: 0.9rem;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
text-align: left;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.quiz-option:hover { border-color: var(--neon-cyan); background: #00f0ff08; }
|
|
.quiz-option.selected { border-color: var(--neon-cyan); background: #00f0ff15; color: var(--neon-cyan); box-shadow: 0 0 15px #00f0ff15; }
|
|
.quiz-result {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
.quiz-result h3 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 1.3rem;
|
|
color: var(--neon-green);
|
|
text-shadow: var(--glow-green);
|
|
margin-bottom: 12px;
|
|
}
|
|
.quiz-result p { color: var(--text-muted); line-height: 1.7; }
|
|
.quiz-nav { display: flex; justify-content: flex-end; margin-top: 24px; }
|
|
.quiz-next {
|
|
padding: 10px 24px;
|
|
background: var(--neon-cyan);
|
|
color: #000;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: 'Inter', sans-serif;
|
|
transition: all 0.3s;
|
|
}
|
|
.quiz-next:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
.quiz-next:not(:disabled):hover { box-shadow: var(--glow-cyan); }
|
|
|
|
/* TIMELINE */
|
|
.timeline { position: relative; padding-left: 40px; }
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 15px; top: 0; bottom: 0;
|
|
width: 2px;
|
|
background: linear-gradient(180deg, var(--neon-cyan), var(--neon-magenta), var(--neon-purple));
|
|
box-shadow: 0 0 10px #00f0ff44;
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
padding: 24px;
|
|
background: var(--bg-card);
|
|
border: 1px solid #1a1a2e;
|
|
border-radius: 12px;
|
|
transition: border-color 0.3s;
|
|
}
|
|
.timeline-item:hover { border-color: #2a2a4e; }
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -33px; top: 28px;
|
|
width: 12px; height: 12px;
|
|
background: var(--neon-cyan);
|
|
border-radius: 50%;
|
|
box-shadow: var(--glow-cyan);
|
|
}
|
|
.timeline-year {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 0.75rem;
|
|
color: var(--neon-magenta);
|
|
letter-spacing: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.timeline-item h4 { font-size: 1rem; margin-bottom: 8px; }
|
|
.timeline-item p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; }
|
|
|
|
/* HOVER LINES EFFECT */
|
|
.neon-line {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
|
|
margin: 0 auto;
|
|
max-width: 300px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* SCROLL REVEAL */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
text-align: center;
|
|
padding: 50px 20px;
|
|
border-top: 1px solid #1a1a2e;
|
|
background: rgba(10,10,18,0.8);
|
|
}
|
|
footer .logo { margin-bottom: 12px; }
|
|
footer p { color: var(--text-muted); font-size: 0.85rem; }
|
|
footer .footer-links { display: flex; justify-content: center; gap: 24px; margin-top: 16px; }
|
|
footer .footer-links a {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 0.85rem;
|
|
transition: color 0.3s;
|
|
}
|
|
footer .footer-links a:hover { color: var(--neon-cyan); }
|
|
|
|
/* RESPONSIVE */
|
|
@media (max-width: 768px) {
|
|
nav { padding: 14px 20px; }
|
|
.nav-links { display: none; }
|
|
.comparison-cards { grid-template-columns: 1fr; }
|
|
.stats-bar { gap: 30px; }
|
|
.stat-num { font-size: 2rem; }
|
|
.model-grid { grid-template-columns: 1fr; }
|
|
.tab-buttons { width: 100%; }
|
|
.tab-btn { flex: 1; text-align: center; padding: 10px 14px; font-size: 0.78rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="grid-bg"></div>
|
|
<canvas id="particles"></canvas>
|
|
|
|
<nav>
|
|
<div class="logo">AI MODELS</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#models">Models</a></li>
|
|
<li><a href="#architecture">Architecture</a></li>
|
|
<li><a href="#compare">Compare</a></li>
|
|
<li><a href="#timeline">Timeline</a></li>
|
|
<li><a href="#quiz">Quiz</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
<div class="hero-badge"><span class="dot"></span> Interactive Guide · 2026 Edition</div>
|
|
<h1>Decoding <span class="cyan">AI</span> <span class="magenta">Model</span> <span class="green">Differences</span></h1>
|
|
<p class="hero-sub">From transformers to diffusion models — explore how AI architectures work, how they compare, and which one fits your needs. Fully interactive.</p>
|
|
<div class="hero-buttons">
|
|
<a href="#models" class="neon-btn neon-btn-primary">Explore Models</a>
|
|
<a href="#quiz" class="neon-btn neon-btn-outline">Take the Quiz</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- STATS BAR -->
|
|
<div class="stats-bar reveal">
|
|
<div class="stat-item">
|
|
<div class="stat-num" data-target="50">0</div>
|
|
<div class="stat-label">Models Covered</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num magenta" data-target="8">0</div>
|
|
<div class="stat-label">Architecture Types</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num green" data-target="120">0</div>
|
|
<div class="stat-label">Benchmarks Tracked</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-num purple" data-target="15">0</div>
|
|
<div class="stat-label">Head-to-Head Comparisons</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODEL CATALOG -->
|
|
<section id="models">
|
|
<div class="section-label reveal">Model Catalog</div>
|
|
<h2 class="section-title reveal">Major AI Models</h2>
|
|
<p class="section-desc reveal">Explore the most influential AI models across language, vision, audio, and generation tasks.</p>
|
|
|
|
<div class="tabs-container reveal">
|
|
<div class="tab-buttons">
|
|
<button class="tab-btn active" data-tab="all">All</button>
|
|
<button class="tab-btn" data-tab="language">Language</button>
|
|
<button class="tab-btn" data-tab="vision">Vision</button>
|
|
<button class="tab-btn" data-tab="audio">Audio</button>
|
|
<button class="tab-btn" data-tab="generation">Generation</button>
|
|
<button class="tab-btn" data-tab="multimodal">Multimodal</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-grid reveal">
|
|
<div class="model-card" data-category="language">
|
|
<div class="card-header">
|
|
<div class="card-icon cyan">🧠</div>
|
|
<div><h3>GPT-4o</h3><div class="model-type">OpenAI · Language</div></div>
|
|
</div>
|
|
<p>A frontier multimodal model excelling at reasoning, coding, and creative tasks. Optimized for both text and vision inputs with reduced latency.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">Transformer</span>
|
|
<span class="tag magenta">1.8T Params</span>
|
|
<span class="tag green">Text + Vision</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="language">
|
|
<div class="card-header">
|
|
<div class="card-icon purple">🔮</div>
|
|
<div><h3>Claude 3.5 Sonnet</h3><div class="model-type">Anthropic · Language</div></div>
|
|
</div>
|
|
<p>Known for nuanced reasoning, long context handling (200K tokens), and strong safety alignment. Excels at analysis and coding.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">Transformer</span>
|
|
<span class="tag magenta">~500B Params</span>
|
|
<span class="tag purple">200K Context</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="language multimodal">
|
|
<div class="card-header">
|
|
<div class="card-icon green">🌐</div>
|
|
<div><h3>Gemini 2.0</h3><div class="model-type">Google · Multimodal</div></div>
|
|
</div>
|
|
<p>Google's most capable model. Natively multimodal — processes text, image, audio, and video in a single architecture with 1M+ context.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">MoE Transformer</span>
|
|
<span class="tag green">1M+ Context</span>
|
|
<span class="tag purple">Multimodal</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="language">
|
|
<div class="card-header">
|
|
<div class="card-icon magenta">🦙</div>
|
|
<div><h3>Llama 3.1 405B</h3><div class="model-type">Meta · Language (Open)</div></div>
|
|
</div>
|
|
<p>The largest open-weight model. Competitive with proprietary models on major benchmarks. Fully customizable and self-hostable.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">Transformer</span>
|
|
<span class="tag magenta">405B Params</span>
|
|
<span class="tag green">Open Weight</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="language">
|
|
<div class="card-header">
|
|
<div class="card-icon orange">⚡</div>
|
|
<div><h3>Mistral Large 2</h3><div class="model-type">Mistral AI · Language</div></div>
|
|
</div>
|
|
<p>European frontier model with strong multilingual capabilities. Efficient architecture with 128K context and tool use support.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">MoE</span>
|
|
<span class="tag magenta">123B Params</span>
|
|
<span class="tag purple">128K Context</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="generation">
|
|
<div class="card-header">
|
|
<div class="card-icon purple">🎨</div>
|
|
<div><h3>Stable Diffusion 3.5</h3><div class="model-type">Stability AI · Generation</div></div>
|
|
</div>
|
|
<p>Open-source image generation using a Multimodal Diffusion Transformer (MDiT). excels at photorealism and prompt adherence.</p>
|
|
<div class="model-tags">
|
|
<span class="tag purple">Diffusion</span>
|
|
<span class="tag cyan">Open Source</span>
|
|
<span class="tag green">Image Gen</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="vision">
|
|
<div class="card-header">
|
|
<div class="card-icon cyan">👁️</div>
|
|
<div><h3>SAM 2</h3><div class="model-type">Meta · Vision</div></div>
|
|
</div>
|
|
<p>Segment Anything Model 2 — real-time video and image segmentation. Works across domains with zero-shot generalization.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">Transformer</span>
|
|
<span class="tag green">Segmentation</span>
|
|
<span class="tag purple">Video + Image</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="audio">
|
|
<div class="card-header">
|
|
<div class="card-icon green">🎙️</div>
|
|
<div><h3>Whisper V3 Large</h3><div class="model-type">OpenAI · Audio</div></div>
|
|
</div>
|
|
<p>State-of-the-art speech recognition. Trained on 680K hours of multilingual data. Near-human accuracy on English transcription.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">Encoder-Decoder</span>
|
|
<span class="tag green">Multilingual</span>
|
|
<span class="tag magenta">1.5B Params</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="audio generation">
|
|
<div class="card-header">
|
|
<div class="card-icon orange">🎵</div>
|
|
<div><h3>MusicGen</h3><div class="model-type">Meta · Audio Generation</div></div>
|
|
</div>
|
|
<p>Generates high-quality music from text descriptions. Uses a single-stage auto-regressive Transformer with codebook pattern modeling.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">Transformer</span>
|
|
<span class="tag purple">Music Gen</span>
|
|
<span class="tag green">Open Source</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="multimodal">
|
|
<div class="card-header">
|
|
<div class="card-icon magenta">🔬</div>
|
|
<div><h3>GPT-4o + DALL-E 3</h3><div class="model-type">OpenAI · Multimodal Stack</div></div>
|
|
</div>
|
|
<p>A combination that understands text and images natively, then generates images with DALL-E 3. Full round-trip multimodal reasoning.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">Multimodal</span>
|
|
<span class="tag magenta">Image Gen</span>
|
|
<span class="tag green">Reasoning</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="vision generation">
|
|
<div class="card-header">
|
|
<div class="card-icon cyan">🖼️</div>
|
|
<div><h3>Midjourney V6.1</h3><div class="model-type">Midjourney · Generation</div></div>
|
|
</div>
|
|
<p>Best-in-class artistic image generation. Known for stunning aesthetics, coherent text rendering, and photorealistic outputs.</p>
|
|
<div class="model-tags">
|
|
<span class="tag purple">Proprietary</span>
|
|
<span class="tag cyan">Image Gen</span>
|
|
<span class="tag green">Artistic</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-card" data-category="language">
|
|
<div class="card-header">
|
|
<div class="card-icon green">🤖</div>
|
|
<div><h3>DeepSeek R1</h3><div class="model-type">DeepSeek · Language (Open)</div></div>
|
|
</div>
|
|
<p>Open-reasoning model using reinforcement learning for chain-of-thought. Excels at math, code, and logical reasoning tasks.</p>
|
|
<div class="model-tags">
|
|
<span class="tag cyan">MoE</span>
|
|
<span class="tag green">Open Weight</span>
|
|
<span class="tag purple">Reasoning</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="neon-line"></div>
|
|
|
|
<!-- ARCHITECTURE EXPLORER -->
|
|
<section id="architecture">
|
|
<div class="section-label reveal">Deep Dive</div>
|
|
<h2 class="section-title reveal">Architecture Explorer</h2>
|
|
<p class="section-desc reveal">Click on any architecture to learn how it works, its strengths, and where it's used.</p>
|
|
|
|
<div class="arch-grid reveal">
|
|
<div class="arch-card" data-arch="transformer">
|
|
<h4>🧠 Transformer</h4>
|
|
<p>Self-attention mechanism that processes all tokens in parallel. The foundation of modern LLMs.</p>
|
|
<div class="arch-detail" id="detail-transformer">
|
|
<h5>How It Works</h5>
|
|
<ul>
|
|
<li>Input tokens are embedded into vectors</li>
|
|
<li>Multi-head self-attention computes relationships</li>
|
|
<li>Feed-forward layers process the results</li>
|
|
<li>Layer normalization and residual connections stabilize training</li>
|
|
</ul>
|
|
<h5 style="margin-top: 14px;">Used By</h5>
|
|
<ul>
|
|
<li>GPT-4, Claude 3, Llama 3, Mistral, BERT</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arch-card" data-arch="cnn">
|
|
<h4>🖼️ CNN</h4>
|
|
<p>Convolutional Neural Networks extract spatial features through sliding filters. King of computer vision.</p>
|
|
<div class="arch-detail" id="detail-cnn">
|
|
<h5>How It Works</h5>
|
|
<ul>
|
|
<li>Convolutional layers detect edges, textures, shapes</li>
|
|
<li>Pooling layers reduce spatial dimensions</li>
|
|
<li>Hierarchical feature extraction from low to high level</li>
|
|
<li>Fully connected layers for classification</li>
|
|
</ul>
|
|
<h5 style="margin-top: 14px;">Used By</h5>
|
|
<ul>
|
|
<li>ResNet, VGG, EfficientNet, YOLO</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arch-card" data-arch="rnn">
|
|
<h4>📝 RNN / LSTM</h4>
|
|
<p>Recurrent networks process sequences step-by-step with memory. LSTMs solved the vanishing gradient problem.</p>
|
|
<div class="arch-detail" id="detail-rnn">
|
|
<h5>How It Works</h5>
|
|
<ul>
|
|
<li>Processes one token at a time sequentially</li>
|
|
<li>Maintains a hidden state (memory) across steps</li>
|
|
<li>LSTMs use gates to control information flow</li>
|
|
<li>Struggles with very long sequences</li>
|
|
</ul>
|
|
<h5 style="margin-top: 14px;">Used By</h5>
|
|
<ul>
|
|
<li>Early NLP models, some speech recognition</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arch-card" data-arch="diffusion">
|
|
<h4>🎨 Diffusion</h4>
|
|
<p>Generates data by learning to reverse a gradual noising process. State-of-the-art for image/video generation.</p>
|
|
<div class="arch-detail" id="detail-diffusion">
|
|
<h5>How It Works</h5>
|
|
<ul>
|
|
<li>Forward pass: gradually adds Gaussian noise to data</li>
|
|
<li>Reverse pass: neural network learns to denoise step by step</li>
|
|
<li>Text conditioning guides the generation</li>
|
|
<li>Classifier-free guidance controls fidelity vs. diversity</li>
|
|
</ul>
|
|
<h5 style="margin-top: 14px;">Used By</h5>
|
|
<ul>
|
|
<li>Stable Diffusion, DALL-E, Midjourney, Sora</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arch-card" data-arch="gan">
|
|
<h4>🎭 GAN</h4>
|
|
<p>Two networks — generator and discriminator — compete in a zero-sum game to create realistic outputs.</p>
|
|
<div class="arch-detail" id="detail-gan">
|
|
<h5>How It Works</h5>
|
|
<ul>
|
|
<li>Generator creates fake samples from random noise</li>
|
|
<li>Discriminator tries to distinguish real from fake</li>
|
|
<li>Both improve adversarially over training</li>
|
|
<li>Mode collapse is a common failure mode</li>
|
|
</ul>
|
|
<h5 style="margin-top: 14px;">Used By</h5>
|
|
<ul>
|
|
<li>StyleGAN, CycleGAN, ProGAN</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="arch-card" data-arch="moe">
|
|
<h4>🔀 Mixture of Experts</h4>
|
|
<p>Sparse activation — only a subset of parameters processes each token. Enables massive models at lower compute cost.</p>
|
|
<div class="arch-detail" id="detail-moe">
|
|
<h5>How It Works</h5>
|
|
<ul>
|
|
<li>Router network selects which "experts" to activate</li>
|
|
<li>Only top-K experts process each token</li>
|
|
<li>Total parameters are large, but active params are small</li>
|
|
<li>Enables scaling to trillions of parameters efficiently</li>
|
|
</ul>
|
|
<h5 style="margin-top: 14px;">Used By</h5>
|
|
<ul>
|
|
<li>Mixtral, GPT-4 (rumored), DeepSeek V2, Grok</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="neon-line"></div>
|
|
|
|
<!-- INTERACTIVE COMPARISON -->
|
|
<section id="compare">
|
|
<div class="section-label reveal">Head to Head</div>
|
|
<h2 class="section-title reveal">Interactive Comparison</h2>
|
|
<p class="section-desc reveal">Toggle between two leading models to see how they stack up across key dimensions.</p>
|
|
|
|
<div class="toggle-section reveal">
|
|
<div class="toggle-bar">
|
|
<span class="toggle-label left" id="label-left">GPT-4o</span>
|
|
<div class="toggle-switch" id="toggle-switch" onclick="toggleComparison()">
|
|
<div class="knob"></div>
|
|
</div>
|
|
<span class="toggle-label" id="label-right">Claude 3.5 Sonnet</span>
|
|
</div>
|
|
|
|
<div class="comparison-cards" id="comparison-1">
|
|
<div class="comp-card cyan-h">
|
|
<h4>GPT-4o</h4>
|
|
<div class="comp-row"><span class="label">Parameters</span><span class="value">~1.8T</span></div>
|
|
<div class="comp-row"><span class="label">Context Window</span><span class="value">128K</span></div>
|
|
<div class="comp-row"><span class="label">Modalities</span><span class="value">Text, Vision, Audio</span></div>
|
|
<div class="comp-row"><span class="label">MMLU Score</span><span class="value">88.7%</span></div>
|
|
<div class="comp-row"><span class="label">Coding (HumanEval)</span><span class="value">90.2%</span></div>
|
|
<div class="comp-row"><span class="label">Price (Input/1M)</span><span class="value">$2.50</span></div>
|
|
<div class="comp-row"><span class="label">Speed</span><span class="value">~80 tok/s</span></div>
|
|
</div>
|
|
<div class="comp-card magenta-h">
|
|
<h4>Claude 3.5 Sonnet</h4>
|
|
<div class="comp-row"><span class="label">Parameters</span><span class="value">~500B</span></div>
|
|
<div class="comp-row"><span class="label">Context Window</span><span class="value">200K</span></div>
|
|
<div class="comp-row"><span class="label">Modalities</span><span class="value">Text, Vision</span></div>
|
|
<div class="comp-row"><span class="label">MMLU Score</span><span class="value">88.7%</span></div>
|
|
<div class="comp-row"><span class="label">Coding (HumanEval)</span><span class="value">92.0%</span></div>
|
|
<div class="comp-row"><span class="label">Price (Input/1M)</span><span class="value">$3.00</span></div>
|
|
<div class="comp-row"><span class="label">Speed</span><span class="value">~70 tok/s</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison-cards" id="comparison-2" style="display:none;">
|
|
<div class="comp-card cyan-h">
|
|
<h4>Llama 3.1 405B</h4>
|
|
<div class="comp-row"><span class="label">Parameters</span><span class="value">405B</span></div>
|
|
<div class="comp-row"><span class="label">Context Window</span><span class="value">128K</span></div>
|
|
<div class="comp-row"><span class="label">License</span><span class="value">Open (Llama License)</span></div>
|
|
<div class="comp-row"><span class="label">MMLU Score</span><span class="value">87.3%</span></div>
|
|
<div class="comp-row"><span class="label">Self-Hostable</span><span class="value">Yes (8xH100)</span></div>
|
|
<div class="comp-row"><span class="label">API Cost</span><span class="value">Varies by provider</span></div>
|
|
<div class="comp-row"><span class="label">Fine-tuning</span><span class="value">Full access</span></div>
|
|
</div>
|
|
<div class="comp-card magenta-h">
|
|
<h4>Mistral Large 2</h4>
|
|
<div class="comp-row"><span class="label">Parameters</span><span class="value">123B</span></div>
|
|
<div class="comp-row"><span class="label">Context Window</span><span class="value">128K</span></div>
|
|
<div class="comp-row"><span class="label">License</span><span class="value">Open (Apache 2.0)</span></div>
|
|
<div class="comp-row"><span class="label">MMLU Score</span><span class="value">84.0%</span></div>
|
|
<div class="comp-row"><span class="label">Self-Hostable</span><span class="value">Yes (2xH100)</span></div>
|
|
<div class="comp-row"><span class="label">API Cost</span><span class="value">$2.00/1M input</span></div>
|
|
<div class="comp-row"><span class="label">Fine-tuning</span><span class="value">Full access</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BENCHMARK BARS -->
|
|
<h3 style="font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: var(--neon-magenta); margin-top: 60px; margin-bottom: 24px; letter-spacing: 2px;" class="reveal">BENCHMARK SCORES</h3>
|
|
<div class="reveal">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<span style="font-size: 0.85rem; color: var(--text-muted);">GPT-4o</span>
|
|
<span style="font-size: 0.85rem; color: var(--neon-cyan);">88.7%</span>
|
|
</div>
|
|
<div class="bar-container"><div class="bar-fill cyan" data-width="88.7"></div></div>
|
|
</div>
|
|
<div style="margin-top: 16px;" class="reveal">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<span style="font-size: 0.85rem; color: var(--text-muted);">Claude 3.5 Sonnet</span>
|
|
<span style="font-size: 0.85rem; color: var(--neon-magenta);">88.7%</span>
|
|
</div>
|
|
<div class="bar-container"><div class="bar-fill magenta" data-width="88.7"></div></div>
|
|
</div>
|
|
<div style="margin-top: 16px;" class="reveal">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<span style="font-size: 0.85rem; color: var(--text-muted);">Gemini 2.0 Flash</span>
|
|
<span style="font-size: 0.85rem; color: var(--neon-green);">85.1%</span>
|
|
</div>
|
|
<div class="bar-container"><div class="bar-fill green" data-width="85.1"></div></div>
|
|
</div>
|
|
<div style="margin-top: 16px;" class="reveal">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<span style="font-size: 0.85rem; color: var(--text-muted);">Llama 3.1 405B</span>
|
|
<span style="font-size: 0.85rem; color: var(--neon-purple);">87.3%</span>
|
|
</div>
|
|
<div class="bar-container"><div class="bar-fill purple" data-width="87.3"></div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="neon-line"></div>
|
|
|
|
<!-- MODEL EVOLUTION TIMELINE -->
|
|
<section id="timeline">
|
|
<div class="section-label reveal">History</div>
|
|
<h2 class="section-title reveal">Model Evolution Timeline</h2>
|
|
<p class="section-desc reveal">Key milestones in AI model development from early neural networks to today's frontier models.</p>
|
|
|
|
<div class="timeline reveal">
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2017</div>
|
|
<h4>Transformer Paper — "Attention Is All You Need"</h4>
|
|
<p>Google introduces the transformer architecture, replacing RNNs with self-attention. This becomes the foundation for every major AI model today.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2018</div>
|
|
<h4>GPT-1 & BERT</h4>
|
|
<p>OpenAI's GPT-1 and Google's BERT show that pre-training on massive text data produces general-purpose language understanding. The era of large language models begins.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2020</div>
|
|
<h4>GPT-3 — Scaling Laws Proven</h4>
|
|
<p>175 billion parameters. GPT-3 demonstrates that scaling model size dramatically improves capabilities, including few-shot learning without fine-tuning.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2021</div>
|
|
<h4>DALL-E & CLIP — Multimodal Breakthrough</h4>
|
|
<p>OpenAI connects vision and language. CLIP learns visual concepts from text, and DALL-E generates images from descriptions — pioneering multimodal AI.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2022</div>
|
|
<h4>Stable Diffusion & ChatGPT</h4>
|
|
<p>Stable Diffusion democratizes image generation with open source. ChatGPT takes the world by storm, reaching 100M users in 2 months.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2023</div>
|
|
<h4>GPT-4, Claude 2, Gemini 1.0</h4>
|
|
<p>Frontier models push boundaries. GPT-4 is multimodal. Claude introduces 100K context. Gemini processes text, image, audio, and video natively.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2024</div>
|
|
<h4>Open-Weight Revolution & Reasoning Models</h4>
|
|
<p>Llama 3, Mistral, and DeepSeek prove open models can compete with proprietary ones. o1 and DeepSeek R1 introduce chain-of-thought reasoning.</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-year">2025-2026</div>
|
|
<h4>Agentic AI & World Models</h4>
|
|
<p>Models that can browse, code, and take actions autonomously. Sora and similar models simulate physical worlds. AI models become AI agents.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="neon-line"></div>
|
|
|
|
<!-- INTERACTIVE QUIZ -->
|
|
<section id="quiz">
|
|
<div class="section-label reveal">Test Yourself</div>
|
|
<h2 class="section-title reveal">Find Your Model</h2>
|
|
<p class="section-desc reveal">Answer a few questions and we'll recommend the best AI model for your use case.</p>
|
|
|
|
<div class="quiz-container reveal" id="quiz-container">
|
|
<div class="quiz-progress" id="quiz-progress"></div>
|
|
<div id="quiz-body">
|
|
<div class="quiz-question" id="quiz-question"></div>
|
|
<div class="quiz-options" id="quiz-options"></div>
|
|
<div class="quiz-nav">
|
|
<button class="quiz-next" id="quiz-next" disabled onclick="nextQuestion()">Next →</button>
|
|
</div>
|
|
</div>
|
|
<div class="quiz-result" id="quiz-result">
|
|
<h3 id="quiz-result-title"></h3>
|
|
<p id="quiz-result-text"></p>
|
|
<div style="margin-top: 24px;">
|
|
<button class="neon-btn neon-btn-primary" onclick="startQuiz()" style="font-size: 0.85rem; padding: 10px 24px;">Retake Quiz</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="neon-line"></div>
|
|
|
|
<!-- FAQ -->
|
|
<section id="faq">
|
|
<div class="section-label reveal">Knowledge Base</div>
|
|
<h2 class="section-title reveal">Frequently Asked Questions</h2>
|
|
<p class="section-desc reveal">Common questions about AI models, answered.</p>
|
|
|
|
<div class="accordion reveal">
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span>What makes AI models different from each other?</span>
|
|
<span class="accordion-arrow">▾</span>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<p>AI models differ in their architecture (transformer vs CNN vs diffusion), training data, parameter count, training methods (supervised, RLHF, etc.), context window size, modalities supported, and optimization objectives. Even models with similar architectures can produce very different results based on how they were trained and fine-tuned.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span>What is the difference between open-source and proprietary models?</span>
|
|
<span class="accordion-arrow">▾</span>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<p>Open-source models (like Llama 3, Mistral) release their weights publicly, allowing anyone to download, run, fine-tune, and study them. Proprietary models (like GPT-4, Claude) are only accessible through APIs — you can use them but can't see how they work internally. Open models offer more control and privacy; proprietary models often have better performance and ease of use.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span>What does "parameters" mean in AI models?</span>
|
|
<span class="accordion-arrow">▾</span>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<p>Parameters are the numerical weights within a neural network that are learned during training. More parameters generally means the model can learn more complex patterns, but also requires more memory and compute. A model with 7B parameters has 7 billion learnable weights. However, architecture and training quality matter as much as raw parameter count.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span>What is "context window" and why does it matter?</span>
|
|
<span class="accordion-arrow">▾</span>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<p>The context window is the maximum amount of text a model can process in a single conversation. GPT-4 handles 128K tokens (~96K words), Claude 3.5 handles 200K, and Gemini can handle over 1M. A larger context window means the model can reference more of the conversation, documents, or code at once, which is critical for long documents, codebases, and complex analysis.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span>What is MoE (Mixture of Experts)?</span>
|
|
<span class="accordion-arrow">▾</span>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<p>Mixture of Experts is an architecture where a model has many "expert" sub-networks, but only activates a few for each input. A router decides which experts to use. This means the model can have trillions of total parameters while keeping inference fast because only a fraction are active. Mixtral and possibly GPT-4 use this approach to balance scale with efficiency.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span>How do I choose the right model for my project?</span>
|
|
<span class="accordion-arrow">▾</span>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<p>Consider: (1) Task type — language, vision, audio, or multimodal. (2) Budget — proprietary APIs charge per token; open models require hardware but have no per-use cost. (3) Latency requirements — smaller models are faster. (4) Data privacy — self-hosted models keep data local. (5) Fine-tuning needs — open models allow customization. Start with benchmarks but always test with your actual use case.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion-item">
|
|
<div class="accordion-header" onclick="toggleAccordion(this)">
|
|
<span>What is RLHF and why is it important?</span>
|
|
<span class="accordion-arrow">▾</span>
|
|
</div>
|
|
<div class="accordion-body">
|
|
<p>Reinforcement Learning from Human Feedback (RLHF) is a training technique where human evaluators rank model outputs, and a reward model is trained on these preferences. This is then used to fine-tune the language model via reinforcement learning. RLHF is what makes models like ChatGPT and Claude helpful, harmless, and honest — bridging the gap between raw language modeling and useful assistant behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="logo">AI MODELS</div>
|
|
<p>An interactive guide to understanding AI model differences</p>
|
|
<div class="footer-links">
|
|
<a href="#models">Models</a>
|
|
<a href="#architecture">Architecture</a>
|
|
<a href="#compare">Compare</a>
|
|
<a href="#quiz">Quiz</a>
|
|
</div>
|
|
<p style="margin-top: 20px; font-size: 0.75rem; color: #333;">MyWeb1 © 2026</p>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|