File size: 14,650 Bytes
a3c06dc |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post | 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;
--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); }
@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; }
.blog-post-section { padding: var(--section-padding) 0; background: var(--color-bg); flex: 1; }
.blog-post-content { max-width: 700px; margin: 0 auto; }
.blog-loading { text-align: center; color: var(--color-text-muted); padding: 4rem 0; }
.blog-back { display: inline-block; color: var(--color-accent); font-weight: 500; margin-bottom: 2rem; text-decoration: none; }
.blog-back:hover { color: var(--color-accent-dark); }
.blog-post-header { margin-bottom: 3rem; }
.blog-post-header h1 { margin-top: 1rem; }
.blog-post-body p { font-size: 1.125rem; line-height: 1.8; margin-bottom: 1.75rem; color: var(--color-text); }
.blog-post-body p:first-of-type { font-size: 1.25rem; }
.blog-post-body h1 { font-size: 2rem; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-border); }
.blog-post-body h2 { font-size: 1.6rem; margin: 2rem 0 0.8rem; color: var(--color-accent); }
.blog-post-body h3 { font-size: 1.3rem; margin: 1.5rem 0 0.6rem; color: var(--color-text); }
.blog-post-body blockquote { border-left: 4px solid var(--color-accent); padding: 1rem 1.5rem; margin: 2rem 0; background: var(--color-bg-alt); border-radius: 0 8px 8px 0; font-style: italic; font-size: 1.1rem; color: var(--color-text); }
.blog-post-body blockquote p { margin: 0; }
.blog-post-body ul, .blog-post-body ol { margin: 1.5rem 0; padding-left: 1.5rem; }
.blog-post-body li { margin-bottom: 0.75rem; color: var(--color-text); line-height: 1.7; }
.blog-post-body ul li { list-style-type: disc; }
.blog-post-body ol li { list-style-type: decimal; }
.blog-post-body hr { border: none; height: 2px; background: linear-gradient(to right, transparent, var(--color-border), transparent); margin: 3rem 0; }
.blog-post-body pre { background: var(--color-bg-dark); color: #f5f0e8; padding: 1.5rem; border-radius: 12px; overflow-x: auto; margin: 1.5rem 0; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.6; }
.blog-post-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.blog-post-body code { font-family: var(--font-mono); background: var(--color-bg-alt); padding: 0.2em 0.5em; border-radius: 4px; font-size: 0.85em; color: var(--color-accent-dark); }
.blog-post-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.blog-post-body a:hover { color: var(--color-accent-dark); }
.blog-post-body strong { color: var(--color-text); font-weight: 600; }
.blog-post-body em { color: var(--color-text); }
.blog-post-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 2rem 0; }
.blog-meta { display: flex; gap: 1rem; margin-bottom: 1rem; }
.blog-date { color: var(--color-text-muted); font-size: 0.875rem; }
.blog-tag { background: rgba(232, 93, 59, 0.1); color: var(--color-accent); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-empty { text-align: center; padding: 4rem 2rem; color: var(--color-text-muted); }
.blog-empty p { margin: 0; font-size: 1.125rem; }
@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>
<article class="blog-post-section" id="blog-post">
<div class="container">
<div class="blog-post-content" id="blog-post-content">
<p class="blog-loading">Loading...</p>
</div>
</div>
</article>
</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>
<script>
const posts = [
{
"slug": "built-with-curiosity-over-compute",
"date": "2026-02-15",
"tag": "Philosophy",
"title": "Built with curiosity over compute.",
"excerpt": "There's a strange pressure in tech circles that every idea must be revolutionary, every project must be scalable, every experiment must lead somewhere. We disagree. Ideas don't have to be good to exist. They just have to exist.",
"content": "There's a strange pressure in tech circles. Every idea must be revolutionary. Every project must be scalable. Every experiment must lead somewhere worth going. If it's going to change the world, why build it? If it's going to beat the state of the art, why publish it? If it's going to get thousands of GitHub stars, why open source it?\n\nWe've internalized this idea that only \"good\" ideas deserve to exist. That only projects with clear paths to success are worth starting. That only experiments with predictable outcomes are worth running.\n\nBut here's the thing: FMN-GPT started as a weird question. What if a model could be small by design, avoiding compression entirely?\n\nWas that a good idea? Honestly, we still don't know. The model has ~100K parameters. It might fail. It might be a dead end. It might teach us something unexpected. And that's exactly the point.\n\nThe phrase 'Built with curiosity over compute' goes beyond a tagline. A philosophy drives our work. We build because we're curious, without needing infinite resources to throw at problems. A half-baked idea explored on a single GPU matters more than a perfect idea that never leaves the whiteboard.\n\nThis project exists because someone got curious. They lacked funding. They lacked a roadmap to success. They lacked certainty it would work. They just wanted to see what would happen.\n\nWhen I wiped my HuggingFace profile clean and started over, people probably thought I was crazy. Dozens of compressed models, gone. Why? Because quantity was masking the real problem. I was cloning and shrinking other people's work, avoiding building anything new. The work lacked genuine exploration. It was pure optimization.\n\nAnd optimization without exploration is just a race to the bottom.\n\nBad ideas teach us. Weird experiments surprise us. Small projects accumulate into something bigger.\n\nThe character-level tokenization in FMN-GPT might be inefficient compared to BPE. The recurrent mixer might add unnecessary complexity. The dynamic routing might be computationally expensive for minimal gain. But we're building it anyway, because we want to see what happens.\n\nSo here's our invitation to you: build the weird thing. Run the silly experiment. Ask the naive question. Not everything needs to be production-ready. Not everything needs to beat a baseline. Sometimes the journey itself is the point.\n\nCuriosity is undervalued. Compute is overvalued. Let's fix that balance.\n\n---\n\n*This is the first in a series of posts about the philosophy behind FMN-GPT. Next time, we'll talk about why character-level tokenization is both terrible and fascinating.*"
}
];
function parseMarkdown(text) {
let html = text;
html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
html = html.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre><code class="language-$1">$2</code></pre>');
html = html.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>');
html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
html = html.replace(/^---$/gm, '<hr>');
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
html = html.replace(/\n\n/g, '</p><p>');
html = '<p>' + html + '</p>';
html = html.replace(/<p><\/p>/g, '');
html = html.replace(/<p>(<h[1-6]>)/g, '$1');
html = html.replace(/(<\/h[1-6]>)<\/p>/g, '$1');
html = html.replace(/<p>(<blockquote>)/g, '$1');
html = html.replace(/(<\/blockquote>)<\/p>/g, '$1');
html = html.replace(/<p>(<pre>)/g, '$1');
html = html.replace(/(<\/pre>)<\/p>/g, '$1');
html = html.replace(/<p>(<ul>)/g, '$1');
html = html.replace(/(<\/ul>)<\/p>/g, '$1');
html = html.replace(/<p>(<hr>)<\/p>/g, '$1');
return html;
}
function loadBlogPost() {
const container = document.getElementById('blog-post-content');
const params = new URLSearchParams(window.location.search);
const slug = params.get('slug');
if (!slug) {
window.location.href = 'blog.html';
return;
}
const post = posts.find(p => p.slug === slug);
if (!post) {
container.innerHTML = '<div class="blog-empty"><p>Post not found. <a href="blog.html">Return to blog</a></p></div>';
return;
}
document.title = `${post.title} | FMN-GPT - CompactAI`;
const contentHtml = parseMarkdown(post.content);
container.innerHTML = `
<a href="blog.html" class="blog-back">← Back to Blog</a>
<header class="blog-post-header">
<div class="blog-meta">
<span class="blog-date">${post.date}</span>
<span class="blog-tag">${post.tag}</span>
</div>
<h1>${post.title}</h1>
</header>
<div class="blog-post-body">
${contentHtml}
</div>
`;
}
loadBlogPost();
</script>
</body>
</html> |