+
+ setValue((v) => ({
+ ...v,
+ trainingRecognitionEnabled: checked,
+ }))
+ }
+ label="Training-Erkennung aktivieren"
+ description="Wenn aktiv, werden neue Trainingsbilder automatisch mit YOLO und Scene-KNN analysiert. Wenn deaktiviert, kannst du weiterhin manuell korrigieren und Boxen zeichnen."
+ />
+
+
+
+
+
+
+
+
+ Object Detection Epochs
+
+
+ Maximale Trainingsdauer. 60 ist ein guter Standard.
+
+
+
+
+
+ setValue((v) => ({
+ ...v,
+ trainingDetectorEpochs: Number(e.target.value || 60),
+ }))
+ }
+ className="h-9 w-32 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-900 shadow-sm
+ dark:border-white/10 dark:bg-gray-900 dark:text-gray-100"
+ />
+
+
+ Epochs
+
+
+
+ Keine Einträge verfügbar.
+
+ )
+ }
+
+ return (
+
+ {props.values.map((value) => {
+ const active = props.selected.includes(value)
+ const item = getSegmentLabelItem(value)
+ const Icon = item.icon
+
+ return (
+
+ )
+ })}
+
+ )
+}
+
+function DetectorBoxLabelSelect(props: {
+ values: string[]
+ value: string
+ disabled?: boolean
+ onChange: (value: string) => void
+}) {
+ const [open, setOpen] = useState(false)
+
+ const selectedItem = getSegmentLabelItem(props.value)
+ const SelectedIcon = selectedItem.icon
+
+ useEffect(() => {
+ if (!open) return
+
+ const onPointerDown = () => setOpen(false)
+ window.addEventListener('pointerdown', onPointerDown)
+
+ return () => {
+ window.removeEventListener('pointerdown', onPointerDown)
+ }
+ }, [open])
+
+ if (props.values.length === 0) {
+ return (
+
+ )
+ }
+
+ return (
+ e.stopPropagation()}
+ >
+
+
+ {open ? (
+
+ )
+}
+
+function CollapsibleLabelSection(props: {
+ title: string
+ values: string[]
+ selected: string[]
+ expanded: boolean
+ onExpandedChange: (expanded: boolean) => void
+ onToggle: (value: string) => void
+}) {
+ const activeCount = props.selected.length
+ const hasActiveItems = activeCount > 0
+ const shown = props.expanded
+
+ return (
+
+ {props.values.map((value) => {
+ const active = value === props.value
+ const item = getSegmentLabelItem(value)
+ const Icon = item.icon
+
+ return (
+
+ )
+ })}
+
+ ) : null}
+
+
+
+ {shown ? (
+
+ )
+}
+
export default function TrainingTab() {
const [labels, setLabels] = useState
+
+ ) : null}
+
{/* Sidebar links */}
@@ -903,10 +1495,11 @@ export default function TrainingTab() {
size="sm"
variant="secondary"
className="w-full"
- disabled={uiLocked}
- onClick={() => void loadNext({ forceNew: true })}
+ disabled={uiLocked || !sample}
+ onClick={() => void reloadCurrentImage()}
+ title="Lädt das aktuelle Bild erneut und führt die Analyse neu aus."
>
- Anderes Bild
+ Neuladen
-
- {visibleBoxes.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 isDraft = drawingBox && index === visibleBoxes.length - 1
+ {showImageBoxes ? (
+
+ )
+ })}
+
+ ) : null}
+
+ {touchMagnifier?.visible && imageSrc && showImageBoxes ? (() => {
+ const el = imageBoxRef.current
+ const rect = el?.getBoundingClientRect()
+
+ if (!rect || rect.width <= 0 || rect.height <= 0) return null
+
+ const size = 156
+ const padding = 20
+
+ const activeBox =
+ drawingBox ||
+ (boxInteraction
+ ? correction.boxes?.[boxInteraction.index] ?? null
+ : null)
+
+ const hasUsableBox =
+ activeBox &&
+ Number.isFinite(activeBox.w) &&
+ Number.isFinite(activeBox.h) &&
+ activeBox.w > 0.003 &&
+ activeBox.h > 0.003
+
+ const boxCenterX = hasUsableBox
+ ? clamp01(activeBox.x + activeBox.w / 2)
+ : touchMagnifier.imageX
+
+ const boxCenterY = hasUsableBox
+ ? clamp01(activeBox.y + activeBox.h / 2)
+ : touchMagnifier.imageY
+
+ const boxPixelW = hasUsableBox ? activeBox.w * rect.width : 0
+ const boxPixelH = hasUsableBox ? activeBox.h * rect.height : 0
+
+ const fitZoom = hasUsableBox
+ ? Math.min(
+ (size - padding * 2) / Math.max(1, boxPixelW),
+ (size - padding * 2) / Math.max(1, boxPixelH)
+ )
+ : 2
+
+ const zoom = hasUsableBox
+ ? Math.max(0.55, Math.min(2.25, fitZoom))
+ : 2
+
+ const viewportW = typeof window !== 'undefined' ? window.innerWidth : 390
+ const viewportH = typeof window !== 'undefined' ? window.innerHeight : 800
+
+ let left = touchMagnifier.clientX - size / 2
+ let top = touchMagnifier.clientY - size - 28
+
+ if (top < 8) {
+ top = touchMagnifier.clientY + 28
+ }
+
+ left = Math.max(8, Math.min(viewportW - size - 8, left))
+ top = Math.max(8, Math.min(viewportH - size - 8, top))
+
+ const imageWidth = rect.width * zoom
+ const imageHeight = rect.height * zoom
+
+ const imageLeft = size / 2 - boxCenterX * imageWidth
+ const imageTop = size / 2 - boxCenterY * imageHeight
+
+ const pointerX = imageLeft + touchMagnifier.imageX * imageWidth
+ const pointerY = imageTop + touchMagnifier.imageY * imageHeight
+
+ const boxLeft = hasUsableBox ? imageLeft + activeBox.x * imageWidth : 0
+ const boxTop = hasUsableBox ? imageTop + activeBox.y * imageHeight : 0
+ const boxWidth = hasUsableBox ? activeBox.w * imageWidth : 0
+ const boxHeight = hasUsableBox ? activeBox.h * imageHeight : 0
+
+ return (
+
+ {visibleBoxes.map(({ box, index, isDraft }) => {
+ const left = clampPercent(box.x * 100)
+ const top = clampPercent(box.y * 100)
+ const width = clampPercent(box.w * 100)
+ const height = clampPercent(box.h * 100)
- return (
-
+
-
-
- )
- })}
-
+ 
+
+ {hasUsableBox ? (
+
+ ) : null}
+
+
+
+
+
+
+ )
+ })() : null}
{trainingRunning ? (
@@ -1078,7 +1929,7 @@ export default function TrainingTab() {
className="w-full justify-center"
title="Die Werte rechts werden als richtige Korrektur gespeichert."
>
- Korrektur speichern & weiter
+ Speichern & weiter