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 = `
-
+
+
+