Browser notification when HF Space finished building?

[lisabecker]

Is there a way to get a browser notification when a Hugging Face Space finished building? Or maybe a little spinning wheel in the tab that turns green when building is done? This would make my life so much easier when developing my demos (when using one screen)

If this doesn’t exist yet, I’d appreciate if it was considered as a future feature!

Thanks in advance

[radames]

hi @lisabecker , this is such a cool idea! while we don’t have anything official, we have almost every Space status available via an API. Here is a code snippet idea: when building your Space, you can copy-and-paste it on your browser console running the Space, then execute it, passing the space id. This will first prompt you to enable notifications, then it will notify every time the Space Stage status change. Make sure you run it after the Space is on Building mode

async function processSpace(spaceId, token) {
    const Stage = {
        NO_APP_FILE: "NO_APP_FILE",
        CONFIG_ERROR: "CONFIG_ERROR",
        BUILDING: "BUILDING",
        BUILD_ERROR: "BUILD_ERROR",
        RUNNING: "RUNNING",
        RUNNING_BUILDING: "RUNNING_BUILDING",
        RUNTIME_ERROR: "RUNTIME_ERROR",
        DELETING: "DELETING",
        PAUSED: "PAUSED",
        SLEEPING: "SLEEPING",
    }

    async function getSpaceStatus(spaceId, token) {
        const headers = {}
        if (token) {
            headers.Authorization = `Bearer ${token}`
        }
        const response = await fetch(`https://huggingface.co/api/spaces/${spaceId}/runtime`, {
            method: "GET",
            headers,
        })
        const data = await response.json()
        return data
    }

    async function enableNotifications() {
        if (!("Notification" in window)) {
            return
        }

        if (Notification.permission === "granted") {
            return
        }

        if (Notification.permission !== "denied") {
            await Notification.requestPermission()
        }
    }

    async function notify(title, body) {
        if (!("Notification" in window)) {
            return
        }

        if (Notification.permission === "granted") {
            const notification = new Notification(title, { body })
            setTimeout(notification.close.bind(notification), 5000)
        }
    }
    await enableNotifications()
    let lastStatus = await getSpaceStatus(spaceId, token)

    await notify("HuggingFace", `Space ${spaceId}\nstatus: ${lastStatus.stage}`)
    while (lastStatus.stage === Stage.BUILDING || lastStatus.stage === Stage.RUNNING_BUILDING) {
        await new Promise(resolve => setTimeout(resolve, 5000))
        const currStatus = await getSpaceStatus(spaceId, token)
        if (lastStatus.stage !== currStatus.stage) {
            await notify("HuggingFace", `Space ${spaceId}\nstatus: ${currStatus.stage}`)
        }
        lastStatus = currStatus
    }
}

then run the function

processSpace("USER_OR_ORG/SPACE_ID")

if Space is private

processSpace("USER_OR_ORG/SPACE_ID", "TOKEN")