Merge branch 'dev' into master

20 files changed, 1614 insertions, 1505 deletions

diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index 5160081d..1c08a1a9 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -1,111 +1,113 @@
-

-let currentWidth = null;

-let currentHeight = null;

-let arFrameTimeout = setTimeout(function(){},0);

-

-function dimensionChange(e, is_width, is_height){

-

-	if(is_width){

-		currentWidth = e.target.value*1.0

-	}

-	if(is_height){

-		currentHeight = e.target.value*1.0

-	}

-

-	var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";

-

-	if(!inImg2img){

-		return;

-	}

-

-	var targetElement = null;

-

-    var tabIndex = get_tab_index('mode_img2img')

-	if(tabIndex == 0){ // img2img

-		targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');

-	} else if(tabIndex == 1){ //Sketch

-		targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');

-	} else if(tabIndex == 2){ // Inpaint

-		targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');

-	} else if(tabIndex == 3){ // Inpaint sketch

-		targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');

-	}

-

-

-	if(targetElement){

-

-		var arPreviewRect = gradioApp().querySelector('#imageARPreview');

-		if(!arPreviewRect){

-		    arPreviewRect = document.createElement('div')

-		    arPreviewRect.id = "imageARPreview";

-		    gradioApp().appendChild(arPreviewRect)

-		}

-

-

-

-		var viewportOffset = targetElement.getBoundingClientRect();

-

-		var viewportscale = Math.min(  targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )

-

-		var scaledx = targetElement.naturalWidth*viewportscale

-		var scaledy = targetElement.naturalHeight*viewportscale

-

-		var cleintRectTop    = (viewportOffset.top+window.scrollY)

-		var cleintRectLeft   = (viewportOffset.left+window.scrollX)

-		var cleintRectCentreY = cleintRectTop  + (targetElement.clientHeight/2)

-		var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)

-

-		var arscale = Math.min(  scaledx/currentWidth, scaledy/currentHeight )

-		var arscaledx = currentWidth*arscale

-		var arscaledy = currentHeight*arscale

-

-		var arRectTop    = cleintRectCentreY-(arscaledy/2)

-		var arRectLeft   = cleintRectCentreX-(arscaledx/2)

-		var arRectWidth  = arscaledx

-		var arRectHeight = arscaledy

-

-	    arPreviewRect.style.top  = arRectTop+'px';

-	    arPreviewRect.style.left = arRectLeft+'px';

-	    arPreviewRect.style.width = arRectWidth+'px';

-	    arPreviewRect.style.height = arRectHeight+'px';

-

-	    clearTimeout(arFrameTimeout);

-	    arFrameTimeout = setTimeout(function(){

-	    	arPreviewRect.style.display = 'none';

-	    },2000);

-

-	    arPreviewRect.style.display = 'block';

-

-	}

-

-}

-

-

-onUiUpdate(function(){

-	var arPreviewRect = gradioApp().querySelector('#imageARPreview');

-	if(arPreviewRect){

-		arPreviewRect.style.display = 'none';

-	}

-    var tabImg2img = gradioApp().querySelector("#tab_img2img");

-    if (tabImg2img) {

-        var inImg2img = tabImg2img.style.display == "block";

-        if(inImg2img){

-            let inputs = gradioApp().querySelectorAll('input');

-            inputs.forEach(function(e){

-                var is_width = e.parentElement.id == "img2img_width"

-                var is_height = e.parentElement.id == "img2img_height"

-

-                if((is_width || is_height) && !e.classList.contains('scrollwatch')){

-                    e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} )

-                    e.classList.add('scrollwatch')

-                }

-                if(is_width){

-                    currentWidth = e.value*1.0

-                }

-                if(is_height){

-                    currentHeight = e.value*1.0

-                }

-            })

-        }

-    }

-});

