9b8b7ca073
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 48s
CI / test-python-backend-compliance (push) Successful in 35s
CI / test-python-document-crawler (push) Successful in 22s
CI / test-python-dsms-gateway (push) Successful in 20s
Phase A: 8 new IT-Security training modules (SEC-PWD, SEC-DESK, SEC-KIAI, SEC-BYOD, SEC-VIDEO, SEC-USB, SEC-INC, SEC-HOME) with CTM entries. Bulk content and quiz generation endpoints for all 28 modules. Phase B: Piper TTS service (Python/FastAPI) for local German speech synthesis. training_media table, TTSClient in Go backend, audio generation endpoints, AudioPlayer component in frontend. MinIO storage integration. Phase C: FFmpeg presentation video pipeline — LLM generates slide scripts, ImageMagick renders 1920x1080 slides, FFmpeg combines with audio to MP4. VideoPlayer and ScriptPreview components in frontend. New files: 15 created, 9 modified - compliance-tts-service/ (Dockerfile, main.py, tts_engine.py, storage.py, slide_renderer.py, video_generator.py) - migrations 014-016 (training engine, IT-security modules, media table) - training package (models, store, content_generator, media, handlers) - frontend (AudioPlayer, VideoPlayer, ScriptPreview, api, types, page) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
87 lines
3.1 KiB
TypeScript
87 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import type { VideoScript } from '@/lib/sdk/training/types'
|
|
import { previewVideoScript } from '@/lib/sdk/training/api'
|
|
|
|
interface ScriptPreviewProps {
|
|
moduleId: string
|
|
}
|
|
|
|
export default function ScriptPreview({ moduleId }: ScriptPreviewProps) {
|
|
const [script, setScript] = useState<VideoScript | null>(null)
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
async function handlePreview() {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const result = await previewVideoScript(moduleId)
|
|
setScript(result as VideoScript)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Fehler bei der Script-Vorschau')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="border rounded-lg p-4 bg-white">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h4 className="text-sm font-medium text-gray-700">Folien-Vorschau</h4>
|
|
<button
|
|
onClick={handlePreview}
|
|
disabled={loading}
|
|
className="px-3 py-1.5 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 disabled:opacity-50"
|
|
>
|
|
{loading ? 'Generiere Vorschau...' : 'Script-Vorschau'}
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-xs text-red-600 mb-2">{error}</div>
|
|
)}
|
|
|
|
{loading && (
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<div className="animate-spin h-4 w-4 border-2 border-gray-500 border-t-transparent rounded-full" />
|
|
Folien-Script wird generiert...
|
|
</div>
|
|
)}
|
|
|
|
{script && (
|
|
<div className="space-y-3">
|
|
<h5 className="text-sm font-medium text-gray-900">{script.title}</h5>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{script.sections.map((section, i) => (
|
|
<div key={i} className="border rounded-lg p-3 bg-gray-50">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="text-xs font-medium text-white bg-blue-900 rounded-full w-6 h-6 flex items-center justify-center">
|
|
{i + 1}
|
|
</span>
|
|
<h6 className="text-sm font-medium text-gray-800">{section.heading}</h6>
|
|
</div>
|
|
{section.text && (
|
|
<p className="text-xs text-gray-600 mb-2">{section.text}</p>
|
|
)}
|
|
{section.bullet_points && section.bullet_points.length > 0 && (
|
|
<ul className="space-y-1">
|
|
{section.bullet_points.map((bp, j) => (
|
|
<li key={j} className="text-xs text-gray-600 flex items-start gap-1">
|
|
<span className="text-blue-500 mt-0.5">{String.fromCharCode(8226)}</span>
|
|
{bp}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-gray-400">{script.sections.length} Folien</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|