a514cbca18
Both cards were reading the same availableBlocks field, so the segmentation box always showed the kurrent recognition count. Use the correct availableSegBlocks field from the training info response. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
87 lines
2.4 KiB
Svelte
87 lines
2.4 KiB
Svelte
<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 {
|
|
availableSegBlocks?: 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?.availableSegBlocks ?? 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>
|