+
+let currentWidth = null;
+let currentHeight = null;
+let arFrameTimeout = setTimeout(function() {}, 0);
+
+function dimensionChange(e, is_width, is_height) {
+
+    if (is_width) {
+        currentWidth = e.target.value * 1.0;
+    }
+    if (is_height) {
+        currentHeight = e.target.value * 1.0;
+    }
+
+    var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
+
+    if (!inImg2img) {
+        return;
+    }
+
+    var targetElement = null;
+
+    var tabIndex = get_tab_index('mode_img2img');
+    if (tabIndex == 0) { // img2img
+        targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
+    } else if (tabIndex == 1) { //Sketch
+        targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
+    } else if (tabIndex == 2) { // Inpaint
+        targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
+    } else if (tabIndex == 3) { // Inpaint sketch
+        targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
+    }
+
+
+    if (targetElement) {
+
+        var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+        if (!arPreviewRect) {
+            arPreviewRect = document.createElement('div');
+            arPreviewRect.id = "imageARPreview";
+            gradioApp().appendChild(arPreviewRect);
+        }
+
+
+
+        var viewportOffset = targetElement.getBoundingClientRect();
+
+        var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
+
+        var scaledx = targetElement.naturalWidth * viewportscale;
+        var scaledy = targetElement.naturalHeight * viewportscale;
+
+        var cleintRectTop = (viewportOffset.top + window.scrollY);
+        var cleintRectLeft = (viewportOffset.left + window.scrollX);
+        var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight / 2);
+        var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth / 2);
+
+        var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
+        var arscaledx = currentWidth * arscale;
+        var arscaledy = currentHeight * arscale;
+
+        var arRectTop = cleintRectCentreY - (arscaledy / 2);
+        var arRectLeft = cleintRectCentreX - (arscaledx / 2);
+        var arRectWidth = arscaledx;
+        var arRectHeight = arscaledy;
+
+        arPreviewRect.style.top = arRectTop + 'px';
+        arPreviewRect.style.left = arRectLeft + 'px';
+        arPreviewRect.style.width = arRectWidth + 'px';
+        arPreviewRect.style.height = arRectHeight + 'px';
+
+        clearTimeout(arFrameTimeout);
+        arFrameTimeout = setTimeout(function() {
+            arPreviewRect.style.display = 'none';
+        }, 2000);
+
+        arPreviewRect.style.display = 'block';
+
+    }
+
+}
+
+
+onUiUpdate(function() {
+    var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+    if (arPreviewRect) {
+        arPreviewRect.style.display = 'none';
+    }
+    var tabImg2img = gradioApp().querySelector("#tab_img2img");
+    if (tabImg2img) {
+        var inImg2img = tabImg2img.style.display == "block";
+        if (inImg2img) {
+            let inputs = gradioApp().querySelectorAll('input');
+            inputs.forEach(function(e) {
+                var is_width = e.parentElement.id == "img2img_width";
+                var is_height = e.parentElement.id == "img2img_height";
+
+                if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
+                    e.addEventListener('input', function(e) {
+                        dimensionChange(e, is_width, is_height);
+                    });
+                    e.classList.add('scrollwatch');
+                }
+                if (is_width) {
+                    currentWidth = e.value * 1.0;
+                }
+                if (is_height) {
+                    currentHeight = e.value * 1.0;
+                }
+            });
+        }
+    }
+});
diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js
index b2bdf053..f14af1d4 100644
--- a/javascript/contextMenus.js
+++ b/javascript/contextMenus.js
@@ -1,166 +1,172 @@
-

