diff options
| author | AUTOMATIC1111 <16777216c@gmail.com> | 2022-09-22 08:15:35 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-09-22 08:15:35 +0300 |
| commit | e235d4e691e81cc3628da762b3f4ace936a44036 (patch) | |
| tree | aaf99ae3cb8fcd1b3b47cc8988ac5fc4dcea2324 | |
| parent | aa1d1bf44ece3f0495873fc3129d2dba664f8c2f (diff) | |
| parent | 013e9a4bdabb1438d60dbbea3c121a88e43c518e (diff) | |
Merge pull request #824 from dfaker/patch-6
Aspect ratio overlay on img2img
| -rw-r--r-- | javascript/aspectRatioOverlay.js | 124 | ||||
| -rw-r--r-- | style.css | 11 |
2 files changed, 135 insertions, 0 deletions
diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js new file mode 100644 index 00000000..52e9f381 --- /dev/null +++ b/javascript/aspectRatioOverlay.js @@ -0,0 +1,124 @@ +
+let currentWidth = null;
+let currentHeight = null;
+let arFrameTimeout = setTimeout(function(){},0);
+
+function dimensionChange(e,dimname){
+
+ if(dimname == 'Width'){
+ currentWidth = e.target.value*1.0
+ }
+ if(dimname == 'Height'){
+ currentHeight = e.target.value*1.0
+ }
+
+ var inImg2img = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
+
+ if(!inImg2img){
+ return;
+ }
+
+ var img2imgMode = gradioApp().querySelector("input[name=radio-img2img_mode]:checked")
+ if(img2imgMode){
+ img2imgMode=img2imgMode.value
+ }else{
+ return;
+ }
+
+ var redrawImage = gradioApp().querySelector('div[data-testid=image] img');
+ var inpaintImage = gradioApp().querySelector('#img2maskimg div[data-testid=image] img')
+
+ var targetElement = null;
+
+ if(img2imgMode=='Redraw whole image' && redrawImage){
+ targetElement = redrawImage;
+ }else if(img2imgMode=='Inpaint a part of image' && inpaintImage){
+ targetElement = inpaintImage;
+ }else if(img2imgMode=='SD upscale' && redrawImage){
+ targetElement = redrawImage;
+ }
+
+ if(targetElement){
+
+ var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+ if(!arPreviewRect){
+ arPreviewRect = document.createElement('div')
+ arPreviewRect.id = "imageARPreview";
+ gradioApp().getRootNode().appendChild(arPreviewRect)
+ }
+
+
+
+ var viewportOffset = targetElement.getBoundingClientRect();
+
+ viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )
+
+ scaledx = targetElement.naturalWidth*viewportscale
+ scaledy = targetElement.naturalHeight*viewportscale
+
+ cleintRectTop = (viewportOffset.top+window.scrollY)
+ cleintRectLeft = (viewportOffset.left+window.scrollX)
+ cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2)
+ cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)
+
+ viewRectTop = cleintRectCentreY-(scaledy/2)
+ viewRectLeft = cleintRectCentreX-(scaledx/2)
+ arRectWidth = scaledx
+ arRectHeight = scaledy
+
+ arscale = Math.min( arRectWidth/currentWidth, arRectHeight/currentHeight )
+ arscaledx = currentWidth*arscale
+ arscaledy = currentHeight*arscale
+
+ arRectTop = cleintRectCentreY-(arscaledy/2)
+ arRectLeft = cleintRectCentreX-(arscaledx/2)
+ arRectWidth = arscaledx
+ 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 inImg2img = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
+ if(inImg2img){
+ let inputs = gradioApp().querySelectorAll('input');
+ inputs.forEach(function(e){
+ let parentLabel = e.parentElement.querySelector('label')
+ if(parentLabel && parentLabel.innerText){
+ if(!e.classList.contains('scrollwatch')){
+ if(parentLabel.innerText == 'Width' || parentLabel.innerText == 'Height'){
+ e.addEventListener('input', function(e){dimensionChange(e,parentLabel.innerText)} )
+ e.classList.add('scrollwatch')
+ }
+ if(parentLabel.innerText == 'Width'){
+ currentWidth = e.value*1.0
+ }
+ if(parentLabel.innerText == 'Height'){
+ currentHeight = e.value*1.0
+ }
+ }
+ }
+ })
+ }
+});
+
+
+
@@ -337,6 +337,17 @@ input[type="range"]{ background-color: rgba(0, 0, 0, 0.8);
}
+#imageARPreview{
+ position:absolute;
+ top:0px;
+ left:0px;
+ border:2px solid red;
+ background:rgba(255, 0, 0, 0.3);
+ z-index: 900;
+ pointer-events:none;
+ display:none
+}
+
#interrupt{
position: absolute;
width: 100%;
|