refactor(developer-portal): split iace, docs, byoeh pages
Extract each page into colocated _components/ sections to bring page.tsx files from 1008/891/769 LOC down to 57/23/21 LOC, well within the 500-line hard cap. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
@@ -0,0 +1,97 @@
|
||||
import { CodeBlock, InfoBox } from '@/components/DevPortalLayout'
|
||||
|
||||
export function IntroArchitectureSection() {
|
||||
return (
|
||||
<>
|
||||
<h2 id="einfuehrung">1. Was ist der Compliance Hub?</h2>
|
||||
<p>
|
||||
Der <strong>BreakPilot Compliance Hub</strong> ist ein System, das Organisationen dabei
|
||||
unterstuetzt, gesetzliche Vorschriften einzuhalten. Er beantwortet die zentrale Frage:
|
||||
</p>
|
||||
<blockquote>
|
||||
<em>“Duerfen wir das, was wir vorhaben, ueberhaupt so machen -- und wenn ja, welche
|
||||
Auflagen muessen wir dafuer erfuellen?”</em>
|
||||
</blockquote>
|
||||
<p>
|
||||
Konkret geht es um EU- und deutsche Gesetze, die fuer den Umgang mit Daten und
|
||||
kuenstlicher Intelligenz relevant sind: die <strong>DSGVO</strong>, den <strong>AI Act</strong>,
|
||||
die <strong>NIS2-Richtlinie</strong> und viele weitere Regelwerke. Das System hat vier
|
||||
Hauptaufgaben:
|
||||
</p>
|
||||
<ol>
|
||||
<li><strong>Wissen bereitstellen:</strong> Hunderte Rechtstexte sind eingelesen und durchsuchbar -- nicht nur per Stichwort, sondern nach Bedeutung (semantische Suche).</li>
|
||||
<li><strong>Bewerten:</strong> Wenn ein Nutzer einen geplanten KI-Anwendungsfall beschreibt, bewertet das System automatisch, ob er zulaessig ist, welches Risiko besteht und welche Massnahmen noetig sind.</li>
|
||||
<li><strong>Dokumentieren:</strong> Das System erzeugt die Dokumente, die Aufsichtsbehoerden verlangen: Datenschutz-Folgenabschaetzungen (DSFA), technisch-organisatorische Massnahmen (TOM), Verarbeitungsverzeichnisse (VVT) und mehr.</li>
|
||||
<li><strong>Nachweisen:</strong> Jede Bewertung, jede Entscheidung und jeder Zugriff wird revisionssicher protokolliert -- als Nachweis gegenueber Pruefer und Behoerden.</li>
|
||||
</ol>
|
||||
|
||||
<InfoBox type="info" title="Kern-Designprinzip">
|
||||
<strong>Die KI ist nicht die Entscheidungsinstanz.</strong> Alle
|
||||
Compliance-Entscheidungen (zulaessig / bedingt zulaessig / nicht zulaessig) trifft ein
|
||||
deterministisches Regelwerk. Das LLM (Sprachmodell) wird ausschliesslich dafuer verwendet,
|
||||
Ergebnisse verstaendlich zu <em>erklaeren</em> -- niemals um sie zu <em>treffen</em>.
|
||||
</InfoBox>
|
||||
|
||||
<h2 id="architektur">2. Architektur im Ueberblick</h2>
|
||||
<p>
|
||||
Das System besteht aus mehreren Bausteinen, die jeweils eine klar abgegrenzte Aufgabe haben.
|
||||
Man kann es sich wie ein Buero vorstellen:
|
||||
</p>
|
||||
|
||||
<div className="not-prose my-6 overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 text-sm">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Baustein</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Analogie</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Technologie</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Aufgabe</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">API-Gateway</td><td className="px-4 py-3">Empfang / Rezeption</td><td className="px-4 py-3">Go (Gin)</td><td className="px-4 py-3">Nimmt alle Anfragen entgegen, prueft Identitaet und leitet weiter</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Compliance Engine (UCCA)</td><td className="px-4 py-3">Sachbearbeiter</td><td className="px-4 py-3">Go</td><td className="px-4 py-3">Bewertet Anwendungsfaelle gegen 45+ Regeln und berechnet Risikoscore</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">RAG Service</td><td className="px-4 py-3">Rechtsbibliothek</td><td className="px-4 py-3">Python (FastAPI)</td><td className="px-4 py-3">Durchsucht Gesetze semantisch und beantwortet Rechtsfragen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Legal Corpus</td><td className="px-4 py-3">Gesetzesbuecher im Regal</td><td className="px-4 py-3">YAML/JSON + Qdrant</td><td className="px-4 py-3">Enthaelt alle Rechtstexte als durchsuchbare Wissensbasis</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Policy Engine</td><td className="px-4 py-3">Regelbuch des Sachbearbeiters</td><td className="px-4 py-3">YAML-Dateien</td><td className="px-4 py-3">45+ auditierbare Pruefregeln in maschinenlesbarer Form</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Eskalations-System</td><td className="px-4 py-3">Chef-Unterschrift</td><td className="px-4 py-3">Go + PostgreSQL</td><td className="px-4 py-3">Leitet kritische Faelle an menschliche Pruefer weiter</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Admin Dashboard</td><td className="px-4 py-3">Schreibtisch</td><td className="px-4 py-3">Next.js</td><td className="px-4 py-3">Benutzeroberflaeche fuer alle Funktionen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">PostgreSQL</td><td className="px-4 py-3">Aktenschrank</td><td className="px-4 py-3">SQL-Datenbank</td><td className="px-4 py-3">Speichert Assessments, Eskalationen, Controls, Audit-Trail</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Qdrant</td><td className="px-4 py-3">Suchindex der Bibliothek</td><td className="px-4 py-3">Vektordatenbank</td><td className="px-4 py-3">Ermoeglicht semantische Suche ueber Rechtstexte</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Wie die Bausteine zusammenspielen</h3>
|
||||
<CodeBlock language="text" filename="Datenfluss: Vom Benutzer zur Compliance-Bewertung">
|
||||
{`Benutzer (Browser)
|
||||
|
|
||||
v
|
||||
┌─────────────────────────────┐
|
||||
│ API-Gateway (Port 8080) │ ← Authentifizierung, Rate-Limiting, Tenant-Isolation
|
||||
│ "Wer bist du? Darfst du?" │
|
||||
└──────────┬──────────────────┘
|
||||
|
|
||||
┌─────┼──────────────────────────────┐
|
||||
v v v
|
||||
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
|
||||
│ Compliance │ │ RAG Service │ │ Security │
|
||||
│ Engine │ │ (Bibliothek)│ │ Scanner │
|
||||
│ (Bewertung) │ │ │ │ │
|
||||
└──────┬───┬──┘ └──────┬───────┘ └──────────────┘
|
||||
| | |
|
||||
| | ┌──────┴───────┐
|
||||
| | │ Qdrant │ ← Vektordatenbank mit allen Rechtstexten
|
||||
| | │ (Suchindex) │
|
||||
| | └──────────────┘
|
||||
| |
|
||||
| └──────────────────────┐
|
||||
v v
|
||||
┌──────────────┐ ┌──────────────┐
|
||||
│ PostgreSQL │ │ Eskalation │
|
||||
│ (Speicher) │ │ (E0-E3) │
|
||||
└──────────────┘ └──────────────┘`}
|
||||
</CodeBlock>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user