FabledCurator/frontend/src/components/settings/CropProposersCard.vue

<template>
  <MaintenanceTile
    icon="mdi-crop"
    title="Crop proposers (where to crop)"
    blurb="Detectors that decide WHERE to crop each image before embedding — general figures, anime/furry anatomy, and comic panels — so a tag can ground to a region, not just the whole image."
    :open="false"
  >
    <p class="fc-muted text-body-2 mb-4">
      Each proposer finds regions that the crop → SigLIP bag scores alongside the
      whole image; the best-scoring region is what grounds a tag. Weights accept
      an <strong>ultralytics name</strong> (<code>yolo11n.pt</code>), a
      <strong>URL</strong>, or <strong>hf_repo::file</strong>. Edits reach the GPU
      agent on its next lease — no restart. After turning a proposer on, re-process
      the library so existing images gain its regions.
    </p>

    <div v-for="p in proposers" :key="p.key" class="fc-proposer">
      <SettingToggleRow
        v-model="p.on" :loading="busy" :icon="p.icon"
        :icon-color="p.on ? 'accent' : null" :label="p.label"
        @change="v => saveToggle(p, v)"
      />
      <p class="fc-muted text-body-2 mb-2">{{ p.help }}</p>
      <div class="d-flex flex-wrap mb-4" style="gap: 12px;">
        <v-text-field
          v-model="p.weights" label="Weights" density="compact" hide-details
          style="min-width: 300px; flex: 1;" :disabled="busy || !p.on"
          placeholder="name | URL | hf_repo::file"
          @change="saveField({ [`detector_${p.key}_weights`]: p.weights })"
        />
        <SettingNumberField
          v-model="p.conf" label="Confidence" :min="0" :max="1" :step="0.05"
          max-width="140px" :disabled="busy || !p.on"
          @change="saveField({ [`detector_${p.key}_conf`]: Number(p.conf) })"
        />
      </div>
    </div>

    <div class="fc-caps">
      <div class="fc-section-h mb-1">Caps</div>
      <p class="fc-muted text-body-2 mb-3">
        Bound how many crops each image can produce — protects GPU time and
        storage. Dedupe IoU drops near-duplicate crops before embedding.
      </p>
      <div class="d-flex flex-wrap" style="gap: 12px;">
        <SettingNumberField
          v-for="c in caps" :key="c.key"
          v-model="c.val" :label="c.label"
          :min="c.min" :max="c.max" :step="c.step || 1"
          max-width="165px" :disabled="busy"
          @change="saveField({ [c.key]: Number(c.val) })"
        />
      </div>
    </div>
  </MaintenanceTile>
</template>

<script setup>
import { onMounted, ref } from 'vue'

import MaintenanceTile from '../common/MaintenanceTile.vue'
import SettingNumberField from '../common/SettingNumberField.vue'
import SettingToggleRow from '../common/SettingToggleRow.vue'
import { useSettingSave } from '../../composables/useSettingSave.js'
import { useMLStore } from '../../stores/ml.js'

const mlSettings = useMLStore()
const { busy, save } = useSettingSave(mlSettings.patchSettings)
const proposers = ref([])
const caps = ref([])

// Static copy per proposer; the mutable state (on/weights/conf) is seeded from
// settings on mount so the card reflects the live DB config (rule 26 — it works
// untouched).
const DEFS = [
  {
    key: 'person', label: 'Figures (person)', icon: 'mdi-account-outline',
    help: 'General figure detector for the Western/realistic art the anime ' +
      'detector misses → character identity + a whole-figure crop.',
  },
  {
    key: 'anatomy', label: 'Anatomy (booru)', icon: 'mdi-dog-side',
    help: 'Anime / furry / NSFW torso components (heads, busts, hips, …) → ' +
      'localized concept crops.',
  },
  {
    key: 'panel', label: 'Comic panels', icon: 'mdi-view-grid-outline',
    help: 'Splits a comic page into its panels → one concept crop each.',
  },
]
const CAP_DEFS = [
  { key: 'detector_max_figures', label: 'Max figures', min: 1 },
  { key: 'detector_max_components', label: 'Max components', min: 1 },
  { key: 'detector_max_panels', label: 'Max panels', min: 1 },
  { key: 'detector_max_regions', label: 'Max regions / job', min: 1 },
  { key: 'detector_dedupe_iou', label: 'Dedupe IoU', min: 0, max: 1, step: 0.05 },
]

onMounted(async () => {
  try { await mlSettings.loadSettings() } catch { /* non-fatal — defaults show */ }
  const s = mlSettings.settings || {}
  proposers.value = DEFS.map(d => ({
    ...d,
    on: !!s[`detector_${d.key}_enabled`],
    weights: s[`detector_${d.key}_weights`] ?? '',
    conf: s[`detector_${d.key}_conf`] ?? 0.3,
  }))
  caps.value = CAP_DEFS.map(c => ({ ...c, val: s[c.key] ?? 0 }))
})

// Field @change → persist with a "Saved" confirmation. SettingNumberField has
// already clamped numeric values to their [min,max] before this fires.
function saveField(patch) {
  save(patch, { successMessage: 'Saved' })
}

async function saveToggle(p, v) {
  // Revert the switch on failure so it never lies about the persisted state.
  const ok = await save({ [`detector_${p.key}_enabled`]: !!v }, { successMessage: 'Saved' })
  if (!ok) p.on = !v
}
</script>

<style scoped>
.fc-proposer {
  border-top: 1px solid rgb(var(--v-theme-surface-light)); padding-top: 14px;
}
.fc-proposer:first-of-type { border-top: none; padding-top: 0; }
.fc-caps {
  border-top: 1px solid rgb(var(--v-theme-surface-light)); padding-top: 16px;
}
code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
  background: rgb(var(--v-theme-surface-light)); padding: 1px 5px;
  border-radius: 4px;
}
</style>