755 lines
31 KiB
Vue
755 lines
31 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8" @click.self="emit('close')">
|
|
<div class="glass w-full max-w-2xl rounded-3xl p-5 sm:p-6">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h2 class="font-display text-2xl font-bold">Settings</h2>
|
|
<p class="mt-1 text-sm text-zinc-400">Library storage, folders, passwords, LoRA filename keys, and prompt-helper instruction sets for this account.</p>
|
|
</div>
|
|
<button type="button" class="rounded-full border border-white/10 px-3 py-1 text-sm text-zinc-400 hover:text-white" @click="emit('close')">Close</button>
|
|
</div>
|
|
|
|
<section class="mt-6">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">GPU</h3>
|
|
<div class="mt-2 space-y-3 rounded-2xl border border-white/10 bg-zinc-950/50 px-4 py-3">
|
|
<p class="text-sm text-zinc-400">
|
|
Stops Comfy on the desktop GPU so it drops out of VRAM. The PC stays on. Generate or Wake GPU will start it again.
|
|
</p>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-xl border px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-60"
|
|
:class="gpuSleeping ? 'border-amber-300/40 text-amber-100' : 'border-white/15 text-zinc-200 hover:border-amber-300/50 hover:text-white'"
|
|
:disabled="gpuSleeping || gpuWaking"
|
|
@click="sleepGpu"
|
|
>
|
|
{{ gpuSleeping ? 'Stopping GPU…' : 'Sleep GPU' }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-xl border px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-60"
|
|
:class="gpuWaking ? 'border-amber-300/40 text-amber-100' : 'border-amber-400/40 text-amber-200 hover:border-amber-300 hover:text-amber-50'"
|
|
:disabled="gpuWaking || gpuSleeping"
|
|
@click="wakeGpu"
|
|
>
|
|
{{ gpuWaking ? 'Starting GPU…' : 'Wake GPU' }}
|
|
</button>
|
|
</div>
|
|
<p v-if="gpuMessage" class="text-xs" :class="gpuError ? 'text-red-300' : 'text-zinc-500'">{{ gpuMessage }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-6">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">Storage</h3>
|
|
<div class="mt-2 rounded-2xl border border-white/10 bg-zinc-950/50 px-4 py-3">
|
|
<p v-if="storageLoading" class="text-sm text-zinc-500">Measuring…</p>
|
|
<p v-else-if="storageError" class="text-sm text-zinc-500">{{ storageError }}</p>
|
|
<template v-else-if="storage">
|
|
<p class="text-sm text-zinc-200">{{ storageLine }}</p>
|
|
<p v-if="storageBreakdown" class="mt-1 text-xs text-zinc-500">{{ storageBreakdown }}</p>
|
|
<p class="mt-1 text-xs text-zinc-600">{{ storageNote }}</p>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="authMode === 'password'" class="mt-6 space-y-3">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">Site login</h3>
|
|
<p class="text-sm text-zinc-400">Username and password are stored encrypted on this server. Changing them does not move the library.</p>
|
|
<form class="grid gap-2 sm:grid-cols-2" @submit.prevent="saveLogin">
|
|
<input v-model="loginUser" class="rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Username" autocomplete="username">
|
|
<input v-model="loginCurrent" type="password" class="rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Current password" autocomplete="current-password" required>
|
|
<input v-model="loginNext" type="password" class="rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm sm:col-span-2" placeholder="New password (blank to keep)" autocomplete="new-password">
|
|
<button type="submit" class="rounded-xl bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950 sm:col-span-2">Update login</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="mt-6 space-y-3">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">Folders</h3>
|
|
<span class="text-xs text-zinc-500">{{ folders.length }} total</span>
|
|
</div>
|
|
|
|
<div
|
|
v-for="folder in folders"
|
|
:key="folder.id"
|
|
class="rounded-2xl border border-white/10 bg-zinc-950/50 p-4 space-y-3"
|
|
>
|
|
<template v-if="drafts[folder.id]">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<input
|
|
v-model="drafts[folder.id].name"
|
|
class="min-w-[10rem] flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
@keydown.enter.prevent="rename(folder)"
|
|
>
|
|
<button type="button" class="rounded-xl border border-white/15 px-3 py-2 text-sm hover:border-amber-300/50" @click="rename(folder)">Rename</button>
|
|
<button type="button" class="rounded-xl border border-red-400/30 px-3 py-2 text-sm text-red-300 hover:border-red-300" @click="remove(folder)">Delete</button>
|
|
</div>
|
|
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
<label class="flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-white/10 px-3 py-2 text-sm">
|
|
<span>Show output preview</span>
|
|
<input
|
|
type="checkbox"
|
|
class="peer sr-only"
|
|
:checked="folder.thumbnailDefault"
|
|
@change="setThumbnail(folder, ($event.target as HTMLInputElement).checked)"
|
|
>
|
|
<span class="relative inline-flex h-6 w-11 shrink-0 items-center">
|
|
<span class="absolute inset-0 rounded-full bg-zinc-700 transition" :class="folder.thumbnailDefault ? 'bg-amber-400' : 'bg-zinc-700'" />
|
|
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition" :class="folder.thumbnailDefault ? 'translate-x-5' : ''" />
|
|
</span>
|
|
</label>
|
|
|
|
<label class="flex cursor-pointer items-center justify-between gap-3 rounded-xl border border-white/10 px-3 py-2 text-sm">
|
|
<span>{{ drafts[folder.id].protect ? 'Password on' : 'Password off' }}</span>
|
|
<input
|
|
type="checkbox"
|
|
class="peer sr-only"
|
|
:checked="drafts[folder.id].protect"
|
|
@change="toggleProtect(folder, ($event.target as HTMLInputElement).checked)"
|
|
>
|
|
<span class="relative inline-flex h-6 w-11 shrink-0 items-center">
|
|
<span class="absolute inset-0 rounded-full transition" :class="drafts[folder.id].protect ? 'bg-amber-400' : 'bg-zinc-700'" />
|
|
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition" :class="drafts[folder.id].protect ? 'translate-x-5' : ''" />
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<form v-if="drafts[folder.id].protect || folder.protected" class="grid gap-2 sm:grid-cols-2" @submit.prevent="savePassword(folder)">
|
|
<p v-if="folder.protected && !drafts[folder.id].protect" class="sm:col-span-2 text-sm text-zinc-400">
|
|
Enter the current password to turn protection off.
|
|
</p>
|
|
<input
|
|
v-if="folder.protected"
|
|
v-model="drafts[folder.id].currentPassword"
|
|
type="password"
|
|
class="rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Current password"
|
|
>
|
|
<input
|
|
v-if="drafts[folder.id].protect"
|
|
v-model="drafts[folder.id].password"
|
|
type="password"
|
|
class="rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
:placeholder="folder.protected ? 'New password (blank to keep)' : 'Set a password'"
|
|
>
|
|
<button type="submit" class="rounded-xl border border-white/15 px-3 py-2 text-sm hover:border-amber-300/50 sm:col-span-2">
|
|
{{ folder.protected && !drafts[folder.id].protect ? 'Remove password' : folder.protected ? 'Update folder password' : 'Protect folder' }}
|
|
</button>
|
|
</form>
|
|
<p v-if="folder.protected && folder.unlocked" class="text-xs text-emerald-300">Unlocked in this session.</p>
|
|
<p v-else-if="folder.protected" class="text-xs text-amber-200">Locked · you can generate into it, but clips stay hidden until you unlock.</p>
|
|
</template>
|
|
</div>
|
|
|
|
<form class="flex flex-wrap gap-2" @submit.prevent="addFolder">
|
|
<input
|
|
v-model="newName"
|
|
class="min-w-[10rem] flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="New folder name"
|
|
>
|
|
<button type="submit" class="rounded-xl bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950">Add folder</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="mt-8 space-y-3">
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">LoRA filename keys</h3>
|
|
<p class="mt-1 text-sm text-zinc-400">
|
|
Short names used in auto-generated output titles. Leave blank to use the file stem
|
|
(<span class="text-zinc-300">XAIgen-cline</span> becomes <span class="text-zinc-300">cline</span>).
|
|
Activation is the word or phrase the <span class="text-zinc-300">i</span> on a LoRA slider inserts into the prompt.
|
|
</p>
|
|
</div>
|
|
<p v-if="loraRowsLoading" class="text-sm text-zinc-500">Loading LoRAs…</p>
|
|
<p v-else-if="!loraRows.length" class="text-sm text-zinc-500">No LoRA files found on Comfy yet.</p>
|
|
<div
|
|
v-for="row in loraRows"
|
|
:key="row.key"
|
|
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>
|
|
</div>
|
|
<div class="flex w-full flex-col gap-2 sm:w-56">
|
|
<input
|
|
v-model="row.draft"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
:placeholder="row.placeholder"
|
|
maxlength="24"
|
|
@change="saveLoraAlias(row)"
|
|
>
|
|
<input
|
|
v-model="row.trigger"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Activation word"
|
|
maxlength="240"
|
|
@change="saveLoraTrigger(row)"
|
|
>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-8 space-y-4">
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">Keep prompts</h3>
|
|
<p class="mt-1 text-sm text-zinc-400">
|
|
Saved snippets for the + button next to the studio prompt. Video and image lists are separate.
|
|
</p>
|
|
</div>
|
|
<div v-for="kind in keepKinds" :key="kind.id" class="space-y-2">
|
|
<p class="text-xs font-medium uppercase tracking-wide text-zinc-500">{{ kind.label }}</p>
|
|
<div
|
|
v-for="item in keepPrompts[kind.id]"
|
|
:key="item.id"
|
|
class="rounded-2xl border border-white/10 bg-zinc-950/50 p-3 space-y-2"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
v-model="item.label"
|
|
class="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Short name"
|
|
maxlength="40"
|
|
@change="saveKeepKind(kind.id)"
|
|
>
|
|
<button type="button" class="shrink-0 text-xs text-red-300 hover:text-red-200" @click="removeKeepItem(kind.id, item.id)">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
v-model="item.text"
|
|
rows="3"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Text added to the prompt…"
|
|
maxlength="500"
|
|
@change="saveKeepKind(kind.id)"
|
|
/>
|
|
</div>
|
|
<p v-if="!keepPrompts[kind.id].length" class="text-xs text-zinc-600">None yet.</p>
|
|
<form class="space-y-2 rounded-2xl border border-dashed border-white/15 p-3" @submit.prevent="addKeepItem(kind.id)">
|
|
<input
|
|
v-model="newKeep[kind.id].label"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
:placeholder="kind.id === 'video' ? 'e.g. Locked camera' : 'e.g. Soft daylight'"
|
|
maxlength="40"
|
|
>
|
|
<textarea
|
|
v-model="newKeep[kind.id].text"
|
|
rows="2"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Snippet…"
|
|
maxlength="500"
|
|
/>
|
|
<button type="submit" class="rounded-xl bg-white/10 px-3 py-2 text-xs font-semibold text-white hover:bg-white/15">
|
|
Add {{ kind.label.toLowerCase() }} snippet
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mt-8 space-y-3">
|
|
<div>
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider text-zinc-500">Prompt helper</h3>
|
|
<p class="mt-1 text-sm text-zinc-400">
|
|
Instruction sets sent to Beast Qwen VL with your still and draft. Use these later for multi-shot video scripts.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
v-for="preset in promptPresets"
|
|
:key="preset.id"
|
|
class="rounded-2xl border border-white/10 bg-zinc-950/50 p-4 space-y-2"
|
|
>
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
<p class="text-sm font-medium text-zinc-200">
|
|
{{ preset.name }}
|
|
<span v-if="preset.builtin" class="ml-2 text-[10px] uppercase tracking-wide text-zinc-500">Built-in</span>
|
|
</p>
|
|
<button
|
|
v-if="!preset.builtin"
|
|
type="button"
|
|
class="text-xs text-red-300 hover:text-red-200"
|
|
@click="removePreset(preset.id)"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<p v-if="preset.description" class="text-xs text-zinc-500">{{ preset.description }}</p>
|
|
<template v-if="!preset.builtin">
|
|
<input
|
|
v-model="preset.name"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Name"
|
|
@change="savePreset(preset)"
|
|
>
|
|
<textarea
|
|
v-model="preset.systemPrompt"
|
|
rows="5"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Instruction set…"
|
|
@change="savePreset(preset)"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
<form class="space-y-2 rounded-2xl border border-dashed border-white/15 p-4" @submit.prevent="addPreset">
|
|
<p class="text-xs font-medium uppercase tracking-wide text-zinc-500">New instruction set</p>
|
|
<input
|
|
v-model="newPresetName"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Name, e.g. Multi-shot tavern script"
|
|
>
|
|
<textarea
|
|
v-model="newPresetPrompt"
|
|
rows="4"
|
|
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
|
placeholder="Tell Qwen VL how to rewrite the draft. You can add shot-script rules here later."
|
|
/>
|
|
<button type="submit" class="rounded-xl bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950">Add instruction set</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defaultLoraFilenameKey, isFilenameSystemLora } from '~/utils/outputNames'
|
|
import { loraDisplayName, loraIdentityKey } from '~/utils/loras'
|
|
import {
|
|
KEEP_PROMPT_MAX,
|
|
emptyKeepPrompts,
|
|
normalizeKeepPrompts,
|
|
sanitizeKeepPromptLabel,
|
|
sanitizeKeepPromptText,
|
|
type KeepPromptKind,
|
|
type KeepPromptLists
|
|
} from '~/utils/keepPrompts'
|
|
|
|
export interface SettingsFolder {
|
|
id: string
|
|
name: string
|
|
createdAt: number
|
|
thumbnailDefault: boolean
|
|
protected: boolean
|
|
unlocked: boolean
|
|
}
|
|
|
|
const props = defineProps<{
|
|
folders: SettingsFolder[]
|
|
authMode?: string
|
|
username?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
close: []
|
|
updated: [payload: unknown]
|
|
error: [message: string]
|
|
renamed: [username: string]
|
|
}>()
|
|
|
|
const newName = ref('')
|
|
const newPresetName = ref('')
|
|
const newPresetPrompt = ref('')
|
|
const keepKinds: Array<{ id: KeepPromptKind; label: string }> = [
|
|
{ id: 'video', label: 'Video' },
|
|
{ id: 'image', label: 'Image' }
|
|
]
|
|
const keepPrompts = ref<KeepPromptLists>(emptyKeepPrompts())
|
|
const newKeep = reactive<Record<KeepPromptKind, { label: string; text: string }>>({
|
|
video: { label: '', text: '' },
|
|
image: { label: '', text: '' }
|
|
})
|
|
const promptPresets = ref<Array<{ id: string; name: string; description?: string; builtin?: boolean; systemPrompt?: string }>>([])
|
|
const loraRowsLoading = ref(true)
|
|
const loraRows = ref<Array<{ key: string; file: string; kind: 'image' | 'video' | 'both'; draft: string; trigger: string; placeholder: string }>>([])
|
|
const loginUser = ref(props.username || '')
|
|
const loginCurrent = ref('')
|
|
const loginNext = ref('')
|
|
const drafts = reactive<Record<string, { name: string; protect: boolean; password: string; currentPassword: string }>>({})
|
|
const storageLoading = ref(true)
|
|
const storageError = ref('')
|
|
const gpuSleeping = ref(false)
|
|
const gpuWaking = ref(false)
|
|
const gpuError = ref(false)
|
|
const gpuMessage = ref('')
|
|
const storage = ref<{
|
|
libraryBytes: number
|
|
breakdown: { clips: number; stills: number; tmp: number; other: number }
|
|
volume: { ok: boolean; totalBytes: number | null; usedBytes: number | null; freeBytes: number | null; overlay: boolean }
|
|
} | null>(null)
|
|
|
|
function formatBytes(bytes: number) {
|
|
const n = Math.max(0, Number(bytes) || 0)
|
|
if (n < 1024) return `${Math.round(n)} B`
|
|
const units = ['KB', 'MB', 'GB', 'TB']
|
|
let value = n / 1024
|
|
let unit = 0
|
|
while (value >= 1024 && unit < units.length - 1) {
|
|
value /= 1024
|
|
unit += 1
|
|
}
|
|
const digits = value >= 10 || units[unit] === 'KB' ? 0 : 1
|
|
return `${value.toFixed(digits)} ${units[unit]}`
|
|
}
|
|
|
|
const storageLine = computed(() => {
|
|
if (!storage.value) return ''
|
|
const library = `Library ${formatBytes(storage.value.libraryBytes)}`
|
|
const volume = storage.value.volume
|
|
if (!volume.ok || volume.freeBytes == null || volume.totalBytes == null) {
|
|
return `${library} · free space unavailable`
|
|
}
|
|
const free = `${formatBytes(volume.freeBytes)} free of ${formatBytes(volume.totalBytes)}`
|
|
return volume.overlay ? `${library} · ${free} on the container disk` : `${library} · ${free}`
|
|
})
|
|
|
|
const storageBreakdown = computed(() => {
|
|
if (!storage.value) return ''
|
|
const { clips, stills, tmp } = storage.value.breakdown
|
|
const parts = [
|
|
clips ? `Clips ${formatBytes(clips)}` : '',
|
|
stills ? `Stills ${formatBytes(stills)}` : '',
|
|
tmp ? `Temp ${formatBytes(tmp)}` : ''
|
|
].filter(Boolean)
|
|
return parts.join(' · ')
|
|
})
|
|
|
|
const storageNote = computed(() => {
|
|
if (!storage.value) return ''
|
|
return storage.value.volume.overlay
|
|
? "This account's clips, stills, thumbs, and temp. Free space is the container disk, not a mounted volume."
|
|
: "This account's clips, stills, thumbs, and temp. Volume free space is shared."
|
|
})
|
|
|
|
function onKey(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') emit('close')
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('keydown', onKey)
|
|
void loadPresets()
|
|
void loadStorage()
|
|
void loadLoraKeys()
|
|
})
|
|
onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
|
|
|
|
watch(() => props.folders, (folders) => {
|
|
for (const folder of folders) {
|
|
if (!drafts[folder.id]) {
|
|
drafts[folder.id] = {
|
|
name: folder.name,
|
|
protect: folder.protected,
|
|
password: '',
|
|
currentPassword: ''
|
|
}
|
|
} else {
|
|
drafts[folder.id].name = folder.name
|
|
}
|
|
}
|
|
}, { immediate: true, deep: true })
|
|
|
|
watch(() => props.username, (value) => {
|
|
if (value) loginUser.value = value
|
|
})
|
|
|
|
async function saveLogin() {
|
|
try {
|
|
const data = await $fetch<{ username: string }>('/api/auth/credentials', {
|
|
method: 'PUT',
|
|
body: {
|
|
username: loginUser.value,
|
|
password: loginNext.value,
|
|
currentPassword: loginCurrent.value
|
|
}
|
|
})
|
|
loginCurrent.value = ''
|
|
loginNext.value = ''
|
|
emit('renamed', data.username)
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not update site login')
|
|
}
|
|
}
|
|
|
|
async function addFolder() {
|
|
const name = newName.value.trim()
|
|
if (!name) return
|
|
try {
|
|
await $fetch('/api/library/folders', { method: 'POST', body: { name } })
|
|
newName.value = ''
|
|
emit('updated', await $fetch('/api/library'))
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || error?.statusMessage || 'Could not create folder')
|
|
}
|
|
}
|
|
|
|
interface PromptPresetRow {
|
|
id: string
|
|
name: string
|
|
description?: string
|
|
builtin?: boolean
|
|
systemPrompt?: string
|
|
}
|
|
|
|
async function loadPresets() {
|
|
const data = await $fetch<{ presets?: PromptPresetRow[] }>('/api/prompt/presets').catch(() => ({ presets: [] }))
|
|
promptPresets.value = data.presets || []
|
|
}
|
|
|
|
async function loadStorage() {
|
|
storageLoading.value = true
|
|
storageError.value = ''
|
|
try {
|
|
storage.value = await $fetch('/api/settings/storage')
|
|
} catch (error: any) {
|
|
storage.value = null
|
|
storageError.value = error?.data?.statusMessage || error?.statusMessage || 'Could not read storage'
|
|
} finally {
|
|
storageLoading.value = false
|
|
}
|
|
}
|
|
|
|
async function sleepGpu() {
|
|
if (gpuSleeping.value || gpuWaking.value) return
|
|
gpuSleeping.value = true
|
|
gpuError.value = false
|
|
gpuMessage.value = 'Stopping Comfy on the GPU…'
|
|
try {
|
|
await $fetch('/api/comfy/sleep', { method: 'POST' })
|
|
gpuMessage.value = 'Comfy is stopped. VRAM is free until you generate or wake the GPU.'
|
|
} catch (error: any) {
|
|
gpuError.value = true
|
|
gpuMessage.value = error?.data?.statusMessage || error?.statusMessage || 'Could not stop Comfy.'
|
|
} finally {
|
|
gpuSleeping.value = false
|
|
}
|
|
}
|
|
|
|
async function wakeGpu() {
|
|
if (gpuWaking.value || gpuSleeping.value) return
|
|
gpuWaking.value = true
|
|
gpuError.value = false
|
|
gpuMessage.value = 'Starting Comfy on the GPU…'
|
|
try {
|
|
await $fetch('/api/comfy/wake', { method: 'POST' })
|
|
gpuMessage.value = 'Wake sent. The first job can still take a couple of minutes if Comfy is cold.'
|
|
} catch (error: any) {
|
|
gpuError.value = true
|
|
gpuMessage.value = error?.data?.statusMessage || error?.statusMessage || 'Could not wake the GPU.'
|
|
} finally {
|
|
gpuWaking.value = false
|
|
}
|
|
}
|
|
|
|
async function loadLoraKeys() {
|
|
loraRowsLoading.value = true
|
|
try {
|
|
const listed = await $fetch<{ image?: string[]; video?: string[] }>('/api/loras').catch(() => ({ image: [], video: [] }))
|
|
const library = await $fetch<{
|
|
loraAliases?: Record<string, string>
|
|
loraTriggers?: Record<string, string>
|
|
keepPrompts?: KeepPromptLists
|
|
}>('/api/library?light=1').catch(() => ({ loraAliases: {}, loraTriggers: {}, keepPrompts: emptyKeepPrompts() }))
|
|
keepPrompts.value = normalizeKeepPrompts(library.keepPrompts)
|
|
const aliases = library.loraAliases || {}
|
|
const triggers = library.loraTriggers || {}
|
|
const map = new Map<string, { key: string; file: string; kind: 'image' | 'video' | 'both'; draft: string; trigger: string; placeholder: string }>()
|
|
const add = (name: string, kind: 'image' | 'video') => {
|
|
if (isFilenameSystemLora(name)) return
|
|
const key = loraIdentityKey(name)
|
|
if (!key) return
|
|
const existing = map.get(key)
|
|
if (existing) {
|
|
if (existing.kind !== kind) existing.kind = 'both'
|
|
return
|
|
}
|
|
map.set(key, {
|
|
key,
|
|
file: loraDisplayName(name),
|
|
kind,
|
|
draft: aliases[key] || '',
|
|
trigger: triggers[key] || '',
|
|
placeholder: defaultLoraFilenameKey(name)
|
|
})
|
|
}
|
|
for (const name of listed.image || []) add(name, 'image')
|
|
for (const name of listed.video || []) add(name, 'video')
|
|
loraRows.value = [...map.values()].sort((a, b) => a.file.localeCompare(b.file))
|
|
} finally {
|
|
loraRowsLoading.value = false
|
|
}
|
|
}
|
|
|
|
async function saveKeepKind(kind: KeepPromptKind) {
|
|
try {
|
|
const data = await $fetch<{ keepPrompts?: KeepPromptLists }>('/api/library/keep-prompts', {
|
|
method: 'PUT',
|
|
body: { kind, items: keepPrompts.value[kind] }
|
|
})
|
|
keepPrompts.value = normalizeKeepPrompts(data.keepPrompts)
|
|
emit('updated', data)
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not save keep prompts')
|
|
}
|
|
}
|
|
|
|
function addKeepItem(kind: KeepPromptKind) {
|
|
const text = sanitizeKeepPromptText(newKeep[kind].text)
|
|
if (!text) {
|
|
emit('error', 'Snippet text is required')
|
|
return
|
|
}
|
|
if (keepPrompts.value[kind].length >= KEEP_PROMPT_MAX) {
|
|
emit('error', `At most ${KEEP_PROMPT_MAX} snippets per list`)
|
|
return
|
|
}
|
|
keepPrompts.value[kind] = [
|
|
...keepPrompts.value[kind],
|
|
{
|
|
id: crypto.randomUUID(),
|
|
label: sanitizeKeepPromptLabel(newKeep[kind].label, text),
|
|
text
|
|
}
|
|
]
|
|
newKeep[kind].label = ''
|
|
newKeep[kind].text = ''
|
|
void saveKeepKind(kind)
|
|
}
|
|
|
|
function removeKeepItem(kind: KeepPromptKind, id: string) {
|
|
keepPrompts.value[kind] = keepPrompts.value[kind].filter(item => item.id !== id)
|
|
void saveKeepKind(kind)
|
|
}
|
|
|
|
async function saveLoraAlias(row: { key: string; draft: string }) {
|
|
try {
|
|
emit('updated', await $fetch('/api/library/lora-aliases', {
|
|
method: 'PUT',
|
|
body: { key: row.key, alias: row.draft }
|
|
}))
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not save LoRA filename key')
|
|
}
|
|
}
|
|
|
|
async function saveLoraTrigger(row: { key: string; trigger: string }) {
|
|
try {
|
|
emit('updated', await $fetch('/api/library/lora-triggers', {
|
|
method: 'PUT',
|
|
body: { key: row.key, trigger: row.trigger }
|
|
}))
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not save LoRA activation word')
|
|
}
|
|
}
|
|
|
|
async function addPreset() {
|
|
const name = newPresetName.value.trim()
|
|
const systemPrompt = newPresetPrompt.value.trim()
|
|
if (!name || !systemPrompt) {
|
|
emit('error', 'Name and instruction text are required')
|
|
return
|
|
}
|
|
try {
|
|
const data = await $fetch<{ presets?: PromptPresetRow[] }>('/api/prompt/presets', {
|
|
method: 'POST',
|
|
body: { name, systemPrompt }
|
|
})
|
|
promptPresets.value = data.presets || []
|
|
newPresetName.value = ''
|
|
newPresetPrompt.value = ''
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not save instruction set')
|
|
}
|
|
}
|
|
|
|
async function savePreset(preset: PromptPresetRow) {
|
|
if (preset.builtin) return
|
|
try {
|
|
const data = await $fetch<{ presets?: PromptPresetRow[] }>(`/api/prompt/presets/${preset.id}`, {
|
|
method: 'PATCH',
|
|
body: { name: preset.name, systemPrompt: preset.systemPrompt, description: preset.description }
|
|
})
|
|
promptPresets.value = data.presets || promptPresets.value
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not update instruction set')
|
|
}
|
|
}
|
|
|
|
async function removePreset(id: string) {
|
|
if (!confirm('Delete this instruction set?')) return
|
|
try {
|
|
const data = await $fetch<{ presets?: PromptPresetRow[] }>(`/api/prompt/presets/${id}`, { method: 'DELETE' })
|
|
promptPresets.value = data.presets || []
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not delete instruction set')
|
|
}
|
|
}
|
|
|
|
async function rename(folder: SettingsFolder) {
|
|
const name = drafts[folder.id]?.name?.trim()
|
|
if (!name || name === folder.name) return
|
|
try {
|
|
emit('updated', await $fetch(`/api/library/folders/${folder.id}`, { method: 'PATCH', body: { name } }))
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not rename folder')
|
|
}
|
|
}
|
|
|
|
async function setThumbnail(folder: SettingsFolder, thumbnailDefault: boolean) {
|
|
try {
|
|
emit('updated', await $fetch(`/api/library/folders/${folder.id}`, {
|
|
method: 'PATCH',
|
|
body: { thumbnailDefault }
|
|
}))
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not update thumbnail default')
|
|
}
|
|
}
|
|
|
|
function toggleProtect(folder: SettingsFolder, on: boolean) {
|
|
drafts[folder.id].protect = on
|
|
if (!on && folder.protected) {
|
|
drafts[folder.id].password = ''
|
|
}
|
|
}
|
|
|
|
async function savePassword(folder: SettingsFolder) {
|
|
const draft = drafts[folder.id]
|
|
try {
|
|
if (!draft.protect && folder.protected) {
|
|
emit('updated', await $fetch(`/api/library/folders/${folder.id}`, {
|
|
method: 'PATCH',
|
|
body: { password: '', currentPassword: draft.currentPassword }
|
|
}))
|
|
} else if (draft.protect) {
|
|
if (!folder.protected && !draft.password.trim()) {
|
|
emit('error', 'Set a password with at least 4 characters.')
|
|
return
|
|
}
|
|
if (!folder.protected || draft.password.trim()) {
|
|
emit('updated', await $fetch(`/api/library/folders/${folder.id}`, {
|
|
method: 'PATCH',
|
|
body: { password: draft.password, currentPassword: draft.currentPassword }
|
|
}))
|
|
}
|
|
}
|
|
draft.password = ''
|
|
draft.currentPassword = ''
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not update folder password')
|
|
}
|
|
}
|
|
|
|
async function remove(folder: SettingsFolder) {
|
|
if (!confirm(`Delete “${folder.name}” and everything inside it?`)) return
|
|
try {
|
|
emit('updated', await $fetch(`/api/library/folders/${folder.id}`, { method: 'DELETE' }))
|
|
} catch (error: any) {
|
|
emit('error', error?.data?.statusMessage || 'Could not delete folder')
|
|
}
|
|
}
|
|
</script>
|