bvandeusenandClaude Opus 4.8
ec66ea5f83
Tier-3 frontend DRY for the ML settings cards, plus the F-D2 clamp bug and the F-D3 card misgrouping. New primitives (components/common + composables): - <SettingToggleRow> — the accent-icon + .fc-section-h label + right-aligned switch row (HeadsCard x3, CropProposersCard). iconColor prop absorbs the on/off dim. - <SettingNumberField> — compact numeric field that CLAMPS to [min,max] on commit. This fixes F-D2: HeadsCard/CropProposersCard previously sent Number(raw) straight to the API, so an out-of-range threshold bounced off the 400 validator (only TranslationCard clamped). density prop for the grid cards. - useSettingSave(patchFn) — the busy + patch + toast + revert-on-failure flow each card hand-rolled (HeadsCard x6 handlers, CropProposersCard, MLBackfillCard, VideoEmbeddingCard). Returns ok/false for the optimistic-switch revert. Adopted in HeadsCard, CropProposersCard, MLBackfillCard (handler only — its plain labelled switch is a different affordance), VideoEmbeddingCard. F-D3: MLThresholdSliders.vue actually rendered a "Video embedding" (frame- sampling) card but sat under "Tagging → Suggestion thresholds". Renamed it VideoEmbeddingCard.vue and moved it to the "GPU agent & embeddings" section. Left deliberately (over-DRY guard): TranslationCard uses an inline error ALERT (not a toast), already clamps its confidence with a NaN fallback, and lives on the ImportStore — a genuinely different save pattern, so forcing it onto useSettingSave would change its UX. Behaviour-preserving refactor; CI has no Vue type-check so this needs a live UI pass (toggles persist + revert on failure, thresholds clamp on blur, video card now under Embeddings). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi
55 lines
1.9 KiB
Vue
55 lines
1.9 KiB
Vue
<template>
|
|
<MaintenanceTile
|
|
icon="mdi-filmstrip"
|
|
title="Video embedding"
|
|
blurb="How videos are sampled into frames before embedding."
|
|
>
|
|
<div v-if="store.settings">
|
|
<div class="text-caption fc-muted mb-3">
|
|
Videos are embedded by sampling frames at a fixed cadence and mean-pooling
|
|
their SigLIP embeddings. The interval sets the cadence; the cap bounds how
|
|
many frames a long video samples.
|
|
</div>
|
|
<v-row>
|
|
<v-col cols="12" sm="6">
|
|
<SettingNumberField
|
|
v-model="local.video_frame_interval_seconds"
|
|
label="Frame interval (s)" :min="0.5" :step="0.5"
|
|
density="comfortable" max-width="none" @change="onSave"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" sm="6">
|
|
<SettingNumberField
|
|
v-model="local.video_max_frames"
|
|
label="Max frames" :min="1" :step="1"
|
|
density="comfortable" max-width="none" @change="onSave"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<div v-else><v-skeleton-loader type="paragraph" /></div>
|
|
</MaintenanceTile>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, watch } from 'vue'
|
|
import { useMLStore } from '../../stores/ml.js'
|
|
import MaintenanceTile from '../common/MaintenanceTile.vue'
|
|
import SettingNumberField from '../common/SettingNumberField.vue'
|
|
import { useSettingSave } from '../../composables/useSettingSave.js'
|
|
|
|
const store = useMLStore()
|
|
const { save } = useSettingSave(store.patchSettings)
|
|
const local = reactive({})
|
|
watch(() => store.settings, (s) => { if (s) Object.assign(local, s) }, { immediate: true })
|
|
|
|
// SettingNumberField clamps interval to ≥0.5 and max-frames to ≥1 before this
|
|
// fires, so an out-of-range value never reaches the API.
|
|
function onSave() {
|
|
save({
|
|
video_frame_interval_seconds: Number(local.video_frame_interval_seconds),
|
|
video_max_frames: Number(local.video_max_frames),
|
|
})
|
|
}
|
|
</script>
|