Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
S
stable-diffusion-webui
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
stable-diffusion-webui
Commits
e235d4e6
Unverified
Commit
e235d4e6
authored
Sep 22, 2022
by
AUTOMATIC1111
Committed by
GitHub
Sep 22, 2022
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #824 from dfaker/patch-6
Aspect ratio overlay on img2img
parents
aa1d1bf4
013e9a4b
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
135 additions
and
0 deletions
+135
-0
aspectRatioOverlay.js
javascript/aspectRatioOverlay.js
+124
-0
style.css
style.css
+11
-0
No files found.
javascript/aspectRatioOverlay.js
0 → 100644
View file @
e235d4e6
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
}
}
}
})
}
});
style.css
View file @
e235d4e6
...
@@ -337,6 +337,17 @@ input[type="range"]{
...
@@ -337,6 +337,17 @@ input[type="range"]{
background-color
:
rgba
(
0
,
0
,
0
,
0.8
);
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
{
#interrupt
{
position
:
absolute
;
position
:
absolute
;
width
:
100%
;
width
:
100%
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment