Auto-Photoshop-StableDiffusion-Plugin/utility/html_manip.js

////// Start Prompt//////////

function getPrompt() {
    const prompt = document.getElementById('taPrompt').value
    return prompt
}

function autoFillInPrompt(prompt_value) {
    document.getElementById('taPrompt').value = prompt_value
}

////// End Prompt//////////

////// Start Negative Prompt//////////

function getNegativePrompt() {
    const negative_prompt = document.getElementById('taNegativePrompt').value
    return negative_prompt
}

function autoFillInNegativePrompt(negative_prompt_value) {
    document.getElementById('taNegativePrompt').value = negative_prompt_value
}

////// End Negative Prompt//////////

////// Start Width//////////

document.getElementById('slWidth').addEventListener('input', (evt) => {
    const width = evt.target.value * 64
    document.getElementById('lWidth').textContent = width
})

function getWidth() {
    slider_width = document.getElementById('slWidth').value
    const width = slider_width * 64
    return width
}

function getHrWidth() {
    slider_width = document.getElementById('hrWidth').value
    const width = slider_width * 64
    return width
}

function getHrHeight() {
    slider_width = document.getElementById('hrHeight').value
    const width = slider_width * 64
    return width
}
function autoFillInWidth(width_value) {
    document.getElementById('slWidth').value = `${width_value / 64}`
    //update the label
    document.getElementById('lWidth').innerHTML = `${width_value}`
}
////// End Width//////////

////// Start Height//////////

document.getElementById('slHeight').addEventListener('input', (evt) => {
    const height = evt.target.value * 64
    document.getElementById('lHeight').textContent = height
})

function getHeight() {
    slider_value = document.getElementById('slHeight').value
    const height = slider_value * 64
    return height
}

function autoFillInHeight(height_value) {
    document.getElementById('slHeight').value = `${height_value / 64}`
    //update the label
    document.getElementById('lHeight').innerHTML = `${height_value}`
}

function autoFillInHRHeight(height_value) {
    document.getElementById('hrHeight').value = `${height_value / 64}`
    //update the label
    document.getElementById('hHeight').innerHTML = `${height_value}`
}

function autoFillInHRWidth(height_value) {
    document.getElementById('hrWidth').value = `${height_value / 64}`
    //update the label
    document.getElementById('hWidth').innerHTML = `${height_value}`
}

////// End Height//////////

////// Start Denoising Strength//////////
document
    .querySelector('#slDenoisingStrength')
    .addEventListener('input', (evt) => {
        const label_value = evt.target.value / 100
        // console.log("label_value: ", label_value)
        document.getElementById(
            'lDenoisingStrength'
        ).innerHTML = `${label_value}`
    })

//get the value that is relevant to stable diffusion
function getDenoisingStrength() {
    const slider_value = document.getElementById('slDenoisingStrength').value
    const denoising_strength_value = slider_value / 100.0
    return denoising_strength_value
}

// display the value the user need to see in all elements related to denoising strength attribute
function autoFillInDenoisingStrength(denoising_strength_value) {
    //sd denoising strength value range from [0,1] slider range from [0, 100]
    //update the slider
    document.getElementById('slDenoisingStrength').value = `${
        denoising_strength_value * 100
    }`
    //update the label
    document.getElementById(
        'lDenoisingStrength'
    ).innerHTML = `${denoising_strength_value}`
}

////// End Denoising Strength//////////

////// Start Hi Res Fix//////////

document.getElementById('chInpaintFullRes').addEventListener('click', (ev) => {
    const inpaint_padding_slider = document.getElementById('slInpaintPadding')

    if (ev.target.checked) {
        inpaint_padding_slider.style.display = 'block'
    } else {
        inpaint_padding_slider.style.display = 'none'
    }
})
document.getElementById('chHiResFixs').addEventListener('click', (ev) => {
    const container = document.getElementById('hi-res-sliders-container')

    if (ev.target.checked) {
        container.style.display = 'flex'
    } else {
        container.style.display = 'none'
    }
})
//get the value that is relevant to stable diffusion
function getHiResFixs() {
    const isChecked = document.getElementById('chHiResFixs').checked
    return isChecked
}

function setHiResFixs(isChecked) {
    document.getElementById('chHiResFixs').checked = isChecked
}

function sliderAddEventListener(slider_id, label_id, multiplier) {
    document.getElementById(slider_id).addEventListener('input', (evt) => {
        const sd_value = evt.target.value * multiplier // convert slider value to SD ready value
        document.getElementById(label_id).textContent =
            Number(sd_value).toFixed(2)
    })
}

