feat(training): add Media Pipeline — TTS Audio, Presentation Video, Bulk Generation
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
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>
This commit is contained in:
Benjamin Boenisch
130
admin-compliance/components/training/AudioPlayer.tsx
Normal file
130
admin-compliance/components/training/AudioPlayer.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import type { TrainingMedia } from '@/lib/sdk/training/types'
|
||||
import { generateAudio, publishMedia } from '@/lib/sdk/training/api'
|
||||
|
||||
interface AudioPlayerProps {
|
||||
moduleId: string
|
||||
audio: TrainingMedia | null
|
||||
onMediaUpdate: () => void
|
||||
}
|
||||
|
||||
export default function AudioPlayer({ moduleId, audio, onMediaUpdate }: AudioPlayerProps) {
|
||||
const [generating, setGenerating] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
async function handleGenerate() {
|
||||
setGenerating(true)
|
||||
setError(null)
|
||||
try {
|
||||
await generateAudio(moduleId)
|
||||
onMediaUpdate()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Audio-Generierung fehlgeschlagen')
|
||||
} finally {
|
||||
setGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePublishToggle() {
|
||||
if (!audio) return
|
||||
try {
|
||||
await publishMedia(audio.id, !audio.is_published)
|
||||
onMediaUpdate()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Fehler beim Aendern des Status')
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = Math.floor(seconds % 60)
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||
}
|
||||
|
||||
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">Audio</h4>
|
||||
{!audio && (
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{generating ? 'Generiere Audio...' : 'Audio generieren'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-600 mb-2">{error}</div>
|
||||
)}
|
||||
|
||||
{generating && !audio && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full" />
|
||||
Audio wird generiert (kann einige Minuten dauern)...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{audio && audio.status === 'processing' && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full" />
|
||||
Audio wird verarbeitet...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{audio && audio.status === 'failed' && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs text-red-600">Generierung fehlgeschlagen: {audio.error_message}</div>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{audio && audio.status === 'completed' && (
|
||||
<div className="space-y-3">
|
||||
<audio controls className="w-full" preload="none">
|
||||
<source src={`/api/sdk/v1/training/media/${audio.id}/stream`} type="audio/mpeg" />
|
||||
Ihr Browser unterstuetzt kein Audio.
|
||||
</audio>
|
||||
<div className="flex items-center justify-between text-xs text-gray-500">
|
||||
<div className="flex gap-4">
|
||||
<span>Dauer: {formatDuration(audio.duration_seconds)}</span>
|
||||
<span>Groesse: {formatSize(audio.file_size_bytes)}</span>
|
||||
<span>Stimme: {audio.voice_model}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handlePublishToggle}
|
||||
className={`px-2 py-1 rounded text-xs ${audio.is_published ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}
|
||||
>
|
||||
{audio.is_published ? 'Veroeffentlicht' : 'Veroeffentlichen'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200 disabled:opacity-50"
|
||||
>
|
||||
Neu generieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
86
admin-compliance/components/training/ScriptPreview.tsx
Normal file
86
admin-compliance/components/training/ScriptPreview.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
129
admin-compliance/components/training/VideoPlayer.tsx
Normal file
129
admin-compliance/components/training/VideoPlayer.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import type { TrainingMedia } from '@/lib/sdk/training/types'
|
||||
import { generateVideo, publishMedia } from '@/lib/sdk/training/api'
|
||||
|
||||
interface VideoPlayerProps {
|
||||
moduleId: string
|
||||
video: TrainingMedia | null
|
||||
onMediaUpdate: () => void
|
||||
}
|
||||
|
||||
export default function VideoPlayer({ moduleId, video, onMediaUpdate }: VideoPlayerProps) {
|
||||
const [generating, setGenerating] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
async function handleGenerate() {
|
||||
setGenerating(true)
|
||||
setError(null)
|
||||
try {
|
||||
await generateVideo(moduleId)
|
||||
onMediaUpdate()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Video-Generierung fehlgeschlagen')
|
||||
} finally {
|
||||
setGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePublishToggle() {
|
||||
if (!video) return
|
||||
try {
|
||||
await publishMedia(video.id, !video.is_published)
|
||||
onMediaUpdate()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Fehler beim Aendern des Status')
|
||||
}
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = Math.floor(seconds % 60)
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||
}
|
||||
|
||||
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">Praesentationsvideo</h4>
|
||||
{!video && (
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
{generating ? 'Generiere Video...' : 'Video generieren'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-xs text-red-600 mb-2">{error}</div>
|
||||
)}
|
||||
|
||||
{generating && !video && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-purple-500 border-t-transparent rounded-full" />
|
||||
Video wird generiert (Folien + Audio, kann einige Minuten dauern)...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{video && video.status === 'processing' && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<div className="animate-spin h-4 w-4 border-2 border-purple-500 border-t-transparent rounded-full" />
|
||||
Video wird verarbeitet...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{video && video.status === 'failed' && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs text-red-600">Generierung fehlgeschlagen: {video.error_message}</div>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
Erneut versuchen
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{video && video.status === 'completed' && (
|
||||
<div className="space-y-3">
|
||||
<video controls className="w-full rounded-lg bg-black" preload="none">
|
||||
<source src={`/api/sdk/v1/training/media/${video.id}/stream`} type="video/mp4" />
|
||||
Ihr Browser unterstuetzt kein Video.
|
||||
</video>
|
||||
<div className="flex items-center justify-between text-xs text-gray-500">
|
||||
<div className="flex gap-4">
|
||||
<span>Dauer: {formatDuration(video.duration_seconds)}</span>
|
||||
<span>Groesse: {formatSize(video.file_size_bytes)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handlePublishToggle}
|
||||
className={`px-2 py-1 rounded text-xs ${video.is_published ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}`}
|
||||
>
|
||||
{video.is_published ? 'Veroeffentlicht' : 'Veroeffentlichen'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={generating}
|
||||
className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded hover:bg-gray-200 disabled:opacity-50"
|
||||
>
|
||||
Neu generieren
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user