Spaces:
Running
Running
Create I Tried Grok And I Hate That I Like Parts Of It.html
Browse files
I Tried Grok And I Hate That I Like Parts Of It.html
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>I Tried Grok And I Hate That I Like Parts Of It | FMN-GPT - CompactAI</title>
|
| 7 |
+
<link rel="stylesheet" href="bluesheet.css">
|
| 8 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 9 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400:500:600:700&family=Geist+Mono&display=swap" rel="stylesheet">
|
| 11 |
+
<style>
|
| 12 |
+
:root {
|
| 13 |
+
--blue-900: #000000;
|
| 14 |
+
--blue-800: #0a0a0a;
|
| 15 |
+
--blue-700: #111111;
|
| 16 |
+
--blue-600: #1a1a1a;
|
| 17 |
+
--blue-500: #333333;
|
| 18 |
+
--blue-400: #555555;
|
| 19 |
+
--blue-300: #777777;
|
| 20 |
+
--blue-200: #888888;
|
| 21 |
+
--blue-100: #aaaaaa;
|
| 22 |
+
--white: #ffffff;
|
| 23 |
+
--white-soft: #f5f5f5;
|
| 24 |
+
--white-muted: #e0e0e0;
|
| 25 |
+
--grid-line: rgba(255, 255, 255, 0.03);
|
| 26 |
+
--grid-line-major: rgba(255, 255, 255, 0.06);
|
| 27 |
+
--accent: #ededed;
|
| 28 |
+
--accent-muted: #888888;
|
| 29 |
+
--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
|
| 30 |
+
--font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
|
| 31 |
+
--container-max: 1100px;
|
| 32 |
+
}
|
| 33 |
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
| 34 |
+
html { font-size: 16px; scroll-behavior: smooth; }
|
| 35 |
+
body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
|
| 36 |
+
a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
|
| 37 |
+
a:hover { color: var(--accent); }
|
| 38 |
+
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
|
| 39 |
+
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; }
|
| 40 |
+
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
| 41 |
+
.nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
|
| 42 |
+
.nav-brand span { color: var(--accent); }
|
| 43 |
+
.nav-links { display: flex; gap: 32px; }
|
| 44 |
+
.nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
|
| 45 |
+
.nav-links a:hover { color: var(--white); }
|
| 46 |
+
.post { padding: 140px 0 80px; }
|
| 47 |
+
.post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
|
| 48 |
+
.post-back:hover { color: var(--accent); }
|
| 49 |
+
.post-back::before { content: '← '; }
|
| 50 |
+
.post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
|
| 51 |
+
.post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
|
| 52 |
+
.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; }
|
| 53 |
+
.post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
|
| 54 |
+
.post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
|
| 55 |
+
.post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
|
| 56 |
+
.post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
|
| 57 |
+
.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; }
|
| 58 |
+
.post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
|
| 59 |
+
.post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
|
| 60 |
+
.code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
|
| 61 |
+
.code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
|
| 62 |
+
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
|
| 63 |
+
.stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
|
| 64 |
+
.stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
|
| 65 |
+
.stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
|
| 66 |
+
.post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
|
| 67 |
+
.post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
|
| 68 |
+
footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
|
| 69 |
+
footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
|
| 70 |
+
footer a { color: var(--blue-200); }
|
| 71 |
+
footer a:hover { color: var(--accent); }
|
| 72 |
+
@media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
|
| 73 |
+
|
| 74 |
+
</style>
|
| 75 |
+
|
| 76 |
+
</head>
|
| 77 |
+
<body>
|
| 78 |
+
<nav>
|
| 79 |
+
<div class="container">
|
| 80 |
+
<a href="index.html" class="nav-brand"><span>/</span>FMN-GPT</a>
|
| 81 |
+
<div class="nav-links">
|
| 82 |
+
<a href="blog.html">Blog</a>
|
| 83 |
+
<a href="status.html">Model Status</a>
|
| 84 |
+
<a href="https://huggingface.co/CompactAI-O" target="_blank">HuggingFace Org</a>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</nav>
|
| 88 |
+
<main>
|
| 89 |
+
<article class="post">
|
| 90 |
+
<div class="container">
|
| 91 |
+
<a href="blog.html" class="post-back">Back to Blog</a>
|
| 92 |
+
<header>
|
| 93 |
+
<div class="post-meta">
|
| 94 |
+
<span class="post-date">2026-05-07</span>
|
| 95 |
+
<span class="post-tag">Industry Thoughts</span>
|
| 96 |
+
</div>
|
| 97 |
+
<h1>I Tried Grok And I Hate That I Like Parts Of It</h1>
|
| 98 |
+
</header>
|
| 99 |
+
<div class="post-body">
|
| 100 |
+
<p>I finally used Grok. It kills me to admit this. I kind of like it. I do not want to like it. I really do not want to like it. But here we are. My principles are intact. My aesthetic standards are compromised. This is uncomfortable.</p>
|
| 101 |
+
<blockquote>
|
| 102 |
+
<p>Disliking a product on principle is easy. Disliking a product while enjoying its interface is a special kind of cognitive dissonance. I am living it.</p>
|
| 103 |
+
</blockquote>
|
| 104 |
+
<h2>What I Like</h2>
|
| 105 |
+
<p>The UI is nice. That is the honest truth. The layout feels intentional. The typography is readable. The spacing is generous. The dark mode does not assault my eyes at three in the morning. Someone put thought into the visual design. Someone cared about the user experience. I appreciate that effort even when I resent its source.</p>
|
| 106 |
+
<div class="stats-grid">
|
| 107 |
+
<div class="stat-card">
|
| 108 |
+
<div class="number">1</div>
|
| 109 |
+
<div class="label">Things I Like</div>
|
| 110 |
+
</div>
|
| 111 |
+
<div class="stat-card">
|
| 112 |
+
<div class="number">3</div>
|
| 113 |
+
<div class="label">Things I Hate</div>
|
| 114 |
+
</div>
|
| 115 |
+
<div class="stat-card">
|
| 116 |
+
<div class="number">∞</div>
|
| 117 |
+
<div class="label">My Internal Conflict</div>
|
| 118 |
+
</div>
|
| 119 |
+
<div class="stat-card">
|
| 120 |
+
<div class="number">???</div>
|
| 121 |
+
<div class="label">My Regret</div>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
<p>The interface responds quickly. The input field feels polished. The conversation history is easy to navigate. These are small victories. They are also the kind of details I try to replicate in my own projects. I am taking notes. I am also feeling guilty about taking notes.</p>
|
| 125 |
+
<h2>What I Hate</h2>
|
| 126 |
+
<p>It is owned by Elon. That fact colors every interaction. Every smooth animation feels like propaganda. Every helpful response feels like marketing. I cannot separate the product from the person. I do not want to separate them. The association is intentional. The branding is deliberate. I am not fooled.</p>
|
| 127 |
+
<p>The models suck. That is the technical assessment. They produce confident nonsense. They hallucinate with authority. They struggle with basic reasoning tasks that my one million parameter Glint handles without crying. The performance does not match the presentation. The polish hides the limitations. I notice the limitations.</p>
|
| 128 |
+
<blockquote>
|
| 129 |
+
<p>A beautiful interface cannot fix a weak model. A strong brand cannot fix weak reasoning. I have learned this lesson repeatedly. I am watching it play out again.</p>
|
| 130 |
+
</blockquote>
|
| 131 |
+
<h2>The Buggy But Nice UI</h2>
|
| 132 |
+
<p>The interface is buggy. Buttons sometimes do not respond. The chat history occasionally fails to load. The formatting breaks in unpredictable ways. These bugs exist alongside the nice design. The coexistence is frustrating. The frustration is familiar. I experience similar bugs in my own projects. The difference is that my bugs do not come with a billionaire attached.</p>
|
| 133 |
+
<p>The nice UI makes the bugs more noticeable. When something looks polished, users expect it to work. When it does not work, the disappointment is sharper. I understand this dynamic. I also benefit from it when users forgive my own buggy interfaces because they appreciate the effort. The cycle continues.</p>
|
| 134 |
+
<h2>Why This Matters</h2>
|
| 135 |
+
<p>I build tiny models. I care about efficiency. I care about open access. Grok represents the opposite philosophy. It is large. It is closed. It is tied to a specific brand and a specific person. My appreciation for its UI does not change my commitment to my values. It does complicate my emotional response. That complication is worth documenting.</p>
|
| 136 |
+
<p>Good design is universal. Good design can appear anywhere. Recognizing good design does not require endorsing its source. I can acknowledge a well-executed interface while rejecting the ideology behind it. This is a nuanced position. Nuance is difficult. Nuance is necessary.</p>
|
| 137 |
+
<h2>Final Thoughts</h2>
|
| 138 |
+
<p>I tried Grok. I liked the UI. I hated the ownership. I hated the model performance. I hated the bugs. I also liked the UI. The contradiction is real. The discomfort is real. The lesson is real.</p>
|
| 139 |
+
<p>I will keep building Glint. I will keep improving Chroma TTS. I will keep shipping open models. I will keep designing interfaces that feel good to use. I will keep separating the craft from the corporation. That separation is my compass. That separation is my peace.</p>
|
| 140 |
+
<p>If you try Grok, form your own opinion. If you like the UI, enjoy it. If you hate the ownership, reject it. Both responses are valid. Both responses can coexist. I am living proof.</p>
|
| 141 |
+
<hr>
|
| 142 |
+
</div>
|
| 143 |
+
<footer class="post-footer">
|
| 144 |
+
<p>Current status: Grok tried. UI appreciated. Ownership rejected. Models criticized. Bugs noted. Principles intact. Cognitive dissonance managed. Progress is weird. Design is universal.</p>
|
| 145 |
+
</footer>
|
| 146 |
+
</div>
|
| 147 |
+
</article>
|
| 148 |
+
</main>
|
| 149 |
+
<footer>
|
| 150 |
+
<div class="container">
|
| 151 |
+
<p>Built with curiosity over compute</p>
|
| 152 |
+
<p>FMN-GPT by <a href="https://huggingface.co/CompactAI-O" target="_blank">CompactAI-O</a> | 2026</p>
|
| 153 |
+
</div>
|
| 154 |
+
</footer>
|
| 155 |
+
</body>
|
| 156 |
+
</html>
|