stable-diffusion-webui

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

3
let lastHeadImg = null;
4

5
let notificationButton = null;
6

7
onAfterUiUpdate(function() {
8
    if (notificationButton == null) {
9
        notificationButton = gradioApp().getElementById('request_notifications');
10

11
        if (notificationButton != null) {
12
            notificationButton.addEventListener('click', () => {
13
                void Notification.requestPermission();
14
            }, true);
15
        }
16
    }
17

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

20
    if (galleryPreviews == null) return;
21

22
    const headImg = galleryPreviews[0]?.src;
23

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

26
    lastHeadImg = headImg;
27

28
    // play notification sound if available
29
    const notificationAudio = gradioApp().querySelector('#audio_notification audio');
30
    if (notificationAudio) {
31
        notificationAudio.volume = opts.notification_volume / 100.0 || 1.0;
32
        notificationAudio.play();
33
    }
34

35
    if (document.hasFocus()) return;
36

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

40
    const notification = new Notification(
41
        'Stable Diffusion',
42
        {
43
            body: `Generated ${imgs.size > 1 ? imgs.size - opts.return_grid : 1} image${imgs.size > 1 ? 's' : ''}`,
44
            icon: headImg,
45
            image: headImg,
46
        }
47
    );
48

49
    notification.onclick = function(_) {
50
        parent.focus();
51
        this.close();
52
    };
53
});
54