-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dfc7fb9
commit 5862833
Showing
1 changed file
with
146 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,158 +1,161 @@ | ||
| const POLLING_TIMEOUT = 500; | ||
| (() => { | ||
| const POLLING_TIMEOUT = 500; | ||
|
|
||
| function uuidv4() { | ||
| return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)); | ||
| } | ||
|
|
||
| const WEBUI_CLIENT_ID = uuidv4(); | ||
| function uuidv4() { | ||
| return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)); | ||
| } | ||
|
|
||
| const WEBUI_CLIENT_ID = uuidv4(); | ||
|
|
||
| function changeDisplayedWorkflowType(targetWorkflowType) { | ||
| const targetIFrameElement = getWorkflowTypeIFrame(targetWorkflowType); | ||
| const currentIFrameElement = targetIFrameElement.parentElement.querySelector(".comfyui-workflow-type-visible"); | ||
| currentIFrameElement.classList.remove("comfyui-workflow-type-visible"); | ||
| targetIFrameElement.classList.add("comfyui-workflow-type-visible"); | ||
| } | ||
|
|
||
| document.addEventListener("DOMContentLoaded", () => { | ||
| onComfyuiTabLoaded(clearEnabledDisplayNames); | ||
| onComfyuiTabLoaded(setupComfyuiTabEvents); | ||
| }); | ||
|
|
||
| function changeDisplayedWorkflowType(targetWorkflowType) { | ||
| const targetIFrameElement = getWorkflowTypeIFrame(targetWorkflowType); | ||
| const currentIFrameElement = targetIFrameElement.parentElement.querySelector(".comfyui-workflow-type-visible"); | ||
| currentIFrameElement.classList.remove("comfyui-workflow-type-visible"); | ||
| targetIFrameElement.classList.add("comfyui-workflow-type-visible"); | ||
| } | ||
| function onComfyuiTabLoaded(callback) { | ||
| if (getClearEnabledDisplayNamesButtons().some(e => e === null) || | ||
| getWorkflowTypeIds() === null || | ||
| getComfyuiContainer() === null || | ||
| getTabNav() === null || | ||
| getWebuiClientIdTextArea() === null | ||
| ) { | ||
| // webui not yet ready, try again in a bit | ||
| setTimeout(() => { onComfyuiTabLoaded(callback); }, POLLING_TIMEOUT); | ||
| return; | ||
| } | ||
|
|
||
| document.addEventListener("DOMContentLoaded", () => { | ||
| onComfyuiTabLoaded(clearEnabledDisplayNames); | ||
| onComfyuiTabLoaded(setupComfyuiTabEvents); | ||
| }); | ||
| callback(); | ||
| } | ||
|
|
||
| function onComfyuiTabLoaded(callback) { | ||
| if (getClearEnabledDisplayNamesButtons().some(e => e === null) || | ||
| getWorkflowTypeIds() === null || | ||
| getComfyuiContainer() === null || | ||
| getTabNav() === null || | ||
| getWebuiClientIdTextArea() === null | ||
| ) { | ||
| // webui not yet ready, try again in a bit | ||
| setTimeout(() => { onComfyuiTabLoaded(callback); }, POLLING_TIMEOUT); | ||
| return; | ||
| function clearEnabledDisplayNames() { | ||
| for (const clearButton of getClearEnabledDisplayNamesButtons()) { | ||
| clearButton.click(); | ||
| } | ||
| } | ||
|
|
||
| callback(); | ||
| } | ||
| function setupComfyuiTabEvents() { | ||
| setupWebuiClientId(); | ||
| setupResizeTabEvent(); | ||
| setupToggleFooterEvent(); | ||
|
|
||
| function clearEnabledDisplayNames() { | ||
| for (const clearButton of getClearEnabledDisplayNamesButtons()) { | ||
| clearButton.click(); | ||
| updateComfyuiTabHeight(); | ||
|
|
||
| getWorkflowTypeIds().forEach(id => setupIFrame(id)); | ||
| } | ||
| } | ||
|
|
||
| function setupComfyuiTabEvents() { | ||
| setupWebuiClientId(); | ||
| setupResizeTabEvent(); | ||
| setupToggleFooterEvent(); | ||
| function reloadComfyuiIFrames() { | ||
| getWorkflowTypeIds().forEach(id => { | ||
| const comfyuiFrame = getWorkflowTypeIFrame(id); | ||
| reloadFrameElement(comfyuiFrame); | ||
| }); | ||
| } | ||
|
|
||
| updateComfyuiTabHeight(); | ||
| function setupWebuiClientId() { | ||
| const textArea = getWebuiClientIdTextArea(); | ||
| textArea.value = WEBUI_CLIENT_ID; | ||
| textArea.dispatchEvent(new Event('input')); | ||
| } | ||
|
|
||
| getWorkflowTypeIds().forEach(id => setupIFrame(id)); | ||
| } | ||
| function setupResizeTabEvent() { | ||
| window.addEventListener("resize", updateComfyuiTabHeight); | ||
| } | ||
|
|
||
| function reloadComfyuiIFrames() { | ||
| getWorkflowTypeIds().forEach(id => { | ||
| const comfyuiFrame = getWorkflowTypeIFrame(id); | ||
| reloadFrameElement(comfyuiFrame); | ||
| }); | ||
| } | ||
|
|
||
| function setupWebuiClientId() { | ||
| const textArea = getWebuiClientIdTextArea(); | ||
| textArea.value = WEBUI_CLIENT_ID; | ||
| textArea.dispatchEvent(new Event('input')); | ||
| } | ||
|
|
||
| function setupResizeTabEvent() { | ||
| window.addEventListener("resize", updateComfyuiTabHeight); | ||
| } | ||
|
|
||
| function setupToggleFooterEvent() { | ||
| new MutationObserver((mutationsList) => { | ||
| for (const mutation of mutationsList) { | ||
| if (mutation.type === 'attributes' && mutation.attributeName === 'style') { | ||
| updateFooterStyle(); | ||
| function setupToggleFooterEvent() { | ||
| new MutationObserver((mutationsList) => { | ||
| for (const mutation of mutationsList) { | ||
| if (mutation.type === 'attributes' && mutation.attributeName === 'style') { | ||
| updateFooterStyle(); | ||
| } | ||
| } | ||
| }) | ||
| .observe(getComfyuiTab(), { attributes: true }); | ||
| } | ||
|
|
||
| function updateComfyuiTabHeight() { | ||
| const container = getComfyuiContainer(); | ||
| const tabNavBottom = getTabNav().getBoundingClientRect().bottom; | ||
| container.style.height = `calc(100% - ${tabNavBottom}px)`; | ||
| } | ||
|
|
||
| function updateFooterStyle() { | ||
| const tabDisplay = getComfyuiTab().style.display; | ||
| const footer = getFooter(); | ||
|
|
||
| if(footer === null) return; | ||
| if(tabDisplay === 'block') { | ||
| footer.classList.add('comfyui-remove-display'); | ||
| } | ||
| else { | ||
| footer.classList.remove('comfyui-remove-display'); | ||
| } | ||
| }) | ||
| .observe(getComfyuiTab(), { attributes: true }); | ||
| } | ||
|
|
||
| function updateComfyuiTabHeight() { | ||
| const container = getComfyuiContainer(); | ||
| const tabNavBottom = getTabNav().getBoundingClientRect().bottom; | ||
| container.style.height = `calc(100% - ${tabNavBottom}px)`; | ||
| } | ||
|
|
||
| function updateFooterStyle() { | ||
| const tabDisplay = getComfyuiTab().style.display; | ||
| const footer = getFooter(); | ||
|
|
||
| if(footer === null) return; | ||
| if(tabDisplay === 'block') { | ||
| footer.classList.add('comfyui-remove-display'); | ||
| } | ||
| else { | ||
| footer.classList.remove('comfyui-remove-display'); | ||
| } | ||
| } | ||
|
|
||
| function getClearEnabledDisplayNamesButtons() { | ||
| return [ | ||
| document.getElementById("script_txt2img_comfyui_clear_enabled_display_names") ?? document.getElementById("script_txt2txt_comfyui_clear_enabled_display_names") ?? null, | ||
| document.getElementById("script_img2img_comfyui_clear_enabled_display_names") ?? null, | ||
| ]; | ||
| } | ||
|
|
||
| function getTabNav() { | ||
| const tabs = document.getElementById("tabs") ?? null; | ||
| return tabs ? tabs.querySelector(".tab-nav") : null; | ||
| } | ||
|
|
||
| function getComfyuiTab() { | ||
| return document.getElementById("tab_comfyui_webui_root") ?? null; | ||
| } | ||
|
|
||
| function getComfyuiContainer() { | ||
| return document.getElementById("comfyui_webui_container") ?? null; | ||
| } | ||
|
|
||
| function getWebuiClientIdTextArea() { | ||
| return document.querySelector("#comfyui_webui_client_id textarea") ?? null; | ||
| } | ||
|
|
||
| function getFooter() { | ||
| return document.querySelector('#footer') ?? null; | ||
| } | ||
|
|
||
| function getWorkflowTypeIFrame(workflowTypeId) { | ||
| return document.querySelector(`[workflow_type_id="${workflowTypeId}"]`); | ||
| } | ||
|
|
||
| function getWorkflowTypeIds() { | ||
| return getExtensionDynamicProperty('workflow_type_ids'); | ||
| } | ||
|
|
||
| function getExtensionDynamicProperty(key) { | ||
| return JSON.parse(document.querySelector(`[sd_webui_comfyui_key="${key}"]`)?.innerText ?? "null"); | ||
| } | ||
|
|
||
| function reloadFrameElement(iframeElement) { | ||
| iframeElement.src += ""; | ||
| } | ||
|
|
||
| function setupIFrame(workflowTypeId) { | ||
| let messageToReceive = workflowTypeId; | ||
|
|
||
| const iframeSearchParams = new URLSearchParams(); | ||
| iframeSearchParams.set("workflowTypeId", workflowTypeId); | ||
| iframeSearchParams.set("webuiClientId", WEBUI_CLIENT_ID); | ||
| const iframe = getWorkflowTypeIFrame(workflowTypeId); | ||
| const base_src = iframe.getAttribute("base_src"); | ||
| const iframe_src = base_src + "?" + iframeSearchParams.toString(); | ||
| if (iframe.src !== iframe_src) { | ||
| iframe.src = iframe_src; | ||
| } | ||
| else { | ||
| reloadFrameElement(iframe); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function getClearEnabledDisplayNamesButtons() { | ||
| return [ | ||
| document.getElementById("script_txt2img_comfyui_clear_enabled_display_names") ?? document.getElementById("script_txt2txt_comfyui_clear_enabled_display_names") ?? null, | ||
| document.getElementById("script_img2img_comfyui_clear_enabled_display_names") ?? null, | ||
| ]; | ||
| } | ||
|
|
||
| function getTabNav() { | ||
| const tabs = document.getElementById("tabs") ?? null; | ||
| return tabs ? tabs.querySelector(".tab-nav") : null; | ||
| } | ||
|
|
||
| function getComfyuiTab() { | ||
| return document.getElementById("tab_comfyui_webui_root") ?? null; | ||
| } | ||
|
|
||
| function getComfyuiContainer() { | ||
| return document.getElementById("comfyui_webui_container") ?? null; | ||
| } | ||
|
|
||
| function getWebuiClientIdTextArea() { | ||
| return document.querySelector("#comfyui_webui_client_id textarea") ?? null; | ||
| } | ||
|
|
||
| function getFooter() { | ||
| return document.querySelector('#footer') ?? null; | ||
| } | ||
|
|
||
| function getWorkflowTypeIFrame(workflowTypeId) { | ||
| return document.querySelector(`[workflow_type_id="${workflowTypeId}"]`); | ||
| } | ||
|
|
||
| function getWorkflowTypeIds() { | ||
| return getExtensionDynamicProperty('workflow_type_ids'); | ||
| } | ||
|
|
||
| function getExtensionDynamicProperty(key) { | ||
| return JSON.parse(document.querySelector(`[sd_webui_comfyui_key="${key}"]`)?.innerText ?? "null"); | ||
| } | ||
|
|
||
| function reloadFrameElement(iframeElement) { | ||
| iframeElement.src += ""; | ||
| } | ||
|
|
||
| function setupIFrame(workflowTypeId) { | ||
| let messageToReceive = workflowTypeId; | ||
|
|
||
| const iframeSearchParams = new URLSearchParams(); | ||
| iframeSearchParams.set("workflowTypeId", workflowTypeId); | ||
| iframeSearchParams.set("webuiClientId", WEBUI_CLIENT_ID); | ||
| const iframe = getWorkflowTypeIFrame(workflowTypeId); | ||
| const base_src = iframe.getAttribute("base_src"); | ||
| const iframe_src = base_src + "?" + iframeSearchParams.toString(); | ||
| if (iframe.src !== iframe_src) { | ||
| iframe.src =iframe_src; | ||
| } | ||
| else { | ||
| reloadFrameElement(iframe); | ||
| } | ||
| } | ||
| })(); |