357 lines
9.5 KiB
JavaScript
357 lines
9.5 KiB
JavaScript
/**
|
||
* File: imageFeed.js
|
||
* Project: comfy_mtb
|
||
* Author: Mel Massadian
|
||
*
|
||
* Copyright (c) 2023 Mel Massadian
|
||
*
|
||
*/
|
||
|
||
// forked from pysssss's imageFeed.js
|
||
|
||
import { api } from '../../scripts/api.js'
|
||
import { app } from '../../scripts/app.js'
|
||
import { LocalStorageManager } from './comfy_shared.js'
|
||
const styles = {
|
||
lighbox: {
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100vw',
|
||
height: '100vh',
|
||
background: 'rgba(0,0,0,0.5)',
|
||
display: 'none',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
zIndex: 999,
|
||
},
|
||
lightboxBtn: (extra) => ({
|
||
position: 'absolute',
|
||
top: '50%',
|
||
background: 'none',
|
||
border: 'none',
|
||
color: '#fff',
|
||
zIndex: 1000,
|
||
fontSize: '30px',
|
||
cursor: 'pointer',
|
||
pointerEvents: 'auto',
|
||
...extra,
|
||
}),
|
||
img_list: {
|
||
minHeight: '30px',
|
||
maxHeight: '300px',
|
||
width: '100vw',
|
||
position: 'absolute',
|
||
bottom: 0,
|
||
zIndex: 10,
|
||
background: '#333',
|
||
overflow: 'auto',
|
||
},
|
||
}
|
||
|
||
let currentImageIndex = 0
|
||
const imageUrls = []
|
||
|
||
let image_menu = null
|
||
const storage = new LocalStorageManager('mtb')
|
||
|
||
let activated = storage.get('image_feed', false)
|
||
|
||
app.registerExtension({
|
||
name: 'mtb.ImageFeed',
|
||
setup: () => {
|
||
app.ui.settings.addSetting({
|
||
id: 'mtb.Main.image-feed-enabled',
|
||
category: ['mtb', ' Main', 'image-feed-enabled'],
|
||
name: 'Enable Image Feed',
|
||
type: 'boolean',
|
||
defaultValue: false,
|
||
attrs: {
|
||
style: {
|
||
fontFamily: 'monospace',
|
||
},
|
||
},
|
||
async onChange(value) {
|
||
storage.set('image_feed', value)
|
||
activated = value
|
||
},
|
||
})
|
||
},
|
||
init: async () => {
|
||
if (!activated) {
|
||
return
|
||
}
|
||
const pythongossFeed = app.extensions.find(
|
||
(e) => e.name === 'pysssss.ImageFeed',
|
||
)
|
||
if (pythongossFeed) {
|
||
console.warn(
|
||
"[mtb] - Aborting the loading of mtb's imageFeed in favor of pysssss.ImageFeed",
|
||
)
|
||
activated = false // just in case other methods are added later on
|
||
return
|
||
}
|
||
// - HTML & CSS
|
||
//- lightbox
|
||
const lightboxContainer = document.createElement('div')
|
||
Object.assign(lightboxContainer.style, styles.lighbox)
|
||
|
||
const lightboxImage = document.createElement('img')
|
||
Object.assign(lightboxImage.style, {
|
||
maxHeight: '100%',
|
||
maxWidth: '100%',
|
||
borderRadius: '5px',
|
||
})
|
||
|
||
// previous and next buttons
|
||
const lightboxPrevBtn = document.createElement('button')
|
||
const lightboxNextBtn = document.createElement('button')
|
||
|
||
lightboxPrevBtn.textContent = '❮'
|
||
lightboxNextBtn.textContent = '❯'
|
||
|
||
Object.assign(lightboxPrevBtn.style, styles.lightboxBtn({ left: '0%' }))
|
||
Object.assign(lightboxNextBtn.style, styles.lightboxBtn({ right: '0%' }))
|
||
|
||
// close button
|
||
const lightboxCloseBtn = document.createElement('button')
|
||
Object.assign(
|
||
lightboxCloseBtn.style,
|
||
styles.lightboxBtn({ right: '0', top: '0' }),
|
||
)
|
||
lightboxCloseBtn.textContent = '❌'
|
||
|
||
const lightboxButtons = document.createElement('div')
|
||
Object.assign(lightboxButtons.style, {
|
||
position: 'absolute',
|
||
top: '0%',
|
||
right: '0%',
|
||
// transform: "translate(50%, -50%)",
|
||
height: '100%',
|
||
width: '100%',
|
||
background: 'none',
|
||
border: 'none',
|
||
color: '#fff',
|
||
fontSize: '30px',
|
||
cursor: 'pointer',
|
||
pointerEvents: 'none',
|
||
})
|
||
|
||
lightboxButtons.append(lightboxPrevBtn, lightboxNextBtn, lightboxCloseBtn)
|
||
lightboxContainer.append(lightboxButtons, lightboxImage)
|
||
|
||
//- image list
|
||
const imageListContainer = document.createElement('div')
|
||
Object.assign(imageListContainer.style, styles.img_list)
|
||
|
||
const createImgListBtn = (text, style) => {
|
||
const btn = document.createElement('button')
|
||
btn.type = 'button'
|
||
btn.textContent = text
|
||
Object.assign(btn.style, {
|
||
...style,
|
||
border: 'none',
|
||
color: '#fff',
|
||
background: 'none',
|
||
height: '20px',
|
||
cursor: 'pointer',
|
||
position: 'absolute',
|
||
top: '5px',
|
||
fontSize: '12px',
|
||
lineHeight: '12px',
|
||
})
|
||
imageListContainer.append(btn)
|
||
return btn
|
||
}
|
||
const showBtn = document.createElement('button')
|
||
const closeBtn = createImgListBtn('❌', {
|
||
width: '20px',
|
||
textIndent: '-4px',
|
||
right: '5px',
|
||
})
|
||
const loadButton = createImgListBtn('Load Session History', {
|
||
right: '90px',
|
||
})
|
||
const clearButton = createImgListBtn('Clear', {
|
||
right: '30px',
|
||
})
|
||
|
||
//- tools popup button
|
||
showBtn.classList.add('comfy-settings-btn')
|
||
Object.assign(showBtn.style, {
|
||
right: '16px',
|
||
cursor: 'pointer',
|
||
display: 'none',
|
||
})
|
||
|
||
//- append to DOM
|
||
document.body.append(imageListContainer)
|
||
|
||
showBtn.textContent = '🖼'
|
||
showBtn.onclick = () => {
|
||
imageListContainer.style.display = 'block'
|
||
showBtn.style.display = 'none'
|
||
}
|
||
document.querySelector('.comfy-settings-btn').after(showBtn)
|
||
document.querySelector('.comfy-settings-btn').after(lightboxContainer)
|
||
|
||
// for (const { output } of history) {
|
||
// if (output?.images) {
|
||
// for (const src of output.images) {
|
||
// const img = document.createElement("img");
|
||
// const but = document.createElement("button");
|
||
|
||
//- callbacks
|
||
closeBtn.onclick = () => {
|
||
imageListContainer.style.display = 'none'
|
||
showBtn.style.display = 'unset'
|
||
}
|
||
|
||
clearButton.onclick = () => {
|
||
imageListContainer.replaceChildren(closeBtn, clearButton, loadButton)
|
||
}
|
||
|
||
lightboxNextBtn.onclick = () => {
|
||
currentImageIndex = (currentImageIndex + 1) % imageUrls.length
|
||
const imageUrl = imageUrls[currentImageIndex]
|
||
lightboxImage.src = imageUrl
|
||
}
|
||
|
||
// Modify the lightboxPrevBtn onclick callback
|
||
lightboxPrevBtn.onclick = () => {
|
||
currentImageIndex =
|
||
(currentImageIndex - 1 + imageUrls.length) % imageUrls.length
|
||
const imageUrl = imageUrls[currentImageIndex]
|
||
lightboxImage.src = imageUrl
|
||
}
|
||
|
||
lightboxCloseBtn.onclick = () => {
|
||
lightboxContainer.style.display = 'none'
|
||
}
|
||
lightboxImage.onclick = lightboxNextBtn.onclick
|
||
/**
|
||
* This is the function that creates the image buttons for the image list
|
||
* They are wrapped in a button so that they can be clicked and open
|
||
* the image in the lightbox.
|
||
* @param {*} src
|
||
*/
|
||
const createImageBtn = (src) => {
|
||
console.debug(`making image ${src.filename}`)
|
||
const img = document.createElement('img')
|
||
const but = document.createElement('button')
|
||
|
||
Object.assign(but.style, {
|
||
height: '120px',
|
||
width: '120px',
|
||
border: 'none',
|
||
padding: 0,
|
||
margin: 0,
|
||
})
|
||
Object.assign(img.style, {
|
||
width: '100%',
|
||
height: '100%',
|
||
objectFit: 'cover',
|
||
})
|
||
|
||
img.src = `/view?filename=${encodeURIComponent(src.filename)}&type=${
|
||
src.type
|
||
}&subfolder=${encodeURIComponent(src.subfolder)}`
|
||
|
||
imageUrls.push(img.src)
|
||
|
||
console.debug(img.src)
|
||
|
||
img.onload = () => {
|
||
but.style.width = `${120 * (img.naturalWidth / img.naturalHeight)}px`
|
||
}
|
||
|
||
but.onclick = () => {
|
||
lightboxContainer.style.display = 'flex'
|
||
// add the same image to the lightbox
|
||
lightboxImage.src = img.src
|
||
// lighboxContainer.replaceChildren(lightboxButtons, img);
|
||
}
|
||
|
||
// add right click menu
|
||
but.addEventListener('contextmenu', (e) => {
|
||
e.preventDefault()
|
||
|
||
if (image_menu) {
|
||
image_menu.remove()
|
||
}
|
||
|
||
image_menu = document.createElement('div')
|
||
Object.assign(image_menu.style, {
|
||
position: 'absolute',
|
||
top: `${e.clientY}px`,
|
||
left: `${e.clientX}px`,
|
||
background: '#333',
|
||
color: '#fff',
|
||
padding: '5px',
|
||
borderRadius: '5px',
|
||
zIndex: 999,
|
||
})
|
||
const load_img = document.createElement('button')
|
||
load_img.textContent = 'Load'
|
||
load_img.onclick = () => {
|
||
app.handleFile(img.src)
|
||
}
|
||
|
||
image_menu.appendChild(load_img)
|
||
document.body.appendChild(image_menu)
|
||
})
|
||
|
||
but.append(img)
|
||
imageListContainer.prepend(but)
|
||
}
|
||
|
||
loadButton.onclick = async () => {
|
||
const all_history = await api.getHistory()
|
||
for (const history of all_history.History) {
|
||
if (history.outputs) {
|
||
for (const key of Object.keys(history.outputs)) {
|
||
console.debug(key)
|
||
if (history.outputs[key].images) {
|
||
for (const im of history.outputs[key].images) {
|
||
console.debug(im)
|
||
createImageBtn(im)
|
||
}
|
||
}
|
||
}
|
||
// for (const src of outputs.outputs.images) {
|
||
// console.debug(src)
|
||
// makeImage(`${src.subfolder}/${src.filename}`)
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
///////-------
|
||
|
||
// const all_history = await api.getHistory()
|
||
// for (const history of all_history.History) {
|
||
// if (history.outputs) {
|
||
// for (const key of Object.keys(history.outputs)) {
|
||
// for (const im of history.outputs[key].images) {
|
||
// makeImage(im)
|
||
// }
|
||
// }
|
||
// // for (const src of outputs.outputs.images) {
|
||
// // console.debug(src)
|
||
// // makeImage(`${src.subfolder}/${src.filename}`)
|
||
// // }
|
||
// }
|
||
// }
|
||
|
||
//- Hook into the API
|
||
api.addEventListener('executed', ({ detail }) => {
|
||
if (detail?.output?.images) {
|
||
for (const src of detail.output.images) {
|
||
console.debug(`Adding ${src} to image feed`)
|
||
createImageBtn(src)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
})
|