Merge remote-tracking branch 'upstream/master' into token_count

4 files changed, 22 insertions, 14 deletions

diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index c01f66e2..5aac57f7 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -68,13 +68,19 @@ window.addEventListener('paste', e => {
     if ( ! isValidImageList( files ) ) {
         return;
     }
-    [...gradioApp().querySelectorAll('input[type=file][accept="image/x-png,image/gif,image/jpeg"]')]
-        .filter(input => !input.matches('.\\!hidden input[type=file]'))
-        .forEach(input => {
-            input.files = files;
-            input.dispatchEvent(new Event('change'))
-        });
-    [...gradioApp().querySelectorAll('[data-testid="image"]')]
-        .filter(imgWrap => !imgWrap.closest('.\\!hidden'))
-        .forEach(imgWrap => dropReplaceImage( imgWrap, files ));
+
+    const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
+        .filter(el => uiElementIsVisible(el));
+    if ( ! visibleImageFields.length ) {
+        return;
+    }
+    
+    const firstFreeImageField = visibleImageFields
+        .filter(el => el.querySelector('input[type=file]'))?.[0];
+
+    dropReplaceImage(
+        firstFreeImageField ?
+        firstFreeImageField :
+        visibleImageFields[visibleImageFields.length - 1]
+    , files );
 });
diff --git a/javascript/hints.js b/javascript/hints.js
index ed79796f..59dd770c 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -57,8 +57,8 @@ titles = {
 
     "Interrogate": "Reconstruct prompt from existing image and put it into the prompt field.",
 
-    "Images filename pattern": "Use following tags to define how filenames for images are chosen: [steps], [cfg], [prompt], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [prompt_words], [date], [job_timestamp]; leave empty for default.",
-    "Directory name pattern": "Use following tags to define how subdirectories for images and grids are chosen: [steps], [cfg], [prompt], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [prompt_words], [date], [job_timestamp]; leave empty for default.",
+    "Images filename pattern": "Use following tags to define how filenames for images are chosen: [steps], [cfg], [prompt], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [prompt_words], [date], [datetime], [job_timestamp]; leave empty for default.",
+    "Directory name pattern": "Use following tags to define how subdirectories for images and grids are chosen: [steps], [cfg], [prompt], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [prompt_words], [date], [datetime], [job_timestamp]; leave empty for default.",
     "Max prompt words": "Set the maximum number of words to be used in the [prompt_words] option; ATTENTION: If the words are too long, they may exceed the maximum length of the file path that the system can handle",
 
     "Loopback": "Process an image, use it as an input, repeat.",
diff --git a/javascript/notification.js b/javascript/notification.js
index e8159a7e..bdf614ad 100644
--- a/javascript/notification.js
+++ b/javascript/notification.js
@@ -25,6 +25,9 @@ onUiUpdate(function(){
 
     lastHeadImg = headImg;
 
+    // play notification sound if available
+    gradioApp().querySelector('#audio_notification audio')?.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.
diff --git a/javascript/ui.js b/javascript/ui.js
index 77e0f4c1..fbe5a11d 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1,9 +1,8 @@
 // various functions for interation with ui.py not large enough to warrant putting them in separate files
 
 function selected_gallery_index(){
-    var gr = gradioApp()
-    var buttons = gradioApp().querySelectorAll(".gallery-item")
-    var button = gr.querySelector(".gallery-item.\\!ring-2")
+    var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem .gallery-item')
+    var button = gradioApp().querySelector('[style="display: block;"].tabitem .gallery-item.\\!ring-2')
 
     var result = -1
     buttons.forEach(function(v, i){ if(v==button) { result = i } })