-contextMenuInit = function(){

-  let eventListenerApplied=false;

-  let menuSpecs = new Map();

-

-  const uid = function(){

-    return Date.now().toString(36) + Math.random().toString(36).substring(2);

-  }

-

-  function showContextMenu(event,element,menuEntries){

-    let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

-    let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;

-

-    let oldMenu = gradioApp().querySelector('#context-menu')

-    if(oldMenu){

-      oldMenu.remove()

-    }

-

-    let baseStyle = window.getComputedStyle(uiCurrentTab)

-

-    const contextMenu = document.createElement('nav')

-    contextMenu.id = "context-menu"

-    contextMenu.style.background = baseStyle.background

-    contextMenu.style.color = baseStyle.color

-    contextMenu.style.fontFamily = baseStyle.fontFamily

-    contextMenu.style.top = posy+'px'

-    contextMenu.style.left = posx+'px'

-

-

-

-    const contextMenuList = document.createElement('ul')

-    contextMenuList.className = 'context-menu-items';

-    contextMenu.append(contextMenuList);

-

-    menuEntries.forEach(function(entry){

-      let contextMenuEntry = document.createElement('a')

-      contextMenuEntry.innerHTML = entry['name']

-      contextMenuEntry.addEventListener("click", function() {

-        entry['func']();

-      })

-      contextMenuList.append(contextMenuEntry);

-

-    })

-

-    gradioApp().appendChild(contextMenu)

-

-    let menuWidth = contextMenu.offsetWidth + 4;

-    let menuHeight = contextMenu.offsetHeight + 4;

-

-    let windowWidth = window.innerWidth;

-    let windowHeight = window.innerHeight;

-

-    if ( (windowWidth - posx) < menuWidth ) {

-      contextMenu.style.left = windowWidth - menuWidth + "px";

-    }

-

-    if ( (windowHeight - posy) < menuHeight ) {

-      contextMenu.style.top = windowHeight - menuHeight + "px";

-    }

-

-  }

-

-  function appendContextMenuOption(targetElementSelector,entryName,entryFunction){

-

-    var currentItems = menuSpecs.get(targetElementSelector)

-

-    if(!currentItems){

-      currentItems = []

-      menuSpecs.set(targetElementSelector,currentItems);

-    }

-    let newItem = {'id':targetElementSelector+'_'+uid(),

-                   'name':entryName,

-                   'func':entryFunction,

-                   'isNew':true}

-

-    currentItems.push(newItem)

-    return newItem['id']

-  }

-

-  function removeContextMenuOption(uid){

-    menuSpecs.forEach(function(v) {

-      let index = -1

-      v.forEach(function(e,ei){if(e['id']==uid){index=ei}})

-      if(index>=0){

-        v.splice(index, 1);

-      }

-    })

-  }

-

-  function addContextMenuEventListener(){

-    if(eventListenerApplied){

-      return;

-    }

-    gradioApp().addEventListener("click", function(e) {

-      if(! e.isTrusted){

-        return

-      }

-

-      let oldMenu = gradioApp().querySelector('#context-menu')

-      if(oldMenu){

-        oldMenu.remove()

-      }

-    });

-    gradioApp().addEventListener("contextmenu", function(e) {

-      let oldMenu = gradioApp().querySelector('#context-menu')

-      if(oldMenu){

-        oldMenu.remove()

-      }

-      menuSpecs.forEach(function(v,k) {

-        if(e.composedPath()[0].matches(k)){

-          showContextMenu(e,e.composedPath()[0],v)

-          e.preventDefault()

-        }

-      })

-    });

-    eventListenerApplied=true

-

-  }

-

-  return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]

-}

-

-initResponse = contextMenuInit();

-appendContextMenuOption     = initResponse[0];

-removeContextMenuOption     = initResponse[1];

-addContextMenuEventListener = initResponse[2];

-

-(function(){

-  //Start example Context Menu Items

-  let generateOnRepeat = function(genbuttonid,interruptbuttonid){

-    let genbutton = gradioApp().querySelector(genbuttonid);

-    let interruptbutton = gradioApp().querySelector(interruptbuttonid);

-    if(!interruptbutton.offsetParent){

-      genbutton.click();

-    }

-    clearInterval(window.generateOnRepeatInterval)

-    window.generateOnRepeatInterval = setInterval(function(){

-      if(!interruptbutton.offsetParent){

-        genbutton.click();

-      }

-    },

-    500)

-  }

-

-  appendContextMenuOption('#txt2img_generate','Generate forever',function(){

-    generateOnRepeat('#txt2img_generate','#txt2img_interrupt');

-  })

-  appendContextMenuOption('#img2img_generate','Generate forever',function(){

-    generateOnRepeat('#img2img_generate','#img2img_interrupt');

-  })

-

-  let cancelGenerateForever = function(){

-    clearInterval(window.generateOnRepeatInterval)

-  }

-

-  appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever)

-  appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever)

-  appendContextMenuOption('#img2img_interrupt','Cancel generate forever',cancelGenerateForever)

-  appendContextMenuOption('#img2img_generate', 'Cancel generate forever',cancelGenerateForever)

-

-})();

-//End example Context Menu Items

-

-onUiUpdate(function(){

-  addContextMenuEventListener()

-});

