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