b9c3c47a37
- LLM Compare Seiten, Configs und alle Referenzen geloescht - Kommunikation-Kategorie in Sidebar mit Video & Chat, Voice Service, Alerts - Compliance SDK Kategorie aus Sidebar entfernt Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
594 lines
33 KiB
TypeScript
594 lines
33 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Voice Service Admin Page (migrated from website/admin/voice)
|
|
*
|
|
* Displays:
|
|
* - Voice-First Architecture Overview
|
|
* - Developer Guide Content
|
|
* - Live Voice Demo (embedded from studio-v2)
|
|
* - Task State Machine Documentation
|
|
* - DSGVO Compliance Information
|
|
*/
|
|
|
|
import { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { PagePurpose } from '@/components/common/PagePurpose'
|
|
|
|
type TabType = 'overview' | 'demo' | 'tasks' | 'intents' | 'dsgvo' | 'api'
|
|
|
|
// Task State Machine data
|
|
const TASK_STATES = [
|
|
{ state: 'DRAFT', description: 'Task erstellt, noch nicht verarbeitet', color: 'bg-gray-100 text-gray-800', next: ['QUEUED', 'PAUSED'] },
|
|
{ state: 'QUEUED', description: 'In Warteschlange fuer Verarbeitung', color: 'bg-blue-100 text-blue-800', next: ['RUNNING', 'PAUSED'] },
|
|
{ state: 'RUNNING', description: 'Wird aktuell verarbeitet', color: 'bg-yellow-100 text-yellow-800', next: ['READY', 'PAUSED'] },
|
|
{ state: 'READY', description: 'Fertig, wartet auf User-Bestaetigung', color: 'bg-green-100 text-green-800', next: ['APPROVED', 'REJECTED', 'PAUSED'] },
|
|
{ state: 'APPROVED', description: 'Vom User bestaetigt', color: 'bg-emerald-100 text-emerald-800', next: ['COMPLETED'] },
|
|
{ state: 'REJECTED', description: 'Vom User abgelehnt', color: 'bg-red-100 text-red-800', next: ['DRAFT'] },
|
|
{ state: 'COMPLETED', description: 'Erfolgreich abgeschlossen', color: 'bg-teal-100 text-teal-800', next: [] },
|
|
{ state: 'EXPIRED', description: 'TTL ueberschritten', color: 'bg-orange-100 text-orange-800', next: [] },
|
|
{ state: 'PAUSED', description: 'Vom User pausiert', color: 'bg-purple-100 text-purple-800', next: ['DRAFT', 'QUEUED', 'RUNNING', 'READY'] },
|
|
]
|
|
|
|
// Intent Types (22 types organized by group)
|
|
const INTENT_GROUPS = [
|
|
{
|
|
group: 'Notizen',
|
|
color: 'bg-blue-50 border-blue-200',
|
|
intents: [
|
|
{ type: 'student_observation', example: 'Notiz zu Max: heute wiederholt gestoert', description: 'Schuelerbeobachtungen' },
|
|
{ type: 'reminder', example: 'Erinner mich morgen an Konferenz', description: 'Erinnerungen setzen' },
|
|
{ type: 'homework_check', example: '7b Mathe Hausaufgabe kontrollieren', description: 'Hausaufgaben pruefen' },
|
|
{ type: 'conference_topic', example: 'Thema Lehrerkonferenz: iPad-Regeln', description: 'Konferenzthemen' },
|
|
{ type: 'correction_thought', example: 'Aufgabe 3: haeufiger Fehler erklaeren', description: 'Korrekturgedanken' },
|
|
]
|
|
},
|
|
{
|
|
group: 'Content-Generierung',
|
|
color: 'bg-green-50 border-green-200',
|
|
intents: [
|
|
{ type: 'worksheet_generate', example: 'Erstelle 3 Lueckentexte zu Vokabeln', description: 'Arbeitsblaetter erstellen' },
|
|
{ type: 'quiz_generate', example: '10-Minuten Vokabeltest mit Loesungen', description: 'Quiz/Tests erstellen' },
|
|
{ type: 'quick_activity', example: '10 Minuten Einstieg, 5 Aufgaben', description: 'Schnelle Aktivitaeten' },
|
|
{ type: 'differentiation', example: 'Zwei Schwierigkeitsstufen: Basis und Plus', description: 'Differenzierung' },
|
|
]
|
|
},
|
|
{
|
|
group: 'Kommunikation',
|
|
color: 'bg-yellow-50 border-yellow-200',
|
|
intents: [
|
|
{ type: 'parent_letter', example: 'Neutraler Elternbrief wegen Stoerungen', description: 'Elternbriefe erstellen' },
|
|
{ type: 'class_message', example: 'Nachricht an 8a: Hausaufgaben bis Mittwoch', description: 'Klassennachrichten' },
|
|
]
|
|
},
|
|
{
|
|
group: 'Canvas-Editor',
|
|
color: 'bg-purple-50 border-purple-200',
|
|
intents: [
|
|
{ type: 'canvas_edit', example: 'Ueberschriften groesser, Zeilenabstand kleiner', description: 'Formatierung aendern' },
|
|
{ type: 'canvas_layout', example: 'Alles auf eine Seite, Drucklayout A4', description: 'Layout anpassen' },
|
|
{ type: 'canvas_element', example: 'Kasten fuer Merke hinzufuegen', description: 'Elemente hinzufuegen' },
|
|
{ type: 'canvas_image', example: 'Bild 2 nach links, Pfeil auf Aufgabe 3', description: 'Bilder positionieren' },
|
|
]
|
|
},
|
|
{
|
|
group: 'RAG & Korrektur',
|
|
color: 'bg-pink-50 border-pink-200',
|
|
intents: [
|
|
{ type: 'operator_checklist', example: 'Operatoren-Checkliste fuer diese Aufgabe', description: 'Operatoren abrufen' },
|
|
{ type: 'eh_passage', example: 'Erwartungshorizont-Passage zu diesem Thema', description: 'EH-Passagen suchen' },
|
|
{ type: 'feedback_suggestion', example: 'Kurze Feedbackformulierung vorschlagen', description: 'Feedback vorschlagen' },
|
|
]
|
|
},
|
|
{
|
|
group: 'Follow-up (TaskOrchestrator)',
|
|
color: 'bg-teal-50 border-teal-200',
|
|
intents: [
|
|
{ type: 'task_summary', example: 'Fasse alle offenen Tasks zusammen', description: 'Task-Uebersicht' },
|
|
{ type: 'convert_note', example: 'Mach aus der Notiz von gestern einen Elternbrief', description: 'Notizen konvertieren' },
|
|
{ type: 'schedule_reminder', example: 'Erinner mich morgen an das Gespraech mit Max', description: 'Erinnerungen planen' },
|
|
]
|
|
},
|
|
]
|
|
|
|
// DSGVO Data Categories
|
|
const DSGVO_CATEGORIES = [
|
|
{ category: 'Audio', processing: 'NUR transient im RAM, NIEMALS persistiert', storage: 'Keine', ttl: '-', icon: '🎤', risk: 'low' },
|
|
{ category: 'PII (Schuelernamen)', processing: 'NUR auf Lehrergeraet', storage: 'Client-side', ttl: '-', icon: '👤', risk: 'high' },
|
|
{ category: 'Pseudonyme', processing: 'Server erlaubt (student_ref, class_ref)', storage: 'Valkey Cache', ttl: '24h', icon: '🔢', risk: 'low' },
|
|
{ category: 'Transkripte', processing: 'NUR verschluesselt (AES-256-GCM)', storage: 'PostgreSQL', ttl: '7 Tage', icon: '📝', risk: 'medium' },
|
|
{ category: 'Task States', processing: 'TaskOrchestrator', storage: 'Valkey', ttl: '30 Tage', icon: '📋', risk: 'low' },
|
|
{ category: 'Audit Logs', processing: 'Nur truncated IDs, keine PII', storage: 'PostgreSQL', ttl: '90 Tage', icon: '📊', risk: 'low' },
|
|
]
|
|
|
|
// API Endpoints
|
|
const API_ENDPOINTS = [
|
|
{ method: 'POST', path: '/api/v1/sessions', description: 'Voice Session erstellen' },
|
|
{ method: 'GET', path: '/api/v1/sessions/{id}', description: 'Session Status abrufen' },
|
|
{ method: 'DELETE', path: '/api/v1/sessions/{id}', description: 'Session beenden' },
|
|
{ method: 'GET', path: '/api/v1/sessions/{id}/tasks', description: 'Pending Tasks abrufen' },
|
|
{ method: 'POST', path: '/api/v1/tasks', description: 'Task erstellen' },
|
|
{ method: 'GET', path: '/api/v1/tasks/{id}', description: 'Task Status abrufen' },
|
|
{ method: 'PUT', path: '/api/v1/tasks/{id}/transition', description: 'Task State aendern' },
|
|
{ method: 'DELETE', path: '/api/v1/tasks/{id}', description: 'Task loeschen' },
|
|
{ method: 'WS', path: '/ws/voice', description: 'Voice Streaming (WebSocket)' },
|
|
{ method: 'GET', path: '/health', description: 'Health Check' },
|
|
]
|
|
|
|
export default function VoiceMatrixPage() {
|
|
const [activeTab, setActiveTab] = useState<TabType>('overview')
|
|
const [demoLoaded, setDemoLoaded] = useState(false)
|
|
|
|
const tabs = [
|
|
{ id: 'overview', name: 'Architektur', icon: '🏗️' },
|
|
{ id: 'demo', name: 'Live Demo', icon: '🎤' },
|
|
{ id: 'tasks', name: 'Task States', icon: '📋' },
|
|
{ id: 'intents', name: 'Intents (22)', icon: '🎯' },
|
|
{ id: 'dsgvo', name: 'DSGVO', icon: '🔒' },
|
|
{ id: 'api', name: 'API', icon: '🔌' },
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
{/* Page Purpose */}
|
|
<PagePurpose
|
|
title="Voice Service"
|
|
purpose="Voice-First Interface mit PersonaPlex-7B & TaskOrchestrator. Konfigurieren und testen Sie den Voice-Service fuer Lehrer-Interaktionen per Sprache."
|
|
audience={['Entwickler', 'Admins']}
|
|
architecture={{
|
|
services: ['voice-service (Python, Port 8091)', 'studio-v2 (Next.js)', 'valkey (Cache)'],
|
|
databases: ['PostgreSQL', 'Valkey Cache'],
|
|
}}
|
|
relatedPages={[
|
|
{ name: 'Matrix & Jitsi', href: '/communication/matrix', description: 'Kommunikation Monitoring' },
|
|
{ name: 'GPU Infrastruktur', href: '/infrastructure/gpu', description: 'GPU fuer Voice-Service' },
|
|
]}
|
|
collapsible={true}
|
|
defaultCollapsed={false}
|
|
/>
|
|
|
|
{/* Quick Links */}
|
|
<div className="mb-6 flex flex-wrap gap-3">
|
|
<a
|
|
href="https://macmini:3001/voice-test"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
|
|
</svg>
|
|
Voice Test (Studio)
|
|
</a>
|
|
<a
|
|
href="https://macmini:8091/health"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Health Check
|
|
</a>
|
|
<Link
|
|
href="/development/docs"
|
|
className="flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Developer Docs
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Stats Overview */}
|
|
<div className="grid grid-cols-2 md:grid-cols-6 gap-4 mb-6">
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-teal-600">8091</div>
|
|
<div className="text-sm text-slate-500">Port</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-blue-600">22</div>
|
|
<div className="text-sm text-slate-500">Task Types</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-purple-600">9</div>
|
|
<div className="text-sm text-slate-500">Task States</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-green-600">24kHz</div>
|
|
<div className="text-sm text-slate-500">Audio Rate</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-orange-600">80ms</div>
|
|
<div className="text-sm text-slate-500">Frame Size</div>
|
|
</div>
|
|
<div className="bg-white rounded-lg shadow p-4">
|
|
<div className="text-3xl font-bold text-red-600">0</div>
|
|
<div className="text-sm text-slate-500">Audio Persist</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="bg-white rounded-lg shadow mb-6">
|
|
<div className="border-b border-slate-200 px-4">
|
|
<div className="flex gap-1 overflow-x-auto">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id as TabType)}
|
|
className={`px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors border-b-2 ${
|
|
activeTab === tab.id
|
|
? 'border-teal-600 text-teal-600'
|
|
: 'border-transparent text-slate-500 hover:text-slate-700'
|
|
}`}
|
|
>
|
|
<span className="mr-2">{tab.icon}</span>
|
|
{tab.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{/* Overview Tab */}
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-semibold text-slate-900">Voice-First Architektur</h3>
|
|
|
|
{/* Architecture Diagram */}
|
|
<div className="bg-slate-50 rounded-lg p-6 font-mono text-sm overflow-x-auto">
|
|
<pre className="text-slate-700">{`
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
│ LEHRERGERAET (PWA / App) │
|
|
│ ┌────────────────────────────────────────────────────────────┐ │
|
|
│ │ VoiceCapture.tsx │ voice-encryption.ts │ voice-api.ts │ │
|
|
│ │ Mikrofon │ AES-256-GCM │ WebSocket Client │ │
|
|
│ └────────────────────────────────────────────────────────────┘ │
|
|
└───────────────────────────┬──────────────────────────────────────┘
|
|
│ WebSocket (wss://)
|
|
▼
|
|
┌──────────────────────────────────────────────────────────────────┐
|
|
│ VOICE SERVICE (Port 8091) │
|
|
│ ┌────────────────────────────────────────────────────────────┐ │
|
|
│ │ main.py │ streaming.py │ sessions.py │ tasks.py │ │
|
|
│ └────────────────────────────────────────────────────────────┘ │
|
|
│ ┌────────────────────────────────────────────────────────────┐ │
|
|
│ │ task_orchestrator.py │ intent_router.py │ encryption │ │
|
|
│ └────────────────────────────────────────────────────────────┘ │
|
|
└───────────────────────────┬──────────────────────────────────────┘
|
|
│
|
|
┌──────────────────┼──────────────────┐
|
|
▼ ▼ ▼
|
|
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
|
│ PersonaPlex-7B │ │ Ollama Fallback │ │ Valkey Cache │
|
|
│ (A100 GPU) │ │ (Mac Mini) │ │ (Sessions) │
|
|
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
|
`}</pre>
|
|
</div>
|
|
|
|
{/* Technology Stack */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-blue-800 mb-2">Voice Model (Produktion)</h4>
|
|
<p className="text-sm text-blue-700">PersonaPlex-7B (NVIDIA)</p>
|
|
<p className="text-xs text-blue-600 mt-1">Full-Duplex Speech-to-Speech</p>
|
|
<p className="text-xs text-blue-500">Lizenz: MIT + NVIDIA Open Model</p>
|
|
</div>
|
|
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-green-800 mb-2">Agent Orchestration</h4>
|
|
<p className="text-sm text-green-700">TaskOrchestrator</p>
|
|
<p className="text-xs text-green-600 mt-1">Task State Machine</p>
|
|
<p className="text-xs text-green-500">Lizenz: Proprietary</p>
|
|
</div>
|
|
<div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-purple-800 mb-2">Audio Codec</h4>
|
|
<p className="text-sm text-purple-700">Mimi (24kHz, 80ms)</p>
|
|
<p className="text-xs text-purple-600 mt-1">Low-Latency Streaming</p>
|
|
<p className="text-xs text-purple-500">Lizenz: MIT</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Key Files */}
|
|
<div>
|
|
<h4 className="font-semibold text-slate-800 mb-3">Wichtige Dateien</h4>
|
|
<div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
|
|
<table className="min-w-full divide-y divide-slate-200">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">Datei</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium text-slate-500 uppercase">Beschreibung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
<tr><td className="px-4 py-2 font-mono text-sm">voice-service/main.py</td><td className="px-4 py-2 text-sm text-slate-600">FastAPI Entry, WebSocket Handler</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-sm">voice-service/services/task_orchestrator.py</td><td className="px-4 py-2 text-sm text-slate-600">Task State Machine</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-sm">voice-service/services/intent_router.py</td><td className="px-4 py-2 text-sm text-slate-600">Intent Detection (22 Types)</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-sm">voice-service/services/encryption_service.py</td><td className="px-4 py-2 text-sm text-slate-600">Namespace Key Management</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-sm">studio-v2/components/voice/VoiceCapture.tsx</td><td className="px-4 py-2 text-sm text-slate-600">Frontend Mikrofon + Crypto</td></tr>
|
|
<tr><td className="px-4 py-2 font-mono text-sm">studio-v2/lib/voice/voice-encryption.ts</td><td className="px-4 py-2 text-sm text-slate-600">AES-256-GCM Client-side</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Demo Tab */}
|
|
{activeTab === 'demo' && (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-slate-900">Live Voice Demo</h3>
|
|
<a
|
|
href="https://macmini:3001/voice-test"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-teal-600 hover:text-teal-700 flex items-center gap-1"
|
|
>
|
|
In neuem Tab oeffnen
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="bg-slate-100 rounded-lg p-4 text-sm text-slate-600 mb-4">
|
|
<p><strong>Hinweis:</strong> Die Demo erfordert, dass der Voice Service (Port 8091) und das Studio-v2 Frontend (Port 3001) laufen.</p>
|
|
<code className="block mt-2 bg-slate-200 p-2 rounded">docker compose up -d voice-service && cd studio-v2 && npm run dev</code>
|
|
</div>
|
|
|
|
{/* Embedded Demo */}
|
|
<div className="relative bg-slate-900 rounded-lg overflow-hidden" style={{ height: '600px' }}>
|
|
{!demoLoaded && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<button
|
|
onClick={() => setDemoLoaded(true)}
|
|
className="px-6 py-3 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Voice Demo laden
|
|
</button>
|
|
</div>
|
|
)}
|
|
{demoLoaded && (
|
|
<iframe
|
|
src="https://macmini:3001/voice-test?embed=true"
|
|
className="w-full h-full border-0"
|
|
title="Voice Demo"
|
|
allow="microphone"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Task States Tab */}
|
|
{activeTab === 'tasks' && (
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-semibold text-slate-900">Task State Machine (TaskOrchestrator)</h3>
|
|
|
|
{/* State Diagram */}
|
|
<div className="bg-slate-50 rounded-lg p-6 font-mono text-sm overflow-x-auto">
|
|
<pre className="text-slate-700">{`
|
|
DRAFT → QUEUED → RUNNING → READY
|
|
│
|
|
┌───────────┴───────────┐
|
|
│ │
|
|
APPROVED REJECTED
|
|
│ │
|
|
COMPLETED DRAFT (revision)
|
|
|
|
Any State → EXPIRED (TTL)
|
|
Any State → PAUSED (User Interrupt)
|
|
`}</pre>
|
|
</div>
|
|
|
|
{/* States Table */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{TASK_STATES.map((state) => (
|
|
<div key={state.state} className={`${state.color} rounded-lg p-4`}>
|
|
<div className="font-semibold text-lg">{state.state}</div>
|
|
<p className="text-sm mt-1">{state.description}</p>
|
|
{state.next.length > 0 && (
|
|
<div className="mt-2 text-xs">
|
|
<span className="opacity-75">Naechste:</span>{' '}
|
|
{state.next.join(', ')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Intents Tab */}
|
|
{activeTab === 'intents' && (
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-semibold text-slate-900">Intent Types (22 unterstuetzte Typen)</h3>
|
|
|
|
{INTENT_GROUPS.map((group) => (
|
|
<div key={group.group} className={`${group.color} border rounded-lg p-4`}>
|
|
<h4 className="font-semibold text-slate-800 mb-3">{group.group}</h4>
|
|
<div className="space-y-2">
|
|
{group.intents.map((intent) => (
|
|
<div key={intent.type} className="bg-white rounded-lg p-3 shadow-sm">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<code className="text-sm font-mono text-teal-700 bg-teal-50 px-2 py-0.5 rounded">
|
|
{intent.type}
|
|
</code>
|
|
<p className="text-sm text-slate-600 mt-1">{intent.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 text-xs text-slate-500 italic">
|
|
Beispiel: "{intent.example}"
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* DSGVO Tab */}
|
|
{activeTab === 'dsgvo' && (
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-semibold text-slate-900">DSGVO-Compliance</h3>
|
|
|
|
{/* Key Principles */}
|
|
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-green-800 mb-2">Kernprinzipien</h4>
|
|
<ul className="list-disc list-inside text-sm text-green-700 space-y-1">
|
|
<li><strong>Audio NIEMALS persistiert</strong> - Nur transient im RAM</li>
|
|
<li><strong>Namespace-Verschluesselung</strong> - Key nur auf Lehrergeraet</li>
|
|
<li><strong>Keine Klartext-PII serverseitig</strong> - Nur verschluesselt oder pseudonymisiert</li>
|
|
<li><strong>TTL-basierte Auto-Loeschung</strong> - 7/30/90 Tage je nach Kategorie</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Data Categories Table */}
|
|
<div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
|
|
<table className="min-w-full divide-y divide-slate-200">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Kategorie</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Verarbeitung</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Speicherort</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">TTL</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Risiko</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
{DSGVO_CATEGORIES.map((cat) => (
|
|
<tr key={cat.category}>
|
|
<td className="px-4 py-3">
|
|
<span className="mr-2">{cat.icon}</span>
|
|
<span className="font-medium">{cat.category}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">{cat.processing}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">{cat.storage}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">{cat.ttl}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
|
cat.risk === 'low' ? 'bg-green-100 text-green-700' :
|
|
cat.risk === 'medium' ? 'bg-yellow-100 text-yellow-700' :
|
|
'bg-red-100 text-red-700'
|
|
}`}>
|
|
{cat.risk.toUpperCase()}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Audit Log Info */}
|
|
<div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
|
|
<h4 className="font-semibold text-slate-800 mb-2">Audit Logs (ohne PII)</h4>
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-green-600 font-medium">Erlaubt:</span>
|
|
<ul className="list-disc list-inside text-slate-600 mt-1">
|
|
<li>ref_id (truncated)</li>
|
|
<li>content_type</li>
|
|
<li>size_bytes</li>
|
|
<li>ttl_hours</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<span className="text-red-600 font-medium">Verboten:</span>
|
|
<ul className="list-disc list-inside text-slate-600 mt-1">
|
|
<li>user_name</li>
|
|
<li>content / transcript</li>
|
|
<li>email</li>
|
|
<li>student_name</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* API Tab */}
|
|
{activeTab === 'api' && (
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-semibold text-slate-900">Voice Service API (Port 8091)</h3>
|
|
|
|
{/* REST Endpoints */}
|
|
<div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
|
|
<table className="min-w-full divide-y divide-slate-200">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Methode</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Endpoint</th>
|
|
<th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Beschreibung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-200">
|
|
{API_ENDPOINTS.map((ep, idx) => (
|
|
<tr key={idx}>
|
|
<td className="px-4 py-3">
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${
|
|
ep.method === 'GET' ? 'bg-green-100 text-green-700' :
|
|
ep.method === 'POST' ? 'bg-blue-100 text-blue-700' :
|
|
ep.method === 'PUT' ? 'bg-yellow-100 text-yellow-700' :
|
|
ep.method === 'DELETE' ? 'bg-red-100 text-red-700' :
|
|
'bg-purple-100 text-purple-700'
|
|
}`}>
|
|
{ep.method}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 font-mono text-sm">{ep.path}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">{ep.description}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* WebSocket Protocol */}
|
|
<div className="bg-slate-50 rounded-lg p-4">
|
|
<h4 className="font-semibold text-slate-800 mb-3">WebSocket Protocol</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
|
<div className="bg-white rounded-lg p-3 border border-slate-200">
|
|
<div className="font-medium text-slate-700 mb-2">Client → Server</div>
|
|
<ul className="list-disc list-inside text-slate-600 space-y-1">
|
|
<li><code className="bg-slate-100 px-1 rounded">Binary</code>: Int16 PCM Audio (24kHz, 80ms)</li>
|
|
<li><code className="bg-slate-100 px-1 rounded">JSON</code>: {`{type: "config|end_turn|interrupt"}`}</li>
|
|
</ul>
|
|
</div>
|
|
<div className="bg-white rounded-lg p-3 border border-slate-200">
|
|
<div className="font-medium text-slate-700 mb-2">Server → Client</div>
|
|
<ul className="list-disc list-inside text-slate-600 space-y-1">
|
|
<li><code className="bg-slate-100 px-1 rounded">Binary</code>: Audio Response (base64)</li>
|
|
<li><code className="bg-slate-100 px-1 rounded">JSON</code>: {`{type: "transcript|intent|status|error"}`}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Example curl commands */}
|
|
<div className="bg-slate-900 rounded-lg p-4 text-sm">
|
|
<h4 className="font-semibold text-slate-300 mb-3">Beispiel: Session erstellen</h4>
|
|
<pre className="text-green-400 overflow-x-auto">{`curl -X POST https://macmini:8091/api/v1/sessions \\
|
|
-H "Content-Type: application/json" \\
|
|
-d '{
|
|
"namespace_id": "ns-12345678abcdef12345678abcdef12",
|
|
"key_hash": "sha256:dGVzdGtleWhhc2h0ZXN0a2V5aGFzaHRlc3Q=",
|
|
"device_type": "pwa"
|
|
}'`}</pre>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|