Add composable to manage ComfyUI-Manager task queue (#2970)

src/composables/useManagerQueue.ts

@@ -0,0 +1,93 @@
+import { useEventListener, whenever } from '@vueuse/core'
+import { computed, readonly, ref } from 'vue'
+
+import { api } from '@/scripts/api'
+
+type QueuedTask<T> = {
+  task: () => Promise<T>
+  onComplete?: () => void
+}
+
+const MANAGER_WS_MSG_TYPE = 'cm-queue-status'
+
+enum ManagerWsQueueStatus {
+  DONE = 'done',
+  IN_PROGRESS = 'in_progress'
+}
+
+export const useManagerQueue = () => {
+  const clientQueueItems = ref<QueuedTask<unknown>[]>([])
+  const clientQueueLength = computed(() => clientQueueItems.value.length)
+  const nextOnCompleted = ref<(() => void) | undefined>()
+
+  const serverQueueStatus = ref<ManagerWsQueueStatus>(ManagerWsQueueStatus.DONE)
+  const isServerIdle = computed(
+    () => serverQueueStatus.value === ManagerWsQueueStatus.DONE
+  )
+
+  const allTasksDone = computed(
+    () => isServerIdle.value && clientQueueLength.value === 0
+  )
+  const nextTaskReady = computed(
+    () => isServerIdle.value && clientQueueLength.value > 0
+  )
+
+  const cleanupListener = useEventListener(
+    api,
+    MANAGER_WS_MSG_TYPE,
+    (event: CustomEvent<{ status: ManagerWsQueueStatus }>) => {
+      if (event?.type === MANAGER_WS_MSG_TYPE && event.detail?.status) {
+        serverQueueStatus.value = event.detail.status
+      }
+    }
+  )
+
+  const startNextTask = () => {
+    const nextTask = clientQueueItems.value.shift()
+    if (!nextTask) return
+
+    const { task, onComplete } = nextTask
+
+    task()
+      .then(() => {
+        // Set the task's onComplete to be executed the next time the server is idle
+        nextOnCompleted.value = onComplete
+      })
+      .catch((e) => {
+        const message = `Error enqueuing task for ComfyUI Manager: ${e}`
+        console.error(message)
+      })
+  }
+
+  const enqueueTask = <T>(task: QueuedTask<T>): void => {
+    clientQueueItems.value.push(task)
+  }
+
+  const clearQueue = () => {
+    nextOnCompleted.value = undefined
+    clientQueueItems.value = []
+  }
+
+  const cleanup = () => {
+    clearQueue()
+    cleanupListener()
+  }
+
+  whenever(nextTaskReady, startNextTask)
+  whenever(isServerIdle, () => {
+    if (nextOnCompleted.value) {
+      nextOnCompleted.value()
+      nextOnCompleted.value = undefined
+    }
+  })
+
+  return {
+    allTasksDone,
+    statusMessage: readonly(serverQueueStatus),
+    queueLength: clientQueueLength,
+
+    enqueueTask,
+    clearQueue,
+    cleanup
+  }
+}