|
|
<!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> |
|
|
|
|
|
: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> |
|
|
|