+
+var contextMenuInit = function() {
+    let eventListenerApplied = false;
+    let menuSpecs = new Map();
+
+    const uid = function() {
+        return Date.now().toString(36) + Math.random().toString(36).substring(2);
+    };
+
+    function showContextMenu(event, element, menuEntries) {
+        let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+        let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+
+        let oldMenu = gradioApp().querySelector('#context-menu');
+        if (oldMenu) {
+            oldMenu.remove();
+        }
+
+        let baseStyle = window.getComputedStyle(uiCurrentTab);
+
+        const contextMenu = document.createElement('nav');
+        contextMenu.id = "context-menu";
+        contextMenu.style.background = baseStyle.background;
+        contextMenu.style.color = baseStyle.color;
+        contextMenu.style.fontFamily = baseStyle.fontFamily;
+        contextMenu.style.top = posy + 'px';
+        contextMenu.style.left = posx + 'px';
+
+
+
+        const contextMenuList = document.createElement('ul');
+        contextMenuList.className = 'context-menu-items';
+        contextMenu.append(contextMenuList);
+
+        menuEntries.forEach(function(entry) {
+            let contextMenuEntry = document.createElement('a');
+            contextMenuEntry.innerHTML = entry['name'];
+            contextMenuEntry.addEventListener("click", function() {
+                entry['func']();
+            });
+            contextMenuList.append(contextMenuEntry);
+
+        });
+
+        gradioApp().appendChild(contextMenu);
+
+        let menuWidth = contextMenu.offsetWidth + 4;
+        let menuHeight = contextMenu.offsetHeight + 4;
+
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+
+        if ((windowWidth - posx) < menuWidth) {
+            contextMenu.style.left = windowWidth - menuWidth + "px";
+        }
+
+        if ((windowHeight - posy) < menuHeight) {
+            contextMenu.style.top = windowHeight - menuHeight + "px";
+        }
+
+    }
+
+    function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
+
+        var currentItems = menuSpecs.get(targetElementSelector);
+
+        if (!currentItems) {
+            currentItems = [];
+            menuSpecs.set(targetElementSelector, currentItems);
+        }
+        let newItem = {
+            id: targetElementSelector + '_' + uid(),
+            name: entryName,
+            func: entryFunction,
+            isNew: true
+        };
+
+        currentItems.push(newItem);
+        return newItem['id'];
+    }
+
+    function removeContextMenuOption(uid) {
+        menuSpecs.forEach(function(v) {
+            let index = -1;
+            v.forEach(function(e, ei) {
+                if (e['id'] == uid) {
+                    index = ei;
+                }
+            });
+            if (index >= 0) {
+                v.splice(index, 1);
+            }
+        });
+    }
+
+    function addContextMenuEventListener() {
+        if (eventListenerApplied) {
+            return;
+        }
+        gradioApp().addEventListener("click", function(e) {
+            if (!e.isTrusted) {
+                return;
+            }
+
+            let oldMenu = gradioApp().querySelector('#context-menu');
+            if (oldMenu) {
+                oldMenu.remove();
+            }
+        });
+        gradioApp().addEventListener("contextmenu", function(e) {
+            let oldMenu = gradioApp().querySelector('#context-menu');
+            if (oldMenu) {
+                oldMenu.remove();
+            }
+            menuSpecs.forEach(function(v, k) {
+                if (e.composedPath()[0].matches(k)) {
+                    showContextMenu(e, e.composedPath()[0], v);
+                    e.preventDefault();
+                }
+            });
+        });
+        eventListenerApplied = true;
+
+    }
+
+    return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
+};
+
+var initResponse = contextMenuInit();
+var appendContextMenuOption = initResponse[0];
+var removeContextMenuOption = initResponse[1];
+var addContextMenuEventListener = initResponse[2];
+
+(function() {
+    //Start example Context Menu Items
+    let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
+        let genbutton = gradioApp().querySelector(genbuttonid);
+        let interruptbutton = gradioApp().querySelector(interruptbuttonid);
+        if (!interruptbutton.offsetParent) {
+            genbutton.click();
+        }
+        clearInterval(window.generateOnRepeatInterval);
+        window.generateOnRepeatInterval = setInterval(function() {
+            if (!interruptbutton.offsetParent) {
+                genbutton.click();
+            }
+        },
+        500);
+    };
+
+    appendContextMenuOption('#txt2img_generate', 'Generate forever', function() {
+        generateOnRepeat('#txt2img_generate', '#txt2img_interrupt');
+    });
+    appendContextMenuOption('#img2img_generate', 'Generate forever', function() {
+        generateOnRepeat('#img2img_generate', '#img2img_interrupt');
+    });
+
+    let cancelGenerateForever = function() {
+        clearInterval(window.generateOnRepeatInterval);
+    };
+
+    appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
+    appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever);
+
+})();
+//End example Context Menu Items
+
+onUiUpdate(function() {
+    addContextMenuEventListener();
+});
diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index fe008924..5803daea 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -1,11 +1,11 @@
 // allows drag-dropping files into gradio image elements, and also pasting images from clipboard
 
