Show Settings LoRA aliases in picker lists instead of filenames.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-08-31 21:33:19 -05:00
co-authored by Cursor
parent 85dc378712
commit 350a0aeb45
5 changed files with 45 additions and 14 deletions
+15 -6
View File
@@ -31,10 +31,10 @@
>
<span class="block leading-none" aria-hidden="true">⋮⋮</span>
</button>
<span class="min-w-0 truncate text-zinc-200">{{ loraDisplayName(item.name) }}</span>
<span class="min-w-0 truncate text-zinc-200">{{ labelFor(item.name) }}</span>
<LoraTriggerTip
:text="triggerFor(item.name)"
:aria-label="'Activation for ' + loraDisplayName(item.name)"
:aria-label="'Activation for ' + labelFor(item.name)"
@insert="emit('insert-trigger', $event)"
@save="saveTrigger(item.name, $event)"
/>
@@ -91,7 +91,7 @@
v-for="name in availableNames"
:key="name"
:value="name"
>{{ loraDisplayName(name) }}</option>
>{{ labelFor(name) }}</option>
</select>
</div>
</template>
@@ -103,7 +103,7 @@ import {
LORA_STRENGTH_MIN,
LORA_STRENGTH_STEP,
clampLoraStrength,
loraDisplayName,
loraFriendlyName,
loraIdentityKey,
loraTriggerFor,
makeLoraStackItem,
@@ -120,6 +120,7 @@ const props = withDefaults(defineProps<{
disabled?: boolean
clipStrength?: boolean
triggers?: Record<string, string>
aliases?: Record<string, string>
}>(), {
label: 'LoRA',
emptyLabel: 'None',
@@ -128,7 +129,8 @@ const props = withDefaults(defineProps<{
compact: false,
disabled: false,
clipStrength: true,
triggers: () => ({})
triggers: () => ({}),
aliases: () => ({})
})
const emit = defineEmits<{
@@ -143,7 +145,10 @@ const dragOverIndex = ref<number | null>(null)
const availableNames = computed(() => {
const taken = new Set(model.value.map(item => loraIdentityKey(item.name)))
return props.names.filter(name => !taken.has(loraIdentityKey(name)))
return props.names
.filter(name => !taken.has(loraIdentityKey(name)))
.slice()
.sort((a, b) => labelFor(a).localeCompare(labelFor(b), undefined, { sensitivity: 'base' }))
})
const selectPlaceholder = computed(() => {
@@ -220,6 +225,10 @@ function triggerFor(name: string) {
return loraTriggerFor(name, props.triggers)
}
function labelFor(name: string) {
return loraFriendlyName(name, props.aliases)
}
function saveTrigger(name: string, trigger: string) {
emit('update-trigger', name, trigger)
}
+6 -3
View File
@@ -202,8 +202,11 @@
class="flex flex-col gap-2 rounded-2xl border border-white/10 bg-zinc-950/50 px-4 py-3 sm:flex-row sm:items-center"
>
<div class="min-w-0 flex-1">
<p class="truncate text-sm text-zinc-200">{{ row.file }}</p>
<p class="text-[10px] uppercase tracking-wide text-zinc-600">{{ row.kind === 'both' ? 'Image · Video' : row.kind }}</p>
<p class="truncate text-sm text-zinc-200">{{ row.draft || row.file }}</p>
<p class="truncate text-[10px] uppercase tracking-wide text-zinc-600">
{{ row.kind === 'both' ? 'Image · Video' : row.kind }}
<span v-if="row.draft" class="normal-case tracking-normal text-zinc-500"> · {{ row.file }}</span>
</p>
</div>
<div class="flex w-full flex-col gap-2 sm:w-56">
<input
@@ -445,7 +448,7 @@ const filteredLoraRows = computed(() => {
if (!q) return true
const hay = `${row.file} ${row.draft} ${row.trigger} ${row.key} ${row.placeholder}`.toLowerCase()
return hay.includes(q)
})
}).sort((a, b) => (a.draft || a.file).localeCompare(b.draft || b.file, undefined, { sensitivity: 'base' }))
})
const loginUser = ref('')
const loginCurrent = ref('')
+6
View File
@@ -458,6 +458,7 @@
:model-value="shotLoraStacks[shot.n] || []"
:names="videoLoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="Default"
add-label="Add LoRA"
@@ -523,6 +524,7 @@
:model-value="item.loraStack || []"
:names="videoLoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="Default"
add-label="Add LoRA"
@@ -749,6 +751,7 @@
v-model="videoLoraStack"
:names="videoLoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="None"
compact
@@ -811,6 +814,7 @@
v-model="imageV2LoraStack"
:names="imageV2LoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="Add LoRA"
missing-label="Wake GPU to load LoRAs"
@@ -935,6 +939,7 @@
v-model="imageLoraStack"
:names="imageLoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="None"
compact
@@ -1401,6 +1406,7 @@
v-model="extendLoraStack"
:names="videoLoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="Same as clip / none"
compact
+7 -3
View File
@@ -194,6 +194,7 @@
:model-value="readLoraStack(segment)"
:names="videoLoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="Default"
add-label="Add LoRA"
@@ -225,7 +226,7 @@
>
<p class="text-sm font-medium text-zinc-100">{{ job.kind === 'edit' ? `Pass ${index + 1}` : `Shot ${index + 1}` }} <span class="font-normal text-zinc-500">· queued with this job</span></p>
<p class="mt-1 max-h-24 overflow-y-auto whitespace-pre-wrap text-xs text-zinc-400 [overflow-wrap:anywhere]">{{ shot.prompt }}</p>
<p v-if="loraStackLabel(readLoraStack(shot))" class="mt-1 text-[11px] text-zinc-500">{{ loraStackLabel(readLoraStack(shot)) }}</p>
<p v-if="loraStackLabel(readLoraStack(shot), loraAliases)" class="mt-1 text-[11px] text-zinc-500">{{ loraStackLabel(readLoraStack(shot), loraAliases) }}</p>
</li>
</ol>
</section>
@@ -339,6 +340,7 @@
:model-value="readLoraStack(segment)"
:names="videoLoraOptions"
:triggers="loraTriggers"
:aliases="loraAliases"
label="LoRA"
empty-label="Default"
add-label="Add LoRA"
@@ -465,6 +467,7 @@ type PendingRemove = {
const videoLoras = ref<string[]>([])
const loraTriggers = ref<Record<string, string>>({})
const loraAliases = ref<Record<string, string>>({})
const jobs = ref<StudioJobRow[]>([])
const orphans = ref<Queue[]>([])
const waitingCount = ref(0)
@@ -640,7 +643,7 @@ async function saveLoraTrigger(name: string, trigger: string) {
function segmentLoraLabel(queue: Queue, segment: Segment) {
const stack = readLoraStack(segment).length ? readLoraStack(segment) : readLoraStack(queue)
return loraStackLabel(stack)
return loraStackLabel(stack, loraAliases.value)
}
function segmentClass(queue: Queue, segment: Segment) {
@@ -1040,8 +1043,9 @@ onMounted(async () => {
void $fetch<{ video?: string[] }>('/api/loras').then((listed) => {
videoLoras.value = listed.video || []
}).catch(() => null)
void $fetch<{ loraTriggers?: Record<string, string> }>('/api/library?light=1').then((library) => {
void $fetch<{ loraTriggers?: Record<string, string>; loraAliases?: Record<string, string> }>('/api/library?light=1').then((library) => {
if (library.loraTriggers) loraTriggers.value = library.loraTriggers
if (library.loraAliases) loraAliases.value = library.loraAliases
}).catch(() => null)
window.addEventListener('keydown', onRemoveKey)
await loadQueues().catch((err: any) => {
+11 -2
View File
@@ -67,6 +67,15 @@ export function loraDisplayName(name: string) {
return loraBasename(name).replace(/\.(safetensors|sft|ckpt|pt|bin)$/i, '')
}
export function loraAliasFor(name: string, aliases: Record<string, string> = {}) {
const id = loraIdentityKey(name)
return String(aliases[id] || aliases[loraBasename(name).toLowerCase()] || '').trim()
}
export function loraFriendlyName(name: string, aliases: Record<string, string> = {}) {
return loraAliasFor(name, aliases) || loraDisplayName(name)
}
export function normalizeLoraName(raw: unknown) {
const value = String(raw || '').trim().replace(/\\/g, '/')
if (!value) return ''
@@ -175,8 +184,8 @@ export function primaryLoraName(stack?: LoraStackItem[] | null) {
return stack?.[0]?.name || ''
}
export function loraStackLabel(stack?: LoraStackItem[] | null) {
return (stack || []).map(item => loraDisplayName(item.name)).join(' · ')
export function loraStackLabel(stack?: LoraStackItem[] | null, aliases: Record<string, string> = {}) {
return (stack || []).map(item => loraFriendlyName(item.name, aliases)).join(' · ')
}
export function persistLoraFields(stack?: unknown) {