diff --git a/README.md b/README.md index db843dd..793e7b2 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ APP-JSON: > 暂时支持8种节点作为界面上的输入节点:Load Image、CLIPTextEncode、PromptSlide、TextInput_、Color、FloatSlider、IntNumber、CheckpointLoaderSimple、LoraLoader -> 输出节点:PreviewImage 、SaveImage、ShowTextForGPT、VHS_VideoCombine +> 输出节点:PreviewImage 、SaveImage、ShowTextForGPT、VHS_VideoCombine、PromptImage > seed统一输入控件,支持:SamplerCustom、KSampler diff --git a/data/extension-node-map.json b/data/extension-node-map.json index 0ee1368..93f57cb 100644 --- a/data/extension-node-map.json +++ b/data/extension-node-map.json @@ -4767,6 +4767,7 @@ "FloatSlider", "ResizeImage", "NoiseImage", + "PromptImage", "AreaToMask", "CLIPSeg_", "CharacterInText", diff --git a/web/index.html b/web/index.html index 6c4d752..51310b5 100644 --- a/web/index.html +++ b/web/index.html @@ -343,6 +343,31 @@ width: 100%; display: none; } + + + /* 图片的字幕 */ + .pswp__custom-caption { + background: rgb(20 27 70); + font-size: 16px; + color: #fff; + width: calc(100% - 32px); + max-width: 400px; + padding: 2px 8px; + border-radius: 4px; + position: absolute; + left: 50%; + bottom: 16px; + transform: translateX(-50%); + } + + .pswp__custom-caption a { + color: #fff; + text-decoration: underline; + } + + .hidden-caption-content { + display: none; + } @@ -541,7 +566,7 @@ }, tabsIds: [...Object.values(TABS)], // or ['Adjust', 'Annotate', 'Watermark'] defaultTabId: TABS.WATERMARK, // or 'Annotate' - defaultToolId: TOOLS.WATERMARK, // or 'Text' + defaultToolId: TOOLS.WATERMARK, // or 'Text' closeAfterSave: true }; @@ -558,7 +583,7 @@ filerobotImageEditor.render({ onSave: (editedImageObject, designState) => { - console.log('saved', designState) + console.log('saved', designState) //adjustments update() }, @@ -1801,6 +1826,7 @@ p.className = 'prompt_image' p.innerText = prompt; a.appendChild(p) + img.alt=prompt } // imgDiv.parentElement.appendChild(a); @@ -2108,6 +2134,36 @@ children: 'a', pswpModule: () => import('/extensions/comfyui-mixlab-nodes/lib/photoswipe.esm.min.js') }); + lightbox.on('uiRegister', function () { + lightbox.pswp.ui.registerElement({ + name: 'custom-caption', + order: 9, + isButton: false, + appendTo: 'root', + html: 'Caption text', + onInit: (el, pswp) => { + lightbox.pswp.on('change', () => { + const currSlideElement = lightbox.pswp.currSlide.data.element + let captionHTML = '' + if (currSlideElement) { + const hiddenCaption = currSlideElement.querySelector( + '.hidden-caption-content' + ) + if (hiddenCaption) { + // get caption from element with class hidden-caption-content + captionHTML = hiddenCaption.innerHTML + } else { + // get caption from alt attribute + captionHTML = currSlideElement + .querySelector('img') + .getAttribute('alt') + } + } + el.innerHTML = captionHTML || '' + }) + } + }) + }) lightbox.init(); // window._lightbox = lightbox @@ -2183,7 +2239,6 @@ createApp(window._appData); - }; init_app(); diff --git a/web/javascript/prompt_mixlab.js b/web/javascript/prompt_mixlab.js index 608180f..2107d1f 100644 --- a/web/javascript/prompt_mixlab.js +++ b/web/javascript/prompt_mixlab.js @@ -3,6 +3,87 @@ import { api } from '../../../scripts/api.js' import { ComfyWidgets } from '../../../scripts/widgets.js' import { $el } from '../../../scripts/ui.js' +import PhotoSwipeLightbox from '/extensions/comfyui-mixlab-nodes/lib/photoswipe-lightbox.esm.min.js' +function loadCSS (url) { + var link = document.createElement('link') + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = url + document.getElementsByTagName('head')[0].appendChild(link) + + // Create a style element + const style = document.createElement('style') + // Define the CSS rule for scrollbar width + const cssRule = `.pswp__custom-caption { + background: rgb(20 27 70); + font-size: 16px; + color: #fff; + width: calc(100% - 32px); + max-width: 400px; + padding: 2px 8px; + border-radius: 4px; + position: absolute; + left: 50%; + bottom: 16px; + transform: translateX(-50%); + } + .pswp__custom-caption a { + color: #fff; + text-decoration: underline; + } + .hidden-caption-content { + display: none; + }` + // Add the CSS rule to the style element + style.appendChild(document.createTextNode(cssRule)) + + // Append the style element to the document head + document.head.appendChild(style) +} +loadCSS('/extensions/comfyui-mixlab-nodes/lib/photoswipe.min.css') + +function initLightBox () { + const lightbox = new PhotoSwipeLightbox({ + gallery: '.prompt_image_output', + children: 'a', + pswpModule: () => + import('/extensions/comfyui-mixlab-nodes/lib/photoswipe.esm.min.js') + }) + + lightbox.on('uiRegister', function () { + lightbox.pswp.ui.registerElement({ + name: 'custom-caption', + order: 9, + isButton: false, + appendTo: 'root', + html: 'Caption text', + onInit: (el, pswp) => { + lightbox.pswp.on('change', () => { + const currSlideElement = lightbox.pswp.currSlide.data.element + let captionHTML = '' + if (currSlideElement) { + const hiddenCaption = currSlideElement.querySelector( + '.hidden-caption-content' + ) + if (hiddenCaption) { + // get caption from element with class hidden-caption-content + captionHTML = hiddenCaption.innerHTML + } else { + // get caption from alt attribute + captionHTML = currSlideElement + .querySelector('img') + .getAttribute('alt') + } + } + el.innerHTML = captionHTML || '' + }) + } + }) + }) + + lightbox.init() +} + function get_position_style (ctx, widget_width, y, node_height) { const MARGIN = 4 // the margin around the html element @@ -381,11 +462,19 @@ const _createResult = async (node, widget, message) => { let h = (image.naturalHeight * width) / image.naturalWidth if (index % 2 === 0) height_add += h div.style = `width: ${width}px;height:${h}px;position: relative;margin: 4px;` - div.innerHTML = ` -

+ ${message.prompts[index]} + +