1580158
/
Auto-Photoshop-StableDiffusion-Plugin
mirror of https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'pr/Kyxsune/53' into merge_hi_res_new

merge_hi_res_new
Abdullah Alfaraj 2023-01-15 04:54:32 +03:00
parent 1746523d74 fbfcecec5e
commit 87e9eaec19
5 changed files with 117 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -12,3 +12,5 @@ server/python_server/init_images/*
node_modules/
server/python_server/prompt_shortcut.json
experimental/
start_server.sh
start_server.bat

17
html_manip.js
View File

@ -66,6 +66,19 @@ function autoFillInHeight(height_value){
//update the label
document.getElementById('lHeight').innerHTML = `${height_value}`
}
function autoFillInHRHeight(height_value){
document.getElementById('hrHeight').value = `${height_value / 64}`
//update the label
document.getElementById('hHeight').innerHTML = `${height_value}`
}
function autoFillInHRWidth(height_value){
document.getElementById('hrWidth').value = `${height_value / 64}`
//update the label
document.getElementById('hWidth').innerHTML = `${height_value}`
}
////// End Height//////////
@ -428,5 +441,7 @@ module.exports = {
defaultSettings,
autoFillDefaultSettings,
getMaskBlur,
getUseSharpMask
getUseSharpMask,
autoFillInHRHeight,
autoFillInHRWidth
}

48
index.html
View File

@ -554,7 +554,7 @@
<sp-label class="labelNumber" slot="label" id="lHeight">512</sp-label>
</sp-slider>
</div>
<div id='hi-res-sliders-container' style="display:none;">
<!-- <div id='hi-res-sliders-container' style="display:none;">
<sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
<sp-label slot="label">Hi Res Width:</sp-label>
<sp-label class="labelNumber" slot="label" id="hWidth">512</sp-label>
@ -567,7 +567,7 @@
<sp-label slot="label">Hi Res Denoising:</sp-label>
<sp-label class="labelNumber" slot="label" id="hDenoisingStrength">0.7</sp-label>
</sp-slider>
</div>
</div> -->
<div style="display:flex;">
<sp-slider show-value="true" id="slCfgScale" min="1" max="30" value="7">
@ -597,8 +597,44 @@
<sp-radio class="rbMaskContent" value="3">latent nothing</sp-radio>
</sp-radio-group>
</div>
<sp-checkbox id="chInpaintFullRes">Inpaint at Full Res</sp-checkbox>
<!-- <sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox> -->
<div>
<sp-checkbox id="chInpaintFullRes">Inpaint at Full Res</sp-checkbox>
<sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox>
</div>
<div id="HiResDiv" style="display:none;">
<div style="display:flex;">
<div>
<sp-label>Upscaler: </sp-label>
<sp-picker size="m" label="Upscaler Options">
<sp-menu id="hrModelsMenu" slot="options">
<!-- <sp-menu-item> item </sp-menu-item> -->
</sp-menu>
</sp-picker>
</div>
<div>
<sp-label>Hi Res Steps:</sp-label><sp-textfield id="hrNumberOfSteps" type="number" placeholder="20"
value="20" style="margin-top: 3px; width:auto;"></sp-textfield>
</div>
</div>
<div id='hi-res-sliders-container' style="display:flex;">
<sp-slider show-value="false" id="hrWidth" min="1" max="32" value="8">
<sp-label slot="label">Hi Res Output Width:</sp-label>
<sp-label class="labelNumber" slot="label" id="hWidth">512</sp-label>
</sp-slider>
<sp-slider show-value="false" id="hrHeight" min="1" max="32" value="8">
<sp-label slot="label">Hi Res Output Height:</sp-label>
<sp-label class="labelNumber" slot="label" id="hHeight">512</sp-label>
</sp-slider>
<sp-slider show-value="false" id="hrDenoisingStrength" min="0" max="100" value="70">
<sp-label slot="label"> High Res Denoising Strength:</sp-label>
<sp-label slot="label" id="hDenoisingStrength">0.7</sp-label>
</sp-slider>
</div>
</div>
<sp-slider show-value="false" id="slInpaintPadding" min="0" max="64" value="0">
<sp-label slot="label" id="lNameInpaintPdding">Inpaint Padding:</sp-label>
<sp-label class="labelNumber" slot="label" id="lInpaintPadding">0</sp-label>
@ -609,7 +645,7 @@
</div>
<div>
<sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox>
<!-- <sp-checkbox id="chHiResFixs">Hi Res Fix</sp-checkbox> -->
<div style="display:flex">
<sp-label>Seed:</sp-label><sp-textfield id="tiSeed" placeholder="Seed" value="-1"></sp-textfield>
<button class="btnSquare" id="btnRandomSeed" style="margin-right: 3px; margin-left: 3px;">Random</button>
@ -636,8 +672,6 @@
<sp-radio class="rbSampler" value="DPM++ 2S a Karras">DPM++ 2S a Karras</sp-radio>
<sp-radio class="rbSampler" value="DPM++ 2M Karras">DPM++ 2M Karras</sp-radio>
<sp-radio class="rbSampler" value="DPM++ SDE Karras">DPM++ SDE Karras</sp-radio>
</sp-radio-group>
</div>
</div>

71
index.js
View File

@ -27,7 +27,7 @@ const eventHandler = async (event, descriptor) => {
const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
if (isSelectionActive){
const current_selection = isSelectionActive // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
const [final_width,final_height] = await selection.selectionToFinalWidthHeight()
const [final_width,final_height,initial_width,initial_height] = await selection.selectionToFinalWidthHeight()
console.log("(final_width,final_height):",final_width,final_height)
console.log(event, descriptor)
html_manip.autoFillInWidth(final_width)
@ -35,6 +35,8 @@ const eventHandler = async (event, descriptor) => {
console.log(` (${final_width}* ${final_height})/(${current_selection.width} * ${current_selection.height})`)
console.log("detail density: ",(final_width* final_height)/(current_selection.width * current_selection.height))
html_manip.autoFillInHRWidth(initial_width)
html_manip.autoFillInHRHeight(initial_height)
// if selection has changed : change the color and text generate btn "Generate" color "red"
// const new_selection = await psapi.getSelectionInfoExe()
if(await hasSelectionChanged(current_selection,g_selection)){
@ -355,8 +357,6 @@ function promptShortcutExample(){
document.getElementById('taPromptShortcut').value = JSONInPrettyFormat
}
function autoFillInSettings(metadata_json){
try{
@ -573,7 +573,7 @@ document.addEventListener("mouseenter",async (event)=>{
const new_selection = await psapi.getSelectionInfoExe()
if(await hasSelectionChanged(new_selection,g_selection)){
const [final_width,final_height] = await selection.selectionToFinalWidthHeight()
const [final_width,final_height,initial_width,initial_height] = await selection.selectionToFinalWidthHeight()
console.log("(final_width,final_height):",final_width,final_height)
html_manip.autoFillInWidth(final_width)
@ -581,7 +581,9 @@ document.addEventListener("mouseenter",async (event)=>{
console.log(`(${new_selection.width} * ${new_selection.height}) /(${final_width}* ${final_height})`)
console.log("detail density: ",(new_selection.width * new_selection.height) /(final_width* final_height))
html_manip.autoFillInHRWidth(initial_width)
html_manip.autoFillInHRHeight(initial_height)
sessionStartHtml(false)//generate ,red color
}else{
sessionStartHtml(true)//generate more, green color
@ -661,7 +663,7 @@ function displayUpdate () {
document.getElementById('chHiResFixs').style.display = 'flex'
if(html_manip.getHiResFixs()){
document.getElementById('hi-res-sliders-container').style.display = 'flex'
document.getElementById('HiResDiv').style.display = 'block'
}
document.getElementById('slInpaintPadding').style.display = 'none'
@ -678,7 +680,7 @@ function displayUpdate () {
document.getElementById('init_image_mask_container').style.display = 'none' // hide mask
document.getElementById('slInpainting_fill').style.display = 'none' // hide inpainting fill mode
// document.getElementById('btnSnapAndFill').style.display = 'inline-flex' // hide snap and fill button mode
document.getElementById('hi-res-sliders-container').style.display = 'none'
document.getElementById('HiResDiv').style.display = 'none'
document.getElementById('chInpaintFullRes').style.display = 'none'
document.getElementById('slInpaintPadding').style.display = 'none'
document.getElementById("slMaskBlur").style.display = 'none'
@ -698,7 +700,7 @@ function displayUpdate () {
document.getElementById('slInpainting_fill').style.display = 'block'
document.getElementById('init_image_container').style.display = 'block' // hide init image
document.getElementById('hi-res-sliders-container').style.display = 'none'
document.getElementById('HiResDiv').style.display = 'none'
document.getElementById('chInpaintFullRes').style.display = 'inline-flex'
if(document.getElementById('chInpaintFullRes').checked){
@ -894,6 +896,10 @@ document.querySelector('#hrWidth').addEventListener('input', evt => {
hWidth = sliderToResolution(evt.target.value)
document.querySelector('#hWidth').textContent = hWidth
})
//document.querySelector('#hrScale').addEventListener('input', evt => {
// hScale = sliderToResolution(evt.target.value)
// document.querySelector('#hScale').textContent = hScale
//})
document.querySelector('#slInpaintPadding').addEventListener('input', evt => {
padding = evt.target.value * 4
document.querySelector('#lInpaintPadding').textContent = padding
@ -1398,8 +1404,6 @@ function updateMetadata (new_metadata) {
async function getSettings(){
let payload = {}
try{
numberOfImages = document.querySelector('#tiNumberOfImages').value
numberOfSteps = document.querySelector('#tiNumberOfSteps').value
const prompt = html_manip.getPrompt()
@ -1408,6 +1412,7 @@ async function getSettings(){
// console.log("prompt:",prompt)
// console.log("negative_prompt:",negative_prompt)
const model_index = document.querySelector('#mModelsMenu').selectedIndex
const upscaler = document.querySelector('#hrModelsMenu').value
const cfg_scale = document.querySelector('#slCfgScale').value
// const model_index = document.querySelector("#")
const seed = document.querySelector('#tiSeed').value
@ -1433,6 +1438,8 @@ async function getSettings(){
const height = html_manip.getHeight()
const hWidth = html_manip.getSliderSdValue('hrWidth',64)
const hHeight = html_manip.getSliderSdValue('hrHeight',64)
const hSteps = html_manip.getSliderSdValue('hrNumberOfSteps',1)
//const hScale = html_manip.getSliderSdValue('hrScale',1)
console.log("Check")
const uniqueDocumentId = await getUniqueDocumentId()
@ -1473,13 +1480,16 @@ async function getSettings(){
payload['denoising_strength'] = denoising_strength
payload['init_image_name'] = g_init_image_name
}
if(hi_res_fix){
payload['enable_hr'] = hi_res_fix
payload['firstphase_width'] = hWidth
payload['firstphase_height'] = hHeight
payload['firstphase_width'] = width
payload['firstphase_height'] = height
payload['hr_resize_x'] = hWidth
payload['hr_resize_y'] = hHeight
// payload['hr_scale'] = hScale // Scale
payload['hr_upscaler'] = upscaler // Upscaler
payload['hr_second_pass_steps'] = hSteps // Number of Steps
}else{
//fix hi res bug: if we include firstphase_width or firstphase_height in the payload,
// sd api will use them instead of using width and height variables, even when enable_hr is set to "false"
@ -2570,4 +2580,37 @@ document
})
// Hi res fix stuff
var hr_models = [
"Latent",
"Latent (antialiased)",
"Latent (bicubic)",
"Latent (bicubic antialiased)",
"Latent (nearest)",
"Latent (nearest-exact)",
"Lanczos",
"Nearest",
"ESRGAN",
"RealESRGAN",
"LDSR",
"SwinIR"
]
for (let model of hr_models) {
// console.log(model.title)
const menu_item_element = document.createElement('sp-menu-item')
menu_item_element.className = "hrModelsMenuItem"
menu_item_element.innerHTML = model
document.getElementById('hrModelsMenu').appendChild(menu_item_element)
}
var chHiResFixs = document.getElementById("chHiResFixs");
var div = document.getElementById("HiResDiv");
chHiResFixs.addEventListener("change", function() {
if (chHiResFixs.checked) {
div.style.display = "block";
} else {
div.style.display = "none";
}
});

2
selection.js
View File

@ -31,7 +31,7 @@ async function selectionToFinalWidthHeight(){
const selectionInfo = await getSelectionInfoExe()
const [finalWidth,finalHeight] = finalWidthHeight(selectionInfo.width,selectionInfo.height,512,512)
return [parseInt(finalWidth),parseInt(finalHeight)]
return [parseInt(finalWidth),parseInt(finalHeight),selectionInfo.width,selectionInfo.height]
}catch(e){
console.warn("you need a rectangular selection",e)
}