3 files changed, 50 insertions, 9 deletions
diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index 52e9f381..96f1c00d 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -18,9 +18,9 @@ function dimensionChange(e,dimname){
 		return;
 	}
 
-	var img2imgMode = gradioApp().querySelector("input[name=radio-img2img_mode]:checked")
+	var img2imgMode = gradioApp().querySelector('#mode_img2img.tabs > div > button.rounded-t-lg.border-gray-200')
 	if(img2imgMode){
-		img2imgMode=img2imgMode.value
+		img2imgMode=img2imgMode.innerText
 	}else{
 		return;
 	}
@@ -30,12 +30,10 @@ function dimensionChange(e,dimname){
 
 	var targetElement = null;
 
-	if(img2imgMode=='Redraw whole image' && redrawImage){
+	if(img2imgMode=='img2img' && redrawImage){
 		targetElement = redrawImage;
-	}else if(img2imgMode=='Inpaint a part of image' && inpaintImage){
+	}else if(img2imgMode=='Inpaint' && inpaintImage){
 		targetElement = inpaintImage;
-	}else if(img2imgMode=='SD upscale' && redrawImage){
-		targetElement = redrawImage;
 	}
 
 	if(targetElement){
@@ -119,6 +117,3 @@ onUiUpdate(function(){
 		})
 	}
 });
-
-
-
diff --git a/javascript/hints.js b/javascript/hints.js
index 65a67d50..9d3eecf3 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -59,6 +59,7 @@ titles = {
 
     "Images filename pattern": "Use following tags to define how filenames for images are chosen: [steps], [cfg], [prompt], [prompt_spaces], [width], [height], [sampler], [seed], [model_hash], [prompt_words], [date]; 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], [sampler], [seed], [model_hash], [prompt_words], [date]; 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.",
     "Loops": "How many times to repeat processing an image and using it as input for the next iteration",
diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js
new file mode 100644
index 00000000..3d77bfe9
--- /dev/null
+++ b/javascript/imageMaskFix.js
@@ -0,0 +1,45 @@
+/**
+ * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
+ * @see https://github.com/gradio-app/gradio/issues/1721
+ */
+window.addEventListener( 'resize', () => imageMaskResize());
+function imageMaskResize() {
+    const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
+    if ( ! canvases.length ) {
+    canvases_fixed = false;
+    window.removeEventListener( 'resize', imageMaskResize );
+    return;
+    }
+
+    const wrapper = canvases[0].closest('.touch-none');
+    const previewImage = wrapper.previousElementSibling;
+
+    if ( ! previewImage.complete ) {
+        previewImage.addEventListener( 'load', () => imageMaskResize());
+        return;
+    }
+
+    const w = previewImage.width;
+    const h = previewImage.height;
+    const nw = previewImage.naturalWidth;
+    const nh = previewImage.naturalHeight;
+    const portrait = nh > nw;
+    const factor = portrait;
+
+    const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw);
+    const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh);
+
+    wrapper.style.width = `${wW}px`;
+    wrapper.style.height = `${wH}px`;
+    wrapper.style.left = `${(w-wW)/2}px`;
+    wrapper.style.top = `${(h-wH)/2}px`;
+
+    canvases.forEach( c => {
+        c.style.width = c.style.height = '';
+        c.style.maxWidth = '100%';
+        c.style.maxHeight = '100%';
+        c.style.objectFit = 'contain';
+    });
+ }
+  
+ onUiUpdate(() => imageMaskResize());
+\ No newline at end of file