nodes/shadowcz007-comfyui-mixlab-nodes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #64 from shadowcz007/main

Browse Source 
1
This commit is contained in:
shadow
2023-12-20 00:05:39 +08:00
committed by GitHub
parent 1fb1728ede 019c98ecc1
commit 573feeaaab
11 changed files with 2308 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+24 -25
View File
@@ -1,29 +1,19 @@
##
v0.3.0 🚀🚗🚚🏃‍
v0.4.0 🚀🚗🚚🏃‍
- Add "help" option to the context menu for each node.
- Add "find the node" option to the global context menu.
- Optimize the 3D Image node and add workflow.
- Added support for setting proxies: HTTP_PROXY, HTTPS_PROXY, http_proxy, https_proxy ✅
### 3D
![](./assets/3dimage.png)
[workflow](./workflow/3D-workflow.json)
- Added a new Speech feature node, enabling the use of a voice assistant: SpeechRecognition & SpeechSynthesis 🎙️
- Added TextImage node, allowing conversion of text into image format 📷
- Added SvgImage node, enabling layout parsing and poster generation in conjunction with the Layer class node 🖼️
- Added an experimental 3DImage node for loading 3D models 🌟
![screenshare](./assets/screenshare.png)
### SpeechRecognition & SpeechSynthesis
![f](./assets/audio-workflow.svg)
[Voice + Real-time Face Swap Workflow](./workflow/语音+实时换脸workflow.json)
### ScreenShareNode & FloatingVideoNode
> Now comfyui supports capturing screen pixel streams from any software and can be used for LCM-Lora integration. Let's get started with implementation and design! 💻🌐
>
![screenshare](./assets/screenshare.png)
https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43e-410a-ab3a-1952b7b4e7da
@@ -33,14 +23,10 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
!! Please use the address with HTTPS (https://127.0.0.1).
### SpeechRecognition & SpeechSynthesis
![f](./assets/audio-workflow.svg)
### LoadImagesFromLocal
> Monitor changes to images in a local folder, and trigger real-time execution of workflows, supporting common image formats, especially PSD format, in conjunction with Photoshop.
![watch](./assets/4-loadfromlocal-watcher-workflow.svg)
[workflow-4](./workflow/4-loadfromlocal-watcher-workflow.json)
[Voice + Real-time Face Swap Workflow](./workflow/语音+实时换脸workflow.json)
### GPT
> Support for calling multiple GPTs.ChatGPT、ChatGLM3 , Some code provided by rui. If you are using OpenAI's service, fill in https://api.openai.com/v1 . If you are using a local LLM service, fill in http://127.0.0.1:xxxx/v1 . Azure OpenAI:https://xxxx.openai.azure.com
@@ -50,6 +36,13 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
[workflow-5](./workflow/5-gpt-workflow.json)
### LoadImagesFromLocal
> Monitor changes to images in a local folder, and trigger real-time execution of workflows, supporting common image formats, especially PSD format, in conjunction with Photoshop.
![watch](./assets/4-loadfromlocal-watcher-workflow.svg)
[workflow-4](./workflow/4-loadfromlocal-watcher-workflow.json)
### Layers
> A new layer class node has been added, allowing you to separate the image into layers. After merging the images, you can input the controlnet for further processing.
@@ -92,8 +85,14 @@ Add edges to an image.
### Improvement
- Add "help" option to the context menu for each node.
- Add "find the node" option to the global context menu.
An improvement has been made to directly redirect to GitHub to search for missing nodes when loading the graph.
![help](./assets/help.png)
![node-not-found](./assets/node-not-found.png)
assets/3dimage.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 450 KiB

assets/help.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

nodes/ImageNode.py
+2 -2
View File
@@ -1065,14 +1065,14 @@ class NewLayer:
"required": {
"x": ("INT",{
"default": 0,
"min": -100, #Minimum value
"min": -1024, #Minimum value
"max": 8192, #Maximum value
"step": 1, #Slider's step
"display": "number" # Cosmetic only: display as "number" or "slider"
}),
"y": ("INT",{
"default": 0,
"min": 0, #Minimum value
"min": -1024, #Minimum value
"max": 8192, #Maximum value
"step": 1, #Slider's step
"display": "number" # Cosmetic only: display as "number" or "slider"
web/javascript/checkVersion_mixlab.js
+1 -1
View File
@@ -3,7 +3,7 @@ import { app } from '../../../scripts/app.js'
const repoOwner = 'shadowcz007' // 替换为仓库的所有者
const repoName = 'comfyui-mixlab-nodes' // 替换为仓库的名称
const version = 'v0.3.1'
const version = 'v0.4.0'
fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
.then(response => response.json())
web/javascript/image_mixlab.js
+19 -7
View File
@@ -588,7 +588,7 @@ app.registerExtension({
let timer = null
const delay = 800 // 延迟时间，单位为毫秒
const delay = 500 // 延迟时间，单位为毫秒
async function checkCameraChange () {
let dd = getLocalData(key)
@@ -737,15 +737,27 @@ app.registerExtension({
this.addCustomWidget(widget)
const onResize = this.onResize
let that=this;
this.onResize = function () {
let modelViewerVariants = preview.querySelector('model-viewer')
if (modelViewerVariants) {
modelViewerVariants.style.width = `${this.size[0] - 24}px`
modelViewerVariants.style.height = `${this.size[1] - 48}px`
}
preview.style.width = `${this.size[0] - 12}px`
// console.log(widget.div)
// 更新尺寸
let dd = getLocalData('_mixlab_3d_image')
// console.log(dd[that.id],bg_url)
if (dd[that.id]) {
const { bg_w, bg_h } = dd[that.id]
if (bg_h && bg_w) {
let w = that.size[0] - 24,
h = (w * bg_h) / bg_w
if (modelViewerVariants) {
modelViewerVariants.style.width = `${w}px`
modelViewerVariants.style.height = `${h}px`
}
preview.style.width = `${w}px`
}
}
return onResize?.apply(this, arguments)
}
web/javascript/main_mixlab.js
+58 -17
View File
@@ -485,7 +485,7 @@ function get_position_style (ctx, widget_width, y, node_height) {
// maxHeight: `${node_height - MARGIN * 2}px`, // we're assuming we have the whole height of the node
width: `${widget_width - MARGIN * 2}px`,
// height: `${node_height - MARGIN * 2}px`,
background: '#EEEEEE',
// background: '#EEEEEE',
display: 'flex',
flexDirection: 'column',
// alignItems: 'center',
@@ -596,7 +596,7 @@ app.registerExtension({
type: 'HTML', // whatever
name: 'sreen_share', // whatever
draw (ctx, node, widget_width, y, widget_height) {
console.log('ScreenSHare', y, widget_height)
// console.log('ScreenSHare', y, widget_height)
Object.assign(
this.card.style,
get_position_style(
@@ -609,9 +609,15 @@ app.registerExtension({
}
}
widget.card = $el('div', {})
widget.card = $el('div', {
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)'
})
widget.previewCard = $el('div', {})
widget.previewCard = $el('div', {
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)'
})
widget.preview = $el('video', {
style: {
@@ -623,7 +629,10 @@ app.registerExtension({
})
widget.previewArea = $el('div', {
style: {}
style: {
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)'
}
})
widget.shareDiv = $el('div', {
@@ -631,7 +640,9 @@ app.registerExtension({
style: {
cursor: 'pointer',
fontWeight: '300',
display: 'flex'
display: 'flex',
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)'
}
})
@@ -642,7 +653,12 @@ app.registerExtension({
padding: '8px 0',
fontWeight: '300',
margin: '2px',
width: '100%'
width: '100%',
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)',
borderRadius: '8px',
borderColor: 'var(--border-color)',
borderStyle: 'solid'
}
})
@@ -653,7 +669,12 @@ app.registerExtension({
padding: '8px 0',
fontWeight: '300',
margin: '2px',
width: '100%'
width: '100%',
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)',
borderRadius: '8px',
borderColor: 'var(--border-color)',
borderStyle: 'solid'
}
})
@@ -663,7 +684,12 @@ app.registerExtension({
cursor: 'pointer',
padding: '8px 0',
fontWeight: '300',
margin: '2px'
margin: '2px',
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)',
borderRadius: '8px',
borderColor: 'var(--border-color)',
borderStyle: 'solid'
}
})
@@ -671,21 +697,30 @@ app.registerExtension({
placeholder: ' Refresh rate:200 ms',
type: 'number',
min: 100,
step: 100,
step: 100,
style: {
cursor: 'pointer',
padding: '8px 0',
padding: '8px 24px',
fontWeight: '300',
margin: '2px'
margin: '2px',
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)'
}
})
});
widget.refreshInput.className='comfy-multiline-input'
widget.liveBtn = $el('button', {
innerText: 'Live Run',
style: {
cursor: 'pointer',
padding: '8px 0',
fontWeight: '300',
margin: '2px'
margin: '2px',
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)',
borderRadius: '8px',
borderColor: 'var(--border-color)',
borderStyle: 'solid'
}
})
@@ -890,7 +925,7 @@ app.registerExtension({
})
// console.log('widget.inputEl',widget.inputEl)
this.setSize([this.size[0],this.size[1]+450])
this.setSize([this.size[0], this.size[1] + 450])
app.canvas.draw(true, true)
/*
@@ -1255,7 +1290,12 @@ app.registerExtension({
cursor: 'pointer',
padding: '8px 0',
fontWeight: '300',
margin: '2px'
margin: '2px',
color: 'var(--descrip-text)',
backgroundColor: 'var(--comfy-input-bg)',
borderRadius: '8px',
borderColor: 'var(--border-color)',
borderStyle: 'solid'
}
})
@@ -1421,7 +1461,8 @@ app.registerExtension({
)
try {
pipWindow.document.querySelector('#info').innerText =window._mixlab_screen_seed_input
pipWindow.document.querySelector('#info').innerText =
window._mixlab_screen_seed_input
} catch (error) {
console.log(error)
}
web/javascript/svg_icons.js
+1
View File
@@ -0,0 +1 @@
export const closeIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>'
web/javascript/ui_mixlab.js
+171 -58
View File
@@ -2,6 +2,7 @@ import { app } from '../../../scripts/app.js'
import { api } from '../../../scripts/api.js'
import { ComfyWidgets } from '../../../scripts/widgets.js'
import { $el } from '../../../scripts/ui.js'
import {closeIcon} from './svg_icons.js'
function deepEqual (obj1, obj2) {
if (typeof obj1 !== typeof obj2) {
@@ -42,6 +43,17 @@ async function get_nodes_map () {
return await res.json()
}
function loadCSS(url) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}
var cssURL = 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown-light.min.css';
loadCSS(cssURL);
function injectCSS (css) {
// 检查页面中是否已经存在具有相同内容的style标签
const existingStyle = document.querySelector('style')
@@ -289,7 +301,7 @@ async function fetchReadmeContent (url) {
var readmeResponse = await fetch(readmeUrl)
var content = await readmeResponse.text()
console.log(content) // 在控制台输出readme.md文件的内容
// console.log(content) // 在控制台输出readme.md文件的内容
return content
} catch (error) {
@@ -297,86 +309,136 @@ async function fetchReadmeContent (url) {
}
}
function createModal (url, markdown) {
function createModal (url, markdown,title) {
// Create modal element
var div =
document.querySelector('#mix-modal') || document.createElement('div')
div.id = 'mix-modal'
div.innerHTML = ''
div.style.cssText = `width: 100%;
z-index: 9990;
height: 100vh;display: flex;
color: var(--descrip-text);
background-color: var(--comfy-menu-bg);
position: fixed;
top: 0;
left: 0;
}
`
z-index: 9990;
height: 100vh;
display: flex;
color: var(--descrip-text);
position: fixed;
top: 0;
left: 0;
`
var modal = document.createElement('div')
div.appendChild(modal)
modal.classList.add("modal-body")
// Set modal styles
modal.style.cssText = `
background: white;
height: 80vh;
overflow-y: scroll;
overflow-x: hidden;
padding: 24px;
position: fixed;
overflow:hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
`
border-radius: 4px;
box-shadow: 4px 4px 14px rgba(255,255,255,0.5);
`
// Create modal content area
var modalContent = document.createElement('div')
modalContent.classList.add('modal-content')
// Create modal header
const headerElement = document.createElement('div')
headerElement.classList.add('modal-header')
headerElement.style.cssText = `
display: flex;
padding: 20px 24px 8px 24px;
justify-content: space-between;
`
const headTitleElement = document.createElement('a')
headTitleElement.classList.add('header-title')
headTitleElement.style.cssText=`
color: var(--descrip-text);
font-size: 18px;
display: flex;
align-items: center;
flex: 1;
overflow: hidden;
text-decoration: none;
font-weight: bold;
`
headTitleElement.onmouseenter = function(){
headTitleElement.style.color = 'var(--comfy-menu-bg)'
}
headTitleElement.onmouseleave = function(){
headTitleElement.style.color = 'var(--descrip-text)'
}
headTitleElement.textContent= title ||'';
headTitleElement.href = url
headTitleElement.target='_blank'
const linkIcon = document.createElement('small')
linkIcon.textContent = '🔗'
headTitleElement.appendChild(linkIcon);
headerElement.appendChild(headTitleElement)
// Create close button
var closeButton = document.createElement('span')
const closeButton = document.createElement('span')
closeButton.classList.add('close')
closeButton.innerHTML = '&times;'
closeButton.innerHTML = closeIcon
// Set close button styles
closeButton.style.cssText = `
color: var(--input-text);
background-color: var(--comfy-input-bg);
border-color: var(--border-color);
padding: 4px;
/* border-radius: 50%; */
position: fixed;
top: 8px;
right: 8px;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
`
padding: 4px;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
fill: var(--descrip-text);
`
closeButton.onmouseenter = function(){
closeButton.style.fill = 'var(--comfy-menu-bg)';
}
closeButton.onmouseleave = function(){
closeButton.style.fill = 'var(--descrip-text)';
}
headerElement.appendChild(closeButton)
// Click event to close the modal
function closeMixModal(){
div.style.display = 'none'
window.removeEventListener('keydown',MixModalEscKeyEvent)
}
closeButton.onclick = function () {
closeMixModal()
}
// Set modal content area styles
modalContent.style.cssText = `
position: relative;
`
// Click event to close the modal
closeButton.onclick = function () {
div.style.display = 'none'
}
position: relative;
padding: 0px;
overflow: hidden scroll;;
height: 100%;
min-width:300px
`
// Append close button to modal content area
modalContent.appendChild(closeButton)
modal.appendChild(headerElement)
// Create element for displaying Markdown content
var markdownContent = document.createElement('div')
markdownContent.classList.add('markdown-content')
markdownContent.classList.add('markdown-content','markdown-body')
markdownContent.style.cssText = `max-width: 50vw;padding: 0px 24px 100px 24px;`
showdown.setFlavor('github');
var converter = new showdown.Converter()
var html = converter.makeHtml(markdown)
// Hide images in the markdown when they fail to load
@@ -405,10 +467,63 @@ position: relative;
// Append modal content area to modal element
modal.appendChild(modalContent)
const footerElement = document.createElement('div')
footerElement.style.cssText=`
position: absolute;
left: 0;
right: 0;
text-align: right;
padding:10px;
font-size:12px
`
const footerText = document.createElement('a')
footerText.href ="https://github.com/shadowcz007/comfyui-mixlab-nodes"
footerText.innerText = "Support by Mixlab"
footerText.style.cssText=`color:inherit`
footerText.target = "_blank"
footerText.onmouseenter=function(){
footerText.style.color = 'var(--input-text)'
}
footerText.onmouseleave=function(){
footerText.style.color = 'inherit'
}
footerText.onclick = function(e){
e.stopPropagation()
}
footerElement.appendChild(footerText)
div.appendChild(footerElement)
// Append modal element to the page
if (!document.querySelector('#mix-modal')) {
document.body.appendChild(div)
}
function MixModalEscKeyEvent(event){
if(event.key == "Escape"){
closeMixModal()
}
}
window.removeEventListener('keydown',MixModalEscKeyEvent)
window.addEventListener('keydown',MixModalEscKeyEvent)
const bgElement = document.createElement('div')
bgElement.classList.add('mix-modal-bg')
bgElement.style.cssText = `
width:100%;
height:100%;
background-color: rgba(0,0,0,0.8);
`
bgElement.onclick = function( ){
closeMixModal()
}
div.appendChild(bgElement)
}
app.registerExtension({
@@ -420,13 +535,11 @@ app.registerExtension({
? nodesMap
: await getCustomnodeMappings('url')
console.log(node, nodesMap, nodesMap[node.type])
console.log('node & node map', node, nodesMap, nodesMap[node.type])
let repo = nodesMap[node.type]
if (repo) {
let markdown = await fetchReadmeContent(repo.url)
console.log(markdown)
createModal(repo.url, `# [${repo.title}](${repo.url})<br>${markdown}`)
createModal(repo.url,markdown,repo.title)
}
}
@@ -460,7 +573,7 @@ app.registerExtension({
},
async setup () {
// Add canvas menu options
// Add canvas menu options
const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
LGraphCanvas.prototype.getCanvasMenuOptions = function () {
const options = orig.apply(this, arguments);
@@ -483,14 +596,14 @@ app.registerExtension({
document.createElement('div')
div.id = 'mixlab_find_the_node'
div.style = `
flex-direction: column;
align-items: end;
display:flex;position: absolute;
top: 50px; left: 50px; width: 200px;
color: var(--descrip-text);
background-color: var(--comfy-menu-bg);
padding: 10px;
border: 1px solid black;z-index: 999999999;padding-top: 0;`
flex-direction: column;
align-items: end;
display:flex;position: absolute;
top: 50px; left: 50px; width: 200px;
color: var(--descrip-text);
background-color: var(--comfy-menu-bg);
padding: 10px;
border: 1px solid black;z-index: 999999999;padding-top: 0;`
div.innerHTML = ''
@@ -505,7 +618,7 @@ app.registerExtension({
let textB = document.createElement('p')
btn.appendChild(textB)
btn.appendChild(btnB)
textB.innerText = `find the node`
textB.innerText = `Find The Node`
btnB.style = `float: right; border: none; color: var(--input-text);
background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
@@ -555,7 +668,7 @@ app.registerExtension({
app.canvas.setZoom(1)
})
d.addEventListener('mouseover', async () => {
console.log('mouseover')
// console.log('mouseover')
let n = (await app.graphToPrompt()).output
if (!deepEqual(n, ns)) {
nd.innerHTML = ''
web/javascript/utils_mixlab.js
+2
View File
@@ -5,6 +5,7 @@ import { ComfyWidgets } from '../../../scripts/widgets.js'
import { $el } from '../../../scripts/ui.js'
const getLocalData = key => {
let data = {}
try {
@@ -46,6 +47,7 @@ function get_position_style (ctx, widget_width, y, node_height) {
}
}
app.registerExtension({
name: 'Mixlab.utils.Color',
async getCustomWidgets (app) {
workflow/3D-workflow.json
+2030
View File
File diff suppressed because one or more lines are too long