-function isValidImageList( files ) {
+function isValidImageList(files) {
     return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
 }
 
-function dropReplaceImage( imgWrap, files ) {
-    if ( ! isValidImageList( files ) ) {
+function dropReplaceImage(imgWrap, files) {
+    if (!isValidImageList(files)) {
         return;
     }
 
@@ -14,46 +14,61 @@ function dropReplaceImage( imgWrap, files ) {
     imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
     const callback = () => {
         const fileInput = imgWrap.querySelector('input[type="file"]');
-        if ( fileInput ) {
-            if ( files.length === 0 ) {
+        if (fileInput) {
+            if (files.length === 0) {
                 files = new DataTransfer();
                 files.items.add(tmpFile);
                 fileInput.files = files.files;
             } else {
                 fileInput.files = files;
             }
-            fileInput.dispatchEvent(new Event('change'));   
+            fileInput.dispatchEvent(new Event('change'));
         }
     };
-    
-    if ( imgWrap.closest('#pnginfo_image') ) {
+
+    if (imgWrap.closest('#pnginfo_image')) {
         // special treatment for PNG Info tab, wait for fetch request to finish
         const oldFetch = window.fetch;
-        window.fetch = async (input, options) => {
+        window.fetch = async(input, options) => {
             const response = await oldFetch(input, options);
-            if ( 'api/predict/' === input ) {
+            if ('api/predict/' === input) {
                 const content = await response.text();
                 window.fetch = oldFetch;
-                window.requestAnimationFrame( () => callback() );
+                window.requestAnimationFrame(() => callback());
                 return new Response(content, {
                     status: response.status,
                     statusText: response.statusText,
                     headers: response.headers
-                })
+                });
             }
             return response;
-        };        
+        };
     } else {
-        window.requestAnimationFrame( () => callback() );
+        window.requestAnimationFrame(() => callback());
     }
 }
 
+function eventHasFiles(e) {
+    if (!e.dataTransfer || !e.dataTransfer.files) return false;
+    if (e.dataTransfer.files.length > 0) return true;
+    if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true;
+
+    return false;
+}
+
+function dragDropTargetIsPrompt(target) {
+    if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true;
+    if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true;
+    return false;
+}
+
 window.document.addEventListener('dragover', e => {
     const target = e.composedPath()[0];
-    const imgWrap = target.closest('[data-testid="image"]');
-    if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
-        return;
-    }
+    if (!eventHasFiles(e)) return;
+
+    var targetImage = target.closest('[data-testid="image"]');
+    if (!dragDropTargetIsPrompt(target) && !targetImage) return;
+
     e.stopPropagation();
     e.preventDefault();
     e.dataTransfer.dropEffect = 'copy';
@@ -61,37 +76,55 @@ window.document.addEventListener('dragover', e => {
 
 window.document.addEventListener('drop', e => {
     const target = e.composedPath()[0];
-    if (target.placeholder.indexOf("Prompt") == -1) {
-        return;
+    if (!eventHasFiles(e)) return;
+
+    if (dragDropTargetIsPrompt(target)) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
+
+        const imgParent = gradioApp().getElementById(prompt_target);
+        const files = e.dataTransfer.files;
+        const fileInput = imgParent.querySelector('input[type="file"]');
+        if (fileInput) {
+            fileInput.files = files;
+            fileInput.dispatchEvent(new Event('change'));
+        }
     }
-    const imgWrap = target.closest('[data-testid="image"]');
-    if ( !imgWrap ) {
+
+    var targetImage = target.closest('[data-testid="image"]');
+    if (targetImage) {
+        e.stopPropagation();
+        e.preventDefault();
+        const files = e.dataTransfer.files;
+        dropReplaceImage(targetImage, files);
         return;
     }
-    e.stopPropagation();
-    e.preventDefault();
-    const files = e.dataTransfer.files;
-    dropReplaceImage( imgWrap, files );
 });
 
 window.addEventListener('paste', e => {
     const files = e.clipboardData.files;
-    if ( ! isValidImageList( files ) ) {
+    if (!isValidImageList(files)) {
         return;
     }
 
     const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
-        .filter(el => uiElementIsVisible(el));
-    if ( ! visibleImageFields.length ) {
+        .filter(el => uiElementIsVisible(el))
+        .sort((a, b) => uiElementInSight(b) - uiElementInSight(a));
+
+
+    if (!visibleImageFields.length) {
         return;
     }
-    
+
     const firstFreeImageField = visibleImageFields
         .filter(el => el.querySelector('input[type=file]'))?.[0];
 
     dropReplaceImage(
         firstFreeImageField ?
-        firstFreeImageField :
-        visibleImageFields[visibleImageFields.length - 1]
-    , files );
+            firstFreeImageField :
+            visibleImageFields[visibleImageFields.length - 1]
+        , files
+    );
 });
diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index d2c2f190..ffa73147 100644
--- a/javascript/edit-attention.js
+++ b/javascript/edit-attention.js
@@ -1,120 +1,120 @@
-function keyupEditAttention(event){

-	let target = event.originalTarget || event.composedPath()[0];

-	if (! target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return;

-	if (! (event.metaKey || event.ctrlKey)) return;

-

-	let isPlus = event.key == "ArrowUp"

-	let isMinus = event.key == "ArrowDown"

-	if (!isPlus && !isMinus) return;

-

-	let selectionStart = target.selectionStart;

-	let selectionEnd = target.selectionEnd;

-	let text = target.value;

-

-    function selectCurrentParenthesisBlock(OPEN, CLOSE){

-        if (selectionStart !== selectionEnd) return false;

-

-		// Find opening parenthesis around current cursor

-		const before = text.substring(0, selectionStart);

-		let beforeParen = before.lastIndexOf(OPEN);

-		if (beforeParen == -1) return false;

-		let beforeParenClose = before.lastIndexOf(CLOSE);

-		while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {

-			beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);

-			beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);

-		}

-

-		// Find closing parenthesis around current cursor

-		const after = text.substring(selectionStart);

-		let afterParen = after.indexOf(CLOSE);

-		if (afterParen == -1) return false;

-		let afterParenOpen = after.indexOf(OPEN);

-		while (afterParenOpen !== -1 && afterParen > afterParenOpen) {

-			afterParen = after.indexOf(CLOSE, afterParen + 1);

-			afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);

-		}

-		if (beforeParen === -1 || afterParen === -1) return false;

-

-		// Set the selection to the text between the parenthesis

-		const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);

-		const lastColon = parenContent.lastIndexOf(":");

-		selectionStart = beforeParen + 1;

-		selectionEnd = selectionStart + lastColon;

-		target.setSelectionRange(selectionStart, selectionEnd);

-		return true;

-    }

-    

-    function selectCurrentWord(){

-        if (selectionStart !== selectionEnd) return false;

-        const delimiters = opts.keyedit_delimiters + " \r\n\t";

-        

-        // seek backward until to find beggining

-        while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {

-            selectionStart--;

-        }

-        

-        // seek forward to find end

-        while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) {

-            selectionEnd++;

-        }

-

-        target.setSelectionRange(selectionStart, selectionEnd);

-        return true;

-    }

-

-	// If the user hasn't selected anything, let's select their current parenthesis block or word

-    if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {

-        selectCurrentWord();

-    }

-

-	event.preventDefault();

-

-    var closeCharacter = ')'

-    var delta = opts.keyedit_precision_attention

-

-    if (selectionStart > 0 && text[selectionStart - 1] == '<'){

-        closeCharacter = '>'

-        delta = opts.keyedit_precision_extra

-    } else if (selectionStart == 0 || text[selectionStart - 1] != "(") {

-

-        // do not include spaces at the end

-        while(selectionEnd > selectionStart && text[selectionEnd-1] == ' '){

-            selectionEnd -= 1;

-        }

-        if(selectionStart == selectionEnd){

-            return

-        }

-

-        text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);

-

-        selectionStart += 1;

-        selectionEnd += 1;

-    }

-

-	var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;

-	var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));

-	if (isNaN(weight)) return;

-

-	weight += isPlus ? delta : -delta;

-	weight = parseFloat(weight.toPrecision(12));

-	if(String(weight).length == 1) weight += ".0"

-

-    if (closeCharacter == ')' && weight == 1) {

-        text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5);

-        selectionStart--;

-        selectionEnd--;