//get the stable diffusion ready value from the slider with  "slider_id"
function getSliderSdValue(slider_id, multiplier) {
    const slider_value = document.getElementById(slider_id).value
    const sd_value = slider_value * multiplier
    return sd_value
}
function autoFillInSliderUi(sd_value, slider_id, label_id, multiplier) {
    //update the slider
    document.getElementById(slider_id).value = `${sd_value * multiplier}`
    //update the label
    document.getElementById(label_id).innerHTML = `${sd_value}`
}

//hrWidth is from [1 to 32] * 64 => [64 to 2048]
sliderAddEventListener('hrWidth', 'hWidth', 64)
sliderAddEventListener('hrHeight', 'hHeight', 64)

//convert hrDenoisingStrength  from  [1, 100] * 0.01 => [0.01 to 1]
sliderAddEventListener('hrDenoisingStrength', 'hDenoisingStrength', 0.01)

function autoFillInHiResFixs(firstphase_width, firstphase_height) {
    //update the firstphase width slider and label
    autoFillInSliderUi(firstphase_width, 'hrWidth', 'hWidth', 1.0 / 64)
    //update the firstphase height slider and label
    autoFillInSliderUi(firstphase_height, 'hrHeight', 'hHeight', 1.0 / 64)
}
////// End Hi Res Fix//////////

////// Start Inpaint Mask Weight//////////
function autoFillInInpaintMaskWeight(sd_value) {
    //update the inpaint mask weight
    autoFillInSliderUi(
        sd_value,
        'slInpaintingMaskWeight',
        'lInpaintingMaskWeight',
        100
    )
}
////// End Inpaint Mask Weight//////////

////// Start Samplers//////////
function unCheckAllSamplers() {
    document
        .getElementsByClassName('rbSampler')

        .forEach((e) => e.removeAttribute('checked'))
}

function getSamplerElementByName(sampler_name) {
    try {
        //assume the sampler_name is valid
        //return the first
        //convert htmlCollection into an array, then user filter to get the radio button with the value equals to sampler_name
        const sampler_element = [
            ...document.getElementsByClassName('rbSampler'),
        ].filter((e) => e.value == sampler_name)[0]
        return sampler_element
    } catch (e) {
        console.warn(`Sampler '${sampler_name}' not found ${e}`)
    }
}

function getCheckedSamplerName() {
    //we assume that the samplers exist and loaded in html
    //return the name of the first checked sampler
    return [...document.getElementsByClassName('rbSampler')].filter(
        (e) => e.checked == true
    )[0].value
}
function getMode() {
    return [...document.getElementsByClassName('rbMode')].filter(
        (e) => e.checked == true
    )[0].value
}

function getExtensionType() {
    return [...document.getElementsByClassName('rbExtensionType')].filter(
        (e) => e.checked == true
    )[0].value
}
function checkSampler(sampler_name) {
    sampler_element = getSamplerElementByName(sampler_name)
    sampler_element.checked = true
}
function autoFillInSampler(sampler_name) {
    // unCheckAllSamplers()
    checkSampler(sampler_name)
}
////// End Samplers//////////

////// Start Models//////////

function getModelElementByHash(model_hash) {
    try {
        //assume the model_hash is valid
        //return the first model menu item element with model_hash
        const model_element = [
            ...document.getElementsByClassName('mModelMenuItem'),
        ].filter((e) => e.dataset.model_hash == model_hash)[0]
        return model_element
    } catch (e) {
        console.warn(`Model '${model_hash}' not found ${e}`)
    }
}
function getModelHashByTitle(model_title) {
    //return find the model hash by it's title
    try {
        return [...document.getElementsByClassName('mModelMenuItem')].filter(
            (e) => e.dataset.model_title == model_title
        )[0].dataset.model_hash
    } catch (e) {
        console.warn(e)
    }
}

function getSelectedModelHash() {
    //return the hash of the first selected model menu item
    try {
        return [...document.getElementsByClassName('mModelMenuItem')].filter(
            (e) => e.selected == true
        )[0].dataset.model_hash
    } catch (e) {
        console.warn(e)
    }
}

function selectModelUi(model_hash) {
    model_element = getModelElementByHash(model_hash)
    model_element.selected = true
}

function autoFillInModel(model_hash) {
    // unCheckAllSamplers()
    model_element = getModelElementByHash(model_hash)
    selectModelUi(model_hash)
    // model_element.
    const model_title = model_element.dataset.model_title
    return model_title
}
////// End Models//////////

////// Start Init Image && Init Image Mask//////////

function getInitImageElement() {
    const ini_image_element = document.getElementById('init_image')
    return ini_image_element
}
function setInitImageSrc(image_src) {
    const ini_image_element = getInitImageElement()
    ini_image_element.src = image_src
}

