easydiffusion/ui/media/js/engine.js

/** SD-UI Backend control and classes.
 */
(function () { "use strict";
    const RETRY_DELAY_IF_BUFFER_IS_EMPTY = 1000 // ms
    const RETRY_DELAY_IF_SERVER_IS_BUSY = 30 * 1000 // ms, status_code 503, already a task running
    const RETRY_DELAY_ON_ERROR = 4000 // ms
    const TASK_STATE_SERVER_UPDATE_DELAY = 1500 // ms
    const SERVER_STATE_VALIDITY_DURATION = 90 * 1000 // ms - 90 seconds to allow ping to timeout more than once before killing tasks.
    const HEALTH_PING_INTERVAL = 5000 // ms
    const IDLE_COOLDOWN = 2500 // ms
    const CONCURRENT_TASK_INTERVAL = 100 // ms

    /** Connects to an endpoint and resumes connection after reaching end of stream until all data is received.
     * Allows closing the connection while the server buffers more data.
     */
    class ChunkedStreamReader {
        #bufferedString = '' // Data received waiting to be read.
        #url
        #fetchOptions
        #response

        constructor(url, initialContent='', options={}) {
            if (typeof url !== 'string' && !(url instanceof String)) {
                throw new Error('url is not a string.')
            }
            if (typeof initialContent !== 'undefined' && typeof initialContent !== 'string') {
                throw new Error('initialContent is not a string.')
            }
            this.#bufferedString = initialContent
            this.#url = url
            this.#fetchOptions = Object.assign({
                headers: {
                    'Content-Type': 'application/json'
                }
            }, options)
            this.onNext = undefined
        }

        get url() {
            if (this.#response.redirected) {
                return this.#response.url
            }
            return this.#url
        }
        get bufferedString() {
            return this.#bufferedString
        }
        get status() {
            this.#response?.status
        }
        get statusText() {
            this.#response?.statusText
        }

        parse(value) {
            if (typeof value === 'undefined') {
                return
            }
            if (!isArrayOrTypedArray(value)) {
                return [value]
            }
            if (value.length === 0) {
                return value
            }
            if (typeof this.textDecoder === 'undefined') {
                this.textDecoder = new TextDecoder()
            }
            return [this.textDecoder.decode(value)]
        }
        onComplete(value) {
            return value
        }
        onError(response) {
            throw new Error(response.statusText)
        }
        onNext({value, done}, response) {
            return {value, done}
        }

        async *[Symbol.asyncIterator]() {
            return this.open()
        }
        async *open() {
            let value = undefined
            let done = undefined
            do {
                if (this.#response) {
                    await asyncDelay(RETRY_DELAY_IF_BUFFER_IS_EMPTY)
                }
                this.#response = await fetch(this.#url, this.#fetchOptions)
                if (!this.#response.ok) {
                    if (this.#response.status === 425) {
                        continue
                    }
                    // Request status indicate failure
                    console.warn('Stream %o stopped unexpectedly.', this.#response)
                    value = await Promise.resolve(this.onError(this.#response))
                    if (typeof value === 'boolean' && value) {
                        continue
                    }
                    return value
                }
                const reader = this.#response.body.getReader()
                done = false
                do {
                    const readState = await reader.read()
                    value = this.parse(readState.value)
                    if (value) {
                        for(let sVal of value) {
                            ({value: sVal, done} = await Promise.resolve(this.onNext({value:sVal, done:readState.done})))
                            yield sVal
                            if (done) {
                                return this.onComplete(sVal)
                            }
                        }
                    }
                    if (done) {
                        return
                    }
                } while(value && !done)
            } while (!done && (this.#response.ok || this.#response.status === 425))
        }
        *readStreamAsJSON(jsonStr, throwOnError) {
            if (typeof jsonStr !== 'string') {
                throw new Error('jsonStr is not a string.')
            }
            do {
                if (this.#bufferedString.length > 0) {
                    // Append new data when required
                    if (jsonStr.length > 0) {
                        jsonStr = this.#bufferedString + jsonStr
                    } else {
                        jsonStr = this.#bufferedString
                    }
                    this.#bufferedString = ''
                }
                if (!jsonStr) {
                    return
                }
                // Find next delimiter
                let lastChunkIdx = jsonStr.indexOf('}{')
                if (lastChunkIdx >= 0) {
                    this.#bufferedString = jsonStr.substring(0, lastChunkIdx + 1)
                    jsonStr = jsonStr.substring(lastChunkIdx + 1)
                } else {
                    this.#bufferedString = jsonStr
                    jsonStr = ''
                }
                if (this.#bufferedString.length <= 0) {
                    return
                }
                // hack for a middleman buffering all the streaming updates, and unleashing them on the poor browser in one shot.
                // this results in having to parse JSON like {"step": 1}{"step": 2}{"step": 3}{"ste...
                // which is obviously invalid and can happen at any point while rendering.
                // So we need to extract only the next {} section
                try { // Try to parse
                    const jsonObj = JSON.parse(this.#bufferedString)
                    this.#bufferedString = jsonStr
                    jsonStr = ''
                    yield jsonObj
                } catch (e) {
                    if (throwOnError) {
                        console.error(`Parsing: "${this.#bufferedString}", Buffer: "${jsonStr}"`)
                    }
                    this.#bufferedString += jsonStr
                    if (e instanceof SyntaxError && !throwOnError) {
                        return
                    }
                    throw e
                }
            } while (this.#bufferedString.length > 0 && this.#bufferedString.indexOf('}') >= 0)
        }
    }

    const EVENT_IDLE = 'idle'
    const EVENT_STATUS_CHANGED = 'statusChange'
    const EVENT_UNHANDLED_REJECTION = 'unhandledRejection'
    const EVENT_TASK_QUEUED = 'taskQueued'
    const EVENT_TASK_START = 'taskStart'
    const EVENT_TASK_END = 'taskEnd'
    const EVENT_TASK_ERROR = 'task_error'
    const EVENT_UNEXPECTED_RESPONSE = 'unexpectedResponse'
    const EVENTS_TYPES = [
        EVENT_IDLE,
        EVENT_STATUS_CHANGED,
        EVENT_UNHANDLED_REJECTION,

        EVENT_TASK_QUEUED,
        EVENT_TASK_START,
        EVENT_TASK_END,
        EVENT_TASK_ERROR,

        EVENT_UNEXPECTED_RESPONSE,
    ]
    Object.freeze(EVENTS_TYPES)
    const eventSource = new GenericEventSource(EVENTS_TYPES)

    function setServerStatus(msgType, msg) {
        return eventSource.fireEvent(EVENT_STATUS_CHANGED, {type: msgType, message: msg})
    }

    const ServerStates = {
        init: 'Init',
        loadingModel: 'LoadingModel',
        online: 'Online',
        rendering: 'Rendering',
        unavailable: 'Unavailable',
    }
    Object.freeze(ServerStates)

    let sessionId = Date.now()
    let serverState = {'status': ServerStates.unavailable, 'time': Date.now()}

    async function healthCheck() {
        if (Date.now() < serverState.time + (HEALTH_PING_INTERVAL / 2) && isServerAvailable()) {
            // Ping confirmed online less than half of HEALTH_PING_INTERVAL ago.
            return true
        }
        if (Date.now() >= serverState.time + SERVER_STATE_VALIDITY_DURATION) {
            console.warn('WARNING! SERVER_STATE_VALIDITY_DURATION has elapsed since the last Ping completed.')
        }
        try {
            let res = undefined
            if (typeof sessionId !== 'undefined') {
                res = await fetch('/ping?session_id=' + sessionId)
            } else {
                res = await fetch('/ping')
            }
            serverState = await res.json()
            if (typeof serverState !== 'object' || typeof serverState.status !== 'string') {
                console.error(`Server reply didn't contain a state value.`)
                serverState = {'status': ServerStates.unavailable, 'time': Date.now()}
                setServerStatus('error', 'offline')
                return false
            }
            // Set status
            switch(serverState.status) {
                case ServerStates.init:
                    // Wait for init to complete before updating status.
                    break
                case ServerStates.online:
                    setServerStatus('online', 'ready')
                    break
                case ServerStates.loadingModel:
                    setServerStatus('busy', 'loading..')
                    break
                case ServerStates.rendering:
                    setServerStatus('busy', 'rendering..')
                    break
                default: // Unavailable
                    console.error('Ping received an unexpected server status. Status: %s', serverState.status)
                    setServerStatus('error', serverState.status.toLowerCase())
                    break
            }
            serverState.time = Date.now()
            return true
        } catch (e) {
            console.error(e)
            serverState = {'status': ServerStates.unavailable, 'time': Date.now()}
            setServerStatus('error', 'offline')
        }
        return false
    }

    function isServerAvailable() {
        if (typeof serverState !== 'object') {
            console.error('serverState not set to a value. Connection to server could be lost...')
            return false
        }
        if (Date.now() >= serverState.time + SERVER_STATE_VALIDITY_DURATION) {
            console.warn('SERVER_STATE_VALIDITY_DURATION elapsed. Connection to server could be lost...')
            return false
        }
        switch (serverState.status) {
            case ServerStates.loadingModel:
            case ServerStates.rendering:
            case ServerStates.online:
                return true
            default:
                console.warn('Unexpected server status. Server could be unavailable... Status: %s', serverState.status)
                return false
        }
    }

    async function waitUntil(isReadyFn, delay, timeout) {
        if (typeof delay === 'number') {
            const msDelay = delay
            delay = () => asyncDelay(msDelay)
        }
        if (typeof delay !== 'function') {
            throw new Error('delay is not a number or a function.')
        }
        if (typeof timeout !== 'undefined' && typeof timeout !== 'number') {
            throw new Error('timeout is not a number.')
        }
        if (typeof timeout === 'undefined' || timeout < 0) {
            timeout = Number.MAX_SAFE_INTEGER
        }
        timeout = Date.now() + timeout
        while (timeout > Date.now()
            && Date.now() < serverState.time + SERVER_STATE_VALIDITY_DURATION
            && !Boolean(await Promise.resolve(isReadyFn()))
        ) {
            await delay()
            if (!isServerAvailable()) { // Can fail if ping got frozen/suspended...
                if (await healthCheck() && isServerAvailable()) { // Force a recheck of server status before failure...
                    continue // Continue waiting if last healthCheck confirmed the server is still alive.
                }
                throw new Error('Connection with server lost.')
            }
        }
        if (Date.now() >= serverState.time + SERVER_STATE_VALIDITY_DURATION) {
            console.warn('SERVER_STATE_VALIDITY_DURATION elapsed. Released waitUntil on stale server state.')
        }
    }

    const TaskStatus = {
        init: 'init',
        pending: 'pending', // Queued locally, not yet posted to server
        waiting: 'waiting', // Waiting to run on server
        processing: 'processing',
        stopped: 'stopped',
        completed: 'completed',
        failed: 'failed',
    }
    Object.freeze(TaskStatus)

    const TASK_STATUS_ORDER = [
        TaskStatus.init,
        TaskStatus.pending,
        TaskStatus.waiting,
        TaskStatus.processing,
        //Don't add status that are final.
    ]

    const task_queue = new Map()
    const concurrent_generators = new Map()
    const weak_results = new WeakMap()

    class Task {
        // Private properties...
        _reqBody = {} // request body of this task.
        #reader = undefined
        #status = TaskStatus.init
        #id = undefined
        #exception = undefined

        constructor(options={}) {
            this._reqBody = Object.assign({}, options)
            if (typeof this._reqBody.session_id === 'undefined') {
                this._reqBody.session_id = sessionId
            } else if (this._reqBody.session_id !== SD.sessionId && String(this._reqBody.session_id) !== String(SD.sessionId)) {
                throw new Error('Use SD.sessionId to set the request session_id.')
            }
            this._reqBody.session_id = String(this._reqBody.session_id)
        }

        get id() {
            return this.#id
        }
        _setId(id) {
            if (typeof this.#id !== 'undefined') {
                throw new Error('The task ID can only be set once.')
            }
            this.#id = id
        }

        get exception() {
            return this.#exception
        }
        async abort(exception) {
            if (this.isCompleted || this.isStopped || this.hasFailed) {
                return
            }
            if (typeof exception !== 'undefined') {
                if (typeof exception === 'string') {
                    exception = new Error(exception)
                }
                if (typeof exception !== 'object') {
                    throw new Error('exception is not an object.')
                }
                if (!(exception instanceof Error)) {
                    throw new Error('exception is not an Error or a string.')
                }
            }
            const res = await fetch('/image/stop?task=' + this.id)
            if (!res.ok) {
                console.log('Stop response:', res)
                throw new Error(res.statusText)
            }
            task_queue.delete(this)
            this.#exception = exception
            this.#status = (exception ? TaskStatus.failed : TaskStatus.stopped)
        }

        get reqBody() {
            if (this.#status === TaskStatus.init) {
                return this._reqBody
            }
            console.warn('Task reqBody cannot be changed after the init state.')
            return Object.assign({}, this._reqBody)
        }

        get isPending() {
            return TASK_STATUS_ORDER.indexOf(this.#status) >= 0
        }
        get isCompleted() {
            return this.#status === TaskStatus.completed
        }
        get hasFailed() {
            return this.#status === TaskStatus.failed
        }
        get isStopped() {
            return this.#status === TaskStatus.stopped
        }
        get status() {
            return this.#status
        }
        _setStatus(status) {
            if (status === this.#status) {
                return
            }
            const currentIdx = TASK_STATUS_ORDER.indexOf(this.#status)
            if (currentIdx < 0) {
                throw Error(`The task status ${this.#status} is final and can't be changed.`)
            }
            const newIdx = TASK_STATUS_ORDER.indexOf(status)
            if (newIdx >= 0 && newIdx < currentIdx) {
                throw Error(`The task status ${status} can't replace ${this.#status}.`)
            }
            this.#status = status
        }

        /** Send current task to server.
         * @param {*} [timeout=-1] Optional timeout value in ms
         * @returns the response from the render request.
         * @memberof Task
         */
        async post(url, timeout=-1) {
            if(this.status !== TaskStatus.init && this.status !== TaskStatus.pending) {
                throw new Error(`Task status ${this.status} is not valid for post.`)
            }
            this._setStatus(TaskStatus.pending)
            Object.freeze(this._reqBody)

            const abortSignal = (timeout >= 0 ? AbortSignal.timeout(timeout) : undefined)
            let res = undefined
            try {
                this.checkReqBody()
                do {
                    abortSignal?.throwIfAborted()
                    res = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this._reqBody),
                        signal: abortSignal
                    })
                    // status_code 503, already a task running.
                } while (res.status === 503 && await asyncDelay(RETRY_DELAY_IF_SERVER_IS_BUSY))
            } catch (err) {
                this.abort(err)
                throw err
            }
            if (!res.ok) {
                const err = new Error(`Unexpected response HTTP${res.status}. Details: ${res.statusText}`)
                this.abort(err)
                throw err
            }
            return await res.json()
        }

        static getReader(url) {
            const reader = new ChunkedStreamReader(url)
            const parseToString = reader.parse
            reader.parse = function(value) {
                value = parseToString.call(this, value)
                if (!value || value.length <= 0) {
                    return
                }
                return reader.readStreamAsJSON(value.join(''))
            }
            reader.onNext = function({done, value}) {
                // By default is completed when the return value has a status defined.
                if (typeof value === 'object' && 'status' in value) {
                    done = true
                }
                return {done, value}
            }
            return reader
        }
        _setReader(reader) {
            if (typeof this.#reader !== 'undefined') {
                throw new Error('The task reader can only be set once.')
            }
            this.#reader = reader
        }
        get reader() {
            if (this.#reader) {
                return this.#reader
            }
            if (!this.streamUrl) {
                throw new Error('The task has no stream Url defined.')
            }
            this.#reader = Task.getReader(this.streamUrl)
            const task = this
            const onNext = this.#reader.onNext
            this.#reader.onNext = function({done, value}) {
                if (value && typeof value === 'object') {
                    if (task.status === TaskStatus.init
                        || task.status === TaskStatus.pending
                        || task.status === TaskStatus.waiting
                    ) {
                        task._setStatus(TaskStatus.processing)
                    }
                    if ('step' in value && 'total_steps' in value) {
                        task.step = value.step
                        task.total_steps = value.total_steps
                    }
                }
                return onNext.call(this, {done, value})
            }
            this.#reader.onComplete = function(value) {
                task.result = value
                if (task.isPending) {
                    task._setStatus(TaskStatus.completed)
                }
                return value
            }
            this.#reader.onError = function(response) {
                const err = new Error(response.statusText)
                task.abort(err)
                throw err
            }
            return this.#reader
        }

        async waitUntil({timeout=-1, callback, status, signal}) {
            const currentIdx = TASK_STATUS_ORDER.indexOf(this.#status)
            if (currentIdx <= 0) {
                return false
            }
            const stIdx = (status ? TASK_STATUS_ORDER.indexOf(status) : currentIdx + 1)
            if (stIdx >= 0 && stIdx <= currentIdx) {
                return true
            }
            if (stIdx < 0 && currentIdx < 0) {
                return this.#status === (status || TaskStatus.completed)
            }
            if (signal?.aborted) {
                return false
            }
            const task = this
            switch(this.#status) {
                case TaskStatus.pending:
                case TaskStatus.waiting:
                    // Wait for server status to include this task.
                    await waitUntil(
                        async () => {
                            if (task.#id && typeof serverState.tasks === 'object' && Object.keys(serverState.tasks).includes(String(task.#id))) {
                                return true
                            }
                            if (await Promise.resolve(callback?.call(task)) || signal?.aborted) {
                                return true
                            }
                        },
                        TASK_STATE_SERVER_UPDATE_DELAY,
                        timeout,
                    )
                    if (this.#id && typeof serverState.tasks === 'object' && Object.keys(serverState.tasks).includes(String(task.#id))) {
                        this._setStatus(TaskStatus.waiting)
                    }
                    if (await Promise.resolve(callback?.call(this)) || signal?.aborted) {
                        return false
                    }
                    if (stIdx >= 0 && stIdx <= TASK_STATUS_ORDER.indexOf(TaskStatus.waiting)) {
                        return true
                    }
                    // Wait for task to start on server.
                    await waitUntil(
                        async () => {
                            if (typeof serverState.tasks !== 'object' || serverState.tasks[String(task.#id)] !== 'pending') {
                                return true
                            }
                            if (await Promise.resolve(callback?.call(task)) || signal?.aborted) {
                                return true
                            }
                        },
                        TASK_STATE_SERVER_UPDATE_DELAY,
                        timeout,
                    )
                    const state = (typeof serverState.tasks === 'object' ? serverState.tasks[String(task.#id)] : undefined)
                    if (state === 'running' || state === 'buffer' || state === 'completed') {
                        this._setStatus(TaskStatus.processing)
                    }
                    if (await Promise.resolve(callback?.call(task)) || signal?.aborted) {
                        return false
                    }
                    if (stIdx >= 0 && stIdx <= TASK_STATUS_ORDER.indexOf(TaskStatus.processing)) {
                        return true
                    }
                case TaskStatus.processing:
                    await waitUntil(
                        async () => {
                            if (typeof serverState.tasks !== 'object' || serverState.tasks[String(task.#id)] !== 'running') {
                                return true
                            }
                            if (await Promise.resolve(callback?.call(task)) || signal?.aborted) {
                                return true
                            }
                        },
                        TASK_STATE_SERVER_UPDATE_DELAY,
                        timeout,
                    )
                    await Promise.resolve(callback?.call(this))
                default:
                    return this.#status === (status || TaskStatus.completed)
            }
        }

        async enqueue(promiseGenerator, ...args) {
            if (this.status !== TaskStatus.init) {
                throw new Error(`Task is in an invalid status ${this.status} to add to queue.`)
            }
            this._setStatus(TaskStatus.pending)
            task_queue.set(this, promiseGenerator)
            await eventSource.fireEvent(EVENT_TASK_QUEUED, {task:this})
            await Task.enqueue(promiseGenerator, ...args)
            await this.waitUntil({status: TaskStatus.completed})
            if (this.exception) {
                throw this.exception
            }
            return this.result
        }
        static async enqueue(promiseGenerator, ...args) {
            if (typeof promiseGenerator === 'undefined') {
                throw new Error('To enqueue a concurrent task, a *Promise Generator is needed but undefined was found.')
            }
            //if (Symbol.asyncIterator in result || Symbol.iterator in result) {
                //concurrent_generators.set(result, Promise.resolve(args))
            if (typeof promiseGenerator === 'function') {
                concurrent_generators.set(asGenerator({callback: promiseGenerator}), Promise.resolve(args))
            } else {
                concurrent_generators.set(promiseGenerator, Promise.resolve(args))
            }
            await waitUntil(() => !concurrent_generators.has(promiseGenerator), CONCURRENT_TASK_INTERVAL)
            return weak_results.get(promiseGenerator)
        }
        static enqueueNew(task, classCtor, progressCallback) {
            if (task.status !== TaskStatus.init) {
                throw new Error('Task has an invalid status to add to queue.')
            }
            if (!(task instanceof classCtor)) {
                throw new Error('Task is not a instance of classCtor.')
            }
            let promiseGenerator = undefined
            if (typeof progressCallback === 'undefined') {
                promiseGenerator = classCtor.start(task)
            } else if (typeof progressCallback === 'function') {
                promiseGenerator = classCtor.start(task, progressCallback)
            } else {
                throw new Error('progressCallback is not a function.')
            }
            return Task.prototype.enqueue.call(task, promiseGenerator)
        }

        static async run(promiseGenerator, {callback, signal, timeout=-1}={}) {
            let value = undefined
            let done = undefined
            if (timeout < 0) {
                timeout = Number.MAX_SAFE_INTEGER
            }
            timeout = Date.now() + timeout
            do {
                ({value, done} = await Promise.resolve(promiseGenerator.next(value)))
                if (value instanceof Promise) {
                    value = await value
                }
                if (callback) {
                    ({value, done} = await Promise.resolve(callback.call(promiseGenerator, {value, done})))
                }
                if (value instanceof Promise) {
                    value = await value
                }
            } while(!done && !signal?.aborted && timeout > Date.now())
            return value
        }
        static async *asGenerator({callback, generator, signal, timeout=-1}={}) {
            let value = undefined
            let done = undefined
            if (timeout < 0) {
                timeout = Number.MAX_SAFE_INTEGER
            }
            timeout = Date.now() + timeout
            do {
                ({value, done} = await Promise.resolve(generator.next(value)))
                if (value instanceof Promise) {
                    value = await value
                }
                if (callback) {
                    ({value, done} = await Promise.resolve(callback.call(generator, {value, done})))
                    if (value instanceof Promise) {
                        value = await value
                    }
                }
                value = yield value
            } while(!done && !signal?.aborted && timeout > Date.now())
            return value
        }
    }

    const TASK_REQUIRED = {
        "session_id": 'string',
        "prompt": 'string',
        "negative_prompt": 'string',
        "width": 'number',
        "height": 'number',
        "seed": 'number',

        "sampler_name": 'string',
        "use_stable_diffusion_model": 'string',
        "num_inference_steps": 'number',
        "guidance_scale": 'number',

        "num_outputs": 'number',
        "stream_progress_updates": 'boolean',
        "stream_image_progress": 'boolean',
        "show_only_filtered_image": 'boolean',
        "output_format": 'string',
        "output_quality": 'number',
    }
    const TASK_DEFAULTS = {
        "sampler_name": "plms",
        "use_stable_diffusion_model": "sd-v1-4",
        "num_inference_steps": 50,
        "guidance_scale": 7.5,
        "negative_prompt": "",

        "num_outputs": 1,
        "stream_progress_updates": true,
        "stream_image_progress": true,
        "show_only_filtered_image": true,
        "block_nsfw": false,
        "output_format": "png",
        "output_quality": 75,
        "output_lossless": false,
    }
    const TASK_OPTIONAL = {
        "device": 'string',
        "init_image": 'string',
        "mask": 'string',
        "save_to_disk_path": 'string',
        "use_face_correction": 'string',
        "use_upscale": 'string',
        "use_vae_model": 'string',
        "use_hypernetwork_model": 'string',
        "hypernetwork_strength": 'number',
        "output_lossless": 'boolean',
    }

    // Higer values will result in...
    // pytorch_lightning/utilities/seed.py:60: UserWarning: X is not in bounds, numpy accepts from 0 to 4294967295
    const MAX_SEED_VALUE = 4294967295

    class RenderTask extends Task {
        constructor(options={}) {
            super(options)
            if (typeof this._reqBody.seed === 'undefined') {
                this._reqBody.seed = Math.floor(Math.random() * (MAX_SEED_VALUE + 1))
            }
            if (typeof typeof this._reqBody.seed === 'number' && (this._reqBody.seed > MAX_SEED_VALUE || this._reqBody.seed < 0)) {
                throw new Error(`seed must be in range 0 to ${MAX_SEED_VALUE}.`)
            }

            if ('use_cpu' in this._reqBody) {
                if (this._reqBody.use_cpu) {
                    this._reqBody.device = 'cpu'
                }
                delete this._reqBody.use_cpu
            }
            if (this._reqBody.init_image) {
                if (typeof this._reqBody.prompt_strength === 'undefined') {
                    this._reqBody.prompt_strength = 0.8
                } else if (typeof this._reqBody.prompt_strength !== 'number') {
                    throw new Error(`prompt_strength need to be of type number but ${typeof this._reqBody.prompt_strength} was found.`)
                }
            }
            if ('modifiers' in this._reqBody) {
                if (Array.isArray(this._reqBody.modifiers) && this._reqBody.modifiers.length > 0) {
                    this._reqBody.modifiers = this._reqBody.modifiers.filter((val) => val.trim())
                    if (this._reqBody.modifiers.length > 0) {
                        this._reqBody.prompt = `${this._reqBody.prompt}, ${this._reqBody.modifiers.join(', ')}`
                    }
                }
                if (typeof this._reqBody.modifiers === 'string' && this._reqBody.modifiers.length > 0) {
                    this._reqBody.modifiers = this._reqBody.modifiers.trim()
                    if (this._reqBody.modifiers.length > 0) {
                        this._reqBody.prompt = `${this._reqBody.prompt}, ${this._reqBody.modifiers}`
                    }
                }
                delete this._reqBody.modifiers
            }
            this.checkReqBody()
        }

        checkReqBody() {
            for (const key in TASK_DEFAULTS) {
                if (typeof this._reqBody[key] === 'undefined') {
                    this._reqBody[key] = TASK_DEFAULTS[key]
                }
            }
            for (const key in TASK_REQUIRED) {
                if (typeof this._reqBody[key] !== TASK_REQUIRED[key]) {
                    throw new Error(`${key} need to be of type ${TASK_REQUIRED[key]} but ${typeof this._reqBody[key]} was found.`)
                }
            }
            for (const key in this._reqBody) {
                if (key in TASK_REQUIRED) {
                    continue
                }
                if (key in TASK_OPTIONAL) {
                    if (typeof this._reqBody[key] == "undefined") {
                        delete this._reqBody[key]
                        console.warn(`reqBody[${key}] was set to undefined. Removing optional key without value...`)
                        continue
                    }
                    if (typeof this._reqBody[key] !== TASK_OPTIONAL[key]) {
                        throw new Error(`${key} need to be of type ${TASK_OPTIONAL[key]} but ${typeof this._reqBody[key]} was found.`)
                    }
                }
            }
        }

        /** Send current task to server.
         * @param {*} [timeout=-1] Optional timeout value in ms
         * @returns the response from the render request.
         * @memberof Task
         */
        async post(timeout=-1) {
            performance.mark('make-render-request')
            if (performance.getEntriesByName('click-makeImage', 'mark').length > 0) {
                performance.measure('diff', 'click-makeImage', 'make-render-request')
                console.log('delay between clicking and making the server request:', performance.getEntriesByName('diff', 'measure')[0].duration + ' ms')
            }

            let jsonResponse = await super.post('/render', timeout)
            if (typeof jsonResponse?.task !== 'number') {
                console.warn('Endpoint error response: ', jsonResponse)
                const event = Object.assign({task:this}, jsonResponse)
                await eventSource.fireEvent(EVENT_UNEXPECTED_RESPONSE, event)
                if ('continueWith' in event) {
                    jsonResponse = await Promise.resolve(event.continueWith)
                }
                if (typeof jsonResponse?.task !== 'number') {
                    const err = new Error(jsonResponse?.detail || 'Endpoint response does not contains a task ID.')
                    this.abort(err)
                    throw err
                }
            }
            this._setId(jsonResponse.task)
            if (jsonResponse.stream) {
                this.streamUrl = jsonResponse.stream
            }
            this._setStatus(TaskStatus.waiting)
            return jsonResponse
        }

        enqueue(progressCallback) {
            return Task.enqueueNew(this, RenderTask, progressCallback)
        }
        *start(progressCallback) {
            if (typeof progressCallback !== 'undefined' && typeof progressCallback !== 'function') {
                throw new Error('progressCallback is not a function. progressCallback type: ' + typeof progressCallback)
            }
            if (this.isStopped) {
                return
            }

            this._setStatus(TaskStatus.pending)
            progressCallback?.call(this, {reqBody: this._reqBody})
            Object.freeze(this._reqBody)

            // Post task request to backend
            let renderRequest = undefined
            try {
                renderRequest = yield this.post()
                yield progressCallback?.call(this, {renderResponse: renderRequest})
            } catch (e) {
                yield progressCallback?.call(this, { detail: e.message })
                throw e
            }
            try { // Wait for task to start on server.
                yield this.waitUntil({
                    callback: function() { return progressCallback?.call(this, {}) },
                    status: TaskStatus.processing,
                })
            } catch (e) {
                this.abort(err)
                throw e
            }
            // Update class status and callback.
            const taskState = (typeof serverState.tasks === 'object' ? serverState.tasks[String(this.id)] : undefined)
            switch(taskState) {
                case 'pending': // Session has pending tasks.
                    console.error('Server %o render request %o is still waiting.', serverState, renderRequest)
                    //Only update status if not already set by waitUntil
                    if (this.status === TaskStatus.init
                        || this.status === TaskStatus.pending
                    ) {
                        // Set status as Waiting in backend.
                        this._setStatus(TaskStatus.waiting)
                    }
                    break
                case 'running':
                case 'buffer':
                    // Normal expected messages.
                    this._setStatus(TaskStatus.processing)
                    break
                case 'completed':
                    if (this.isPending) {
                        // Set state to processing until we read the reply
                        this._setStatus(TaskStatus.processing)
                    }
                    console.warn('Server %o render request %o completed unexpectedly', serverState, renderRequest)
                    break // Continue anyway to try to read cached result.
                case 'error':
                    this._setStatus(TaskStatus.failed)
                    console.error('Server %o render request %o has failed', serverState, renderRequest)
                    break // Still valid, Update UI with error message
                case 'stopped':
                    this._setStatus(TaskStatus.stopped)
                    console.log('Server %o render request %o was stopped', serverState, renderRequest)
                    return false
                default:
                    if (!progressCallback) {
                        const err = new Error('Unexpected server task state: ' + taskState || 'Undefined')
                        this.abort(err)
                        throw err
                    }
                    const response = yield progressCallback.call(this, {})
                    if (response instanceof Error) {
                        this.abort(response)
                        throw response
                    }
                    if (!response) {
                        return false
                    }
            }

            // Task started!
            // Open the reader.
            const reader = this.reader
            const task = this
            reader.onError = function(response) {
                if (progressCallback) {
                    task.abort(new Error(response.statusText))
                    return progressCallback.call(task, { response, reader })
                }
                return Task.prototype.onError.call(task, response)
            }
            yield progressCallback?.call(this, { reader })

            //Start streaming the results.
            const streamGenerator = reader.open()
            let value = undefined
            let done = undefined
            yield progressCallback?.call(this, { stream: streamGenerator })
            do {
                ({value, done} = yield streamGenerator.next())
                if (typeof value !== 'object') {
                    continue
                }
                yield progressCallback?.call(this, { update: value })
            } while(!done)
            return value
        }
        static start(task, progressCallback) {
            if (typeof task !== 'object') {
                throw new Error ('task is not an object. task type: ' + typeof task)
            }
            if (!(task instanceof Task)) {
                if (task.reqBody) {
                    task = new RenderTask(task.reqBody)
                } else {
                    task = new RenderTask(task)
                }
            }
            return task.start(progressCallback)
        }
        static run(task, progressCallback) {
            const promiseGenerator = RenderTask.start(task, progressCallback)
            return Task.run(promiseGenerator)
        }
    }
    class FilterTask extends Task {
        constructor(options={}) {
        }
        /** Send current task to server.
         * @param {*} [timeout=-1] Optional timeout value in ms
         * @returns the response from the render request.
         * @memberof Task
         */
        async post(timeout=-1) {
            let jsonResponse = await super.post('/filter', timeout)
            //this._setId(jsonResponse.task)
            this._setStatus(TaskStatus.waiting)
        }
        enqueue(progressCallback) {
            return Task.enqueueNew(this, FilterTask, progressCallback)
        }
        *start(progressCallback) {
            if (typeof progressCallback !== 'undefined' && typeof progressCallback !== 'function') {
                throw new Error('progressCallback is not a function. progressCallback type: ' + typeof progressCallback)
            }
            if (this.isStopped) {
                return
            }
        }
        static start(task, progressCallback) {
            if (typeof task !== 'object') {
                throw new Error ('task is not an object. task type: ' + typeof task)
            }
            if (!(task instanceof Task)) {
                if (task.reqBody) {
                    task = new FilterTask(task.reqBody)
                } else {
                    task = new FilterTask(task)
                }
            }
            return task.start(progressCallback)
        }
        static run(task, progressCallback) {
            const promiseGenerator = FilterTask.start(task, progressCallback)
            return Task.run(promiseGenerator)
        }
    }

    const getSystemInfo = debounce(async function() {
        let systemInfo = {
            devices: {
                all: {},
                active: {},
            },
            hosts: []
        }
        try {
            const res = await fetch('/get/system_info')
            if (!res.ok) {
                console.error('Invalid response fetching devices', res.statusText)
                return systemInfo
            }
            systemInfo = await res.json()
        } catch (e) {
            console.error('error fetching system info', e)
        }
        return systemInfo
    }, 250, true)
    async function getDevices() {
        let systemInfo = getSystemInfo()
        return systemInfo.devices
    }
    async function getHosts() {
        let systemInfo = getSystemInfo()
        return systemInfo.hosts
    }

    async function getModels() {
        let models = {
            'stable-diffusion': [],
            'vae': [],
        }
        try {
            const res = await fetch('/get/models')
            if (!res.ok) {
                console.error('Invalid response fetching models', res.statusText)
                return models
            }
            models = await res.json()
            console.log('get models response', models)
        } catch (e) {
            console.log('get models error', e)
        }
        return models
    }

    function getServerCapacity() {
        let activeDevicesCount = Object.keys(serverState?.devices?.active || {}).length
        if (typeof window === "object" && window.document.visibilityState === 'hidden') {
            activeDevicesCount = 1 + activeDevicesCount
        }
        return activeDevicesCount
    }

    let idleEventPromise = undefined
    function continueTasks() {
        if (typeof navigator?.scheduling?.isInputPending === 'function') {
            const inputPendingOptions = {
                // Report mouse/pointer move events when queue is empty.
                // Delay idle after mouse moves stops.
                includeContinuous: Boolean(task_queue.size <= 0 && concurrent_generators.size <= 0)
            }
            if (navigator.scheduling.isInputPending(inputPendingOptions)) {
                // Browser/User still active.
                return asyncDelay(CONCURRENT_TASK_INTERVAL)
            }
        }
        const serverCapacity = getServerCapacity()
        if (task_queue.size <= 0 && concurrent_generators.size <= 0) {
            if (!idleEventPromise?.isPending) {
                idleEventPromise = makeQuerablePromise(eventSource.fireEvent(EVENT_IDLE, {capacity: serverCapacity, idle: true}))
            }
            // Calling idle could result in task being added to queue.
            // if (task_queue.size <= 0 && concurrent_generators.size <= 0) {
            //     return asyncDelay(IDLE_COOLDOWN).then(() => idleEventPromise)
            // }
        }
        if (task_queue.size < serverCapacity) {
            if (!idleEventPromise?.isPending) {
                idleEventPromise = makeQuerablePromise(eventSource.fireEvent(EVENT_IDLE, {capacity: serverCapacity - task_queue.size}))
            }
        }
        const completedTasks = []
        for (let [generator, promise] of concurrent_generators.entries()) {
            if (promise.isPending) {
                continue
            }
            let value = promise.resolvedValue?.value || promise.resolvedValue
            if (promise.isRejected) {
                console.error(promise.rejectReason)
                const event = {generator, reason: promise.rejectReason}
                eventSource.fireEvent(EVENT_UNHANDLED_REJECTION, event)
                if ('continueWith' in event) {
                    value = Promise.resolve(event.continueWith)
                } else {
                    concurrent_generators.delete(generator)
                    completedTasks.push({generator, promise})
                    continue
                }
            }
            if (value instanceof Promise) {
                promise = makeQuerablePromise(value.then((val) => ({done: promise.resolvedValue?.done, value: val})))
                concurrent_generators.set(generator, promise)
                continue
            }
            weak_results.set(generator, value)
            if (promise.resolvedValue?.done) {
                concurrent_generators.delete(generator)
                completedTasks.push({generator, promise})
                continue
            }

            promise = generator.next(value)
            if (!(promise instanceof Promise)) {
                promise = Promise.resolve(promise)
            }
            promise = makeQuerablePromise(promise)
            concurrent_generators.set(generator, promise)
        }

        for (let [task, generator] of task_queue.entries()) {
            const cTsk = completedTasks.find((item) => item.generator === generator)
            if (cTsk?.promise?.rejectReason || task.hasFailed) {
                eventSource.fireEvent(EVENT_TASK_ERROR, {task, generator, reason: cTsk?.promise?.rejectReason || task.exception })
                task_queue.delete(task)
                continue
            }
            if (task.isCompleted || task.isStopped || cTsk) {
                const eventEndArgs = {task, generator}
                if (task.isStopped) {
                    eventEndArgs.stopped = true
                }
                eventSource.fireEvent(EVENT_TASK_END, eventEndArgs)
                task_queue.delete(task)
                continue
            }
            if (concurrent_generators.size > serverCapacity) {
                break
            }
            if (!generator) {
                if (typeof task.start === 'function') {
                    generator = task.start()
                }
            } else if (concurrent_generators.has(generator)) {
                continue
            }
            const event = {task, generator};
            const beforeStart = eventSource.fireEvent(EVENT_TASK_START, event) // optional beforeStart promise to wait on before starting task.
            const promise = makeQuerablePromise(beforeStart.then(() => Promise.resolve(event.beforeStart)))
            concurrent_generators.set(event.generator, promise)
            task_queue.set(task, event.generator)
        }
        const promises = Array.from(concurrent_generators.values())
        if (promises.length <= 0) {
            return asyncDelay(CONCURRENT_TASK_INTERVAL)
        }
        return Promise.race(promises).finally(continueTasks)
    }
    let taskPromise = undefined
    function startCheck() {
        if (taskPromise?.isPending) {
            return
        }
        do {
            if (taskPromise?.resolvedValue instanceof Promise) {
                taskPromise = makeQuerablePromise(taskPromise.resolvedValue)
                continue
            }
            if (typeof navigator?.scheduling?.isInputPending === 'function' && navigator.scheduling.isInputPending()) {
                return
            }
            const continuePromise = continueTasks().catch(async function(err) {
                console.error(err)
                await eventSource.fireEvent(EVENT_UNHANDLED_REJECTION, {reason: err})
                await asyncDelay(RETRY_DELAY_ON_ERROR)
            })
            taskPromise = makeQuerablePromise(continuePromise)
        } while(taskPromise?.isResolved)
    }

    const SD = {
        ChunkedStreamReader,
        ServerStates,
        TaskStatus,
        Task,
        RenderTask,
        FilterTask,

        Events: EVENTS_TYPES,
        init: async function(options={}) {
            if ('events' in options) {
                for (const key in options.events) {
                    eventSource.addEventListener(key, options.events[key])
                }
            }
            await healthCheck()
            setInterval(healthCheck, HEALTH_PING_INTERVAL)
            setInterval(startCheck, CONCURRENT_TASK_INTERVAL)
        },

        /** Add a new event listener
         */
        addEventListener: (...args) => eventSource.addEventListener(...args),
        /** Remove the event listener
         */
        removeEventListener: (...args) => eventSource.removeEventListener(...args),

        isServerAvailable,
        getServerCapacity,

        getSystemInfo,
        getDevices,
        getHosts,

        getModels,

        render: (...args) => RenderTask.run(...args),
        filter: (...args) => FilterTask.run(...args),
        waitUntil,
    };

    Object.defineProperties(SD, {
        serverState: {
            configurable: false,
            get: () => serverState,
        },
        isAvailable: {
            configurable: false,
            get: () => isServerAvailable(),
        },
        serverCapacity: {
            configurable: false,
            get: () => getServerCapacity(),
        },
        sessionId: {
            configurable: false,
            get: () => sessionId,
            set: (val) => {
                if (typeof val === 'undefined') {
                    throw new Error("Can't set sessionId to undefined.")
                }
                sessionId = val
            },
        },
        MAX_SEED_VALUE: {
            configurable: false,
            get: () => MAX_SEED_VALUE,
        },
        activeTasks: {
            configurable: false,
            get: () => task_queue,
        },
    })
    Object.defineProperties(getGlobal(), {
        SD: {
            configurable: false,
            get: () => SD,
        },
        sessionId: { //TODO Remove in the future in favor of SD.sessionId
            configurable: false,
            get: () => {
                console.warn('Deprecated window.sessionId has been replaced with SD.sessionId.')
                console.trace()
                return SD.sessionId
            },
            set: (val) => {
                console.warn('Deprecated window.sessionId has been replaced with SD.sessionId.')
                console.trace()
                SD.sessionId = val
            }
        }
    })
})()