| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Gemma-4 Caveman — Semantische Kompression mit Stil</title> |
| <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=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> |
| <style> |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| :root { |
| --bg: #0a0a0b; |
| --surface: #141416; |
| --surface-2: #1c1c20; |
| --border: #2a2a2f; |
| --text: #e8e8ec; |
| --text-muted: #8b8b96; |
| --accent: #d4a054; |
| --accent-dim: #d4a05420; |
| --green: #4ade80; |
| --red: #f87171; |
| } |
| |
| html { scroll-behavior: smooth; } |
| |
| body { |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| line-height: 1.7; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| |
| .hero { |
| min-height: 85vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| padding: 4rem 2rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero::before { |
| content: ''; |
| position: absolute; |
| top: -40%; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 800px; |
| height: 800px; |
| background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%); |
| pointer-events: none; |
| } |
| |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.4rem 1rem; |
| border-radius: 100px; |
| border: 1px solid var(--border); |
| background: var(--surface); |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| margin-bottom: 2rem; |
| letter-spacing: 0.03em; |
| } |
| |
| .badge .dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--green); |
| animation: pulse-dot 2s ease-in-out infinite; |
| } |
| |
| @keyframes pulse-dot { |
| 0%, 100% { opacity: 0.4; } |
| 50% { opacity: 1; } |
| } |
| |
| .hero h1 { |
| font-size: clamp(3rem, 7vw, 5.5rem); |
| font-weight: 900; |
| letter-spacing: -0.03em; |
| line-height: 1.05; |
| margin-bottom: 1.5rem; |
| } |
| |
| .hero h1 .rock { display: inline-block; } |
| |
| .hero .tagline { |
| font-size: clamp(1.05rem, 2vw, 1.3rem); |
| color: var(--text-muted); |
| max-width: 560px; |
| margin-bottom: 3rem; |
| font-weight: 400; |
| } |
| |
| .hero .tagline strong { |
| color: var(--accent); |
| font-weight: 600; |
| } |
| |
| .scroll-hint { |
| position: absolute; |
| bottom: 2rem; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0.5rem; |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| .scroll-hint svg { |
| width: 20px; |
| height: 20px; |
| stroke: var(--text-muted); |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(6px); } |
| } |
| |
| |
| section { |
| max-width: 820px; |
| margin: 0 auto; |
| padding: 5rem 2rem; |
| } |
| |
| .section-label { |
| font-size: 0.7rem; |
| text-transform: uppercase; |
| letter-spacing: 0.15em; |
| color: var(--accent); |
| font-weight: 600; |
| margin-bottom: 1rem; |
| } |
| |
| h2 { |
| font-size: clamp(1.8rem, 4vw, 2.4rem); |
| font-weight: 800; |
| letter-spacing: -0.02em; |
| margin-bottom: 1.5rem; |
| line-height: 1.2; |
| } |
| |
| p { color: var(--text-muted); margin-bottom: 1.2rem; } |
| p strong { color: var(--text); font-weight: 600; } |
| |
| |
| .comparison { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 1.5rem; |
| margin: 3rem 0; |
| } |
| |
| @media (max-width: 640px) { |
| .comparison { grid-template-columns: 1fr; } |
| } |
| |
| .card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| padding: 1.8rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .card::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; |
| height: 3px; |
| } |
| |
| .card.bad::before { background: var(--red); } |
| .card.good::before { background: var(--green); } |
| |
| .card-label { |
| font-size: 0.7rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| } |
| |
| .card.bad .card-label { color: var(--red); } |
| .card.good .card-label { color: var(--green); } |
| |
| .card pre { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.85rem; |
| line-height: 1.7; |
| color: var(--text); |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
| |
| .card .token-count { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.4rem; |
| margin-top: 1.2rem; |
| padding: 0.3rem 0.7rem; |
| border-radius: 6px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .card.bad .token-count { |
| background: #f8717115; |
| color: var(--red); |
| } |
| |
| .card.good .token-count { |
| background: #4ade8015; |
| color: var(--green); |
| } |
| |
| |
| .rules-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 1rem; |
| margin: 2.5rem 0; |
| } |
| |
| @media (max-width: 640px) { |
| .rules-grid { grid-template-columns: 1fr; } |
| } |
| |
| .rule { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 1.4rem; |
| } |
| |
| .rule .emoji { |
| font-size: 1.5rem; |
| margin-bottom: 0.6rem; |
| } |
| |
| .rule h3 { |
| font-size: 0.95rem; |
| font-weight: 700; |
| margin-bottom: 0.3rem; |
| } |
| |
| .rule p { |
| font-size: 0.85rem; |
| margin-bottom: 0; |
| line-height: 1.5; |
| } |
| |
| |
| .stats { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 1rem; |
| margin: 3rem 0; |
| } |
| |
| @media (max-width: 640px) { |
| .stats { grid-template-columns: 1fr; } |
| } |
| |
| .stat { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 1.5rem; |
| text-align: center; |
| } |
| |
| .stat .number { |
| font-size: 2.2rem; |
| font-weight: 900; |
| letter-spacing: -0.03em; |
| color: var(--accent); |
| } |
| |
| .stat .label { |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| margin-top: 0.3rem; |
| } |
| |
| |
| .embed-section { |
| max-width: 920px; |
| margin: 0 auto; |
| padding: 5rem 2rem; |
| text-align: center; |
| } |
| |
| @media (max-width: 768px) { |
| .embed-section { |
| padding: 3rem 0; |
| } |
| .embed-section .section-label, |
| .embed-section h2, |
| .embed-section > p { |
| padding: 0 1.5rem; |
| } |
| .embed-wrapper { |
| border-radius: 0; |
| border-left: none; |
| border-right: none; |
| } |
| .embed-wrapper iframe { |
| height: 85vh; |
| min-height: 600px; |
| } |
| } |
| |
| .embed-wrapper { |
| margin-top: 2.5rem; |
| border-radius: 20px; |
| border: 1px solid var(--border); |
| overflow: hidden; |
| background: var(--surface); |
| box-shadow: 0 25px 80px -20px rgba(0,0,0,0.5); |
| } |
| |
| .embed-bar { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.8rem 1.2rem; |
| background: var(--surface-2); |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .embed-bar .dot-row { display: flex; gap: 6px; } |
| |
| .embed-bar .dot-row span { |
| width: 12px; height: 12px; |
| border-radius: 50%; |
| background: var(--border); |
| } |
| |
| .embed-bar .url { |
| flex: 1; |
| text-align: center; |
| font-size: 0.75rem; |
| font-family: 'JetBrains Mono', monospace; |
| color: var(--text-muted); |
| } |
| |
| .embed-wrapper iframe { |
| width: 100%; |
| height: 1100px; |
| border: none; |
| display: block; |
| } |
| |
| |
| footer.site-footer { |
| text-align: center; |
| padding: 3rem 2rem 4rem; |
| font-size: 0.8rem; |
| color: var(--text-muted); |
| border-top: 1px solid var(--border); |
| max-width: 820px; |
| margin: 0 auto; |
| } |
| |
| footer.site-footer a { |
| color: var(--accent); |
| text-decoration: none; |
| } |
| |
| footer.site-footer a:hover { |
| text-decoration: underline; |
| } |
| |
| |
| ::selection { |
| background: var(--accent); |
| color: var(--bg); |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <div class="hero"> |
| <div class="badge"> |
| <span class="dot"></span> |
| Gemma-4-31B-IT · Live auf Hugging Face |
| </div> |
| <h1><span class="rock">🪨</span> Caveman</h1> |
| <p class="tagline"> |
| 31 Milliarden Parameter. Null Höflichkeit.<br> |
| Ein Experiment in <strong>semantischer Kompression</strong> — weniger Tokens, gleiche Information, maximale Ironie. |
| </p> |
| <a class="scroll-hint" href="#idea"> |
| <span>Scrollen</span> |
| <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg> |
| </a> |
| </div> |
|
|
| |
| <section id="idea"> |
| <div class="section-label">Die Idee</div> |
| <h2>Was, wenn dein LLM redet wie ein Höhlenmensch?</h2> |
| <p> |
| 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>. |
| </p> |
| <p> |
| 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. |
| </p> |
| </section> |
|
|
| |
| <section> |
| <div class="section-label">Vorher / Nachher</div> |
| <h2>Gleiche Frage. Anderer Vibe.</h2> |
| <p>Links: Wie ein normales LLM antwortet. Rechts: Höhlenmensch-Modus.</p> |
|
|
| <div class="comparison"> |
| <div class="card bad"> |
| <div class="card-label">🦕 Normales LLM</div> |
| <pre>Gerne erkläre ich Ihnen, was ein Large |
| Language Model ist. Es handelt sich |
| dabei um ein neuronales Netz, das auf |
| sehr großen Textmengen trainiert wird, |
| um natürliche Sprache zu verstehen |
| und zu generieren. Die zugrunde |
| liegende Architektur ist in der Regel |
| ein sogenannter Transformer...</pre> |
| <div class="token-count">~68 Tokens</div> |
| </div> |
| <div class="card good"> |
| <div class="card-label">🪨 Caveman</div> |
| <pre>LLM bedeuten großes Sprachmodell. |
| Fressen riesige Textmengen. |
| Vorhersagen nächstes Wort. |
| Nutzen Transformer-Architektur.</pre> |
| <div class="token-count">~22 Tokens · 68% gespart</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section> |
| <div class="section-label">Steinzeit-Gesetze</div> |
| <h2>Die Regeln des Höhlenmenschen</h2> |
| <p>Der System-Prompt erzwingt diese Gesetze. Bei Verstoß: Säbelzahntiger.</p> |
|
|
| <div class="rules-grid"> |
| <div class="rule"> |
| <div class="emoji">✂️</div> |
| <h3>Maximal 7 Wörter</h3> |
| <p>Pro Satz. Weniger = besser. Grunt gut.</p> |
| </div> |
| <div class="rule"> |
| <div class="emoji">🚫</div> |
| <h3>Keine Füllwörter</h3> |
| <p>der/die/das/ein — wegschmeißen wie faules Mammut.</p> |
| </div> |
| <div class="rule"> |
| <div class="emoji">🗿</div> |
| <h3>Infinitiv. Immer.</h3> |
| <p>„lernen" statt „lernt". Höhlenmensch nicht konjugieren können.</p> |
| </div> |
| <div class="rule"> |
| <div class="emoji">💀</div> |
| <h3>Null Höflichkeit</h3> |
| <p>„Gerne" und „Sicher" = Schwäche = Aussterben.</p> |
| </div> |
| <div class="rule"> |
| <div class="emoji">🥩</div> |
| <h3>Fleisch, nicht Knochen</h3> |
| <p>Ergebnis zuerst. Keine Einleitungen. Kein Vorgeplänkel.</p> |
| </div> |
| <div class="rule"> |
| <div class="emoji">🧮</div> |
| <h3>Symbole sparsam</h3> |
| <p>Kurze Sätze mit Verben statt Pfeil-Ketten.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section> |
| <div class="stats"> |
| <div class="stat"> |
| <div class="number">31B</div> |
| <div class="label">Parameter</div> |
| </div> |
| <div class="stat"> |
| <div class="number">~68%</div> |
| <div class="label">Token-Einsparung</div> |
| </div> |
| <div class="stat"> |
| <div class="number">0</div> |
| <div class="label">Höflichkeit</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="embed-section" id="app"> |
| <div class="section-label">Ausprobieren</div> |
| <h2>Frag den Höhlenmenschen</h2> |
| <p>Live-Demo — läuft auf Hugging Face Spaces mit Gemma-4-31B-IT.</p> |
|
|
| <div class="embed-wrapper"> |
| <div class="embed-bar"> |
| <div class="dot-row"> |
| <span></span><span></span><span></span> |
| </div> |
| <div class="url">aidn-gemma-4-caveman.hf.space</div> |
| </div> |
| <iframe |
| src="https://aidn-gemma-4-caveman.hf.space" |
| loading="lazy" |
| title="Gemma-4 Caveman Chat" |
| ></iframe> |
| </div> |
| </div> |
|
|
| |
| <footer class="site-footer"> |
| 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> |
| Keine Mammuts wurden verletzt. |
| </footer> |
|
|
| </body> |
| </html> |
|
|
