@extends('layouts.app')
@php $tr = fn ($de, $en) => request()->segment(1) === 'en' ? $en : $de; @endphp
@section('title', $tr('Über KARC – Entstehung & Grenzen | KOTSCH.TECH','About KARC – Origins & Limits | KOTSCH.TECH'))
@section('meta_description', $tr('Wie KARC entstand: 30 Forschungsquellen, ein Multi-Agenten-Design mit 111 Agenten und eine From-Scratch-Implementierung in 10 getesteten Modulen. Ehrlich über Stärken und Grenzen.','How KARC came to be: 30 research sources, a multi-agent design with 111 agents and a from-scratch implementation across 10 tested modules. Honest about strengths and limits.'))

@section('content')
@include('karc.partials.styles')

<style>
.k-timeline { display: grid; gap: 18px; margin: 28px 0 8px; }
.k-step {
    position: relative;
    padding: 22px 24px 22px 64px;
    border: 1px solid var(--k-line);
    border-radius: 18px;
    background: #fff;
}
.k-step .k-step-n {
    position: absolute;
    left: 18px; top: 22px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--k-acc);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}
.k-step h3 { margin: 0 0 6px; font-size: 1.15rem; }
.k-step p { margin: 0; }
.k-modgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 24px 0;
}
.k-mod {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--k-line);
    border-radius: 16px;
    background: #fff;
}
.k-mod .k-mod-n {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--k-acc);
    min-width: 28px;
}
.k-mod span:last-child { font-size: .95rem; line-height: 1.35; }
.k-honest {
    border-left: 3px solid var(--accent-2);
    padding: 4px 0 4px 18px;
    margin: 18px 0;
}
.k-honest p { margin: 8px 0; }
</style>

