File size: 13,048 Bytes
a3c06dc 5957d6c a3c06dc 5957d6c a3c06dc 5957d6c a3c06dc 5957d6c a3c06dc 5957d6c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Model Status | FMN-GPT - CompactAI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* FMN-GPT Website Styles */
:root {
--color-bg: #faf8f5;
--color-bg-alt: #f5f0e8;
--color-bg-dark: #1a1815;
--color-bg-dark-alt: #252220;
--color-accent: #e85d3b;
--color-accent-light: #ff8a6b;
--color-accent-dark: #c44a2d;
--color-secondary: #d4a853;
--color-secondary-light: #e8c87a;
--color-text: #2d2a26;
--color-text-light: #6b6560;
--color-text-muted: #9a948d;
--color-border: #e5e0d8;
--color-border-dark: #3d3a36;
--color-success: #50c878;
--gradient-warm: linear-gradient(135deg, #e85d3b 0%, #d4a853 100%);
--gradient-dark: linear-gradient(135deg, #1a1815 0%, #2d2a26 100%);
--shadow-sm: 0 2px 8px rgba(45, 42, 38, 0.08);
--shadow-md: 0 4px 20px rgba(45, 42, 38, 0.12);
--shadow-lg: 0 8px 40px rgba(45, 42, 38, 0.16);
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--container-max: 1200px;
--section-padding: 100px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
html, body { height: 100%; }
body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-text); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; color: var(--color-text); }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }
p { margin-bottom: 1.5rem; color: var(--color-text-light); }
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-accent-dark); }
code { font-family: var(--font-mono); background: var(--color-bg-alt); padding: 0.2em 0.5em; border-radius: 4px; font-size: 0.9em; color: var(--color-accent-dark); }
pre { font-family: var(--font-mono); background: var(--color-bg-dark); color: #f5f0e8; padding: 1.5rem; border-radius: 12px; overflow-x: auto; font-size: 0.875rem; line-height: 1.6; }
pre code { background: none; padding: 0; color: inherit; }
blockquote { border-left: 4px solid var(--color-accent); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; font-size: 1.25rem; color: var(--color-text); }
.section-title { text-align: center; margin-bottom: 1rem; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--gradient-warm); margin: 1rem auto 0; border-radius: 2px; }
.section-subtitle { text-align: center; color: var(--color-text-muted); font-size: 1.125rem; margin-bottom: 3rem; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
.main-nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(26, 24, 21, 0.95); backdrop-filter: blur(10px); z-index: 1000; padding: 1rem 0; }
.main-nav .container { display: flex; justify-content: space-between; align-items: center; }
.nav-brand { color: white; font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { color: var(--color-text-muted); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--color-accent); }
.footer { padding: 3rem 0; background: var(--color-bg-dark); text-align: center; }
.footer-text { color: white; font-size: 1.125rem; margin-bottom: 0.5rem; }
.footer-subtext { color: var(--color-text-muted); font-size: 0.875rem; margin: 0; }
.page-header { padding: 8rem 0 4rem; background: var(--color-bg-dark); text-align: center; }
.page-header h1 { color: white; margin-bottom: 0.5rem; }
.page-header p { color: var(--color-text-muted); font-size: 1.125rem; margin: 0; }
.status-section { padding: var(--section-padding) 0; background: var(--color-bg); }
.status-overview { max-width: 600px; margin: 0 auto 4rem; }
.status-card { background: var(--color-bg-alt); border-radius: 20px; padding: 2rem; text-align: center; }
.status-card h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.status-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 1rem; border-radius: 50px; margin-bottom: 1.5rem; }
.status-badge.in-progress { background: rgba(232, 93, 59, 0.15); color: var(--color-accent); }
.status-badge.complete { background: rgba(80, 200, 120, 0.15); color: var(--color-success); }
.status-details { text-align: left; }
.status-row { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.status-row:last-child { border-bottom: none; }
.status-row span:first-child { color: var(--color-text-muted); }
.status-row span:last-child { font-weight: 500; }
.metrics-section { max-width: 900px; margin: 0 auto 4rem; }
.metrics-section h3 { text-align: center; margin-bottom: 2rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; }
.metric-card { background: var(--color-bg-alt); border-radius: 12px; padding: 1.5rem; text-align: center; }
.metric-value { font-size: 2rem; font-weight: 700; color: var(--color-accent); margin-bottom: 0.25rem; }
.metric-label { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.features-section { max-width: 700px; margin: 0 auto 4rem; }
.features-section h3 { text-align: center; margin-bottom: 1.5rem; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.feature-toggle { background: var(--color-bg-alt); border-radius: 12px; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; border: 2px solid transparent; }
.feature-toggle.enabled { border-color: rgba(80, 200, 120, 0.3); }
.feature-toggle.disabled { opacity: 0.6; }
.feature-name { font-weight: 500; color: var(--color-text); }
.feature-status { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 50px; background: rgba(80, 200, 120, 0.15); color: var(--color-success); }
.feature-toggle.disabled .feature-status { background: rgba(154, 148, 141, 0.15); color: var(--color-text-muted); }
.availability-section { max-width: 600px; margin: 0 auto; text-align: center; }
.availability-section h3 { margin-bottom: 1rem; }
.availability-section p { color: var(--color-text-light); margin-bottom: 1.5rem; }
.availability-link { display: inline-block; background: var(--color-accent); color: white; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; text-decoration: none; }
.availability-link:hover { background: var(--color-accent-dark); color: white; }
.disclaimer-text { text-align: center; color: var(--color-text-muted); font-size: 0.875rem; font-style: italic; margin-top: 1rem; margin-bottom: 0; }
@media (max-width: 768px) { :root { --section-padding: 60px; } }
</style>
</head>
<body>
<nav class="main-nav">
<div class="container">
<a href="index.html" class="nav-brand">FMN-GPT</a>
<div class="nav-links">
<a href="blog.html">Blog</a>
<a href="status.html">Model Status</a>
<a href="https://huggingface.co/CompactAI" target="_blank">HuggingFace</a>
</div>
</div>
</nav>
<main>
<section class="page-header">
<div class="container">
<h1>Website Status</h1>
<p>Progress on our beta tester website</p>
</div>
</section>
<section class="status-section">
<div class="container">
<div class="status-overview">
<div class="status-card">
<h3>Beta Tester Website</h3>
<div class="status-badge in-progress">In Development</div>
<div class="status-details">
<div class="status-row">
<span>Vocab Size</span>
<span>491</span>
</div>
<div class="status-row">
<span>Architecture</span>
<span>FMN Transformer</span>
</div>
<div class="status-row">
<span>Tokenization</span>
<span>Character-level</span>
</div>
<div class="status-row">
<span>Availability</span>
<span>In Progress</span>
</div>
</div>
</div>
</div>
<div class="metrics-section">
<h3>Model Specifications (Subject to Change)</h3>
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-value">112</div>
<div class="metric-label">Model Dimension</div>
</div>
<div class="metric-card">
<div class="metric-value">6</div>
<div class="metric-label">Layers</div>
</div>
<div class="metric-card">
<div class="metric-value">4</div>
<div class="metric-label">Attention Heads</div>
</div>
<div class="metric-card">
<div class="metric-value">65K</div>
<div class="metric-label">Context Length</div>
</div>
<div class="metric-card">
<div class="metric-value">40</div>
<div class="metric-label">FMN Rank</div>
</div>
<div class="metric-card">
<div class="metric-value">120</div>
<div class="metric-label">Max Loops/Neuron</div>
</div>
</div>
</div>
<div class="features-section">
<h3>Feature Flags</h3>
<div class="features-grid">
<div class="feature-toggle enabled">
<span class="feature-name">Dynamic Routing</span>
<span class="feature-status">REINFORCE based</span>
</div>
<div class="feature-toggle enabled">
<span class="feature-name">QK Normalization</span>
<span class="feature-status">Enabled</span>
</div>
<div class="feature-toggle enabled">
<span class="feature-name">Gated Residuals</span>
<span class="feature-status">Enabled</span>
</div>
<div class="feature-toggle enabled">
<span class="feature-name">Recurrent Mixer</span>
<span class="feature-status">Enabled</span>
</div>
<div class="feature-toggle disabled">
<span class="feature-name">SwiGLU FFN</span>
<span class="feature-status">Disabled</span>
</div>
</div>
</div>
<div class="availability-section">
<h3>Beta Access</h3>
<p>We are working on a beta tester website so people can experience the pain of creating an AI with us.</p>
<a href="https://huggingface.co/CompactAI" target="_blank" class="availability-link">View CompactAI on HuggingFace</a>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-content">
<p class="footer-text">Built with curiosity over compute.</p>
<p class="footer-subtext">FMN-GPT by <a href="https://huggingface.co/CompactAI" target="_blank">CompactAI</a> - 2026</p>
</div>
</div>
</footer>
</body>
</html>
|