1129 lines
35 KiB
JavaScript
1129 lines
35 KiB
JavaScript
const api = require('../api')
|
|
const html_manip = require('../html_manip')
|
|
const selection = require('../../selection')
|
|
const note = require('../notification')
|
|
const controlnet_preset = require('../presets/controlnet_preset')
|
|
const preset = require('../presets/preset')
|
|
const Enum = require('../../enum')
|
|
const event = require('../event')
|
|
|
|
// const g_controlnet_max_supported_models = 3
|
|
let g_controlnet_presets
|
|
let g_module_detail
|
|
|
|
class ControlNetUnit {
|
|
static {}
|
|
|
|
static resetUnit(index) {
|
|
const controlnet_unit_default = {
|
|
module: null,
|
|
model: null,
|
|
weight: 1.0,
|
|
resize_mode: null,
|
|
lowvram: null,
|
|
processor_res: null,
|
|
threshold_a: null,
|
|
threshold_b: null,
|
|
|
|
guidance_start: 0,
|
|
guidance_end: 1,
|
|
guessmode: null,
|
|
}
|
|
this.setUnit(index, controlnet_unit_default)
|
|
}
|
|
|
|
static resetUnits() {
|
|
for (let i = 0; i < g_controlnet_max_models; ++i) {
|
|
this.resetUnit(i)
|
|
}
|
|
}
|
|
static getUnit(index) {
|
|
const controlnet_unit = {
|
|
module: this.getModule(index),
|
|
model: this.getModel(index),
|
|
weight: this.getWeight(index),
|
|
resize_mode: null,
|
|
lowvram: null,
|
|
processor_res: null,
|
|
threshold_a: null,
|
|
threshold_b: null,
|
|
|
|
guidance_start: this.getGuidanceStrengthStart(index),
|
|
guidance_end: this.getGuidanceStrengthEnd(index),
|
|
guessmode: null,
|
|
}
|
|
return controlnet_unit
|
|
}
|
|
static setUnit(index, unit_settings) {
|
|
const controlnet_unit_setters = {
|
|
module: this.setModule,
|
|
model: this.setModel,
|
|
weight: this.setWeight,
|
|
resize_mode: null,
|
|
lowvram: null,
|
|
processor_res: null,
|
|
threshold_a: null,
|
|
threshold_b: null,
|
|
|
|
guidance_start: this.setGuidanceStrengthStart,
|
|
guidance_end: this.setGuidanceStrengthEnd,
|
|
guessmode: null,
|
|
}
|
|
|
|
for (const [name, value] of Object.entries(unit_settings)) {
|
|
try {
|
|
if (
|
|
controlnet_unit_setters.hasOwnProperty(name)
|
|
//&& value.toString() // check if it has a value, null return error; undefine return error; 0 pass
|
|
) {
|
|
// if (value) {
|
|
const setter = controlnet_unit_setters[name]
|
|
|
|
setter(index, value)
|
|
// }
|
|
}
|
|
} catch (e) {
|
|
console.warn(e)
|
|
}
|
|
}
|
|
}
|
|
static getUnits() {
|
|
const controlnet_units = {}
|
|
|
|
for (let i = 0; i < g_controlnet_max_models; ++i) {
|
|
controlnet_units[i] = this.getUnit(i)
|
|
}
|
|
return controlnet_units
|
|
}
|
|
static setUnits(controlnet_units) {
|
|
for (const [index, unit] of Object.entries(controlnet_units)) {
|
|
try {
|
|
this.setUnit(index, unit)
|
|
} catch (e) {
|
|
console.warn(e)
|
|
}
|
|
}
|
|
}
|
|
static doesUnitExist(index) {
|
|
//TODO: check if controlnet unit exist
|
|
if (index >= 0) {
|
|
}
|
|
}
|
|
|
|
static getModule(index) {
|
|
const module = getSelectedModule(index)
|
|
return module
|
|
}
|
|
static setModule(index, module_item) {
|
|
try {
|
|
const module_menu_element = controlnetElement(
|
|
index,
|
|
'.mModulesMenuControlNet_'
|
|
)
|
|
|
|
html_manip.selectMenuItemByElement(module_menu_element, module_item)
|
|
// module_menu_element.dispatchEvent(new Event('click'))
|
|
// module_menu_element.click()
|
|
changeModule(module_item, index)
|
|
} catch (e) {
|
|
html_manip.unselectMenuItemByElement(module_menu_element)
|
|
console.warn(e)
|
|
}
|
|
}
|
|
static getModel(index) {
|
|
const model = getSelectedModel(index)
|
|
return model
|
|
}
|
|
static setModel(index, model_item) {
|
|
try {
|
|
const model_menu_element = controlnetElement(
|
|
index,
|
|
'.mModelsMenuControlNet_'
|
|
)
|
|
html_manip.selectMenuItemByElement(model_menu_element, model_item)
|
|
} catch (e) {
|
|
html_manip.unselectMenuItemByElement(model_menu_element)
|
|
console.warn(e)
|
|
}
|
|
}
|
|
static getWeight(index = 0) {
|
|
const weight = getWeight(index)
|
|
return weight
|
|
}
|
|
static setWeight(index, weight) {
|
|
setWeight(index, weight)
|
|
}
|
|
static getGuidanceStrengthStart(index) {
|
|
const guidance_strength = getControlNetGuidanceStrengthStart(index)
|
|
return guidance_strength
|
|
}
|
|
|
|
static setGuidanceStrengthStart(index, sd_value) {
|
|
setControlNetGuidanceStrengthStart(index, sd_value)
|
|
}
|
|
static getGuidanceStrengthEnd(index) {
|
|
const guidance_strength = getControlNetGuidanceStrengthEnd(index)
|
|
return guidance_strength
|
|
}
|
|
static setGuidanceStrengthEnd(index, sd_value) {
|
|
setControlNetGuidanceStrengthEnd(index, sd_value)
|
|
}
|
|
static getProcessorRes(index) {
|
|
const slider = controlnetElement(index, '.slControlNetProcessorRes_')
|
|
|
|
return slider.value
|
|
}
|
|
static setProcessorRes(index, sd_value) {
|
|
const slider = controlnetElement(index, '.slControlNetProcessorRes_')
|
|
slider.value = sd_value
|
|
}
|
|
static getThreshold(index, a_or_b) {
|
|
let slider
|
|
if (a_or_b === 'a') {
|
|
slider = controlnetElement(index, '.slControlNetThreshold_A_')
|
|
} else if (a_or_b === 'b') {
|
|
slider = controlnetElement(index, '.slControlNetThreshold_B_')
|
|
}
|
|
|
|
const sd_value = general.mapRange(
|
|
slider.value,
|
|
slider.min,
|
|
slider.max,
|
|
slider.dataset['sd_min'],
|
|
slider.dataset['sd_max']
|
|
)
|
|
return sd_value
|
|
}
|
|
static setThreshold(index, a_or_b, sd_value) {
|
|
let slider
|
|
let label
|
|
if (a_or_b === 'a') {
|
|
slider = controlnetElement(index, '.slControlNetThreshold_A_')
|
|
label = controlnetElement(index, '.lControlNetThreshold_A_')
|
|
} else if (a_or_b === 'b') {
|
|
slider = controlnetElement(index, '.slControlNetThreshold_B_')
|
|
label = controlnetElement(index, '.lControlNetThreshold_B_')
|
|
}
|
|
|
|
const slider_value = general.mapRange(
|
|
sd_value,
|
|
slider.dataset['sd_min'],
|
|
slider.dataset['sd_max'],
|
|
slider.min,
|
|
slider.max
|
|
)
|
|
slider.value = String(slider_value)
|
|
label.innerText = String(sd_value)
|
|
}
|
|
|
|
static getControlNetUnitJson(index = 0) {}
|
|
}
|
|
|
|
async function checkIfControlNetInstalled() {}
|
|
|
|
async function requestControlNetDetectMap(
|
|
controlnet_init_image,
|
|
_module,
|
|
processor_res,
|
|
threshold_a,
|
|
threshold_b
|
|
) {
|
|
try {
|
|
const payload = {
|
|
controlnet_module: _module,
|
|
controlnet_input_images: [controlnet_init_image],
|
|
controlnet_processor_res: processor_res,
|
|
controlnet_threshold_a: threshold_a,
|
|
controlnet_threshold_b: threshold_b,
|
|
}
|
|
const full_url = `${g_sd_url}/controlnet/detect`
|
|
|
|
// debugger
|
|
|
|
const response_data = await api.requestPost(full_url, payload)
|
|
|
|
// update the mask preview with the new detectMap
|
|
if (response_data['images'].length === 0) {
|
|
app.showAlert(response_data['info'])
|
|
}
|
|
return response_data['images'][0]
|
|
} catch (e) {
|
|
console.warn('requestControlNetDetectMap(): ', _module, e)
|
|
}
|
|
}
|
|
|
|
async function requestControlNetModelList() {
|
|
const control_net_json = await api.requestGet(
|
|
`${g_sd_url}/controlnet/model_list`
|
|
)
|
|
|
|
const model_list = control_net_json?.model_list
|
|
|
|
// const model_list = [
|
|
// 'none',
|
|
// 'control_sd15_depth [fef5e48e]',
|
|
// 'control_sd15_openpose [fef5e48e]',
|
|
// 'control_sd15_scribble [fef5e48e]',
|
|
// ]
|
|
return model_list
|
|
}
|
|
|
|
async function requestControlNetModuleList() {
|
|
// const control_net_json = await api.requestGet(
|
|
// `${g_sd_url}/controlnet/model_list`
|
|
// )
|
|
// const module_list = [
|
|
// // 'none',
|
|
// 'canny',
|
|
// 'depth',
|
|
// 'depth_leres',
|
|
// 'hed',
|
|
// 'mlsd',
|
|
// 'normal_map',
|
|
// 'openpose',
|
|
// // "openpose_hand",
|
|
// 'pidinet',
|
|
// 'scribble',
|
|
// 'fake_scribble',
|
|
// 'segmentation',
|
|
// ]
|
|
|
|
// const module_list = g_sd_config_obj.getControlNetPreprocessors()
|
|
|
|
const result = await api.requestGet(
|
|
`${g_sd_url}/controlnet/module_list?alias_names=1`
|
|
)
|
|
|
|
return result?.module_list
|
|
}
|
|
async function populateModelMenu() {
|
|
try {
|
|
const models = await requestControlNetModelList()
|
|
for (let index = 0; index < g_controlnet_max_models; index++) {
|
|
const menu_element = controlnetElement(
|
|
index,
|
|
'.mModelsMenuControlNet_'
|
|
)
|
|
html_manip.populateMenuByElement(
|
|
menu_element,
|
|
'mModelsMenuItemControlNet_',
|
|
models,
|
|
(item, item_html_element) => {
|
|
item_html_element.innerHTML = item
|
|
item_html_element.dataset['index'] = index
|
|
},
|
|
false,
|
|
'Select Model'
|
|
)
|
|
}
|
|
} catch (e) {
|
|
console.warn(e)
|
|
}
|
|
}
|
|
|
|
function changeModule(_module, index) {
|
|
// const index = index
|
|
|
|
const preprocessor_res_element = controlnetElement(
|
|
index,
|
|
'.slControlNetProcessorRes_'
|
|
)
|
|
|
|
const threshold_a_element = controlnetElement(
|
|
index,
|
|
'.slControlNetThreshold_A_'
|
|
)
|
|
const threshold_b_element = controlnetElement(
|
|
index,
|
|
'.slControlNetThreshold_B_'
|
|
)
|
|
|
|
const detail = g_module_detail[_module]
|
|
|
|
function remapArray(arr) {
|
|
let obj = {
|
|
preprocessor_res: arr[0] || null,
|
|
threshold_a: arr[1] || null,
|
|
threshold_b: arr[2] || null,
|
|
}
|
|
return obj
|
|
}
|
|
const params = remapArray(detail['sliders'])
|
|
|
|
// threshold_a_element.min = prams.
|
|
// threshold_a_element.max =
|
|
// debugger
|
|
|
|
if (params?.preprocessor_res) {
|
|
const preprocessor_res_label_element = controlnetElement(
|
|
index,
|
|
'.labelControlNetProcessorRes_'
|
|
)
|
|
preprocessor_res_element.style.display = 'block'
|
|
preprocessor_res_label_element.innerText = params.preprocessor_res.name
|
|
} else {
|
|
preprocessor_res_element.style.display = 'none'
|
|
}
|
|
if (params?.threshold_a) {
|
|
const threshold_a_label_element = controlnetElement(
|
|
index,
|
|
'.labelControlNetThreshold_A_'
|
|
)
|
|
|
|
threshold_a_element.dataset['sd_min'] = params.threshold_a.min
|
|
threshold_a_element.dataset['sd_max'] = params.threshold_a.max
|
|
ControlNetUnit.setThreshold(index, 'a', params.threshold_a.value)
|
|
threshold_a_element.style.display = 'block'
|
|
threshold_a_label_element.innerText = params.threshold_a.name + ":"
|
|
} else {
|
|
ControlNetUnit.setThreshold(index, 'a', 32)
|
|
threshold_a_element.style.display = 'none'
|
|
}
|
|
|
|
if (params?.threshold_b) {
|
|
const threshold_b_label_element = controlnetElement(
|
|
index,
|
|
'.labelControlNetThreshold_B_'
|
|
)
|
|
|
|
threshold_b_element.dataset['sd_min'] = params.threshold_b.min
|
|
threshold_b_element.dataset['sd_max'] = params.threshold_b.max
|
|
ControlNetUnit.setThreshold(index, 'b', params.threshold_b.value)
|
|
threshold_b_element.style.display = 'block'
|
|
threshold_b_label_element.innerText = params.threshold_b.name + ":"
|
|
} else {
|
|
ControlNetUnit.setThreshold(index, 'b', 32)
|
|
threshold_b_element.style.display = 'none'
|
|
}
|
|
}
|
|
async function populatePreprocessorMenu() {
|
|
try {
|
|
// debugger
|
|
const modules = await requestControlNetModuleList()
|
|
for (let index = 0; index < g_controlnet_max_models; index++) {
|
|
const menu_element = controlnetElement(
|
|
index,
|
|
'.mModulesMenuControlNet_'
|
|
)
|
|
|
|
menu_element.dataset['index'] = String(index)
|
|
html_manip.populateMenuByElement(
|
|
menu_element,
|
|
'mModuleMenuItemControlNet_',
|
|
modules,
|
|
(item, item_html_element) => {
|
|
item_html_element.innerHTML = item
|
|
item_html_element.dataset['index'] = index
|
|
},
|
|
false,
|
|
'Select Module'
|
|
)
|
|
|
|
menu_element.addEventListener('click', (event) => {
|
|
changeModule(
|
|
event.target.innerText,
|
|
event.target.dataset['index']
|
|
)
|
|
})
|
|
}
|
|
} catch (e) {
|
|
console.warn(e)
|
|
}
|
|
}
|
|
function controlnetElement(index, class_) {
|
|
const element = document.querySelector(
|
|
`#controlnet_settings_${index} ${class_}`
|
|
)
|
|
return element
|
|
}
|
|
function getControlNetGuidanceStrengthStart(index) {
|
|
const slider_element = document.querySelector(
|
|
`#controlnet_settings_${index} .slControlNetGuidanceStrengthStart_`
|
|
)
|
|
const sd_value = html_manip.getSliderSdValueByElement(
|
|
slider_element,
|
|
0,
|
|
100,
|
|
0,
|
|
1
|
|
)
|
|
return sd_value
|
|
}
|
|
function setControlNetGuidanceStrengthStart(index, sd_value) {
|
|
const slider_element = controlnetElement(
|
|
index,
|
|
'.slControlNetGuidanceStrengthStart_'
|
|
)
|
|
|
|
const label_element = controlnetElement(
|
|
index,
|
|
'.lControlNetGuidanceStrengthStart_'
|
|
)
|
|
html_manip.setSliderSdValueByElements(
|
|
slider_element,
|
|
label_element,
|
|
sd_value,
|
|
0,
|
|
100,
|
|
0,
|
|
1
|
|
)
|
|
}
|
|
|
|
function getControlNetGuidanceStrengthEnd(index) {
|
|
const slider_element = controlnetElement(
|
|
index,
|
|
'.slControlNetGuidanceStrengthEnd_'
|
|
)
|
|
const sd_value = html_manip.getSliderSdValueByElement(
|
|
slider_element,
|
|
0,
|
|
100,
|
|
0,
|
|
1
|
|
)
|
|
return sd_value
|
|
}
|
|
function setControlNetGuidanceStrengthEnd(index, sd_value) {
|
|
const slider_element = controlnetElement(
|
|
index,
|
|
'.slControlNetGuidanceStrengthEnd_'
|
|
)
|
|
|
|
const label_element = controlnetElement(
|
|
index,
|
|
'.lControlNetGuidanceStrengthEnd_'
|
|
)
|
|
html_manip.setSliderSdValueByElements(
|
|
slider_element,
|
|
label_element,
|
|
sd_value,
|
|
0,
|
|
100,
|
|
0,
|
|
1
|
|
)
|
|
}
|
|
|
|
// controlnet settings getters
|
|
function getControlNetWeightGuidanceStrengthStart(index = 0) {
|
|
const slider_element = controlnetElement(
|
|
index,
|
|
'.slControlNetGuidanceStrengthStart_'
|
|
)
|
|
const slider_value = slider_element.value
|
|
const sd_value = general.mapRange(slider_value, 0, 100, 0, 1) // convert slider value to SD ready value
|
|
return sd_value
|
|
}
|
|
|
|
function getControlNetWeightGuidanceStrengthEnd(index = 0) {
|
|
const slider_value = controlnetElement(
|
|
index,
|
|
'.slControlNetGuidanceStrengthEnd_'
|
|
).value
|
|
|
|
const sd_value = general.mapRange(slider_value, 0, 100, 0, 1) // convert slider value to SD ready value
|
|
return sd_value
|
|
}
|
|
|
|
function getWeight(index = 0) {
|
|
const slider_value = document.querySelector(
|
|
`#controlnet_settings_${index} .slControlNetWeight_`
|
|
).value
|
|
|
|
const sd_value = general.mapRange(slider_value, 0, 100, 0, 2) // convert slider value to SD ready value
|
|
return sd_value
|
|
}
|
|
function setWeight(index = 0, sd_weight) {
|
|
const slider_element = document.querySelector(
|
|
`#controlnet_settings_${index} .slControlNetWeight_`
|
|
)
|
|
const label_element = document.querySelector(
|
|
`#controlnet_settings_${index} .lControlNetWeight_`
|
|
)
|
|
|
|
html_manip.setSliderSdValueByElements(
|
|
slider_element,
|
|
label_element,
|
|
sd_weight,
|
|
0,
|
|
100,
|
|
0,
|
|
2
|
|
)
|
|
}
|
|
function getUseLowVram(index = 0) {
|
|
const b_result = document.querySelector(
|
|
`#controlnet_settings_${index} .chlowVram_`
|
|
).checked
|
|
return b_result
|
|
}
|
|
function getEnableControlNet(index = 0) {
|
|
const is_enable = document.querySelector(
|
|
`#controlnet_settings_${index} .chEnableControlNet_`
|
|
).checked
|
|
return is_enable
|
|
}
|
|
function setEnable(index) {
|
|
document.querySelector(
|
|
`#controlnet_settings_${index} .chEnableControlNet_`
|
|
).checked = b_live_update
|
|
}
|
|
function getSelectedModule(index = 0) {
|
|
const menu_element = controlnetElement(index, '.mModulesMenuControlNet_')
|
|
// debugger
|
|
const module_name =
|
|
html_manip.getSelectedMenuItemTextContentByElement(menu_element)
|
|
|
|
return module_name
|
|
}
|
|
function getSelectedModel(index = 0) {
|
|
const menu_element = controlnetElement(index, '.mModelsMenuControlNet_')
|
|
const model_name =
|
|
html_manip.getSelectedMenuItemTextContentByElement(menu_element)
|
|
return model_name
|
|
}
|
|
function getUseGuessMode(index = 0) {
|
|
const is_guess_mode = document.querySelector(
|
|
`#controlnet_settings_${index} .chGuessMode_`
|
|
).checked
|
|
|
|
return is_guess_mode
|
|
}
|
|
function isControlNetModeEnable() {
|
|
let is_tab_enabled = !document.getElementById('chDisableControlNetTab')
|
|
.checked
|
|
|
|
let numOfEnabled = 0
|
|
if (g_controlnet_max_models <= 0) {
|
|
return false
|
|
}
|
|
|
|
if (is_tab_enabled) {
|
|
for (let index = 0; index < g_controlnet_max_models; index++) {
|
|
if (getEnableControlNet(index)) {
|
|
numOfEnabled += 1
|
|
}
|
|
}
|
|
}
|
|
let is_mode_enabled = is_tab_enabled // could be true
|
|
if (is_tab_enabled === false || numOfEnabled === 0) {
|
|
is_mode_enabled = false
|
|
}
|
|
return is_mode_enabled
|
|
}
|
|
// function getControlNetMaxModelsNumber() {
|
|
// return g_controlnet_max_supported_models
|
|
// }
|
|
|
|
function preprocessorData(
|
|
processor_res = 512,
|
|
threshold_a = 64,
|
|
threshold_b = 64,
|
|
a_min = 64,
|
|
a_max = 1024,
|
|
b_min = 64,
|
|
b_max = 1024,
|
|
processor_res_label = 'Annotator resolution',
|
|
threshold_a_label = 'threshold a',
|
|
threshold_b_label = 'threshold b'
|
|
) {
|
|
return {
|
|
processor_res,
|
|
threshold_a,
|
|
threshold_b,
|
|
a_min,
|
|
a_max,
|
|
b_min,
|
|
b_max,
|
|
processor_res_label,
|
|
threshold_a_label,
|
|
threshold_b_label,
|
|
}
|
|
}
|
|
|
|
function mapPluginSettingsToControlNet(plugin_settings) {
|
|
const ps = plugin_settings // for shortness
|
|
let controlnet_units = []
|
|
|
|
// debugger
|
|
let active_index = 0
|
|
for (let index = 0; index < g_controlnet_max_models; index++) {
|
|
const preprocessor_name = getSelectedModule(index)
|
|
|
|
controlnet_units[active_index] = {
|
|
enabled: getEnableControlNet(index),
|
|
input_image: g_generation_session.controlNetImage[index],
|
|
mask: '',
|
|
module: getSelectedModule(index),
|
|
model: getSelectedModel(index),
|
|
weight: getWeight(index),
|
|
resize_mode: 'Scale to Fit (Inner Fit)',
|
|
lowvram: getUseLowVram(index),
|
|
processor_res: ControlNetUnit.getProcessorRes(index),
|
|
threshold_a: ControlNetUnit.getThreshold(index, 'a'),
|
|
threshold_b: ControlNetUnit.getThreshold(index, 'b'),
|
|
// guidance: ,
|
|
guidance_start: getControlNetWeightGuidanceStrengthStart(index),
|
|
guidance_end: getControlNetWeightGuidanceStrengthEnd(index),
|
|
guessmode: false,
|
|
}
|
|
active_index++
|
|
}
|
|
|
|
if (
|
|
plugin_settings['mode'] === Enum.generationModeEnum['Img2Img'] ||
|
|
plugin_settings['mode'] === Enum.generationModeEnum['Inpaint'] ||
|
|
plugin_settings['mode'] === Enum.generationModeEnum['Outpaint']
|
|
) {
|
|
const b_use_guess_mode = getUseGuessMode()
|
|
controlnet_units[0]['guessmode'] = b_use_guess_mode
|
|
}
|
|
|
|
const controlnet_payload = {
|
|
...ps,
|
|
controlnet_units, //keep for backward compatibility for now
|
|
subseed: -1,
|
|
override_settings: {},
|
|
override_settings_restore_afterwards: true,
|
|
alwayson_scripts: {
|
|
controlnet: {
|
|
args: controlnet_units,
|
|
},
|
|
},
|
|
}
|
|
|
|
return controlnet_payload
|
|
}
|
|
function refreshControlNetTab() {}
|
|
|
|
async function populateControlNetPresetMenu() {
|
|
// const default_preset_name = 'Select CtrlNet Preset'
|
|
// const default_preset_settings = {} // empty preset
|
|
|
|
const custom_presets = await preset.getAllCustomPresetsSettings(
|
|
Enum.PresetTypeEnum['ControlNetPreset']
|
|
)
|
|
g_controlnet_presets = {
|
|
'Select CtrlNet Preset': {},
|
|
...controlnet_preset.ControlNetNativePresets,
|
|
...custom_presets,
|
|
}
|
|
|
|
const presets_names = Object.keys(g_controlnet_presets)
|
|
|
|
html_manip.populateMenu(
|
|
'mControlNetPresetMenu',
|
|
'mControlNetPresetMenuItem',
|
|
presets_names,
|
|
(preset_name, item_html_element) => {
|
|
item_html_element.innerHTML = preset_name
|
|
}
|
|
)
|
|
html_manip.selectMenuItem('mControlNetPresetMenu', 'Select CtrlNet Preset')
|
|
}
|
|
|
|
document
|
|
.getElementById('mControlNetPresetMenu')
|
|
.addEventListener('change', async (evt) => {
|
|
try {
|
|
ControlNetUnit.resetUnits()
|
|
const preset_index = evt.target.selectedIndex
|
|
const preset_name = evt.target.options[preset_index].textContent
|
|
units_settings = g_controlnet_presets[preset_name]
|
|
|
|
ControlNetUnit.setUnits(units_settings)
|
|
} catch (e) {
|
|
console.warn(e)
|
|
}
|
|
})
|
|
|
|
document
|
|
.getElementById('bSetAllControlImage')
|
|
.addEventListener('click', async () => {
|
|
const selectionInfo = await selection.Selection.getSelectionInfoExe()
|
|
if (selectionInfo) {
|
|
const base64_image =
|
|
await g_generation_session.setControlNetImageHelper()
|
|
|
|
for (index = 0; index < g_controlnet_max_models; index++) {
|
|
await g_generation_session.setControlNetImage(
|
|
index,
|
|
base64_image
|
|
)
|
|
}
|
|
} else {
|
|
await note.Notification.inactiveSelectionArea()
|
|
}
|
|
})
|
|
|
|
function initControlNetUnitsEventListeners(controlnet_max_models) {
|
|
for (let index = 0; index < controlnet_max_models; index++) {
|
|
//event listeners
|
|
controlnetElement(
|
|
index,
|
|
'.slControlNetGuidanceStrengthStart_'
|
|
).addEventListener('input', (evt) => {
|
|
// debugger
|
|
const sd_value = general.mapRange(evt.target.value, 0, 100, 0, 1) // convert slider value to SD ready value
|
|
controlnetElement(
|
|
index,
|
|
'.lControlNetGuidanceStrengthStart_'
|
|
).textContent = Number(sd_value).toFixed(2)
|
|
})
|
|
|
|
controlnetElement(
|
|
index,
|
|
'.slControlNetGuidanceStrengthEnd_'
|
|
).addEventListener('input', (evt) => {
|
|
// debugger
|
|
const sd_value = general.mapRange(evt.target.value, 0, 100, 0, 1) // convert slider value to SD ready value
|
|
controlnetElement(
|
|
index,
|
|
'.lControlNetGuidanceStrengthEnd_'
|
|
).textContent = Number(sd_value).toFixed(2)
|
|
})
|
|
|
|
document
|
|
.querySelector(`#controlnet_settings_${index} .slControlNetWeight_`)
|
|
.addEventListener('input', (evt) => {
|
|
// debugger
|
|
const sd_value = general.mapRange(
|
|
evt.target.value,
|
|
0,
|
|
100,
|
|
0,
|
|
2
|
|
) // convert slider value to SD ready value
|
|
document.querySelector(
|
|
`#controlnet_settings_${index} .lControlNetWeight_`
|
|
).textContent = Number(sd_value).toFixed(2)
|
|
})
|
|
|
|
// controlnetElement(index, '.slControlNetProcessorRes_').addEventListener(
|
|
// 'input',
|
|
// (evt) => {
|
|
// // debugger
|
|
// const sd_value = general.mapRange(
|
|
// evt.target.value,
|
|
// 64,
|
|
// 2048,
|
|
// 64,
|
|
// 2048
|
|
// ) // convert slider value to SD ready value
|
|
// controlnetElement(index, '.lControlNetProcessorRes_').textContent =
|
|
// Number(sd_value).toFixed(2)
|
|
// }
|
|
// )
|
|
controlnetElement(index, '.slControlNetThreshold_A_').addEventListener(
|
|
'input',
|
|
(event) => {
|
|
const slider = event.target
|
|
const sd_value = Number(
|
|
general
|
|
.mapRange(
|
|
slider.value,
|
|
slider.min,
|
|
slider.max,
|
|
slider.dataset['sd_min'],
|
|
slider.dataset['sd_max']
|
|
)
|
|
.toFixed(2)
|
|
)
|
|
controlnetElement(index, '.lControlNetThreshold_A_').innerText =
|
|
String(sd_value)
|
|
// ControlNetUnit.setThreshold(index, 'a', sd_value)
|
|
// controlnetElement(index, '.lControlNetThreshold_A_').value =
|
|
// sd_value
|
|
}
|
|
)
|
|
controlnetElement(index, '.slControlNetThreshold_B_').addEventListener(
|
|
'input',
|
|
(event) => {
|
|
const slider = event.target
|
|
const sd_value = Number(
|
|
general
|
|
.mapRange(
|
|
slider.value,
|
|
slider.min,
|
|
slider.max,
|
|
slider.dataset['sd_min'],
|
|
slider.dataset['sd_max']
|
|
)
|
|
.toFixed(2)
|
|
)
|
|
controlnetElement(index, '.lControlNetThreshold_B_').innerText =
|
|
String(sd_value)
|
|
// ControlNetUnit.setThreshold(index, 'a', sd_value)
|
|
// controlnetElement(index, '.lControlNetThreshold_A_').value =
|
|
// sd_value
|
|
}
|
|
)
|
|
document
|
|
.querySelector(`#controlnet_settings_${index} .bSetControlImage_`)
|
|
.addEventListener('click', async () => {
|
|
const selectionInfo =
|
|
await selection.Selection.getSelectionInfoExe()
|
|
if (selectionInfo) {
|
|
// debugger
|
|
const base64_image =
|
|
await g_generation_session.setControlNetImageHelper()
|
|
await g_generation_session.setControlNetImage(
|
|
index,
|
|
base64_image
|
|
)
|
|
} else {
|
|
await note.Notification.inactiveSelectionArea()
|
|
}
|
|
})
|
|
|
|
document
|
|
.querySelector(`#controlnet_settings_${index} .bControlMask_`)
|
|
.addEventListener('click', async () => {
|
|
await previewAnnotator(index)
|
|
})
|
|
}
|
|
}
|
|
document
|
|
.getElementById('mControlNetPresetMenu')
|
|
.addEventListener('updatePresetMenuEvent', async (event) => {
|
|
// console.log("I'm listening on a custom event")
|
|
await populateControlNetPresetMenu()
|
|
})
|
|
|
|
async function previewAnnotator(index) {
|
|
try {
|
|
const controlnet_init_image =
|
|
g_generation_session.controlNetImage[index]
|
|
const _module = ControlNetUnit.getModule(index)
|
|
const processor_res = ControlNetUnit.getProcessorRes(index)
|
|
const threshold_a = ControlNetUnit.getThreshold(index, 'a')
|
|
const threshold_b = ControlNetUnit.getThreshold(index, 'b')
|
|
if (!controlnet_init_image) {
|
|
const error = 'ControlNet initial image is empty'
|
|
app.showAlert(error)
|
|
throw error
|
|
}
|
|
if (!_module || _module === 'none') {
|
|
const error = 'select a valid controlnet module (preprocessor)'
|
|
app.showAlert(error)
|
|
throw error
|
|
}
|
|
|
|
const detect_map = await requestControlNetDetectMap(
|
|
controlnet_init_image,
|
|
_module,
|
|
processor_res,
|
|
threshold_a,
|
|
threshold_b
|
|
)
|
|
|
|
const rgb_detect_map_url =
|
|
await io.convertBlackAndWhiteImageToRGBChannels3(detect_map)
|
|
const rgb_detect_map = general.base64UrlToBase64(rgb_detect_map_url)
|
|
g_generation_session.controlNetMask[index] = rgb_detect_map
|
|
|
|
html_manip.setControlMaskSrc(rgb_detect_map_url, index)
|
|
} catch (e) {
|
|
console.warn('PreviewAnnotator click(): index: ', index, e)
|
|
}
|
|
}
|
|
async function previewAnnotatorFromCanvas(index) {
|
|
try {
|
|
const _module = ControlNetUnit.getModule(index)
|
|
|
|
const width = html_manip.getWidth()
|
|
const height = html_manip.getHeight()
|
|
const selectionInfo = await psapi.getSelectionInfoExe()
|
|
g_generation_session.control_net_preview_selection_info = selectionInfo
|
|
const base64 = await io.IO.getSelectionFromCanvasAsBase64Interface_New(
|
|
width,
|
|
height,
|
|
selectionInfo,
|
|
true
|
|
)
|
|
|
|
if (!_module || _module === 'none') {
|
|
const error = 'select a valid controlnet module (preprocessor)'
|
|
app.showAlert(error)
|
|
throw error
|
|
}
|
|
|
|
const processor_res = ControlNetUnit.getProcessorRes(index)
|
|
const threshold_a = ControlNetUnit.getThreshold(index, 'a')
|
|
const threshold_b = ControlNetUnit.getThreshold(index, 'b')
|
|
|
|
const detect_map = await requestControlNetDetectMap(
|
|
base64,
|
|
_module,
|
|
processor_res,
|
|
threshold_a,
|
|
threshold_b
|
|
)
|
|
|
|
const rgb_detect_map_url =
|
|
await io.convertBlackAndWhiteImageToRGBChannels3(detect_map)
|
|
g_generation_session.controlNetMask[index] = detect_map
|
|
html_manip.setControlMaskSrc(rgb_detect_map_url, index)
|
|
} catch (e) {
|
|
console.warn('PreviewAnnotator click(): index: ', index, e)
|
|
}
|
|
}
|
|
// document
|
|
// .getElementById('bPreviewAnnotator_0')
|
|
// .addEventListener('click', async (event) => {
|
|
// const index = parseInt(event.target.dataset['controlnet-index'])
|
|
// await previewAnnotator(index)
|
|
// })
|
|
|
|
function initPreviewElement(index) {
|
|
//make init mask image use the thumbnail class with buttons
|
|
// const mask_image_html = document.getElementById(
|
|
// 'control_net_preview_image_0'
|
|
// )
|
|
|
|
const mask_image_html = controlnetElement(index, '.control_net_mask_')
|
|
const mask_parent_element = mask_image_html.parentElement
|
|
|
|
this.thumbnail_container = thumbnail.Thumbnail.wrapImgInContainer(
|
|
mask_image_html,
|
|
'viewer-image-container'
|
|
)
|
|
|
|
mask_parent_element.appendChild(thumbnail_container)
|
|
|
|
async function toCanvas(index) {
|
|
// debugger
|
|
if (
|
|
g_generation_session.control_net_preview_selection_info &&
|
|
g_generation_session.controlNetMask[index]
|
|
) {
|
|
const selection_info =
|
|
g_generation_session.control_net_preview_selection_info
|
|
const layer = await io.IO.base64ToLayer(
|
|
g_generation_session.controlNetMask[index],
|
|
'ControlNet Mask.png',
|
|
selection_info.left,
|
|
selection_info.top,
|
|
selection_info.width,
|
|
selection_info.height
|
|
)
|
|
} else {
|
|
// await note.Notification.inactiveSelectionArea()
|
|
app.showAlert('Mask Image is not available')
|
|
}
|
|
}
|
|
async function toControlNetInitImage(index) {
|
|
const preview_result_base64 = g_generation_session.controlNetMask[index]
|
|
g_generation_session.controlNetImage[index] = preview_result_base64
|
|
g_generation_session.control_net_selection_info =
|
|
g_generation_session.control_net_preview_selection_info
|
|
|
|
const rgb_detect_map_url =
|
|
await io.convertBlackAndWhiteImageToRGBChannels3(
|
|
preview_result_base64
|
|
)
|
|
|
|
// g_generation_session.controlNetMask[index] = rgb_detect_map
|
|
|
|
html_manip.setControlImageSrc(rgb_detect_map_url, index)
|
|
}
|
|
thumbnail.Thumbnail.addSPButtonToContainer(
|
|
this.thumbnail_container,
|
|
'svg_sp_btn',
|
|
'use as ControlNet init image',
|
|
|
|
toControlNetInitImage,
|
|
index
|
|
)
|
|
thumbnail.Thumbnail.addSPButtonToContainer(
|
|
this.thumbnail_container,
|
|
'svg_sp_btn_canvas',
|
|
'move to the canvas',
|
|
|
|
toCanvas,
|
|
index
|
|
)
|
|
thumbnail.Thumbnail.addSPButtonToContainer(
|
|
this.thumbnail_container,
|
|
'svg_sp_btn_preview',
|
|
'preview selection from canvas',
|
|
|
|
previewAnnotatorFromCanvas,
|
|
index
|
|
)
|
|
}
|
|
|
|
function initControlNetUnit(index) {
|
|
document.querySelector(
|
|
`#controlnet_settings_${index} .controlnet_unit_label_`
|
|
).textContent = `Control Net Settings Slot ${index}`
|
|
}
|
|
async function initializeControlNetTab(controlnet_max_models) {
|
|
try {
|
|
if (controlnet_max_models <= 0) {
|
|
document.getElementById('controlnetMissingError').style.display =
|
|
'block'
|
|
|
|
return
|
|
}
|
|
document.getElementById('controlnetMissingError').style.display = 'none'
|
|
// if (controlnet_max_models > g_controlnet_max_models)
|
|
// controlnet_max_models = g_controlnet_max_models
|
|
|
|
await populateControlNetPresetMenu()
|
|
const parent_container = document.getElementById(
|
|
'controlnet_parent_container'
|
|
)
|
|
parent_container.innerHTML = ''
|
|
const controlnet_unit_template = document.getElementById(
|
|
'controlnet_settings_template'
|
|
)
|
|
|
|
for (let index = 0; index < controlnet_max_models; index++) {
|
|
const controlnet_unit = controlnet_unit_template.cloneNode(true)
|
|
controlnet_unit.id = 'controlnet_settings_' + index
|
|
controlnet_unit.dataset['index'] = String(index)
|
|
parent_container.appendChild(controlnet_unit)
|
|
}
|
|
|
|
const full_url = `${g_sd_url}/controlnet/module_list?alias_names=1`
|
|
let result_json = await api.requestGet(full_url)
|
|
g_module_detail = result_json['module_detail']
|
|
|
|
initControlNetUnitsEventListeners(controlnet_max_models) // add event listener to all units after cloning
|
|
|
|
for (let index = 0; index < controlnet_max_models; index++) {
|
|
await populateModelMenu(index)
|
|
await populatePreprocessorMenu(index)
|
|
document.getElementById(
|
|
'controlnet_settings_' + index
|
|
).style.display = 'block'
|
|
initPreviewElement(index)
|
|
|
|
initControlNetUnit(index)
|
|
}
|
|
} catch (e) {
|
|
console.warn(e)
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
requestControlNetModelList,
|
|
populateModelMenu,
|
|
initializeControlNetTab,
|
|
getWeight,
|
|
mapPluginSettingsToControlNet,
|
|
getEnableControlNet,
|
|
getSelectedModule,
|
|
getSelectedModel,
|
|
// getControlNetMaxModelsNumber,
|
|
getControlNetGuidanceStrengthStart,
|
|
setControlNetGuidanceStrengthStart,
|
|
getControlNetGuidanceStrengthEnd,
|
|
setControlNetGuidanceStrengthEnd,
|
|
ControlNetUnit,
|
|
populateControlNetPresetMenu,
|
|
isControlNetModeEnable,
|
|
}
|