mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2024-12-29 19:05:05 +08:00
Fix img2img aspect ratio overlay in Gradio 3.23.0
This commit is contained in:
parent
91ae48fd7e
commit
945f6e5e99
@ -12,7 +12,7 @@ function dimensionChange(e, is_width, is_height){
|
||||
currentHeight = e.target.value*1.0
|
||||
}
|
||||
|
||||
var inImg2img = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
|
||||
var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
|
||||
|
||||
if(!inImg2img){
|
||||
return;
|
||||
@ -22,7 +22,7 @@ function dimensionChange(e, is_width, is_height){
|
||||
|
||||
var tabIndex = get_tab_index('mode_img2img')
|
||||
if(tabIndex == 0){ // img2img
|
||||
targetElement = gradioApp().querySelector('div[data-testid=image] img');
|
||||
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
|
||||
@ -30,7 +30,7 @@ function dimensionChange(e, is_width, is_height){
|
||||
} else if(tabIndex == 3){ // Inpaint sketch
|
||||
targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(targetElement){
|
||||
|
||||
@ -38,7 +38,7 @@ function dimensionChange(e, is_width, is_height){
|
||||
if(!arPreviewRect){
|
||||
arPreviewRect = document.createElement('div')
|
||||
arPreviewRect.id = "imageARPreview";
|
||||
gradioApp().getRootNode().appendChild(arPreviewRect)
|
||||
gradioApp().appendChild(arPreviewRect)
|
||||
}
|
||||
|
||||
|
||||
@ -91,23 +91,26 @@ onUiUpdate(function(){
|
||||
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){
|
||||
var is_width = e.parentElement.id == "img2img_width"
|
||||
var is_height = e.parentElement.id == "img2img_height"
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
11
style.css
11
style.css
@ -507,6 +507,17 @@ div.dimensions-tools{
|
||||
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;
|
||||
}
|
||||
|
||||
/* context menu (ie for the generate button) */
|
||||
|
||||
#context-menu{
|
||||
|
Loading…
Reference in New Issue
Block a user