Spaces:

CompactAI-O
/

Homepage

Running

App Files Files Community

CompactAI commited on Apr 20

Commit

4ca9f37

verified ·

1 Parent(s): 45a283b

Create I Did Lots Of Things And You Can Watch.html

Browse files

Files changed (1) hide show

I Did Lots Of Things And You Can Watch.html +360 -0

I Did Lots Of Things And You Can Watch.html ADDED Viewed

	@@ -0,0 +1,360 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>I Did Lots Of Things And You Can Watch | FMN-GPT - CompactAI</title>
+    <link rel="stylesheet" href="bluesheet.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600:700&family=Geist+Mono&display=swap" rel="stylesheet">
+<style>
+        :root {
+            --blue-900: #000000;
+            --blue-800: #0a0a0a;
+            --blue-700: #111111;
+            --blue-600: #1a1a1a;
+            --blue-500: #333333;
+            --blue-400: #555555;
+            --blue-300: #777777;
+            --blue-200: #888888;
+            --blue-100: #aaaaaa;
+            --white: #ffffff;
+            --white-soft: #f5f5f5;
+            --white-muted: #e0e0e0;
+            --grid-line: rgba(255, 255, 255, 0.03);
+            --grid-line-major: rgba(255, 255, 255, 0.06);
+            --accent: #ededed;
+            --accent-muted: #888888;
+            --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
+            --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
+            --container-max: 1100px;
+        }
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        html { font-size: 16px; scroll-behavior: smooth; }
+        body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
+        a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
+        a:hover { color: var(--accent); }
+        .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
+        nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
+        nav .container { display: flex; justify-content: space-between; align-items: center; }
+        .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
+        .nav-brand span { color: var(--accent); }
+        .nav-links { display: flex; gap: 32px; }
+        .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
+        .nav-links a:hover { color: var(--white); }
+        .post { padding: 140px 0 80px; }
+        .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
+        .post-back:hover { color: var(--accent); }
+        .post-back::before { content: '← '; }
+        .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
+        .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
+        .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); background: rgba(255, 255, 255, 0.08); padding: 4px 10px; border-radius: 4px; }
+        .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
+        .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
+        .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
+        .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
+        .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
+        .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
+        .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
+        .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
+        .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
+        footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
+        footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
+        footer a { color: var(--blue-200); }
+        footer a:hover { color: var(--accent); }
+        .animation-container {
+            width: 100%;
+            height: 400px;
+            margin: 32px 0;
+            border-radius: 12px;
+            overflow: hidden;
+            position: relative;
+            background: var(--blue-800);
+            border: 2px solid var(--blue-600);
+            cursor: crosshair;
+        }
+        .animation-canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+        .animation-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: var(--white);
+            font-size: 18px;
+            font-weight: 600;
+            text-align: center;
+            pointer-events: none;
+            text-shadow: 0 0 20px rgba(237, 237, 237, 0.5);
+            z-index: 10;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 12px 24px;
+            border-radius: 8px;
+            border: 1px solid var(--blue-600);
+        }
+        .animation-hint {
+            position: absolute;
+            bottom: 12px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: var(--blue-200);
+            font-size: 12px;
+            font-family: var(--font-mono);
+            pointer-events: none;
+            opacity: 0.7;
+        }
+        @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .animation-container { height: 300px; } }
+</style>
+</head>
+<body>
+    <nav>
+        <div class="container">
+            <a href="index.html" class="nav-brand"><span>/</span>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-O" target="_blank">HuggingFace Org</a>
+            </div>
+        </div>
+    </nav>
+    <main>
+        <article class="post">
+            <div class="container">
+                <a href="blog.html" class="post-back">Back to Blog</a>
+                <header>
+                    <div class="post-meta">
+                        <span class="post-date">2026-04-19</span>
+                        <span class="post-tag">Updates</span>
+                    </div>
+                    <h1>I Did Lots Of Things And You Can Watch</h1>
+                </header>
+                <div class="post-body">
+                    <p>I did lots of things. Like, actually lots. Not the "I cleaned my room" kind of lots. The "I built stuff and partnered with people and published datasets" kind of lots. You can watch. You should watch. Or not. Your choice.</p>
+                    <blockquote>
+                        <p>When you have too many projects and not enough time to explain them all, you write a blog post that lists things and hopes people get the vibe. This is that post.</p>
+                    </blockquote>
+                    <h2>New Partners</h2>
+                    <p>I partnered with two new people. They are real people. They have HuggingFace accounts. They are helping. This is good.</p>
+                    <ul style="list-style: disc; padding-left: 20px; color: var(--blue-200); line-height: 1.7;">
+                        <li><a href="https://huggingface.co/Crownelius" target="_blank">Crownelius</a> - Doing things. Probably smart things.</li>
+                        <li><a href="https://huggingface.co/Enderchef" target="_blank">Enderchef</a> - Also doing things. Possibly cooking related. Possibly not.</li>
+                    </ul>
+                    <p>They are part of CompactAI now. Or adjacent to CompactAI. Or loosely affiliated with CompactAI. The exact legal status is unclear. The collaboration is real. That is what matters.</p>
+                    <h2>cAI-Grid Is Going Great</h2>
+                    <p>The cAI grid management system continues to develop. It is going great. That is the official statement. The unofficial statement is that it is complicated and I am tired but also excited. Both can be true.</p>
+                    <p>Sonnet and Opus are still waiting. They will train when the grid is ready. Or when I give up and use a single GPU for weeks. Or when magic happens. Progress is weird.</p>
+                    <h2>New Dataset Published</h2>
+                    <p>I published a new dataset. It is called cAI-PRISM-1600. It has 1600 examples of Q&A with about 48 tokens per token. That is dense. That is efficient. That is the point.</p>
+                    <div class="code-block">
+                        <span class="comment"># Dataset specs because numbers are fun</span><br>
+                        Name: cAI-PRISM-1600<br>
+                        Examples: 1600<br>
+                        Format: Q&A pairs<br>
+                        Density: ~48 tokens per token<br>
+                        Location: HuggingFace<br>
+                        <span class="comment"># Simple. Dense. Probably useful.</span>
+                    </div>
+                    <p>You can find it on HuggingFace. You can use it. You can break it. You can tell me if it works. That is how open source works. That is how learning works. That is how I work.</p>
+                    <h2>UI Re-Skinned</h2>
+                    <p>I re-skinned the UI. It looks different now. It looks better. Or worse. Or just different. You decide. I like it. That is enough for me.</p>
+                    <p>The colors changed. The layout changed. The vibes changed. Everything is slightly new. Nothing is fundamentally different. This is progress. This is design. This is me clicking buttons until it looks right.</p>
+                    <h3 style="color: var(--white); margin: 32px 0 16px; font-size: 20px;">Now I can do this!</h3>
+                    <div class="animation-container">
+                        <div class="animation-overlay">✨ Interactive Particle Playground ✨<br><span style="font-size: 12px; font-weight: 400; opacity: 0.8;">Move mouse • Click to explode • Have fun</span></div>
+                        <div class="animation-hint">This is just for fun. Not a neural net. Not science. Just vibes.</div>
+                        <canvas class="animation-canvas" id="funCanvas"></canvas>
+                    </div>
+                    <h2>Next Haiku Additions</h2>
+                    <p>The next Haiku model is getting new features. I am adding things. I am not explaining them. That is the rule. Here is the list:</p>
+                    <ul style="list-style: disc; padding-left: 20px; color: var(--blue-200); line-height: 1.7;">
+                        <li>Latent reasoning</li>
+                        <li>SleepGate</li>
+                        <li>TRIM-KV retention gate (learned-eviction complement to SleepGate)</li>
+                    </ul>
+                    <p>That is all you get. That is all I am saying. The rest is mystery. The rest is future blog posts. The rest is you waiting and wondering. This is fun. This is marketing. This is me being cryptic on purpose.</p>
+                    <h2>Why This Matters</h2>
+                    <p>I did lots of things. I partnered with people. I built systems. I published data. I changed colors. I added features. I did not explain everything. This is my style. This is my pace. This is my blog.</p>
+                    <p>If you want details, ask. If you want code, look. If you want results, wait. Everything is happening. Everything is moving. Everything is slightly chaotic. This is how it goes.</p>
+                    <h2>Final Thoughts</h2>
+                    <p>I did lots of things. You can watch. You can join. You can ignore. All outcomes are valid. All paths are possible. All progress is weird.</p>
+                    <p>Check the links. Check the datasets. Check the UI. Check the next Haiku when it drops. Or do not. Your choice. Your journey. Your weird.</p>
+                    <p>I will keep doing things. I will keep posting updates. I will keep being cryptic about features. This is the cycle. This is the vibe. This is the blog.</p>
+                    <hr>
+                </div>
+                <footer class="post-footer">
+                    <p>Current status: Lots of things done. Partners added. Dataset published. UI re-skinned. Haiku features queued. Explanations withheld. Progress is weird. Vibes are high.</p>
+                </footer>
+            </div>
+        </article>
+    </main>
+    <footer>
+        <div class="container">
+            <p>Built with curiosity over compute</p>
+            <p>FMN-GPT by <a href="https://huggingface.co/CompactAI-O" target="_blank">CompactAI-O</a> | 2026</p>
+        </div>
+    </footer>
+    <script>
+        const canvas = document.getElementById('funCanvas');
+        const ctx = canvas.getContext('2d');
+        let width, height;
+        let particles = [];
+        let mouseX = 0, mouseY = 0;
+        let mouseActive = false;
+        const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#95e1d3', '#f38181', '#aa96da', '#fcbad3', '#a8d8ea'];
+        function resize() {
+            const container = canvas.parentElement;
+            width = container.clientWidth;
+            height = container.clientHeight;
+            canvas.width = width;
+            canvas.height = height;
+        }
+        class Particle {
+            constructor(x, y, isExplosion = false) {
+                this.x = x || Math.random() * width;
+                this.y = y || Math.random() * height;
+                this.vx = isExplosion ? (Math.random() - 0.5) * 15 : (Math.random() - 0.5) * 2;
+                this.vy = isExplosion ? (Math.random() - 0.5) * 15 : (Math.random() - 0.5) * 2;
+                this.radius = isExplosion ? Math.random() * 8 + 4 : Math.random() * 4 + 2;
+                this.color = colors[Math.floor(Math.random() * colors.length)];
+                this.life = isExplosion ? 1 : Infinity;
+                this.decay = isExplosion ? 0.02 : 0;
+                this.trail = [];
+                this.maxTrail = isExplosion ? 10 : 0;
+            }
+            update() {
+                if (this.maxTrail > 0) {
+                    this.trail.push({x: this.x, y: this.y});
+                    if (this.trail.length > this.maxTrail) this.trail.shift();
+                }
+                this.x += this.vx;
+                this.y += this.vy;
+                this.life -= this.decay;
+                if (mouseActive) {
+                    const dx = this.x - mouseX;
+                    const dy = this.y - mouseY;
+                    const dist = Math.sqrt(dx * dx + dy * dy);
+                    if (dist < 100) {
+                        const force = (100 - dist) / 100;
+                        this.vx += (dx / dist) * force * 0.5;
+                        this.vy += (dy / dist) * force * 0.5;
+                    }
+                }
+                if (this.x < -20 || this.x > width + 20) this.vx *= -0.9;
+                if (this.y < -20 || this.y > height + 20) this.vy *= -0.9;
+                this.vx *= 0.99;
+                this.vy *= 0.99;
+            }
+            draw() {
+                if (this.trail.length > 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(this.trail[0].x, this.trail[0].y);
+                    for (let i = 1; i < this.trail.length; i++) {
+                        ctx.lineTo(this.trail[i].x, this.trail[i].y);
+                    }
+                    ctx.strokeStyle = this.color + '40';
+                    ctx.lineWidth = this.radius * 0.5;
+                    ctx.stroke();
+                }
+                const gradient = ctx.createRadialGradient(
+                    this.x, this.y, 0,
+                    this.x, this.y, this.radius * 2
+                );
+                gradient.addColorStop(0, this.color);
+                gradient.addColorStop(0.5, this.color + '80');
+                gradient.addColorStop(1, this.color + '00');
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius * 2, 0, Math.PI * 2);
+                ctx.fillStyle = gradient;
+                ctx.fill();
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+                ctx.fillStyle = this.color;
+                ctx.fill();
+            }
+            isDead() {
+                return this.life <= 0;
+            }
+        }
+        function init() {
+            resize();
+            particles = [];
+            for (let i = 0; i < 30; i++) {
+                particles.push(new Particle());
+            }
+        }
+        function createExplosion(x, y) {
+            for (let i = 0; i < 20; i++) {
+                particles.push(new Particle(x, y, true));
+            }
+        }
+        function animate() {
+            ctx.fillStyle = 'rgba(10, 10, 10, 0.15)';
+            ctx.fillRect(0, 0, width, height);
+            particles = particles.filter(p => !p.isDead());
+            if (particles.length < 60 && Math.random() < 0.05) {
+                particles.push(new Particle());
+            }
+            particles.forEach(particle => {
+                particle.update();
+                particle.draw();
+            });
+            requestAnimationFrame(animate);
+        }
+        window.addEventListener('resize', resize);
+        canvas.addEventListener('mousemove', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            mouseX = e.clientX - rect.left;
+            mouseY = e.clientY - rect.top;
+            mouseActive = true;
+        });
+        canvas.addEventListener('mouseleave', () => {
+            mouseActive = false;
+        });
+        canvas.addEventListener('click', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            createExplosion(x, y);
+        });
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            const rect = canvas.getBoundingClientRect();
+            const touch = e.touches[0];
+            const x = touch.clientX - rect.left;
+            const y = touch.clientY - rect.top;
+            createExplosion(x, y);
+        });
+        init();
+        animate();
+    </script>
+</body>
+</html>