4238 lines
160 KiB
JavaScript
4238 lines
160 KiB
JavaScript
// import {helloHelper} from 'helper.js'
|
||
// helloHelper2 = require('./helper.js')
|
||
// for organizational proposes
|
||
// let g_sdapi_path = 'sdapi'
|
||
let g_version = 'v1.1.10'
|
||
let g_sd_url = 'http://127.0.0.1:7860'
|
||
const Enum = require('./enum')
|
||
const helper = require('./helper')
|
||
// let g_sdapi_path = 'sdapi_py_re'
|
||
// const sdapi = require(`./${g_sdapi_path}`)
|
||
const sdapi = require('./sdapi_py_re')
|
||
|
||
// const exportHelper = require('./export_png')
|
||
const outpaint = require('./outpaint')
|
||
const psapi = require('./psapi')
|
||
const app = window.require('photoshop').app
|
||
|
||
const { batchPlay } = require('photoshop').action
|
||
const { executeAsModal } = require('photoshop').core
|
||
const dialog_box = require('./dialog_box')
|
||
// const {entrypoints} = require('uxp')
|
||
const html_manip = require('./utility/html_manip')
|
||
// const export_png = require('./export_png')
|
||
const viewer = require('./viewer')
|
||
const selection = require('./selection')
|
||
const layer_util = require('./utility/layer')
|
||
const sd_options = require('./utility/sdapi/options')
|
||
const sd_config = require('./utility/sdapi/config')
|
||
const session = require('./utility/session')
|
||
const ui = require('./utility/ui')
|
||
const script_horde = require('./utility/sd_scripts/horde')
|
||
const prompt_shortcut = require('./utility/sdapi/prompt_shortcut')
|
||
const formats = require('uxp').storage.formats
|
||
const storage = require('uxp').storage
|
||
const fs = storage.localFileSystem
|
||
const horde_native = require('./utility/sdapi/horde_native')
|
||
const io = require('./utility/io')
|
||
const dummy = require('./utility/dummy')
|
||
const general = require('./utility/general')
|
||
const thumbnail = require('./thumbnail')
|
||
const note = require('./utility/notification')
|
||
let g_horde_generator = new horde_native.hordeGenerator()
|
||
|
||
//REFACTOR: move to session.js
|
||
async function hasSessionSelectionChanged() {
|
||
try {
|
||
const isSelectionActive = await psapi.checkIfSelectionAreaIsActive()
|
||
if (isSelectionActive) {
|
||
const current_selection = isSelectionActive // Note: don't use checkIfSelectionAreaIsActive to return the selection object, change this.
|
||
|
||
if (
|
||
await hasSelectionChanged(
|
||
current_selection,
|
||
g_generation_session.selectionInfo
|
||
)
|
||
) {
|
||
return true
|
||
} else {
|
||
//selection has not changed
|
||
return false
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
return false
|
||
}
|
||
}
|
||
//REFACTOR: move to selection.js, add selection mode as attribute (linked to rbSelectionMode event)
|
||
async function calcWidthHeightFromSelection() {
|
||
//set the width and height, hrWidth, and hrHeight using selection info and selection mode
|
||
const selection_mode = html_manip.getSelectionMode()
|
||
if (selection_mode === 'ratio') {
|
||
//change (width and height) and (hrWidth, hrHeight) to match the ratio of selection
|
||
const [width, height, hr_width, hr_height] =
|
||
await selection.selectionToFinalWidthHeight()
|
||
|
||
html_manip.autoFillInWidth(width)
|
||
html_manip.autoFillInHeight(height)
|
||
html_manip.autoFillInHRWidth(hr_width)
|
||
html_manip.autoFillInHRHeight(hr_height)
|
||
} else if (selection_mode === 'precise') {
|
||
const selectionInfo = await psapi.getSelectionInfoExe()
|
||
const [width, height, hr_width, hr_height] = [
|
||
selectionInfo.width,
|
||
selectionInfo.height,
|
||
0,
|
||
0,
|
||
]
|
||
html_manip.autoFillInWidth(width)
|
||
html_manip.autoFillInHeight(height)
|
||
}
|
||
}
|
||
//REFACTOR: rename to newSelectionEventHandler and move to session.js
|
||
const eventHandler = async (event, descriptor) => {
|
||
try {
|
||
console.log(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.
|
||
|
||
await calcWidthHeightFromSelection()
|
||
|
||
// 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))
|
||
|
||
// const new_selection = await psapi.getSelectionInfoExe()
|
||
|
||
if (
|
||
await hasSelectionChanged(
|
||
current_selection,
|
||
g_generation_session.selectionInfo
|
||
)
|
||
) {
|
||
// endSessionUI //red color
|
||
// if selection has changed : change the color and text generate btn "Generate" color "red"
|
||
// g_ui.endSessionUI()
|
||
// const selected_mode = html_manip.getMode()
|
||
const selected_mode = getCurrentGenerationModeByValue(g_sd_mode)
|
||
g_ui.generateModeUI(selected_mode)
|
||
} else {
|
||
//indicate that the session will continue. only if the session we are in the same mode as the session's mode
|
||
// startSessionUI// green color
|
||
const current_mode = html_manip.getMode()
|
||
if (g_generation_session.isSameMode(current_mode)) {
|
||
// g_ui.startSessionUI()
|
||
g_ui.generateMoreUI()
|
||
}
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
//REFACTOR: move to generation_settings.js
|
||
function getCurrentGenerationModeByValue(value) {
|
||
for (let key in generationMode) {
|
||
if (
|
||
generationMode.hasOwnProperty(key) &&
|
||
generationMode[key] === value
|
||
) {
|
||
return key
|
||
}
|
||
}
|
||
return undefined
|
||
}
|
||
|
||
require('photoshop').action.addNotificationListener(
|
||
['set', 'move'],
|
||
eventHandler
|
||
)
|
||
//REFACTOR: move to document.js
|
||
async function getUniqueDocumentId() {
|
||
try {
|
||
let uniqueDocumentId = await psapi.readUniqueDocumentIdExe()
|
||
|
||
console.log(
|
||
'getUniqueDocumentId(): uniqueDocumentId: ',
|
||
uniqueDocumentId
|
||
)
|
||
|
||
// Regular expression to check if string is a valid UUID
|
||
const regexExp =
|
||
/^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi
|
||
|
||
// String with valid UUID separated by dash
|
||
// const str = 'a24a6ea4-ce75-4665-a070-57453082c256'
|
||
|
||
const isValidId = regexExp.test(uniqueDocumentId) // true
|
||
console.log('isValidId: ', isValidId)
|
||
if (isValidId == false) {
|
||
let uuid = self.crypto.randomUUID()
|
||
console.log(uuid) // for example "36b8f84d-df4e-4d49-b662-bcde71a8764f"
|
||
await psapi.saveUniqueDocumentIdExe(uuid)
|
||
uniqueDocumentId = uuid
|
||
}
|
||
return uniqueDocumentId
|
||
} catch (e) {
|
||
console.warn('warning Document Id may not be valid', e)
|
||
}
|
||
}
|
||
|
||
// document
|
||
// .getElementById('btnLinkCurrentDocument')
|
||
// .addEventListener('click', async () => {
|
||
// await getUniqueDocumentId()
|
||
// })
|
||
|
||
// attach event listeners for tabs
|
||
//REFACTOR: move to html_manip.js (?) - if there is no business logic here and it's only for UI.
|
||
Array.from(document.querySelectorAll('.sp-tab')).forEach((theTab) => {
|
||
theTab.onclick = () => {
|
||
try {
|
||
// localStorage.setItem("currentTab", theTab.getAttribute("id"));
|
||
Array.from(document.querySelectorAll('.sp-tab')).forEach((aTab) => {
|
||
if (aTab.getAttribute('id') === theTab.getAttribute('id')) {
|
||
aTab.classList.add('selected')
|
||
} else {
|
||
aTab.classList.remove('selected')
|
||
}
|
||
})
|
||
Array.from(document.querySelectorAll('.sp-tab-page')).forEach(
|
||
(tabPage) => {
|
||
if (
|
||
tabPage
|
||
.getAttribute('id')
|
||
.startsWith(theTab.getAttribute('id'))
|
||
) {
|
||
tabPage.classList.add('visible-hack')
|
||
} else {
|
||
tabPage.classList.remove('visible-hack')
|
||
}
|
||
}
|
||
)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
})
|
||
//REFACTOR: move to html_manip.js (?)
|
||
document.getElementById('sp-viewer-tab').addEventListener('click', async () => {
|
||
if (
|
||
g_generation_session.isActive() &&
|
||
g_generation_session.mode === 'upscale'
|
||
) {
|
||
g_sd_mode = 'upscale'
|
||
} else {
|
||
g_sd_mode = html_manip.getMode()
|
||
}
|
||
})
|
||
//REFACTOR: move to html_manip.js (?)
|
||
document.getElementById('sp-viewer-tab').addEventListener('click', async () => {
|
||
moveElementToAnotherTab('batchNumberUi', 'batchNumberViewerTabContainer')
|
||
await displayUpdate()
|
||
})
|
||
//REFACTOR: move to html_manip.js (?)
|
||
document
|
||
.getElementById('sp-stable-diffusion-ui-tab')
|
||
.addEventListener('click', () => {
|
||
moveElementToAnotherTab('batchNumberUi', 'batchNumber-steps-container')
|
||
})
|
||
// entrypoints.setup({
|
||
|
||
// panels:{
|
||
// vanilla: ()=>{
|
||
// console.log("you are in the vanilla panel")
|
||
// },
|
||
// experimental_1: ()=>{
|
||
// console.log("you are in the experimental_1 panel")
|
||
|
||
// }
|
||
// }
|
||
// }
|
||
// )
|
||
// just a number that shouldn't unique enough that we will use when save files.
|
||
// each session will get a number from 1 to 1000000
|
||
//REFACTOR: move to session.js
|
||
const random_session_id = Math.floor(Math.random() * 1000000 + 1)
|
||
//REFACTOR: move to helpers.js (or other utility file)
|
||
function getSelectedText() {
|
||
// JavaScript
|
||
// // Obtain the object reference for the <textarea>
|
||
// const txtarea = document.getElementById("taPrompt");
|
||
const promptTextarea = document.querySelector('#taPrompt')
|
||
console.log('promptTextarea: ', promptTextarea.value)
|
||
// // Obtain the index of the first selected character
|
||
var start = promptTextarea.selectionStart
|
||
console.log('start: ', start)
|
||
// // Obtain the index of the last selected character
|
||
// var finish = txtarea.selectionEnd;
|
||
// console.log("finish: ",finish)
|
||
|
||
// // Obtain the selected text
|
||
// var sel = txtarea.value.substring(start, finish);
|
||
// console.log("selected textarea: ", sel)
|
||
|
||
// Do something with the selected content
|
||
}
|
||
//REFACTOR: move to helpers.js
|
||
// setInterval(getSelectedText,2000)
|
||
function getCommentedString() {
|
||
// const text = document.getElementById("taPrompt").value
|
||
// let text = `Visit /*W3Schools
|
||
// cute, girl, painterly
|
||
// *\\ any text
|
||
// and prompt`;
|
||
// let text = `cute cat /*by greg
|
||
|
||
// and artgerm
|
||
|
||
// */ and famous artist`
|
||
let text = `Visit /*W3Schools
|
||
cute, girl, painterly
|
||
*/ any text
|
||
and prompt
|
||
|
||
|
||
|
||
|
||
cute cat /*by greg
|
||
|
||
and artgerm
|
||
|
||
*/ and famous artist`
|
||
console.log('getCommentedString: text: ', text)
|
||
|
||
// let pattern = /(\/)(\*)(\s|\S)*\*\\/g;
|
||
let pattern = /(\/)(\*)(\s|\S)*?(\*\/)/g
|
||
|
||
let result = text.match(pattern)
|
||
console.log('getCommentedString: ', result)
|
||
}
|
||
//REFACTOR: move to psapi.js
|
||
//duplicate the active layer
|
||
async function duplication() {
|
||
try {
|
||
console.log('active layer id: ', app.activeDocument.activeLayers[0].id)
|
||
await executeAsModal(async () => {
|
||
let inner_new_layer =
|
||
await app.activeDocument.activeLayers[0].duplicate()
|
||
console.log('inner_new_layer id: ', inner_new_layer.id)
|
||
})
|
||
|
||
console.log(
|
||
'new active layer id: ',
|
||
app.activeDocument.activeLayers[0].id
|
||
)
|
||
} catch (e) {
|
||
console.warn('duplication error:', e)
|
||
}
|
||
}
|
||
|
||
//REFACTOR: move to helpers.js
|
||
function tempDisableElement(element, time) {
|
||
element.disabled = true
|
||
element.style.opacity = '0.65'
|
||
element.style.cursor = 'not-allowed'
|
||
setTimeout(function () {
|
||
element.disabled = false
|
||
element.style.opacity = '1.0'
|
||
element.style.cursor = 'default'
|
||
}, time)
|
||
}
|
||
//REFACTOR: move to ui.js
|
||
async function refreshUI() {
|
||
try {
|
||
const b_proxy_server_status = await updateVersionUI()
|
||
if (b_proxy_server_status) {
|
||
html_manip.setProxyServerStatus('connected', 'disconnected')
|
||
} else {
|
||
html_manip.setProxyServerStatus('disconnected', 'connected')
|
||
}
|
||
|
||
const bSamplersStatus = await initSamplers()
|
||
if (bSamplersStatus) {
|
||
//means both automatic1111 and proxy server are online
|
||
html_manip.setAutomaticStatus('connected', 'disconnected')
|
||
// html_manip.setProxyServerStatus('connected','disconnected')
|
||
} else {
|
||
html_manip.setAutomaticStatus('disconnected', 'connected')
|
||
}
|
||
await refreshModels()
|
||
await refreshExtraUpscalers()
|
||
//get the latest options
|
||
await g_sd_options_obj.getOptions()
|
||
//get the selected model
|
||
const current_model_title = g_sd_options_obj.getCurrentModel()
|
||
//update the ui with that model title
|
||
const current_model_hash =
|
||
html_manip.getModelHashByTitle(current_model_title)
|
||
html_manip.autoFillInModel(current_model_hash)
|
||
|
||
//fetch the inpaint mask weight from sd webui and update the slider with it.
|
||
const inpainting_mask_weight =
|
||
await g_sd_options_obj.getInpaintingMaskWeight()
|
||
console.log('inpainting_mask_weight: ', inpainting_mask_weight)
|
||
html_manip.autoFillInInpaintMaskWeight(inpainting_mask_weight)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
//REFACTOR: move to generation_settings.js
|
||
async function refreshModels() {
|
||
try {
|
||
g_models = await sdapi.requestGetModels()
|
||
// const models_menu_element = document.getElementById('mModelsMenu')
|
||
// models_menu_element.value = ""
|
||
document.getElementById('mModelsMenu').innerHTML = ''
|
||
|
||
for (let model of g_models) {
|
||
console.log(model.title)
|
||
const menu_item_element = document.createElement('sp-menu-item')
|
||
menu_item_element.className = 'mModelMenuItem'
|
||
menu_item_element.innerHTML = model.title
|
||
menu_item_element.dataset.model_hash = model.hash
|
||
menu_item_element.dataset.model_title = model.title
|
||
document
|
||
.getElementById('mModelsMenu')
|
||
.appendChild(menu_item_element)
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
//REFACTOR: move to generation_settings.js
|
||
async function refreshExtraUpscalers() {
|
||
try {
|
||
//cycle through hrModelsMenuClass and reset innerHTML
|
||
var hrModelsMenuClass = document.getElementsByClassName(
|
||
'hrExtrasUpscaleModelsMenuClass'
|
||
)
|
||
for (let i = 0; i < hrModelsMenuClass.length; i++) {
|
||
hrModelsMenuClass[i].innerHTML = ''
|
||
}
|
||
g_extra_upscalers = await sdapi.requestGetUpscalers()
|
||
|
||
for (let model of g_extra_upscalers) {
|
||
var hrModelsMenuClass = document.getElementsByClassName(
|
||
'hrExtrasUpscaleModelsMenuClass'
|
||
)
|
||
for (let i = 0; i < hrModelsMenuClass.length; i++) {
|
||
const menu_item_element = document.createElement('sp-menu-item')
|
||
menu_item_element.className = 'hrExtrasUpscaleModelsMenuItem'
|
||
menu_item_element.innerHTML = model.name
|
||
hrModelsMenuClass[i].appendChild(menu_item_element)
|
||
console.log(model + ' added to ' + hrModelsMenuClass[i].id)
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
//REFACTOR: move to ui.js
|
||
async function updateVersionUI() {
|
||
let bStatus = false
|
||
try {
|
||
version = await sdapi.getVersionRequest()
|
||
document.getElementById('lVersionNumber').textContent = version
|
||
if (version !== 'v0.0.0') {
|
||
bStatus = true
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
document.getElementById('lVersionNumber').textContent = 'v0.0.0'
|
||
bStatus = false
|
||
}
|
||
return bStatus
|
||
}
|
||
//REFACTOR: move to generation_settings.js
|
||
async function initSamplers() {
|
||
let bStatus = false
|
||
try {
|
||
let sampler_group = document.getElementById('sampler_group')
|
||
sampler_group.innerHTML = ''
|
||
|
||
const samplers = await sdapi.requestGetSamplers()
|
||
for (sampler of samplers) {
|
||
console.log(sampler)
|
||
// sampler.name
|
||
// <sp-radio class="rbSampler" value="Euler">Euler</sp-radio>
|
||
const rbSampler = document.createElement('sp-radio')
|
||
|
||
rbSampler.innerHTML = sampler.name
|
||
rbSampler.setAttribute('class', 'rbSampler')
|
||
rbSampler.setAttribute('value', sampler.name)
|
||
|
||
sampler_group.appendChild(rbSampler)
|
||
//add click event on radio button for Sampler radio button, so that when a button is clicked it change g_sd_sampler globally
|
||
|
||
//we could delete the click() event
|
||
rbSampler.addEventListener('click', (evt) => {
|
||
g_sd_sampler = evt.target.value
|
||
console.log(`You clicked: ${g_sd_sampler}`)
|
||
})
|
||
}
|
||
document
|
||
.getElementsByClassName('rbSampler')[0]
|
||
.setAttribute('checked', '')
|
||
if (samplers.length > 0) {
|
||
bStatus = true
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
return bStatus
|
||
}
|
||
//REFACTOR: move to helper.js
|
||
function promptShortcutExample() {
|
||
let prompt_shortcut_example = {
|
||
game_like:
|
||
'Unreal Engine, Octane Render, arcane card game ui, hearthstone art style, epic fantasy style art',
|
||
large_building_1: 'castle, huge building, large building',
|
||
painterly_style_1:
|
||
'A full portrait of a beautiful post apocalyptic offworld arctic explorer, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration',
|
||
ugly: ' ((((ugly)))), (((duplicate))), ((morbid)), ((mutilated)), out of frame, extra fingers, mutated hands, ((poorly drawn hands)), ((poorly drawn face)), (((mutation))), (((deformed))), ((ugly)), blurry, ((bad anatomy)), (((bad proportions))), ((extra limbs)), cloned face, (((disfigured))), out of frame, ugly, extra limbs, (bad anatomy), gross proportions, (malformed limbs), ((missing arms)), ((missing legs)), (((extra arms))), (((extra legs))), mutated hands, (fused fingers), (too many fingers), (((long neck)))',
|
||
}
|
||
var JSONInPrettyFormat = JSON.stringify(
|
||
prompt_shortcut_example,
|
||
undefined,
|
||
7
|
||
)
|
||
document.getElementById('taPromptShortcut').value = JSONInPrettyFormat
|
||
return prompt_shortcut_example
|
||
}
|
||
//REFACTOR: move to generation_settings.js
|
||
function autoFillInSettings(metadata_json) {
|
||
try {
|
||
metadata_json1 = {
|
||
prompt: 'cute cat, A full portrait of a beautiful post apocalyptic offworld arctic explorer, intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth, sharp focus, illustration\nNegative prompt: ((((ugly)))), (((duplicate))), ((morbid)), ((mutilated)), out of frame, extra fingers, mutated hands, ((poorly drawn hands)), ((poorly drawn face)), (((mutation))), (((deformed))), ((ugly)), blurry, ((bad anatomy)), (((bad proportions))), ((extra limbs)), cloned face, (((disfigured))), out of frame, ugly, extra limbs, (bad anatomy), gross proportions, (malformed limbs), ((missing arms)), ((missing legs)), (((extra arms))), (((extra legs))), mutated hands, (fused fingers), (too many fingers), (((long neck)))',
|
||
Steps: '20',
|
||
Sampler: 'Euler a',
|
||
'CFG scale': '7.0',
|
||
Seed: '2300061620',
|
||
Size: '512x512',
|
||
'Model hash': '3e16efc8',
|
||
'Seed resize from': '-1x-1',
|
||
'Denoising strength': '0',
|
||
'Conditional mask weight': '1.0',
|
||
}
|
||
|
||
//sometime the negative prompt is stored within the prompt
|
||
function extractNegativePrompt(prompt) {
|
||
const splitter = '\nNegative prompt:'
|
||
const prompts = prompt.split(splitter)
|
||
console.log('prompts: ', prompts)
|
||
let negative_prompt = ''
|
||
if (prompts.length > 1) {
|
||
negative_prompt = prompts[1].trim()
|
||
}
|
||
//propmt = prompt[0]
|
||
|
||
return [prompts[0], negative_prompt]
|
||
}
|
||
let [prompt, negative_prompt] = extractNegativePrompt(
|
||
metadata_json['prompt']
|
||
)
|
||
negative_prompt = metadata_json['Negative prompt'] || negative_prompt
|
||
|
||
html_manip.autoFillInPrompt(prompt)
|
||
html_manip.autoFillInNegativePrompt(negative_prompt)
|
||
|
||
document.getElementById('tiNumberOfSteps').value =
|
||
metadata_json['Steps']
|
||
|
||
document.getElementById('slCfgScale').value = metadata_json['CFG scale']
|
||
document.getElementById('tiSeed').value = metadata_json['Seed']
|
||
|
||
// = metadata_json['Denoising strength']
|
||
html_manip.autoFillInDenoisingStrength(
|
||
metadata_json['Denoising strength']
|
||
)
|
||
|
||
model_title = html_manip.autoFillInModel(metadata_json['Model hash'])
|
||
sdapi.requestSwapModel(model_title)
|
||
|
||
const [width, height] = metadata_json['Size'].split('x')
|
||
console.log('width, height: ', width, height)
|
||
html_manip.autoFillInWidth(width)
|
||
html_manip.autoFillInHeight(height)
|
||
html_manip.autoFillInSampler(metadata_json['Sampler'])
|
||
if (metadata_json.hasOwnProperty('First pass size')) {
|
||
// chHiResFixs
|
||
const [firstphase_width, firstphase_height] =
|
||
metadata_json['First pass size'].split('x')
|
||
html_manip.setHiResFixs(true)
|
||
html_manip.autoFillInHiResFixs(firstphase_width, firstphase_height)
|
||
html_manip.autoFillInSliderUi(
|
||
metadata_json['Denoising strength'],
|
||
'hrDenoisingStrength',
|
||
'hDenoisingStrength',
|
||
100
|
||
)
|
||
} else {
|
||
//
|
||
html_manip.setHiResFixs(false)
|
||
}
|
||
|
||
// document.getElementById('tiSeed').value = metadata_json["Seed"]
|
||
} catch (e) {
|
||
console.error(`autoFillInSettings: ${e}`)
|
||
}
|
||
}
|
||
//steps to load init_image:
|
||
//duplicate the active layer
|
||
// duplication()
|
||
// create a mask from marquee selection
|
||
|
||
// export the layer as png
|
||
//load the image from disk to panel as <img /> tag
|
||
//store the relative path of the image into init_img_path to be load from the python server (serverMain.py)
|
||
//
|
||
|
||
//**********Start: global variables
|
||
let prompt_dir_name = ''
|
||
let gImage_paths = []
|
||
let g_image_path_to_layer = {}
|
||
let g_init_images_dir = './server/python_server/init_images'
|
||
//REFACTOR: move to generationSettings.js
|
||
gCurrentImagePath = ''
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_init_image_name = ''
|
||
// let g_init_mask_layer;
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_init_image_mask_name = ''
|
||
// let g_mask_related_layers = {}
|
||
// let g_init_image_related_layers = {}
|
||
//REFACTOR: move to generationSettings.js
|
||
let numberOfImages = document.querySelector('#tiNumberOfImages').value
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_sd_mode = 'txt2img'
|
||
// let g_sd_mode_last = g_sd_mode
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_sd_mode_last = g_sd_mode
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_sd_sampler = 'Euler a'
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_denoising_strength = 0.7
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_use_mask_image = false
|
||
let g_models = []
|
||
// let g_models_horde = []
|
||
let g_model_title = ''
|
||
// let gWidth = 512
|
||
// let gHeight = 512
|
||
//REFACTOR: move to generationSettings.js
|
||
let hWidth = 512
|
||
//REFACTOR: move to generationSettings.js
|
||
let hHeight = 512
|
||
//REFACTOR: move to generationSettings.js
|
||
let h_denoising_strength = 0.7
|
||
// let g_inpainting_fill = 0
|
||
// let g_last_outpaint_layers = []
|
||
// let g_last_inpaint_layers = []
|
||
// let g_last_snap_and_fill_layers = []
|
||
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_metadatas = []
|
||
let g_last_seed = '-1'
|
||
//REFACTOR: move to generationSettings.js
|
||
let g_can_request_progress = true
|
||
let g_saved_active_layers = []
|
||
let g_saved_active_selection = {}
|
||
let g_is_active_layers_stored = false
|
||
|
||
let g_number_generation_per_session = 0
|
||
let g_isViewerMenuDisabled = false // disable the viewer menu and viewerImage when we're importing images into the current document
|
||
let g_b_mask_layer_exist = false // true if inpaint mask layer exist, false otherwise.
|
||
let g_inpaint_mask_layer
|
||
let g_inpaint_mask_layer_history_id //store the history state id when creating a new inpaint mask layer
|
||
|
||
// let g_selection = {}
|
||
//REFACTOR: move to session.js
|
||
let g_selection = {}
|
||
let g_b_use_smart_object = true // true to keep layer as smart objects, false to rasterize them
|
||
let g_sd_options_obj = new sd_options.SdOptions()
|
||
|
||
g_sd_options_obj.getOptions()
|
||
// let g_sd_config_obj = new sd_config.SdConfig()
|
||
// g_sd_config_obj.getConfig();
|
||
|
||
// let g_width_slider = new ui.UIElement()
|
||
// g_width_slider.getValue = html_manip.getWidth
|
||
// ui_settings.uiElements.push =
|
||
let g_old_slider_width = 512
|
||
let g_old_slider_height = 512
|
||
let g_sd_config_obj
|
||
;(async function () {
|
||
let temp_config = new sd_config.SdConfig()
|
||
await temp_config.getConfig()
|
||
temp_config.getUpscalerModels()
|
||
g_sd_config_obj = temp_config
|
||
})()
|
||
|
||
let g_generation_session = new session.GenerationSession(0) //session manager
|
||
g_generation_session.deactivate() //session starte as inactive
|
||
let g_ui = new ui.UI()
|
||
let g_ui_settings = new ui.UISettings()
|
||
|
||
const requestState = {
|
||
Generate: 'generate',
|
||
Interrupt: 'interrupt',
|
||
}
|
||
|
||
let g_request_status = '' //
|
||
const generationMode = {
|
||
Txt2Img: 'txt2img',
|
||
Img2Img: 'img2img',
|
||
Inpaint: 'inpaint',
|
||
Outpaint: 'outpaint',
|
||
Upscale: 'upscale',
|
||
}
|
||
const backendTypeEnum = {
|
||
Auto1111: 'auto1111',
|
||
HordeNative: 'horde_native',
|
||
Auto1111HordeExtension: 'auto1111_horde_extension',
|
||
}
|
||
|
||
g_generation_session.mode = generationMode['Txt2Img']
|
||
let g_viewer_manager = new viewer.ViewerManager()
|
||
|
||
//********** End: global variables */
|
||
|
||
//***********Start: init function calls */
|
||
async function initPlugin() {
|
||
await refreshUI()
|
||
await displayUpdate()
|
||
// promptShortcutExample()
|
||
await loadPromptShortcut()
|
||
await refreshPromptMenue()
|
||
}
|
||
initPlugin()
|
||
// refreshModels() // get the models when the plugin loads
|
||
// initSamplers()
|
||
// updateVersionUI()
|
||
// refreshUI()
|
||
// displayUpdate()
|
||
// // promptShortcutExample()
|
||
// loadPromptShortcut()
|
||
|
||
//***********End: init function calls */
|
||
|
||
//add click event on radio button mode, so that when a button is clicked it change g_sd_mode globally
|
||
rbModeElements = document.getElementsByClassName('rbMode')
|
||
for (let rbModeElement of rbModeElements) {
|
||
rbModeElement.addEventListener('click', async (evt) => {
|
||
try {
|
||
g_sd_mode = evt.target.value
|
||
// console.log(`You clicked: ${g_sd_mode}`)
|
||
await displayUpdate()
|
||
await postModeSelection() // do things after selection
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
}
|
||
|
||
//swaps g_sd_mode when clicking on extras tab and swaps it back to previous value when clicking on main tab
|
||
document
|
||
.getElementById('sp-extras-tab')
|
||
.addEventListener('click', async (evt) => {
|
||
try {
|
||
// g_sd_mode_last = g_sd_mode
|
||
g_sd_mode = 'upscale'
|
||
console.log(`You clicked: ${g_sd_mode}`)
|
||
await displayUpdate()
|
||
await postModeSelection() // do things after selection
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
|
||
document
|
||
.getElementById('sp-stable-diffusion-ui-tab')
|
||
.addEventListener('click', async (evt) => {
|
||
try {
|
||
// g_sd_mode = g_sd_mode_last
|
||
g_sd_mode = html_manip.getMode()
|
||
console.log(`mode restored to: ${g_sd_mode}`)
|
||
await displayUpdate()
|
||
await postModeSelection() // do things after selection
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
|
||
async function createTempInpaintMaskLayer() {
|
||
if (!g_b_mask_layer_exist) {
|
||
//make new layer "Mask -- Paint White to Mask -- temporary"
|
||
|
||
const name = 'Mask -- Paint White to Mask -- temporary'
|
||
g_inpaint_mask_layer = await layer_util.createNewLayerExe(name, 60)
|
||
// g_inpaint_mask_layer.opacity = 50
|
||
g_b_mask_layer_exist = true
|
||
const index = app.activeDocument.historyStates.length - 1
|
||
g_inpaint_mask_layer_history_id =
|
||
app.activeDocument.historyStates[index].id
|
||
console.log(
|
||
'g_inpaint_mask_layer_history_id: ',
|
||
g_inpaint_mask_layer_history_id
|
||
)
|
||
}
|
||
}
|
||
async function deleteTempInpaintMaskLayer() {
|
||
console.log(
|
||
'g_inpaint_mask_layer_history_id: ',
|
||
g_inpaint_mask_layer_history_id
|
||
)
|
||
const historyBrushTools = app.activeDocument.historyStates.filter(
|
||
(h) => h.id > g_inpaint_mask_layer_history_id && h.name === 'Brush Tool'
|
||
)
|
||
console.log(historyBrushTools)
|
||
if (historyBrushTools.length === 0 && g_b_mask_layer_exist) {
|
||
await layer_util.deleteLayers([g_inpaint_mask_layer])
|
||
|
||
g_b_mask_layer_exist = false
|
||
}
|
||
}
|
||
async function postModeSelection() {
|
||
//
|
||
try {
|
||
if (g_sd_mode === generationMode['Inpaint']) {
|
||
//check if the we already have created a mask layer
|
||
await createTempInpaintMaskLayer()
|
||
} else {
|
||
// if we switch from inpaint mode, delete the mask layer
|
||
// Find all history states after the creation of the inpaint mask and their name brush tool
|
||
await deleteTempInpaintMaskLayer()
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
rbMaskContentElements = document.getElementsByClassName('rbMaskContent')
|
||
|
||
for (let rbMaskContentElement of rbMaskContentElements) {
|
||
rbMaskContentElement.addEventListener('click', async (evt) => {
|
||
// g_inpainting_fill = evt.target.value
|
||
// console.log(`You clicked: ${g_inpainting_fill}`)
|
||
})
|
||
}
|
||
|
||
document.addEventListener('mouseenter', async (event) => {
|
||
try {
|
||
//only check if the generation mode has not changed( e.g a session.mode === img2img and the current selection is "img2img" ).
|
||
// changing the mode will trigger it's own procedure, so doing it here again is redundant
|
||
if (
|
||
g_generation_session.isActive() &&
|
||
g_generation_session.mode === g_sd_mode
|
||
) {
|
||
//if the generation session is active and the selected mode is still the same as the generation mode
|
||
|
||
console.log('hover on window')
|
||
|
||
const new_selection = await psapi.getSelectionInfoExe() //get the current active selection if there is any
|
||
|
||
if (
|
||
new_selection &&
|
||
(await hasSelectionChanged(
|
||
new_selection,
|
||
g_generation_session.selectionInfo
|
||
))
|
||
) {
|
||
// if there is an active selection and if the selection has changed
|
||
|
||
await calcWidthHeightFromSelection()
|
||
|
||
if (
|
||
g_generation_session.state ===
|
||
session.SessionState['Active']
|
||
) {
|
||
//indicate that the session will end if you generate
|
||
//only if you move the selection while the session is active
|
||
// g_ui.endSessionUI()
|
||
const selected_mode = html_manip.getMode()
|
||
g_ui.generateModeUI(selected_mode)
|
||
} else {
|
||
// move the selection while the session is inactive
|
||
}
|
||
} else {
|
||
// sessionStartHtml(true)//generate more, green color
|
||
//if you didn't move the selection.
|
||
// g_ui.startSessionUI()
|
||
g_ui.generateMoreUI()
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
////add tips to element when mouse hover on an element
|
||
// function getToolTipElement(){
|
||
// const tool_tip = document.getElementById("tool_tip")
|
||
// return tool_tip
|
||
// }
|
||
// function moveTip(x,y){
|
||
// var tool_tip = document.getElementById("tool_tip")
|
||
|
||
// tool_tip.style.position = 'absolute';
|
||
// tool_tip.style.left = x;
|
||
// tool_tip.style.top = y;
|
||
// }
|
||
// document.getElementById('rbOutpaintMode').addEventListener("mouseover",(e)=>{
|
||
|
||
// console.log("e.shiftKey:",e.shiftKey)
|
||
|
||
// if(e.shiftKey)
|
||
// {
|
||
// const rect = e.target.getBoundingClientRect()
|
||
// const tool_tip = getToolTipElement()
|
||
// setTimeout(()=>{
|
||
// tool_tip.style.display = "none"
|
||
// },5000)
|
||
// tool_tip.style.display = "inline-block"
|
||
|
||
// tool_tip.style["z-index"] = 100;
|
||
// console.log("Use this mode when you want to fill empty areas of the canvas")
|
||
// // var x = e.pageX;
|
||
// // var y = e.pageY;
|
||
// console.log("(e.pageX,e.pageY): ",(e.pageX,e.pageY))
|
||
// const tip_x = e.pageX - (tool_tip.offsetWidth/2)
|
||
// // const tip_y = e.pageY + - tool_tip.offsetHeight
|
||
// const tip_y = rect.top + - tool_tip.offsetHeight
|
||
|
||
// moveTip(tip_x,tip_y)
|
||
// }
|
||
// else{// rlease the shift key
|
||
// console.log("tip will disappear in 1 second")
|
||
// }
|
||
|
||
// });
|
||
|
||
// document.getElementById('rbOutpaintMode').addEventListener("mouseout",(e)=>{
|
||
|
||
// console.log("e.shiftKey:",e.shiftKey)
|
||
|
||
// console.log("no tip, tip will disappear in 1 second")
|
||
// // getToolTipElement().style.display = "none"
|
||
|
||
// });
|
||
|
||
// show the interface that need to be shown and hide the interface that need to be hidden
|
||
async function displayUpdate() {
|
||
try {
|
||
if (g_sd_mode == 'txt2img') {
|
||
document.getElementById('slDenoisingStrength').style.display =
|
||
'none' // hide denoising strength slider
|
||
// document.getElementById("image_viewer").style.display = 'none' // hide images
|
||
document.getElementById('init_image_container').style.display =
|
||
'none' // hide init image
|
||
document.getElementById('init_image_mask_container').style.display =
|
||
'none' // hide init mask
|
||
document.getElementById('slInpainting_fill').style.display = 'none' // hide inpainting fill mode
|
||
document.getElementById('chInpaintFullRes').style.display = 'none'
|
||
|
||
document.getElementById('slInpaintingMaskWeight').style.display =
|
||
'none' // hide inpainting conditional mask weight
|
||
|
||
document.getElementById('chHiResFixs').style.display = 'flex'
|
||
if (html_manip.getHiResFixs()) {
|
||
document.getElementById('HiResDiv').style.display = 'block'
|
||
}
|
||
|
||
document.getElementById('slMaskExpansion').style.display = 'none'
|
||
|
||
document.getElementById('slInpaintPadding').style.display = 'none'
|
||
document.getElementById('slMaskBlur').style.display = 'none'
|
||
// document.getElementById('btnSnapAndFill').style.display = 'none'//"none" will misaligned the table // hide snap and fill button
|
||
}
|
||
|
||
if (g_sd_mode == 'img2img') {
|
||
document.getElementById('slDenoisingStrength').style.display =
|
||
'block' // show denoising strength
|
||
document.getElementById('slMaskExpansion').style.display = 'none'
|
||
// document.getElementById("image_viewer").style.display = 'block'
|
||
document.getElementById('init_image_container').style.display =
|
||
'block' // hide init image
|
||
|
||
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('HiResDiv').style.display = 'none'
|
||
document.getElementById('chInpaintFullRes').style.display = 'none'
|
||
document.getElementById('slInpaintPadding').style.display = 'none'
|
||
document.getElementById('slMaskBlur').style.display = 'none'
|
||
document.getElementById('chHiResFixs').style.display = 'none'
|
||
document.getElementById('slInpaintingMaskWeight').style.display =
|
||
'block' // hide inpainting conditional mask weight
|
||
}
|
||
if (g_sd_mode == 'inpaint' || g_sd_mode == 'outpaint') {
|
||
///fix the misalignment problem in the ui (init image is not aligned with init mask when switching from img2img to inpaint ). note: code needs refactoring
|
||
// document.getElementById('btnSnapAndFill').style.display = 'none'//"none" will misaligned the table // hide snap and fill button
|
||
document.getElementById('tableInitImageContainer').style.display =
|
||
'none' // hide the table
|
||
document.getElementById('slMaskExpansion').style.display = 'block'
|
||
setTimeout(() => {
|
||
try {
|
||
document.getElementById(
|
||
'tableInitImageContainer'
|
||
).style.display = 'table' // show the table after some time so it gets rendered.
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}, 100)
|
||
|
||
document.getElementById('slDenoisingStrength').style.display =
|
||
'block'
|
||
document.getElementById('init_image_mask_container').style.display =
|
||
'block'
|
||
document.getElementById('slInpainting_fill').style.display = 'block'
|
||
document.getElementById('init_image_container').style.display =
|
||
'block' // hide init image
|
||
document.getElementById('slInpaintingMaskWeight').style.display =
|
||
'block' // hide inpainting conditional mask weight
|
||
|
||
document.getElementById('HiResDiv').style.display = 'none'
|
||
document.getElementById('chInpaintFullRes').style.display =
|
||
'inline-flex'
|
||
if (document.getElementById('chInpaintFullRes').checked) {
|
||
document.getElementById('slInpaintPadding').style.display =
|
||
'block'
|
||
} else {
|
||
document.getElementById('slInpaintPadding').style.display =
|
||
'none'
|
||
}
|
||
document.getElementById('slMaskBlur').style.display = 'block'
|
||
document.getElementById('chHiResFixs').style.display = 'none'
|
||
// document.getElementById('btnInitOutpaint').style.display = 'inline-flex'
|
||
// document.getElementById('btnInitInpaint').style.display = 'inline-flex'
|
||
// document.getElementById('btnInitOutpaint').style.display = 'none'
|
||
// document.getElementById('btnInitInpaint').style.display = 'none'
|
||
} else {
|
||
//txt2img or img2img
|
||
// document.getElementById('btnInitOutpaint').style.display = 'none'
|
||
// document.getElementById('btnInitInpaint').style.display = 'none'
|
||
}
|
||
|
||
if (g_generation_session.isActive()) {
|
||
//Note: remove the "or" operation after refactoring the code
|
||
//if the session is active
|
||
|
||
if (g_generation_session.mode !== g_sd_mode) {
|
||
//if a generation session is active but we changed mode. the generate button will reflect that
|
||
//Note: add this code to the UI class
|
||
const generate_btns = Array.from(
|
||
document.getElementsByClassName('btnGenerateClass')
|
||
)
|
||
generate_btns.forEach((element) => {
|
||
const selected_mode =
|
||
getCurrentGenerationModeByValue(g_sd_mode)
|
||
element.textContent = `Generate ${selected_mode}`
|
||
})
|
||
|
||
html_manip.setGenerateButtonsColor('generate', 'generate-more')
|
||
} else {
|
||
//1) and the session is active
|
||
//2) is the same generation mode
|
||
|
||
if (!(await hasSessionSelectionChanged())) {
|
||
//3a) and the selection hasn't change
|
||
|
||
const generate_btns = Array.from(
|
||
document.getElementsByClassName('btnGenerateClass')
|
||
)
|
||
|
||
// const selected_mode =
|
||
// getCurrentGenerationModeByValue(g_sd_mode)
|
||
const generation_mode = g_generation_session.mode
|
||
const generation_name =
|
||
getCurrentGenerationModeByValue(generation_mode)
|
||
generate_btns.forEach((element) => {
|
||
element.textContent = `Generate More ${generation_name}`
|
||
})
|
||
|
||
html_manip.setGenerateButtonsColor(
|
||
'generate-more',
|
||
'generate'
|
||
)
|
||
} else {
|
||
//3b) selection has change
|
||
}
|
||
}
|
||
} else {
|
||
//session is not active
|
||
const selected_mode = getCurrentGenerationModeByValue(g_sd_mode)
|
||
g_ui.setGenerateBtnText(`Generate ${selected_mode}`)
|
||
html_manip.setGenerateButtonsColor('generate', 'generate-more')
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
// function showLayerNames () {
|
||
// const app = window.require('photoshop').app
|
||
// const allLayers = app.activeDocument.layers
|
||
// const allLayerNames = allLayers.map(
|
||
// layer => `${layer.name} (${layer.opacity} %)`
|
||
// )
|
||
|
||
// const sortedNames = allLayerNames.sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
|
||
// document.getElementById('layers').innerHTML = `
|
||
// <ul>${sortedNames.map(name => `<li>${name}</li>`).join('')}</ul>`
|
||
// }
|
||
|
||
function selectTool() {
|
||
var doc = app.activeDocument
|
||
var activeTool = app.currentTool
|
||
|
||
// if (activeTool !== toolName) {
|
||
// toolName = activeTool;
|
||
// doc.activeTool = toolName;
|
||
// }
|
||
// const util = require('util')
|
||
|
||
// console.log(util.inspect(myObject, {showHidden: false, depth: null, colors: true}))
|
||
console.dir(app, { depth: null })
|
||
console.log('hello this is Abdullah')
|
||
document.getElementById('layers').innerHTML = `<span>
|
||
selectTool was called, ${activeTool}
|
||
</span>`
|
||
|
||
//rectanglemarquee
|
||
// await require('photoshop').core.executeAsModal(newNormalLayer);
|
||
}
|
||
|
||
async function testServerPath() {
|
||
// const serverPath = "https://api.github.com/users/abdullah"
|
||
|
||
try {
|
||
// const serverPath = 'https://api.weather.gov/points/123.4,342.5'
|
||
// const serverPath = 'https://api.github.com/users/abdullah'
|
||
// const serverPath = "https://api.coindesk.com/v1/bpi/currentprice.json"
|
||
// const serverPath = "http://127.0.0.1:3000"
|
||
// const serverPath = "http://localhost:3000"
|
||
const serverPath = 'http://127.0.0.1:8000/txt2img/random%20prompt'
|
||
// const serverPath = "https://3330-37-106-100-102.eu.ngrok.io"
|
||
console.log('testServerPath function was called')
|
||
|
||
let response = await fetch(serverPath)
|
||
console.log('testServerPath finished fetch')
|
||
|
||
if (!response.ok) {
|
||
throw new Error(
|
||
`HTTP error fetching weather station; status: ${response.status}`
|
||
)
|
||
}
|
||
let stationJson = await response.json()
|
||
console.dir(stationJson)
|
||
} catch (err) {
|
||
console.error('testServerPath error: ' + err.message)
|
||
}
|
||
}
|
||
|
||
// User picks an image file
|
||
// open a explorer for user to select a image file
|
||
async function fillImage() {
|
||
const storage = require('uxp').storage
|
||
const fs = storage.localFileSystem
|
||
let imageFile = await fs.getFileForOpening({
|
||
types: storage.fileTypes.images,
|
||
})
|
||
|
||
// Create ImageFill for this image
|
||
const ImageFill = require('scenegraph').ImageFill
|
||
let fill = new ImageFill(imageFile)
|
||
|
||
// Set fill of first selected item
|
||
selection.items[0].fill = fill
|
||
}
|
||
// fillImage()
|
||
|
||
function pastImage2Layer() {
|
||
const { batchPlay } = require('photoshop').action
|
||
const { executeAsModal } = require('photoshop').core
|
||
|
||
executeAsModal(
|
||
() => {
|
||
// batchPlay([command], {})
|
||
const result = batchPlay(
|
||
[
|
||
{
|
||
_obj: 'paste',
|
||
antiAlias: {
|
||
_enum: 'antiAliasType',
|
||
_value: 'antiAliasNone',
|
||
},
|
||
as: {
|
||
_class: 'pixel',
|
||
},
|
||
_options: {
|
||
dialogOptions: 'dontDisplay',
|
||
},
|
||
},
|
||
],
|
||
{
|
||
synchronousExecution: true,
|
||
modalBehavior: 'fail',
|
||
}
|
||
)
|
||
},
|
||
{
|
||
commandName: 'Create Label',
|
||
}
|
||
)
|
||
}
|
||
function sliderToResolution(sliderValue) {
|
||
return sliderValue * 64
|
||
}
|
||
|
||
// document.querySelector('#slHeight').addEventListener('input', evt => {
|
||
// gHeight = sliderToResolution(evt.target.value)
|
||
// document.querySelector('#lHeight').textContent = gHeight
|
||
// })
|
||
|
||
// function getWidthFromSlider(slider_value){
|
||
// // slider_width = document.querySelector('#slWidth').value
|
||
// const width = sliderToResolution(slider_value)
|
||
// return width
|
||
// }
|
||
// //avoid using global width gWidth in "input" incase the slider get changed using autoFillInSettings
|
||
// document.querySelector('#slWidth').addEventListener('input', evt => {
|
||
// const width = getWidthFromSlider(evt.target.value)
|
||
// // gWidth = sliderToResolution(evt.target.value)
|
||
// document.querySelector('#lWidth').textContent = width
|
||
// })
|
||
|
||
document.querySelector('#hrHeight').addEventListener('input', (evt) => {
|
||
hHeight = sliderToResolution(evt.target.value)
|
||
document.querySelector('#hHeight').textContent = hHeight
|
||
})
|
||
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
|
||
})
|
||
|
||
// document
|
||
// .querySelector('#slDenoisingStrength')
|
||
// .addEventListener('input', evt => {
|
||
// const denoising_string_value = evt.target.value / 100.0
|
||
// g_denoising_strength = denoising_string_value
|
||
// // document.querySelector('#lDenoisingStrength').value= Number(denoising_string_value)
|
||
// document.querySelector('#lDenoisingStrength').textContent =
|
||
// denoising_string_value
|
||
// document.getElementById(
|
||
// 'lDenoisingStrength'
|
||
// ).innerHTML = `${denoising_string_value}`
|
||
// // console.log(`New denoising_string_value: ${document.querySelector('#tiDenoisingStrength').value}`)
|
||
// })
|
||
// document
|
||
// .querySelector('#hrDenoisingStrength')
|
||
// .addEventListener('input', evt => {
|
||
// const denoising_string_value = evt.target.value / 100.0
|
||
// h_denoising_strength = denoising_string_value
|
||
|
||
// document.getElementById(
|
||
// 'hDenoisingStrength'
|
||
// ).innerHTML = `${denoising_string_value}`
|
||
// // console.log(`New denoising_string_value: ${document.querySelector('#tiDenoisingStrength').value}`)
|
||
// })
|
||
// // document.getElementById('btnPopulate').addEventListener('click', showLayerNames)
|
||
|
||
async function snapAndFillHandler() {
|
||
try {
|
||
const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
|
||
if (isSelectionAreaValid) {
|
||
if (g_generation_session.isFirstGeneration) {
|
||
// clear the layers related to the last mask operation.
|
||
// g_last_snap_and_fill_layers = await psapi.cleanLayers(
|
||
// g_last_snap_and_fill_layers
|
||
// )
|
||
// create new layers related to the current mask operation.
|
||
await executeAsModal(async () => {
|
||
// g_last_snap_and_fill_layers = await outpaint.snapAndFillExe(random_session_id)
|
||
await outpaint.snapAndFillExe(random_session_id)
|
||
})
|
||
// console.log(
|
||
// 'outpaint.snapAndFillExe(random_session_id):, g_last_snap_and_fill_layers: ',
|
||
// g_last_snap_and_fill_layers
|
||
// )
|
||
}
|
||
} else {
|
||
psapi.promptForMarqueeTool()
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
// document
|
||
// .getElementById('btnSnapAndFill')
|
||
// .addEventListener('click', async () => {
|
||
|
||
// await snapAndFillHandler()
|
||
// })
|
||
|
||
async function easyModeOutpaint() {
|
||
try {
|
||
if (g_generation_session.isFirstGeneration) {
|
||
// clear the layers related to the last mask operation.
|
||
// g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
|
||
|
||
// create new layers related to the current mask operation.
|
||
// g_last_outpaint_layers = await outpaint.outpaintExe(random_session_id)
|
||
await outpaint.outpaintExe(random_session_id)
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
async function btnInitInpaintHandler() {
|
||
try {
|
||
if (g_generation_session.isFirstGeneration) {
|
||
// delete the layers of the previous mask operation
|
||
// g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
|
||
// store the layer of the current mask operation
|
||
// g_last_inpaint_layers = await outpaint.inpaintFasterExe(random_session_id)
|
||
await outpaint.inpaintFasterExe(random_session_id)
|
||
|
||
// console.log ("outpaint.inpaintFasterExe(random_session_id):, g_last_inpaint_layers: ",g_last_inpaint_layers)
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
// document
|
||
// .getElementById('btnInitInpaint')
|
||
// .addEventListener('click', async () => {
|
||
// await btnInitInpaintHandler()
|
||
// })
|
||
|
||
function toggleTwoButtonsByClass(isVisible, first_class, second_class) {
|
||
const first_class_btns = Array.from(
|
||
document.getElementsByClassName(first_class)
|
||
)
|
||
const second_class_btns = Array.from(
|
||
document.getElementsByClassName(second_class)
|
||
)
|
||
|
||
if (isVisible) {
|
||
//show interrup button
|
||
first_class_btns.forEach((element) => (element.style.display = 'none'))
|
||
second_class_btns.forEach(
|
||
(element) => (element.style.display = 'inline-block')
|
||
)
|
||
console.log('first_class_btns: ', first_class_btns)
|
||
} else {
|
||
//show generate or generate more button
|
||
first_class_btns.forEach(
|
||
(element) => (element.style.display = 'inline-block')
|
||
)
|
||
if (g_generation_session.isActive()) {
|
||
//show generate more
|
||
// const selected_mode = getCurrentGenerationModeByValue(g_sd_mode)
|
||
const generation_mode = g_generation_session.mode
|
||
const generation_name =
|
||
getCurrentGenerationModeByValue(generation_mode)
|
||
first_class_btns.forEach(
|
||
(element) =>
|
||
(element.textContent = `Generate More ${generation_name}`)
|
||
)
|
||
} else {
|
||
//show generate button
|
||
first_class_btns.forEach(
|
||
(element) =>
|
||
(element.textContent = `Generate ${getCurrentGenerationModeByValue(
|
||
g_sd_mode
|
||
)}`)
|
||
)
|
||
}
|
||
second_class_btns.forEach((element) => (element.style.display = 'none'))
|
||
}
|
||
return isVisible
|
||
}
|
||
|
||
async function discardAll() {
|
||
//discard all generated images setting highlight to false
|
||
//then call discard() to garbage collect the mask related layers
|
||
try {
|
||
for (const [path, viewer_image_obj] of Object.entries(
|
||
g_viewer_manager.pathToViewerImage
|
||
)) {
|
||
try {
|
||
viewer_image_obj.active(false) //deactivate the layer
|
||
viewer_image_obj.setHighlight(false) // mark each layer as discarded
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
}
|
||
await discard() // clean viewer tab
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
async function acceptAll() {
|
||
//accept all generated images by highlighting them
|
||
//then call discard() to garbage collect the mask related layers
|
||
try {
|
||
for (const [path, viewer_image_obj] of Object.entries(
|
||
g_viewer_manager.pathToViewerImage
|
||
)) {
|
||
try {
|
||
if (
|
||
viewer_image_obj.isActive() &&
|
||
viewer_image_obj instanceof viewer.OutputImage
|
||
) {
|
||
//check if the active viewer_image_obj is a type of OutputImage and move it to the top of the output group folder
|
||
//this is so when we accept all layers the canvas will look the same. otherwise the image could be cover by another generated image
|
||
if (
|
||
layer_util.Layer.doesLayerExist(viewer_image_obj.layer)
|
||
) {
|
||
await g_generation_session.moveToTopOfOutputGroup(
|
||
viewer_image_obj.layer
|
||
)
|
||
}
|
||
}
|
||
viewer_image_obj.setHighlight(true) // mark each layer as accepted
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
}
|
||
await discard() // clean viewer tab
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
async function discardSelected() {
|
||
//discard all generated images setting highlight to false
|
||
//then call discard() to garbage collect the mask related layers
|
||
try {
|
||
for (const [path, viewer_image_obj] of Object.entries(
|
||
g_viewer_manager.pathToViewerImage
|
||
)) {
|
||
try {
|
||
if (viewer_image_obj.is_active) {
|
||
viewer_image_obj.active(false) //convert active to highlight
|
||
viewer_image_obj.setHighlight(true) //highlight the active image, since active images are not highlighted in the viewer
|
||
}
|
||
|
||
viewer_image_obj.toggleHighlight() // if invert the highlights on all images
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
}
|
||
await discard() // delete the images that currently highlighted
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
const discard_selected_class_btns = Array.from(
|
||
document.getElementsByClassName('discardSelectedClass')
|
||
)
|
||
discard_selected_class_btns.forEach((element) =>
|
||
element.addEventListener('click', async () => {
|
||
try {
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['DiscardSelected']
|
||
) //end session and accept only selected images
|
||
g_ui.onEndSessionUI()
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
)
|
||
|
||
const accept_selected_class_btns = Array.from(
|
||
document.getElementsByClassName('acceptSelectedClass')
|
||
)
|
||
accept_selected_class_btns.forEach((element) =>
|
||
element.addEventListener('click', async () => {
|
||
try {
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['AcceptSelected']
|
||
) //end session and accept only selected images
|
||
g_ui.onEndSessionUI()
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
)
|
||
|
||
const accept_class_btns = Array.from(
|
||
document.getElementsByClassName('acceptClass')
|
||
)
|
||
accept_class_btns.forEach((element) =>
|
||
element.addEventListener('click', async () => {
|
||
try {
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['Accept']
|
||
) //end session and accept all images
|
||
g_ui.onEndSessionUI()
|
||
|
||
// await acceptAll()
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
)
|
||
|
||
function toggleTwoButtons(defaultVal, first_btn_id, second_btn_id) {
|
||
if (defaultVal) {
|
||
document.getElementById(first_btn_id).style.display = 'none' // hide generate button
|
||
document.getElementById(second_btn_id).style.display = 'inline-block' // show interrupt button
|
||
} else {
|
||
document.getElementById(first_btn_id).style.display = 'inline-block' // hide generate button
|
||
document.getElementById(second_btn_id).style.display = 'none' // show interrupt button
|
||
}
|
||
return defaultVal
|
||
}
|
||
|
||
document.getElementById('btnRandomSeed').addEventListener('click', async () => {
|
||
document.querySelector('#tiSeed').value = '-1'
|
||
})
|
||
document.getElementById('btnLastSeed').addEventListener('click', async () => {
|
||
try {
|
||
console.log('click on Last seed')
|
||
let seed = '-1'
|
||
|
||
if (g_last_seed >= 0) {
|
||
seed = g_last_seed.toString() //make sure the seed is a string
|
||
}
|
||
|
||
console.log('seed:', seed)
|
||
document.querySelector('#tiSeed').value = seed
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
async function discard() {
|
||
try {
|
||
// console.log(
|
||
// 'click on btnCleanLayers, g_last_outpaint_layers:',
|
||
// g_last_outpaint_layers
|
||
// )
|
||
// console.log(
|
||
// 'click on btnCleanLayers, g_last_inpaint_layers:',
|
||
// g_last_inpaint_layers
|
||
// )
|
||
|
||
// console.log(
|
||
// 'click on btnCleanLayers, g_last_snap_and_fill_layers:',
|
||
// g_last_snap_and_fill_layers
|
||
// )
|
||
|
||
// console.log('g_last_snap_and_fill_layers')
|
||
// g_last_snap_and_fill_layers = await psapi.cleanLayers(
|
||
// g_last_snap_and_fill_layers
|
||
// )
|
||
|
||
// if (g_last_outpaint_layers.length > 0) {
|
||
// g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
|
||
// console.log('g_last_outpaint_layers has 1 layers')
|
||
// }
|
||
// if (g_last_inpaint_layers.length > 0) {
|
||
// g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
|
||
// g_b_mask_layer_exist = false
|
||
|
||
// }
|
||
const random_img_src = 'https://source.unsplash.com/random'
|
||
html_manip.setInitImageSrc(random_img_src)
|
||
html_manip.setInitImageMaskSrc(random_img_src)
|
||
|
||
// psapi.cleanLayers(last_gen_layers)
|
||
await deleteNoneSelected(g_viewer_manager.pathToViewerImage)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
Array.from(document.getElementsByClassName('discardClass')).forEach(
|
||
(element) => {
|
||
element.addEventListener('click', async () => {
|
||
//end session here
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['Discard']
|
||
) //end session and remove all images
|
||
g_ui.onEndSessionUI()
|
||
|
||
// await discard()
|
||
})
|
||
}
|
||
)
|
||
|
||
async function deleteMaskRelatedLayers() {
|
||
// console.log("click on btnCleanLayers, g_last_outpaint_layers:",g_last_outpaint_layers)
|
||
// console.log("click on btnCleanLayers, g_last_inpaint_layers:",g_last_inpaint_layers)
|
||
// console.log("click on btnCleanLayers, g_last_snap_and_fill_layers:",g_last_snap_and_fill_layers)
|
||
// console.log("g_last_snap_and_fill_layers")
|
||
// g_last_snap_and_fill_layers = await psapi.cleanLayers(g_last_snap_and_fill_layers)
|
||
// if (g_last_outpaint_layers.length > 0){
|
||
// g_last_outpaint_layers = await psapi.cleanLayers(g_last_outpaint_layers)
|
||
// console.log("g_last_outpaint_layers has 1 layers")
|
||
// }
|
||
// if (g_last_inpaint_layers.length> 0 ){
|
||
// g_last_inpaint_layers = await psapi.cleanLayers(g_last_inpaint_layers)
|
||
// }
|
||
}
|
||
// document.getElementById('btnCleanLayers').addEventListener('click', async () => {
|
||
// await deleteMaskRelatedLayers()
|
||
|
||
// })
|
||
|
||
// document.getElementById('btnInterruptMore').addEventListener('click', async () => {
|
||
// try{
|
||
|
||
// json = await sdapi.requestInterrupt()
|
||
|
||
// g_can_request_progress = toggleTwoButtons(false,'btnGenerateMore','btnInterruptMore')
|
||
// }catch(e)
|
||
// {
|
||
|
||
// g_can_request_progress = toggleTwoButtons(false,'btnGenerateMore','btnInterruptMore')
|
||
// console.warn(e)
|
||
// }
|
||
// })
|
||
|
||
Array.from(document.getElementsByClassName('btnInterruptClass')).forEach(
|
||
(element) => {
|
||
element.addEventListener('click', async () => {
|
||
try {
|
||
const backend_type = html_manip.getBackendType()
|
||
if (backend_type === backendTypeEnum['HordeNative']) {
|
||
//interrupt the horde
|
||
|
||
await g_horde_generator.interrupt()
|
||
} else {
|
||
//interrupt auto1111
|
||
|
||
json = await sdapi.requestInterrupt()
|
||
}
|
||
|
||
toggleTwoButtonsByClass(
|
||
false,
|
||
'btnGenerateClass',
|
||
'btnInterruptClass'
|
||
)
|
||
g_can_request_progress = false
|
||
g_request_status = requestState['Interrupt']
|
||
|
||
// g_can_request_progress = toggleTwoButtons(false,'btnGenerate','btnInterrupt')
|
||
} catch (e) {
|
||
// g_can_request_progress = toggleTwoButtons(false,'btnGenerate','btnInterrupt')
|
||
toggleTwoButtonsByClass(
|
||
false,
|
||
'btnGenerateClass',
|
||
'btnInterruptClass'
|
||
)
|
||
g_can_request_progress = false
|
||
console.warn(e)
|
||
}
|
||
})
|
||
}
|
||
)
|
||
|
||
//store active layers only if they are not stored.
|
||
async function storeActiveLayers() {
|
||
setTimeout(async () => {
|
||
const layers = await app.activeDocument.activeLayers
|
||
console.log('storeActiveLayers: ', layers.length)
|
||
|
||
if (layers.length > 0) {
|
||
g_saved_active_layers = layers
|
||
await psapi.unselectActiveLayersExe()
|
||
}
|
||
}, 200)
|
||
|
||
// if (g_is_active_layers_stored == false) {
|
||
// g_saved_active_layers = await app.activeDocument.activeLayers
|
||
// g_is_active_layers_stored = true
|
||
// await psapi.unselectActiveLayersExe()
|
||
// } else {
|
||
// }
|
||
}
|
||
async function restoreActiveLayers() {
|
||
const layers = await app.activeDocument.activeLayers
|
||
console.log('restoreActiveLayers: ', layers.length)
|
||
if (layers.length == 0) {
|
||
await psapi.selectLayersExe(g_saved_active_layers)
|
||
g_saved_active_layers = []
|
||
}
|
||
// if (g_is_active_layers_stored == true) {
|
||
// // g_saved_active_layers = await app.activeDocument.activeLayers
|
||
// await psapi.selectLayersExe(g_saved_active_layers)
|
||
// g_is_active_layers_stored = false
|
||
// g_saved_active_layers = []
|
||
// }
|
||
}
|
||
|
||
//store active selection only if they are not stored.
|
||
async function storeActiveSelection() {
|
||
try {
|
||
setTimeout(async () => {
|
||
const layers = await app.activeDocument.activeLayers
|
||
const current_selection = await psapi.checkIfSelectionAreaIsActive()
|
||
console.log('storeActiveSelection: ', current_selection)
|
||
|
||
if (current_selection) {
|
||
g_saved_active_selection = current_selection
|
||
await psapi.unSelectMarqueeExe()
|
||
}
|
||
}, 200)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
async function restoreActiveSelection() {
|
||
try {
|
||
const current_selection = await psapi.checkIfSelectionAreaIsActive()
|
||
|
||
console.log('restoreActiveSelection: ', current_selection)
|
||
if (
|
||
!current_selection &&
|
||
psapi.isSelectionValid(g_saved_active_selection)
|
||
) {
|
||
await psapi.reSelectMarqueeExe(g_saved_active_selection)
|
||
g_saved_active_selection = {}
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
document.getElementById('btnSdUrl').addEventListener('click', async () => {
|
||
//change the sdUrl in server in proxy server
|
||
console.log('you clicked btnSdUrl')
|
||
let new_sd_url = document.getElementById('tiSdUrl').value
|
||
|
||
console.log('new_sd_url: ', new_sd_url)
|
||
|
||
new_sd_url = new_sd_url.trim()
|
||
console.log('new_sd_url.trim(): ', new_sd_url)
|
||
|
||
if (new_sd_url.length > 0) {
|
||
//check if the last character of the url has "/" or '\' and remove it
|
||
|
||
last_index = new_sd_url.length - 1
|
||
|
||
if (new_sd_url[last_index] === '/' || new_sd_url[last_index] === '\\') {
|
||
new_sd_url = new_sd_url.slice(0, -1)
|
||
}
|
||
|
||
//submit the change
|
||
await sdapi.changeSdUrl(new_sd_url)
|
||
}
|
||
})
|
||
|
||
document.querySelector('#taPrompt').addEventListener('focus', async () => {
|
||
if (!g_generation_session.isLoadingActive) {
|
||
console.log('taPrompt focus')
|
||
// console.log('we are in prompt textarea')
|
||
// console.log("g_is_active_layers_stored: ",g_is_active_layers_stored)
|
||
await storeActiveLayers()
|
||
await storeActiveSelection()
|
||
// await psapi.unselectActiveLayersExe()
|
||
}
|
||
})
|
||
document.querySelector('#taPrompt').addEventListener('blur', async () => {
|
||
console.log('taPrompt blur')
|
||
// console.log('we are out of prompt textarea')
|
||
// await psapi.unselectActiveLayersExe()
|
||
// console.log("g_is_active_layers_stored: ",g_is_active_layers_stored)
|
||
await restoreActiveLayers()
|
||
await restoreActiveSelection()
|
||
})
|
||
|
||
document
|
||
.querySelector('#taNegativePrompt')
|
||
.addEventListener('focus', async () => {
|
||
if (!g_generation_session.isLoadingActive) {
|
||
console.log('taNegativePrompt focus')
|
||
// console.log('we are in prompt textarea')
|
||
|
||
await storeActiveLayers()
|
||
await storeActiveSelection()
|
||
// await psapi.unselectActiveLayersExe()
|
||
}
|
||
})
|
||
document
|
||
.querySelector('#taNegativePrompt')
|
||
.addEventListener('blur', async () => {
|
||
console.log('taNegativePrompt blur')
|
||
// console.log('we are out of prompt textarea')
|
||
// await psapi.unselectActiveLayersExe()
|
||
await restoreActiveLayers()
|
||
await restoreActiveSelection()
|
||
})
|
||
|
||
function updateMetadata(new_metadata) {
|
||
const metadatas = []
|
||
try {
|
||
for (metadata of new_metadata) {
|
||
metadata_json = JSON.parse(metadata)
|
||
console.log('metadata_json:', metadata_json)
|
||
metadatas.push(metadata_json)
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
return metadatas
|
||
}
|
||
|
||
async function getSettings() {
|
||
let payload = {}
|
||
try {
|
||
const extension_type = html_manip.getExtensionType() // get the extension type
|
||
|
||
numberOfImages = document.querySelector('#tiNumberOfImages').value
|
||
numberOfSteps = document.querySelector('#tiNumberOfSteps').value
|
||
const prompt = html_manip.getPrompt()
|
||
const negative_prompt = html_manip.getNegativePrompt()
|
||
const hi_res_fix = html_manip.getHiResFixs()
|
||
// 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
|
||
// const mask_blur = document.querySelector('#slMaskBlur').value
|
||
const use_sharp_mask = html_manip.getUseSharpMask()
|
||
const mask_blur = html_manip.getMaskBlur()
|
||
const mask_expansion = document.getElementById('slMaskExpansion').value
|
||
|
||
const inpaint_full_res_padding =
|
||
document.querySelector('#slInpaintPadding').value
|
||
|
||
console.dir(numberOfImages)
|
||
const bUsePromptShortcut = document.getElementById(
|
||
'chUsePromptShortcut'
|
||
).checked
|
||
let prompt_shortcut_ui_dict = {}
|
||
try {
|
||
let prompt_shortcut_string =
|
||
document.getElementById('taPromptShortcut').value
|
||
prompt_shortcut_ui_dict = JSON.parse(prompt_shortcut_string)
|
||
} catch (e) {
|
||
console.warn(
|
||
`warning prompt_shortcut_ui_dict is not valid Json obj: ${e}`
|
||
)
|
||
prompt_shortcut_ui_dict = {}
|
||
}
|
||
|
||
// const slider_width = document.getElementById("slWidth").value
|
||
// gWidth = getWidthFromSlider(slider_width)
|
||
const width = html_manip.getWidth()
|
||
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()
|
||
const h_denoising_strength = html_manip.getSliderSdValue(
|
||
'hrDenoisingStrength',
|
||
0.01
|
||
)
|
||
console.log('Check2')
|
||
|
||
const sampler_name = html_manip.getCheckedSamplerName()
|
||
const mode = html_manip.getMode()
|
||
const b_restore_faces =
|
||
document.getElementById('chRestoreFaces').checked
|
||
|
||
let denoising_strength = h_denoising_strength
|
||
if (mode == 'inpaint' || mode == 'outpaint') {
|
||
var g_use_mask_image = true
|
||
payload['inpaint_full_res'] =
|
||
document.getElementById('chInpaintFullRes').checked
|
||
payload['inpaint_full_res_padding'] = inpaint_full_res_padding * 4
|
||
|
||
console.log('g_use_mask_image is ', g_use_mask_image)
|
||
console.log('g_init_image_mask_name is ', g_init_image_mask_name)
|
||
payload['init_image_mask_name'] = g_init_image_mask_name
|
||
payload['inpainting_fill'] = html_manip.getMaskContent()
|
||
payload['mask_expansion'] = mask_expansion
|
||
payload['mask'] = g_generation_session.activeBase64MaskImage
|
||
|
||
if (use_sharp_mask === false && payload['mask']) {
|
||
//only if mask is available and sharp_mask is off
|
||
// use blurry and expanded mask
|
||
const iterations = payload['mask_expansion']
|
||
const mask = await py_re.maskExpansionRequest(
|
||
payload['mask'],
|
||
iterations
|
||
)
|
||
if (mask) {
|
||
payload['mask'] = mask
|
||
}
|
||
}
|
||
} else if (mode == 'img2img') {
|
||
var g_use_mask_image = false
|
||
delete payload['inpaint_full_res'] // inpaint full res is not available in img2img mode
|
||
delete payload['inpaint_full_res_padding']
|
||
delete payload['init_image_mask_name']
|
||
delete payload['inpainting_fill']
|
||
}
|
||
|
||
if (
|
||
g_sd_mode == 'img2img' ||
|
||
g_sd_mode == 'inpaint' ||
|
||
g_sd_mode == 'outpaint'
|
||
) {
|
||
console.log(`g_use_mask_image:? ${g_use_mask_image}`)
|
||
|
||
denoising_strength = html_manip.getDenoisingStrength()
|
||
payload['denoising_strength'] = denoising_strength
|
||
payload['init_image_name'] = g_init_image_name
|
||
|
||
payload['init_images'] = [
|
||
g_generation_session.activeBase64InitImage,
|
||
]
|
||
}
|
||
|
||
if (hi_res_fix && width > 512 && height > 512) {
|
||
payload['enable_hr'] = hi_res_fix
|
||
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"
|
||
delete payload['enable_hr']
|
||
delete payload['firstphase_width']
|
||
delete payload['firstphase_height']
|
||
}
|
||
|
||
//work with the hord
|
||
|
||
// const script_args_json = {
|
||
// model: "Anything Diffusion",
|
||
// nsfw: false,
|
||
// shared_laion: false,
|
||
// seed_variation: 1,
|
||
// post_processing_1: "None",
|
||
// post_processing_2: "None",
|
||
// post_processing_3: "None"
|
||
// }
|
||
// const script_args = Object.values(script_args_json)
|
||
|
||
const backend_type = html_manip.getBackendType()
|
||
if (backend_type === backendTypeEnum['Auto1111HordeExtension']) {
|
||
payload['script_name'] = script_horde.script_name
|
||
payload['script_args'] = script_horde.getScriptArgs()
|
||
} else {
|
||
delete payload['script_name']
|
||
delete payload['script_args']
|
||
}
|
||
|
||
if (bUsePromptShortcut) {
|
||
//replace the prompt with the prompt shortcut equivalent
|
||
const [new_prompt, new_negative_prompt] =
|
||
py_re.replacePromptsWithShortcuts(
|
||
prompt,
|
||
negative_prompt,
|
||
prompt_shortcut_ui_dict
|
||
)
|
||
|
||
//used in generation
|
||
payload['prompt'] = new_prompt
|
||
payload['negative_prompt'] = new_negative_prompt
|
||
|
||
//used to when resote settings from metadata
|
||
payload['original_prompt'] = prompt
|
||
payload['original_negative_prompt'] = negative_prompt
|
||
} else {
|
||
//use the same prompt as in the prompt textarea
|
||
payload['prompt'] = prompt
|
||
payload['negative_prompt'] = negative_prompt
|
||
}
|
||
|
||
payload = {
|
||
...payload,
|
||
// prompt: prompt,
|
||
// negative_prompt: negative_prompt,
|
||
steps: numberOfSteps,
|
||
// n_iter: numberOfImages,
|
||
sampler_index: sampler_name,
|
||
width: width,
|
||
height: height,
|
||
denoising_strength: denoising_strength,
|
||
batch_size: numberOfImages,
|
||
cfg_scale: cfg_scale,
|
||
seed: seed,
|
||
mask_blur: mask_blur,
|
||
use_sharp_mask: use_sharp_mask,
|
||
use_prompt_shortcut: bUsePromptShortcut,
|
||
prompt_shortcut_ui_dict: prompt_shortcut_ui_dict,
|
||
uniqueDocumentId: uniqueDocumentId,
|
||
mode: mode,
|
||
restore_faces: b_restore_faces,
|
||
// script_args: script_args,
|
||
// script_name:"Run on Stable Horde"
|
||
}
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
return payload
|
||
}
|
||
|
||
async function getExtraSettings() {
|
||
let payload = {}
|
||
try {
|
||
const html_manip = require('./utility/html_manip')
|
||
const upscaling_resize = html_manip.getUpscaleSize()
|
||
const gfpgan_visibility = html_manip.getGFPGANVisibility()
|
||
const codeformer_visibility = html_manip.getCodeFormerVisibility()
|
||
const codeformer_weight = html_manip.getCodeFormerWeight()
|
||
const selection_info = await psapi.getSelectionInfoExe()
|
||
const width = selection_info.width * upscaling_resize
|
||
const height = selection_info.height * upscaling_resize
|
||
//resize_mode = 0 means "resize to upscaling_resize"
|
||
//resize_mode = 1 means "resize to width and height"
|
||
payload['resize_mode'] = 0
|
||
payload['show_extras_results'] = 0
|
||
payload['gfpgan_visibility'] = gfpgan_visibility
|
||
payload['codeformer_visibility'] = codeformer_visibility
|
||
payload['codeformer_weight'] = codeformer_weight
|
||
payload['upscaling_resize'] = upscaling_resize
|
||
payload['upscaling_resize_w'] = width
|
||
payload['upscaling_resize_h'] = height
|
||
payload['upscaling_crop'] = true
|
||
const upscaler1 = document.querySelector('#hrModelsMenuUpscale1').value
|
||
payload['upscaler_1'] = upscaler1 === undefined ? 'None' : upscaler1
|
||
const upscaler2 = document.querySelector('#hrModelsMenuUpscale2').value
|
||
payload['upscaler_2'] = upscaler2 === undefined ? 'None' : upscaler2
|
||
const extras_upscaler_2_visibility = html_manip.getUpscaler2Visibility()
|
||
payload['extras_upscaler_2_visibility'] = extras_upscaler_2_visibility
|
||
payload['upscale_first'] = false
|
||
const uniqueDocumentId = await getUniqueDocumentId()
|
||
payload['uniqueDocumentId'] = uniqueDocumentId
|
||
|
||
// const layer = await app.activeDocument.activeLayers[0]
|
||
const layer = await app.activeDocument.activeLayers[0]
|
||
const old_name = layer.name
|
||
|
||
// image_name = await app.activeDocument.activeLayers[0].name
|
||
|
||
//convert layer name to a file name
|
||
let image_name = psapi.layerNameToFileName(
|
||
old_name,
|
||
layer.id,
|
||
random_session_id
|
||
)
|
||
image_name = `${image_name}.png`
|
||
|
||
const base64_image = g_generation_session.activeBase64InitImage
|
||
|
||
payload['image'] = base64_image
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
return payload
|
||
}
|
||
|
||
async function getExtraSettings() {
|
||
let payload = {}
|
||
try {
|
||
const html_manip = require('./utility/html_manip')
|
||
const upscaling_resize = html_manip.getUpscaleSize()
|
||
const gfpgan_visibility = html_manip.getGFPGANVisibility()
|
||
const codeformer_visibility = html_manip.getCodeFormerVisibility()
|
||
const codeformer_weight = html_manip.getCodeFormerWeight()
|
||
const selection_info = await psapi.getSelectionInfoExe()
|
||
const width = selection_info.width * upscaling_resize
|
||
const height = selection_info.height * upscaling_resize
|
||
//resize_mode = 0 means "resize to upscaling_resize"
|
||
//resize_mode = 1 means "resize to width and height"
|
||
payload['resize_mode'] = 0
|
||
payload['show_extras_results'] = 0
|
||
payload['gfpgan_visibility'] = gfpgan_visibility
|
||
payload['codeformer_visibility'] = codeformer_visibility
|
||
payload['codeformer_weight'] = codeformer_weight
|
||
payload['upscaling_resize'] = upscaling_resize
|
||
payload['upscaling_resize_w'] = width
|
||
payload['upscaling_resize_h'] = height
|
||
payload['upscaling_crop'] = true
|
||
const upscaler1 = document.querySelector('#hrModelsMenuUpscale1').value
|
||
payload['upscaler_1'] = upscaler1 === undefined ? 'None' : upscaler1
|
||
const upscaler2 = document.querySelector('#hrModelsMenuUpscale2').value
|
||
payload['upscaler_2'] = upscaler2 === undefined ? 'None' : upscaler2
|
||
const extras_upscaler_2_visibility = html_manip.getUpscaler2Visibility()
|
||
payload['extras_upscaler_2_visibility'] = extras_upscaler_2_visibility
|
||
payload['upscale_first'] = false
|
||
const uniqueDocumentId = await getUniqueDocumentId()
|
||
payload['uniqueDocumentId'] = uniqueDocumentId
|
||
|
||
// const layer = await app.activeDocument.activeLayers[0]
|
||
const layer = await app.activeDocument.activeLayers[0]
|
||
const old_name = layer.name
|
||
|
||
// image_name = await app.activeDocument.activeLayers[0].name
|
||
|
||
//convert layer name to a file name
|
||
let image_name = psapi.layerNameToFileName(
|
||
old_name,
|
||
layer.id,
|
||
random_session_id
|
||
)
|
||
image_name = `${image_name}.png`
|
||
|
||
const base64_image = g_generation_session.activeBase64InitImage
|
||
|
||
payload['image'] = base64_image
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
return payload
|
||
}
|
||
|
||
async function generateImg2Img(settings) {
|
||
let json = {}
|
||
try {
|
||
const backend_type = html_manip.getBackendType()
|
||
if (backend_type === backendTypeEnum['HordeNative']) {
|
||
json = await g_horde_generator.generate()
|
||
// json = await g_horde_generator.toGenerationFormat(images_info)
|
||
// json = { images_info: images_info }
|
||
} else if (
|
||
backend_type === backendTypeEnum['Auto1111'] ||
|
||
backend_type === backendTypeEnum['Auto1111HordeExtension']
|
||
) {
|
||
json = await sdapi.requestImg2Img(settings)
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
json = {}
|
||
}
|
||
|
||
return json
|
||
}
|
||
async function generateTxt2Img(settings) {
|
||
let json = {}
|
||
try {
|
||
const backend_type = html_manip.getBackendType()
|
||
if (backend_type === backendTypeEnum['HordeNative']) {
|
||
json = await g_horde_generator.generate()
|
||
// json = await g_horde_generator.toGenerationFormat(images_info)
|
||
// json = { images_info: images_info }
|
||
} else if (
|
||
backend_type === backendTypeEnum['Auto1111'] ||
|
||
backend_type === backendTypeEnum['Auto1111HordeExtension']
|
||
) {
|
||
json = await sdapi.requestTxt2Img(settings)
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
json = {}
|
||
}
|
||
|
||
return json
|
||
}
|
||
//REFACTOR: move to selection.js
|
||
async function hasSelectionChanged(new_selection, old_selection) {
|
||
if (
|
||
new_selection.left === old_selection.left &&
|
||
new_selection.bottom === old_selection.bottom &&
|
||
new_selection.right === old_selection.right &&
|
||
new_selection.top === old_selection.top
|
||
) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
|
||
async function easyModeGenerate(mode) {
|
||
try {
|
||
let active_layer = await app.activeDocument.activeLayers[0] // store the active layer so we could reselected after the session end clean up
|
||
//make sure you have selection area active on the canvas
|
||
const isSelectionAreaValid = await psapi.checkIfSelectionAreaIsActive()
|
||
if (!isSelectionAreaValid) {
|
||
await psapi.promptForMarqueeTool()
|
||
return null
|
||
}
|
||
|
||
console.log('easyModeGenerate mdoe: ', mode)
|
||
if (psapi.isSelectionValid(g_generation_session.selectionInfo)) {
|
||
// check we have an old selection stored
|
||
const new_selection = await psapi.getSelectionInfoExe()
|
||
if (
|
||
await hasSelectionChanged(
|
||
new_selection,
|
||
g_generation_session.selectionInfo
|
||
)
|
||
) {
|
||
// check the new selection is difference than the old
|
||
// end current session
|
||
g_generation_session.selectionInfo = new_selection
|
||
try {
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['Accept']
|
||
) //end session and accept all images
|
||
g_ui.onEndSessionUI()
|
||
|
||
// await acceptAll()
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
} else {
|
||
// store selection value
|
||
g_generation_session.selectionInfo =
|
||
await psapi.getSelectionInfoExe()
|
||
}
|
||
|
||
if (g_generation_session.isActive()) {
|
||
//active session
|
||
//
|
||
if (g_generation_session.mode !== mode) {
|
||
//active session but it's a new mode
|
||
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['Accept']
|
||
)
|
||
g_ui.onEndSessionUI()
|
||
//start new session after you ended the old one
|
||
await g_generation_session.startSession()
|
||
|
||
g_generation_session.mode = mode
|
||
}
|
||
} else {
|
||
// new session
|
||
g_generation_session.mode = mode
|
||
await g_generation_session.startSession() //start the session and create a output folder
|
||
}
|
||
|
||
await psapi.selectLayersExe([active_layer]) //reselect the active layer since the clean up of the session sometime will change which layer is selected
|
||
if (mode === 'txt2img') {
|
||
//Note: keep it for clearity/ readibility
|
||
} else if (mode === 'img2img' || mode === 'upscale') {
|
||
await snapAndFillHandler()
|
||
} else if (mode === 'inpaint') {
|
||
await btnInitInpaintHandler()
|
||
} else if (mode === 'outpaint') {
|
||
await easyModeOutpaint()
|
||
}
|
||
|
||
//safe to close the previous generation_session outputfolder, since closing a folder will unselect any layer in it.
|
||
////and the plugin may still need those layers for inpainting mode for example.
|
||
|
||
await g_generation_session.closePreviousOutputGroup()
|
||
|
||
const settings =
|
||
mode === 'upscale' ? await getExtraSettings() : await getSettings()
|
||
|
||
g_generation_session.last_settings = settings
|
||
await generate(settings, mode)
|
||
|
||
// await g_generation_session.deleteProgressLayer() // delete the old progress layer
|
||
await g_generation_session.deleteProgressImage()
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
async function generate(settings, mode) {
|
||
try {
|
||
//pre generation
|
||
// toggleGenerateInterruptButton(true)
|
||
|
||
// const isFirstGeneration = !(g_is_generation_session_active) // check if this is the first generation in the session
|
||
// const isFirstGeneration = !(g_generation_session.isActive()) // check if this is the first generation in the session
|
||
const isFirstGeneration = g_generation_session.isFirstGeneration
|
||
|
||
// g_generation_session.startSession()
|
||
g_generation_session.activate()
|
||
|
||
g_ui.onStartSessionUI()
|
||
// toggleTwoButtons(true,'btnGenerate','btnInterrupt')
|
||
toggleTwoButtonsByClass(true, 'btnGenerateClass', 'btnInterruptClass')
|
||
g_can_request_progress = true
|
||
//wait 2 seconds till you check for progress
|
||
|
||
if (html_manip.getBackendType() !== backendTypeEnum['HordeNative']) {
|
||
setTimeout(async function () {
|
||
// change this to setInterval()
|
||
await progressRecursive()
|
||
}, 2000)
|
||
}
|
||
|
||
console.log(settings)
|
||
|
||
g_request_status = requestState['Generate']
|
||
let json = {}
|
||
if (mode == 'txt2img') {
|
||
json = await generateTxt2Img(settings)
|
||
} else if (
|
||
mode == 'img2img' ||
|
||
mode == 'inpaint' ||
|
||
mode == 'outpaint'
|
||
) {
|
||
// json = await sdapi.requestImg2Img(settings)
|
||
|
||
json = await generateImg2Img(settings)
|
||
} else if (mode == 'upscale') {
|
||
json = await sdapi.requestExtraSingleImage(settings)
|
||
}
|
||
|
||
// if (g_sd_mode == 'outpaint') {
|
||
// // await easyModeOutpaint()
|
||
// json = await sdapi.requestImg2Img(settings)
|
||
|
||
// // await setTimeout(async ()=> {
|
||
// // json = await sdapi.requestImg2Img(settings)
|
||
|
||
// // },5000)
|
||
// }
|
||
if (g_request_status === requestState['Interrupt']) {
|
||
//when generate request get interrupted. reset progress bar to 0, discard any meta data and images returned from the proxy server by returning from the function.
|
||
html_manip.updateProgressBarsHtml(0)
|
||
//check whether request was "generate" or "generate more"
|
||
//if it's generate discard the session
|
||
if (isFirstGeneration) {
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['Discard']
|
||
) //end session and delete all images
|
||
g_ui.onEndSessionUI()
|
||
|
||
// //delete all mask related layers
|
||
}
|
||
return null
|
||
}
|
||
|
||
// check if json is empty {}, {} means the proxy server didn't return a valid data
|
||
if (Object.keys(json).length === 0) {
|
||
if (isFirstGeneration) {
|
||
await g_generation_session.endSession(
|
||
session.GarbageCollectionState['Discard']
|
||
) //end session and delete all images
|
||
g_ui.onEndSessionUI()
|
||
|
||
// //delete all mask related layers
|
||
}
|
||
return null
|
||
}
|
||
|
||
//post generation: will execute only if the generate request doesn't get interrupted
|
||
//get the updated metadata from json response
|
||
|
||
// g_metadatas = updateMetadata(json.images_info.auto_metadata)
|
||
g_last_seed = json.images_info[0]?.auto_metadata?.Seed
|
||
//finished generating, set the button back to generate
|
||
|
||
// toggleTwoButtons(false,'btnGenerate','btnInterrupt')
|
||
toggleTwoButtonsByClass(false, 'btnGenerateClass', 'btnInterruptClass')
|
||
g_can_request_progress = false
|
||
html_manip.updateProgressBarsHtml(0)
|
||
|
||
const images_info = json?.images_info
|
||
// gImage_paths = images_info.images_paths
|
||
//open the generated images from disk and load them onto the canvas
|
||
const b_use_silent_import =
|
||
document.getElementById('chUseSilentImport').checked
|
||
|
||
if (isFirstGeneration) {
|
||
//this is new generation session
|
||
|
||
g_generation_session.image_paths_to_layers =
|
||
await silentImagesToLayersExe(images_info)
|
||
|
||
g_generation_session.base64OutputImages = {} //delete all previouse images, Note move this to session end ()
|
||
for (const image_info of images_info) {
|
||
const path = image_info['path']
|
||
const base64_image = image_info['base64']
|
||
g_generation_session.base64OutputImages[path] = base64_image
|
||
const [document_name, image_name] = path.split('/')
|
||
await saveFileInSubFolder(
|
||
base64_image,
|
||
document_name,
|
||
image_name
|
||
) //save the output image
|
||
const json_file_name = `${image_name.split('.')[0]}.json`
|
||
settings['auto_metadata'] = image_info?.auto_metadata
|
||
await saveJsonFileInSubFolder(
|
||
settings,
|
||
document_name,
|
||
json_file_name
|
||
) //save the settings
|
||
}
|
||
|
||
g_number_generation_per_session = 1
|
||
g_generation_session.isFirstGeneration = false
|
||
} else {
|
||
// generation session is active so we will generate more
|
||
|
||
let last_images_paths = await silentImagesToLayersExe(images_info)
|
||
|
||
for (const image_info of images_info) {
|
||
const path = image_info['path']
|
||
const base64_image = image_info['base64']
|
||
g_generation_session.base64OutputImages[path] = base64_image
|
||
const [document_name, image_name] = path.split('/')
|
||
await saveFileInSubFolder(
|
||
base64_image,
|
||
document_name,
|
||
image_name
|
||
)
|
||
const json_file_name = `${image_name.split('.')[0]}.json`
|
||
settings['auto_metadata'] = image_info?.auto_metadata
|
||
await saveJsonFileInSubFolder(
|
||
settings,
|
||
document_name,
|
||
json_file_name
|
||
) //save the settings
|
||
}
|
||
|
||
g_generation_session.image_paths_to_layers = {
|
||
...g_generation_session.image_paths_to_layers,
|
||
...last_images_paths,
|
||
}
|
||
g_number_generation_per_session++
|
||
}
|
||
await psapi.reSelectMarqueeExe(g_generation_session.selectionInfo)
|
||
//update the viewer
|
||
await loadViewerImages()
|
||
|
||
//esnures that progress bars are set to 0 (as last progress request call might have returned less than 100%)
|
||
updateProgressBarsHtml(0)
|
||
} catch (e) {
|
||
console.error(`btnGenerate.click(): `, e)
|
||
}
|
||
}
|
||
|
||
// async function processHordeResult() {
|
||
// if (isFirstGeneration) {
|
||
// //this is new generation session
|
||
|
||
// g_generation_session.image_paths_to_layers =
|
||
// await silentImagesToLayersExe(images_info)
|
||
|
||
// g_generation_session.base64OutputImages = {} //delete all previouse images, Note move this to session end ()
|
||
// for (const image_info of images_info) {
|
||
// const path = image_info['path']
|
||
// const base64_image = image_info['base64']
|
||
// g_generation_session.base64OutputImages[path] = base64_image
|
||
// const [document_name, image_name] = path.split('/')
|
||
// await saveFileInSubFolder(base64_image, document_name, image_name) //save the output image
|
||
// const json_file_name = `${image_name.split('.')[0]}.json`
|
||
// settings['auto_metadata'] = image_info?.auto_metadata
|
||
// await saveJsonFileInSubFolder(
|
||
// settings,
|
||
// document_name,
|
||
// json_file_name
|
||
// ) //save the settings
|
||
// }
|
||
|
||
// g_number_generation_per_session = 1
|
||
// g_generation_session.isFirstGeneration = false
|
||
// } else {
|
||
// // generation session is active so we will generate more
|
||
|
||
// let last_images_paths = await silentImagesToLayersExe(images_info)
|
||
|
||
// for (const image_info of images_info) {
|
||
// const path = image_info['path']
|
||
// const base64_image = image_info['base64']
|
||
// g_generation_session.base64OutputImages[path] = base64_image
|
||
// const [document_name, image_name] = path.split('/')
|
||
// await saveFileInSubFolder(base64_image, document_name, image_name)
|
||
// const json_file_name = `${image_name.split('.')[0]}.json`
|
||
// settings['auto_metadata'] = image_info?.auto_metadata
|
||
// await saveJsonFileInSubFolder(
|
||
// settings,
|
||
// document_name,
|
||
// json_file_name
|
||
// ) //save the settings
|
||
// }
|
||
|
||
// g_generation_session.image_paths_to_layers = {
|
||
// ...g_generation_session.image_paths_to_layers,
|
||
// ...last_images_paths,
|
||
// }
|
||
// g_number_generation_per_session++
|
||
// }
|
||
// }
|
||
|
||
Array.from(document.getElementsByClassName('btnGenerateClass')).forEach(
|
||
(btn) => {
|
||
btn.addEventListener('click', async () => {
|
||
await easyModeGenerate(g_sd_mode)
|
||
})
|
||
}
|
||
)
|
||
|
||
document
|
||
.getElementById('btnRefreshModels')
|
||
.addEventListener('click', async (e) => {
|
||
await refreshUI()
|
||
tempDisableElement(e.target, 3000)
|
||
})
|
||
|
||
document.querySelector('#mModelsMenu').addEventListener('change', (evt) => {
|
||
const model_index = evt.target.selectedIndex
|
||
console.log(`Selected item: ${evt.target.selectedIndex}`)
|
||
let model = g_models[0]
|
||
if (model_index < g_models.length) {
|
||
model = g_models[model_index]
|
||
}
|
||
// g_model_name = `${model.model_name}.ckpt`
|
||
g_model_title = model.title
|
||
console.log('g_model_title: ', g_model_title)
|
||
sdapi.requestSwapModel(g_model_title)
|
||
})
|
||
|
||
document
|
||
.getElementById('btnLayerToSelection')
|
||
.addEventListener('click', async () => {
|
||
try {
|
||
const isSelectionAreaValid =
|
||
await psapi.checkIfSelectionAreaIsActive()
|
||
if (isSelectionAreaValid) {
|
||
const validSelection = isSelectionAreaValid
|
||
await psapi.layerToSelection(validSelection)
|
||
} else {
|
||
await psapi.promptForMarqueeTool()
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
|
||
document
|
||
.getElementById('btnSetInitImageViewer')
|
||
.addEventListener('click', async () => {
|
||
//set init image event listener, use when settion is active
|
||
const layer = await app.activeDocument.activeLayers[0]
|
||
const image_info = await psapi.silentSetInitImage(
|
||
layer,
|
||
random_session_id
|
||
)
|
||
const image_name = image_info['name']
|
||
const path = `./server/python_server/init_images/${image_name}`
|
||
g_viewer_manager.addInitImageLayers(layer, path, false)
|
||
})
|
||
|
||
document
|
||
.getElementById('btnSetMaskViewer')
|
||
.addEventListener('click', async () => {
|
||
try {
|
||
await executeAsModal(async () => {
|
||
if (g_viewer_manager.mask_solid_background) {
|
||
g_viewer_manager.mask_solid_background.visible = true
|
||
}
|
||
})
|
||
const layer = g_viewer_manager.maskGroup
|
||
// const layer = await app.activeDocument.activeLayers[0]
|
||
const mask_info = await psapi.silentSetInitImageMask(
|
||
layer,
|
||
random_session_id
|
||
)
|
||
const image_name = mask_info['name']
|
||
const path = `./server/python_server/init_images/${image_name}`
|
||
g_viewer_manager.addMaskLayers(
|
||
layer,
|
||
path,
|
||
false,
|
||
mask_info['base64']
|
||
) //can be autodeleted?
|
||
await psapi.unselectActiveLayersExe()
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
|
||
// document.getElementById('bSetInitImage').addEventListener('click', async () => {
|
||
// const layer = await app.activeDocument.activeLayers[0]
|
||
// await psapi.setInitImage(layer, random_session_id)
|
||
// })
|
||
|
||
// document
|
||
// .getElementById('bSetInitImageMask')
|
||
// .addEventListener('click', async () => {
|
||
// const layer = await app.activeDocument.activeLayers[0]
|
||
// await psapi.setInitImageMask(layer, random_session_id)
|
||
// })
|
||
function moveElementToAnotherTab(elementId, newParentId) {
|
||
const element = document.getElementById(elementId)
|
||
document.getElementById(newParentId).appendChild(element)
|
||
}
|
||
|
||
// moveElementToAnotherTab("batchNumberUi","batchNumberViewerTabContainer")
|
||
function updateProgressBarsHtml(new_value) {
|
||
document.querySelectorAll('.pProgressBars').forEach((el) => {
|
||
// id = el.getAttribute("id")
|
||
// console.log("progressbar id:", id)
|
||
el.setAttribute('value', new_value)
|
||
})
|
||
document.querySelectorAll('.lProgressLabel').forEach((el) => {
|
||
console.log('updateProgressBarsHtml: ', new_value)
|
||
if (new_value > 0) el.innerHTML = 'In progress...'
|
||
else el.innerHTML = 'No work in progress'
|
||
})
|
||
// document.querySelector('#pProgressBar').value
|
||
}
|
||
|
||
async function updateProgressImage(progress_base64) {
|
||
await executeAsModal(async (context) => {
|
||
const history_id = await context.hostControl.suspendHistory({
|
||
documentID: app.activeDocument.id, //TODO: change this to the session document id
|
||
name: 'Progress Image',
|
||
})
|
||
await g_generation_session.deleteProgressLayer() // delete the old progress layer
|
||
|
||
//update the progress image
|
||
const selection_info = await g_generation_session.selectionInfo
|
||
const b_exsit = layer_util.Layer.doesLayerExist(
|
||
g_generation_session.progress_layer
|
||
)
|
||
if (!b_exsit) {
|
||
const layer = await io.IO.base64ToLayer(
|
||
progress_base64,
|
||
'temp_progress_image.png',
|
||
selection_info.left,
|
||
selection_info.top,
|
||
selection_info.width,
|
||
selection_info.height
|
||
)
|
||
g_generation_session.progress_layer = layer // sotre the new progress layer// TODO: make sure you delete the progress layer when the geneeration request end
|
||
} else {
|
||
// if ,somehow, the layer still exsit
|
||
await layer_util.deleteLayers([g_generation_session.progress_layer]) // delete the old progress layer
|
||
}
|
||
await context.hostControl.resumeHistory(history_id)
|
||
})
|
||
}
|
||
|
||
async function progressRecursive() {
|
||
try {
|
||
let json = await sdapi.requestProgress()
|
||
// document.querySelector('#pProgressBar').value = json.progress * 100
|
||
progress_value = json.progress * 100
|
||
html_manip.updateProgressBarsHtml(progress_value)
|
||
if (json?.current_image) {
|
||
const base64_url = general.base64ToBase64Url(json.current_image)
|
||
|
||
html_manip.setProgressImageSrc(base64_url)
|
||
const progress_image_html = document.getElementById('progressImage')
|
||
progress_image_html.style.width = progress_image_html.naturalWidth
|
||
progress_image_html.style.height = progress_image_html.naturalHeight
|
||
|
||
if (g_generation_session.last_settings.batch_size === '1') {
|
||
//only update the canvas if the number of images are one
|
||
//don't update the canvas with multiple images.
|
||
await updateProgressImage(json.current_image)
|
||
}
|
||
}
|
||
if (g_generation_session.isActive() && g_can_request_progress == true) {
|
||
//refactor this code
|
||
setTimeout(async () => {
|
||
await progressRecursive()
|
||
}, 500)
|
||
}
|
||
} catch (e) {
|
||
if (
|
||
g_generation_session.isActive() &&
|
||
g_can_request_progress === true
|
||
) {
|
||
setTimeout(async () => {
|
||
await progressRecursive()
|
||
}, 1000)
|
||
}
|
||
}
|
||
}
|
||
|
||
function changeImage() {
|
||
let img = document.getElementById('img1')
|
||
img.src = 'https://source.unsplash.com/random'
|
||
}
|
||
|
||
// document.getElementById('btnChangeImage').addEventListener('click', changeImage)
|
||
|
||
async function imageToSmartObject() {
|
||
const { batchPlay } = require('photoshop').action
|
||
const { executeAsModal } = require('photoshop').core
|
||
|
||
try {
|
||
// const file = await fs.getFileForOpening()
|
||
// token = await fs.getEntryForPersistentToken(file);
|
||
// const entry = await fs.getEntryForPersistentToken(token);
|
||
// const session_token = await fs.createSessionToken(entry);
|
||
// // let token = await fs.createSessionToken(entry)
|
||
await executeAsModal(
|
||
async () => {
|
||
console.log('imageToSmartObject():')
|
||
const storage = require('uxp').storage
|
||
const fs = storage.localFileSystem
|
||
let pluginFolder = await fs.getPluginFolder()
|
||
let img = await pluginFolder.getEntry(
|
||
'output- 1672730735.1670313.png'
|
||
)
|
||
const result = await batchPlay(
|
||
[
|
||
{
|
||
_obj: 'placeEvent',
|
||
ID: 95,
|
||
null: {
|
||
_path: img,
|
||
_kind: 'local',
|
||
},
|
||
freeTransformCenterState: {
|
||
_enum: 'quadCenterState',
|
||
_value: 'QCSAverage',
|
||
},
|
||
offset: {
|
||
_obj: 'offset',
|
||
horizontal: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
vertical: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
},
|
||
replaceLayer: {
|
||
_obj: 'placeEvent',
|
||
from: {
|
||
_ref: 'layer',
|
||
_id: 56,
|
||
},
|
||
to: {
|
||
_ref: 'layer',
|
||
_id: 70,
|
||
},
|
||
},
|
||
_options: {
|
||
dialogOptions: 'dontDisplay',
|
||
},
|
||
},
|
||
],
|
||
{
|
||
synchronousExecution: true,
|
||
modalBehavior: 'execute',
|
||
}
|
||
)
|
||
},
|
||
{
|
||
commandName: 'Create Label',
|
||
}
|
||
)
|
||
} catch (e) {
|
||
console.log('imageToSmartObject() => error: ')
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
// document.getElementById('btnNewLayer').addEventListener('click', imageToSmartObject )
|
||
|
||
async function placeEmbedded(image_name, dir_entery) {
|
||
//silent importer
|
||
|
||
try {
|
||
// console.log('placeEmbedded(): image_path: ', image_path)
|
||
|
||
const formats = require('uxp').storage.formats
|
||
const storage = require('uxp').storage
|
||
const fs = storage.localFileSystem
|
||
// const names = image_path.split('/')
|
||
// const length = names.length
|
||
// const image_name = names[length - 1]
|
||
// const project_name = names[length - 2]
|
||
let image_dir = dir_entery
|
||
// const image_dir = `./server/python_server/output/${project_name}`
|
||
// image_path = "output/f027258e-71b8-430a-9396-0a19425f2b44/output- 1674323725.126322.png"
|
||
|
||
// let img_dir = await .getEntry(image_dir)
|
||
// const file = await img_dir.createFile('output- 1674298902.0571606.png', {overwrite: true});
|
||
|
||
const file = await image_dir.createFile(image_name, { overwrite: true })
|
||
|
||
const img = await file.read({ format: formats.binary })
|
||
const token = await storage.localFileSystem.createSessionToken(file)
|
||
let place_event_result
|
||
await executeAsModal(async () => {
|
||
const result = await batchPlay(
|
||
[
|
||
{
|
||
_obj: 'placeEvent',
|
||
ID: 6,
|
||
null: {
|
||
_path: token,
|
||
_kind: 'local',
|
||
},
|
||
freeTransformCenterState: {
|
||
_enum: 'quadCenterState',
|
||
_value: 'QCSAverage',
|
||
},
|
||
offset: {
|
||
_obj: 'offset',
|
||
horizontal: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
vertical: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
},
|
||
_isCommand: true,
|
||
_options: {
|
||
dialogOptions: 'dontDisplay',
|
||
},
|
||
},
|
||
],
|
||
{
|
||
synchronousExecution: true,
|
||
modalBehavior: 'execute',
|
||
}
|
||
)
|
||
console.log('placeEmbedd batchPlay result: ', result)
|
||
|
||
place_event_result = result[0]
|
||
})
|
||
|
||
return place_event_result
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
function _base64ToArrayBuffer(base64) {
|
||
var binary_string = window.atob(base64)
|
||
var len = binary_string.length
|
||
var bytes = new Uint8Array(len)
|
||
for (var i = 0; i < len; i++) {
|
||
bytes[i] = binary_string.charCodeAt(i)
|
||
}
|
||
return bytes.buffer
|
||
}
|
||
function _arrayBufferToBase64(buffer) {
|
||
var binary = ''
|
||
var bytes = new Uint8Array(buffer)
|
||
var len = bytes.byteLength
|
||
for (var i = 0; i < len; i++) {
|
||
binary += String.fromCharCode(bytes[i])
|
||
}
|
||
return window.btoa(binary)
|
||
}
|
||
|
||
async function getDocFolder(doc_uuid) {
|
||
try {
|
||
// const uuid = await getUniqueDocumentId()
|
||
const data_folder = await storage.localFileSystem.getDataFolder()
|
||
|
||
let doc_folder
|
||
try {
|
||
doc_folder = await data_folder.getEntry(doc_uuid)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
//create document folder
|
||
doc_folder = await data_folder.createFolder(doc_uuid)
|
||
}
|
||
|
||
return doc_folder
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
async function getCurrentDocFolder() {
|
||
//move to a global utililty lib
|
||
const uuid = await getUniqueDocumentId()
|
||
|
||
let doc_folder = await getDocFolder(uuid)
|
||
return doc_folder
|
||
}
|
||
async function getInitImagesDir() {
|
||
const uuid = await getUniqueDocumentId()
|
||
|
||
let doc_folder = await getDocFolder(uuid)
|
||
let init_folder
|
||
try {
|
||
init_folder = await doc_folder.getEntry('init_images')
|
||
} catch (e) {
|
||
console.warn(e)
|
||
//create document folder
|
||
init_folder = await doc_folder.createFolder('init_images')
|
||
}
|
||
return init_folder
|
||
}
|
||
async function saveFileInSubFolder(b64Image, sub_folder_name, file_name) {
|
||
// const b64Image =
|
||
// 'iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC'
|
||
|
||
const img = _base64ToArrayBuffer(b64Image)
|
||
|
||
// const img_name = 'temp_output_image.png'
|
||
const img_name = file_name
|
||
const folder = await storage.localFileSystem.getDataFolder()
|
||
const documentFolderName = sub_folder_name
|
||
let documentFolder
|
||
try {
|
||
documentFolder = await folder.getEntry(documentFolderName)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
//create document folder
|
||
documentFolder = await folder.createFolder(documentFolderName)
|
||
}
|
||
|
||
console.log('documentFolder.nativePath: ', documentFolder.nativePath)
|
||
const file = await documentFolder.createFile(img_name, { overwrite: true })
|
||
|
||
await file.write(img, { format: storage.formats.binary })
|
||
|
||
const token = await storage.localFileSystem.createSessionToken(file) // batchPlay requires a token on _path
|
||
}
|
||
async function saveJsonFileInSubFolder(json, sub_folder_name, file_name) {
|
||
// const b64Image =
|
||
// 'iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC'
|
||
|
||
// const img_name = 'temp_output_image.png'
|
||
|
||
const json_file_name = file_name
|
||
|
||
const folder = await storage.localFileSystem.getDataFolder()
|
||
const documentFolderName = sub_folder_name
|
||
let documentFolder
|
||
try {
|
||
documentFolder = await folder.getEntry(documentFolderName)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
//create document folder
|
||
documentFolder = await folder.createFolder(documentFolderName)
|
||
}
|
||
|
||
console.log('documentFolder.nativePath: ', documentFolder.nativePath)
|
||
const file = await documentFolder.createFile(json_file_name, {
|
||
type: storage.types.file,
|
||
overwrite: true,
|
||
})
|
||
|
||
const JSONInPrettyFormat = JSON.stringify(json, undefined, 4)
|
||
await file.write(JSONInPrettyFormat, {
|
||
format: storage.formats.utf8,
|
||
append: false,
|
||
})
|
||
|
||
const token = await storage.localFileSystem.createSessionToken(file) // batchPlay requires a token on _path
|
||
}
|
||
|
||
async function base64ToFile(b64Image, image_name = 'output_image.png') {
|
||
// const b64Image =
|
||
// 'iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC'
|
||
try {
|
||
const img = _base64ToArrayBuffer(b64Image)
|
||
|
||
const img_name = image_name
|
||
|
||
const folder = await storage.localFileSystem.getTemporaryFolder()
|
||
const file = await folder.createFile(img_name, { overwrite: true })
|
||
|
||
await file.write(img, { format: storage.formats.binary })
|
||
|
||
const token = await storage.localFileSystem.createSessionToken(file) // batchPlay requires a token on _path
|
||
|
||
let place_event_result
|
||
let imported_layer
|
||
await executeAsModal(async () => {
|
||
const result = await batchPlay(
|
||
[
|
||
{
|
||
_obj: 'placeEvent',
|
||
// ID: 6,
|
||
null: {
|
||
_path: token,
|
||
_kind: 'local',
|
||
},
|
||
freeTransformCenterState: {
|
||
_enum: 'quadCenterState',
|
||
_value: 'QCSAverage',
|
||
},
|
||
offset: {
|
||
_obj: 'offset',
|
||
horizontal: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
vertical: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
},
|
||
_isCommand: true,
|
||
_options: {
|
||
dialogOptions: 'dontDisplay',
|
||
},
|
||
},
|
||
],
|
||
{
|
||
synchronousExecution: true,
|
||
modalBehavior: 'execute',
|
||
}
|
||
)
|
||
console.log('placeEmbedd batchPlay result: ', result)
|
||
|
||
place_event_result = result[0]
|
||
imported_layer = await app.activeDocument.activeLayers[0]
|
||
})
|
||
return imported_layer
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
|
||
// return place_event_result
|
||
}
|
||
|
||
async function placeImageB64ToLayer(image_path, entery) {
|
||
//silent importer
|
||
|
||
try {
|
||
console.log('placeEmbedded(): image_path: ', image_path)
|
||
|
||
const formats = require('uxp').storage.formats
|
||
const storage = require('uxp').storage
|
||
const fs = storage.localFileSystem
|
||
|
||
const names = image_path.split('/')
|
||
const length = names.length
|
||
const image_name = names[length - 1]
|
||
const project_name = names[length - 2]
|
||
let pluginFolder = await fs.getPluginFolder()
|
||
|
||
const image_dir = `./server/python_server/output/${project_name}`
|
||
// image_path = "output/f027258e-71b8-430a-9396-0a19425f2b44/output- 1674323725.126322.png"
|
||
|
||
let img_dir = await pluginFolder.getEntry(image_dir)
|
||
// const file = await img_dir.createFile('output- 1674298902.0571606.png', {overwrite: true});
|
||
|
||
const file = await img_dir.createFile(image_name, { overwrite: true })
|
||
|
||
const img = await file.read({ format: formats.binary })
|
||
const token = await storage.localFileSystem.createSessionToken(file)
|
||
let place_event_result
|
||
await executeAsModal(async () => {
|
||
const result = await batchPlay(
|
||
[
|
||
{
|
||
_obj: 'placeEvent',
|
||
ID: 6,
|
||
null: {
|
||
_path: token,
|
||
_kind: 'local',
|
||
},
|
||
freeTransformCenterState: {
|
||
_enum: 'quadCenterState',
|
||
_value: 'QCSAverage',
|
||
},
|
||
offset: {
|
||
_obj: 'offset',
|
||
horizontal: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
vertical: {
|
||
_unit: 'pixelsUnit',
|
||
_value: 0,
|
||
},
|
||
},
|
||
_isCommand: true,
|
||
_options: {
|
||
dialogOptions: 'dontDisplay',
|
||
},
|
||
},
|
||
],
|
||
{
|
||
synchronousExecution: true,
|
||
modalBehavior: 'execute',
|
||
}
|
||
)
|
||
console.log('placeEmbedd batchPlay result: ', result)
|
||
|
||
place_event_result = result[0]
|
||
})
|
||
|
||
return place_event_result
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
// document.getElementById('btnImageFileToLayer').addEventListener('click', placeEmbedded)
|
||
|
||
// open an image in the plugin folder as new document
|
||
async function openImageAction() {
|
||
const storage = require('uxp').storage
|
||
const fs = storage.localFileSystem
|
||
try {
|
||
let pluginFolder = await fs.getPluginFolder()
|
||
// let theTemplate = await pluginFolder.getEntry("/image1.png");
|
||
//directory where all image's request folders are. one folder for each request
|
||
const relative_dir_path = `./server/python_server/`
|
||
|
||
const image_path = `${relative_dir_path}/${gCurrentImagePath}`
|
||
// 'C:/Users/abdul/Desktop/photoshop_plugins/my_plugin_1/server/python_server/output- 1670544300.95411.png'
|
||
let theTemplate = await pluginFolder.getEntry(image_path)
|
||
|
||
await app.open(theTemplate)
|
||
} catch (e) {
|
||
console.warn("couldn't open image ", e)
|
||
}
|
||
}
|
||
|
||
async function openImageExe() {
|
||
await require('photoshop').core.executeAsModal(openImageAction)
|
||
}
|
||
// document.getElementById('btnImagesToLayers').addEventListener('click',openImageExe)
|
||
|
||
// convert a layer to a smart object
|
||
async function convertToSmartObjectAction() {
|
||
const batchPlay = require('photoshop').action.batchPlay
|
||
const result = await batchPlay(
|
||
[
|
||
{
|
||
_obj: 'newPlacedLayer',
|
||
_isCommand: true,
|
||
_options: {
|
||
dialogOptions: 'dontDisplay',
|
||
},
|
||
},
|
||
],
|
||
{}
|
||
)
|
||
}
|
||
async function convertToSmartObjectExe() {
|
||
await require('photoshop').core.executeAsModal(convertToSmartObjectAction)
|
||
}
|
||
|
||
async function ImagesToLayersExe(images_paths) {
|
||
g_generation_session.isLoadingActive = true
|
||
|
||
await psapi.reSelectMarqueeExe(g_generation_session.selectionInfo)
|
||
image_path_to_layer = {}
|
||
console.log('ImagesToLayersExe: images_paths: ', images_paths)
|
||
for (image_path of images_paths) {
|
||
gCurrentImagePath = image_path
|
||
console.log(gCurrentImagePath)
|
||
await openImageExe() //local image to new document
|
||
await convertToSmartObjectExe() //convert the current image to smart object
|
||
if (g_b_use_smart_object === false) {
|
||
await executeAsModal(async () => {
|
||
await app.activeDocument.activeLayers[0].rasterize() //rastrize the active layer
|
||
})
|
||
}
|
||
await stackLayers() // move the smart object to the original/old document
|
||
await psapi.layerToSelection(g_generation_session.selectionInfo) //transform the new smart object layer to fit selection area
|
||
layer = await app.activeDocument.activeLayers[0]
|
||
image_path_to_layer[image_path] = layer
|
||
// await reselect(selectionInfo)
|
||
}
|
||
return image_path_to_layer
|
||
}
|
||
|
||
async function silentImagesToLayersExe_old(images_info) {
|
||
try {
|
||
g_generation_session.isLoadingActive = true
|
||
|
||
await psapi.reSelectMarqueeExe(g_generation_session.selectionInfo)
|
||
image_path_to_layer = {}
|
||
console.log(
|
||
'silentImagesToLayersExe: images_info.images_paths: ',
|
||
images_info.images_paths
|
||
)
|
||
// Returns a Promise that resolves after "ms" Milliseconds
|
||
const timer = (ms) => new Promise((res) => setTimeout(res, ms))
|
||
|
||
for (image_info of images_info) {
|
||
console.log(gCurrentImagePath)
|
||
//unselect all layers so that the imported layer get place at the top of the document
|
||
await psapi.unselectActiveLayersExe()
|
||
|
||
let placeEventResult
|
||
// if (base64_images) {
|
||
// placeEventResult = await base64ToFile(base64_images) //silent import into the document
|
||
// } else {
|
||
// placeEventResult = await placeEmbedded(image_path) //silent import into the document
|
||
// }
|
||
placeEventResult = await base64ToFile(image_info.base64) //silent import into the document
|
||
|
||
let layer = await app.activeDocument.layers.filter(
|
||
(l) => l.id === placeEventResult?.ID
|
||
)[0]
|
||
// await openImageExe() //local image to new document
|
||
// await convertToSmartObjectExe() //convert the current image to smart object
|
||
let timer_count = 0
|
||
|
||
// let layer = await app.activeDocument.activeLayers[0]
|
||
console.log('loaded layer: ', layer)
|
||
console.log('placeEventResult?.ID: ', placeEventResult?.ID)
|
||
|
||
while (!layer && timer_count <= 10000) {
|
||
await timer(100) // then the created Promise can be awaited
|
||
timer_count += 100
|
||
// layer = await app.activeDocument.activeLayers[0]
|
||
layer = await app.activeDocument.layers.filter(
|
||
(l) => l.id === placeEventResult?.ID
|
||
)[0]
|
||
const active_layer = await app.activeDocument.activeLayers[0]
|
||
console.log('active_layer.id: ', active_layer.id)
|
||
if (active_layer.id === placeEventResult?.ID) {
|
||
layer = active_layer
|
||
}
|
||
|
||
console.log('timer_count: ', timer_count)
|
||
console.log('loaded layer: ', layer)
|
||
console.log('placeEventResult?.ID: ', placeEventResult?.ID)
|
||
}
|
||
|
||
if (g_b_use_smart_object === false) {
|
||
await executeAsModal(async () => {
|
||
await layer.rasterize() //rastrize the active layer
|
||
})
|
||
}
|
||
|
||
await psapi.selectLayersExe([layer])
|
||
await psapi.layerToSelection(g_generation_session.selectionInfo)
|
||
|
||
// await stackLayers() // move the smart object to the original/old document
|
||
// await psapi.layerToSelection(g_generation_session.selectionInfo) //transform the new smart object layer to fit selection area
|
||
// layer = await app.activeDocument.activeLayers[0]
|
||
await g_generation_session.moveToTopOfOutputGroup(layer)
|
||
// const output_group_id = await g_generation_session.outputGroup.id
|
||
// let group_index = await psapi.getLayerIndex(output_group_id)
|
||
// const indexOffset = 1 //1 for background, 0 if no background exist
|
||
// await executeAsModal(async ()=>{
|
||
// await psapi.moveToGroupCommand(group_index - indexOffset, layer.id)
|
||
|
||
// })
|
||
|
||
image_path_to_layer[image_info.path] = layer
|
||
// await reselect(selectionInfo)
|
||
}
|
||
return image_path_to_layer
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
g_generation_session.isLoadingActive = false
|
||
}
|
||
async function silentImagesToLayersExe(images_info) {
|
||
//use active layer instead of placeEventResult
|
||
try {
|
||
g_generation_session.isLoadingActive = true
|
||
|
||
await psapi.reSelectMarqueeExe(g_generation_session.selectionInfo) //why do we reselect the session selection area
|
||
image_path_to_layer = {}
|
||
console.log(
|
||
'silentImagesToLayersExe: images_info.images_paths: ',
|
||
images_info.images_paths
|
||
)
|
||
// Returns a Promise that resolves after "ms" Milliseconds
|
||
// const timer = (ms) => new Promise((res) => setTimeout(res, ms)) //Todo: move this line to it's own utilit function
|
||
|
||
for (image_info of images_info) {
|
||
console.log(gCurrentImagePath)
|
||
//unselect all layers so that the imported layer get place at the top of the document
|
||
await psapi.unselectActiveLayersExe()
|
||
|
||
let imported_layer
|
||
// if (base64_images) {
|
||
// placeEventResult = await base64ToFile(base64_images) //silent import into the document
|
||
// } else {
|
||
// placeEventResult = await placeEmbedded(image_path) //silent import into the document
|
||
// }
|
||
// imported_layer = await base64ToFile(image_info.base64) //silent import into the document
|
||
const selection_info = await g_generation_session.selectionInfo
|
||
|
||
imported_layer = await io.IO.base64ToLayer(
|
||
image_info.base64,
|
||
'output_image.png',
|
||
selection_info.left,
|
||
selection_info.top,
|
||
selection_info.width,
|
||
selection_info.height
|
||
)
|
||
if (!layer_util.Layer.doesLayerExist(imported_layer)) {
|
||
continue //skip if the import vailed
|
||
}
|
||
// let layer = await app.activeDocument.layers.filter(
|
||
// (l) => l.id === placeEventResult?.ID
|
||
// )[0]
|
||
|
||
let timer_count = 0
|
||
|
||
// let layer = await app.activeDocument.activeLayers[0]
|
||
console.log('imported_layer: ', imported_layer)
|
||
|
||
// while (timer_count <= 10000) {
|
||
// await timer(100) // then the created Promise can be awaited
|
||
// timer_count += 100
|
||
// // layer = await app.activeDocument.activeLayers[0]
|
||
|
||
// console.log('timer_count: ', timer_count)
|
||
// console.log('loaded layer: ', imported_layer)
|
||
// }
|
||
|
||
if (g_b_use_smart_object === false) {
|
||
await executeAsModal(async () => {
|
||
await imported_layer.rasterize() //rastrize the active layer
|
||
})
|
||
}
|
||
|
||
// await psapi.selectLayersExe([imported_layer])
|
||
// await psapi.layerToSelection(g_generation_session.selectionInfo)// not needed
|
||
|
||
await g_generation_session.moveToTopOfOutputGroup(imported_layer)
|
||
await psapi.setVisibleExe(imported_layer, false) // turn off the visibility for the layer
|
||
image_path_to_layer[image_info.path] = imported_layer
|
||
// await reselect(selectionInfo)
|
||
}
|
||
return image_path_to_layer
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
g_generation_session.isLoadingActive = false
|
||
}
|
||
|
||
// document.getElementById('btnLoadImages').addEventListener('click',ImagesToLayersExe)
|
||
|
||
//stack layer to original document
|
||
async function stackLayers() {
|
||
//workingDoc is the project you are using stable diffusion in
|
||
const workingDoc = app.documents[0]
|
||
//you should not open two multiple projects this script assume there is only one project opened
|
||
const docsToStack = app.documents.filter(
|
||
(doc) => doc._id !== workingDoc._id
|
||
)
|
||
let docCounter = 0
|
||
|
||
// execute as modal is required for functions that change the state of Photoshop or documents
|
||
// think of it as a function that 'wraps' yours and tells Photoshop to go into a modal state and not allow anything to interrupt it from doing whatever is contained in the executeAsModal
|
||
// we also call it with the await keyword to tell JS that we want to wait for it to complete before moving on to later code (in this case there isn't any though)
|
||
await require('photoshop').core.executeAsModal(async () => {
|
||
// increment counter
|
||
docCounter++
|
||
|
||
// loop through other open docs
|
||
for (const doc of docsToStack) {
|
||
// flatten
|
||
// doc.flatten();
|
||
|
||
// rename layer with counter
|
||
doc.layers[0].name = `Layer ${docCounter}`
|
||
|
||
// increment counter
|
||
docCounter++
|
||
|
||
// duplicate layer to docZero
|
||
doc.layers[0].duplicate(workingDoc)
|
||
|
||
// close doc
|
||
await doc.closeWithoutSaving()
|
||
}
|
||
})
|
||
}
|
||
document.getElementById('collapsible').addEventListener('click', function () {
|
||
this.classList.toggle('active')
|
||
var content = this.nextElementSibling
|
||
console.log('content:', content)
|
||
if (content.style.display === 'block') {
|
||
content.style.display = 'none'
|
||
this.textContent = 'Show Samplers'
|
||
} else {
|
||
content.style.display = 'block'
|
||
this.textContent = 'Hide Samplers'
|
||
}
|
||
})
|
||
|
||
function removeInitImageFromViewer() {}
|
||
function removeMaskFromViewer() {}
|
||
|
||
async function viewerThumbnailclickHandler(e, viewer_obj_owner) {
|
||
if (g_isViewerMenuDisabled) {
|
||
return g_isViewerMenuDisabled
|
||
}
|
||
|
||
let click_type = Enum.clickTypeEnum['Click']
|
||
if (e.shiftKey) {
|
||
click_type = Enum.clickTypeEnum['ShiftClick']
|
||
} else if (e.altKey) {
|
||
click_type = Enum.clickTypeEnum['AltClick']
|
||
}
|
||
await executeAsModal(async () => {
|
||
//get type of click
|
||
|
||
await viewer_obj_owner.click(click_type)
|
||
})
|
||
}
|
||
// async function NewViewerImageClickHandler(img, viewer_obj_owner) {
|
||
// try {
|
||
|
||
// } catch (e) {
|
||
// console.warn(e)
|
||
// }
|
||
// }
|
||
function createViewerImgHtml(output_dir_relative, image_path, base64_image) {
|
||
const img = document.createElement('img')
|
||
// img.src = `${output_dir_relative}/${image_path}`
|
||
img.src = base64ToSrc(base64_image)
|
||
img.className = 'viewer-image'
|
||
console.log('image_path: ', image_path)
|
||
// img.dataset.image_id = layer_id
|
||
// img.dataset.image_path = image_path // image_path is not the same as src
|
||
return img
|
||
}
|
||
|
||
function toggleLayerVisibility(layer, b_on) {
|
||
try {
|
||
layer.visible = b_on
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
async function turnMaskVisible(
|
||
b_mask_group_on,
|
||
b_white_mask_on,
|
||
b_solid_black_mask_on
|
||
) {
|
||
//will turn a mask group, white layer mask, and the solid black layer on and off
|
||
try {
|
||
await executeAsModal(() => {
|
||
toggleLayerVisibility(g_mask_group, b_mask_group_on)
|
||
toggleLayerVisibility(g_white_mask, b_white_mask_on)
|
||
toggleLayerVisibility(g_solid_black_mask, b_solid_black_mask_on)
|
||
})
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
async function loadViewerImages() {
|
||
try {
|
||
//get the images path
|
||
console.log(
|
||
'g_generation_session.image_paths_to_layers:',
|
||
g_generation_session.image_paths_to_layers
|
||
)
|
||
|
||
const output_dir_relative = './server/python_server/'
|
||
const init_image_container = document.getElementById(
|
||
'divInitImageViewerContainer'
|
||
)
|
||
const mask_container = document.getElementById(
|
||
'divInitMaskViewerContainer'
|
||
)
|
||
const output_image_container = document.getElementById(
|
||
'divViewerImagesContainer'
|
||
)
|
||
|
||
// while(container.firstChild){
|
||
// container.removeChild(container.firstChild);
|
||
// }
|
||
image_paths = Object.keys(g_generation_session.image_paths_to_layers)
|
||
console.log('image_paths: ', image_paths)
|
||
let i = 0
|
||
|
||
// const viewer_layers = []
|
||
|
||
// if(g_viewer_manager.g_init_image_related_layers.hasOwnProperty('init_image_group') )
|
||
if (g_viewer_manager.initGroup) {
|
||
//it means we are in an img2img related mode
|
||
|
||
const paths = Object.keys(g_viewer_manager.initImageLayersJson)
|
||
for (const path of paths) {
|
||
if (!g_viewer_manager.hasViewerImage(path)) {
|
||
// const group = g_init_image_related_layers['init_image_group']
|
||
// const snapshot = g_init_image_related_layers['init_image_layer']
|
||
// const solid_background = g_init_image_related_layers['solid_white']
|
||
|
||
const group =
|
||
g_viewer_manager.initImageLayersJson[path].group
|
||
const snapshot =
|
||
g_viewer_manager.initImageLayersJson[path].snapshot
|
||
const solid_background =
|
||
g_viewer_manager.initImageLayersJson[path]
|
||
.solid_background
|
||
const auto_delete =
|
||
g_viewer_manager.initImageLayersJson[path].autoDelete
|
||
const initImage = g_viewer_manager.addInitImage(
|
||
group,
|
||
snapshot,
|
||
solid_background,
|
||
path,
|
||
auto_delete
|
||
)
|
||
const base64_image =
|
||
g_generation_session.base64initImages[path]
|
||
const init_img_html = createViewerImgHtml(
|
||
'./server/python_server/init_images/',
|
||
path,
|
||
base64_image
|
||
)
|
||
init_image_container.appendChild(init_img_html)
|
||
initImage.setImgHtml(init_img_html)
|
||
|
||
init_img_html.addEventListener('click', async (e) => {
|
||
await viewerThumbnailclickHandler(e, initImage)
|
||
})
|
||
// await NewViewerImageClickHandler(init_img_html, initImage) // create click handler for each images
|
||
}
|
||
}
|
||
}
|
||
|
||
// if (g_mask_related_layers.hasOwnProperty('mask_group')) {
|
||
if (g_viewer_manager.maskGroup) {
|
||
const path = `./server/python_server/init_images/${g_init_image_mask_name}`
|
||
if (!g_viewer_manager.hasViewerImage(path)) {
|
||
// const group = g_mask_related_layers['mask_group']
|
||
// const white_mark = g_mask_related_layers['white_mark']
|
||
// const solid_background = g_mask_related_layers['solid_black']
|
||
|
||
const group = g_viewer_manager.maskLayersJson[path].group
|
||
const white_mark =
|
||
g_viewer_manager.maskLayersJson[path].white_mark
|
||
const solid_background =
|
||
g_viewer_manager.maskLayersJson[path].solid_background
|
||
const mask_obj = g_viewer_manager.addMask(
|
||
group,
|
||
white_mark,
|
||
solid_background,
|
||
path
|
||
)
|
||
|
||
const mask_img_html = createViewerImgHtml(
|
||
'./server/python_server/init_images/',
|
||
g_init_image_mask_name,
|
||
g_generation_session.base64maskImage[path]
|
||
)
|
||
|
||
mask_container.appendChild(mask_img_html)
|
||
mask_obj.setImgHtml(mask_img_html)
|
||
|
||
// await NewViewerImageClickHandler(mask_img_html, mask_obj) // create click handler for each images ,viewer_layers)// create click handler for each images
|
||
|
||
mask_img_html.addEventListener('click', async (e) => {
|
||
await viewerThumbnailclickHandler(e, mask_obj)
|
||
})
|
||
|
||
// await viewerImageClickHandler(mask_img_html,viewer_layers)// create click handler for each images
|
||
}
|
||
}
|
||
|
||
console.log('image_paths: ', image_paths)
|
||
let lastOutputImage
|
||
for (const path of image_paths) {
|
||
// const path = image_path
|
||
//check if viewer obj already exist by using the path on hard drive
|
||
if (!g_viewer_manager.hasViewerImage(path)) {
|
||
//create viewer object if it doesn't exist
|
||
|
||
//create an html image element and attach it container, and link it to the viewer obj
|
||
|
||
const layer = g_generation_session.image_paths_to_layers[path]
|
||
const img = createViewerImgHtml(
|
||
output_dir_relative,
|
||
path,
|
||
g_generation_session.base64OutputImages[path]
|
||
)
|
||
const output_image_obj = g_viewer_manager.addOutputImage(
|
||
layer,
|
||
path
|
||
)
|
||
lastOutputImage = output_image_obj
|
||
const b_button_visible =
|
||
g_generation_session.mode !== generationMode['Txt2Img']
|
||
? true
|
||
: false
|
||
output_image_obj.createThumbnail(img, b_button_visible)
|
||
// output_image_obj.setImgHtml(img)
|
||
// if (g_generation_session.mode !== generationMode['Txt2Img']) {
|
||
// //we don't need a button in txt2img mode
|
||
// // output_image_obj.addButtonHtml()
|
||
// }
|
||
output_image_container.appendChild(
|
||
output_image_obj.thumbnail_container
|
||
)
|
||
//add on click event handler to the html img
|
||
// await NewViewerImageClickHandler(img, output_image_obj)
|
||
img.addEventListener('click', async (e) => {
|
||
await viewerThumbnailclickHandler(e, output_image_obj)
|
||
})
|
||
}
|
||
|
||
// i++
|
||
}
|
||
|
||
const thumbnail_size_slider = document.getElementById('slThumbnailSize')
|
||
scaleThumbnailsEvenHandler(
|
||
thumbnail_size_slider.value,
|
||
thumbnail_size_slider.max,
|
||
thumbnail_size_slider.min
|
||
)
|
||
if (lastOutputImage) {
|
||
//select the last generate/output image
|
||
// lastOutputImage.img_html.click()
|
||
await executeAsModal(async () => {
|
||
await lastOutputImage.click(Enum.clickTypeEnum['Click'])
|
||
})
|
||
}
|
||
} catch (e) {
|
||
console.error(`loadViewer images: `, e)
|
||
}
|
||
}
|
||
|
||
async function deleteNoneSelected(viewer_objects) {
|
||
try {
|
||
// visible layer
|
||
//delete all hidden layers
|
||
|
||
await executeAsModal(async () => {
|
||
for (const [path, viewer_object] of Object.entries(
|
||
viewer_objects
|
||
)) {
|
||
try {
|
||
// if (viewer_object.getHighlight() || viewer_object.is_active){//keep it if it's highlighted
|
||
// const path = viewer_object.path
|
||
|
||
viewer_object.visible(true) //make them visiable on the canvas
|
||
|
||
await viewer_object.delete() //delete the layer from layers stack
|
||
|
||
// if(viewer_object.state === viewer.ViewerObjState['Unlink']){
|
||
// viewer_object.unlink() // just delete the html image but keep the layer in the layers stack
|
||
// viewer_object.visible(true)//make them visiable on the canvas
|
||
// }else if(viewer_object.state === viewer.ViewerObjState['Delete']){// delete it if it isn't highlighted
|
||
// await viewer_object.delete()//delete the layer from layers stack
|
||
|
||
// }
|
||
delete g_generation_session.image_paths_to_layers[path]
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
//Refactor: move to viewerManager.onSessionEnd()
|
||
g_viewer_manager.pathToViewerImage = {}
|
||
g_viewer_manager.initImageLayersJson = {}
|
||
g_viewer_manager.outputImages = []
|
||
//
|
||
|
||
g_generation_session.image_paths_to_layers = {}
|
||
})
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
// document.getElementById('btnLoadViewer').addEventListener('click', loadViewerImages)
|
||
|
||
document
|
||
.getElementById('btnLoadHistory')
|
||
.addEventListener('click', async function () {
|
||
try {
|
||
const output_dir_relative = './server/python_server/'
|
||
const container = document.getElementById(
|
||
'divHistoryImagesContainer'
|
||
)
|
||
const uniqueDocumentId = await getUniqueDocumentId()
|
||
const [image_paths, metadata_jsons, base64_images] =
|
||
await sdapi.loadHistory(uniqueDocumentId)
|
||
|
||
while (container.firstChild) {
|
||
container.removeChild(container.firstChild)
|
||
}
|
||
|
||
let i = 0
|
||
for (image_path of image_paths) {
|
||
const img = document.createElement('img')
|
||
// img.src = `${output_dir_relative}/${image_path}`
|
||
const image_src = `data:image/png;base64, ${base64_images[i]}`
|
||
img.src = image_src
|
||
|
||
img.dataset.path = `${output_dir_relative}/${image_path}`
|
||
img.className = 'history-image'
|
||
img.dataset.metadata_json_string = JSON.stringify(
|
||
metadata_jsons[i]
|
||
)
|
||
console.log(`metadata_jsons[${i}]: `, metadata_jsons[i])
|
||
|
||
const img_container = thumbnail.Thumbnail.wrapImgInContainer(
|
||
img,
|
||
'viewer-image-container'
|
||
)
|
||
thumbnail.Thumbnail.addSPButtonToContainer(
|
||
img_container,
|
||
'svg_sp_btn',
|
||
'place the image on the canvas',
|
||
moveHistoryImageToLayer,
|
||
img
|
||
)
|
||
thumbnail.Thumbnail.addSPButtonToContainer(
|
||
img_container,
|
||
'svg_sp_btn_datadownload',
|
||
'download history data to current settings',
|
||
getHistoryMetadata,
|
||
img
|
||
)
|
||
container.appendChild(img_container)
|
||
i++
|
||
}
|
||
} catch (e) {
|
||
console.warn(`loadHistory warning: ${e}`)
|
||
}
|
||
})
|
||
|
||
function getHistoryMetadata(img) {
|
||
// debugger
|
||
//auto fill the ui with metadata
|
||
const metadata_json = JSON.parse(img.dataset.metadata_json_string)
|
||
console.log('metadata_json: ', metadata_json)
|
||
// document.querySelector('#tiSeed').value = metadata_json.Seed
|
||
|
||
//extract auto_metadata into the preset metadata
|
||
function convertAutoMetadataToPresset(metadata_json) {
|
||
metadata_json['seed'] = metadata_json?.auto_metadata?.Seed
|
||
}
|
||
convertAutoMetadataToPresset(metadata_json)
|
||
document.querySelector('#historySeedLabel').textContent =
|
||
metadata_json?.seed
|
||
// autoFillInSettings(metadata_json)
|
||
g_ui_settings.autoFillInSettings(metadata_json)
|
||
}
|
||
|
||
async function moveHistoryImageToLayer(img) {
|
||
let image_path = img.dataset.path
|
||
const image_path_escape = image_path.replace(/\o/g, '/o') //escape string "\o" in "\output"
|
||
|
||
// load the image from "data:image/png;base64," base64_str
|
||
const base64_image = img.src.replace('data:image/png;base64,', '')
|
||
await base64ToFile(base64_image)
|
||
}
|
||
|
||
document
|
||
.getElementById('btnImageSearch')
|
||
.addEventListener('click', async function () {
|
||
try {
|
||
// const output_dir_relative = "./server/python_server/"
|
||
const container = document.getElementById(
|
||
'divImageSearchImagesContainer'
|
||
)
|
||
// const uniqueDocumentId = await getUniqueDocumentId()
|
||
// const [image_paths, metadata_jsons] = await sdapi.loadHistory(uniqueDocumentId)
|
||
const keywords = document.getElementById('imageSearchField').value
|
||
const image_search_objs = await sdapi.imageSearch(keywords)
|
||
while (container.firstChild) {
|
||
container.removeChild(container.firstChild)
|
||
}
|
||
|
||
// let i = 0
|
||
const temp_entry = await fs.getTemporaryFolder()
|
||
for (let image_search_obj of image_search_objs) {
|
||
const img = document.createElement('img')
|
||
// img.src = image_search_obj['image']
|
||
|
||
img.src = image_search_obj['thumbnail']
|
||
|
||
img.className = 'image-search'
|
||
// img.dataset.metadata_json_string = JSON.stringify(metadata_jsons[i])
|
||
container.appendChild(img)
|
||
img.addEventListener('click', async (e) => {
|
||
console.log(`the image url: ${img.src}`)
|
||
const link = img.src
|
||
const image_file_name = 'search_image_temp.png'
|
||
await downloadItExe(link, temp_entry, image_file_name)
|
||
// const metadata_json = JSON.parse(e.target.dataset.metadata_json_string)
|
||
// console.log("metadata_json: ",metadata_json)
|
||
// document.querySelector('#tiSeed').value = metadata_json.Seed
|
||
// document.querySelector('#historySeedLabel').textContent = metadata_json.Seed
|
||
// autoFillInSettings(metadata_json)
|
||
})
|
||
// i++
|
||
}
|
||
} catch (e) {
|
||
console.warn(`imageSearch warning: ${e}`)
|
||
}
|
||
})
|
||
|
||
async function loadPromptShortcut() {
|
||
try {
|
||
let prompt_shortcut = await sdapi.loadPromptShortcut()
|
||
if (!prompt_shortcut || prompt_shortcut === {}) {
|
||
prompt_shortcut = promptShortcutExample()
|
||
}
|
||
|
||
// var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4);
|
||
// document.getElementById('taPromptShortcut').value = JSONInPrettyFormat
|
||
html_manip.setPromptShortcut(prompt_shortcut) // fill the prompt shortcut textarea
|
||
await refreshPromptMenue() //refresh the prompt menue
|
||
} catch (e) {
|
||
console.warn(`loadPromptShortcut warning: ${e}`)
|
||
}
|
||
}
|
||
document
|
||
.getElementById('btnLoadPromptShortcut')
|
||
.addEventListener('click', async function () {
|
||
await loadPromptShortcut()
|
||
})
|
||
|
||
document
|
||
.getElementById('btnUpdatePromptShortcut')
|
||
.addEventListener('click', async function () {
|
||
try {
|
||
// prompt_shortcut = await sdapi.loadPromptShortcut()
|
||
const prompt_shortcut_string =
|
||
document.getElementById('taPromptShortcut').value
|
||
const prompt_shortcut = JSON.parse(prompt_shortcut_string)
|
||
var newKey = document.getElementById('KeyPromptShortcut').value
|
||
var newValue = document.getElementById('ValuePromptShortcut').value
|
||
console.log(newKey)
|
||
console.log(newValue)
|
||
prompt_shortcut[newKey] = newValue
|
||
var JSONInPrettyFormat = JSON.stringify(
|
||
prompt_shortcut,
|
||
undefined,
|
||
4
|
||
)
|
||
console.log(JSONInPrettyFormat)
|
||
document.getElementById('taPromptShortcut').value =
|
||
JSONInPrettyFormat
|
||
await refreshPromptMenue()
|
||
} catch (e) {
|
||
console.warn(`loadPromptShortcut warning: ${e}`)
|
||
}
|
||
})
|
||
|
||
document
|
||
.getElementById('btnSavePromptShortcut')
|
||
.addEventListener('click', async function () {
|
||
try {
|
||
const r1 = await dialog_box.prompt(
|
||
'Are you sure you want to save prompt shortcut?',
|
||
"This will override your old prompt shortcut file, you can't undo this operation",
|
||
['Cancel', 'Save']
|
||
)
|
||
if ((r1 || 'Save') !== 'Save') {
|
||
/* cancelled or No */
|
||
console.log('cancel')
|
||
} else {
|
||
/* Yes */
|
||
console.log('Save')
|
||
|
||
prompt_shortcut_string =
|
||
document.getElementById('taPromptShortcut').value
|
||
let prompt_shortcut = JSON.parse(prompt_shortcut_string)
|
||
|
||
prompt_shortcut = await sdapi.savePromptShortcut(
|
||
prompt_shortcut
|
||
)
|
||
// var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 4);
|
||
console.log('prompt_shortcut was saved: ', prompt_shortcut)
|
||
}
|
||
} catch (e) {
|
||
console.warn(`savePromptShortcut warning: ${e}`)
|
||
}
|
||
})
|
||
|
||
// Hi res fix stuff
|
||
|
||
var hr_models = [
|
||
'Latent',
|
||
'Latent (antialiased)',
|
||
'Latent (bicubic)',
|
||
'Latent (bicubic antialiased)',
|
||
'Latent (nearest)',
|
||
'Latent (nearest-exact)',
|
||
'None',
|
||
'Lanczos',
|
||
'Nearest',
|
||
'ESRGAN_4x',
|
||
'R-ESRGAN 4x+',
|
||
'R-ESRGAN 4x+ Anime6B',
|
||
'LDSR',
|
||
'SwinIR 4x',
|
||
]
|
||
|
||
for (let model of hr_models) {
|
||
var hrModelsMenuClass = document.getElementsByClassName('hrModelsMenuClass')
|
||
for (let i = 0; i < hrModelsMenuClass.length; i++) {
|
||
const menu_item_element = document.createElement('sp-menu-item')
|
||
menu_item_element.className = 'hrModelsMenuItem'
|
||
menu_item_element.innerHTML = model
|
||
hrModelsMenuClass[i].appendChild(menu_item_element)
|
||
console.log(model + ' added to ' + hrModelsMenuClass[i].id)
|
||
}
|
||
}
|
||
|
||
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'
|
||
}
|
||
})
|
||
|
||
async function refreshPromptMenue() {
|
||
try {
|
||
//get the prompt_shortcut_json
|
||
//iterate over the each entery
|
||
const prompt_shortcut = html_manip.getPromptShortcut()
|
||
const prompt_shortcut_menu = document.getElementById(
|
||
'mPromptShortcutMenu'
|
||
)
|
||
prompt_shortcut_menu.innerHTML = ''
|
||
|
||
for (const [key, value] of Object.entries(prompt_shortcut)) {
|
||
if (value.trim() === '') {
|
||
//skip empty spaces
|
||
continue
|
||
}
|
||
const menu_item_element = document.createElement('sp-menu-item')
|
||
|
||
menu_item_element.innerHTML = key
|
||
prompt_shortcut_menu.appendChild(menu_item_element)
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
document
|
||
.getElementById('mPromptShortcutMenu')
|
||
.addEventListener('change', (evt) => {
|
||
const prompt_shortcut = html_manip.getPromptShortcut()
|
||
const key = evt.target.value
|
||
console.log('key:', key)
|
||
changePromptShortcutKey(key)
|
||
changePromptShortcutValue(prompt_shortcut[key])
|
||
})
|
||
document
|
||
.getElementById('btnRefreshPromptShortcutMenu')
|
||
.addEventListener('click', async () => {
|
||
await refreshPromptMenue()
|
||
})
|
||
|
||
function changePromptShortcutKey(new_key) {
|
||
document.getElementById('KeyPromptShortcut').value = new_key
|
||
}
|
||
function changePromptShortcutValue(new_value) {
|
||
document.getElementById('ValuePromptShortcut').value = new_value
|
||
}
|
||
|
||
// adding a listner here for the inpaint_mask_strengh to be able to use api calls, allowing to dynamicly change the value
|
||
// a set button could be added to the ui to reduce the number of api calls in case of a slow connection
|
||
document
|
||
.querySelector('#slInpaintingMaskWeight')
|
||
.addEventListener('input', async (evt) => {
|
||
const label_value = evt.target.value / 100
|
||
document.getElementById(
|
||
'lInpaintingMaskWeight'
|
||
).innerHTML = `${label_value}`
|
||
// await sdapi.setInpaintMaskWeight(label_value)
|
||
})
|
||
|
||
document
|
||
.querySelector('#slInpaintingMaskWeight')
|
||
.addEventListener('change', async (evt) => {
|
||
try {
|
||
const label_value = evt.target.value / 100
|
||
document.getElementById(
|
||
'lInpaintingMaskWeight'
|
||
).innerHTML = `${label_value}`
|
||
await sdapi.setInpaintMaskWeight(label_value)
|
||
|
||
//get the inpaint mask weight from the webui sd
|
||
await g_sd_options_obj.getOptions()
|
||
const inpainting_mask_weight =
|
||
await g_sd_options_obj.getInpaintingMaskWeight()
|
||
// html_manip.autoFillInInpaintingMaskWeight(inpainting_mask_weight)
|
||
// const slider_value = inpainting_mask_weight * 100
|
||
// evt.target.value = inpainting_mask_weight * 100
|
||
// document.getElementById('lInpaintingMaskWeight').innerHTML = `${inpainting_mask_weight}`
|
||
console.log('inpainting_mask_weight: ', inpainting_mask_weight)
|
||
html_manip.autoFillInInpaintMaskWeight(inpainting_mask_weight)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
|
||
async function downloadIt(link, writeable_entry, image_file_name) {
|
||
const image = await fetch(link)
|
||
console.log(link)
|
||
const storage = require('uxp').storage
|
||
const fs = storage.localFileSystem
|
||
|
||
try {
|
||
const img = await image.arrayBuffer()
|
||
// const file = await fs.getFileForSaving("image.png");
|
||
// const folder = await storage.localFileSystem.getTemporaryFolder()
|
||
const file = await writeable_entry.createFile(image_file_name, {
|
||
overwrite: true,
|
||
})
|
||
// const file = await fs.getTempFolder()
|
||
|
||
await file.write(img)
|
||
const currentDocument = app.activeDocument
|
||
let newDocument
|
||
let new_layer
|
||
try {
|
||
newDocument = await app.open(file)
|
||
if (currentDocument) {
|
||
new_layer = await newDocument.activeLayers[0].duplicate(
|
||
currentDocument
|
||
)
|
||
await newDocument.closeWithoutSaving()
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
|
||
if (!file) {
|
||
return
|
||
}
|
||
return new_layer
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
|
||
async function downloadItExe(link, writeable_entry, image_file_name) {
|
||
let new_layer
|
||
await executeAsModal(async () => {
|
||
try {
|
||
new_layer = await downloadIt(link, writeable_entry, image_file_name)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
return new_layer
|
||
}
|
||
|
||
document
|
||
.getElementById('btnSelectionArea')
|
||
.addEventListener('click', async () => {
|
||
try {
|
||
if (psapi.isSelectionValid(g_generation_session.selectionInfo)) {
|
||
await psapi.reSelectMarqueeExe(
|
||
g_generation_session.selectionInfo
|
||
)
|
||
await eventHandler()
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
|
||
function addPresetMenuItem(preset_title) {
|
||
// console.log(model_title,model_name)
|
||
const menu_item_element = document.createElement('sp-menu-item')
|
||
menu_item_element.className = 'mPresetMenuItem'
|
||
menu_item_element.innerHTML = preset_title
|
||
|
||
// menu_item_element.addEventListener('select',()=>{
|
||
// preset_func(g_ui_settings)
|
||
// })
|
||
return menu_item_element
|
||
}
|
||
|
||
function populatePresetMenu() {
|
||
const divider_elem = document.createElement('sp-menu-divider')
|
||
const preset_name = 'Select Smart Preset'
|
||
const preset_func = () => {}
|
||
const dummy_preset_item = addPresetMenuItem(preset_name, preset_func)
|
||
dummy_preset_item.setAttribute('selected', 'selected')
|
||
// dummy_preset_item.setAttribute('disabled')
|
||
document.getElementById('mPresetMenu').appendChild(dummy_preset_item)
|
||
document.getElementById('mPresetMenu').appendChild(divider_elem)
|
||
for ([key, value] of Object.entries(ui.loadedPresets)) {
|
||
const preset_menu_item = addPresetMenuItem(key, value)
|
||
document.getElementById('mPresetMenu').appendChild(preset_menu_item)
|
||
}
|
||
}
|
||
|
||
populatePresetMenu()
|
||
document
|
||
.getElementById('mPresetMenu')
|
||
.addEventListener('change', async (evt) => {
|
||
const preset_index = evt.target.selectedIndex
|
||
const preset_name = evt.target.options[preset_index].textContent
|
||
if (ui.loadedPresets.hasOwnProperty(preset_name)) {
|
||
const loader = ui.loadedPresets[preset_name]
|
||
if (loader.constructor.name === 'AsyncFunction') {
|
||
await loader(g_ui_settings)
|
||
} else {
|
||
loader(g_ui_settings)
|
||
}
|
||
}
|
||
})
|
||
|
||
function base64ToSrc(base64_image) {
|
||
const image_src = `data:image/png;base64, ${base64_image}`
|
||
return image_src
|
||
}
|
||
|
||
const py_re = require('./utility/sdapi/python_replacement')
|
||
document.getElementById('btnGetDocPath').addEventListener('click', async () => {
|
||
const docPath = await py_re.getDocumentFolderNativePath()
|
||
document.getElementById('tiDocPath').value = docPath
|
||
})
|
||
|
||
async function prmoptForUpdate() {
|
||
const shell = require('uxp').shell
|
||
|
||
;(async () => {
|
||
const r1 = await dialog_box.prompt(
|
||
'Please Update you Plugin. it will take about 10 seconds to update',
|
||
'update from discord, update from github',
|
||
['Cancel', 'Discord', 'Github']
|
||
)
|
||
try {
|
||
let url
|
||
if (r1 === 'Cancel') {
|
||
/* cancelled or No */
|
||
console.log('cancel')
|
||
} else if (r1 === 'Github') {
|
||
url =
|
||
'https://github.com/AbdullahAlfaraj/Auto-Photoshop-StableDiffusion-Plugin'
|
||
await py_re.openUrlRequest(url)
|
||
} else if (r1 === 'Discord') {
|
||
console.log('Discord')
|
||
// url = 'https://discord.gg/3mVEtrddXJ'
|
||
url = 'https://discord.gg/YkUJXYWK3c'
|
||
await py_re.openUrlRequest(url)
|
||
}
|
||
console.log('url: ', url)
|
||
} catch (e) {
|
||
console.warn(e, url)
|
||
}
|
||
})()
|
||
}
|
||
document.getElementById('btnUpdate').addEventListener('click', async () => {
|
||
await prmoptForUpdate()
|
||
})
|
||
|
||
function getDimensions(image) {
|
||
return new Promise((resolve, reject) => {
|
||
var img = new Image()
|
||
img.src = image
|
||
|
||
img.addEventListener('load', function () {
|
||
// image.width × image.height
|
||
console.log('image loaded:', img.width, img.height)
|
||
resolve({ width: img.width, height: img.height })
|
||
})
|
||
|
||
// img.onload = () => {
|
||
|
||
// resolve({ width: img.width, height: img.height })
|
||
// }
|
||
})
|
||
}
|
||
|
||
function scaleThumbnailsEvenHandler(scale_index, max_index, min_index) {
|
||
const slider_max = max_index
|
||
const slider_min = min_index
|
||
const scaler_value = general.mapRange(scale_index, 0, slider_max, 0, 2)
|
||
g_viewer_manager.thumbnail_scaler = scaler_value
|
||
|
||
try {
|
||
g_viewer_manager.scaleThumbnails(
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
g_viewer_manager.thumbnail_scaler
|
||
)
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
}
|
||
document.getElementById('slThumbnailSize').addEventListener('input', (evt) => {
|
||
scaleThumbnailsEvenHandler(evt.target.value, evt.target.max, evt.target.min)
|
||
})
|
||
|
||
document.getElementById('linkWidthHeight').addEventListener('click', (evt) => {
|
||
evt.target.classList.toggle('blackChain')
|
||
const b_state = !evt.target.classList.contains('blackChain') //if doesn't has blackChain means => it's white => b_state == true
|
||
html_manip.setLinkWidthHeightState(b_state)
|
||
})
|
||
document
|
||
.getElementById('chSquareThumbnail')
|
||
.addEventListener('click', (evt) => {
|
||
if (evt.target.checked) {
|
||
g_viewer_manager.isSquareThumbnail = true
|
||
} else {
|
||
g_viewer_manager.isSquareThumbnail = false
|
||
}
|
||
const thumbnail_size_slider = document.getElementById('slThumbnailSize')
|
||
scaleThumbnailsEvenHandler(
|
||
thumbnail_size_slider.value,
|
||
thumbnail_size_slider.max,
|
||
thumbnail_size_slider.min
|
||
)
|
||
})
|
||
|
||
Array.from(document.querySelectorAll('.rbSubTab')).forEach((rb) => {
|
||
// debugger
|
||
const tab_button_name = rb.dataset['tab-name']
|
||
const tab_page_name = `${tab_button_name}-page`
|
||
|
||
try {
|
||
document
|
||
.getElementById(tab_button_name)
|
||
.addEventListener('click', () => {
|
||
document.getElementById(tab_button_name)
|
||
const option_container = document
|
||
.getElementById(tab_page_name)
|
||
.querySelector('.subTabOptionsContainer')
|
||
const radio_group = document.getElementById('rgSubTab')
|
||
rb.checked = true
|
||
option_container.appendChild(radio_group)
|
||
})
|
||
|
||
rb.onclick = () => {
|
||
// debugger
|
||
document.getElementById(tab_button_name).click()
|
||
}
|
||
} catch (e) {
|
||
console.warn(e)
|
||
}
|
||
})
|
||
|
||
async function updateResDifferenceLabel() {
|
||
const ratio = await selection.Selection.getImageToSelectionDifference()
|
||
const arrow = ratio >= 1 ? '↑' : '↓'
|
||
let final_ratio = ratio // this ratio will always be >= 1
|
||
if (ratio >= 1) {
|
||
// percentage = percentage >= 1 ? percentage : 1 / percentage
|
||
|
||
// const percentage_str = `${arrow}X${percentage.toFixed(2)}`
|
||
|
||
// console.log('scale_info_str: ', scale_info_str)
|
||
// console.log('percentage_str: ', percentage_str)
|
||
document
|
||
.getElementById('res-difference')
|
||
.classList.remove('res-decrease')
|
||
} else {
|
||
final_ratio = 1 / ratio
|
||
document.getElementById('res-difference').classList.add('res-decrease')
|
||
}
|
||
const ratio_str = `${arrow}x${final_ratio.toFixed(2)}`
|
||
document.getElementById('res-difference').innerText = ratio_str
|
||
}
|