File size: 11,124 Bytes
114ed23 a3c06dc 0ddab7f 1e1e00e 181b1bd 473e2be 993cbbf 114ed23 fe9d0fb 114ed23 f646c79 a3c06dc 0ddab7f a3c06dc 0ddab7f a3c06dc ea40c7e a3c06dc 114ed23 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog | 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); }
.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; }
.blog-section { padding: var(--section-padding) 0; background: var(--color-bg); }
.blog-list { max-width: 800px; margin: 0 auto; }
.blog-card { background: var(--color-bg-alt); border-radius: 16px; padding: 2rem; margin-bottom: 1.5rem; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: block; text-decoration: none; }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.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-card h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.blog-card h2 a { color: var(--color-text); text-decoration: none; }
.blog-card h2 a:hover { color: var(--color-accent); }
.blog-card p { color: var(--color-text-light); margin-bottom: 1rem; }
.blog-read-more { color: var(--color-accent); font-weight: 500; font-size: 0.9375rem; }
.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>
<section class="page-header">
<div class="container">
<h1>Blog</h1>
<p>Updates on FMN-GPT development and research</p>
</div>
</section>
<section class="blog-section">
<div class="container">
<div class="blog-list" id="blog-list"></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>
<script>
const posts = [
{
"file": "blog-Your-AI-Agent-is-Lying-Behind-Your-Back.html",
"date": "2026-02-20",
"tag": "Reality Check",
"title": "Your AI Agent is Lying Behind Your Back",
"excerpt": "You know the feeling. You type a prompt. The text streams. The terminal says success. You feel like a wizard. You feel like you hacked the matrix. I am here to tell you that you are being played."
},
{
"file": "blog-The-Wasted-Precision-of-the-Output-Layer.html",
"date": "2026-02-19",
"tag": "Architecture",
"title": "The Wasted Precision of the Output Layer",
"excerpt": "We spend a lot of time optimizing attention mechanisms. We prune weights in the middle layers. We quantize activations to save memory during inference. Yet there is a massive inefficiency sitting right at the very end of the network that we almost completely ignore."
},
{
"file": "blog-the-myth-of-scalability.html",
"date": "2026-02-18",
"tag": "Architecture",
"title": "The Myth of Scalability",
"excerpt": "The prevailing narrative in artificial intelligence is simple and seductive. If you want a smarter model, you need more data. You need more parameters. You need more compute. The industry has convinced itself that intelligence is a resource problem. We just need to throw enough electricity at the wall until something truly intelligent sticks."
},
{
"file": "blog-the-memory-bottleneck.html",
"date": "2026-02-17",
"tag": "Architecture",
"title": "The Memory Bottleneck in Transformer Architecture",
"excerpt": "Transformers recompute their entire understanding for every token. What if we could offload static knowledge into a separate trainable module? Exploring external storage baked into the model without scaling parameters."
},
{
"file": "blog-makeshift-mtp.html",
"date": "2026-02-16",
"tag": "Technique",
"title": "Makeshift MTP: A dumb idea that might work",
"excerpt": "Multi-token prediction is hot right now. But what if we could fake it without retraining? Spawn multiple continuations, compute loss on all of them, and pick the winner. Crude, but it runs on any model."
},
{
"file": "blog-built-with-curiosity-over-compute.html",
"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."
}
];
function loadBlogPosts() {
const container = document.getElementById('blog-list');
if (posts.length === 0) {
container.innerHTML = '<div class="blog-empty"><p>No posts yet. Check back soon for updates.</p></div>';
return;
}
container.innerHTML = posts.map(post => `
<a href="${post.file}" class="blog-card" target="_blank">
<div class="blog-meta">
<span class="blog-date">${post.date}</span>
<span class="blog-tag">${post.tag}</span>
</div>
<h2>${post.title}</h2>
<p>${post.excerpt}</p>
<span class="blog-read-more">Read more →</span>
</a>
`).join('');
}
loadBlogPosts();
</script>
</body>
</html>
|