upscale-page.js

import { upscaleImage } from "/upscale/image.js"

const $ = selector => document.querySelector(selector)
const p = new URLSearchParams(location.search).get("p")
const model = $("#model")
const scale = $("#scale")
const upload = $("#upload")
const button = $("#upscale")
const input = $("#input")
const output = $("#output")
const status = $(".status")
let inputUrl
let outputUrl

const optionsResponse = await fetch(`/api/upscale/options?${new URLSearchParams({ p })}`)
if (optionsResponse.ok) {
    const options = await optionsResponse.json()
    for (const name of options.models) model.add(new Option(name, name))
    model.value = options.default
} else {
    status.textContent = "Unable to load upscale models"
}

upload.addEventListener("change", () => {
    const file = upload.files[0]
    if (!file) return
    if (inputUrl) URL.revokeObjectURL(inputUrl)
    inputUrl = URL.createObjectURL(file)
    input.src = inputUrl
    input.hidden = false
    button.disabled = !model.value
    status.textContent = ""
})

button.addEventListener("click", async () => {
    const file = upload.files[0]
    if (!file) return
    button.disabled = true
    status.textContent = "Upscaling…"
    try {
        const blob = await upscaleImage({
            file,
            model: model.value,
            scale: scale.value,
        })
        if (outputUrl) URL.revokeObjectURL(outputUrl)
        outputUrl = URL.createObjectURL(blob)
        output.src = outputUrl
        output.hidden = false
        status.textContent = "Complete"
    } catch (error) {
        status.textContent = error.message
    } finally {
        button.disabled = false
    }
})