<div class="k-wrap">

    <header class="k-hero k-section">
        <div class="k-eyebrow">{{ $tr('Über das Projekt','About the project') }}</div>
        <h1><span class="k-grad">KARC</span>{{ $tr(' – ein Bildcodec, von Grund auf gebaut',' – an image codec, built from scratch') }}</h1>
        <p class="k-lead">
            {{ $tr(
                'KARC steht für „Kotsch Adaptive Region Codec“ – ein inhaltsadaptives Bildkompressionsverfahren, vollständig in Python geschrieben und ausschließlich auf der CPU lauffähig. Diese Seite erzählt, wie es entstand, was es kann und wo seine Grenzen liegen.',
                'KARC stands for “Kotsch Adaptive Region Codec” – a content-adaptive image compression method, written entirely in Python and running CPU-only. This page explains how it came to be, what it can do and where its limits lie.'
            ) }}
        </p>
    </header>

    <section class="k-section">
        <div class="k-eyebrow">{{ $tr('Der Weg','The path') }}</div>
        <h2 class="k-h2">{{ $tr('Von der Recherche zum lauffähigen Codec','From research to a working codec') }}</h2>
        <p class="k-p">
            {{ $tr(
                'KARC wurde nicht aus einer fertigen Bibliothek zusammengesetzt. Jeder Baustein – Farbtransform, Transformation, Quantisierung, Entropiecodierung – wurde von Grund auf implementiert und mit Unit-Tests abgesichert. Drei Schritte führten dorthin.',
                'KARC was not assembled from a finished library. Every building block – colour transform, transform, quantisation, entropy coding – was implemented from scratch and secured with unit tests. Three steps led there.'
            ) }}
        </p>

        <div class="k-timeline">
            <div class="k-step">
                <div class="k-step-n">1</div>
                <h3><i class="fas fa-book-open" style="color:var(--primary)"></i> {{ $tr('30 Forschungsquellen','30 research sources') }}</h3>
                <p class="k-p">
                    {{ $tr(
                        'Den Ausgangspunkt bildeten 30 heruntergeladene Forschungsquellen zu Bildkompression, Transformcodierung und perzeptueller Qualität. Daraus entstand das Grundverständnis dafür, welche Ideen sich lohnen – und welche Kompromisse moderne Codecs eingehen.',
                        'The starting point was 30 downloaded research sources on image compression, transform coding and perceptual quality. They formed the basic understanding of which ideas are worth pursuing – and which trade-offs modern codecs make.'
                    ) }}
                </p>
            </div>
            <div class="k-step">
                <div class="k-step-n">2</div>
                <h3><i class="fas fa-diagram-project" style="color:var(--primary)"></i> {{ $tr('Multi-Agenten-Design (111 Agenten)','Multi-agent design (111 agents)') }}</h3>
                <p class="k-p">
                    {{ $tr(
                        'Auf Basis der Quellen wurde das Verfahren in einem Multi-Agenten-Prozess mit 111 Agenten entworfen. Verschiedene Agenten arbeiteten parallel an Teilfragen – von der Region-Klassifikation bis zur Entropiemodellierung – und führten die Entscheidungen zu einem konsistenten Gesamtdesign zusammen.',
                        'Building on the sources, the method was designed in a multi-agent process with 111 agents. Different agents worked in parallel on sub-questions – from region classification to entropy modelling – and consolidated their decisions into one consistent overall design.'
                    ) }}
                </p>
            </div>
            <div class="k-step">
                <div class="k-step-n">3</div>
                <h3><i class="fas fa-flask-vial" style="color:var(--primary)"></i> {{ $tr('From-Scratch-Implementierung mit Unit-Tests','From-scratch implementation with unit tests') }}</h3>
                <p class="k-p">
                    {{ $tr(
                        'Das Design wurde in 10 Modulen von Grund auf umgesetzt – in reinem Python mit NumPy, OpenCV und Pillow. Jedes Modul ist durch Unit-Tests abgesichert: Die Farbtransform ist bit-exakt umkehrbar, die DCT stimmt mit OpenCV überein, der rANS-Coder ist bit-exakt, und der vollständige Codec-Roundtrip wird getestet.',
                        'The design was implemented from scratch across 10 modules – in pure Python with NumPy, OpenCV and Pillow. Every module is backed by unit tests: the colour transform is bit-exactly reversible, the DCT matches OpenCV, the rANS coder is bit-exact, and the full codec roundtrip is tested.'
                    ) }}
                </p>
            </div>
        </div>
    </section>

    <section class="k-section">
        <div class="k-eyebrow">{{ $tr('Aufbau','Structure') }}</div>
        <h2 class="k-h2">{{ $tr('Zehn Module, alle mit Tests','Ten modules, all with tests') }}</h2>
        <p class="k-p">
            {{ $tr(
                'KARC ist in zehn klar abgegrenzte Bereiche aufgeteilt. Jeder Bereich hat eine eigene Verantwortung und eigene Tests.',
                'KARC is split into ten clearly delineated areas. Each area has its own responsibility and its own tests.'
            ) }}
        </p>

        <div class="k-modgrid">
            <div class="k-mod"><span class="k-mod-n">01</span><span>{{ $tr('Farbtransform (YCoCg-R)','Colour transform (YCoCg-R)') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">02</span><span>{{ $tr('Segmentierung & Klassifikation','Segmentation & classification') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">03</span><span>{{ $tr('Transform (DCT / PLANE)','Transform (DCT / PLANE)') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">04</span><span>{{ $tr('Quantisierung','Quantisation') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">05</span><span>{{ $tr('Gelernte Modelle (Tabellen)','Learned models (tables)') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">06</span><span>{{ $tr('Kontext & Entropie (rANS)','Context & entropy (rANS)') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">07</span><span>{{ $tr('Ratensteuerung','Rate control') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">08</span><span>{{ $tr('Bitstream-Format','Bitstream format') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">09</span><span>{{ $tr('Integration','Integration') }}</span></div>
            <div class="k-mod"><span class="k-mod-n">10</span><span>{{ $tr('Evaluierung & Tests','Evaluation & tests') }}</span></div>
        </div>

        <p class="k-note">
            <i class="fas fa-circle-info"></i>
            {{ $tr(
                'Der Kerngedanke „Region-as-representation“: Pro 8×8-Block entscheidet ein Rate-Distortion-Kriterium zwischen einer affinen Ebene (3 Parameter, für glatte Flächen) und einer DCT (für Detail). Die gewählte Region-Klasse ist zugleich der Entropie-Kontext – ohne ein einziges zusätzliches Signalbit.',
                'The core idea, “region-as-representation”: per 8×8 block, a rate-distortion criterion chooses between an affine plane (3 parameters, for smooth surfaces) and a DCT (for detail). The chosen region class also serves as the entropy context – without a single extra signalling bit.'
            ) }}
        </p>
    </section>

    <section class="k-section">
        <div class="k-eyebrow">{{ $tr('Ehrlich betrachtet','An honest look') }}</div>
        <h2 class="k-h2">{{ $tr('Was KARC kann – und was nicht','What KARC can do – and what it cannot') }}</h2>

        <div class="k-honest">
            <p class="k-p">
                <i class="fas fa-check" style="color:var(--primary)"></i>
                {{ $tr(
                    'In einem Benchmark auf 20 Kodak-Bildern schlägt KARC die klassischen Standards: gegenüber JPEG (optimize=True) gewinnt es bei der PSNR-basierten BD-Rate in 18 von 20 Bildern; gegenüber JPEG 2000 (OpenJPEG, Standardeinstellung) in allen 20.',
                    'In a benchmark on 20 Kodak images, KARC beats the classic standards: against JPEG (optimize=True) it wins the PSNR-based BD-rate on 18 of 20 images; against JPEG 2000 (OpenJPEG, default settings) on all 20.'
                ) }}
            </p>
            <p class="k-p">
                <i class="fas fa-xmark" style="color:var(--accent-2)"></i>
                {{ $tr(
                    'Gegenüber den modernen Codecs WebP und AVIF liegt KARC dagegen klar zurück und gewinnt dort kein einziges der 20 Bilder. Das ist erwartbar – diese Codecs sind das Ergebnis jahrelanger industrieller Optimierung.',
                    'Against the modern codecs WebP and AVIF, however, KARC clearly falls behind and wins none of the 20 images there. That is expected – these codecs are the result of years of industrial optimisation.'
                ) }}
            </p>
            <p class="k-p">
                <i class="fas fa-gauge-high" style="color:var(--accent-2)"></i>
                {{ $tr(
                    'KARC ist außerdem reine Python-Referenzimplementierung, CPU-only. Es ist gebaut, um die Idee sauber und nachvollziehbar zu zeigen – nicht für produktive Geschwindigkeit.',
                    'KARC is also a pure-Python reference implementation, CPU-only. It is built to demonstrate the idea cleanly and transparently – not for production-grade speed.'
                ) }}
            </p>
        </div>

        <p class="k-p">
            {{ $tr(
                'Das ehrliche Fazit: KARC schlägt JPEG und JPEG 2000, liegt aber hinter WebP und AVIF. Die vollständigen Zahlen inklusive BD-PSNR und BD-SSIM stehen in den Testberichten.',
                'The honest conclusion: KARC beats JPEG and JPEG 2000, but trails WebP and AVIF. The full numbers, including BD-PSNR and BD-SSIM, are in the test reports.'
            ) }}
        </p>

        <div class="k-actions">
            <a class="k-btn" href="/karc/testberichte"><i class="fas fa-chart-column"></i> {{ $tr('Zu den Testberichten','See the test reports') }}</a>
            <a class="k-btn k-btn-ghost" href="/karc/demo"><i class="fas fa-images"></i> {{ $tr('Live-Demo ansehen','View the live demo') }}</a>
        </div>
    </section>

    <section class="k-section">
        <div class="k-eyebrow">{{ $tr('Ausblick','Outlook') }}</div>
        <h2 class="k-h2">{{ $tr('Wohin es gehen kann','Where it could go') }}</h2>
        <div class="k-grid">
            <div class="k-card">
                <div class="ic"><i class="fas fa-eye"></i></div>
                <h3>{{ $tr('Perzeptuelle Maskierung','Perceptual masking') }}</h3>
                <p>{{ $tr(
                    'Bits gezielter dorthin lenken, wo das Auge Fehler bemerkt – und sie dort sparen, wo Strukturen sie verdecken. Das ist der nächstliegende Hebel für bessere SSIM-Werte.',
                    'Steer bits more deliberately to where the eye notices errors – and save them where structure masks them. This is the most immediate lever for better SSIM scores.'
                ) }}</p>
            </div>
            <div class="k-card">
                <div class="ic"><i class="fas fa-shapes"></i></div>
                <h3>{{ $tr('Gelernte Basen / VQ','Learned bases / VQ') }}</h3>
                <p>{{ $tr(
                    'Über die feste DCT hinaus: gelernte Transformationsbasen oder Vektorquantisierung, die sich besser an typische Bildinhalte anpassen als eine generische Frequenzbasis.',
                    'Beyond the fixed DCT: learned transform bases or vector quantisation that adapt to typical image content better than a generic frequency basis.'
                ) }}</p>
            </div>
        </div>
    </section>

    <section class="k-section">
        <div class="k-eyebrow">{{ $tr('Wer','Who') }}</div>
        <h2 class="k-h2">{{ $tr('Hinter KARC','Behind KARC') }}</h2>
        <p class="k-p">
            {{ $tr(
                'KARC wurde von Arthur Kotsch gemeinsam mit Claude entwickelt – im Jahr 2026. Es ist ein Forschungs- und Lernprojekt mit dem Anspruch, ein vollständiges Kompressionsverfahren wirklich zu verstehen, indem man es von Grund auf baut und testet.',
                'KARC was developed by Arthur Kotsch together with Claude – in 2026. It is a research and learning project with the goal of truly understanding a complete compression method by building and testing it from scratch.'
            ) }}
        </p>
        <p class="k-note">
            <i class="fas fa-circle-info"></i>
            {{ $tr(
                'Die Zahlen auf dieser Seite stammen aus reproduzierbaren Benchmarks gegen Pillow-Baselines. Wo eine Baseline möglicherweise nicht optimal getunt ist (z. B. OpenJPEG-Standardeinstellung), wird das offen genannt.',
                'The numbers on this page come from reproducible benchmarks against Pillow baselines. Where a baseline may not be optimally tuned (e.g. OpenJPEG default settings), this is stated openly.'
            ) }}
        </p>
    </section>

</div>
@endsection