aidn/caveman
1
1<!DOCTYPE html>2<html lang="de">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Gemma-4 Caveman — Semantische Kompression mit Stil</title>7 <link rel="preconnect" href="https://fonts.googleapis.com">8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">10 <style>11 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }12 13 :root {14 --bg: #0a0a0b;15 --surface: #141416;16 --surface-2: #1c1c20;17 --border: #2a2a2f;18 --text: #e8e8ec;19 --text-muted: #8b8b96;20 --accent: #d4a054;21 --accent-dim: #d4a05420;22 --green: #4ade80;23 --red: #f87171;24 }25 26 html { scroll-behavior: smooth; }27 28 body {29 font-family: 'Inter', system-ui, -apple-system, sans-serif;30 background: var(--bg);31 color: var(--text);32 line-height: 1.7;33 -webkit-font-smoothing: antialiased;34 }35 36 /* ─── Hero ─── */37 .hero {38 min-height: 85vh;39 display: flex;40 flex-direction: column;41 align-items: center;42 justify-content: center;43 text-align: center;44 padding: 4rem 2rem;45 position: relative;46 overflow: hidden;47 }48 49 .hero::before {50 content: '';51 position: absolute;52 top: -40%;53 left: 50%;54 transform: translateX(-50%);55 width: 800px;56 height: 800px;57 background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);58 pointer-events: none;59 }60 61 .badge {62 display: inline-flex;63 align-items: center;64 gap: 0.5rem;65 padding: 0.4rem 1rem;66 border-radius: 100px;67 border: 1px solid var(--border);68 background: var(--surface);69 font-size: 0.8rem;70 color: var(--text-muted);71 margin-bottom: 2rem;72 letter-spacing: 0.03em;73 }74 75 .badge .dot {76 width: 6px;77 height: 6px;78 border-radius: 50%;79 background: var(--green);80 animation: pulse-dot 2s ease-in-out infinite;81 }82 83 @keyframes pulse-dot {84 0%, 100% { opacity: 0.4; }85 50% { opacity: 1; }86 }87 88 .hero h1 {89 font-size: clamp(3rem, 7vw, 5.5rem);90 font-weight: 900;91 letter-spacing: -0.03em;92 line-height: 1.05;93 margin-bottom: 1.5rem;94 }95 96 .hero h1 .rock { display: inline-block; }97 98 .hero .tagline {99 font-size: clamp(1.05rem, 2vw, 1.3rem);100 color: var(--text-muted);101 max-width: 560px;102 margin-bottom: 3rem;103 font-weight: 400;104 }105 106 .hero .tagline strong {107 color: var(--accent);108 font-weight: 600;109 }110 111 .scroll-hint {112 position: absolute;113 bottom: 2rem;114 display: flex;115 flex-direction: column;116 align-items: center;117 gap: 0.5rem;118 color: var(--text-muted);119 font-size: 0.75rem;120 letter-spacing: 0.1em;121 text-transform: uppercase;122 animation: float 3s ease-in-out infinite;123 }124 125 .scroll-hint svg {126 width: 20px;127 height: 20px;128 stroke: var(--text-muted);129 }130 131 @keyframes float {132 0%, 100% { transform: translateY(0); }133 50% { transform: translateY(6px); }134 }135 136 /* ─── Sections ─── */137 section {138 max-width: 820px;139 margin: 0 auto;140 padding: 5rem 2rem;141 }142 143 .section-label {144 font-size: 0.7rem;145 text-transform: uppercase;146 letter-spacing: 0.15em;147 color: var(--accent);148 font-weight: 600;149 margin-bottom: 1rem;150 }151 152 h2 {153 font-size: clamp(1.8rem, 4vw, 2.4rem);154 font-weight: 800;155 letter-spacing: -0.02em;156 margin-bottom: 1.5rem;157 line-height: 1.2;158 }159 160 p { color: var(--text-muted); margin-bottom: 1.2rem; }161 p strong { color: var(--text); font-weight: 600; }162 163 /* ─── Comparison Cards ─── */164 .comparison {165 display: grid;166 grid-template-columns: 1fr 1fr;167 gap: 1.5rem;168 margin: 3rem 0;169 }170 171 @media (max-width: 640px) {172 .comparison { grid-template-columns: 1fr; }173 }174 175 .card {176 background: var(--surface);177 border: 1px solid var(--border);178 border-radius: 16px;179 padding: 1.8rem;180 position: relative;181 overflow: hidden;182 }183 184 .card::before {185 content: '';186 position: absolute;187 top: 0; left: 0; right: 0;188 height: 3px;189 }190 191 .card.bad::before { background: var(--red); }192 .card.good::before { background: var(--green); }193 194 .card-label {195 font-size: 0.7rem;196 text-transform: uppercase;197 letter-spacing: 0.12em;198 font-weight: 700;199 margin-bottom: 1rem;200 }201 202 .card.bad .card-label { color: var(--red); }203 .card.good .card-label { color: var(--green); }204 205 .card pre {206 font-family: 'JetBrains Mono', monospace;207 font-size: 0.85rem;208 line-height: 1.7;209 color: var(--text);210 white-space: pre-wrap;211 word-break: break-word;212 }213 214 .card .token-count {215 display: inline-flex;216 align-items: center;217 gap: 0.4rem;218 margin-top: 1.2rem;219 padding: 0.3rem 0.7rem;220 border-radius: 6px;221 font-size: 0.75rem;222 font-weight: 600;223 font-family: 'JetBrains Mono', monospace;224 }225 226 .card.bad .token-count {227 background: #f8717115;228 color: var(--red);229 }230 231 .card.good .token-count {232 background: #4ade8015;233 color: var(--green);234 }235 236 /* ─── Rules ─── */237 .rules-grid {238 display: grid;239 grid-template-columns: 1fr 1fr;240 gap: 1rem;241 margin: 2.5rem 0;242 }243 244 @media (max-width: 640px) {245 .rules-grid { grid-template-columns: 1fr; }246 }247 248 .rule {249 background: var(--surface);250 border: 1px solid var(--border);251 border-radius: 12px;252 padding: 1.4rem;253 }254 255 .rule .emoji {256 font-size: 1.5rem;257 margin-bottom: 0.6rem;258 }259 260 .rule h3 {261 font-size: 0.95rem;262 font-weight: 700;263 margin-bottom: 0.3rem;264 }265 266 .rule p {267 font-size: 0.85rem;268 margin-bottom: 0;269 line-height: 1.5;270 }271 272 /* ─── Stats Strip ─── */273 .stats {274 display: grid;275 grid-template-columns: repeat(3, 1fr);276 gap: 1rem;277 margin: 3rem 0;278 }279 280 @media (max-width: 640px) {281 .stats { grid-template-columns: 1fr; }282 }283 284 .stat {285 background: var(--surface);286 border: 1px solid var(--border);287 border-radius: 12px;288 padding: 1.5rem;289 text-align: center;290 }291 292 .stat .number {293 font-size: 2.2rem;294 font-weight: 900;295 letter-spacing: -0.03em;296 color: var(--accent);297 }298 299 .stat .label {300 font-size: 0.8rem;301 color: var(--text-muted);302 margin-top: 0.3rem;303 }304 305 /* ─── App Embed ─── */306 .embed-section {307 max-width: 920px;308 margin: 0 auto;309 padding: 5rem 2rem;310 text-align: center;311 }312 313 @media (max-width: 768px) {314 .embed-section {315 padding: 3rem 0;316 }317 .embed-section .section-label,318 .embed-section h2,319 .embed-section > p {320 padding: 0 1.5rem;321 }322 .embed-wrapper {323 border-radius: 0;324 border-left: none;325 border-right: none;326 }327 .embed-wrapper iframe {328 height: 85vh;329 min-height: 600px;330 }331 }332 333 .embed-wrapper {334 margin-top: 2.5rem;335 border-radius: 20px;336 border: 1px solid var(--border);337 overflow: hidden;338 background: var(--surface);339 box-shadow: 0 25px 80px -20px rgba(0,0,0,0.5);340 }341 342 .embed-bar {343 display: flex;344 align-items: center;345 gap: 0.5rem;346 padding: 0.8rem 1.2rem;347 background: var(--surface-2);348 border-bottom: 1px solid var(--border);349 }350 351 .embed-bar .dot-row { display: flex; gap: 6px; }352 353 .embed-bar .dot-row span {354 width: 12px; height: 12px;355 border-radius: 50%;356 background: var(--border);357 }358 359 .embed-bar .url {360 flex: 1;361 text-align: center;362 font-size: 0.75rem;363 font-family: 'JetBrains Mono', monospace;364 color: var(--text-muted);365 }366 367 .embed-wrapper iframe {368 width: 100%;369 height: 1100px;370 border: none;371 display: block;372 }373 374 /* ─── Footer ─── */375 footer.site-footer {376 text-align: center;377 padding: 3rem 2rem 4rem;378 font-size: 0.8rem;379 color: var(--text-muted);380 border-top: 1px solid var(--border);381 max-width: 820px;382 margin: 0 auto;383 }384 385 footer.site-footer a {386 color: var(--accent);387 text-decoration: none;388 }389 390 footer.site-footer a:hover {391 text-decoration: underline;392 }393 394 /* ─── Selection ─── */395 ::selection {396 background: var(--accent);397 color: var(--bg);398 }399 </style>400</head>401<body>402 403 <!-- ─── Hero ─── -->404 <div class="hero">405 <div class="badge">406 <span class="dot"></span>407 Gemma-4-31B-IT · Live auf Hugging Face408 </div>409 <h1><span class="rock">🪨</span> Caveman</h1>410 <p class="tagline">411 31 Milliarden Parameter. Null Höflichkeit.<br>412 Ein Experiment in <strong>semantischer Kompression</strong> — weniger Tokens, gleiche Information, maximale Ironie.413 </p>414 <a class="scroll-hint" href="#idea">415 <span>Scrollen</span>416 <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>417 </a>418 </div>419 420 <!-- ─── Idee ─── -->421 <section id="idea">422 <div class="section-label">Die Idee</div>423 <h2>Was, wenn dein LLM redet wie ein Höhlenmensch?</h2>424 <p>425 Ein viraler Post zeigte: Wenn man ein großes Sprachmodell anweist, <strong>wie ein Höhlenmensch zu antworten</strong> — keine Artikel, keine Füllwörter, nur Kernbotschaft — <strong>spart man massiv Tokens</strong>. Weniger Tokens bedeuten schnellere Antworten, geringere Kosten, und oft sogar <strong>klarere Information</strong>.426 </p>427 <p>428 Das hier ist die Umsetzung als echte App: <strong>Gemma-4 Caveman</strong>. Google's 31-Milliarden-Parameter-Modell, gezähmt durch einen System-Prompt, der Höflichkeit mit dem Aussterben bestraft.429 </p>430 </section>431 432 <!-- ─── Vergleich ─── -->433 <section>434 <div class="section-label">Vorher / Nachher</div>435 <h2>Gleiche Frage. Anderer Vibe.</h2>436 <p>Links: Wie ein normales LLM antwortet. Rechts: Höhlenmensch-Modus.</p>437 438 <div class="comparison">439 <div class="card bad">440 <div class="card-label">🦕 Normales LLM</div>441 <pre>Gerne erkläre ich Ihnen, was ein Large442Language Model ist. Es handelt sich443dabei um ein neuronales Netz, das auf444sehr großen Textmengen trainiert wird,445um natürliche Sprache zu verstehen446und zu generieren. Die zugrunde447liegende Architektur ist in der Regel448ein sogenannter Transformer...</pre>449 <div class="token-count">~68 Tokens</div>450 </div>451 <div class="card good">452 <div class="card-label">🪨 Caveman</div>453 <pre>LLM bedeuten großes Sprachmodell.454Fressen riesige Textmengen.455Vorhersagen nächstes Wort.456Nutzen Transformer-Architektur.</pre>457 <div class="token-count">~22 Tokens · 68% gespart</div>458 </div>459 </div>460 </section>461 462 <!-- ─── Regeln ─── -->463 <section>464 <div class="section-label">Steinzeit-Gesetze</div>465 <h2>Die Regeln des Höhlenmenschen</h2>466 <p>Der System-Prompt erzwingt diese Gesetze. Bei Verstoß: Säbelzahntiger.</p>467 468 <div class="rules-grid">469 <div class="rule">470 <div class="emoji">✂️</div>471 <h3>Maximal 7 Wörter</h3>472 <p>Pro Satz. Weniger = besser. Grunt gut.</p>473 </div>474 <div class="rule">475 <div class="emoji">🚫</div>476 <h3>Keine Füllwörter</h3>477 <p>der/die/das/ein — wegschmeißen wie faules Mammut.</p>478 </div>479 <div class="rule">480 <div class="emoji">🗿</div>481 <h3>Infinitiv. Immer.</h3>482 <p>„lernen" statt „lernt". Höhlenmensch nicht konjugieren können.</p>483 </div>484 <div class="rule">485 <div class="emoji">💀</div>486 <h3>Null Höflichkeit</h3>487 <p>„Gerne" und „Sicher" = Schwäche = Aussterben.</p>488 </div>489 <div class="rule">490 <div class="emoji">🥩</div>491 <h3>Fleisch, nicht Knochen</h3>492 <p>Ergebnis zuerst. Keine Einleitungen. Kein Vorgeplänkel.</p>493 </div>494 <div class="rule">495 <div class="emoji">🧮</div>496 <h3>Symbole sparsam</h3>497 <p>Kurze Sätze mit Verben statt Pfeil-Ketten.</p>498 </div>499 </div>500 </section>501 502 <!-- ─── Stats ─── -->503 <section>504 <div class="stats">505 <div class="stat">506 <div class="number">31B</div>507 <div class="label">Parameter</div>508 </div>509 <div class="stat">510 <div class="number">~68%</div>511 <div class="label">Token-Einsparung</div>512 </div>513 <div class="stat">514 <div class="number">0</div>515 <div class="label">Höflichkeit</div>516 </div>517 </div>518 </section>519 520 <!-- ─── Eingebettete App ─── -->521 <div class="embed-section" id="app">522 <div class="section-label">Ausprobieren</div>523 <h2>Frag den Höhlenmenschen</h2>524 <p>Live-Demo — läuft auf Hugging Face Spaces mit Gemma-4-31B-IT.</p>525 526 <div class="embed-wrapper">527 <div class="embed-bar">528 <div class="dot-row">529 <span></span><span></span><span></span>530 </div>531 <div class="url">aidn-gemma-4-caveman.hf.space</div>532 </div>533 <iframe534 src="https://aidn-gemma-4-caveman.hf.space"535 loading="lazy"536 title="Gemma-4 Caveman Chat"537 ></iframe>538 </div>539 </div>540 541 <!-- ─── Footer ─── -->542 <footer class="site-footer">543 Gebaut mit <a href="https://huggingface.co/google/gemma-4-31B-it">Gemma-4-31B-IT</a> · Gehostet auf <a href="https://huggingface.co/spaces/aidn/gemma-4-caveman">Hugging Face Spaces</a><br>544 Keine Mammuts wurden verletzt.545 </footer>546 547</body>548</html>549