| 'use strict'; |
|
|
| (function() { |
| const VERSION = "1.2.0" |
|
|
| var jq; |
|
|
| var weight_helper_data = {}; |
| var weight_helper_preview_info = {}; |
|
|
| var sampling_steps; |
|
|
| const REGEX = /<([^:]+):([^:]+):([^>]+)>/; |
| const TAG_TYPES = ["lora", "lyco"]; |
|
|
| const SPECIAL_KEYWORDS = ["XYZ"]; |
|
|
| const SPECIAL_PRESETS = { |
| lora: { |
| SD: { XYZ: "XYZ(17)" }, |
| SDXL: { XYZ: "XYZ(12)" } |
| }, |
| lycoris: { |
| SD: { XYZ: "XYZ(26)" }, |
| SDXL: { XYZ: "XYZ(20)" } |
| }, |
| unknown: { XYZ: "XYZ(26)" } |
| }; |
|
|
| const LORA_TYPE_PULLDOWN = { |
| "LoRA(LierLa)": "lora", |
| "LyCORIS,etc": "lycoris" |
| }; |
|
|
| const LBW_WEIGHT_SD_VERSIONS = ["SD", "SDXL"]; |
|
|
| const LBW_WEIGHT_SETTINGS = { |
| lora: { |
| SD: { |
| masks: [1,0,1,1,0,1,1,0,1,1,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1], |
| block_points: ["BASE", "IN01-IN04", "IN05-IN08", "M00", "OUT03-OUT06", "OUT07-OUT11"] |
| }, |
| SDXL: { |
| masks: [1,0,0,0,0,1,1,0,1,1,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0], |
| block_points: ["BASE", "IN04-IN08", "M00", "OUT00-OUT05"] |
| } |
| }, |
| lycoris: { |
| SD: { |
| masks: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], |
| block_points: ["BASE", "IN00-IN05", "IN06-IN11", "M00", "OUT00-OUT05", "OUT06-OUT11"] |
| }, |
| SDXL: { |
| masks: [1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0], |
| block_points: ["BASE", "IN00-IN03", "IN04-IN08", "M00", "OUT00-OUT03", "OUT04-OUT08"] |
| } |
| }, |
| unknown: { |
| masks: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], |
| block_points: [] |
| } |
| }; |
|
|
| const WEIGHT_SETTINGS = { |
| te: { |
| label: "TEnc", |
| min: undefined, max: undefined, default: 100, step: undefined |
| }, |
| unet: { |
| label: "UNet", |
| min: undefined, max: undefined, default: undefined, step: undefined |
| }, |
| dyn: { |
| label: "Dyn", |
| min: undefined, max: undefined, default: undefined, step: undefined |
| }, |
| start: { |
| label: "Start", |
| min: 0, max: undefined, default: 0, step: 100 |
| }, |
| stop: { |
| label: "Stop", |
| min: 0, max: undefined, default: undefined, step: 100 |
| }, |
| lbw: { |
| labels: ["BASE", "IN00", "IN01", "IN02", "IN03", "IN04", "IN05", "IN06", "IN07", "IN08", "IN09", "IN10", "IN11", "M00", "OUT00", "OUT01", "OUT02", "OUT03", "OUT04", "OUT05", "OUT06", "OUT07", "OUT08", "OUT09", "OUT10", "OUT11"], |
| min: undefined, max: undefined, default: 100, step: undefined |
| } |
| }; |
|
|
| class WeightSet { |
| map; |
| constructor() { |
| this.map = new Map(); |
| } |
| add(weightDataHash, weightData) { |
| return this.map.set(weightDataHash, weightData); |
| } |
| has(weightDataHash) { |
| return this.map.has(weightDataHash); |
| } |
| delete(weightDataHash) { |
| return this.map.delete(weightDataHash); |
| } |
| clear() { |
| return this.map.clear(); |
| } |
| getAll() { |
| return [...this.map.values()]; |
| } |
| } |
|
|
| var last_instance = undefined; |
|
|
| class WeightData { |
| lbw_lora_type; |
| lbw_sd_version; |
| te; |
| use_unet; |
| unet; |
| use_dyn; |
| dyn; |
| start; |
| stop; |
| lbw; |
| lbwe; |
| special; |
|
|
| constructor(data) { |
| if (data) { |
| Object.assign(this, data); |
| } |
| } |
|
|
| isSpecial() { |
| return this.special != null && this.special !== ""; |
| } |
|
|
| clone() { |
| return new WeightData(structuredClone(this)); |
| } |
|
|
| equals(other) { |
| if (other == null) { |
| return false; |
| } |
| if (this.lbw_lora_type !== other.lbw_lora_type) { |
| return false; |
| } |
| if (this.lbw_sd_version !== other.lbw_sd_version) { |
| return false; |
| } |
| if (this.te[0] !== other.te[0]) { |
| return false; |
| } |
| if (this.te[0] !== other.te[0]) { |
| return false; |
| } |
| if (this.use_unet !== other.use_unet) { |
| return false; |
| } |
| if (this.use_unet && (this.unet[0] != other.unet[0])) { |
| return false; |
| } |
| if (this.use_dyn !== other.use_dyn) { |
| return false; |
| } |
| if (this.use_dyn && (this.dyn[0] != other.dyn[0])) { |
| return false; |
| } |
| if (this.start[0] !== other.start[0]) { |
| return false; |
| } |
| let stop1 = this.stop[0] == null ? sampling_steps : this.stop[0]; |
| let stop2 = other.stop[0] == null ? sampling_steps : other.stop[0]; |
| if (stop1 !== stop2) { |
| return false; |
| } |
| if (this.lbw.length !== other.lbw.length) { |
| return false; |
| } |
| if (this.isSpecial()) { |
| if (this.special !== other.special) { |
| return false; |
| } |
| } else { |
| let masks = null; |
| if (this.lbw_lora_type && this.lbw_sd_version) { |
| masks = LBW_WEIGHT_SETTINGS[this.lbw_lora_type][this.lbw_sd_version].masks; |
| } |
| for (let i = 0; i < this.lbw.length; i++) { |
| if ((!masks || masks[i] === 1) && this.lbw[i] !== other.lbw[i]) { |
| return false; |
| } |
| } |
| } |
| return true; |
| } |
|
|
| hashCode() { |
| let hash = 0; |
| const calcHash = (v) => ((hash ^ v) << 5) - hash ^ v; |
| hash = calcHash(strHashCode(this.lbw_lora_type)); |
| hash = calcHash(strHashCode(this.lbw_sd_version)); |
| hash = calcHash(this.te[0]); |
| hash = calcHash(this.use_unet ? 1 : 0); |
| hash = calcHash(this.use_unet ? this.unet[0] : 0); |
| hash = calcHash(this.use_dyn ? 1 : 0); |
| hash = calcHash(this.use_dyn ? this.dyn[0] : 0); |
| hash = calcHash(this.start[0]/10); |
| hash = calcHash(this.stop[0] == null ? sampling_steps : this.stop[0]); |
| if (this.isSpecial()) { |
| hash = calcHash(strHashCode(this.special)); |
| } else { |
| let masks = null; |
| if (this.lbw_lora_type && this.lbw_sd_version) { |
| masks = LBW_WEIGHT_SETTINGS[this.lbw_lora_type][this.lbw_sd_version].masks; |
| } |
| for (let i = 0; i < this.lbw.length; i++) { |
| const val = !masks || masks[i] === 1 ? this.lbw[i] : 0; |
| hash = calcHash(val); |
| } |
| } |
| return hash & 0xffffffff; |
| } |
| } |
|
|
| class WeightHelper { |
|
|
| static MAIN_TEMPLATE; |
| static PREVIEW_TEMPLATE; |
| static PRESETS_TEMPLATE; |
| static LBWBLOCKS_TEMPLATE; |
| static LBWS_TEMPLATE; |
|
|
| mainBody; |
| previewBody; |
| lbwDOMs = []; |
|
|
| weightData = {}; |
| bindData = { |
| mainBindData: {}, |
| lbwPresetBindDatas: [], |
| lbwBlockBindDatas: [], |
| lbwBindDatas: [], |
| previewBindData: null |
| } |
| weightElements = {}; |
|
|
| usingExecCommand = false; |
|
|
| tabId = null; |
| offsetX = 0; |
| offsetY = 0; |
| isDragging = false; |
|
|
| lbwPresetsMap = {}; |
| lbwPresetsValueKeyMap = {}; |
|
|
| metadata = {}; |
| previewInfo = {}; |
|
|
| tagName = null; |
| name = null; |
| nameHash = null; |
| multiplier = null; |
| currentHistory = null; |
| currentLockSet = new WeightSet(); |
| weightData = new WeightData(); |
|
|
| lastSelectionStart = null; |
| lastSelectionEnd = null; |
| lastText = null; |
|
|
| historyIndex = 0; |
|
|
| openedExtraOption = false; |
|
|
| releaseFunctions = []; |
|
|
| static attach(textarea) { |
| textarea.addEventListener('contextmenu', (e) => { |
| if (!opts.weight_helper_enabled) { |
| return; |
| } |
| if (last_instance) { |
| e.preventDefault(); |
| last_instance.close(); |
| return; |
| } |
| let selectedText = window.getSelection().toString(); |
| if (selectedText) { |
| return; |
| } |
| const prompt = e.target.value; |
| let tmpSelectionStart = e.target.selectionStart; |
| const lCar = prompt.lastIndexOf("<", tmpSelectionStart - 1); |
| const rCar = prompt.indexOf(">", tmpSelectionStart); |
| if (lCar < 0 || rCar < 0) { |
| return; |
| } |
| selectedText = prompt.substring(lCar, rCar + 1); |
| if ((selectedText.match(/</g) || []).length != 1 || (selectedText.match(/>/g) || []).length != 1) { |
| return; |
| } |
| tmpSelectionStart = lCar; |
| const match = REGEX.exec(selectedText); |
| if (match) { |
| const loraType = match[1].toLowerCase(); |
| const name = match[2]; |
| const multiplier = match[3]; |
|
|
| if (TAG_TYPES.includes(loraType)) { |
| e.preventDefault(); |
| const tabId = e.target.closest("[id^='tab_'][class*='tabitem']").id.split("_")[1]; |
| const selectionStart = tmpSelectionStart + match.index; |
| const selectionEnd = selectionStart + match.input.trim().length; |
| WeightHelper.loadTemplate().then(() => { |
| const weightHelper = new WeightHelper(tabId, e.target, selectionStart, selectionEnd, loraType, name, multiplier); |
| weightHelper.setup(); |
| weightHelper.show(e.pageY + 15, e.pageX); |
| }); |
| } |
| } |
| }); |
| } |
|
|
| static async loadTemplate() { |
| if (WeightHelper.MAIN_TEMPLATE != null) { |
| return; |
| } |
| async function loadHandlebars() { |
| if ("Handlebars" in window) { |
| return Promise.resolve(); |
| } else { |
| try { |
| const res = await fetch("https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"); |
| const script = await res.text(); |
| new Function(script).call(window); |
|
|
| Handlebars.registerHelper("lower", str => str.toLowerCase()); |
| Handlebars.registerHelper("visible", b => b ? "" : "visibility: hidden;"); |
| Handlebars.registerHelper("display", b => b ? "" : "display: none;"); |
| Handlebars.registerHelper("checked", b => b ? "checked" : ""); |
| Handlebars.registerHelper("selected", b => b ? "selected" : ""); |
| Handlebars.registerHelper("pos", array => { |
| let str = ""; |
| str += array[0] == null ? "" : `top: ${array[0]}px;`; |
| str += array[1] == null ? "" : `right: ${array[1]}px;`; |
| str += array[2] == null ? "" : `bottom: ${array[2]}px;`; |
| str += array[3] == null ? "" : `left: ${array[3]}px;`; |
| return str; |
| }) |
| } catch (error) { |
| console.error("Failed to load Handlebars:", error); |
| } |
| } |
| } |
|
|
| await loadHandlebars(); |
| const response = await fetch("/whapi/v1/get_template", { method: "POST", body: null }); |
| const hbs = await response.json(); |
| function partialize(hbs, tag) { |
| const startTag = tag; |
| const start = hbs.indexOf(startTag); |
| const endTag = `${tag.substring(0, 1)}/${tag.substring(1)}`; |
| const end = hbs.indexOf(endTag, start + startTag.length); |
| const partial = hbs.substring(start + startTag.length, end); |
| const main = hbs.substring(0, start) + hbs.substring(end + endTag.length); |
| return {"partial": partial, "main": main} |
| } |
| let main, preview, preset, lbwBlock, lbw; |
| ({ partial: preview, main: main} = partialize(hbs, "<wh:preview>")); |
| ({ partial: preset, main: main} = partialize(main, "<wh:lbwpresets>")); |
| ({ partial: lbwBlock, main: main} = partialize(main, "<wh:lbwblocks>")); |
| ({ partial: lbw, main: lbwBlock} = partialize(lbwBlock, "<wh:lbws>")); |
| WeightHelper.MAIN_TEMPLATE = Handlebars.compile(main); |
| WeightHelper.PREVIEW_TEMPLATE = Handlebars.compile(preview); |
| WeightHelper.PRESETS_TEMPLATE = Handlebars.compile(preset); |
| WeightHelper.LBWBLOCKS_TEMPLATE = Handlebars.compile(lbwBlock); |
| WeightHelper.LBWS_TEMPLATE = Handlebars.compile(lbw); |
| } |
|
|
| constructor(tabId, textarea, selectionStart, selectionEnd, tagName, name, multiplier) { |
| document.documentElement.style.setProperty('--weight-helper-slider_size', opts.weight_helper_slider_length); |
|
|
| this.tabId = tabId; |
| this.textarea = textarea; |
| this.lastSelectionStart = selectionStart; |
| this.lastSelectionEnd = selectionEnd; |
| this.lastText = this.textarea.value.substring(this.lastSelectionStart, this.lastSelectionEnd); |
|
|
| this.tagName = tagName; |
| this.name = name; |
| this.nameHash = strHashCode(name); |
| this.multiplier = multiplier; |
|
|
| const samplingSteps = gradioApp().getElementById(`${this.tabId}_steps`).querySelector("input"); |
| sampling_steps = Math.round(samplingSteps.value * 100); |
|
|
| if (opts.weight_helper_using_execCommand) { |
| if (typeof document.execCommand === 'function') { |
| this.usingExecCommand = true; |
| } else { |
| console.warn("execCommand is not supported."); |
| } |
| } |
| } |
|
|
| setup() { |
| this.initSettings(); |
| this.initWeightData(); |
| this.initHistory(); |
|
|
| this.setupMainBindData(); |
| this.setupLbwBindData(); |
|
|
| this.buildDOM(); |
| if (this.weightData.lbw_sd_version) { |
| this.redrawLbw(); |
| } |
| } |
|
|
| initSettings() { |
| const optBlockPattern = /((BASE|MID|M00|(IN|OUT)[0-9]{1,2}(-(IN|OUT)[0-9]{1,2})?) *(, *|$))+/; |
| for (let loraType of Object.values(LORA_TYPE_PULLDOWN)) { |
| for (let sdVersion of LBW_WEIGHT_SD_VERSIONS) { |
| try { |
| let optBlockPoints = opts[`weight_helper_lbw_${loraType}_${sdVersion.toLowerCase()}_block_points`] |
| optBlockPoints = optBlockPoints.replace("MID", "M00"); |
| if (optBlockPattern.exec(optBlockPoints)) { |
| const blockPoints = optBlockPoints.split(',').map(v => { |
| return v.trim().replace(/\d+/g, match => match.length === 1 ? `0${match}` : match); |
| }); |
| this.getLbwWeightSetting(loraType, sdVersion).block_points = blockPoints; |
| } |
| } catch (e) { |
| console.warn(`${loraType}_${sdVersion} block definition format is invalid.`, e); |
| } |
| } |
| } |
|
|
| for (const k of ["te", "unet", "dyn", "lbw"]) { |
| WEIGHT_SETTINGS[k].min = Math.round(opts[`weight_helper_${k}_min`] * 100); |
| WEIGHT_SETTINGS[k].max = Math.round(opts[`weight_helper_${k}_max`] * 100); |
| WEIGHT_SETTINGS[k].step = Math.round(opts[`weight_helper_${k}_step`] * 100); |
| } |
| WEIGHT_SETTINGS.start.max = sampling_steps; |
| WEIGHT_SETTINGS.stop.max = sampling_steps; |
| WEIGHT_SETTINGS.stop.default = sampling_steps; |
|
|
| const lbwPreset = gradioApp().getElementById("lbw_ratiospreset").querySelector("textarea"); |
| let lbwPresetValue = lbwPreset.value ?? ""; |
| const lbwPresets = lbwPresetValue.split("\n").filter(e => e.trim() !== ''); |
| for (const loraType of Object.values(LORA_TYPE_PULLDOWN)) { |
| this.lbwPresetsMap[loraType] = {}; |
| this.lbwPresetsValueKeyMap[loraType] = {}; |
| for (const sdVersion of LBW_WEIGHT_SD_VERSIONS) { |
| let lbwPreset = {}; |
| let lbwPresetValueKey = {}; |
|
|
| this.lbwPresetsMap[loraType][sdVersion] = lbwPreset; |
| this.lbwPresetsValueKeyMap[loraType][sdVersion] = lbwPresetValueKey; |
|
|
| const blockLength = this.getLbwWeightSetting(loraType, sdVersion).masks.filter((b) => b == 1).length; |
| for (const line of lbwPresets) { |
| const kv = line.split(":"); |
| if (kv.length == 2 && kv[1].split(",").length == blockLength) { |
| lbwPreset[kv[0]] = kv[1]; |
| lbwPresetValueKey[kv[1]] = kv[0]; |
| } |
| } |
| } |
| } |
| } |
|
|
| initWeightData() { |
| if (!(this.nameHash in weight_helper_data)) { |
| weight_helper_data[this.nameHash] = { "lock": [], "history": [], "lora_info": {} } |
| } |
|
|
| if (!("lora_info" in weight_helper_data[this.nameHash])) { |
| weight_helper_data[this.nameHash].lora_info = {}; |
| } |
| const loraInfo = weight_helper_data[this.nameHash].lora_info; |
| if ("metadata" in loraInfo) { |
| this.metadata = loraInfo.metadata; |
| this.weightData.lbw_sd_version = this.metadata.sd_version; |
| } |
| if ("selected_lora_type" in loraInfo) { |
| this.weightData.lbw_lora_type = loraInfo.selected_lora_type.lbw_lora_type; |
| this.weightData.lbw_sd_version = loraInfo.selected_lora_type.lbw_sd_version; |
| } else { |
| loraInfo.selected_lora_type = {}; |
| } |
| if (this.nameHash in weight_helper_preview_info) { |
| this.previewInfo = weight_helper_preview_info[this.nameHash]; |
| } |
|
|
| for (const weightType of Object.keys(WEIGHT_SETTINGS)) { |
| this.weightData[weightType] = [] |
| this.weightData[weightType].push(WEIGHT_SETTINGS[weightType].default); |
| } |
|
|
| this.weightData.lbw = []; |
| this.weightData.lbwe = []; |
| this.weightData.special = ""; |
|
|
| const multipliers = this.multiplier.split(":"); |
|
|
| const multiplierMap = {} |
| for (let i = 0; i < multipliers.length; i++) { |
| let key; |
| let value; |
| if (multipliers[i].indexOf("=") >= 0) { |
| const keyValue = multipliers[i].split("="); |
| key = keyValue[0].toLowerCase(); |
| value = keyValue[1]; |
| } else { |
| key = ["te", "unet", "dyn"][i]; |
| value = multipliers[i]; |
| } |
| multiplierMap[key] = value; |
| } |
|
|
| let assumedSdVersion = null; |
| let assumedLoraType = null; |
| Object.entries(multiplierMap).forEach(kv => { |
| const group = kv[0]; |
| const value = kv[1]; |
| if (group === "lbw") { |
| let blocks = value.split(','); |
| if (blocks.length === 1 && SPECIAL_KEYWORDS.includes(value)) { |
| this.weightData.special = value; |
| } else { |
| const loraSdCombination = []; |
| for (const loraType of Object.values(LORA_TYPE_PULLDOWN)) { |
| for (const sdVersion of LBW_WEIGHT_SD_VERSIONS) { |
| loraSdCombination.push({ |
| loraType: loraType, |
| sdVersion: sdVersion |
| }); |
| } |
| } |
| for (const loraSd of loraSdCombination) { |
| const loraType = loraSd.loraType; |
| const sdVersion = loraSd.sdVersion; |
| if (blocks.length === 1) { |
| const lbwPresets = this.getLbwPresets(loraType, sdVersion); |
| if (value in lbwPresets) { |
| blocks = lbwPresets[value].split(','); |
| } else { |
| continue; |
| } |
| } |
| const masks = this.getLbwWeightSetting(loraType, sdVersion).masks; |
| if (blocks.length === masks.filter((b) => b == 1).length) { |
| assumedSdVersion = sdVersion; |
| assumedLoraType = loraType; |
| let refIdx = 0; |
| for (let enable of masks) { |
| if (enable) { |
| this.weightData.lbw.push(Math.round(blocks[refIdx] * 100)); |
| refIdx++; |
| } else { |
| this.weightData.lbw.push(0); |
| } |
| } |
| break; |
| } |
| } |
| } |
| } else if (group === "step") { |
| const startStop = value.split('-'); |
| this.weightData.start[0] = Math.round(startStop[0] * 100); |
| this.weightData.stop[0] = Math.round(startStop[1] * 100); |
| } else if (group === "lbwe") { |
| this.weightData[group][0] = value; |
| } else { |
| this.weightData[group][0] = Math.round(value * 100); |
| } |
| }); |
| this.weightData.use_unet = this.weightData.unet[0] != null; |
| this.weightData.use_dyn = this.weightData.dyn[0] != null; |
|
|
| if (assumedLoraType) { |
| this.weightData.lbw_lora_type = assumedLoraType; |
| } |
| if (!this.weightData.lbw_lora_type) { |
| if (this.tagName === "lora") { |
| this.weightData.lbw_lora_type = "lora"; |
| } else { |
| this.weightData.lbw_lora_type = "lycoris"; |
| } |
| } |
| if (assumedSdVersion) { |
| this.weightData.lbw_sd_version = assumedSdVersion; |
| } |
| if (!this.weightData.lbw_sd_version) { |
| this.weightData.lbw_sd_version = this.metadata.sd_version; |
| } |
|
|
| const masks = this.getLbwWeightSetting(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version).masks; |
| this.weightData.masks = masks; |
| if (this.weightData.lbw.length === 0) { |
| this.weightData.lbw = new Array(masks.length).fill(100); |
| } |
| } |
|
|
| initHistory() { |
| if (!("lock" in weight_helper_data[this.nameHash])) { |
| weight_helper_data[this.nameHash].lock = []; |
| } |
| weight_helper_data[this.nameHash].lock.forEach(lock => { |
| this.currentLockSet.add(lock.hashCode(), lock); |
| }); |
|
|
| if (!("history" in weight_helper_data[this.nameHash])) { |
| weight_helper_data[this.nameHash].history = []; |
| } |
|
|
| this.currentHistory = weight_helper_data[this.nameHash].history; |
| if (this.currentHistory.length == 0) { |
| this.currentHistory.push(this.weightData.clone()); |
| } else { |
| const historyLen = this.currentHistory.length; |
| const latestHistory = this.currentHistory[historyLen - 1]; |
| if (this.weightData.isSpecial()) { |
| this.weightData.lbw = structuredClone(latestHistory.lbw); |
| } |
| if (!this.weightData.equals(latestHistory)) { |
| this.currentHistory.push(this.weightData.clone()); |
| } |
| } |
| this.historyIndex = this.currentHistory.length - 1; |
| } |
|
|
| initWeightForm(weight, weightSetting, weightData, idx = 0) { |
| const fVal = weightData[idx]; |
| weight.sliderMin = fVal < weightSetting.min ? fVal : weightSetting.min; |
| weight.sliderMax = fVal > weightSetting.max ? fVal : weightSetting.max; |
| weight.sliderStep = weightSetting.step; |
| weight.sliderValue = fVal; |
| weight.updownStep = weightSetting.step / 100; |
| weight.updownValue = weightData[idx] / 100; |
| } |
|
|
| setupMainBindData() { |
| const mainBindData = []; |
| this.bindData.mainBindData = mainBindData; |
|
|
| mainBindData.title = this.name; |
| mainBindData.page = `${this.historyIndex + 1}/${this.currentHistory.length}`; |
| let scale = opts.weight_helper_context_menu_scale; |
| if (scale <= 0) { |
| scale = 1; |
| } |
| mainBindData.scale = scale; |
|
|
| const lock = {} |
| mainBindData.lock = lock; |
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
| lock.flag = isLocked ? "like" : "unlike"; |
| lock.visible = !this.weightData.isSpecial() && this.weightData.lbw_sd_version; |
|
|
| const weights = [] |
| mainBindData.weights = weights; |
| for (const group of Object.keys(WEIGHT_SETTINGS)) { |
| if (group === "lbw") continue; |
|
|
| const weightSetting = WEIGHT_SETTINGS[group]; |
| const weightData = this.weightData[group]; |
|
|
| const weight = {} |
| const useCheck = weightSetting.default === undefined; |
| if (useCheck) { |
| if (weightData[0] != null) { |
| weight.checked = true; |
| } else { |
| weightData[0] = 0; |
| } |
| } |
|
|
| this.initWeightForm(weight, weightSetting, weightData); |
| weight.group = group; |
| weight.label = weightSetting.label; |
| weight.useCheck = useCheck; |
| weight.visible = true; |
| if (group !== "te") { |
| if (useCheck) { |
| if (!weight.checked) { |
| weight.visible = false; |
| } |
| } else if (weightData[0] == weightSetting.default) { |
| weight.visible = false; |
| } |
| } |
| weights.push(weight); |
| } |
|
|
| const extraButton = {} |
| mainBindData.extraButton = extraButton; |
| if (weights.some(v => !v.visible)) { |
| extraButton.visible = true; |
| } else { |
| this.openedExtraOption = true; |
| } |
|
|
| const loraTypes = []; |
| mainBindData.loraTypes = loraTypes; |
| for (const entry of Object.entries(LORA_TYPE_PULLDOWN)) { |
| const loraType = {} |
| loraType.name = entry[0]; |
| loraType.value = entry[1]; |
| if (loraType.value === this.weightData.lbw_lora_type) { |
| loraType.selected = true; |
| } |
| loraTypes.push(loraType); |
| } |
|
|
| const sdvers = []; |
| mainBindData.sdvers = sdvers; |
| for (const sdVersion of LBW_WEIGHT_SD_VERSIONS) { |
| const sdver = {} |
| sdver.name = sdVersion; |
| sdver.value = sdVersion; |
| sdver.checked = sdVersion == this.weightData.lbw_sd_version; |
| sdvers.push(sdver); |
| } |
|
|
| const xyz = {}; |
| mainBindData.xyz = xyz; |
|
|
| const specialPresets = this.getLbwSpecialPreset(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version); |
| xyz.checked = this.weightData.special === "XYZ"; |
| xyz.label = specialPresets.XYZ; |
| } |
|
|
| setupLbwBindData() { |
| const lbwBindDatas = []; |
| this.bindData.lbwBindDatas = lbwBindDatas; |
|
|
| const group = "lbw" |
| const lbwSetting = WEIGHT_SETTINGS[group]; |
| const lbwData = this.weightData[group]; |
| for (let idx = 0; idx < lbwData.length; idx++) { |
| const lbwWeight = {} |
| this.initWeightForm(lbwWeight, lbwSetting, lbwData, idx); |
| lbwWeight.group = group; |
| lbwWeight.label = lbwSetting.labels[idx]; |
| lbwBindDatas.push(lbwWeight); |
| } |
| } |
|
|
| buildDOM() { |
| const parser = new DOMParser(); |
| const mainHtml = WeightHelper.MAIN_TEMPLATE(this.bindData.mainBindData); |
| const mainDoc = parser.parseFromString(mainHtml, 'text/html'); |
| this.mainBody = mainDoc.body.firstChild; |
|
|
| const lbwsHtml = WeightHelper.LBWS_TEMPLATE({ lbws: this.bindData.lbwBindDatas }); |
| const lbwsDoc = parser.parseFromString(lbwsHtml, 'text/html'); |
| this.lbwDOMs = [...lbwsDoc.body.children]; |
|
|
| [...mainDoc.getElementsByClassName("wh:weight")].forEach(elem => { |
| const data = {} |
| const group = elem.dataset.group; |
| const check = elem.getElementsByClassName("wh:check"); |
| data.check = check.length > 0 ? check[0] : undefined; |
| data.slider = elem.getElementsByClassName("wh:slider")[0]; |
| data.updown = elem.getElementsByClassName("wh:updown")[0]; |
| this.weightElements[group] = [data]; |
| }); |
|
|
| this.weightElements["lbw"] = []; |
| [...lbwsDoc.getElementsByClassName("wh:lbw")].forEach(elem => { |
| const data = {} |
| data.check = undefined; |
| data.slider = elem.getElementsByClassName("wh:slider")[0]; |
| data.updown = elem.getElementsByClassName("wh:updown")[0]; |
| this.weightElements["lbw"].push(data); |
| }); |
|
|
| this.attachEvent(this.mainBody, "click", (e) => e.stopPropagation()); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:header"), "mousedown", (e) => { |
| this.isDragging = true; |
| this.offsetX = e.clientX - this.mainBody.getBoundingClientRect().left; |
| this.offsetY = e.clientY - this.mainBody.getBoundingClientRect().top; |
| }); |
| this.attachEvent(document.body, "mousemove", (e) => { |
| if (!this.isDragging) return; |
|
|
| const x = e.clientX - this.offsetX + window.scrollX; |
| const y = e.clientY - this.offsetY + window.scrollY; |
|
|
| this.mainBody.style.left = x + 'px'; |
| this.mainBody.style.top = y + 'px'; |
| }); |
| this.attachEvent(document.body, "mouseup", () => { |
| this.isDragging = false; |
| }); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:lock"), "click", () => { |
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
|
|
| this.updateLockedIcon(!isLocked); |
| if (isLocked) { |
| this.currentLockSet.delete(weightDataHash); |
| } else { |
| const weightDataClone = this.weightData.clone(); |
| if (weightDataClone.stop[0] == WEIGHT_SETTINGS.stop.default) { |
| weightDataClone.stop[0] = null; |
| } |
| this.currentLockSet.add(weightDataHash, weightDataClone); |
| } |
| }); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:clear"), "click", () => { |
| const newHistory = this.currentLockSet.getAll(); |
| if (newHistory.length == 0 || !newHistory[newHistory.length - 1].equals(this.weightData)) { |
| newHistory.push(this.weightData); |
| } |
|
|
| weight_helper_data[this.nameHash].history = newHistory; |
| this.currentHistory = newHistory; |
|
|
| document.getElementById("wh:page__label").textContent = `${newHistory.length}/${newHistory.length}`; |
| this.historyIndex = newHistory.length - 1; |
| }); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:page__prev"), "click", () => { |
| if (this.historyIndex <= 0) { |
| return; |
| } |
| this.historyIndex--; |
| this.applyFromHistory(); |
| }); |
| this.attachEvent(mainDoc.getElementById("wh:page__next"), "click", () => { |
| if (this.historyIndex >= this.currentHistory.length - 1) { |
| return; |
| } |
| this.historyIndex++; |
| this.applyFromHistory(); |
| }); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:reload"), "click", () => { |
| this.loadMetadata(true); |
| }); |
|
|
| const changedEvent = (group, useCheck) => { |
| if (useCheck && !useCheck.checked) { |
| useCheck.checked = true; |
| this.weightData[`use_${group}`] = true; |
| } |
|
|
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
| this.updateLockedIcon(isLocked); |
|
|
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
| } |
| Object.entries(this.weightElements).forEach(entry => { |
| const group = entry[0]; |
| if (group === "lbw") { |
| return; |
| } |
| const weights = entry[1]; |
| weights.forEach((weight, i) => { |
| if (weight.check) { |
| this.attachEvent(weight.check, "change", (e) => { |
| this.weightData[`use_${group}`] = e.target.checked; |
|
|
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
| this.updateLockedIcon(isLocked); |
|
|
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
| }); |
| } |
| this.attachEvent(weight.slider, "input", (e) => { |
| const fVal = parseFloat(e.target.value); |
| this.weightData[group][i] = fVal; |
| weight.updown.value = Math.round(fVal) / 100; |
| changedEvent(group, weight.check); |
| }); |
| this.attachEvent(weight.updown, "input", (e) => { |
| const fVal = Math.round(e.target.value * 100); |
| this.weightData[group][i] = fVal; |
| if (fVal < weight.slider.min) { |
| weight.slider.min = fVal; |
| } |
| if (fVal > weight.slider.max) { |
| weight.slider.max = fVal; |
| } |
| weight.slider.value = Math.round(fVal); |
| changedEvent(group, weight.check); |
| }); |
| }) |
| }); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:extra_button"), "click", (e) => { |
| e.target.remove(); |
| [...this.mainBody.getElementsByClassName("wh:weight")].forEach(f => { |
| f.style.display = ''; |
| }) |
| this.openedExtraOption = true; |
| }); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:lora_type"), "change", (e) => { |
| this.weightData.lbw_lora_type = e.target.value; |
|
|
| const xyzLabel = document.getElementById("wh:xyz_label"); |
| const specialPreset = this.getLbwSpecialPreset(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version); |
| xyzLabel.textContent = specialPreset.XYZ; |
|
|
| this.redrawLbw(); |
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
| const masks = this.getLbwWeightSetting(e.target.value, this.weightData.lbw_sd_version).masks; |
| this.weightData.masks = masks; |
| }); |
|
|
| this.attachEvent(mainDoc.getElementsByClassName("wh:sdver"), "change", (e) => { |
| this.weightData.lbw_sd_version = e.target.value; |
|
|
| const xyzLabel = document.getElementById("wh:xyz_label"); |
| const specialPreset = this.getLbwSpecialPreset(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version); |
| xyzLabel.textContent = specialPreset.XYZ; |
|
|
| this.redrawLbw(); |
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
| const masks = this.getLbwWeightSetting(this.weightData.lbw_lora_type, e.target.value).masks; |
| this.weightData.masks = masks; |
| if (!this.weightData.special) { |
| const lockIcon = document.getElementById("wh:lock"); |
| lockIcon.style.visibility = ""; |
| const isLocked = this.currentLockSet.has(this.weightData.hashCode()); |
| this.updateLockedIcon(isLocked); |
| } |
| }); |
|
|
| this.attachEvent(mainDoc.getElementsByClassName("wh:preset_select"), "change", (e) => { |
| const selectVal = e.target.value; |
| if (!this.weightData.lbw_sd_version) { |
| return; |
| } |
|
|
| if (selectVal !== "") { |
| this.weightData.special = ""; |
| const xyz = document.getElementById("wh:xyz"); |
| xyz.checked = false; |
|
|
| const values = selectVal.split(",").map(v => Math.round(v * 100)); |
| const masks = this.getLbwWeightSetting(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version).masks; |
| let refIdx = 0; |
| for (let idx = 0; idx < masks.length; idx++) { |
| let val = 0; |
| if (masks[idx] === 1) { |
| val = values[refIdx]; |
| refIdx++; |
| } |
| this.weightData.lbw[idx] = val; |
| this.weightElements.lbw[idx].slider.value = val; |
| this.weightElements.lbw[idx].updown.value = val / 100; |
| } |
|
|
| const lockIcon = document.getElementById("wh:lock"); |
| lockIcon.style.visibility = ""; |
|
|
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
| this.updateLockedIcon(isLocked); |
|
|
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
| } |
| }); |
|
|
| this.attachEvent(mainDoc.getElementById("wh:xyz"), "change", (e) => { |
| const lockIcon = document.getElementById("wh:lock"); |
| if (e.target.checked) { |
| this.weightData.special = e.target.value; |
| lockIcon.style.visibility = "hidden"; |
| } else { |
| this.weightData.special = ""; |
| lockIcon.style.visibility = this.weightData.lbw_sd_version ? "" : "hidden"; |
|
|
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
| this.updateLockedIcon(isLocked); |
| } |
|
|
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
| }); |
|
|
| const lbwChangedEvent = () => { |
| this.weightData.special = ""; |
| const xyz = document.getElementById("wh:xyz"); |
| xyz.checked = false; |
|
|
| const lbwValues = this.getLbwWeightData().join(","); |
| const select = this.mainBody.getElementsByClassName("wh:preset_select")[0]; |
| if (lbwValues in this.lbwPresetsValueKeyMap[this.weightData.lbw_lora_type][this.weightData.lbw_sd_version]) { |
| select.value = lbwValues; |
| } else { |
| select.selectedIndex = 0; |
| } |
|
|
| const lockIcon = document.getElementById("wh:lock"); |
| lockIcon.style.visibility = ""; |
|
|
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
| this.updateLockedIcon(isLocked); |
|
|
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
| } |
| this.weightElements.lbw.forEach(lbw => { |
| this.attachEvent(lbw.slider, "input", (e) => { |
| const fVal = parseFloat(e.target.value); |
| const idx = e.target.dataset.index; |
| this.weightData["lbw"][idx] = fVal; |
| lbw.updown.value = Math.round(fVal) / 100; |
| lbwChangedEvent(); |
| }); |
| this.attachEvent(lbw.updown, "input", (e) => { |
| const fVal = Math.round(e.target.value * 100); |
| const idx = e.target.dataset.index; |
| this.weightData["lbw"][idx] = fVal; |
| if (fVal < lbw.slider.min) { |
| lbw.slider.min = fVal; |
| } |
| if (fVal > lbw.slider.max) { |
| lbw.slider.max = fVal; |
| } |
| lbw.slider.value = fVal; |
| lbwChangedEvent(); |
| }); |
| }); |
| } |
|
|
| async loadMetadata(force = false) { |
| const domMetadata = document.getElementById("wh:metadata"); |
| const typeVal = document.getElementById("wh:metadata__alg"); |
| const sdVerVal = document.getElementById("wh:metadata__sdver"); |
| if (force) { |
| domMetadata.classList.remove("error"); |
| } |
| if (force || Object.keys(this.metadata).length == 0) { |
| const startLoading = (elem) => { |
| if (elem.dataset.interval_id == null) { |
| elem.classList.add("loading"); |
| const frames = ["-", "--", "---", "----", "-----", "------", "-------"]; |
| let currentFrame = 0; |
| elem.dataset.interval_id = setInterval(() => { |
| elem.textContent = frames[currentFrame]; |
| currentFrame = (currentFrame + 1) % frames.length; |
| }, 100); |
| } |
| } |
| const stopLoading = (elem) => { |
| if (elem.dataset.interval_id != null) { |
| elem.classList.remove("loading"); |
| clearInterval(elem.dataset.interval_id); |
| } |
| } |
| startLoading(typeVal); |
| startLoading(sdVerVal); |
| const key = encodeURIComponent(this.name); |
| this.metadata = await postAPI(`/whapi/v1/get_metadata?key=${key}`, null) ?? {}; |
| stopLoading(typeVal); |
| stopLoading(sdVerVal); |
| } |
| if (Object.keys(this.metadata).length > 0) { |
| if (this.metadata.sd_version && !this.weightData.lbw_sd_version) { |
| this.weightData.lbw_sd_version = this.metadata.sd_version === "SDXL" ? "SDXL" : "SD"; |
| if (this.currentHistory.length == 1) { |
| this.currentHistory[0].lbw_sd_version = this.weightData.lbw_sd_version; |
| } |
| let selectedRadio = undefined; |
| [...this.mainBody.getElementsByClassName("wh:sdver")].forEach((radio) => { |
| if (radio.value === this.weightData.lbw_sd_version) { |
| radio.checked = true; |
| selectedRadio = radio; |
| } |
| }); |
| if (selectedRadio) { |
| selectedRadio.dispatchEvent(new Event('change', { bubbles: true })); |
| } |
| } |
| typeVal.textContent = this.metadata.algorithm ?? "Unknown"; |
| let sdVersion = this.metadata.sd_version ?? "Unknown"; |
| if (this.metadata.base_model) { |
| sdVersion += `(${this.metadata.base_model})`; |
| } |
| sdVerVal.textContent = sdVersion; |
| } else { |
| metadata.classList.add("error"); |
| typeVal.textContent = "TIMEOUT"; |
| sdVerVal.textContent = "TIMEOUT"; |
| } |
| } |
|
|
| async loadPreviewBindData() { |
| if (Object.keys(this.previewInfo).length == 0) { |
| const key = encodeURIComponent(this.name); |
| this.previewInfo = await postAPI(`/whapi/v1/get_preview_info?key=${key}`, null); |
| } |
|
|
| const preview = {} |
| this.bindData.previewBindData = preview; |
| if (Object.keys(this.previewInfo).length > 0) { |
| preview.hasResponse = true; |
| preview.previewUrl = this.previewInfo.preview_url; |
| preview.hasMetadata = this.previewInfo.has_metadata; |
| preview.modelName = this.previewInfo.model_name; |
| if (typeof extraNetworksRequestMetadata === "function") { |
| preview.definedExtraNetworksRequestMetadata = true; |
| } |
| if (typeof extraNetworksEditUserMetadata === "function") { |
| preview.definedExtraNetworksEditUserMetadata = true; |
| } |
| preview.modelId = this.previewInfo.model_id; |
| preview.description = this.previewInfo.description; |
|
|
| preview.trgWords = this.previewInfo.trigger_words ?? []; |
| preview.negTrgWords = this.previewInfo.negative_trigger_words ?? []; |
| if (preview.trgWords.length > 0 || preview.negTrgWords.length > 0) { |
| preview.hasTriggerWords = true; |
| } |
| preview.height = opts.weight_helper_preview_height; |
| switch (opts.weight_helper_preview_position) { |
| case "Bottom Right": |
| preview.pos = [null, null, 0, this.mainBody.clientWidth + 6]; |
| break; |
| case "Top Left": |
| preview.pos = [0, this.mainBody.clientWidth + 6, null, null]; |
| break; |
| case "Bottom Left": |
| preview.pos = [null, this.mainBody.clientWidth + 6, 0, null]; |
| break; |
| default: |
| preview.pos = [0, null, null, this.mainBody.clientWidth + 6]; |
| break; |
| } |
| } |
| } |
|
|
| buildPreviewDOM() { |
| const parser = new DOMParser(); |
| const previewHtml = WeightHelper.PREVIEW_TEMPLATE({ preview: this.bindData.previewBindData }); |
| const previewDoc = parser.parseFromString(previewHtml, 'text/html'); |
| this.previewBody = previewDoc.body.firstChild; |
|
|
| const preview = this.bindData.previewBindData; |
| this.attachEvent(previewDoc.getElementById("wh:preview__metadata"), "click", (e) => { |
| extraNetworksRequestMetadata(e, 'lora', preview.modelName); |
| }); |
| this.attachEvent(previewDoc.getElementById("wh:preview__edit"), "click", (e) => { |
| extraNetworksEditUserMetadata(e, this.tabId, 'lora', preview.modelName); |
| }); |
| this.attachEvent(previewDoc.getElementById("wh:preview__civitai"), "click", () => { |
| window.open(`https://civitai.com/models/${preview.modelId}`, '_blank'); |
| }); |
| this.attachEvent(previewDoc.getElementById("wh:preview__add-trigger"), "click", (e) => { |
| let promptTextarea = document.querySelector(`#${this.tabId}_prompt textarea`); |
| let negativeTextarea = document.querySelector(`#${this.tabId}_neg_prompt textarea`); |
| if (this.textarea === negativeTextarea) { |
| } else if (this.textarea !== promptTextarea) { |
| promptTextarea = this.textarea; |
| negativeTextarea = null; |
| } |
| const negTrgWords = preview.negTrgWords; |
| const trgWords = preview.trgWords; |
| if (!this.usingExecCommand) { |
| const insert = (wordArray, textarea) => { |
| if (wordArray.length > 0 && textarea) { |
| let words = wordArray.join(", "); |
| if (textarea.value) words = ", " + words; |
| textarea.value += words; |
| } |
| } |
| insert(negTrgWords, negativeTextarea); |
| insert(trgWords, promptTextarea); |
| } else { |
| const insert = (wordArray, textarea) => { |
| if (wordArray.length > 0 && textarea) { |
| let words = wordArray.join(", "); |
| if (textarea.value) words = ", " + words; |
| textarea.focus(); |
| const eolIndex = textarea.value.length; |
| textarea.setSelectionRange(eolIndex, eolIndex); |
| document.execCommand("insertText", false, words); |
| } |
| } |
| withoutTAC(() => { |
| insert(negTrgWords, negativeTextarea); |
| insert(trgWords, promptTextarea); |
| }); |
| } |
| e.target.remove(); |
| }); |
|
|
| const topRow = previewDoc.getElementById("wh:preview__top-row"); |
| const bottomRow = previewDoc.getElementById("wh:preview__bottom-row"); |
| const desc = previewDoc.getElementById("wh:preview__desc"); |
| const open = previewDoc.getElementById("wh:preview__note-open"); |
| const close = previewDoc.getElementById("wh:preview__note-close"); |
| this.attachEvent(open, "click", () => { |
| topRow.style.visibility = "hidden"; |
| bottomRow.style.visibility = "hidden"; |
| desc.style.visibility = "visible"; |
| close.style.visibility = "visible"; |
| }); |
| this.attachEvent(close, "click", () => { |
| topRow.style.visibility = ""; |
| bottomRow.style.visibility = ""; |
| desc.style.visibility = ""; |
| close.style.visibility = ""; |
| }); |
| } |
|
|
| redrawLbw() { |
| const parser = new DOMParser(); |
|
|
| const presetBindDatas = []; |
| this.bindData.lbwPresetBindDatas = presetBindDatas; |
|
|
| const lbwSdVersion = this.weightData.lbw_sd_version; |
| if (lbwSdVersion) { |
| const lbwLoraType = this.weightData.lbw_lora_type; |
| if (Object.keys(this.getLbwPresets(lbwLoraType, lbwSdVersion)).length) { |
| const lbwWeightData = this.getLbwWeightData(); |
| const strLbwWeightData = Array.isArray(lbwWeightData) ? lbwWeightData.join(",") : lbwWeightData; |
| const lbwPresets = this.getLbwPresets(lbwLoraType, lbwSdVersion); |
| for (const key of Object.keys(lbwPresets)) { |
| const preset = {} |
| preset.name = key; |
| preset.value = lbwPresets[key]; |
| if (preset.value === strLbwWeightData) { |
| preset.selected = true; |
| } |
| presetBindDatas.push(preset); |
| } |
| } |
| } |
|
|
| const presetSelect = this.mainBody.getElementsByClassName("wh:preset_select")[0]; |
| const presetHtml = WeightHelper.PRESETS_TEMPLATE({ presets: this.bindData.lbwPresetBindDatas }); |
| const previewDoc = parser.parseFromString(presetHtml, 'text/html'); |
| while (presetSelect.firstChild) { |
| presetSelect.firstChild.remove(); |
| } |
| const presetFragment = document.createDocumentFragment(); |
| [...previewDoc.body.children].forEach(element => { |
| presetFragment.appendChild(element); |
| }); |
| presetSelect.appendChild(presetFragment); |
|
|
| const lbwBlockBindDatas = []; |
| this.bindData.lbwBlockBindDatas = lbwBlockBindDatas; |
|
|
| const lbwWeightSetting = this.getLbwWeightSetting(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version); |
| for (const blockPoint of lbwWeightSetting.block_points) { |
| lbwBlockBindDatas.push({label: blockPoint}); |
| } |
|
|
| const lbwblocks = this.mainBody.getElementsByClassName("wh:lbwblocks")[0]; |
| const lbwblocksHtml = WeightHelper.LBWBLOCKS_TEMPLATE({ lbwBlocks: this.bindData.lbwBlockBindDatas }); |
| const lbwblocksDoc = parser.parseFromString(lbwblocksHtml, 'text/html'); |
| while (lbwblocks.firstChild) { |
| lbwblocks.firstChild.remove(); |
| } |
| const lbwblockFragment = document.createDocumentFragment(); |
| [...lbwblocksDoc.body.children].forEach(element => { |
| lbwblockFragment.appendChild(element); |
| }); |
|
|
| const labelMap = {}; |
| for (let idx = 0; idx < WEIGHT_SETTINGS.lbw.labels.length; idx++) { |
| labelMap[WEIGHT_SETTINGS.lbw.labels[idx]] = idx; |
| } |
| for (const blockPoint of lbwWeightSetting.block_points) { |
| const lbwblock = lbwblockFragment.getElementById(`wh:lbwblock_${blockPoint.toLowerCase()}`); |
| const points = blockPoint.split("-"); |
| let pointStart = labelMap[points[0]]; |
| let pointEnd = pointStart; |
| if (points.length > 1) { |
| pointEnd = labelMap[points[1]]; |
| } |
| for (let idx = pointStart; idx <= pointEnd; idx++) { |
| if (lbwWeightSetting.masks[idx] == 1) { |
| lbwblock.appendChild(this.lbwDOMs[idx]); |
| } |
| } |
| } |
| lbwblocks.appendChild(lbwblockFragment); |
| } |
|
|
| applyFromHistory() { |
| document.getElementById("wh:page__label").textContent = `${this.historyIndex + 1}/${this.currentHistory.length}`; |
| const oldSdVersion = this.weightData.lbw_sd_version; |
| this.weightData = this.currentHistory[this.historyIndex].clone(); |
|
|
| const lockIcon = document.getElementById("wh:lock"); |
| if (this.weightData.isSpecial() || !this.weightData.lbw_sd_version) { |
| lockIcon.style.visibility = "hidden"; |
| } else { |
| lockIcon.style.visibility = ""; |
| } |
|
|
| Object.entries(this.weightData).map(entry => { |
| const group = entry[0]; |
| const vals = entry[1]; |
| if (group === "stop" && vals[0] == null) { |
| vals[0] = WEIGHT_SETTINGS[group].default; |
| } |
| if (Array.isArray(vals) && group in this.weightElements) { |
| for (const idx in vals) { |
| let fVal = vals[idx]; |
| let isExtraType = false; |
| let show = false; |
| if (["unet", "dyn", "start", "stop"].includes(group)) { |
| isExtraType = true; |
| if (this.weightElements[group][0].check) { |
| const useCheck = this.weightData[`use_${group}`]; |
| this.weightElements[group][0].check.checked = useCheck; |
| show = useCheck; |
| } |
| if (["start", "stop"].includes(group)) { |
| if (fVal != null && fVal != WEIGHT_SETTINGS[group].default) { |
| show = true; |
| } |
| } |
| } |
| if (!this.openedExtraOption && isExtraType) { |
| const parent = document.getElementById(`wh:weight_${group}`); |
| parent.style.display = show ? "flex" : "none"; |
| } |
| if (fVal == null) { |
| fVal = 0; |
| } |
| this.weightElements[group][idx].slider.value = fVal; |
| this.weightElements[group][idx].updown.value = fVal / 100; |
| } |
| } |
| }); |
|
|
| if (oldSdVersion !== this.weightData.lbw_sd_version) { |
| const loraTypeSelect = document.getElementById("wh:lora_type"); |
| loraTypeSelect.value = this.weightData.lbw_lora_type; |
| [...this.mainBody.getElementsByClassName("wh:sdver")].forEach((radio) => { |
| radio.checked = radio.value === this.weightData.lbw_sd_version; |
| }); |
| this.redrawLbw(); |
| } else { |
| const presetSelect = this.mainBody.getElementsByClassName("wh:preset_select")[0]; |
| if (this.weightData.special) { |
| presetSelect.value = this.weightData.special; |
| } else { |
| const lbwValues = this.getLbwWeightData().join(","); |
| const presetValues = this.lbwPresetsValueKeyMap[this.weightData.lbw_lora_type][this.weightData.lbw_sd_version]; |
| try { |
| if (lbwValues in presetValues) { |
| presetSelect.value = lbwValues; |
| } else { |
| presetSelect.selectedIndex = 0; |
| } |
| } catch (error) { |
| console.error(error, presetValues, lbwValues); |
| } |
| } |
| } |
| const lbwBlocks = this.mainBody.getElementsByClassName("wh:lbwblocks")[0]; |
| lbwBlocks.style.display = this.weightData.lbw_sd_version ? "flex" : "none"; |
|
|
| if (!this.usingExecCommand) { |
| const updatedText = this.makeUpdatedText(); |
| this.update(updatedText); |
| } |
|
|
| const weightDataHash = this.weightData.hashCode(); |
| const isLocked = this.currentLockSet.has(weightDataHash); |
| this.updateLockedIcon(isLocked); |
| } |
|
|
| getLbwWeightData() { |
| if (this.weightData.isSpecial()) { |
| return this.weightData.special; |
| } |
| const masks = this.getLbwWeightSetting(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version).masks; |
| return this.weightData.lbw.filter((_, i) => masks[i] === 1).map(v => v / 100); |
| } |
|
|
| getLbwPresets(lbwLoraType, lbwSdVersion) { |
| if (lbwSdVersion) { |
| if (lbwLoraType in this.lbwPresetsMap && lbwSdVersion in this.lbwPresetsMap[lbwLoraType]) { |
| return this.lbwPresetsMap[lbwLoraType][lbwSdVersion]; |
| } |
| } |
| return {}; |
| } |
|
|
| getLbwWeightSetting(lbwLoraType, lbwSdVersion) { |
| if (lbwSdVersion) { |
| if (lbwLoraType in LBW_WEIGHT_SETTINGS && lbwSdVersion in LBW_WEIGHT_SETTINGS[lbwLoraType]) { |
| return LBW_WEIGHT_SETTINGS[lbwLoraType][lbwSdVersion]; |
| } |
| } |
| return LBW_WEIGHT_SETTINGS.unknown; |
| } |
|
|
| getLbwSpecialPreset(loraType, sdVersion) { |
| if (sdVersion) { |
| if (loraType in SPECIAL_PRESETS && sdVersion in SPECIAL_PRESETS[loraType]) { |
| return SPECIAL_PRESETS[loraType][sdVersion]; |
| } |
| } |
| return SPECIAL_PRESETS.unknown; |
| } |
|
|
| updateLockedIcon(isLocked) { |
| const flag = isLocked ? "like" : "unlike"; |
| const lockIcon = document.getElementById("wh:lock"); |
| lockIcon.className = `lock ${flag}`; |
| } |
|
|
| makeUpdatedText() { |
| let updatedText = `<${this.tagName}:${this.name}`; |
| const optionalTypes = ["te", "unet", "dyn"]; |
| let refIdx = 0; |
| for (let idx = 0; idx < optionalTypes.length; idx++) { |
| const keyType = optionalTypes[idx]; |
| if (keyType in this.weightData) { |
| const defVal = WEIGHT_SETTINGS[keyType].default; |
| const val = this.weightData[keyType]; |
| let output = false; |
| if (keyType === "te") { |
| output = true; |
| } else if (this.weightElements[keyType][0].check) { |
| if (this.weightElements[keyType][0].check.checked) { |
| output = true; |
| } |
| } else if (val != defVal) { |
| output = true; |
| } |
| if (output) { |
| let rateValue = val / 100; |
| if (idx === refIdx) { |
| updatedText += `:${rateValue}`; |
| } else { |
| updatedText += `:${keyType}=${rateValue}`; |
| } |
| refIdx++; |
| } |
| } |
| } |
| const startDefVal = WEIGHT_SETTINGS.start.default; |
| const startVal = this.weightData.start; |
| const stopDefVal = WEIGHT_SETTINGS.stop.default; |
| const stopVal = this.weightData.stop; |
| if (startVal != startDefVal && stopVal != stopDefVal) { |
| updatedText += `:step=${startVal / 100}-${stopVal / 100}`; |
| } else if (startVal != startDefVal) { |
| updatedText += `:start=${startVal / 100}`; |
| } else if (stopVal != stopDefVal) { |
| updatedText += `:stop=${stopVal / 100}`; |
| } |
|
|
| let lbwWeights = []; |
| const masks = this.getLbwWeightSetting(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version).masks; |
| for (let idx = 0; idx < masks.length; idx++) { |
| if (masks[idx]) { |
| lbwWeights.push(this.weightData.lbw[idx]); |
| } |
| } |
| if (!this.weightData.special) { |
| if (!lbwWeights.every(val => val === WEIGHT_SETTINGS.lbw.default)) { |
| let rateValues = lbwWeights.map(v => v / 100).join(","); |
| const lbwValues = this.getLbwWeightData().join(","); |
|
|
| let loraType = this.weightData.lbw_lora_type; |
| let sdVersion = this.weightData.lbw_sd_version; |
| if (loraType && sdVersion) { |
| if (lbwValues in this.lbwPresetsValueKeyMap[loraType][sdVersion]) { |
| rateValues = this.lbwPresetsValueKeyMap[loraType][sdVersion][lbwValues]; |
| } |
| } |
| updatedText += `:lbw=${rateValues}`; |
| } |
| } else { |
| updatedText += `:lbw=${this.weightData.special}`; |
| } |
| if (this.weightData.lbwe.length > 0) { |
| updatedText += `:lbwe=${this.weightData.lbwe[0]}`; |
| } |
| updatedText += ">"; |
| return updatedText; |
| } |
|
|
| update(updatedText) { |
| this.textarea.value = this.textarea.value.substring(0, this.lastSelectionStart) + updatedText + this.textarea.value.substring(this.lastSelectionEnd); |
| this.lastSelectionEnd = this.lastSelectionStart + updatedText.length; |
| } |
|
|
| updateWithExecCommand(updatedText) { |
| withoutTAC(() => { |
| this.textarea.focus(); |
| this.textarea.setSelectionRange(this.lastSelectionStart, this.lastSelectionEnd); |
| document.execCommand("insertText", false, updatedText); |
| }); |
| } |
|
|
| save() { |
| const loraInfo = weight_helper_data[this.nameHash].lora_info; |
| loraInfo.metadata = this.metadata; |
| loraInfo.selected_lora_type.lbw_lora_type = this.weightData.lbw_lora_type; |
| loraInfo.selected_lora_type.lbw_sd_version = this.weightData.lbw_sd_version; |
|
|
| const lbwDefault = WEIGHT_SETTINGS.lbw.default; |
| const masks = this.getLbwWeightSetting(this.weightData.lbw_lora_type, this.weightData.lbw_sd_version).masks; |
| for (let idx = 0; idx < masks.length; idx++) { |
| if (masks[idx] !== 1) { |
| this.weightData.lbw[idx] = lbwDefault; |
| } |
| } |
|
|
| if (this.weightData.lbw_sd_version) { |
| const historyLen = this.currentHistory.length; |
| let lastWeightData = this.currentHistory.at(-1); |
| let historyChanged = false; |
| if (this.historyIndex == historyLen - 1) { |
| historyChanged = !this.weightData.equals(lastWeightData); |
| if (historyChanged) { |
| this.currentHistory.push(this.weightData); |
| } |
| } else { |
| this.currentHistory.splice(this.historyIndex, 1); |
| this.currentHistory.push(this.weightData); |
| } |
| if (this.weightData.stop[0] == WEIGHT_SETTINGS.stop.default) { |
| this.weightData.stop[0] = null; |
| } |
| weight_helper_data[this.nameHash].lock = this.currentLockSet.getAll(); |
| } |
| weight_helper_data.VERSION = VERSION; |
| localStorage.setItem("weight_helper_data", JSON.stringify(weight_helper_data)); |
| } |
|
|
| attachEvent(doms, eventName, func) { |
| if (doms == null) return; |
| if (doms instanceof HTMLCollection) { |
| if (doms.length === 0) return; |
| } else { |
| doms = [doms]; |
| } |
| for (const dom of doms) { |
| dom.addEventListener(eventName, func); |
| this.releaseFunctions.push(() => dom.removeEventListener(eventName, func)); |
| } |
| } |
|
|
| show(top, left) { |
| this.mainBody.style.top = top + 'px'; |
| this.mainBody.style.left = left + 'px'; |
| document.body.appendChild(this.mainBody); |
|
|
| const diffBottom = window.innerHeight - this.mainBody.getBoundingClientRect().bottom; |
| if (diffBottom < 0) { |
| this.mainBody.style.top = (top + diffBottom) + 'px'; |
| const diffTop = this.mainBody.getBoundingClientRect().top; |
| if (diffTop < 0) { |
| this.mainBody.style.top = window.scrollY + 'px'; |
| } |
| } |
| this.attachEvent(document.body, "click", this.close); |
| this.attachEvent(document.body, "keyup", this.cancel); |
| last_instance = this; |
|
|
| this.loadMetadata(); |
|
|
| if (opts.weight_helper_show_preview) { |
| this.loadPreviewBindData().then(() => { |
| this.buildPreviewDOM(); |
| this.mainBody.prepend(this.previewBody); |
| }); |
| } |
| } |
|
|
| close = (e) => { |
| if (!this.mainBody) return; |
| if (e) { |
| if (this.mainBody.contains(e.target)) return; |
| if (e.target.id === `${this.tabId}_token_button`) return; |
| if (e.target.id === `${this.tabId}_lora_edit_user_metadata_button`) return; |
| if (e.target.className === "global-popup-close") return; |
| if (e.target.id.indexOf("_interrupt") > 0) { |
| this.finally(); |
| return; |
| } |
| } |
|
|
| const updatedText = this.makeUpdatedText(); |
| const changed = this.lastText != updatedText; |
| if (changed) { |
| if (!this.usingExecCommand) { |
| this.textarea.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true })); |
| } else { |
| this.updateWithExecCommand(updatedText); |
| } |
| } |
| this.save(); |
| this.finally(); |
| }; |
|
|
| cancel = (e) => { |
| if (e.key === 'Escape') { |
| if (!this.usingExecCommand) { |
| this.update(this.lastText); |
| } |
| this.finally(); |
| } |
| }; |
|
|
| finally() { |
| weight_helper_preview_info[this.nameHash] = this.previewInfo; |
|
|
| last_instance = undefined; |
| this.releaseFunctions.forEach((f) => f()); |
| this.mainBody.remove(); |
| } |
| } |
|
|
| async function postAPI(url, body) { |
| let response = await fetch(url, { method: "POST", body: body }); |
| if (response.status != 200) { |
| console.error(`Error posting to API endpoint "${url}": ` + response.status, response.statusText); |
| return null; |
| } |
| return await response.json(); |
| } |
|
|
| function withoutTAC(func) { |
| let tacActiveInOrg = undefined; |
| const tacEnabled = typeof TAC_CFG !== 'undefined' && TAC_CFG; |
| try { |
| if (tacEnabled) { |
| tacActiveInOrg = TAC_CFG.activeIn.global |
| TAC_CFG.activeIn.global = false; |
| } |
| func(); |
| } finally { |
| if (tacEnabled) { |
| TAC_CFG.activeIn.global = tacActiveInOrg; |
| } |
| } |
| } |
|
|
| function strHashCode(s) { |
| let hash = 0; |
| if (!s) return hash; |
| for (let i = 0; i < s.length; i++) { |
| const char = s.charCodeAt(i); |
| hash = hash ^ char; |
| hash = (hash << 5) - hash; |
| } |
| return hash & 0xffffffff; |
| } |
|
|
| async function onPageLoaded() { |
| let tab = null; |
| while (!tab) { |
| tab = gradioApp().getElementById("tab_txt2img"); |
| if (!tab) { |
| await new Promise((resolve) => setTimeout(resolve, 200)); |
| } |
| } |
| return tab; |
| } |
|
|
| document.addEventListener('DOMContentLoaded', function() { |
| const dataTemp = JSON.parse(localStorage.getItem("weight_helper_data")) ?? {}; |
|
|
| const oldData = JSON.parse(localStorage.getItem("weight_helper")); |
| const oldDataType = JSON.parse(localStorage.getItem("weight_helper_type")); |
| try { |
| if (oldData && Object.keys(oldData).length > 0) { |
| Object.entries(oldData).forEach(kv => { |
| const key = kv[0]; |
| const datas = kv[1]; |
|
|
| delete dataTemp[key] |
| const sdType = oldDataType[key]; |
|
|
| let lbwSdVersion = sdType == "sdxl" ? "SDXL" : "SD"; |
| datas.forEach(data => { |
| delete data.VERSION; |
| delete data.DATE; |
| if (data.unet[0] != null) { |
| data.use_unet = true; |
| } else { |
| data.use_unet = false; |
| data.unet[0] = 0; |
| } |
| if (data.dyn[0] != null) { |
| data.use_dyn = true; |
| } else { |
| data.use_dyn = false; |
| data.dyn[0] = 0; |
| } |
| data.stop = [null]; |
| data.special = ""; |
| data.lbw_lora_type = "lora"; |
| data.lbw_sd_version = lbwSdVersion; |
| }); |
| dataTemp[key] = { lock: [] } |
| dataTemp[key].history = datas; |
| dataTemp[key].lora_info = { |
| "selected_lora_type": { |
| "lbw_lora_type": "lora", |
| "lbw_sd_version": lbwSdVersion |
| } |
| } |
| }); |
| } |
| localStorage.removeItem("weight_helper"); |
| localStorage.removeItem("weight_helper_type"); |
| } catch (error) { |
| console.error("An error occurred:", error); |
| } |
|
|
| weight_helper_data = dataTemp; |
| Object.entries(dataTemp).forEach(kv => { |
| const key = kv[0]; |
| if (key === "VERSION") { |
| return; |
| } |
| const val = kv[1]; |
| if (val.lock) { |
| weight_helper_data[key].lock = val.lock.map(v => new WeightData(v)); |
| } |
| if (val.history) { |
| weight_helper_data[key].history = val.history.map(v => new WeightData(v)); |
| } |
| }); |
|
|
| onPageLoaded().then(() => { |
| let textColor = getComputedStyle(document.documentElement).getPropertyValue('--body-text-color').trim(); |
| let textColorRgb = textColor.slice(1).match(/.{1,2}/g).map(hex => parseInt(hex, 16)); |
| let textColorRgba = [...textColorRgb, 0.3]; |
| document.documentElement.style.setProperty('--weight-helper-shadow', `rgba(${textColorRgba.join(",")})`); |
|
|
| if (!gradioApp().getElementById("lbw_ratiospreset")) { |
| return; |
| } |
|
|
| const genButtons = gradioApp().querySelectorAll("button:is([id*='_generate'])"); |
| genButtons.forEach((genBtn) => { |
| genBtn.addEventListener('click', () => { |
| if (last_instance) { |
| last_instance.close(); |
| } |
| }, true); |
| }); |
| const textareas = gradioApp().querySelectorAll("*:is([id*='_toprow'] [id*='_prompt'], .prompt) textarea"); |
| textareas.forEach((textarea) => { |
| WeightHelper.attach(textarea); |
| }); |
| }); |
| }); |
| })(); |
|
|
