9166d9dade
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m0s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 34s
CI / test-python-voice (push) Successful in 30s
CI / test-bqas (push) Successful in 31s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
374 lines
20 KiB
TypeScript
374 lines
20 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { Language } from '@/lib/types'
|
||
import { t } from '@/lib/i18n'
|
||
import GradientText from '../ui/GradientText'
|
||
import FadeInView from '../ui/FadeInView'
|
||
import GlassCard from '../ui/GlassCard'
|
||
import {
|
||
Brain,
|
||
Search,
|
||
Database,
|
||
FileText,
|
||
Bot,
|
||
Zap,
|
||
Layers,
|
||
ArrowRight,
|
||
Activity,
|
||
Shield,
|
||
Cpu,
|
||
Eye,
|
||
Gauge,
|
||
Network,
|
||
Sparkles,
|
||
Scale,
|
||
BookOpen,
|
||
Gavel,
|
||
Globe,
|
||
} from 'lucide-react'
|
||
|
||
interface AIPipelineSlideProps {
|
||
lang: Language
|
||
}
|
||
|
||
type PipelineTab = 'rag' | 'agents' | 'quality'
|
||
|
||
export default function AIPipelineSlide({ lang }: AIPipelineSlideProps) {
|
||
const i = t(lang)
|
||
const de = lang === 'de'
|
||
const [activeTab, setActiveTab] = useState<PipelineTab>('rag')
|
||
|
||
const heroStats = [
|
||
{ value: '75+', label: de ? 'Rechtsquellen' : 'Legal Sources', sub: de ? 'EU-Verordnungen · DACH-Gesetze · Frameworks' : 'EU regulations · DACH laws · Frameworks', color: 'text-indigo-400' },
|
||
{ value: '70k+', label: de ? 'Unique Controls' : 'Unique Controls', sub: de ? 'Prüfbare Compliance-Anforderungen' : 'Auditable compliance requirements', color: 'text-purple-400' },
|
||
{ value: '47k+', label: de ? 'Extrahierte Pflichten' : 'Extracted Obligations', sub: de ? 'Aus Gesetzestexten abgeleitet' : 'Derived from legal texts', color: 'text-emerald-400' },
|
||
{ value: '6', label: de ? 'Pipeline-Versionen' : 'Pipeline Versions', sub: de ? 'Kontinuierliche Verbesserung' : 'Continuous improvement', color: 'text-amber-400' },
|
||
]
|
||
|
||
const tabs: { id: PipelineTab; label: string; icon: typeof Brain }[] = [
|
||
{ id: 'rag', label: de ? 'RAG-Pipeline' : 'RAG Pipeline', icon: Search },
|
||
{ id: 'agents', label: de ? 'UCCA & Engines' : 'UCCA & Engines', icon: Bot },
|
||
{ id: 'quality', label: de ? 'QA & Infrastruktur' : 'QA & Infrastructure', icon: Gauge },
|
||
]
|
||
|
||
// Source categories for investors
|
||
const sourceCategories = [
|
||
{
|
||
icon: Globe,
|
||
color: 'text-blue-400',
|
||
bg: 'bg-blue-500/10 border-blue-500/20',
|
||
title: de ? 'EU-Verordnungen (~15)' : 'EU Regulations (~15)',
|
||
why: de
|
||
? 'Bindende Vorgaben fuer alle EU-Unternehmen — Verstoesse fuehren zu Bussgeldern bis 4% des Jahresumsatzes.'
|
||
: 'Binding requirements for all EU companies — violations lead to fines up to 4% of annual revenue.',
|
||
examples: 'DSGVO · AI Act · NIS2 · CRA · MiCA · DSA · Maschinenverordnung · Batterieverordnung',
|
||
},
|
||
{
|
||
icon: Scale,
|
||
color: 'text-purple-400',
|
||
bg: 'bg-purple-500/10 border-purple-500/20',
|
||
title: de ? 'DACH-Gesetze (~20)' : 'DACH Laws (~20)',
|
||
why: de
|
||
? 'Nationale Umsetzungen und eigenstaendige Gesetze — oft strenger als EU-Mindeststandards.'
|
||
: 'National implementations and standalone laws — often stricter than EU minimum standards.',
|
||
examples: 'BDSG · TKG · GwG · HGB · BGB · UrhG · GewO · KRITIS-DachG · AT ABGB · AT KSchG',
|
||
},
|
||
{
|
||
icon: BookOpen,
|
||
color: 'text-emerald-400',
|
||
bg: 'bg-emerald-500/10 border-emerald-500/20',
|
||
title: de ? 'Frameworks & Standards (~15)' : 'Frameworks & Standards (~15)',
|
||
why: de
|
||
? 'Branchenstandards definieren den Stand der Technik — Aufsichtsbehoerden erwarten deren Einhaltung.'
|
||
: 'Industry standards define state of the art — regulators expect compliance with them.',
|
||
examples: 'NIST 800-53 · OWASP ASVS · OWASP SAMM · ENISA ICS · NIST Zero Trust · CISA Secure by Design',
|
||
},
|
||
{
|
||
icon: Gavel,
|
||
color: 'text-amber-400',
|
||
bg: 'bg-amber-500/10 border-amber-500/20',
|
||
title: de ? 'DSFA-Leitlinien & Urteile' : 'DPIA Guidelines & Rulings',
|
||
why: de
|
||
? 'Urteile zeigen wie Gerichte Gesetze auslegen — entscheidend fuer praezise Compliance-Beratung statt generischer Antworten.'
|
||
: 'Court rulings show how laws are interpreted — critical for precise compliance advice instead of generic answers.',
|
||
examples: de
|
||
? '16 Bundeslaender DSFA-Leitlinien · BAG-Urteile · Datenschutzkonferenz-Beschluesse'
|
||
: '16 federal state DPIA guidelines · Labor court rulings · Data protection conference decisions',
|
||
},
|
||
]
|
||
|
||
// RAG Pipeline steps
|
||
const ragPipelineSteps = [
|
||
{
|
||
icon: FileText,
|
||
color: 'text-blue-400',
|
||
bg: 'bg-blue-500/10 border-blue-500/20',
|
||
title: de ? '1. Dokument-Ingestion' : '1. Document Ingestion',
|
||
items: de
|
||
? ['75+ Rechtsquellen aus EU, Deutschland und Oesterreich', 'Strukturelles Chunking an Artikel- und Absatz-Grenzen', 'Automatische Lizenz-Klassifikation (frei / Zitat / geschuetzt)', 'Geschuetzte Normen (ISO, BSI) werden vollstaendig reformuliert']
|
||
: ['75+ legal sources from EU, Germany and Austria', 'Structural chunking at article and paragraph boundaries', 'Automatic license classification (free / citation / restricted)', 'Protected standards (ISO, BSI) are fully reformulated'],
|
||
},
|
||
{
|
||
icon: Cpu,
|
||
color: 'text-purple-400',
|
||
bg: 'bg-purple-500/10 border-purple-500/20',
|
||
title: de ? '2. Control-Extraktion' : '2. Control Extraction',
|
||
items: de
|
||
? ['LLM extrahiert Pflichten und Anforderungen aus jedem Textabschnitt', '6 Pipeline-Versionen mit kontinuierlicher Qualitaetsverbesserung', 'Obligation Extraction: 47.000+ einzelne Pflichten identifiziert', 'Atomic Control Composition: Pflichten werden zu pruefbaren Controls']
|
||
: ['LLM extracts obligations and requirements from each text section', '6 pipeline versions with continuous quality improvement', 'Obligation extraction: 47,000+ individual duties identified', 'Atomic control composition: duties become auditable controls'],
|
||
},
|
||
{
|
||
icon: Database,
|
||
color: 'text-emerald-400',
|
||
bg: 'bg-emerald-500/10 border-emerald-500/20',
|
||
title: de ? '3. Deduplizierung & Speicherung' : '3. Deduplication & Storage',
|
||
items: de
|
||
? ['97.000 generierte Controls → 70.000+ nach Deduplizierung', 'Embedding-basierte Aehnlichkeitserkennung (Cosine Similarity)', 'Cross-Regulation Harmonisierung: gleiche Pflicht aus verschiedenen Gesetzen wird zusammengefuehrt', 'Ziel: 25.000–50.000 atomare Master Controls']
|
||
: ['97,000 generated controls → 70,000+ after deduplication', 'Embedding-based similarity detection (cosine similarity)', 'Cross-regulation harmonization: same obligation from different laws is merged', 'Target: 25,000–50,000 atomic master controls'],
|
||
},
|
||
{
|
||
icon: Search,
|
||
color: 'text-indigo-400',
|
||
bg: 'bg-indigo-500/10 border-indigo-500/20',
|
||
title: de ? '4. Hybrid Search & Beratung' : '4. Hybrid Search & Advisory',
|
||
items: de
|
||
? ['Vektorsuche + Keyword-Suche ueber alle Rechtsquellen gleichzeitig', 'Cross-Encoder Re-Ranking fuer praezise Relevanz-Sortierung', 'Quellen-Attribution: Jede Antwort verweist auf Artikel und Absatz', 'Der Compliance-Agent antwortet mit Rechtsgrundlage — nicht mit Vermutungen']
|
||
: ['Vector search + keyword search across all legal sources simultaneously', 'Cross-encoder re-ranking for precise relevance sorting', 'Source attribution: Every answer references article and paragraph', 'The compliance agent answers with legal basis — not guesswork'],
|
||
},
|
||
]
|
||
|
||
// Multi-Agent System content — UCCA + Policy Engine
|
||
const agents = [
|
||
{ name: 'UCCA', soul: de ? 'Use-Case Compliance' : 'Use-Case Compliance', desc: de ? 'Policy Engine (45 Regeln) + Eskalation E0–E3' : 'Policy engine (45 rules) + escalation E0–E3', color: 'text-indigo-400' },
|
||
{ name: de ? 'Pflichten-Engine' : 'Obligations Engine', soul: de ? '47.000+ Pflichten' : '47,000+ obligations', desc: de ? 'Multi-Regulation: NIS2, DSGVO, AI Act, CRA, ...' : 'Multi-regulation: NIS2, GDPR, AI Act, CRA, ...', color: 'text-emerald-400' },
|
||
{ name: de ? 'Compliance-Berater' : 'Compliance Advisor', soul: de ? 'Legal RAG + LLM' : 'Legal RAG + LLM', desc: de ? 'Chatbot mit 75+ Rechtsquellen als Wissenbasis' : 'Chatbot with 75+ legal sources as knowledge base', color: 'text-purple-400' },
|
||
{ name: de ? 'Dokument-Generator' : 'Document Generator', soul: de ? '7+ Templates' : '7+ templates', desc: de ? 'AGB, DSE, AV-Vertrag, DSFA, FRIA, BV + weitere' : 'T&C, Privacy Policy, DPA, DPIA, FRIA, Works Agreement + more', color: 'text-amber-400' },
|
||
{ name: de ? 'DSFA-Agent' : 'DPIA Agent', soul: de ? 'Art. 35 DSGVO' : 'Art. 35 GDPR', desc: de ? 'Risikobewertung mit 16 Bundeslaender-Leitlinien' : 'Risk assessment with 16 federal state guidelines', color: 'text-red-400' },
|
||
{ name: de ? 'Control-Pipeline' : 'Control Pipeline', soul: de ? '70.000+ Controls' : '70,000+ controls', desc: de ? 'Automatische Extraktion aus neuen Rechtsquellen' : 'Automatic extraction from new legal sources', color: 'text-blue-400' },
|
||
]
|
||
|
||
const agentInfra = [
|
||
{ icon: Shield, label: de ? 'Policy Engine' : 'Policy Engine', desc: de ? 'Deterministisch · LLM ist NICHT Wahrheitsquelle' : 'Deterministic · LLM is NOT source of truth' },
|
||
{ icon: Brain, label: de ? 'LLM-Schicht' : 'LLM Layer', desc: de ? 'Claude + lokale Modelle · EU-only Hosting' : 'Claude + local models · EU-only hosting' },
|
||
{ icon: Network, label: 'LiteLLM Gateway', desc: de ? 'OpenAI-kompatibel · Multi-Provider Routing' : 'OpenAI-compatible · Multi-provider routing' },
|
||
{ icon: Activity, label: de ? 'Eskalation E0–E3' : 'Escalation E0–E3', desc: de ? 'Auto-Approve → Team-Lead → DSB → DSB+Legal' : 'Auto-approve → Team lead → DPO → DPO+Legal' },
|
||
]
|
||
|
||
// Quality Assurance content
|
||
const qaFeatures = [
|
||
{
|
||
icon: Shield,
|
||
color: 'text-emerald-400',
|
||
title: de ? 'Control Quality Pipeline' : 'Control Quality Pipeline',
|
||
items: de
|
||
? ['97.000 Controls generiert, 70.000+ nach Deduplizierung', '6 Pipeline-Versionen mit steigender Extraktionsqualitaet', 'Automatische Lizenz-Pruefung: geschuetzte Normen werden reformuliert', 'Jeder Control hat Quellen-Referenz auf Artikel und Absatz']
|
||
: ['97,000 controls generated, 70,000+ after deduplication', '6 pipeline versions with increasing extraction quality', 'Automatic license check: protected standards are reformulated', 'Every control has source reference to article and paragraph'],
|
||
},
|
||
{
|
||
icon: Eye,
|
||
color: 'text-indigo-400',
|
||
title: de ? 'Kontinuierliche Erweiterung' : 'Continuous Expansion',
|
||
items: de
|
||
? ['Neue Gesetze werden automatisch ingestiert und verarbeitet', 'Pipeline erkennt Ueberschneidungen mit bestehenden Controls', 'Cross-Regulation Mapping: gleiche Pflicht aus DSGVO und BDSG wird verknuepft', 'Wachsender Wissensvorsprung gegenueber manueller Compliance-Beratung']
|
||
: ['New laws are automatically ingested and processed', 'Pipeline detects overlaps with existing controls', 'Cross-regulation mapping: same obligation from GDPR and BDSG is linked', 'Growing knowledge advantage over manual compliance consulting'],
|
||
},
|
||
{
|
||
icon: Sparkles,
|
||
color: 'text-purple-400',
|
||
title: de ? 'CI/CD & Testing' : 'CI/CD & Testing',
|
||
items: de
|
||
? ['Gitea Actions: Lint → Tests → Validierung bei jedem Push', 'Go-Tests (AI SDK) + Python-Tests (Backend + Pipeline)', 'Coolify Auto-Deploy mit Health-Check-Monitoring', 'arm64 → amd64 Cross-Build fuer Hetzner Production']
|
||
: ['Gitea Actions: Lint → Tests → Validation on every push', 'Go tests (AI SDK) + Python tests (Backend + Pipeline)', 'Coolify auto-deploy with health check monitoring', 'arm64 → amd64 cross-build for Hetzner production'],
|
||
},
|
||
{
|
||
icon: Zap,
|
||
color: 'text-amber-400',
|
||
title: de ? 'Infrastruktur' : 'Infrastructure',
|
||
items: de
|
||
? ['Qdrant Vektordatenbank fuer semantische Suche', 'BGE-M3 Multilingual Embedding (lokal gehostet)', 'MinIO Object Storage (S3-kompatibel, TLS-verschluesselt)', '100% EU-Cloud · Keine US-Provider · BSI-konforme Hosting-Partner']
|
||
: ['Qdrant vector database for semantic search', 'BGE-M3 multilingual embedding (locally hosted)', 'MinIO object storage (S3-compatible, TLS-encrypted)', '100% EU cloud · No US providers · BSI-compliant hosting partners'],
|
||
},
|
||
]
|
||
|
||
return (
|
||
<div>
|
||
<FadeInView className="text-center mb-5">
|
||
<p className="text-xs font-mono text-indigo-400/60 uppercase tracking-widest mb-2">
|
||
{de ? 'Anhang' : 'Appendix'}
|
||
</p>
|
||
<h2 className="text-4xl md:text-5xl font-bold mb-2">
|
||
<GradientText>{i.annex.aipipeline.title}</GradientText>
|
||
</h2>
|
||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.aipipeline.subtitle}</p>
|
||
</FadeInView>
|
||
|
||
{/* Hero Stats */}
|
||
<FadeInView delay={0.1}>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4">
|
||
{heroStats.map((stat, idx) => (
|
||
<div key={idx} className="border border-white/[0.08] rounded-xl p-2.5 bg-white/[0.03] text-center">
|
||
<p className={`text-2xl font-black tracking-tight ${stat.color}`}>{stat.value}</p>
|
||
<p className="text-[11px] font-semibold text-white/70">{stat.label}</p>
|
||
<p className="text-[9px] text-white/30 mt-0.5 leading-tight">{stat.sub}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</FadeInView>
|
||
|
||
{/* Tab Navigation */}
|
||
<FadeInView delay={0.15}>
|
||
<div className="flex items-center justify-center gap-2 mb-4">
|
||
{tabs.map((tab) => {
|
||
const Icon = tab.icon
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm transition-all
|
||
${activeTab === tab.id
|
||
? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
|
||
: 'bg-white/[0.04] text-white/40 border border-transparent hover:text-white/60 hover:bg-white/[0.06]'
|
||
}`}
|
||
>
|
||
<Icon className="w-4 h-4" />
|
||
{tab.label}
|
||
</button>
|
||
)
|
||
})}
|
||
</div>
|
||
</FadeInView>
|
||
|
||
{/* Tab Content */}
|
||
<FadeInView delay={0.2} key={activeTab}>
|
||
{activeTab === 'rag' && (
|
||
<div>
|
||
{/* Source Categories — Why each matters */}
|
||
<div className="grid md:grid-cols-2 gap-2 mb-4">
|
||
{sourceCategories.map((cat, idx) => {
|
||
const Icon = cat.icon
|
||
return (
|
||
<div key={idx} className={`border rounded-xl p-2.5 ${cat.bg}`}>
|
||
<div className="flex items-center gap-2 mb-1.5">
|
||
<Icon className={`w-4 h-4 ${cat.color}`} />
|
||
<h3 className="text-xs font-bold text-white">{cat.title}</h3>
|
||
</div>
|
||
<p className="text-[10px] text-white/50 mb-1.5 leading-relaxed">{cat.why}</p>
|
||
<p className="text-[9px] text-white/25 font-mono leading-tight">{cat.examples}</p>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* Pipeline Flow Visualization */}
|
||
<div className="flex items-center justify-center gap-1 flex-wrap">
|
||
{[
|
||
{ icon: FileText, label: de ? '75+ Quellen' : '75+ Sources' },
|
||
{ icon: Layers, label: de ? 'Chunking & Lizenz' : 'Chunking & License' },
|
||
{ icon: Cpu, label: de ? 'LLM-Extraktion' : 'LLM Extraction' },
|
||
{ icon: Database, label: de ? '70k+ Controls' : '70k+ Controls' },
|
||
{ icon: Search, label: de ? 'Hybrid Search' : 'Hybrid Search' },
|
||
{ icon: Brain, label: de ? 'Beratung' : 'Advisory' },
|
||
].map((step, idx, arr) => (
|
||
<div key={idx} className="flex items-center gap-1">
|
||
<div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-white/[0.05] border border-white/[0.08]">
|
||
<step.icon className="w-3 h-3 text-indigo-400" />
|
||
<span className="text-[10px] text-white/50">{step.label}</span>
|
||
</div>
|
||
{idx < arr.length - 1 && <ArrowRight className="w-3 h-3 text-white/20" />}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'agents' && (
|
||
<div className="grid md:grid-cols-12 gap-4">
|
||
{/* Agent List */}
|
||
<div className="md:col-span-7">
|
||
<GlassCard hover={false} className="p-4">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<Bot className="w-4 h-4 text-white/40" />
|
||
<p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
|
||
{de ? 'Compliance-Engines' : 'Compliance Engines'}
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{agents.map((agent, idx) => (
|
||
<div key={idx} className="p-2 rounded-lg bg-white/[0.03] border border-white/5">
|
||
<div className="flex items-center gap-1.5 mb-1">
|
||
<div className={`w-1.5 h-1.5 rounded-full ${agent.color} bg-current`} />
|
||
<p className="text-xs font-bold text-white/80">{agent.name}</p>
|
||
</div>
|
||
<p className="text-[10px] text-white/40 leading-tight">{agent.desc}</p>
|
||
<p className="text-[9px] font-mono text-white/25 mt-1">{agent.soul}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
{/* Agent Infrastructure */}
|
||
<div className="md:col-span-5">
|
||
<GlassCard hover={false} className="p-4 h-full">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<Network className="w-4 h-4 text-white/40" />
|
||
<p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
|
||
{de ? 'Infrastruktur' : 'Infrastructure'}
|
||
</p>
|
||
</div>
|
||
<div className="space-y-2.5">
|
||
{agentInfra.map((inf, idx) => {
|
||
const Icon = inf.icon
|
||
return (
|
||
<div key={idx} className="flex items-start gap-2.5">
|
||
<div className="w-7 h-7 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center shrink-0">
|
||
<Icon className="w-3.5 h-3.5 text-purple-400" />
|
||
</div>
|
||
<div>
|
||
<p className="text-xs font-semibold text-white/70">{inf.label}</p>
|
||
<p className="text-[10px] text-white/40">{inf.desc}</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
<div className="mt-3 pt-3 border-t border-white/5">
|
||
<p className="text-[10px] text-white/20">
|
||
{de
|
||
? 'Wahrheit = Regeln + Evidenz · LLM = Uebersetzer + Subsumtions-Helfer · 100% EU-Cloud'
|
||
: 'Truth = Rules + Evidence · LLM = Translator + Subsumption Helper · 100% EU Cloud'}
|
||
</p>
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'quality' && (
|
||
<div className="grid md:grid-cols-2 gap-3">
|
||
{qaFeatures.map((feat, idx) => {
|
||
const Icon = feat.icon
|
||
return (
|
||
<GlassCard key={idx} hover={false} className="p-3">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<Icon className={`w-4 h-4 ${feat.color}`} />
|
||
<h3 className="text-xs font-bold text-white">{feat.title}</h3>
|
||
</div>
|
||
<ul className="space-y-1">
|
||
{feat.items.map((item, iidx) => (
|
||
<li key={iidx} className="flex items-start gap-1.5 text-[11px] text-white/50">
|
||
<span className={`w-1 h-1 rounded-full mt-1.5 ${feat.color} bg-current shrink-0`} />
|
||
{item}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</GlassCard>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</FadeInView>
|
||
</div>
|
||
)
|
||
}
|