javascript/notification.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

// Monitors the gallery and sends a browser notification when the leading image is new.

let lastHeadImg = null;

let notificationButton = null;

onAfterUiUpdate(function() {
    if (notificationButton == null) {
        notificationButton = gradioApp().getElementById('request_notifications');

        if (notificationButton != null) {
            notificationButton.addEventListener('click', () => {
                void Notification.requestPermission();
            }, true);
        }
    }

    const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"] div[id$="_results"] .thumbnail-item > img');

    if (galleryPreviews == null) return;

    const headImg = galleryPreviews[0]?.src;

    if (headImg == null || headImg == lastHeadImg) return;

    lastHeadImg = headImg;

    // play notification sound if available
    const notificationAudio = gradioApp().querySelector('#audio_notification audio');
    if (notificationAudio) {
        notificationAudio.volume = opts.notification_volume / 100.0 || 1.0;
        notificationAudio.play();
    }

    if (document.hasFocus()) return;

    // Multiple copies of the images are in the DOM when one is selected. Dedup with a Set to get the real number generated.
    const imgs = new Set(Array.from(galleryPreviews).map(img => img.src));

    const notification = new Notification(
        'Stable Diffusion',
        {
            body: `Generated ${imgs.size > 1 ? imgs.size - opts.return_grid : 1} image${imgs.size > 1 ? 's' : ''}`,
            icon: headImg,
            image: headImg,
        }
    );

    notification.onclick = function(_) {
        parent.focus();
        this.close();
    };
});