Send a browser notification when the images are ready

2 files changed, 42 insertions, 0 deletions

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"),