290 lines
10 KiB
Vue
290 lines
10 KiB
Vue
<template>
|
|
<header class="sticky top-0 z-20 border-b border-white/5 bg-zinc-950/90 sm:bg-zinc-950/80 sm:backdrop-blur-md">
|
|
<div
|
|
class="mx-auto flex items-center justify-between px-4 py-4 sm:px-6"
|
|
:class="wide ? 'max-w-[90rem]' : 'max-w-7xl'"
|
|
>
|
|
<div class="relative flex items-center gap-3">
|
|
<NuxtLink
|
|
to="/"
|
|
class="flex h-10 w-10 items-center justify-center rounded-xl bg-amber-400 font-display font-extrabold text-zinc-950"
|
|
>A</NuxtLink>
|
|
<div>
|
|
<button
|
|
type="button"
|
|
class="flex items-center gap-1.5 text-left"
|
|
:aria-expanded="menuOpen"
|
|
aria-haspopup="menu"
|
|
@click.stop="toggleMenu"
|
|
>
|
|
<span class="font-display text-xl font-bold leading-none">{{ instanceName }}</span>
|
|
<svg class="h-4 w-4 text-zinc-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.24a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<p class="hidden text-[11px] uppercase tracking-[0.22em] text-zinc-500 sm:block">{{ subtitle }}</p>
|
|
</div>
|
|
<div
|
|
v-if="menuOpen"
|
|
class="absolute left-0 top-full z-30 mt-2 w-52 rounded-2xl border border-white/10 bg-zinc-950/95 p-1 shadow-xl shadow-black/40"
|
|
role="menu"
|
|
@click.stop
|
|
>
|
|
<NuxtLink
|
|
v-if="current !== 'studio'"
|
|
to="/"
|
|
class="block rounded-xl px-3 py-2 text-sm text-zinc-200 hover:bg-white/5 hover:text-white"
|
|
role="menuitem"
|
|
@click="menuOpen = false"
|
|
>Studio</NuxtLink>
|
|
<NuxtLink
|
|
to="/library"
|
|
class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
|
|
:class="current === 'library' ? 'text-amber-100' : 'text-zinc-200'"
|
|
role="menuitem"
|
|
@click="menuOpen = false"
|
|
>Library</NuxtLink>
|
|
<NuxtLink
|
|
to="/director"
|
|
class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
|
|
:class="current === 'director' ? 'text-amber-100' : 'text-zinc-200'"
|
|
role="menuitem"
|
|
@click="menuOpen = false"
|
|
>Director</NuxtLink>
|
|
<button
|
|
type="button"
|
|
class="block w-full rounded-xl px-3 py-2 text-left text-sm hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50"
|
|
:class="gpuWaking ? 'text-amber-100' : 'text-zinc-200 hover:text-white'"
|
|
:disabled="gpuWaking || gpuSleeping"
|
|
:title="gpuError || 'Start Comfy on the GPU'"
|
|
role="menuitem"
|
|
@click="pokeGpu"
|
|
>{{ gpuWaking ? 'Poking…' : 'Poke' }}</button>
|
|
<button
|
|
type="button"
|
|
class="block w-full rounded-xl px-3 py-2 text-left text-sm hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-50"
|
|
:class="gpuSleeping ? 'text-amber-100' : 'text-zinc-200 hover:text-white'"
|
|
:disabled="gpuSleeping || gpuWaking || gpuBusy"
|
|
:title="gpuError || (gpuBusy ? 'Cancel the running job first' : 'Stop Comfy on the GPU to free VRAM. Does not shut the PC down.')"
|
|
role="menuitem"
|
|
@click="sleepGpu"
|
|
>{{ gpuSleeping ? 'Sleeping…' : 'Sleep' }}</button>
|
|
<div class="my-1 border-t border-white/10" />
|
|
<NuxtLink
|
|
to="/settings"
|
|
class="block rounded-xl px-3 py-2 text-sm hover:bg-white/5 hover:text-white"
|
|
:class="current === 'settings' ? 'text-amber-100' : 'text-zinc-200'"
|
|
role="menuitem"
|
|
@click="menuOpen = false"
|
|
>Settings</NuxtLink>
|
|
<a
|
|
v-if="authEnabled"
|
|
href="/api/auth/logout"
|
|
class="block rounded-xl px-3 py-2 text-sm text-zinc-400 hover:bg-white/5 hover:text-white"
|
|
role="menuitem"
|
|
>Sign out</a>
|
|
<p v-if="gpuError" class="px-3 py-1.5 text-[11px] text-red-300">{{ gpuError }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-sm">
|
|
<span
|
|
class="hidden items-center gap-2 rounded-full border px-3 py-1 sm:inline-flex"
|
|
:class="rigBadge.className"
|
|
:title="rigBadge.title"
|
|
>
|
|
<span class="h-2 w-2 rounded-full" :class="rigBadge.dot" />
|
|
{{ rigBadge.label }}
|
|
</span>
|
|
<NuxtLink
|
|
to="/queue"
|
|
class="rounded-full border px-3 py-1 hover:border-amber-300/50 hover:text-white"
|
|
:class="current === 'queue' || queueCount
|
|
? 'border-amber-300/40 text-amber-100'
|
|
: 'border-white/10 text-zinc-300'"
|
|
>
|
|
Queue<span v-if="queueCount" class="ml-1.5 text-amber-200">{{ queueCount }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
subtitle: string
|
|
current?: 'studio' | 'library' | 'director' | 'queue' | 'settings'
|
|
wide?: boolean
|
|
queueCount?: number
|
|
}>(), {
|
|
current: 'studio',
|
|
wide: false,
|
|
queueCount: 0
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
gpu: []
|
|
}>()
|
|
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const instanceName = ref(String(runtimeConfig.public.instanceName || 'AIGen'))
|
|
const authEnabled = ref(false)
|
|
const menuOpen = ref(false)
|
|
const gpuWaking = ref(false)
|
|
const gpuSleeping = ref(false)
|
|
const gpuError = ref('')
|
|
const comfyOk = ref(false)
|
|
const imageOk = ref(false)
|
|
const comfyBusy = ref(false)
|
|
const imageBusy = ref(false)
|
|
const comfyAsleep = ref(false)
|
|
let healthTimer: ReturnType<typeof setInterval> | null = null
|
|
|
|
const gpuBusy = computed(() => comfyBusy.value || imageBusy.value)
|
|
const rigBadge = computed(() => {
|
|
if (gpuSleeping.value) {
|
|
return {
|
|
label: 'Stopping…',
|
|
className: 'border-amber-400/40 text-amber-200',
|
|
dot: 'bg-amber-400 animate-pulse',
|
|
title: 'Stopping Comfy on the GPU'
|
|
}
|
|
}
|
|
if (gpuWaking.value) {
|
|
return {
|
|
label: 'Starting…',
|
|
className: 'border-amber-400/40 text-amber-200',
|
|
dot: 'bg-amber-400 animate-pulse',
|
|
title: 'Starting Comfy Desktop on the GPU'
|
|
}
|
|
}
|
|
if (!comfyOk.value && !imageOk.value) {
|
|
return {
|
|
label: 'Offline',
|
|
className: 'border-red-400/30 text-red-300',
|
|
dot: 'bg-red-400',
|
|
title: comfyAsleep.value
|
|
? 'Desktop GPU is asleep. Open the menu and click Poke, or generate to start Comfy.'
|
|
: 'Desktop GPU is unreachable'
|
|
}
|
|
}
|
|
if (gpuBusy.value) {
|
|
return {
|
|
label: 'Live',
|
|
className: 'border-amber-400/40 text-amber-200',
|
|
dot: 'bg-amber-400 animate-pulse',
|
|
title: 'Desktop GPU is rendering'
|
|
}
|
|
}
|
|
return {
|
|
label: 'Ready',
|
|
className: 'border-emerald-400/30 text-emerald-300',
|
|
dot: 'bg-emerald-400',
|
|
title: 'Desktop GPU is free'
|
|
}
|
|
})
|
|
|
|
function toggleMenu() {
|
|
menuOpen.value = !menuOpen.value
|
|
}
|
|
|
|
function closeMenu() {
|
|
menuOpen.value = false
|
|
}
|
|
|
|
function applyHealth(health: {
|
|
comfy?: { ok?: boolean; busy?: boolean; asleep?: boolean }
|
|
imageComfy?: { ok?: boolean; busy?: boolean }
|
|
} | null | undefined) {
|
|
const nextComfy = Boolean(health?.comfy?.ok)
|
|
const nextImage = Boolean(health?.imageComfy?.ok)
|
|
comfyOk.value = nextComfy
|
|
imageOk.value = nextImage
|
|
comfyBusy.value = Boolean(nextComfy && health?.comfy?.busy)
|
|
imageBusy.value = Boolean(nextImage && health?.imageComfy?.busy)
|
|
comfyAsleep.value = Boolean(health?.comfy?.asleep) && !nextComfy && !nextImage
|
|
}
|
|
|
|
async function pollHealth() {
|
|
const health = await $fetch<{
|
|
comfy?: { ok?: boolean; busy?: boolean; asleep?: boolean }
|
|
imageComfy?: { ok?: boolean; busy?: boolean }
|
|
}>('/api/health').catch(() => ({ comfy: { ok: false, busy: false } }))
|
|
applyHealth(health)
|
|
}
|
|
|
|
async function pokeGpu() {
|
|
if (gpuWaking.value || gpuSleeping.value) return
|
|
gpuWaking.value = true
|
|
gpuError.value = ''
|
|
try {
|
|
await $fetch('/api/comfy/wake', { method: 'POST' })
|
|
const deadline = Date.now() + 180_000
|
|
while (Date.now() < deadline) {
|
|
await pollHealth()
|
|
emit('gpu')
|
|
if (comfyOk.value || imageOk.value) return
|
|
await new Promise(resolve => setTimeout(resolve, 3000))
|
|
}
|
|
gpuError.value = 'Started Comfy but it is not answering yet. If the instance picker is showing, open ComfyUI (1).'
|
|
} catch (error: any) {
|
|
gpuError.value = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Could not wake the GPU.'
|
|
} finally {
|
|
gpuWaking.value = false
|
|
emit('gpu')
|
|
}
|
|
}
|
|
|
|
async function sleepGpu() {
|
|
if (gpuSleeping.value || gpuWaking.value || gpuBusy.value) return
|
|
gpuSleeping.value = true
|
|
gpuError.value = ''
|
|
try {
|
|
await $fetch('/api/comfy/sleep', { method: 'POST' })
|
|
comfyOk.value = false
|
|
imageOk.value = false
|
|
comfyAsleep.value = true
|
|
await pollHealth()
|
|
} catch (error: any) {
|
|
gpuError.value = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Could not stop Comfy.'
|
|
} finally {
|
|
gpuSleeping.value = false
|
|
emit('gpu')
|
|
}
|
|
}
|
|
|
|
function onWindowClick() {
|
|
closeMenu()
|
|
}
|
|
|
|
function onKey(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') closeMenu()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
window.addEventListener('click', onWindowClick)
|
|
window.addEventListener('keydown', onKey)
|
|
const [health, me] = await Promise.all([
|
|
$fetch<{ comfy?: { ok?: boolean; busy?: boolean; asleep?: boolean }; imageComfy?: { ok?: boolean; busy?: boolean } }>('/api/health').catch(() => ({ comfy: { ok: false, busy: false } })),
|
|
$fetch<{ authEnabled?: boolean; instanceName?: string }>('/api/auth/me').catch(() => ({}))
|
|
])
|
|
applyHealth(health)
|
|
authEnabled.value = Boolean(me.authEnabled)
|
|
if (me.instanceName) instanceName.value = me.instanceName
|
|
healthTimer = setInterval(() => {
|
|
if (typeof document !== 'undefined' && document.hidden) return
|
|
void pollHealth()
|
|
}, 15000)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('click', onWindowClick)
|
|
window.removeEventListener('keydown', onKey)
|
|
if (healthTimer) clearInterval(healthTimer)
|
|
healthTimer = null
|
|
})
|
|
</script>
|