function getInitImageMaskElement() {
    const ini_image_mask_element = document.getElementById('init_image_mask')
    return ini_image_mask_element
}
function setInitImageMaskSrc(image_src) {
    const ini_image_mask_element = getInitImageMaskElement()
    ini_image_mask_element.src = image_src
}
////// End Init Image && Init Image Mask//////////

////// Start Generate Buttons //////////

function getGenerateButtonsElements() {
    generate_buttons = [...document.getElementsByClassName('btnGenerateClass')]
    return generate_buttons
}
function setGenerateButtonsColor(addClassName, removeClassName) {
    const buttons = getGenerateButtonsElements()
    buttons.forEach((button) => {
        button.classList.add(addClassName)
        button.classList.remove(removeClassName)
    })
}

////// End Generate Buttons //////////

////// Start Servers Status //////////

function setAutomaticStatus(newStatusClass, oldStatusClass) {
    document.getElementById('automaticStatus').classList.add(newStatusClass)
    document.getElementById('automaticStatus').classList.remove(oldStatusClass)
}
function setProxyServerStatus(newStatusClass, oldStatusClass) {
    document.getElementById('proxyServerStatus').classList.add(newStatusClass)
    document
        .getElementById('proxyServerStatus')
        .classList.remove(oldStatusClass)
}
////// End Servers Status //////////

////// Start Reset Settings Button //////////

const defaultSettings = {
    model: null,
    prompt_shortcut: null,
    positive_prompt: '',
    negative_prompt: '',
    selection_mode: null,
    batch_number: 1,
    steps: 20,
    width: 512,
    height: 512,
    firstphase_width: 512,
    firstphase_height: 512,
    cfg: 7,
    denoising_strength: 0.7,
    hi_res_denoising_strength: 0.7,
    mask_blur: 8,
    inpaint_at_full_res: false,
    hi_res_fix: false,
    inpaint_padding: 0,
    seed: -1,
    samplers: null,
    mask_content: null,
}

document.getElementById('btnResetSettings').addEventListener('click', () => {
    autoFillDefaultSettings(defaultSettings)
})
document.getElementById('btnSnapshot').addEventListener('click', async () => {
    await psapi.snapshot_layerExe()
})

function getBatchNumber() {
    return document.getElementById('tiNumberOfImages').value
}
function autoFillInBatchNumber(batch_number) {
    document.getElementById('tiNumberOfImages').value = String(batch_number)
}

function getSteps() {
    return document.getElementById('tiNumberOfSteps').value
}
function autoFillInSteps(steps) {
    document.getElementById('tiNumberOfSteps').value = String(steps)
}
function autoFillDefaultSettings(default_settings) {
    autoFillSettings(default_settings)
}

function setCFG(cfg_value) {
    document.getElementById('slCfgScale').value = cfg_value
}
function getCFG() {
    return document.getElementById('slCfgScale').value
}

function autoFillSettings(settings) {
    try {
        //reset all UI settings except model selection and sampler selection
        autoFillInPrompt(settings['positive_prompt'])
        autoFillInNegativePrompt(settings['negative_prompt'])
        autoFillInBatchNumber(settings['batch_number'])
        autoFillInSteps(settings['steps'])
        autoFillInWidth(settings['width'])
        autoFillInHeight(settings['height'])
        autoFillInHiResFixs(
            settings['firstphase_width'],
            settings['firstphase_height']
        )
        document.getElementById('slCfgScale').value = settings['cfg']
        autoFillInDenoisingStrength(settings['denoising_strength'])
        autoFillInSliderUi(
            settings['hi_res_denoising_strength'],
            'hrDenoisingStrength',
            'hDenoisingStrength',
            100
        )
        document.getElementById('slMaskBlur').value = settings['mask_blur']
        document.getElementById('chInpaintFullRes').checked =
            settings['inpaint_at_full_res']
        setHiResFixs(settings['hi_res_fix'])
        document.getElementById('tiSeed').value = String(settings['seed'])
    } catch (e) {
        console.warn(e)
    }
}
////// End Reset Settings Button //////////

function getMaskBlur() {
    const isDisabled = document
        .getElementById('slMaskBlur')
        .hasAttribute('disabled')
    let mask_blur = 0
    if (isDisabled) {
        mask_blur = 0
    } else {
        mask_blur = document.getElementById('slMaskBlur').value
    }
    return mask_blur
}
function setMaskBlur(mask_blur) {
    document.getElementById('slMaskBlur').value = mask_blur
}

