diff --git a/javascript/notification.js b/javascript/notification.js new file mode 100644 index 00000000..4711c279 --- /dev/null +++ b/javascript/notification.js @@ -0,0 +1,34 @@ +// Monitors the gallery and sends a browser notification when the leading image is new. + +let lastHeadImg = null; + +onUiUpdate(function(){ + const galleryPreviews = gradioApp().querySelectorAll('img.h-full.w-full.overflow-hidden'); + + if (galleryPreviews == null) return; + + const headImg = galleryPreviews[0]?.src; + + if (headImg == null || headImg == lastHeadImg) return; + + lastHeadImg = headImg; + + 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 - 1 : 1} image${imgs.size > 1 ? 's' : ''}`, + icon: headImg, + image: headImg, + } + ); + + notification.onclick = function(_){ + parent.focus(); + this.close(); + }; +}); diff --git a/modules/ui.py b/modules/ui.py index 2c5422c7..ec6f247e 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -875,6 +875,14 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): outputs=[result] ) + request_notifications = gr.Button(value='Request browser notifications') + request_notifications.click( + fn=lambda: None, + inputs=[], + outputs=[], + _js='() => Notification.requestPermission()' + ) + interfaces = [ (txt2img_interface, "txt2img", "txt2img"), (img2img_interface, "img2img", "img2img"),