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
131 lines
3.9 KiB
Vue
131 lines
3.9 KiB
Vue
<template>
|
|
<div class="fc-maint">
|
|
<p class="fc-muted text-body-2 mb-5">
|
|
Processing, tagging and storage tools, grouped by system. Heads train
|
|
nightly and auto-apply earned tags. Click a tile to open it.
|
|
</p>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">Ingestion & filters</h3>
|
|
<p class="fc-section__hint">
|
|
What gets imported — dedup sensitivity, size/transparency/solid-color
|
|
filters. Applies to downloads and folder imports alike.
|
|
</p>
|
|
<div class="fc-tile-stack">
|
|
<ImportFiltersForm />
|
|
<TranslationCard />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">GPU agent & embeddings</h3>
|
|
<p class="fc-section__hint">
|
|
The desktop agent that does the heavy lifting, its failure triage, and
|
|
the CPU fallback.
|
|
</p>
|
|
<div class="fc-tile-stack">
|
|
<VideoEmbeddingCard />
|
|
<GpuAgentCard />
|
|
<GpuTriageCard />
|
|
<MLBackfillCard />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">Tagging</h3>
|
|
<p class="fc-section__hint">
|
|
Suggestion thresholds, trained heads and tag aliases.
|
|
</p>
|
|
<div class="fc-tile-stack">
|
|
<CropProposersCard />
|
|
<HeadsCard />
|
|
<AliasTable />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">Library health</h3>
|
|
<p class="fc-section__hint">
|
|
Self-healing and repair: missing files, thumbnails, database upkeep.
|
|
</p>
|
|
<div class="fc-tile-grid">
|
|
<MissingFileRepairCard />
|
|
<ThumbnailBackfillCard />
|
|
<DbMaintenanceCard />
|
|
<ArchiveReextractCard />
|
|
</div>
|
|
</section>
|
|
|
|
<section class="fc-section">
|
|
<h3 class="fc-section__title">Storage</h3>
|
|
<p class="fc-section__hint">Database + image backups and restore.</p>
|
|
<div class="fc-tile-stack">
|
|
<BackupCard />
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
|
|
import ImportFiltersForm from './ImportFiltersForm.vue'
|
|
import TranslationCard from './TranslationCard.vue'
|
|
import MLBackfillCard from './MLBackfillCard.vue'
|
|
import ThumbnailBackfillCard from './ThumbnailBackfillCard.vue'
|
|
import ArchiveReextractCard from './ArchiveReextractCard.vue'
|
|
import MissingFileRepairCard from './MissingFileRepairCard.vue'
|
|
import GpuTriageCard from './GpuTriageCard.vue'
|
|
import DbMaintenanceCard from './DbMaintenanceCard.vue'
|
|
import VideoEmbeddingCard from './VideoEmbeddingCard.vue'
|
|
import CropProposersCard from './CropProposersCard.vue'
|
|
import HeadsCard from './HeadsCard.vue'
|
|
import GpuAgentCard from './GpuAgentCard.vue'
|
|
import AliasTable from './AliasTable.vue'
|
|
import BackupCard from './BackupCard.vue'
|
|
import { useSystemActivityStore } from '../../stores/systemActivity.js'
|
|
|
|
// Poll queue depths so each task tile's QueueStatusBar shows live pending
|
|
// counts — the operator can see a backfill is already queued/running before
|
|
// re-triggering it.
|
|
const activity = useSystemActivityStore()
|
|
let qTimer = null
|
|
onMounted(() => {
|
|
activity.loadQueues()
|
|
qTimer = setInterval(() => {
|
|
if (!document.hidden) activity.loadQueues()
|
|
}, 4000)
|
|
})
|
|
onUnmounted(() => {
|
|
if (qTimer) { clearInterval(qTimer); qTimer = null }
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-section { margin-bottom: 24px; }
|
|
.fc-section__title {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: rgb(var(--v-theme-accent));
|
|
margin-bottom: 2px;
|
|
}
|
|
.fc-section__hint {
|
|
font-size: 0.8rem;
|
|
color: rgb(var(--v-theme-on-surface-variant));
|
|
margin-bottom: 12px;
|
|
}
|
|
.fc-tile-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 14px;
|
|
align-items: start;
|
|
}
|
|
.fc-tile-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
</style>
|