function getUseSharpMask() {
    const isChecked = document.getElementById('chUseSharpMask').checked
    return isChecked
}
document.getElementById('chUseSharpMask').addEventListener('change', (ev) => {
    const isChecked = ev.target.checked
    if (isChecked) {
        document.getElementById('slMaskBlur').setAttribute('disabled')
    } else {
        document.getElementById('slMaskBlur').removeAttribute('disabled')
    }
})

document.getElementById('chUseSmartObject').addEventListener('change', (ev) => {
    const isChecked = ev.target.checked
    if (isChecked) {
        g_b_use_smart_object = true
    } else {
        g_b_use_smart_object = false
    }
})

function getPromptShortcut() {
    //read json string
    //converted into json object
    const prompt_shortcut_string =
        document.getElementById('taPromptShortcut').value
    const prompt_shortcut = JSON.parse(prompt_shortcut_string)
    return prompt_shortcut
}
function setPromptShortcut(prompt_shortcut) {
    //prompt_shortcut is json object
    //convert it into pretty json string and save it in the prompt shortcut textarea
    var JSONInPrettyFormat = JSON.stringify(prompt_shortcut, undefined, 7)
    document.getElementById('taPromptShortcut').value = JSONInPrettyFormat
}

////start selection mode/////
function getSelectionMode() {
    return [...document.getElementsByClassName('rbSelectionMode')].filter(
        (e) => e.checked == true
    )[0].value
}
function getMaskContent() {
    return [...document.getElementsByClassName('rbMaskContent')].filter(
        (e) => e.checked == true
    )[0].value
}
function setMaskContent(value) {
    try {
        //assume the sampler_name is valid
        //return the first
        //convert htmlCollection into an array, then user filter to get the radio button with the value equals to sampler_name
        const mask_content_element = [
            ...document.getElementsByClassName('rbMaskContent'),
        ].filter((e) => e.value == value)[0]
        mask_content_element.checked = true
        return mask_content_element
    } catch (e) {
        console.warn(e)
    }
}

function addHistoryButtonsHtml(img_html) {
    // Create new container element
    const container = document.createElement('div')

    container.className = 'viewer-image-container'

    const elem = document.getElementById('svg_sp_btn')
    // Create a copy of it
    const clone = elem.cloneNode(true)
    const button = clone
    button.style.display = null
    button.removeAttribute('id')

    button.setAttribute('title', 'place the image on the canvas')

    // Create button element
    // const button = document.createElement('sp-button');
    button.className = 'viewer-image-button'
    // button.innerHTML = "Button";

    button.addEventListener('click', async () => {
        //set init image event listener, use when settion is active
        let image_path = img_html.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_html.src.replace('data:image/png;base64,', '')
        await base64ToFile(base64_image)
    })

    // Append elements to container
    container.appendChild(img_html)
    container.appendChild(button)

    return container
}
function getSeed() {
    const seed = document.getElementById('tiSeed').value
    return seed
}
function setSeed(new_seed) {
    document.getElementById('tiSeed').value = new_seed
}

function getMaskExpansion() {
    const mask_expansion = document.getElementById('slMaskExpansion').value
    return mask_expansion
}

function setMaskExpansion(mask_expansion) {
    document.getElementById('slMaskExpansion').value = mask_expansion
}
///end selection mode////
module.exports = {
    getPrompt,
    autoFillInPrompt,
    getNegativePrompt,
    autoFillInNegativePrompt,
    getDenoisingStrength,
    autoFillInDenoisingStrength,
    getWidth,
    autoFillInWidth,
    getHeight,
    autoFillInHeight,
    getSliderSdValue,
    autoFillInHiResFixs,
    getHiResFixs,
    setHiResFixs,
    autoFillInSliderUi,
    getCheckedSamplerName,
    autoFillInSampler,
    autoFillInModel,
    getMode,
    setInitImageSrc,
    setInitImageMaskSrc,
    setGenerateButtonsColor,
    setAutomaticStatus,
    setProxyServerStatus,
    defaultSettings,
    autoFillDefaultSettings,
    autoFillSettings,
    getMaskBlur,
    setMaskBlur,
    getUseSharpMask,
    autoFillInHRHeight,
    autoFillInHRWidth,
    getPromptShortcut,
    setPromptShortcut,
    getModelHashByTitle,
    getSelectionMode,
    autoFillInInpaintMaskWeight,
    autoFillInSteps,
    getSteps,
    getBatchNumber,
    autoFillInBatchNumber,
    getHrWidth,
    getHrHeight,
    setCFG,
    getCFG,
    getMaskContent,
    setMaskContent,
    addHistoryButtonsHtml,
    getExtensionType,
    getSeed,
    setSeed,
    getMaskExpansion,
    setMaskExpansion,
}