19 files changed, 1540 insertions, 1456 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..77a24a07 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,44 +14,44 @@ 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());
     }
 }
 
 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) {
+    if (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
         return;
     }
     e.stopPropagation();
@@ -65,33 +65,37 @@ window.document.addEventListener('drop', e => {
         return;
     }
     const imgWrap = target.closest('[data-testid="image"]');
-    if ( !imgWrap ) {
+    if (!imgWrap) {
         return;
     }
     e.stopPropagation();
     e.preventDefault();
     const files = e.dataTransfer.files;
-    dropReplaceImage( imgWrap, 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--;
-    } else {
-        text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1);
-    }
-
-	target.focus();
-	target.value = text;
-	target.selectionStart = selectionStart;
-	target.selectionEnd = selectionEnd;
-
-	updateInput(target)
-}
-
-addEventListener('keydown', (event) => {
-    keyupEditAttention(event);
-});
+function keyupEditAttention(event) {
+    let target = event.originalTarget || event.composedPath()[0];
+    if (!target.matches("*:is([id*='_toprow'] [id*='_prompt'], .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 = '>';