@@ -1713,7 +2146,7 @@ export default function RecorderSettings({ onAssetsGenerated }: Props) {
) : null}
-
+
Zeigt die aktuelle recorder.log aus dem App-Verzeichnis.
@@ -1730,7 +2163,7 @@ export default function RecorderSettings({ onAssetsGenerated }: Props) {
{appLogOpen ? (
-
+
{appLog?.path ? (
@@ -1775,6 +2208,282 @@ export default function RecorderSettings({ onAssetsGenerated }: Props) {
+
+ {/* Sicherheit */}
+
+
+
+
+
+
+ 🛡️
+
+
+
+
+ Konto-Sicherheit
+
+
+ Passwort, Zwei-Faktor-Authentifizierung und Passkeys getrennt von den Recorder-Einstellungen verwalten.
+
+
+
+
+
+
+ {statusPill(!!authStatus?.totpEnabled, '2FA aktiv', '2FA aus')}
+ {statusPill(!!authStatus?.passkeyConfigured, 'Passkey aktiv', 'Kein Passkey')}
+
+
+
+
+
+
+
+
+ Passwort ändern
+
+
+ Ändert das Login-Passwort. Andere Sessions werden abgemeldet.
+
+
+
+
+
+ setCurrentPassword(e.target.value)}
+ placeholder="Aktuelles Passwort"
+ autoComplete="current-password"
+ disabled={securityBusy}
+ className="rounded-lg bg-white px-3 py-2 text-sm text-gray-900 ring-1 ring-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-white/10 dark:text-white dark:ring-white/10"
+ />
+
+ setNewPassword(e.target.value)}
+ placeholder="Neues Passwort"
+ autoComplete="new-password"
+ disabled={securityBusy}
+ className="rounded-lg bg-white px-3 py-2 text-sm text-gray-900 ring-1 ring-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-white/10 dark:text-white dark:ring-white/10"
+ />
+
+ setNewPasswordRepeat(e.target.value)}
+ placeholder="Neues Passwort wiederholen"
+ autoComplete="new-password"
+ disabled={securityBusy}
+ className="rounded-lg bg-white px-3 py-2 text-sm text-gray-900 ring-1 ring-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-white/10 dark:text-white dark:ring-white/10"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Zwei-Faktor-Authentifizierung
+
+
+ Authenticator-App als zweiter Faktor. Einzelne Geräte können bei TOTP nicht getrennt erkannt werden.
+
+
+
+ {statusPill(!!authStatus?.totpEnabled, 'Aktiv', 'Aus')}
+
+
+
+ {authStatus?.totpDevice ? (
+
+ ) : (
+
+ 2FA ist noch nicht eingerichtet. Die Einrichtung erfolgt aktuell beim nächsten Login-Setup.
+
+ )}
+
+
+ {authStatus?.totpConfigured || authStatus?.totpEnabled ? (
+ <>
+
+ {
+ setDisable2FAPassword(e.target.value)
+ setDisable2FAFieldError((cur) => ({ ...cur, password: undefined }))
+ }}
+ placeholder="Aktuelles Passwort"
+ autoComplete="current-password"
+ disabled={securityBusy}
+ className={[
+ 'rounded-lg bg-white px-3 py-2 text-sm text-gray-900 ring-1 focus:outline-none focus:ring-2 dark:bg-white/10 dark:text-white',
+ disable2FAFieldError?.password
+ ? 'ring-red-300 focus:ring-red-500 dark:ring-red-400/50'
+ : 'ring-gray-200 focus:ring-indigo-500 dark:ring-white/10',
+ ].join(' ')}
+ />
+
+ {
+ setDisable2FACode(e.target.value.replace(/\D/g, '').slice(0, 6))
+ setDisable2FAFieldError((cur) => ({ ...cur, code: undefined }))
+ }}
+ placeholder="2FA-Code"
+ inputMode="numeric"
+ autoComplete="one-time-code"
+ disabled={securityBusy}
+ className={[
+ 'rounded-lg bg-white px-3 py-2 text-sm text-gray-900 ring-1 focus:outline-none focus:ring-2 dark:bg-white/10 dark:text-white',
+ disable2FAFieldError?.code
+ ? 'ring-red-300 focus:ring-red-500 dark:ring-red-400/50'
+ : 'ring-gray-200 focus:ring-indigo-500 dark:ring-white/10',
+ ].join(' ')}
+ />
+
+
+ {disable2FAFieldError?.password || disable2FAFieldError?.code ? (
+
+ {disable2FAFieldError.password || disable2FAFieldError.code}
+
+ ) : (
+
+ Zum Deaktivieren brauchst du dein aktuelles Passwort
+ {authStatus?.totpEnabled ? ' und einen gültigen 2FA-Code.' : '.'}
+
+ )}
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+ Passkeys
+
+
+ Anmeldung ohne Passwort über Face ID, Fingerabdruck, Windows Hello oder Sicherheitsschlüssel.
+
+
+
+ {statusPill(!!authStatus?.passkeyConfigured, 'Aktiv', 'Keine')}
+
+
+
+ {(authStatus?.passkeys ?? []).length > 0 ? (
+ (authStatus?.passkeys ?? []).map((pk, index) => (
+
void deletePasskey(pk)}
+ >
+ Löschen
+
+ }
+ />
+ ))
+ ) : (
+
+ Noch kein Passkey gespeichert.
+
+ )}
+
+
+ {!passkeySupported ? (
+
+ Dein Browser oder diese Verbindung unterstützt Passkeys aktuell nicht.
+
+ ) : (
+
+ {passkeyFeedback ? (
+
+ {passkeyFeedback.kind === 'loading' ? '⏳ ' : null}
+ {passkeyFeedback.kind === 'success' ? '✅ ' : null}
+ {passkeyFeedback.kind === 'error' ? '⚠️ ' : null}
+ {passkeyFeedback.text}
+
+ ) : null}
+
+
+
+
+
+ )}
+
+
+
)
diff --git a/frontend/src/components/ui/ToastProvider.tsx b/frontend/src/components/ui/ToastProvider.tsx
index 8ab44bc..3d4b27c 100644
--- a/frontend/src/components/ui/ToastProvider.tsx
+++ b/frontend/src/components/ui/ToastProvider.tsx
@@ -606,12 +606,9 @@ export function ToastProvider({
loading="lazy"
referrerPolicy="no-referrer"
className={[
- // größer + volle Höhe des Toast-Inhaltsbereichs visuell anliegend
- 'h-full min-h-[72px] w-16 sm:w-[72px]',
+ 'h-full min-h-[72px] w-20 sm:w-24',
'object-cover object-center',
- // nur links runden, damit es in den Toast passt
'rounded-l-xl',
- // leichte Trennlinie rechts
'border-r border-black/5 dark:border-white/10',
'bg-gray-100 dark:bg-white/5',
].join(' ')}
diff --git a/frontend/src/components/ui/TrainingFeedbackHistoryModal.tsx b/frontend/src/components/ui/TrainingFeedbackHistoryModal.tsx
new file mode 100644
index 0000000..5c85c47
--- /dev/null
+++ b/frontend/src/components/ui/TrainingFeedbackHistoryModal.tsx
@@ -0,0 +1,1278 @@
+// frontend\src\components\ui\TrainingFeedbackHistoryModal.tsx
+
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react'
+import {
+ AdjustmentsHorizontalIcon,
+ CheckCircleIcon,
+ ClockIcon,
+ CubeTransparentIcon,
+ DocumentTextIcon,
+ MagnifyingGlassIcon,
+ PencilSquareIcon,
+ PhotoIcon,
+ RectangleGroupIcon,
+ SparklesIcon,
+} from '@heroicons/react/20/solid'
+import Button from './Button'
+import Modal from './Modal'
+import { getSegmentLabelItem } from './Icons'
+import { formatDateTime } from './formatters'
+
+export type TrainingFeedbackBox = {
+ label: string
+ score?: number
+ x: number
+ y: number
+ w: number
+ h: number
+}
+
+export type TrainingFeedbackScoredLabel = {
+ label: string
+ score: number
+}
+
+export type TrainingFeedbackPrediction = {
+ modelAvailable: boolean
+ source?: string
+
+ sexPosition: string
+ sexPositionScore: number
+ peoplePresent: TrainingFeedbackScoredLabel[]
+ bodyPartsPresent: TrainingFeedbackScoredLabel[]
+ objectsPresent: TrainingFeedbackScoredLabel[]
+ clothingPresent: TrainingFeedbackScoredLabel[]
+ boxes?: TrainingFeedbackBox[]
+}
+
+export type TrainingFeedbackCorrection = {
+ sexPosition: string
+ peoplePresent: string[]
+ bodyPartsPresent: string[]
+ objectsPresent: string[]
+ clothingPresent: string[]
+ boxes: TrainingFeedbackBox[]
+}
+
+export type TrainingFeedbackAnnotation = {
+ sampleId: string
+ frameUrl: string
+ sourceFile: string
+ sourcePath?: string
+ sourceSizeBytes?: number
+ second: number
+ createdAt: string
+ answeredAt: string
+ prediction: TrainingFeedbackPrediction
+ accepted: boolean
+ correction?: TrainingFeedbackCorrection
+ notes?: string
+}
+
+type FeedbackFilter = 'all' | 'accepted' | 'corrected'
+
+function clamp01(value: number) {
+ if (!Number.isFinite(value)) return 0
+ return Math.max(0, Math.min(1, value))
+}
+
+function clampPercent(value: number) {
+ if (!Number.isFinite(value)) return 0
+ return Math.max(0, Math.min(100, value))
+}
+
+function normalizeBox(box: TrainingFeedbackBox): TrainingFeedbackBox {
+ const x = clamp01(Number(box.x))
+ const y = clamp01(Number(box.y))
+ const w = clamp01(Math.min(Number(box.w), 1 - x))
+ const h = clamp01(Math.min(Number(box.h), 1 - y))
+
+ return {
+ ...box,
+ x,
+ y,
+ w,
+ h,
+ }
+}
+
+function annotationEffectiveCorrection(
+ annotation: TrainingFeedbackAnnotation
+): TrainingFeedbackCorrection {
+ if (annotation.correction) {
+ return annotation.correction
+ }
+
+ return {
+ sexPosition: annotation.prediction.sexPosition || 'unknown',
+ peoplePresent: (annotation.prediction.peoplePresent ?? []).map((item) => item.label),
+ bodyPartsPresent: (annotation.prediction.bodyPartsPresent ?? []).map((item) => item.label),
+ objectsPresent: (annotation.prediction.objectsPresent ?? []).map((item) => item.label),
+ clothingPresent: (annotation.prediction.clothingPresent ?? []).map((item) => item.label),
+ boxes: annotation.prediction.boxes ?? [],
+ }
+}
+
+function percent(value?: number | null) {
+ const n = Number(value)
+ if (!Number.isFinite(n)) return '—'
+ return `${Math.round(clamp01(n) * 100)}%`
+}
+
+function scoreLevel(score?: number | null): 'none' | 'low' | 'mid' | 'high' {
+ const n = Number(score)
+
+ if (!Number.isFinite(n)) return 'none'
+ if (n < 0.5) return 'low'
+ if (n < 0.75) return 'mid'
+ return 'high'
+}
+
+function scoreBorderClass(score?: number | null) {
+ switch (scoreLevel(score)) {
+ case 'low':
+ return 'border-red-500'
+ case 'mid':
+ return 'border-yellow-400'
+ case 'high':
+ return 'border-emerald-400'
+ default:
+ return 'border-gray-300'
+ }
+}
+
+function scoreDotClass(score?: number | null) {
+ switch (scoreLevel(score)) {
+ case 'low':
+ return 'bg-red-500'
+ case 'mid':
+ return 'bg-yellow-400'
+ case 'high':
+ return 'bg-emerald-400'
+ default:
+ return 'bg-gray-300 dark:bg-gray-500'
+ }
+}
+
+function scorePillClass(score?: number | null) {
+ switch (scoreLevel(score)) {
+ case 'low':
+ return 'bg-red-50 text-red-800 ring-red-200 dark:bg-red-500/15 dark:text-red-100 dark:ring-red-400/30'
+ case 'mid':
+ return 'bg-yellow-50 text-yellow-900 ring-yellow-200 dark:bg-yellow-500/15 dark:text-yellow-100 dark:ring-yellow-400/30'
+ case 'high':
+ return 'bg-emerald-50 text-emerald-800 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-100 dark:ring-emerald-400/30'
+ default:
+ return 'bg-gray-50 text-gray-700 ring-gray-200 dark:bg-white/5 dark:text-gray-200 dark:ring-white/10'
+ }
+}
+
+function fileSizeLabel(bytes?: number) {
+ const n = Number(bytes)
+ if (!Number.isFinite(n) || n <= 0) return ''
+
+ if (n >= 1024 * 1024 * 1024) {
+ return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`
+ }
+
+ if (n >= 1024 * 1024) {
+ return `${(n / 1024 / 1024).toFixed(1)} MB`
+ }
+
+ if (n >= 1024) {
+ return `${Math.round(n / 1024)} KB`
+ }
+
+ return `${Math.round(n)} B`
+}
+
+function frameUrlForHistory(item?: TrainingFeedbackAnnotation | null) {
+ if (!item?.frameUrl) return ''
+
+ const separator = item.frameUrl.includes('?') ? '&' : '?'
+
+ return `${item.frameUrl}${separator}history=1&t=${encodeURIComponent(item.sampleId)}`
+}
+
+function feedbackStatusClass(accepted: boolean) {
+ return accepted
+ ? 'bg-emerald-50 text-emerald-800 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-100 dark:ring-emerald-400/30'
+ : 'bg-amber-50 text-amber-800 ring-amber-200 dark:bg-amber-500/15 dark:text-amber-100 dark:ring-amber-400/30'
+}
+
+function feedbackStatusText(accepted: boolean) {
+ return accepted ? 'Passt so' : 'Korrigiert'
+}
+
+function labelText(value: string) {
+ return getSegmentLabelItem(value).text
+}
+
+function StatusBadge(props: {
+ accepted: boolean
+ short?: boolean
+}) {
+ return (
+
+ {props.accepted ? (
+
+ ) : (
+
+ )}
+
+ {props.short ? (props.accepted ? 'Passt' : 'Korr.') : feedbackStatusText(props.accepted)}
+
+ )
+}
+
+function MetricTile(props: {
+ label: string
+ value: string | number
+ icon: ReactNode
+ tone?: 'default' | 'green' | 'amber' | 'blue'
+ compact?: boolean
+}) {
+ const toneClass =
+ props.tone === 'green'
+ ? 'bg-emerald-50 text-emerald-950 ring-emerald-100 dark:bg-emerald-500/15 dark:text-emerald-100 dark:ring-emerald-400/25'
+ : props.tone === 'amber'
+ ? 'bg-amber-50 text-amber-950 ring-amber-100 dark:bg-amber-500/15 dark:text-amber-100 dark:ring-amber-400/25'
+ : props.tone === 'blue'
+ ? 'bg-blue-50 text-blue-950 ring-blue-100 dark:bg-blue-500/15 dark:text-blue-100 dark:ring-blue-400/25'
+ : 'bg-white text-gray-950 ring-black/5 dark:bg-white/[0.07] dark:text-gray-100 dark:ring-white/10'
+
+ return (
+
+
+
+ {props.icon}
+
+
+
+
+ {props.label}
+
+
+
+ {props.value}
+
+
+
+
+ )
+}
+
+function MetaPill(props: {
+ icon?: ReactNode
+ children: ReactNode
+}) {
+ return (
+
+ {props.icon}
+ {props.children}
+
+ )
+}
+
+function FilterButton(props: {
+ active: boolean
+ children: ReactNode
+ onClick: () => void
+}) {
+ return (
+
+ )
+}
+
+function ReadonlyTrainingFrameViewer(props: {
+ imageSrc: string
+ boxes: TrainingFeedbackBox[]
+ sourceFile?: string
+ className?: string
+ highlightedBoxIndex?: number | null
+}) {
+ const [loaded, setLoaded] = useState(false)
+ const imageBoxRef = useRef
(null)
+ const frameImageRef = useRef(null)
+ const [imageLayerStyle, setImageLayerStyle] = useState(null)
+
+ const boxes = useMemo(() => {
+ return (props.boxes ?? [])
+ .map(normalizeBox)
+ .filter((box) => String(box.label || '').trim() && box.w > 0 && box.h > 0)
+ }, [props.boxes])
+
+ type ImageContentRect = {
+ left: number
+ top: number
+ width: number
+ height: number
+ right: number
+ bottom: number
+ }
+
+ const getImageContentRect = useCallback((): ImageContentRect | null => {
+ const imgEl = frameImageRef.current
+ if (!imgEl) return null
+
+ const rect = imgEl.getBoundingClientRect()
+ const naturalW = imgEl.naturalWidth
+ const naturalH = imgEl.naturalHeight
+
+ if (
+ rect.width <= 0 ||
+ rect.height <= 0 ||
+ naturalW <= 0 ||
+ naturalH <= 0
+ ) {
+ return null
+ }
+
+ const scale = Math.min(rect.width / naturalW, rect.height / naturalH)
+ const contentW = naturalW * scale
+ const contentH = naturalH * scale
+
+ const left = rect.left + (rect.width - contentW) / 2
+ const top = rect.top + (rect.height - contentH) / 2
+
+ return {
+ left,
+ top,
+ width: contentW,
+ height: contentH,
+ right: left + contentW,
+ bottom: top + contentH,
+ }
+ }, [])
+
+ const updateImageLayerStyle = useCallback(() => {
+ const boxEl = imageBoxRef.current
+ const contentRect = getImageContentRect()
+
+ if (!boxEl || !contentRect) {
+ setImageLayerStyle(null)
+ return
+ }
+
+ const boxRect = boxEl.getBoundingClientRect()
+
+ setImageLayerStyle({
+ left: contentRect.left - boxRect.left,
+ top: contentRect.top - boxRect.top,
+ width: contentRect.width,
+ height: contentRect.height,
+ })
+ }, [getImageContentRect])
+
+ useEffect(() => {
+ setLoaded(false)
+ setImageLayerStyle(null)
+ }, [props.imageSrc])
+
+ useEffect(() => {
+ if (!loaded) return
+
+ updateImageLayerStyle()
+
+ const boxEl = imageBoxRef.current
+ const imgEl = frameImageRef.current
+
+ const resizeObserver =
+ typeof ResizeObserver !== 'undefined'
+ ? new ResizeObserver(() => updateImageLayerStyle())
+ : null
+
+ if (resizeObserver) {
+ if (boxEl) resizeObserver.observe(boxEl)
+ if (imgEl) resizeObserver.observe(imgEl)
+ }
+
+ window.addEventListener('resize', updateImageLayerStyle)
+ window.addEventListener('scroll', updateImageLayerStyle, true)
+
+ return () => {
+ resizeObserver?.disconnect()
+ window.removeEventListener('resize', updateImageLayerStyle)
+ window.removeEventListener('scroll', updateImageLayerStyle, true)
+ }
+ }, [loaded, props.imageSrc, updateImageLayerStyle])
+
+ return (
+
+ {props.imageSrc ? (
+
+
+
{
+ setLoaded(true)
+ window.requestAnimationFrame(updateImageLayerStyle)
+ }}
+ onError={() => {
+ setLoaded(true)
+ window.requestAnimationFrame(updateImageLayerStyle)
+ }}
+ />
+
+ {loaded && boxes.length > 0 && imageLayerStyle ? (
+
+ {boxes.map((box, index) => {
+ const left = clampPercent(box.x * 100)
+ const top = clampPercent(box.y * 100)
+ const width = clampPercent(box.w * 100)
+ const height = clampPercent(box.h * 100)
+
+ const item = getSegmentLabelItem(box.label)
+ const Icon = item.icon
+ const isSmallBox = width < 18 || height < 12
+ const alignLabelRight = box.x + box.w > 0.62
+
+ const imageRect = frameImageRef.current?.getBoundingClientRect()
+ const labelMaxWidth = imageRect?.width
+ ? Math.max(72, Math.min(210, imageRect.width - 8))
+ : 210
+
+ const isDimmed =
+ props.highlightedBoxIndex !== null &&
+ props.highlightedBoxIndex !== undefined &&
+ props.highlightedBoxIndex !== index
+
+ return (
+
+
+
+
+ #{index + 1}
+
+
+
+
+ {!isSmallBox ? (
+
+ {item.text}
+
+ ) : null}
+
+ {typeof box.score === 'number' && Number.isFinite(box.score) ? (
+
+ {percent(box.score)}
+
+ ) : (
+
+ korr.
+
+ )}
+
+
+
+ )
+ })}
+
+ ) : null}
+
+
+ ) : (
+
+ Kein Frame verfügbar
+
+ )}
+
+
+
+ Boxen
+
+
+
+ Detector-Boxen
+
+
+
+
+ {boxes.length}
+
+
+ {boxes.length === 0 ? (
+
+ Keine Boxen gespeichert.
+
+ ) : (
+
+ {boxes.map((box, index) => {
+ const item = getSegmentLabelItem(box.label)
+ const Icon = item.icon
+ const hasScore = typeof box.score === 'number' && Number.isFinite(box.score)
+ const isHovered = props.hoveredBoxIndex === index
+ const hasActiveHover = props.hoveredBoxIndex !== null && props.hoveredBoxIndex !== undefined
+
+ return (
+
props.onHoveredBoxIndexChange?.(index)}
+ onMouseLeave={() => props.onHoveredBoxIndexChange?.(null)}
+ className={[
+ 'rounded-xl bg-gray-50 p-2.5 ring-1 ring-black/5 transition duration-150 dark:bg-white/[0.04] dark:ring-white/10',
+ isHovered ? 'ring-2 ring-indigo-400 bg-indigo-50/70 dark:bg-indigo-500/10 dark:ring-indigo-300/60' : '',
+ hasActiveHover && !isHovered ? 'opacity-55' : 'opacity-100',
+ ].join(' ')}
+ >
+
+
+
+
+
+
+
+
+ #{index + 1} {item.text}
+
+
+
+ {box.label}
+
+
+
+
+
+
+ {hasScore ? percent(box.score) : 'korr.'}
+
+
+
+ )
+ })}
+
+ )}
+
+
+
+
+
+ Quelle
+
+
+
+ {props.item.sourceFile || fileNameFromPath(props.item.sourcePath) || '—'}
+
+
+
+
+
+
+
+ }>
+ {props.item.second.toFixed(2)}s
+
+
+ }>
+ {props.boxCount} Boxen
+
+
+ {size ? {size} : null}
+
+
+
+
+ Ergebnis
+
+
+
+ Gespeicherte Labels
+
+
+
+
+
+ {groups.map((group) => {
+ const values = (group.values ?? []).filter(Boolean)
+
+ return (
+
+
+ {group.title}
+
+
+
+ {values.length === 0 ? (
+
+ —
+
+ ) : (
+ values.map((value) => {
+ const item = getSegmentLabelItem(value)
+ const Icon = item.icon
+
+ return (
+
+
+
+
+ {labelText(value)}
+
+
+ )
+ })
+ )}
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Feedback-Historie
+
+
+
+ Trainingsantworten, Korrekturen, Labels und Detector-Boxen.
+
+
+
+
+
+ }
+ />
+
+ }
+ />
+
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!selected || !effective ? (
+
+ Kein Feedback ausgewählt.
+
+ ) : (
+
+
+
+
+
+
+
+
+ {props.onEditItem ? (
+
+
+
+
+
+
+
+
-
-
- {icon}
-
-
-
-
- {props.notice.title}
-
- {typeof props.notice.progress === 'number' ? (
-
- {Math.round(clampPercent(props.notice.progress))}%
-
- ) : null}
-
-
- {props.notice.items?.length ? (
-
- {props.notice.items.map((item) => {
- const Icon = item.icon
-
- return (
-
-
-
-
- {item.label}
-
-
-
- {item.value}
-
-
- )
- })}
-
- ) : (
-
- {props.notice.message}
-
- )}
-
-
- {props.onClose ? (
-
- ) : null}
-
-
-
+
+
-
+
+
-
+
{sorted.length} Labels
@@ -1637,6 +1532,12 @@ type TrainingStatsTabKey =
| 'objects'
| 'clothing'
+function topTrainingLabelStat(values: TrainingLabelStat[]) {
+ return [...values]
+ .filter((item) => String(item.label || '').trim())
+ .sort((a, b) => b.count - a.count)[0]
+}
+
function TrainingStatsModal(props: {
open: boolean
onClose: () => void
@@ -1664,6 +1565,7 @@ function TrainingStatsModal(props: {
values: TrainingLabelStat[]
total: number
confidence?: TrainingConfidence
+ topLabel?: TrainingLabelStat
}> = [
{
key: 'people',
@@ -1673,6 +1575,7 @@ function TrainingStatsModal(props: {
values: stats?.labels.people ?? [],
total: Math.max(1, boxCount),
confidence: averageCategoryConfidence(stats?.labels.people ?? []),
+ topLabel: topTrainingLabelStat(stats?.labels.people ?? []),
},
{
key: 'sexPositions',
@@ -1682,6 +1585,7 @@ function TrainingStatsModal(props: {
values: stats?.labels.sexPositions ?? [],
total: Math.max(1, totalFeedback),
confidence: averageCategoryConfidence(stats?.labels.sexPositions ?? []),
+ topLabel: topTrainingLabelStat(stats?.labels.sexPositions ?? []),
},
{
key: 'bodyParts',
@@ -1691,6 +1595,7 @@ function TrainingStatsModal(props: {
values: stats?.labels.bodyParts ?? [],
total: Math.max(1, totalFeedback),
confidence: averageCategoryConfidence(stats?.labels.bodyParts ?? []),
+ topLabel: topTrainingLabelStat(stats?.labels.bodyParts ?? []),
},
{
key: 'objects',
@@ -1700,6 +1605,7 @@ function TrainingStatsModal(props: {
values: stats?.labels.objects ?? [],
total: Math.max(1, totalFeedback),
confidence: averageCategoryConfidence(stats?.labels.objects ?? []),
+ topLabel: topTrainingLabelStat(stats?.labels.objects ?? []),
},
{
key: 'clothing',
@@ -1709,6 +1615,7 @@ function TrainingStatsModal(props: {
values: stats?.labels.clothing ?? [],
total: Math.max(1, totalFeedback),
confidence: averageCategoryConfidence(stats?.labels.clothing ?? []),
+ topLabel: topTrainingLabelStat(stats?.labels.clothing ?? []),
},
]
@@ -1927,7 +1834,10 @@ function TrainingStatsModal(props: {
{tabItems.map((item) => {
const active = item.key === activeTab
- const count = item.values.length
+ const topLabelItem = item.topLabel
+ ? getSegmentLabelItem(item.topLabel.label)
+ : null
+ const TopIcon = topLabelItem?.icon
return (
- {trainingRunning ? (
+
+
+
+
+ {trainingRunning && compact ? (
@@ -3654,6 +4082,26 @@ export default function TrainingTab(props: {
{shownTrainingEtaMs > 0 ? `ca. ${formatDuration(shownTrainingEtaMs)}` : '—'}
+
+
+
+ Epoche
+
+
+ {shownTrainingEpochText
+ ? shownTrainingEpochText.replace(/^Epoche\s+/i, '')
+ : '—'}
+
+
+
+
+
+ Ø / Epoche
+
+
+ {estimatedEpochMs > 0 ? formatDuration(estimatedEpochMs) : '—'}
+
+
) : null}
@@ -3739,7 +4187,10 @@ export default function TrainingTab(props: {
].join(' ')}
title="Alle Boxen entfernen"
>
- Alle löschen
+
+
+ Alle löschen
+
) : null}
-
- {hasBoxes ? (
-
-
-
- ) : null}
)
}
@@ -3953,36 +4390,81 @@ export default function TrainingTab(props: {
return (
-
-
- Training
+
+
+
+ Training
+
+
+ {sample?.sourceFile ? (
+
+
+ {sample.sourceFile}
+
+
+ ) : null}
-