1160 lines
50 KiB
TypeScript
1160 lines
50 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import type {
|
|
DatasetCreateResponse,
|
|
DetectionModelCapability,
|
|
DetectionQaResult,
|
|
DetectionRead,
|
|
DetectionRunRead,
|
|
DetectionRunResponse,
|
|
ModelAssetRead,
|
|
QualityCheckRead,
|
|
YoloPreflightResponse,
|
|
} from '../../types'
|
|
import type { DetectionCalibrationRunRow, DetectionWorkflowStage } from '../../hooks/useDetectionWorkflow'
|
|
import { DETECTION_OPERATOR_PROFILES, type DetectionOperatorProfile } from './detectionProfiles'
|
|
import { DetectionModelManagement, detectionModelLabel } from './DetectionModelManagement'
|
|
import { AiPipelineIllustration } from './AiPipelineIllustration'
|
|
|
|
const DETECTION_PAGE_SIZE_OPTIONS = [25, 50, 100] as const
|
|
const DEFAULT_DETECTION_PAGE_SIZE = 50
|
|
|
|
function detectionQualityInterpretation(f1: number | null | undefined): string {
|
|
if (typeof f1 !== 'number' || !Number.isFinite(f1)) return 'Nog geen gevalideerde kwaliteitsmeting.'
|
|
if (f1 >= 0.85) return 'Sterk resultaat; steekproefcontrole blijft vereist.'
|
|
if (f1 >= 0.70) return 'Bruikbaar met gerichte handmatige controle.'
|
|
if (f1 >= 0.50) return 'Verkennend resultaat; beoordeel fouten voor operationeel gebruik.'
|
|
return 'Onvoldoende betrouwbaar voor operationeel gebruik.'
|
|
}
|
|
|
|
function detectionStatusLabel(status: string): string {
|
|
if (status === 'completed') return 'afgerond'
|
|
if (status === 'success') return 'geslaagd'
|
|
if (status === 'failed') return 'mislukt'
|
|
if (status === 'running') return 'bezig'
|
|
if (status === 'queued') return 'in wachtrij'
|
|
return status.replace(/_/g, ' ')
|
|
}
|
|
|
|
function persistedDetectionModelLabel(modelName: string | null | undefined): string {
|
|
if (!modelName) return 'Gebouwdetectie'
|
|
if (modelName === 'yolo-configured') return 'Lokaal gebouwmodel'
|
|
if (modelName === 'manual-fixture-detector') return 'Testmodel'
|
|
if (modelName === 'yolo-placeholder') return 'Niet-geconfigureerd gebouwmodel'
|
|
return modelName
|
|
}
|
|
|
|
function detectionClassLabel(className: string): string {
|
|
if (className.toLowerCase() === 'building') return 'Gebouw'
|
|
return className
|
|
}
|
|
|
|
function formatDetectionRunLabel(run: DetectionRunRead): string {
|
|
const timestamp = run.finished_at ?? run.created_at
|
|
const dateLabel = timestamp
|
|
? new Intl.DateTimeFormat('nl-BE', {
|
|
dateStyle: 'short',
|
|
timeStyle: 'short',
|
|
}).format(new Date(timestamp))
|
|
: 'datum onbekend'
|
|
return `${persistedDetectionModelLabel(run.model_name)} · ${detectionStatusLabel(run.status)} · ${dateLabel}`
|
|
}
|
|
|
|
interface CalibrationRow {
|
|
analysisRunId: string
|
|
qualityCheckId: string
|
|
threshold: number | null
|
|
modelName: string
|
|
modelAssetId: string | null
|
|
detectionCount: number | null
|
|
precision: number | null
|
|
recall: number | null
|
|
f1: number | null
|
|
falsePositives: number | null
|
|
falseNegatives: number | null
|
|
score: number | null
|
|
createdAt: string | null
|
|
}
|
|
|
|
interface DetectionLabProps {
|
|
detectionModels: DetectionModelCapability[]
|
|
modelAssets: ModelAssetRead[]
|
|
loadingDetectionModels: boolean
|
|
detectionModelError: string | null
|
|
modelAssetError: string | null
|
|
selectedDetectionDatasetId: string
|
|
selectedDetectionModelId: string
|
|
selectedModelAssetId: string
|
|
detectionTileManifestPath: string
|
|
detectionConfidenceThreshold: number
|
|
runningDetection: boolean
|
|
detectionRunResult: DetectionRunResponse | null
|
|
detectionRunError: string | null
|
|
detectionRuns: DetectionRunRead[]
|
|
qualityChecks: QualityCheckRead[]
|
|
calibrationThresholdText: string
|
|
runningDetectionCalibration: boolean
|
|
detectionCalibrationRows: DetectionCalibrationRunRow[]
|
|
detectionCalibrationError: string | null
|
|
detectionWorkflowStage: DetectionWorkflowStage
|
|
selectedDetectionRunId: string
|
|
detectionItems: DetectionRead[]
|
|
detectionClassFilter: string
|
|
detectionMinConfidenceFilter: number
|
|
loadingDetectionResults: boolean
|
|
detectionReferenceDatasetId: string
|
|
detectionQaResult: DetectionQaResult | null
|
|
detectionQaError: string | null
|
|
runningDetectionQa: boolean
|
|
yoloPreflight: YoloPreflightResponse | null
|
|
loadingYoloPreflight: boolean
|
|
yoloPreflightError: string | null
|
|
selectedProjectId: string | null
|
|
rasterDatasets: DatasetCreateResponse[]
|
|
referenceDatasets: DatasetCreateResponse[]
|
|
onLoadModels: () => void
|
|
onRefreshYoloPreflight: () => void
|
|
onSelectDataset: (datasetId: string) => void
|
|
onSelectModel: (modelId: string) => void
|
|
onSelectModelAsset: (modelAssetId: string) => void
|
|
onSetConfidenceThreshold: (value: number) => void
|
|
onSetTileManifestPath: (value: string) => void
|
|
onRunDetection: () => void
|
|
onUploadRaster: (file: File) => Promise<boolean>
|
|
onPrepareAndRunDetection: () => Promise<void>
|
|
onOpenResultsOnMap: () => void
|
|
onLoadRuns: () => void
|
|
onSelectRun: (runId: string) => void
|
|
onSetClassFilter: (value: string) => void
|
|
onSetMinConfidenceFilter: (value: number) => void
|
|
onLoadResults: () => void
|
|
onSelectReferenceDataset: (datasetId: string) => void
|
|
onRunQa: () => void
|
|
onSetCalibrationThresholdText: (value: string) => void
|
|
onRunCalibration: () => void
|
|
onOpenCalibrationEvidence: (qualityCheckId: string) => void
|
|
onApplyOperatorProfile: (profile: DetectionOperatorProfile) => void
|
|
}
|
|
|
|
export function DetectionLab({
|
|
detectionModels,
|
|
modelAssets,
|
|
loadingDetectionModels,
|
|
detectionModelError,
|
|
modelAssetError,
|
|
selectedDetectionDatasetId,
|
|
selectedDetectionModelId,
|
|
selectedModelAssetId,
|
|
detectionTileManifestPath,
|
|
detectionConfidenceThreshold,
|
|
runningDetection,
|
|
detectionRunResult,
|
|
detectionRunError,
|
|
detectionRuns,
|
|
qualityChecks,
|
|
calibrationThresholdText,
|
|
runningDetectionCalibration,
|
|
detectionCalibrationRows,
|
|
detectionCalibrationError,
|
|
detectionWorkflowStage,
|
|
selectedDetectionRunId,
|
|
detectionItems,
|
|
detectionClassFilter,
|
|
detectionMinConfidenceFilter,
|
|
loadingDetectionResults,
|
|
detectionReferenceDatasetId,
|
|
detectionQaResult,
|
|
detectionQaError,
|
|
runningDetectionQa,
|
|
yoloPreflight,
|
|
loadingYoloPreflight,
|
|
yoloPreflightError,
|
|
selectedProjectId,
|
|
rasterDatasets,
|
|
referenceDatasets,
|
|
onLoadModels,
|
|
onRefreshYoloPreflight,
|
|
onSelectDataset,
|
|
onSelectModel,
|
|
onSelectModelAsset,
|
|
onSetConfidenceThreshold,
|
|
onSetTileManifestPath,
|
|
onRunDetection,
|
|
onUploadRaster,
|
|
onPrepareAndRunDetection,
|
|
onOpenResultsOnMap,
|
|
onLoadRuns,
|
|
onSelectRun,
|
|
onSetClassFilter,
|
|
onSetMinConfidenceFilter,
|
|
onLoadResults,
|
|
onSelectReferenceDataset,
|
|
onRunQa,
|
|
onSetCalibrationThresholdText,
|
|
onRunCalibration,
|
|
onOpenCalibrationEvidence,
|
|
onApplyOperatorProfile,
|
|
}: DetectionLabProps): JSX.Element {
|
|
const selectedDetectionModel = detectionModels.find((model) => model.model_id === selectedDetectionModelId) ?? null
|
|
const selectedModelAsset = modelAssets.find((asset) => asset.model_asset_id === selectedModelAssetId) ?? null
|
|
const selectedOperatorProfile = DETECTION_OPERATOR_PROFILES.find(
|
|
(profile) => profile.modelAssetId === selectedModelAssetId,
|
|
) ?? null
|
|
const yoloRuntimeReady = Boolean(
|
|
yoloPreflight?.checks.enabled &&
|
|
yoloPreflight.checks.dependencies_available &&
|
|
yoloPreflight.checks.model_file_exists,
|
|
)
|
|
const detectionRequiresTileManifest = selectedDetectionModelId === 'yolo-configured'
|
|
const detectionHasDataset = selectedDetectionDatasetId.length > 0
|
|
const detectionHasModel = selectedDetectionModel !== null
|
|
const detectionModelReady = Boolean(selectedDetectionModel?.configured)
|
|
const detectionModelUiRunnable = detectionModelReady && selectedDetectionModelId !== 'manual-fixture-detector'
|
|
const detectionHasExplicitModelAsset =
|
|
selectedDetectionModelId !== 'yolo-configured' || modelAssets.length === 0 || selectedModelAssetId.length > 0
|
|
const calibrationRows = buildCalibrationRows(detectionRuns, qualityChecks)
|
|
const bestF1Candidate = bestCalibrationRow(calibrationRows, 'f1')
|
|
const bestPrecisionCandidate = bestCalibrationRow(calibrationRows, 'precision')
|
|
const lowestFalsePositivePressureCandidate = bestLowestCalibrationRow(calibrationRows, 'falsePositives')
|
|
const [detectionResultPage, setDetectionResultPage] = useState(1)
|
|
const [detectionPageSize, setDetectionPageSize] = useState(DEFAULT_DETECTION_PAGE_SIZE)
|
|
const [pendingRasterFile, setPendingRasterFile] = useState<File | null>(null)
|
|
const rasterFileInputRef = useRef<HTMLInputElement>(null)
|
|
const detectionPageCount = Math.max(1, Math.ceil(detectionItems.length / detectionPageSize))
|
|
const currentDetectionPage = Math.min(detectionResultPage, detectionPageCount)
|
|
const detectionPageStart = (currentDetectionPage - 1) * detectionPageSize
|
|
const detectionPageEnd = Math.min(detectionPageStart + detectionPageSize, detectionItems.length)
|
|
const visibleDetectionItems = detectionItems.slice(detectionPageStart, detectionPageEnd)
|
|
|
|
useEffect(() => {
|
|
setDetectionResultPage(1)
|
|
}, [selectedDetectionRunId, detectionClassFilter, detectionMinConfidenceFilter, detectionItems])
|
|
|
|
const detectionHasTileManifest =
|
|
!detectionRequiresTileManifest || detectionTileManifestPath.trim().length > 0
|
|
const detectionRunReady =
|
|
Boolean(selectedProjectId) &&
|
|
detectionHasDataset &&
|
|
detectionHasModel &&
|
|
detectionModelUiRunnable &&
|
|
detectionHasExplicitModelAsset &&
|
|
detectionHasTileManifest
|
|
const guidedDetectionReady =
|
|
Boolean(selectedProjectId) &&
|
|
detectionHasDataset &&
|
|
detectionHasModel &&
|
|
detectionModelUiRunnable &&
|
|
detectionHasExplicitModelAsset
|
|
const detectionRunBlockedReason = !selectedProjectId
|
|
? 'De regionale werkruimte is nog niet geladen'
|
|
: !detectionHasDataset
|
|
? 'Kies een luchtbeeld'
|
|
: !detectionHasModel
|
|
? 'Kies een analysemodel'
|
|
: selectedDetectionModelId === 'manual-fixture-detector'
|
|
? 'Het fixturemodel is alleen bedoeld voor expliciete tests en demo\'s'
|
|
: !detectionModelReady
|
|
? selectedDetectionModel?.limitation_message ?? 'Het gekozen model is niet geconfigureerd'
|
|
: !detectionHasExplicitModelAsset
|
|
? 'Kies een lokaal modelbestand onder beheer'
|
|
: !detectionHasTileManifest
|
|
? 'Maak eerst beeldtegels voor het gekozen luchtbeeld'
|
|
: null
|
|
const calibrationRunReady = detectionRunReady && detectionReferenceDatasetId.length > 0 && calibrationThresholdText.trim().length > 0
|
|
const guidedDetectionBlockedReason = !selectedProjectId
|
|
? 'De regionale werkruimte is nog niet geladen'
|
|
: !detectionHasDataset
|
|
? 'Kies of voeg een gegeorefereerd luchtbeeld toe'
|
|
: !detectionHasModel
|
|
? 'Kies een analysemodel'
|
|
: selectedDetectionModelId === 'manual-fixture-detector'
|
|
? 'Het fixturemodel is alleen bedoeld voor expliciete tests en demo\'s'
|
|
: !detectionModelReady
|
|
? selectedDetectionModel?.limitation_message ?? 'Het gekozen model is niet geconfigureerd'
|
|
: !detectionHasExplicitModelAsset
|
|
? 'Kies een lokaal modelbestand onder beheer'
|
|
: null
|
|
|
|
return (
|
|
<section className="workspace-panel ai-lab-shell detection-lab-shell">
|
|
<div className="panel-title-row">
|
|
<div>
|
|
<p className="eyebrow">Analyse van luchtbeelden</p>
|
|
<h2>Gebouwen herkennen</h2>
|
|
</div>
|
|
<button className="secondary-action" type="button" onClick={onLoadModels} disabled={loadingDetectionModels}>
|
|
Status vernieuwen
|
|
</button>
|
|
</div>
|
|
|
|
<AiPipelineIllustration
|
|
hasImagery={detectionHasDataset}
|
|
hasTiles={detectionHasTileManifest}
|
|
gpuReady={yoloRuntimeReady && Boolean(yoloPreflight?.runtime.cuda_available)}
|
|
hasDetections={detectionItems.length > 0 || detectionRuns.some((run) => run.status === 'completed')}
|
|
hasQualityEvidence={Boolean(detectionQaResult) || qualityChecks.length > 0}
|
|
running={runningDetection || runningDetectionQa || runningDetectionCalibration}
|
|
/>
|
|
|
|
<div className="ai-user-summary" aria-label="Status gebouwdetectie">
|
|
<div className="ai-user-summary-card ai-user-summary-card-primary">
|
|
<span>Actieve analyse</span>
|
|
<strong>Gebouwdetectie</strong>
|
|
<p>{selectedOperatorProfile?.displayName ?? selectedModelAsset?.display_name ?? 'Lokaal YOLO-model'}</p>
|
|
</div>
|
|
<div className={yoloRuntimeReady ? 'ai-user-summary-card ai-user-summary-card-ready' : 'ai-user-summary-card'}>
|
|
<span>PyTorch-runtime</span>
|
|
<strong>{yoloRuntimeReady ? 'Gereed' : loadingDetectionModels ? 'Controleren...' : 'Niet gereed'}</strong>
|
|
<p>{yoloRuntimeReady ? `${yoloPreflight?.runtime.cuda_available ? 'GPU' : 'CPU'} · lokaal model gevonden` : 'Controleer de modelconfiguratie onder beheer.'}</p>
|
|
</div>
|
|
<div className="ai-user-summary-card">
|
|
<span>Validatiescope</span>
|
|
<strong>{selectedOperatorProfile ? `F1 ${selectedOperatorProfile.f1.toFixed(3)}` : 'Nog niet gekoppeld'}</strong>
|
|
<p>{selectedOperatorProfile ? selectedOperatorProfile.validationScope : 'Kies een modelprofiel met gedocumenteerd evaluatiebewijs.'}</p>
|
|
</div>
|
|
<div className={rasterDatasets.length > 0 ? 'ai-user-summary-card ai-user-summary-card-ready' : 'ai-user-summary-card'}>
|
|
<span>Beschikbare luchtbeelden</span>
|
|
<strong>{rasterDatasets.length}</strong>
|
|
<p>{rasterDatasets.length > 0 ? 'Klaar om een beeld te kiezen.' : 'Laad eerst een gegeorefereerd luchtbeeld in.'}</p>
|
|
</div>
|
|
</div>
|
|
<p className="ai-quality-guidance">
|
|
{detectionQualityInterpretation(selectedOperatorProfile?.f1)}
|
|
</p>
|
|
{selectedOperatorProfile && selectedDetectionModel?.nationally_validated !== true ? (
|
|
<div className="result-state result-state-warning" role="status">
|
|
<strong>Nog niet nationaal gevalideerd</strong>
|
|
<p>
|
|
Dit model is operationeel voor gecontroleerde beeldanalyse, maar de gemeten kwaliteit geldt alleen voor {selectedDetectionModel?.validation_scope ?? selectedOperatorProfile.validationScope}.
|
|
Resultaten elders in Belgie of op zee vereisen lokale referentiedata en QA voordat ze als betrouwbaar kunnen worden vrijgegeven.
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
|
|
<DetectionModelManagement
|
|
detectionModels={detectionModels}
|
|
modelAssets={modelAssets}
|
|
loadingDetectionModels={loadingDetectionModels}
|
|
detectionModelError={detectionModelError}
|
|
modelAssetError={modelAssetError}
|
|
selectedDetectionModelId={selectedDetectionModelId}
|
|
selectedModelAssetId={selectedModelAssetId}
|
|
detectionConfidenceThreshold={detectionConfidenceThreshold}
|
|
yoloPreflight={yoloPreflight}
|
|
loadingYoloPreflight={loadingYoloPreflight}
|
|
yoloPreflightError={yoloPreflightError}
|
|
onRefreshYoloPreflight={onRefreshYoloPreflight}
|
|
onSelectModelAsset={onSelectModelAsset}
|
|
onApplyOperatorProfile={onApplyOperatorProfile}
|
|
/>
|
|
|
|
<div className="lab-block">
|
|
<div className="ai-lab-run-surface" aria-label="Gebouwdetectie starten">
|
|
<h3>Nieuwe beeldanalyse</h3>
|
|
<div
|
|
className={guidedDetectionReady ? 'lab-readiness-panel lab-readiness-panel-ready' : 'lab-readiness-panel'}
|
|
aria-label="Startklaar voor gebouwdetectie"
|
|
>
|
|
<div className="ai-lab-section-header">
|
|
<div>
|
|
<h3>Wat is nog nodig?</h3>
|
|
<p>Kies een luchtbeeld en model. GeoIntel maakt de beeldtegels en laadt het resultaat daarna automatisch op de kaart.</p>
|
|
</div>
|
|
<span className={guidedDetectionReady ? 'status-badge status-badge-ready' : 'status-badge'}>
|
|
{guidedDetectionReady ? 'Klaar om te starten' : 'Nog niet startklaar'}
|
|
</span>
|
|
</div>
|
|
<div className="lab-readiness-grid">
|
|
<div className={detectionHasDataset ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
|
|
<span>Luchtbeeld</span>
|
|
<strong>{detectionHasDataset ? 'Geselecteerd' : 'Nog geen luchtbeeld'}</strong>
|
|
</div>
|
|
<div className={detectionModelReady ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
|
|
<span>Analysemodel</span>
|
|
<strong>
|
|
{detectionModelReady
|
|
? 'Lokaal gebouwmodel beschikbaar'
|
|
: 'Model niet beschikbaar'}
|
|
</strong>
|
|
</div>
|
|
<div className={detectionHasTileManifest ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
|
|
<span>Beeldtegels</span>
|
|
<strong>
|
|
{detectionRequiresTileManifest
|
|
? detectionHasTileManifest
|
|
? 'Beschikbaar'
|
|
: detectionHasDataset
|
|
? 'Worden automatisch voorbereid'
|
|
: 'Wachten op een luchtbeeld'
|
|
: 'Niet vereist'}
|
|
</strong>
|
|
</div>
|
|
<div className={detectionHasExplicitModelAsset ? 'lab-readiness-item lab-readiness-item-ready' : 'lab-readiness-item'}>
|
|
<span>Lokale modelkeuze</span>
|
|
<strong>
|
|
{selectedDetectionModelId === 'yolo-configured'
|
|
? selectedModelAsset
|
|
? selectedOperatorProfile?.displayName ?? selectedModelAsset.display_name
|
|
: modelAssets.length > 0
|
|
? 'Kies een lokaal model onder beheer'
|
|
: 'Geen lokaal model gevonden'
|
|
: 'Niet vereist'}
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={guidedDetectionReady ? 'lab-action-guardrail lab-action-guardrail-ready' : 'lab-action-guardrail'}>
|
|
<span>Analyse</span>
|
|
<strong>{guidedDetectionReady ? 'Klaar om gebouwen te zoeken' : guidedDetectionBlockedReason}</strong>
|
|
</div>
|
|
{rasterDatasets.length === 0 ? (
|
|
<div className="result-state result-state-empty">
|
|
<strong>Geen luchtbeeld beschikbaar in deze werkruimte.</strong>
|
|
<p>Voeg hieronder een gegeorefereerde GeoTIFF toe. GeoIntel controleert de projectie en bewaart het bronbestand als dataset.</p>
|
|
</div>
|
|
) : null}
|
|
<div className="guided-raster-input" aria-label="Luchtbeeld toevoegen">
|
|
<div>
|
|
<strong>Eigen luchtbeeld toevoegen</strong>
|
|
<p>Gebruik een GeoTIFF met geldige CRS en georeferentie. Een bestaand luchtbeeld kan meteen in de keuzelijst worden gebruikt.</p>
|
|
</div>
|
|
<label className="file-picker-field">
|
|
<span>GeoTIFF-bestand</span>
|
|
<input
|
|
ref={rasterFileInputRef}
|
|
type="file"
|
|
accept=".tif,.tiff,image/tiff,application/geotiff"
|
|
onChange={(event) => setPendingRasterFile(event.target.files?.[0] ?? null)}
|
|
disabled={runningDetection}
|
|
/>
|
|
</label>
|
|
<button
|
|
className="secondary-action"
|
|
type="button"
|
|
disabled={!pendingRasterFile || runningDetection}
|
|
onClick={async () => {
|
|
if (pendingRasterFile && await onUploadRaster(pendingRasterFile)) {
|
|
setPendingRasterFile(null)
|
|
if (rasterFileInputRef.current) {
|
|
rasterFileInputRef.current.value = ''
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{detectionWorkflowStage === 'uploading' ? 'Luchtbeeld toevoegen...' : 'Luchtbeeld toevoegen'}
|
|
</button>
|
|
</div>
|
|
<div className="lab-form-grid">
|
|
<label>
|
|
Luchtbeeld
|
|
<select
|
|
value={selectedDetectionDatasetId}
|
|
onChange={(event) => {
|
|
onSelectDataset(event.target.value)
|
|
onSetTileManifestPath('')
|
|
}}
|
|
>
|
|
<option value="">Kies een luchtbeeld</option>
|
|
{rasterDatasets.map((dataset) => (
|
|
<option key={dataset.id} value={dataset.id}>
|
|
{dataset.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Analysemodel
|
|
<select value={selectedDetectionModelId} onChange={(event) => onSelectModel(event.target.value)}>
|
|
{detectionModels.map((model) => (
|
|
<option key={model.model_id} value={model.model_id}>
|
|
{detectionModelLabel(model)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Minimale zekerheid
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
value={detectionConfidenceThreshold}
|
|
onChange={(event) => onSetConfidenceThreshold(Number(event.target.value))}
|
|
/>
|
|
{selectedDetectionModelId === 'yolo-configured' ? (
|
|
<span className="field-guidance">
|
|
Het actieve gevalideerde profiel gebruikt standaard 0,15 voor een evenwichtige gebouwcontrole.
|
|
</span>
|
|
) : null}
|
|
</label>
|
|
</div>
|
|
<div className="guided-detection-progress" aria-live="polite">
|
|
<DetectionWorkflowStep label="1. Luchtbeeld" complete={detectionHasDataset} active={detectionWorkflowStage === 'uploading'} />
|
|
<DetectionWorkflowStep label="2. Beeldtegels" complete={detectionHasTileManifest || detectionWorkflowStage === 'complete'} active={detectionWorkflowStage === 'tiling'} />
|
|
<DetectionWorkflowStep label="3. Modelcontrole" complete={detectionWorkflowStage === 'detecting' || detectionWorkflowStage === 'loading' || detectionWorkflowStage === 'complete'} active={detectionWorkflowStage === 'validating'} />
|
|
<DetectionWorkflowStep label="4. Resultaat" complete={detectionWorkflowStage === 'complete'} active={detectionWorkflowStage === 'detecting' || detectionWorkflowStage === 'loading'} />
|
|
</div>
|
|
<button className="primary-action guided-detection-action" type="button" onClick={onPrepareAndRunDetection} disabled={runningDetection || !guidedDetectionReady}>
|
|
{detectionWorkflowActionLabel(detectionWorkflowStage)}
|
|
</button>
|
|
|
|
<details className="ai-lab-model-surface technical-manifest-surface" aria-label="Technische tegelinstellingen">
|
|
<summary>
|
|
<span>Technische tegelinstellingen</span>
|
|
<strong>{detectionHasTileManifest ? 'manifest beschikbaar' : 'automatisch'}</strong>
|
|
</summary>
|
|
<div className="ai-lab-disclosure-body">
|
|
<p className="muted">De normale actie gebruikt automatisch 512 px-tegels met 64 px overlap. Alleen beheerders hoeven hier een bestaand manifest te koppelen.</p>
|
|
{selectedDetectionModelId === 'yolo-configured' ? (
|
|
<label>
|
|
Beeldtegelbestand
|
|
<input
|
|
type="text"
|
|
placeholder="Pad naar de aangemaakte beeldtegels"
|
|
value={detectionTileManifestPath}
|
|
onChange={(event) => onSetTileManifestPath(event.target.value)}
|
|
/>
|
|
</label>
|
|
) : null}
|
|
{selectedDetectionModelId === 'yolo-configured' && detectionTileManifestPath.trim() ? (
|
|
<div className="linked-manifest-card">
|
|
<strong>Gekoppelde beeldtegels</strong>
|
|
<p>{detectionTileManifestPath}</p>
|
|
<span>De technische controle wordt vernieuwd wanneer het model of tegelbestand wijzigt.</span>
|
|
</div>
|
|
) : null}
|
|
<button className="secondary-action" type="button" onClick={onRunDetection} disabled={runningDetection || !detectionRunReady}>
|
|
Bestaande beeldtegels analyseren
|
|
</button>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="ai-lab-state-stack">
|
|
{detectionRunError ? (
|
|
<div className="result-state result-state-error">
|
|
<strong>De beeldanalyse is mislukt.</strong>
|
|
<p>{detectionRunError}</p>
|
|
</div>
|
|
) : null}
|
|
{detectionRunResult ? (
|
|
<div className="result-summary-card">
|
|
<p>Status: {detectionRunResult.status === 'completed' ? 'afgerond' : detectionRunResult.status}</p>
|
|
<p>{detectionRunResult.message}</p>
|
|
<p>Gevonden objecten: {detectionRunResult.detection_count}</p>
|
|
{detectionRunResult.error_code ? <p className="error">Code: {detectionRunResult.error_code}</p> : null}
|
|
<details className="technical-inline-details">
|
|
<summary>Technische verwerking</summary>
|
|
<div className="entity-meta">
|
|
<span>Analyserun-ID: {detectionRunResult.analysis_run_id}</span>
|
|
<span>Taak-ID: {detectionRunResult.job_id}</span>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<details className="ai-lab-model-surface guided-calibration-surface" aria-label="Modelkalibratie voor beheerders">
|
|
<summary>
|
|
<span>Modelkalibratie voor beheerders</span>
|
|
<strong>{detectionCalibrationRows.length > 0 ? `${detectionCalibrationRows.length} drempels getest` : 'gesloten'}</strong>
|
|
</summary>
|
|
<div className="ai-lab-disclosure-body">
|
|
<div className="ai-lab-section-header">
|
|
<div>
|
|
<h3>Zekerheidsdrempels vergelijken</h3>
|
|
<p>Voert het lokale model en een kwaliteitscontrole uit voor iedere drempel. Modelbestanden worden niet gewijzigd.</p>
|
|
</div>
|
|
<span className={calibrationRunReady ? 'status-badge status-badge-ready' : 'status-badge'}>
|
|
{calibrationRunReady ? 'startklaar' : 'luchtbeeld, model, beeldtegels en referentie vereist'}
|
|
</span>
|
|
</div>
|
|
<div className="lab-form-grid">
|
|
<label>
|
|
Zekerheidsdrempels
|
|
<input
|
|
type="text"
|
|
value={calibrationThresholdText}
|
|
onChange={(event) => onSetCalibrationThresholdText(event.target.value)}
|
|
placeholder="0.50 0.25 0.15"
|
|
/>
|
|
<span className="field-guidance">Scheid waarden met spaties, komma's of puntkomma's. Iedere waarde ligt tussen 0 en 1.</span>
|
|
</label>
|
|
<label>
|
|
Referentielaag
|
|
<select value={detectionReferenceDatasetId} onChange={(event) => onSelectReferenceDataset(event.target.value)}>
|
|
<option value="">Kies een referentielaag</option>
|
|
{referenceDatasets.map((dataset) => (
|
|
<option key={dataset.id} value={dataset.id}>
|
|
{dataset.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<button
|
|
className="primary-action"
|
|
type="button"
|
|
onClick={onRunCalibration}
|
|
disabled={runningDetectionCalibration || !calibrationRunReady}
|
|
>
|
|
Drempels vergelijken
|
|
</button>
|
|
{detectionCalibrationError ? (
|
|
<div className="result-state result-state-error">
|
|
<strong>De kalibratievergelijking is mislukt.</strong>
|
|
<p>{detectionCalibrationError}</p>
|
|
</div>
|
|
) : null}
|
|
{detectionCalibrationRows.length > 0 ? (
|
|
<div className="calibration-progress-panel" aria-label="Voortgang modelkalibratie">
|
|
<div className="panel-title-row">
|
|
<div>
|
|
<h3>Voortgang modelkalibratie</h3>
|
|
<p className="muted">Iedere geslaagde rij is gekoppeld aan een bewaarde beeldanalyse en kwaliteitscontrole.</p>
|
|
</div>
|
|
<div className="panel-action-row">
|
|
<span className="count-pill">{detectionCalibrationRows.length} drempels</span>
|
|
<button
|
|
className="secondary-action"
|
|
type="button"
|
|
onClick={() => downloadCalibrationSummary(selectedProjectId, detectionCalibrationRows)}
|
|
disabled={detectionCalibrationRows.length === 0 || !selectedProjectId}
|
|
>
|
|
Samenvatting downloaden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Drempel</th>
|
|
<th>Status</th>
|
|
<th>Objecten</th>
|
|
<th>Precisie</th>
|
|
<th>Herkenningsgraad</th>
|
|
<th>F1</th>
|
|
<th>Onterecht gevonden</th>
|
|
<th>Gemist</th>
|
|
<th>Kaartbewijs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{detectionCalibrationRows.map((row) => (
|
|
<tr key={row.threshold}>
|
|
<td>{row.threshold.toFixed(2)}</td>
|
|
<td>{row.status}</td>
|
|
<td>{row.detection_count ?? 'n.v.t.'}</td>
|
|
<td>{formatNullableNumber(row.precision ?? null, 3)}</td>
|
|
<td>{formatNullableNumber(row.recall ?? null, 3)}</td>
|
|
<td>{formatNullableNumber(row.f1_score ?? null, 3)}</td>
|
|
<td>{row.false_positives ?? 'n.v.t.'}</td>
|
|
<td>{row.false_negatives ?? 'n.v.t.'}</td>
|
|
<td>
|
|
<button
|
|
className="secondary-action table-action"
|
|
type="button"
|
|
onClick={() => row.quality_check_id ? onOpenCalibrationEvidence(row.quality_check_id) : undefined}
|
|
disabled={!row.quality_check_id || row.status !== 'success'}
|
|
aria-label={`Open kaartbewijs voor drempel ${row.threshold.toFixed(2)}`}
|
|
>
|
|
Toon op kaart
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="result-state result-state-empty">
|
|
<strong>In deze sessie zijn nog geen drempels vergeleken.</strong>
|
|
<p>Kies een referentielaag en drempelreeks en start daarna de vergelijking.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</details>
|
|
|
|
<div className="ai-lab-results-surface" aria-label="Resultaten van de beeldanalyse">
|
|
<div className="panel-title-row">
|
|
<div>
|
|
<h3>Gevonden objecten</h3>
|
|
<p className="muted">Bekijk eerder bewaarde analyses en filter op type of zekerheid.</p>
|
|
</div>
|
|
<div className="panel-action-row">
|
|
<button className="secondary-action" type="button" onClick={onLoadRuns} disabled={!selectedProjectId}>
|
|
Analyses vernieuwen
|
|
</button>
|
|
<button className="primary-action" type="button" onClick={onOpenResultsOnMap} disabled={detectionItems.length === 0}>
|
|
Toon op kaart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="lab-form-grid">
|
|
<label>
|
|
Analyse
|
|
<select value={selectedDetectionRunId} onChange={(event) => onSelectRun(event.target.value)}>
|
|
<option value="">Kies een bewaarde analyse</option>
|
|
{detectionRuns.map((run) => (
|
|
<option key={run.id} value={run.id}>
|
|
{formatDetectionRunLabel(run)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Type object
|
|
<input
|
|
type="text"
|
|
placeholder="bijvoorbeeld gebouw"
|
|
value={detectionClassFilter}
|
|
onChange={(event) => onSetClassFilter(event.target.value)}
|
|
/>
|
|
</label>
|
|
<label>
|
|
Minimale zekerheid
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
value={detectionMinConfidenceFilter}
|
|
onChange={(event) => onSetMinConfidenceFilter(Number(event.target.value))}
|
|
/>
|
|
</label>
|
|
</div>
|
|
<button className="primary-action" type="button" onClick={onLoadResults} disabled={!selectedDetectionRunId || loadingDetectionResults}>
|
|
Resultaten laden
|
|
</button>
|
|
{loadingDetectionResults ? (
|
|
<div className="result-state result-state-loading">
|
|
<strong>Resultaten laden.</strong>
|
|
<p>De bewaarde objecten van deze analyse worden opgehaald.</p>
|
|
</div>
|
|
) : null}
|
|
<div className="ai-lab-state-stack">
|
|
<div className="result-state result-state-ready">
|
|
<strong>{detectionItems.length} objecten geladen</strong>
|
|
<p>{selectedDetectionRunId ? 'Deze resultaten zijn bewaard in de database.' : 'Kies eerst een bewaarde analyse.'}</p>
|
|
</div>
|
|
</div>
|
|
{detectionItems.length > 0 ? (
|
|
<>
|
|
<div className="pagination-toolbar" aria-label="Paginering van gevonden objecten">
|
|
<p className="pagination-summary" aria-live="polite">
|
|
<strong>{detectionPageStart + 1}-{detectionPageEnd}</strong>
|
|
<span>van {detectionItems.length}</span>
|
|
</p>
|
|
<label className="pagination-page-size">
|
|
Rijen
|
|
<select
|
|
value={detectionPageSize}
|
|
onChange={(event) => {
|
|
setDetectionPageSize(Number(event.target.value))
|
|
setDetectionResultPage(1)
|
|
}}
|
|
>
|
|
{DETECTION_PAGE_SIZE_OPTIONS.map((pageSize) => (
|
|
<option key={pageSize} value={pageSize}>{pageSize}</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<div className="pagination-actions">
|
|
<button
|
|
className="secondary-action pagination-button"
|
|
type="button"
|
|
aria-label="Vorige resultatenpagina"
|
|
title="Vorige pagina"
|
|
disabled={currentDetectionPage <= 1}
|
|
onClick={() => setDetectionResultPage(currentDetectionPage - 1)}
|
|
>
|
|
{'<'}
|
|
</button>
|
|
<span>Pagina {currentDetectionPage} van {detectionPageCount}</span>
|
|
<button
|
|
className="secondary-action pagination-button"
|
|
type="button"
|
|
aria-label="Volgende resultatenpagina"
|
|
title="Volgende pagina"
|
|
disabled={currentDetectionPage >= detectionPageCount}
|
|
onClick={() => setDetectionResultPage(currentDetectionPage + 1)}
|
|
>
|
|
{'>'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Zekerheid</th>
|
|
<th>Model</th>
|
|
<th>Herkomst</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{visibleDetectionItems.map((detection) => (
|
|
<tr key={detection.id}>
|
|
<td>{detectionClassLabel(detection.class_name)}</td>
|
|
<td>{detection.confidence.toFixed(2)}</td>
|
|
<td>{persistedDetectionModelLabel(detection.model_name)}</td>
|
|
<td className="source-tile-cell">Luchtbeeldtegel</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
<details className="secondary-analysis-disclosure detection-technical-evaluation">
|
|
<summary>
|
|
<span>Technische modelevaluatie</span>
|
|
<strong>{calibrationRows.length > 0 || detectionQaResult ? 'resultaten beschikbaar' : 'optioneel'}</strong>
|
|
</summary>
|
|
<div className="ai-lab-disclosure-body">
|
|
<div className="ai-lab-results-surface calibration-comparison-surface" aria-label="Vergelijking modelkalibratie">
|
|
<div className="panel-title-row">
|
|
<div>
|
|
<h3>Kalibraties vergelijken</h3>
|
|
<p className="muted">Vergelijk bewaarde analyseruns per zekerheidsdrempel voordat een modelinstelling wordt goedgekeurd.</p>
|
|
</div>
|
|
<span className="count-pill">{calibrationRows.length} resultaten</span>
|
|
</div>
|
|
{calibrationRows.length > 0 ? (
|
|
<>
|
|
<div className="calibration-summary-grid" aria-label="Beste kalibratieresultaten">
|
|
<CalibrationSummaryCard title="Beste F1-score" row={bestF1Candidate} metric="f1" />
|
|
<CalibrationSummaryCard title="Beste precisie" row={bestPrecisionCandidate} metric="precision" />
|
|
<CalibrationSummaryCard title="Minste foutieve meldingen" row={lowestFalsePositivePressureCandidate} metric="falsePositives" />
|
|
</div>
|
|
<div className="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Drempel</th>
|
|
<th>Model</th>
|
|
<th>Objecten</th>
|
|
<th>Precisie</th>
|
|
<th>Herkenningsgraad</th>
|
|
<th>F1</th>
|
|
<th>Fout positief</th>
|
|
<th>Fout negatief</th>
|
|
<th>Kwaliteitscontrole</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{calibrationRows.map((row) => (
|
|
<tr key={`${row.analysisRunId}-${row.qualityCheckId}`}>
|
|
<td>{formatNullableNumber(row.threshold, 2)}</td>
|
|
<td>
|
|
<strong>{row.modelName}</strong>
|
|
<span className="table-subtle">{row.modelAssetId ?? 'geconfigureerd lokaal model'}</span>
|
|
</td>
|
|
<td>{row.detectionCount ?? 'n.v.t.'}</td>
|
|
<td>{formatNullableNumber(row.precision, 3)}</td>
|
|
<td>{formatNullableNumber(row.recall, 3)}</td>
|
|
<td>{formatNullableNumber(row.f1, 3)}</td>
|
|
<td>{row.falsePositives ?? 'n.v.t.'}</td>
|
|
<td>{row.falseNegatives ?? 'n.v.t.'}</td>
|
|
<td>
|
|
<button className="secondary-action table-action" type="button" onClick={() => onOpenCalibrationEvidence(row.qualityCheckId)}>
|
|
Toon kaartbewijs
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="lab-action-guardrail">
|
|
<span>Voorwaarde voor goedkeuring</span>
|
|
<strong>Keur pas goed nadat meerdere gebieden en de foutieve positieve en negatieve resultaten zijn gecontroleerd.</strong>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="result-state result-state-empty">
|
|
<strong>Nog geen kalibratievergelijking beschikbaar.</strong>
|
|
<p>Voer het lokale model met meerdere zekerheidsdrempels uit en vergelijk de resultaten met dezelfde referentielaag.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div className="ai-lab-qa-surface" aria-label="Kwaliteitscontrole gebouwdetectie">
|
|
<h3>Kwaliteitscontrole gebouwdetectie</h3>
|
|
<p className="muted">Vergelijk de gevonden gebouwen met een bewaarde officiële referentielaag. De uitkomst wordt als kwaliteitscontrole in de database bewaard.</p>
|
|
<label>
|
|
Referentielaag
|
|
<select value={detectionReferenceDatasetId} onChange={(event) => onSelectReferenceDataset(event.target.value)}>
|
|
<option value="">Kies een referentielaag</option>
|
|
{referenceDatasets.map((dataset) => (
|
|
<option key={dataset.id} value={dataset.id}>
|
|
{dataset.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<button className="primary-action" type="button" onClick={onRunQa} disabled={runningDetectionQa || !selectedDetectionRunId || !detectionReferenceDatasetId}>
|
|
Vergelijk met referentielaag
|
|
</button>
|
|
{detectionQaError ? (
|
|
<div className="result-state result-state-error">
|
|
<strong>De kwaliteitscontrole is mislukt.</strong>
|
|
<p>{detectionQaError}</p>
|
|
</div>
|
|
) : null}
|
|
{detectionQaResult ? (
|
|
<div className="result-summary-card">
|
|
<p>Status: {detectionQaResult.status === 'completed' ? 'afgerond' : detectionQaResult.status}</p>
|
|
<p>Precisie: {detectionQaResult.precision?.toFixed(3) ?? 'n.v.t.'}</p>
|
|
<p>Herkenningsgraad: {detectionQaResult.recall?.toFixed(3) ?? 'n.v.t.'}</p>
|
|
<p>F1: {detectionQaResult.f1_score?.toFixed(3) ?? 'n.v.t.'}</p>
|
|
<p>Gemiddelde overlap: {detectionQaResult.mean_iou?.toFixed(3) ?? 'n.v.t.'}</p>
|
|
<p>Minimale IoU voor een match: {detectionQaResult.iou_threshold.toFixed(2)}</p>
|
|
<p>Fout positief: {detectionQaResult.false_positives}</p>
|
|
<p>Fout negatief: {detectionQaResult.false_negatives}</p>
|
|
<details className="technical-inline-details">
|
|
<summary>Technische referentie</summary>
|
|
<span>Kwaliteitscontrole-ID: {detectionQaResult.quality_check_id}</span>
|
|
</details>
|
|
{detectionQaResult.coverage ? (
|
|
<div className="detection-qa-diagnostic">
|
|
<span>Gecontroleerd beeldbereik</span>
|
|
<strong>
|
|
{detectionQaResult.coverage.applied
|
|
? `${detectionQaResult.coverage.reference_evaluated_count} van ${detectionQaResult.coverage.reference_raw_count} referentieobjecten gecontroleerd`
|
|
: 'De volledige referentielaag is gecontroleerd'}
|
|
</strong>
|
|
<p>
|
|
{detectionQaResult.coverage.applied
|
|
? `${detectionQaResult.coverage.reference_excluded_outside_count} buiten beeldbereik, ${detectionQaResult.coverage.reference_clipped_boundary_count} aan de rand begrensd, ${detectionQaResult.coverage.tile_count} beeldtegels.`
|
|
: 'Deze controle gebruikt alle objecten uit de gekozen referentielaag.'}
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
{detectionQaResult.box_to_footprint_diagnostics ? (
|
|
<div className="detection-qa-diagnostic detection-qa-diagnostic-caution">
|
|
<span>Aanvullende vormdiagnose</span>
|
|
<strong>
|
|
{detectionQaResult.box_to_footprint_diagnostics.envelope_matches} rechthoekmatches tegenover{' '}
|
|
{detectionQaResult.box_to_footprint_diagnostics.strict_matches} strikte vormmatches
|
|
</strong>
|
|
<p>
|
|
{detectionQaResult.box_to_footprint_diagnostics.possible_box_to_footprint_mismatch_count} mogelijke vormafwijkingen. Precisie, herkenningsgraad en F1 hierboven blijven gebaseerd op de strikte geometrische overlap.
|
|
</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function CalibrationSummaryCard({
|
|
title,
|
|
row,
|
|
metric,
|
|
}: {
|
|
title: string
|
|
row: CalibrationRow | null
|
|
metric: 'f1' | 'precision' | 'falsePositives'
|
|
}): JSX.Element {
|
|
return (
|
|
<div className={row ? 'calibration-summary-card calibration-summary-card-ready' : 'calibration-summary-card'}>
|
|
<span>{title}</span>
|
|
{row ? (
|
|
<>
|
|
<strong>{metric === 'falsePositives' ? row.falsePositives ?? 'n.v.t.' : formatNullableNumber(row[metric], 3)}</strong>
|
|
<p>Threshold {formatNullableNumber(row.threshold, 2)} · {row.modelName}</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<strong>n.v.t.</strong>
|
|
<p>Persisted QA metrics are required.</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DetectionWorkflowStep({
|
|
label,
|
|
complete,
|
|
active,
|
|
}: {
|
|
label: string
|
|
complete: boolean
|
|
active: boolean
|
|
}): JSX.Element {
|
|
const className = active
|
|
? 'guided-detection-step guided-detection-step-active'
|
|
: complete
|
|
? 'guided-detection-step guided-detection-step-complete'
|
|
: 'guided-detection-step'
|
|
return (
|
|
<div className={className}>
|
|
<span aria-hidden="true">{complete ? 'OK' : active ? '...' : '-'}</span>
|
|
<strong>{label}</strong>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function detectionWorkflowActionLabel(stage: DetectionWorkflowStage): string {
|
|
if (stage === 'tiling') return 'Beeldtegels voorbereiden...'
|
|
if (stage === 'validating') return 'Model en beeld controleren...'
|
|
if (stage === 'detecting') return 'Gebouwen zoeken...'
|
|
if (stage === 'loading') return 'Resultaat op kaart laden...'
|
|
if (stage === 'complete') return 'Analyse opnieuw uitvoeren'
|
|
return 'Gebouwen zoeken en op kaart tonen'
|
|
}
|
|
|
|
function buildCalibrationRows(detectionRuns: DetectionRunRead[], qualityChecks: QualityCheckRead[]): CalibrationRow[] {
|
|
const runById = new Map(detectionRuns.map((run) => [run.id, run]))
|
|
return qualityChecks
|
|
.flatMap((check) => {
|
|
const run = check.analysis_run_id ? runById.get(check.analysis_run_id) : null
|
|
if (!run || run.analysis_type !== 'detection') {
|
|
return []
|
|
}
|
|
const threshold = confidenceThresholdForRun(run)
|
|
return [{
|
|
analysisRunId: run.id,
|
|
qualityCheckId: check.id,
|
|
threshold,
|
|
modelName: run.model_name ?? 'geconfigureerde detectie',
|
|
modelAssetId: stringFromRecord(run.parameters_json, 'model_asset_id'),
|
|
detectionCount: numberFromRecord(run.result_json, 'detection_count'),
|
|
precision: metricValue(check, 'precision'),
|
|
recall: metricValue(check, 'recall'),
|
|
f1: metricValue(check, 'f1'),
|
|
falsePositives: metricValue(check, 'false_positives'),
|
|
falseNegatives: metricValue(check, 'false_negatives'),
|
|
score: check.score ?? null,
|
|
createdAt: check.completed_at ?? check.created_at ?? run.finished_at ?? run.created_at ?? null,
|
|
}]
|
|
})
|
|
.sort((left, right) => {
|
|
const createdDiff = Date.parse(right.createdAt ?? '') - Date.parse(left.createdAt ?? '')
|
|
if (Number.isFinite(createdDiff) && createdDiff !== 0) {
|
|
return createdDiff
|
|
}
|
|
return (right.threshold ?? -1) - (left.threshold ?? -1)
|
|
})
|
|
}
|
|
|
|
function confidenceThresholdForRun(run: DetectionRunRead): number | null {
|
|
return (
|
|
numberFromRecord(run.parameters_json, 'confidence_threshold') ??
|
|
numberFromRecord(run.result_json, 'confidence_threshold') ??
|
|
null
|
|
)
|
|
}
|
|
|
|
function metricValue(check: QualityCheckRead, key: string): number | null {
|
|
const aliases = key === 'f1' ? ['f1', 'f1_score'] : [key]
|
|
for (const alias of aliases) {
|
|
const metric = check.metrics.find((item) => item.metric_key === alias)
|
|
if (typeof metric?.metric_value === 'number' && Number.isFinite(metric.metric_value)) {
|
|
return metric.metric_value
|
|
}
|
|
const findingValue = numberFromRecord(check.findings_json, alias)
|
|
if (findingValue !== null) {
|
|
return findingValue
|
|
}
|
|
}
|
|
return key === 'f1' && typeof check.score === 'number' ? check.score : null
|
|
}
|
|
|
|
function bestCalibrationRow(rows: CalibrationRow[], metric: 'f1' | 'precision'): CalibrationRow | null {
|
|
return rows.reduce<CalibrationRow | null>((best, row) => {
|
|
const value = row[metric]
|
|
if (value === null) {
|
|
return best
|
|
}
|
|
if (!best || value > (best[metric] ?? Number.NEGATIVE_INFINITY)) {
|
|
return row
|
|
}
|
|
return best
|
|
}, null)
|
|
}
|
|
|
|
function bestLowestCalibrationRow(rows: CalibrationRow[], metric: 'falsePositives'): CalibrationRow | null {
|
|
return rows.reduce<CalibrationRow | null>((best, row) => {
|
|
const value = row[metric]
|
|
if (value === null) {
|
|
return best
|
|
}
|
|
if (!best || value < (best[metric] ?? Number.POSITIVE_INFINITY)) {
|
|
return row
|
|
}
|
|
return best
|
|
}, null)
|
|
}
|
|
|
|
function numberFromRecord(record: Record<string, unknown> | null | undefined, key: string): number | null {
|
|
const value = record?.[key]
|
|
return typeof value === 'number' && Number.isFinite(value) ? value : null
|
|
}
|
|
|
|
function stringFromRecord(record: Record<string, unknown> | null | undefined, key: string): string | null {
|
|
const value = record?.[key]
|
|
return typeof value === 'string' && value.trim().length > 0 ? value : null
|
|
}
|
|
|
|
function buildCalibrationSummaryExport(projectId: string, rows: DetectionCalibrationRunRow[]): Record<string, unknown> {
|
|
const successfulRows = rows.filter((row) => row.status === 'success')
|
|
return {
|
|
export_type: 'detection_calibration_summary',
|
|
project_id: projectId,
|
|
created_at: new Date().toISOString(),
|
|
calibration_thresholds: rows.map((row) => row.threshold),
|
|
quality_check_ids: successfulRows.map((row) => row.quality_check_id).filter(Boolean),
|
|
rows: rows.map((row) => ({
|
|
threshold: row.threshold,
|
|
status: row.status,
|
|
analysis_run_id: row.analysis_run_id ?? null,
|
|
job_id: row.job_id ?? null,
|
|
quality_check_id: row.quality_check_id ?? null,
|
|
evidence_geojson_url: row.quality_check_id
|
|
? `/api/v1/projects/${projectId}/quality-checks/${row.quality_check_id}/evidence/geojson`
|
|
: null,
|
|
detection_count: row.detection_count ?? null,
|
|
precision: row.precision ?? null,
|
|
recall: row.recall ?? null,
|
|
f1_score: row.f1_score ?? null,
|
|
false_positives: row.false_positives ?? null,
|
|
false_negatives: row.false_negatives ?? null,
|
|
message: row.message ?? null,
|
|
})),
|
|
}
|
|
}
|
|
|
|
function downloadCalibrationSummary(projectId: string | null, rows: DetectionCalibrationRunRow[]): void {
|
|
if (!projectId || rows.length === 0) {
|
|
return
|
|
}
|
|
downloadJsonFile('detection-calibration-summary.json', buildCalibrationSummaryExport(projectId, rows))
|
|
}
|
|
|
|
function downloadJsonFile(filename: string, payload: unknown): void {
|
|
const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' })
|
|
const url = URL.createObjectURL(blob)
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.download = filename
|
|
link.click()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
function formatNullableNumber(value: number | null, digits: number): string {
|
|
return typeof value === 'number' && Number.isFinite(value) ? value.toFixed(digits) : 'n.v.t.'
|
|
}
|