@extends('layouts.app')
@php $tr = fn ($de, $en) => request()->segment(1) === 'en' ? $en : $de; @endphp
@section('title', $tr('KARC Technik — Module, Tech-Stack & Bitstream | KOTSCH.TECH', 'KARC Technology — Modules, Tech Stack & Bitstream | KOTSCH.TECH'))
@section('meta_description', $tr('Technischer Überblick über KARC: zehn von Grund auf gebaute Module, der reine Python-Tech-Stack (NumPy/OpenCV/Pillow, CPU-only) und das .karc-Bitstream-Format.', 'Technical overview of KARC: ten from-scratch modules, the pure-Python tech stack (NumPy/OpenCV/Pillow, CPU-only) and the .karc bitstream format.'))
@section('content')
@include('karc.partials.styles')

<style>
.k-mod{position:relative;counter-increment:kmod}
.k-mod .ic::after{content:counter(kmod,decimal-leading-zero);position:absolute;top:1.3rem;right:1.4rem;font-size:.8rem;font-weight:700;color:color-mix(in srgb,var(--primary) 55%,transparent);letter-spacing:.05em}
.k-modgrid{counter-reset:kmod}
.k-stack{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.k-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--k-line);color:#334155;font-weight:600;font-size:.92rem;box-shadow:0 16px 40px -38px rgba(15,23,42,.4)}
.k-chip i{color:var(--primary)}
.k-bs{background:#0f172a;color:#e2e8f0;border-radius:18px;padding:1.6rem 1.7rem;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.88rem;line-height:1.7;overflow-x:auto;border:1px solid #1e293b;box-shadow:0 30px 70px -45px rgba(15,23,42,.6)}
.k-bs .c{color:#94a3b8}
.k-bs .m{color:var(--accent-2,#06b6d4);font-weight:700}
.k-bs .k{color:#a5b4fc}
</style>

<div class="k-wrap">
  <section class="k-hero">
    <span class="k-badge"><i class="fas fa-microchip"></i> {{ $tr('Technik & Architektur', 'Engineering & architecture') }}</span>
    <h1>{{ $tr('Zehn Module,', 'Ten modules,') }} <span class="k-grad">{{ $tr('von Grund auf gebaut', 'built from scratch') }}</span></h1>
    <p class="k-lead">{{ $tr('KARC (Kotsch Adaptive Region Codec) ist zu 100 % in Python implementiert — NumPy, OpenCV und Pillow, CPU-only, ohne GPU. Jedes der zehn Module ist eigenständig und durch Unit-Tests abgedeckt.', 'KARC (Kotsch Adaptive Region Codec) is implemented 100 % in Python — NumPy, OpenCV and Pillow, CPU-only, no GPU. Each of the ten modules is self-contained and covered by unit tests.') }}</p>
    <div class="k-actions">
      <a class="k-btn" href="/karc/wie-es-funktioniert"><i class="fas fa-diagram-project"></i> {{ $tr('Wie es funktioniert', 'How it works') }}</a>
      <a class="k-btn-ghost" href="/karc/testberichte"><i class="fas fa-chart-column"></i> {{ $tr('Testberichte', 'Benchmarks') }}</a>
    </div>
  </section>

  <section class="k-section">
    <div class="k-eyebrow">{{ $tr('Aufbau', 'Architecture') }}</div>
    <h2 class="k-h2">{{ $tr('Die zehn Module', 'The ten modules') }}</h2>
    <p class="k-p">{{ $tr('Die Pipeline ist in zehn klar abgegrenzte Bereiche unterteilt. Jeder Bereich hat eine eng definierte Aufgabe und eigene Tests — Farbtransform bit-exakt, DCT identisch zu OpenCV, rANS bit-exakt, Codec-Roundtrip verlustkontrolliert.', 'The pipeline is split into ten clearly bounded areas. Each has a tightly defined job and its own tests — color transform bit-exact, DCT identical to OpenCV, rANS bit-exact, codec roundtrip loss-controlled.') }}</p>
    <div class="k-grid k-modgrid" style="margin-top:1.6rem">
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-palette"></i></div><h3>{{ $tr('Farbtransform', 'Color transform') }}</h3><p>{{ $tr('YCoCg-R: verlustfrei umkehrbare Farbtransform plus 4:2:0-Chroma-Subsampling. Gegen OpenCV bit-exakt getestet.', 'YCoCg-R: a losslessly reversible color transform plus 4:2:0 chroma subsampling. Tested bit-exact against OpenCV.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-object-group"></i></div><h3>{{ $tr('Segmentierung & Klassifikation', 'Segmentation & classification') }}</h3><p>{{ $tr('Zerlegt das Bild in 8×8-Blöcke und klassifiziert jeden Block nach Inhalt — die Grundlage der Region-as-representation-Idee.', 'Splits the image into 8×8 blocks and classifies each block by content — the basis of the region-as-representation idea.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-wave-square"></i></div><h3>{{ $tr('Transform (DCT / PLANE)', 'Transform (DCT / PLANE)') }}</h3><p>{{ $tr('Pro Block entweder eine affine PLANE (3 Parameter, glatte Flächen) oder eine DCT (Detail) — per Rate-Distortion ausgewählt.', 'Per block either an affine PLANE (3 parameters, smooth areas) or a DCT (detail) — selected via rate-distortion.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-sliders"></i></div><h3>{{ $tr('Quantisierung', 'Quantization') }}</h3><p>{{ $tr('Frequenzgewichtete Quantisierung mit JPEG-artigen Tabellen — feinere Stufen für sichtbare, gröbere für unauffällige Frequenzen.', 'Frequency-weighted quantization with JPEG-style tables — finer steps for visible, coarser for inconspicuous frequencies.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-table-cells"></i></div><h3>{{ $tr('Gelernte Modelle', 'Learned models') }}</h3><p>{{ $tr('Vorberechnete Tabellen für Quantisierung und Entropie, an die Region-Klassen gekoppelt — keine Laufzeit-Trainingsschritte nötig.', 'Pre-computed tables for quantization and entropy, coupled to the region classes — no runtime training steps required.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-diagram-next"></i></div><h3>{{ $tr('Kontext & Entropie', 'Context & entropy') }}</h3><p>{{ $tr('rANS-Entropiecodierung mit klassen-konditionierten Tabellen. Die Region-Klasse ist der Kontext — null zusätzliche Signalbits.', 'rANS entropy coding with class-conditioned tables. The region class is the context — zero extra signalling bits.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-gauge"></i></div><h3>{{ $tr('Ratensteuerung', 'Rate control') }}</h3><p>{{ $tr('Steuert die Ziel-Bitrate bzw. Qualitätsstufe und balanciert pro Block den Kompromiss zwischen Bits und Fehler aus.', 'Drives the target bitrate or quality level and balances the bits-versus-error trade-off per block.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-file-code"></i></div><h3>{{ $tr('Bitstream-Format', 'Bitstream format') }}</h3><p>{{ $tr('Definiert das .karc-Containerformat: Header mit Magic „KARC“, Bildparameter und kontext-getrennte rANS-SubstRöme.', 'Defines the .karc container format: a header with magic “KARC”, image parameters and context-separated rANS substreams.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-cubes"></i></div><h3>{{ $tr('Integration', 'Integration') }}</h3><p>{{ $tr('Verbindet alle Stufen zu Encoder und Decoder und stellt den verlustkontrollierten Roundtrip Bild → .karc → Bild sicher.', 'Wires all stages into encoder and decoder and guarantees the loss-controlled roundtrip image → .karc → image.') }}</p></div>
      <div class="k-card k-mod"><div class="ic"><i class="fas fa-flask-vial"></i></div><h3>{{ $tr('Evaluierung & Tests', 'Evaluation & tests') }}</h3><p>{{ $tr('Benchmark-Harness (BD-Rate, PSNR, SSIM) auf 20 Kodak-Bildern plus Unit-Tests für jedes Modul — alle Zahlen reproduzierbar.', 'Benchmark harness (BD-rate, PSNR, SSIM) on 20 Kodak images plus unit tests for every module — all numbers reproducible.') }}</p></div>
    </div>
  </section>

  <section class="k-section">
    <div class="k-eyebrow">{{ $tr('Grundlage', 'Foundation') }}</div>
    <h2 class="k-h2">{{ $tr('Tech-Stack', 'Tech stack') }}</h2>
    <p class="k-p">{{ $tr('Bewusst schlank und reproduzierbar: reines Python, etablierte Numerik-Bibliotheken und keinerlei GPU-Abhängigkeit. KARC läuft auf jeder CPU.', 'Deliberately lean and reproducible: pure Python, established numerics libraries and no GPU dependency whatsoever. KARC runs on any CPU.') }}</p>
    <div class="k-stack">
      <span class="k-chip"><i class="fab fa-python"></i> Python 3</span>
      <span class="k-chip"><i class="fas fa-calculator"></i> NumPy</span>
      <span class="k-chip"><i class="fas fa-image"></i> OpenCV</span>
      <span class="k-chip"><i class="fas fa-images"></i> Pillow</span>
      <span class="k-chip"><i class="fas fa-microchip"></i> {{ $tr('CPU-only', 'CPU-only') }}</span>
      <span class="k-chip"><i class="fas fa-ban"></i> {{ $tr('keine GPU', 'no GPU') }}</span>
    </div>
    <p class="k-note">{{ $tr('Von Arthur Kotsch mit Claude (2026). Entstanden aus 30 Forschungsquellen, einem Multi-Agenten-Design (111 Agenten) und einer from-scratch-Implementierung in zehn Modulen.', 'By Arthur Kotsch with Claude (2026). Built from 30 research sources, a multi-agent design (111 agents) and a from-scratch implementation in ten modules.') }}</p>
  </section>

  <section class="k-section">
    <div class="k-eyebrow">{{ $tr('Format', 'Format') }}</div>
    <h2 class="k-h2">{{ $tr('Das .karc-Bitstream-Format', 'The .karc bitstream format') }}</h2>
    <p class="k-p">{{ $tr('Eine .karc-Datei beginnt mit einem kompakten Header zur Identifikation (Magic „KARC“) und Geometrie/Parametern. Danach folgen die Nutzdaten als mehrere, nach Kontext getrennte rANS-SubstRöme — so kann jeder Strom mit der für seine Region-Klasse passenden Tabelle decodiert werden.', 'A .karc file starts with a compact header for identification (magic “KARC”) and geometry/parameters. The payload then follows as several context-separated rANS substreams — so each stream can be decoded with the table matching its region class.') }}</p>
    <div class="k-bs" style="margin-top:1.3rem">
      <span class="c">{{ $tr('// .karc-Container (schematisch)', '// .karc container (schematic)') }}</span><br>
      <span class="m">"KARC"</span>            <span class="c">{{ $tr('// Magic-Bytes — Format-Kennung', '// magic bytes — format identifier') }}</span><br>
      <span class="k">version</span>           <span class="c">{{ $tr('// Versions-Byte', '// version byte') }}</span><br>
      <span class="k">width, height</span>     <span class="c">{{ $tr('// Bildgeometrie', '// image geometry') }}</span><br>
      <span class="k">quant_profile</span>     <span class="c">{{ $tr('// Quantisierungs-/Qualitätsprofil', '// quantization / quality profile') }}</span><br>
      <span class="c">{{ $tr('// — kontext-getrennte rANS-Substreams —', '// — context-separated rANS substreams —') }}</span><br>
      <span class="k">stream[PLANE]</span>     <span class="c">{{ $tr('// glatte Regionen', '// smooth regions') }}</span><br>
      <span class="k">stream[DCT]</span>       <span class="c">{{ $tr('// Detail-Regionen', '// detail regions') }}</span><br>
      <span class="k">stream[DC / AC]</span>    <span class="c">{{ $tr('// DC-DPCM + AC-Lauflängen', '// DC-DPCM + AC run-lengths') }}</span>
    </div>
    <p class="k-note">{{ $tr('Schematische Darstellung. Die Trennung nach Kontext erlaubt klassen-konditionierte rANS-Tabellen ohne zusätzliche Signalbits im Strom.', 'Schematic representation. Separating by context enables class-conditioned rANS tables without extra signalling bits in the stream.') }}</p>
    <div class="k-actions" style="justify-content:flex-start;margin-top:1.6rem">
      <a class="k-btn" href="/karc/demo"><i class="fas fa-bolt"></i> {{ $tr('Live-Demo öffnen', 'Open live demo') }}</a>
      <a class="k-btn-ghost" href="/karc/ueber">{{ $tr('Über das Projekt', 'About the project') }}</a>
    </div>
  </section>
</div>
@endsection