aigen/components/LoraSelect.vue

<template>
  <div class="block min-w-0" :class="compact ? 'text-xs' : 'text-sm'">
    <span v-if="label" class="mb-1 block text-zinc-400">{{ label }}</span>
    <ul v-if="model.length" class="space-y-2">
      <li
        v-for="(item, index) in model"
        :key="item.name"
        class="rounded-xl border border-white/10 bg-zinc-950/80"
        :class="compact ? 'px-2 py-1.5' : 'px-3 py-2'"
      >
        <div class="flex items-center justify-between gap-2">
          <span class="min-w-0 truncate text-zinc-200">{{ loraDisplayName(item.name) }}</span>
          <button
            type="button"
            class="shrink-0 text-[11px] text-zinc-500 hover:text-red-300 disabled:opacity-50"
            :disabled="disabled"
            @click="removeAt(index)"
          >
            Remove
          </button>
        </div>
        <div class="mt-1.5 grid grid-cols-2 gap-2">
          <label class="block min-w-0">
            <span class="mb-0.5 flex justify-between text-[10px] uppercase tracking-wider text-zinc-500">
              <span>Model</span>
              <span class="tabular-nums normal-case text-zinc-400">{{ formatLoraStrength(item.strengthModel) }}</span>
            </span>
            <input
              type="range"
              class="aigen-slider w-full"
              :min="LORA_STRENGTH_MIN"
              :max="LORA_STRENGTH_MAX"
              :step="LORA_STRENGTH_STEP"
              :value="item.strengthModel"
              :disabled="disabled"
              @input="setStrength(index, 'strengthModel', $event)"
            >
          </label>
          <label class="block min-w-0" :class="{ 'opacity-50': !clipStrength }">
            <span class="mb-0.5 flex justify-between text-[10px] uppercase tracking-wider text-zinc-500">
              <span>CLIP</span>
              <span class="tabular-nums normal-case text-zinc-400">{{ formatLoraStrength(item.strengthClip) }}</span>
            </span>
            <input
              type="range"
              class="aigen-slider w-full"
              :min="LORA_STRENGTH_MIN"
              :max="LORA_STRENGTH_MAX"
              :step="LORA_STRENGTH_STEP"
              :value="item.strengthClip"
              :disabled="disabled || !clipStrength"
              @input="setStrength(index, 'strengthClip', $event)"
            >
          </label>
        </div>
      </li>
    </ul>
    <p v-if="!clipStrength && model.length" class="mt-1 text-[11px] text-zinc-500">CLIP unused on this graph — model strength only.</p>
    <select
      v-if="availableNames.length && model.length < LORA_STACK_MAX"
      class="w-full rounded-xl border border-white/10 bg-zinc-950 outline-none ring-amber-300/40 focus:ring-2 disabled:opacity-50"
      :class="[
        compact ? 'px-2 py-1 text-xs' : 'px-3 py-2 text-sm',
        model.length ? 'mt-2' : ''
      ]"
      :disabled="disabled"
      :value="''"
      @change="onAdd"
    >
      <option value="">{{ model.length ? addLabel : emptyLabel }}</option>
      <option
        v-for="name in availableNames"
        :key="name"
        :value="name"
      >{{ loraDisplayName(name) }}</option>
    </select>
    <p v-else-if="!model.length" class="text-[11px] text-zinc-500">{{ emptyLabel }}</p>
  </div>
</template>

<script setup lang="ts">
import {
  LORA_STACK_MAX,
  LORA_STRENGTH_MAX,
  LORA_STRENGTH_MIN,
  LORA_STRENGTH_STEP,
  clampLoraStrength,
  formatLoraStrength,
  loraDisplayName,
  makeLoraStackItem,
  type LoraStackItem
} from '~/utils/loras'

const props = withDefaults(defineProps<{
  names: string[]
  label?: string
  emptyLabel?: string
  addLabel?: string
  compact?: boolean
  disabled?: boolean
  clipStrength?: boolean
}>(), {
  label: 'LoRA',
  emptyLabel: 'None',
  addLabel: 'Add LoRA',
  compact: false,
  disabled: false,
  clipStrength: true
})

const model = defineModel<LoraStackItem[]>({ default: () => [] })

const availableNames = computed(() => {
  const taken = new Set(model.value.map(item => item.name.replace(/\\/g, '/').toLowerCase()))
  return props.names.filter(name => !taken.has(name.replace(/\\/g, '/').toLowerCase()))
})

function onAdd(event: Event) {
  const name = (event.target as HTMLSelectElement).value
  ;(event.target as HTMLSelectElement).value = ''
  addLora(name)
}

function addLora(name: string) {
  const item = makeLoraStackItem(name)
  if (!item || model.value.length >= LORA_STACK_MAX) return
  const taken = new Set(model.value.map(entry => entry.name.replace(/\\/g, '/').toLowerCase()))
  if (taken.has(item.name.replace(/\\/g, '/').toLowerCase())) return
  model.value = [...model.value, item]
}

function removeAt(index: number) {
  model.value = model.value.filter((_, i) => i !== index)
}

function setStrength(index: number, key: 'strengthModel' | 'strengthClip', event: Event) {
  const value = clampLoraStrength((event.target as HTMLInputElement).value)
  model.value = model.value.map((item, i) => i === index ? { ...item, [key]: value } : item)
}
</script>