feat(training): add Paraglide i18n to training UI components and wire SegmentationTrainingCard

- Convert TrainingHistory, OcrTrainingCard, SegmentationTrainingCard, and TranscriptionBlock "Nur Segmentierung" badge to use Paraglide message keys - Add availableSegBlocks to TrainingInfoResponse to expose segmentation block count in the training info endpoint - Wire SegmentationTrainingCard into admin/system page below OCR training card - Update api.ts with availableSegBlocks field Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-13 15:14:27 +02:00
parent 4e08d31e01
commit 86e9c05aaf
9 changed files with 144 additions and 25 deletions
--- a/frontend/src/lib/components/OcrTrainingCard.svelte
+++ b/frontend/src/lib/components/OcrTrainingCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import TrainingHistory from './TrainingHistory.svelte';
+import { m } from '$lib/paraglide/messages.js';

 interface Run {
 	id: string;
@@ -42,7 +43,7 @@ async function startTraining() {
 	try {
 		const res = await fetch('/api/ocr/train', { method: 'POST' });
 		if (res.ok) {
-			successMessage = 'Training wurde gestartet und abgeschlossen.';
+			successMessage = m.training_success();
 			setTimeout(() => {
 				successMessage = null;
 			}, 5000);
@@ -54,16 +55,14 @@ async function startTraining() {
 </script>

 <div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-	<h2 class="mb-1 font-sans text-sm font-bold text-ink">Kurrent-Erkennung trainieren</h2>
-	<p class="mb-4 text-sm text-ink-2">
-		Starte ein neues Training mit den bisher geprüften OCR-Blöcken, um die Erkennungsgenauigkeit für
-		Kurrentschrift zu verbessern.
-	</p>
+	<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.training_ocr_heading()}</h2>
+	<p class="mb-4 text-sm text-ink-2">{m.training_ocr_description()}</p>

 	<p class="mb-3 text-sm text-ink">
-		<strong>{available}</strong> geprüfte Blöcke bereit /
-		<strong>{trainingInfo?.availableDocuments ?? 0}</strong> Dokumente
-		<span class="text-ink-2">(von {trainingInfo?.totalOcrBlocks ?? 0} OCR-Blöcken gesamt)</span>
+		{m.training_ocr_blocks_ready({ blocks: available, docs: trainingInfo?.availableDocuments ?? 0 })}
+		<span class="text-ink-2"
+			>{m.training_ocr_blocks_total({ total: trainingInfo?.totalOcrBlocks ?? 0 })}</span
+		>
 	</p>

 	<button
@@ -71,21 +70,23 @@ async function startTraining() {
 		disabled={disabled}
 		class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-brand-navy disabled:cursor-not-allowed disabled:opacity-50"
 	>
-		{training ? '…' : 'Training starten'}
+		{training ? '…' : m.training_start_btn()}
 	</button>

 	{#if tooFewBlocks}
 		<p class="mt-2 text-xs text-ink-3">
-			Mindestens 5 geprüfte Blöcke erforderlich (aktuell: {available}).
+			{m.training_too_few_blocks({ available })}
 		</p>
 	{:else if serviceDown}
-		<p class="mt-2 text-xs text-orange-600">OCR-Dienst ist nicht erreichbar.</p>
+		<p class="mt-2 text-xs text-orange-600">{m.training_service_down()}</p>
 	{/if}

 	{#if successMessage}
 		<p class="mt-2 text-xs text-green-700">{successMessage}</p>
 	{/if}

-	<h3 class="mt-6 mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">Verlauf</h3>
+	<h3 class="mt-6 mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.training_history_heading()}
+	</h3>
 	<TrainingHistory runs={trainingInfo?.runs ?? []} />
 </div>
--- a/frontend/src/lib/components/SegmentationTrainingCard.svelte
+++ b/frontend/src/lib/components/SegmentationTrainingCard.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+import TrainingHistory from './TrainingHistory.svelte';
+import { m } from '$lib/paraglide/messages.js';
+
+interface Run {
+	id: string;
+	status: 'RUNNING' | 'DONE' | 'FAILED';
+	blockCount: number;
+	documentCount: number;
+	modelName: string;
+	errorMessage?: string;
+	triggeredBy?: string;
+	createdAt: string;
+	completedAt?: string;
+}
+
+interface TrainingInfo {
+	availableBlocks?: number;
+	ocrServiceAvailable?: boolean;
+	runs?: Run[];
+}
+
+interface Props {
+	trainingInfo: TrainingInfo | null;
+}
+
+let { trainingInfo }: Props = $props();
+
+let training = $state(false);
+let successMessage = $state<string | null>(null);
+
+const available = $derived(trainingInfo?.availableBlocks ?? 0);
+const tooFewBlocks = $derived(available < 5);
+const serviceDown = $derived(trainingInfo?.ocrServiceAvailable === false);
+const disabled = $derived(training || tooFewBlocks || serviceDown);
+
+async function startTraining() {
+	training = true;
+	successMessage = null;
+	try {
+		const res = await fetch('/api/ocr/segtrain', { method: 'POST' });
+		if (res.ok) {
+			successMessage = m.training_success();
+			setTimeout(() => {
+				successMessage = null;
+			}, 5000);
+		}
+	} finally {
+		training = false;
+	}
+}
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.training_seg_heading()}</h2>
+	<p class="mb-4 text-sm text-ink-2">{m.training_seg_description()}</p>
+
+	<p class="mb-3 text-sm text-ink">
+		{m.training_seg_blocks_ready({ blocks: available })}
+	</p>
+
+	<button
+		onclick={startTraining}
+		disabled={disabled}
+		class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-brand-navy disabled:cursor-not-allowed disabled:opacity-50"
+	>
+		{training ? '…' : m.training_start_btn()}
+	</button>
+
+	{#if tooFewBlocks}
+		<p class="mt-2 text-xs text-ink-3">
+			{m.training_seg_too_few_blocks({ available })}
+		</p>
+	{:else if serviceDown}
+		<p class="mt-2 text-xs text-orange-600">{m.training_service_down()}</p>
+	{/if}
+
+	{#if successMessage}
+		<p class="mt-2 text-xs text-green-700">{successMessage}</p>
+	{/if}
+
+	<h3 class="mt-6 mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.training_history_heading()}
+	</h3>
+	<TrainingHistory runs={(trainingInfo?.runs ?? []).filter((r) => r.modelName === 'blla')} />
+</div>
--- a/frontend/src/lib/components/TrainingHistory.svelte
+++ b/frontend/src/lib/components/TrainingHistory.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
 interface Run {
 	id: string;
 	status: 'RUNNING' | 'DONE' | 'FAILED';
@@ -31,17 +33,17 @@ function formatDate(iso: string): string {
 <table class="w-full text-sm">
 	<thead>
 		<tr class="border-b border-line text-xs font-bold tracking-widest text-ink-3 uppercase">
-			<th class="pb-2 text-left">Datum</th>
-			<th class="pb-2 text-left">Status</th>
-			<th class="pb-2 text-right">Blöcke</th>
-			<th class="hidden pb-2 text-right md:table-cell">Dokumente</th>
+			<th class="pb-2 text-left">{m.training_history_col_date()}</th>
+			<th class="pb-2 text-left">{m.training_history_col_status()}</th>
+			<th class="pb-2 text-right">{m.training_history_col_blocks()}</th>
+			<th class="hidden pb-2 text-right md:table-cell">{m.training_history_col_docs()}</th>
 		</tr>
 	</thead>
 	<tbody>
 		{#if runs.length === 0}
 			<tr>
 				<td colspan="4" class="py-4 text-center text-sm text-ink-2">
-					Noch keine Trainings-Läufe.
+					{m.training_history_empty()}
 				</td>
 			</tr>
 		{:else}
@@ -52,18 +54,18 @@ function formatDate(iso: string): string {
 						{#if run.status === 'DONE'}
 							<span
 								class="inline-flex items-center gap-1 rounded-sm bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700"
-								>✓ Fertig</span
+								>✓ {m.training_status_done()}</span
 							>
 						{:else if run.status === 'FAILED'}
 							<span
 								class="inline-flex items-center gap-1 rounded-sm bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-700"
-								title={run.errorMessage}>✗ Fehler</span
+								title={run.errorMessage}>✗ {m.training_status_failed()}</span
 							>
 						{:else}
 							<span
 								class="inline-flex items-center gap-1 rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-700"
 								><span class="h-1.5 w-1.5 animate-pulse rounded-full bg-yellow-500"
-								></span>Läuft…</span
+								></span>{m.training_status_running()}</span
 							>
 						{/if}
 					</td>
--- a/frontend/src/lib/components/TranscriptionBlock.svelte
+++ b/frontend/src/lib/components/TranscriptionBlock.svelte
@@ -27,6 +27,7 @@ type Props = {
 	onMoveDown?: () => void;
 	isFirst?: boolean;
 	isLast?: boolean;
+	source?: 'MANUAL' | 'OCR';
 };

 let {
@@ -48,7 +49,8 @@ let {
 	onMoveUp,
 	onMoveDown,
 	isFirst = false,
-	isLast = false
+	isLast = false,
+	source = 'MANUAL'
 }: Props = $props();

 let localText = $state(text);
@@ -172,6 +174,11 @@ function handleTextareaMouseUp() {
 					{label}
 				</span>
 			{/if}
+			{#if (!text || text.trim() === '') && source === 'MANUAL'}
+				<span class="rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-ink-3"
+					>{m.transcription_block_segmentation_only()}</span
+				>
+			{/if}
 		</div>

 		<!-- Textarea -->
--- a/frontend/src/lib/generated/api.ts
+++ b/frontend/src/lib/generated/api.ts
@@ -1429,6 +1429,8 @@ export interface components {
            totalOcrBlocks?: number;
            /** Format: int32 */
            availableDocuments?: number;
+            /** Format: int32 */
+            availableSegBlocks?: number;
            ocrServiceAvailable?: boolean;
            lastRun?: components["schemas"]["OcrTrainingRun"];
            runs?: components["schemas"]["OcrTrainingRun"][];
--- a/frontend/src/routes/admin/system/+page.svelte
+++ b/frontend/src/routes/admin/system/+page.svelte
@@ -2,6 +2,7 @@
 import { onDestroy } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import OcrTrainingCard from '$lib/components/OcrTrainingCard.svelte';
+import SegmentationTrainingCard from '$lib/components/SegmentationTrainingCard.svelte';
 import type { components } from '$lib/generated/api.js';

 type TrainingInfo = components['schemas']['TrainingInfoResponse'];
@@ -102,9 +103,20 @@ async function backfillFileHashes() {

 <div class="flex-1 overflow-y-auto p-6">
 	<div class="mx-auto max-w-2xl space-y-5">
-		<!-- OCR Training -->
+		<!-- OCR Recognition Training -->
 		<OcrTrainingCard trainingInfo={trainingInfo} />

+		<!-- OCR Segmentation Training -->
+		<SegmentationTrainingCard
+			trainingInfo={trainingInfo
+				? {
+						availableBlocks: trainingInfo.availableSegBlocks,
+						ocrServiceAvailable: trainingInfo.ocrServiceAvailable,
+						runs: trainingInfo.runs
+					}
+				: null}
+		/>
+
 		<!-- Backfill versions -->
 		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
 			<h2 class="mb-1 font-sans text-sm font-bold text-ink">{m.admin_system_backfill_heading()}</h2>