Update README.md

- 优化ImageColorTransfer
- 支持动态提示
- 添加更多节点支持，AppInfo自动填充id
- LoadImagesToBatch加载
- zhipuai 按需安装

.gitignore

@@ -5,3 +5,4 @@ workflow/my_workflow.json
 workflow/my_workflow_app.json
 workflow/prompt_result.json
 app/*
+workflow/prompt_result.json

README.md

@@ -3,11 +3,15 @@
 > [Mixlab nodes discord](https://discord.gg/cXs9vZSqeK)
 
 #### 
+[comfyui-sd-prompt-mixlab](https://github.com/shadowcz007/comfyui-sd-prompt-mixlab)
+
+[comfyui-Image-reward](https://github.com/shadowcz007/comfyui-Image-reward)
+
 [comfyui-ultralytics-yolo](https://github.com/shadowcz007/comfyui-ultralytics-yolo)
 
 [comfyui-moondream](https://github.com/shadowcz007/comfyui-moondream)
 
-[comfyui-CLIPSeg](https://github.com/shadowcz007/comfyui-CLIPSeg)
+<!-- [comfyui-CLIPSeg](https://github.com/shadowcz007/comfyui-CLIPSeg) -->
 
 
 ## 🚀🚗🚚🏃 Workflow-to-APP 
@@ -15,7 +19,9 @@
 - 支持多个web app 切换
 - 发布为app的workflow，可以在右键里再次编辑了
 - web app可以设置分类，在comfyui右键菜单可以编辑更新web app
+- 支持动态提示
 
+![](./assets/微信图片_20240421205440.png)
 
 - Support multiple web app switching.
 - Add the AppInfo node, which allows you to transform the workflow into a web app by simple configuration.
@@ -114,18 +120,31 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
 [workflow](./workflow/3D-workflow.json)
 
 
-### LoadImagesFromLocal
+### Image
+
+#### LoadImagesToBatch
+> Upload multiple images for batch input into the IP adapter. 
+
+#### 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)
 
-### LoadImagesFromURL
+#### LoadImagesFromURL
 > Conveniently load images from a fixed address on the internet to ensure that default images in the workflow can be executed.
 
 
-## Utils
+### Style
+> Apply VisualStyle Prompting , Modified from [ComfyUI_VisualStylePrompting](https://github.com/ExponentialML/ComfyUI_VisualStylePrompting) 
+
+![](./assets/VisualStylePrompting.png)
+
+> StyleAligned , Modified from [style_aligned_comfy](https://github.com/brianfitzgerald/style_aligned_comfy) 
+
+
+### Utils
 > The Color node provides a color picker for easy color selection, the Font node offers built-in font selection for use with TextImage to generate text images, and the DynamicDelayByText node allows delayed execution based on the length of the input text.
 
 - [添加了DynamicDelayByText功能，可以根据输入文本的长度进行延迟执行。](./workflow/audio-chatgpt-workflow.json)
@@ -138,7 +157,7 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
 
 
 
-## Other Nodes
+### Other Nodes
 
 ![main](./assets/all-workflow.svg)
 ![main2](./assets/detect-face-all.png)

__init__.py

@@ -576,9 +576,6 @@ async def post_prompt_result(request):
     
     return web.json_response({"result":res})
 
-
-
-
 # 扩展api接口
 # from server import PromptServer
 # from aiohttp import web
@@ -591,15 +588,19 @@ async def post_prompt_result(request):
 
 
 # 导入节点
-from .nodes.PromptNode import EmbeddingPrompt,RandomPrompt,PromptSlide,PromptSimplification,PromptImage,JoinWithDelimiter
-from .nodes.ImageNode import SaveImageToLocal,SplitImage,GridOutput,GetImageSize_,MirroredImage,ImageColorTransfer,NoiseImage,TransparentImage,GradientImage,LoadImagesFromPath,LoadImagesFromURL,ResizeImage,TextImage,SvgImage,Image3D,ShowLayer,NewLayer,MergeLayers,CenterImage,AreaToMask,SmoothMask,SplitLongMask,ImageCropByAlpha,EnhanceImage,FaceToMask
+from .nodes.PromptNode import GLIGENTextBoxApply_Advanced,EmbeddingPrompt,RandomPrompt,PromptSlide,PromptSimplification,PromptImage,JoinWithDelimiter
+from .nodes.ImageNode import LoadImages_,CompositeImages,GridDisplayAndSave,GridInput,ImagesPrompt,SaveImageAndMetadata,SaveImageToLocal,SplitImage,GridOutput,GetImageSize_,MirroredImage,ImageColorTransfer,NoiseImage,TransparentImage,GradientImage,LoadImagesFromPath,LoadImagesFromURL,ResizeImage,TextImage,SvgImage,Image3D,ShowLayer,NewLayer,MergeLayers,CenterImage,AreaToMask,SmoothMask,SplitLongMask,ImageCropByAlpha,EnhanceImage,FaceToMask
 # from .nodes.Vae import VAELoader,VAEDecode
 from .nodes.ScreenShareNode import ScreenShareNode,FloatingVideo
 
 from .nodes.ChatGPT import ChatGPTNode,ShowTextForGPT,CharacterInText,TextSplitByDelimiter
 from .nodes.Audio import GamePal,SpeechRecognition,SpeechSynthesis
-from .nodes.Utils import CreateLoraNames,CreateSampler_names,CreateCkptNames,CreateSeedNode,TESTNODE_,TESTNODE_TOKEN,AppInfo,IntNumber,FloatSlider,TextInput,ColorInput,FontInput,TextToNumber,DynamicDelayProcessor,LimitNumber,SwitchByIndex,MultiplicationNode
-from .nodes.Mask import OutlineMask,FeatheredMask
+from .nodes.Utils import IncrementingListNode,ListSplit,CreateLoraNames,CreateSampler_names,CreateCkptNames,CreateSeedNode,TESTNODE_,TESTNODE_TOKEN,AppInfo,IntNumber,FloatSlider,TextInput,ColorInput,FontInput,TextToNumber,DynamicDelayProcessor,LimitNumber,SwitchByIndex,MultiplicationNode
+from .nodes.Mask import PreviewMask_,MaskListReplace,MaskListMerge,OutlineMask,FeatheredMask
+
+from .nodes.Style import ApplyVisualStylePrompting,StyleAlignedReferenceSampler,StyleAlignedBatchAlign,StyleAlignedSampleReferenceLatents
+
+from .nodes.Video import VideoCombine_Adv,LoadVideoAndSegment,ImageListReplace,VAEEncodeForInpaint_Frames
 
 
 # 要导出的所有节点及其名称的字典
@@ -612,6 +613,7 @@ NODE_CLASS_MAPPINGS = {
     # "LoraPrompt":LoraPrompt,
     "EmbeddingPrompt":EmbeddingPrompt,
     "PromptSlide":PromptSlide,
+    "GLIGENTextBoxApply_Advanced":GLIGENTextBoxApply_Advanced,
     "PromptSimplification":PromptSimplification,
     "PromptImage":PromptImage,
     "MirroredImage":MirroredImage,
@@ -621,6 +623,7 @@ NODE_CLASS_MAPPINGS = {
     "ResizeImageMixlab":ResizeImage,
     "LoadImagesFromPath":LoadImagesFromPath,
     "LoadImagesFromURL":LoadImagesFromURL,
+    "LoadImagesToBatch":LoadImages_,
     "TextImage":TextImage,
     "EnhanceImage":EnhanceImage,
     "SvgImage":SvgImage,
@@ -628,9 +631,12 @@ NODE_CLASS_MAPPINGS = {
     "ImageColorTransfer":ImageColorTransfer,
     "ShowLayer":ShowLayer,
     "NewLayer":NewLayer,
+    "CompositeImages_":CompositeImages,
     "SplitImage":SplitImage,
     "CenterImage":CenterImage,
     "GridOutput":GridOutput,
+    "GridDisplayAndSave":GridDisplayAndSave,
+    "GridInput":GridInput,
     "MergeLayers":MergeLayers,
     "SplitLongMask":SplitLongMask,
     "FeatheredMask":FeatheredMask,
@@ -638,8 +644,10 @@ NODE_CLASS_MAPPINGS = {
     "FaceToMask":FaceToMask,
     "AreaToMask":AreaToMask,
     "ImageCropByAlpha":ImageCropByAlpha,
+    "ImagesPrompt_":ImagesPrompt,
     # "VAELoaderConsistencyDecoder":VAELoader,
     "SaveImageToLocal":SaveImageToLocal,
+    "SaveImageAndMetadata_":SaveImageAndMetadata,
     # "VAEDecodeConsistencyDecoder":VAEDecode,
     "ScreenShare":ScreenShareNode,
     "FloatingVideo":FloatingVideo,
@@ -661,39 +669,79 @@ NODE_CLASS_MAPPINGS = {
     "SwitchByIndex":SwitchByIndex,
     "LimitNumber":LimitNumber, 
     "OutlineMask":OutlineMask,
+    "MaskListMerge_":MaskListMerge,
     "JoinWithDelimiter":JoinWithDelimiter,
     "Seed_":CreateSeedNode,
     "CkptNames_":CreateCkptNames,
     "SamplerNames_":CreateSampler_names,
-    "LoraNames_":CreateLoraNames
-    # "LaMaInpainting":LaMaInpainting
+    "LoraNames_":CreateLoraNames,
+    "ApplyVisualStylePrompting_":ApplyVisualStylePrompting,
+    "StyleAlignedReferenceSampler_": StyleAlignedReferenceSampler,
+    "StyleAlignedSampleReferenceLatents_": StyleAlignedSampleReferenceLatents,
+    "StyleAlignedBatchAlign_": StyleAlignedBatchAlign,
+    "LoadVideoAndSegment_":LoadVideoAndSegment,
+    "VideoCombine_Adv":VideoCombine_Adv,
+    "ListSplit_":ListSplit,
+    "MaskListReplace_":MaskListReplace,
+    "ImageListReplace_":ImageListReplace,
+    "VAEEncodeForInpaint_Frames":VAEEncodeForInpaint_Frames,
+    "IncrementingListNode_":IncrementingListNode,
+    "PreviewMask_":PreviewMask_
     # "GamePal":GamePal
 }
 
 # 一个包含节点友好/可读的标题的字典
 NODE_DISPLAY_NAME_MAPPINGS = {
-    "AppInfo":"AppInfo ♾️Mixlab",
-    "ResizeImageMixlab":"ResizeImage ♾️Mixlab",
+    "AppInfo":"App Info ♾️MixlabApp",
+    "Color":"Color Input ♾️MixlabApp",
+    "TextInput_":"Text Input ♾️MixlabApp",
+    "FloatSlider":"Float Slider Input ♾️MixlabApp",
+    "IntNumber":"Int Input ♾️MixlabApp",
+    "ImagesPrompt_":"Images Input ♾️MixlabApp",
+    "SaveImageAndMetadata_":"Save Image Output ♾️MixlabApp",
+    "ResizeImageMixlab":"Resize Image ♾️Mixlab",
     "RandomPrompt": "Random Prompt ♾️Mixlab",
+    "PromptImage":"Output Prompt and Image ♾️Mixlab",
     "SplitLongMask":"Splitting a long image into sections",
     "VAELoaderConsistencyDecoder":"Consistency Decoder Loader",
     "VAEDecodeConsistencyDecoder":"Consistency Decoder Decode",
-    "ScreenShare":"ScreenShare ♾️Mixlab",
+    "ScreenShare":"Screen Share ♾️Mixlab",
     "FloatingVideo":"FloatingVideo ♾️Mixlab",
     "ChatGPTOpenAI":"ChatGPT ♾️Mixlab",
-    "ShowTextForGPT":"ShowTextForGPT ♾️Mixlab",
-    "MergeLayers":"MergeLayers ♾️Mixlab",
+    "ShowTextForGPT":"Show Text ♾️MixlabApp",
+    "MergeLayers":"Merge Layers ♾️Mixlab",
     "SpeechSynthesis":"SpeechSynthesis ♾️Mixlab",
     "SpeechRecognition":"SpeechRecognition ♾️Mixlab",
     "3DImage":"3DImage ♾️Mixlab",
+    "CompositeImages_":"Composite Images ♾️Mixlab",
     "DynamicDelayProcessor":"DynamicDelayByText ♾️Mixlab",
     "LaMaInpainting":"LaMaInpainting ♾️Mixlab",
-    "PromptSlide":"PromptSlide ♾️Mixlab",
-    "PromptGenerate_Mix":"PromptGenerate ♾️Mixlab",
-    "ChinesePrompt_Mix":"ChinesePrompt ♾️Mixlab",
+    "PromptSlide":"Prompt Slide ♾️Mixlab",
+    "PromptGenerate_Mix":"Prompt Generate ♾️Mixlab",
+    "ChinesePrompt_Mix":"Chinese Prompt ♾️Mixlab",
     "GamePal":"GamePal ♾️Mixlab",
-    "RembgNode_Mix":"Removebg",
-    "LoraNames_":"LoraName_TriggerWords.safetensors"
+    "RembgNode_Mix":"Remove Background ♾️Mixlab",
+    "LoraNames_":"LoraName ♾️Mixlab",
+    "ApplyVisualStylePrompting_":"Apply VisualStyle Prompting ♾️Mixlab",
+    "StyleAlignedReferenceSampler_": "StyleAligned Reference Sampler ♾️Mixlab",
+    "StyleAlignedSampleReferenceLatents_": "StyleAligned Sample Reference Latents ♾️Mixlab",
+    "StyleAlignedBatchAlign_": "StyleAligned Batch Align ♾️Mixlab",
+    "LoadVideoAndSegment_":"Load Video And Segment ♾️Mixlab",
+    "VideoCombine_Adv":"Video Combine ♾️Mixlab",
+    "MaskListMerge_":"MaskList to Mask ♾️Mixlab",
+    "ListSplit_":"Split List ♾️Mixlab",
+    "MaskListReplace_":"MaskList Replace ♾️Mixlab",
+    "ImageListReplace_":"ImageList Replace ♾️Mixlab",
+    "SwitchByIndex":"List Switch By Index ♾️Mixlab",
+    "GLIGENTextBoxApply_Advanced":"GLIGEN TextBox Apply ♾️Mixlab",
+    "GridDisplayAndSave":"Grid Display And Save ♾️Mixlab",
+    "GridInput":"Grid Input ♾️Mixlab",
+    "GridOutput":"Grid Output ♾️Mixlab",
+    "GetImageSize_":"Get Image Size ♾️Mixlab",
+    "VAEEncodeForInpaint_Frames":"VAE Encode For Inpaint Frames ♾️Mixlab",
+    "IncrementingListNode_":"Create Incrementing Number List ♾️Mixlab",
+    "LoadImagesToBatch":"Load Images(base64) ♾️Mixlab",
+    "PreviewMask_":"Preview Mask"
 }
 
 # web ui的节点功能

data/image_prompt_example.json

@@ -0,0 +1,10 @@
+[
+    {
+        "keyword":"Dog",
+        "imgurl":"http://127.0.0.1:8188/view?filename=1709966910233.png&type=input&subfolder=&rand=0.2734446552394221"
+    },
+    {
+        "keyword":"x",
+        "imgurl":"http://127.0.0.1:8188/view?filename=image%20(33).png&type=input&subfolder=pasted&rand=0.6984318219852814"
+    }
+]

nodes/ChatGPT.py

@@ -4,7 +4,18 @@ import urllib.error
 import re,json,os,string,random
 import folder_paths
 import hashlib
-from zhipuai import ZhipuAI
+import codecs,sys
+import importlib.util
+
+
+def is_installed(package):
+    try:
+        spec = importlib.util.find_spec(package)
+    except ModuleNotFoundError:
+        return False
+    return spec is not None
+
+
 def get_unique_hash(string):
     hash_object = hashlib.sha1(string.encode())
     unique_hash = hash_object.hexdigest()
@@ -46,14 +57,36 @@ def openai_client(key,url):
     base_url=url
     )
     return client
+
 def ZhipuAI_client(key):
+
+    try:
+        if is_installed('zhipuai')==False:
+            import subprocess
+
+            # 安装
+            print('#pip install zhipuai')
+
+            result = subprocess.run([sys.executable, '-s', '-m', 'pip', 'install', 'zhipuai'], capture_output=True, text=True)
+
+            #检查命令执行结果
+            if result.returncode == 0:
+                print("#install success")
+                from zhipuai import ZhipuAI
+            else:
+                print("#install error")
+            
+        else:
+            from zhipuai import ZhipuAI
+    except:
+        print("#install zhipuai error")
+
     client = ZhipuAI(
         api_key=key, # 填写您的 APIKey
     ) 
     return client
 
 
-
 def chat(client, model_name,messages ):
 
         try_count = 0
@@ -105,7 +138,15 @@ class ChatGPTNode:
                                        "default": "You are ChatGPT, a large language model trained by OpenAI. Answer as concisely as possible.", 
                                        "multiline": True,"dynamicPrompts": False
                                        }),
-                "model": (["gpt-3.5-turbo","gpt-35-turbo","gpt-3.5-turbo-16k", "gpt-3.5-turbo-16k-0613", "gpt-4-0613","gpt-4-1106-preview","glm-4"], 
+                "model": ([
+                    "gpt-3.5-turbo",
+                    "gpt-3.5-turbo-0125",
+                    "gpt-35-turbo",
+                    "gpt-3.5-turbo-16k", 
+                    "gpt-3.5-turbo-16k-0613", 
+                    "gpt-4-0613",
+                    "gpt-4-1106-preview",
+                    "glm-4"], 
                           {"default": "gpt-3.5-turbo"}),
                 "seed": ("INT", {"default": 0, "min": 0, "max": 0xffffffffffffffff, "step": 1}),
                 "context_size":("INT", {"default": 1, "min": 0, "max":30, "step": 1}),
@@ -209,7 +250,7 @@ class ShowTextForGPT:
     OUTPUT_NODE = True
     OUTPUT_IS_LIST = (True,)
 
-    CATEGORY = "♾️Mixlab/GPT"
+    CATEGORY = "♾️Mixlab/Text"
 
     def run(self, text,output_dir=[""]):
         
@@ -293,7 +334,7 @@ class CharacterInText:
     # OUTPUT_NODE = True
     OUTPUT_IS_LIST = (False,)
 
-    CATEGORY = "♾️Mixlab/GPT"
+    CATEGORY = "♾️Mixlab/Text"
 
     def run(self, text,character,start_index):
         # print(text,character,start_index)
@@ -306,8 +347,8 @@ class TextSplitByDelimiter:
     def INPUT_TYPES(s):
         return {
             "required": {
-                 "text": ("STRING", {"multiline": True,"dynamicPrompts": False}),
-                "delimiter":(["newline","comma"],),
+                "text": ("STRING", {"multiline": True,"dynamicPrompts": False}),
+                "delimiter":("STRING", {"multiline": False,"default":",","dynamicPrompts": False}),
                 "start_index": ("INT", {
                     "default": 0,
                     "min": 0, #Minimum value
@@ -338,15 +379,16 @@ class TextSplitByDelimiter:
     # OUTPUT_NODE = True
     OUTPUT_IS_LIST = (True,)
 
-    CATEGORY = "♾️Mixlab/GPT"
+    CATEGORY = "♾️Mixlab/Text"
 
     def run(self, text,delimiter,start_index,skip_every,max_count):
-        arr=[]
-        if delimiter=='newline':
-            arr = [line for line in text.split('\n') if line.strip()]
-        elif delimiter=='comma':
-            arr = [line for line in text.split(',') if line.strip()]
-        
+         
+        if delimiter=="":
+            arr=[text.strip()]
+        else:
+            delimiter=codecs.decode(delimiter, 'unicode_escape')
+            arr= [line for line in text.split(delimiter) if line.strip()]
+
         arr= arr[start_index:start_index + max_count * (skip_every+1):(skip_every+1)]
 
         return (arr,)

nodes/ImageNode.py

@@ -8,16 +8,90 @@ import base64,os,random
 from io import BytesIO
 import folder_paths
 import json,io
+import comfy.utils
 from comfy.cli_args import args
 import cv2
 import string
 import math,glob
 from .Watcher import FolderWatcher
+import hashlib
+
+
+
+# 将PIL图片转换为OpenCV格式
+def pil_to_opencv(image):
+    open_cv_image = cv2.cvtColor(np.array(image), cv2.COLOR_RGB2BGR)
+    return open_cv_image
+
+# 将OpenCV格式图片转换为PIL格式
+def opencv_to_pil(image):
+    pil_image = Image.fromarray(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))
+    return pil_image
+
+
+def composite_images(foreground, background, mask):
+    width,height=foreground.size
+ 
+    bg_image=background
+    # 按z-index排序
+    layer = {
+            "x":0,
+            "y":0,
+            "width":width,
+            "height":height,
+            "z_index":88,
+            "scale_option":'overall',
+            "image":foreground,
+            "mask":mask
+    }
+                
+    width, height = bg_image.size
+
+    layer_image=layer['image']
+    layer_mask=layer['mask']
+    
+    bg_image=merge_images(bg_image,
+                        layer_image,
+                        layer_mask,
+                                        layer['x'],
+                                        layer['y'],
+                                        layer['width'],
+                                        layer['height'],
+                                        layer['scale_option']
+                                        )
+                   
+    bg_image=bg_image.convert('RGB')
+    
+    return bg_image
+
+
+def count_files_in_directory(directory):
+    file_count = 0
+    for _, _, files in os.walk(directory):
+        file_count += len(files)
+    return file_count
+
+def save_json_to_file(data, file_path):
+    with open(file_path, 'w') as file:
+        json.dump(data, file)
+
+def draw_rectangle(image, grid, color,width):
+    x, y, w, h = grid
+    draw = ImageDraw.Draw(image)
+    draw.rectangle([(x, y), (x+w, y+h)], outline=color,width=width)
 
 def generate_random_string(length):
     letters = string.ascii_letters + string.digits
     return ''.join(random.choice(letters) for _ in range(length))
 
+def padding_rectangle(grid, padding):
+    x, y, w, h = grid
+    x -= padding
+    y -= padding
+    w += 2 * padding
+    h += 2 * padding
+    return (x, y, w, h)
+
 class AnyType(str):
   """A special class that is always equal in not equal comparisons. Credit to pythongosssss"""
 
@@ -559,7 +633,7 @@ def detect_faces(image):
 
 def areaToMask(x,y,w,h,image):
     # 创建一个与原图片大小相同的空白图片
-    mask = Image.new('1', image.size)
+    mask = Image.new('L', image.size)
 
     # 创建一个可用于绘制的对象
     draw = ImageDraw.Draw(mask)
@@ -592,7 +666,46 @@ def areaToMask(x,y,w,h,image):
 #     # bg_image.save("output.jpg")
 #     return bg_image
 
-def merge_images(bg_image, layer_image, mask, x, y, width, height, scale_option):
+
+import cv2
+import numpy as np
+
+# ps的正片叠底
+# 可以基于https://www.cnblogs.com/jsxyhelu/p/16947810.html ，用gpt写python代码
+def multiply_blend(image1, image2):
+    image1=pil_to_opencv(image1)
+    image2=pil_to_opencv(image2)
+    # 将图像转换为浮点型
+    image1 = image1.astype(float)
+    image2 = image2.astype(float)
+    if image1.shape != image2.shape:
+        image1 = cv2.resize(image1, (image2.shape[1], image2.shape[0]))
+        
+    # 归一化图像
+    image1 /= 255.0
+    image2 /= 255.0
+
+    # 正片叠底混合
+    blended = image1 * image2
+
+    # 将图像还原为8位无符号整数
+    blended = (blended * 255).astype(np.uint8)
+
+    blended=opencv_to_pil(blended)
+    return blended
+
+# # 读取图像
+# image1 = cv2.imread('1.png')
+# image2 = cv2.imread('3.png')
+
+# # 进行正片叠底混合
+# result = multiply_blend(image1, image2)
+
+# cv2.imwrite('result.jpg', result)
+
+
+
+def merge_images(bg_image, layer_image, mask, x, y, width, height, scale_option,is_multiply_blend=False):
     # 打开底图
     bg_image = bg_image.convert("RGBA")
 
@@ -621,13 +734,43 @@ def merge_images(bg_image, layer_image, mask, x, y, width, height, scale_option)
     nw, nh = layer_image.size
     mask = mask.resize((nw, nh))
 
-    # 在底图上粘贴图层
-    bg_image.paste(layer_image, (x, y), mask=mask)
+    # 分离出a通道
+    r, g, b, alpha = layer_image.split()
+    alpha = ImageOps.invert(alpha)
+    # 创建一个新的RGB图像
+    new_rgb_image = Image.new("RGB", layer_image.size)
+    # 将透明通道粘贴到新的RGB图像上
+    new_rgb_image.paste(layer_image, (0, 0), mask=alpha)
+   
+    new_rgb_image.paste(layer_image, (x, y), mask=mask)
+    mask=new_rgb_image.convert('L')
+    mask = ImageOps.invert(mask)
+
+    if is_multiply_blend:
+        bg_image_white=Image.new("RGB", bg_image.size,(255, 255, 255))
+
+        bg_image_white.paste(layer_image, (x, y), mask=mask)
+        bg_image=multiply_blend(bg_image_white,bg_image)
+        bg_image=bg_image.convert("RGBA")
+    else:
+        # 在底图上粘贴图层
+        bg_image.paste(layer_image, (x, y), mask=mask)
 
     # 输出合成后的图片
     return bg_image
 
 
+def resize_2(img):
+    # 检查图像的高度是否是2的倍数，如果不是，则调整高度
+    if img.height % 2 != 0:
+        img = img.resize((img.width, img.height + 1))
+
+    # 检查图像的宽度是否是2的倍数，如果不是，则调整宽度
+    if img.width % 2 != 0:
+        img = img.resize((img.width + 1, img.height))
+
+    return img
+
 # TODO 几个像素点的底
 def resize_image(layer_image, scale_option, width, height,color="white"):
     layer_image = layer_image.convert("RGB")
@@ -657,8 +800,10 @@ def resize_image(layer_image, scale_option, width, height,color="white"):
         resized_image = Image.new("RGB", (width, height), color=color)
         resized_image.paste(layer_image.resize((new_width, new_height)), ((width - new_width) // 2, (height - new_height) // 2))
         resized_image = resized_image.convert("RGB")
+        resized_image=resize_2(resized_image)
         return resized_image
     
+    layer_image=resize_2(layer_image)
     return layer_image
 
 
@@ -982,6 +1127,35 @@ class TransparentImage:
 
 
 
+class ImagesPrompt:
+    @classmethod
+    def INPUT_TYPES(s):
+        # input_dir = folder_paths.get_input_directory()
+        # files = [f for f in os.listdir(input_dir) if os.path.isfile(os.path.join(input_dir, f))]
+        return {
+            "required": { 
+               "image_base64": ("STRING",{"multiline": False,"default": "","dynamicPrompts": False}),
+               "text": ("STRING",{"multiline": True,"default": "","dynamicPrompts": True}),
+            }
+            }
+    
+    RETURN_TYPES = ("IMAGE","STRING",)
+    RETURN_NAMES = ("image","text",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/Input"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,False,)
+    OUTPUT_NODE = False
+
+    # 运行的函数
+    def run(self,image_base64,text):
+        image = base64_to_image(image_base64)
+        image=image.convert('RGB')
+        image=pil2tensor(image)
+        return (image,text,)
 
 
 class EnhanceImage:
@@ -1029,6 +1203,42 @@ class EnhanceImage:
 
 
 
+class LoadImages_:
+    @classmethod
+    def INPUT_TYPES(s):
+        
+        return {"required":
+                    {"images": ("IMAGEBASE64",), 
+                     },
+                }
+
+    CATEGORY = "♾️Mixlab/Image"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,)
+
+    RETURN_TYPES = ("IMAGE",)
+    FUNCTION = "load_image"
+    def load_image(self, images):
+
+        # print(images)
+        ims=[]
+        for im in images['base64']:
+            image = base64_to_image(im)
+            image=image.convert('RGB')
+            image=pil2tensor(image)
+            ims.append(image)
+
+        image1 = ims[0]
+        for image2 in ims[1:]:
+            if image1.shape[1:] != image2.shape[1:]:
+                image2 = comfy.utils.common_upscale(image2.movedim(-1, 1), image1.shape[2], image1.shape[1], "bilinear", "center").movedim(1, -1)
+            image1 = torch.cat((image1, image2), dim=0)
+        return (image1,)
+        
+ 
+
+
 ''' 
 ("STRING",{"multiline": False,"default": "Hello World!"})
 对应 widgets.js 里：
@@ -1378,7 +1588,7 @@ class Image3D:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Image"
+    CATEGORY = "♾️Mixlab/3D"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,False,False,False,)
@@ -1488,6 +1698,37 @@ class FaceToMask:
         return (mask,)
 
 
+class CompositeImages:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "required": { 
+            "foreground": ("IMAGE",),
+            "mask":("MASK",),
+            "background": ("IMAGE",),
+            },
+                }
+    
+    RETURN_TYPES = ("IMAGE",)
+    RETURN_NAMES = ("IMAGE",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/Layer"
+
+    # OUTPUT_IS_LIST = (True,)
+
+    def run(self, foreground,mask,background):
+        foreground= tensor2pil(foreground)
+        mask= tensor2pil(mask)
+        background= tensor2pil(background)
+        res=composite_images(foreground,background,mask)
+        
+        return (pil2tensor(res),)
+
+
+
+
 class EmptyLayer:
     @classmethod
     def INPUT_TYPES(s):
@@ -1583,7 +1824,7 @@ class NewLayer:
                     "display": "number" # Cosmetic only: display as "number" or "slider"
                 }),
                 "scale_option": (["width","height",'overall'],),
-                "image": ("IMAGE",),
+                "image": (any_type,),
             },
              "optional":{
                     "mask": ("MASK",{"default": None}),
@@ -1640,21 +1881,20 @@ def createMask(image,x,y,w,h):
     # mask.save("mask.png")
     return mask
 
-
 def splitImage(image, num):
     width, height = image.size
 
     num_rows = int(num ** 0.5)
     num_cols = int(num / num_rows)
     
-    grid_width = width // num_cols
-    grid_height = height // num_rows
+    grid_width = int(width // num_cols)
+    grid_height = int(height // num_rows)
 
     grid_coordinates = []
     for i in range(num_rows):
         for j in range(num_cols):
-            x = j * grid_width
-            y = i * grid_height
+            x = int(j * grid_width)
+            y = int(i * grid_height)
             grid_coordinates.append((x, y, grid_width, grid_height))
 
     return grid_coordinates
@@ -1720,17 +1960,24 @@ class SplitImage:
     # OUTPUT_IS_LIST = (True,)
 
     def run(self,image,num,seed):
+        
+        if type(seed) == list and len(seed)==1:
+            seed=seed[0]
+
         image=tensor2pil(image)
         
         grids=splitImage(image,num)
 
         if seed>num:
-            num=int(seed / 500 * num)-1
+            num=seed % (num + 1)
         else:
             num=seed-1
+        
+        print('#SplitImage',seed)
 
         num=max(0,num) 
-
+        num=min(num,len(grids)-1)
+        
         g=grids[num]
 
         x,y,w,h=g
@@ -1797,20 +2044,198 @@ class CenterImage:
 
         return (grid,pil2tensor(mask),)
 
+class GridDisplayAndSave:
+    @classmethod
+    def INPUT_TYPES(s):
+        return { 
+            "required": {
+                "labels": ("STRING", 
+                                        {
+                                            "multiline": True, 
+                                            "default": "",
+                                            "forceInput": True,
+                                            "dynamicPrompts": False
+                                        }),
+                "grids": ("_GRID",),
+                
+                "image": ("IMAGE",),
+                "filename_prefix": ("STRING", {"default": "mixlab/grids"})
+            }
+                }
+    
+    RETURN_TYPES = ( )
+    RETURN_NAMES = ( )
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/Layer"
+
+    INPUT_IS_LIST = True
+    OUTPUT_NODE = True
+    # OUTPUT_IS_LIST = (True,)
+
+    def run(self,labels,grids,image,filename_prefix):
+
+        # print(image.shape)
+
+        img= tensor2pil(image[0])
+
+        for grid in grids:
+            draw_rectangle(img, grid, 'red',8)
+
+        #获取临时目录：temp
+        output_dir = folder_paths.get_temp_directory()
+
+        (
+            full_output_folder,
+            filename,
+            counter,
+            subfolder,
+            _,
+        ) = folder_paths.get_save_image_path('tmp_', output_dir)
+        
+        image_file = f"{filename}_{counter:05}.png"
+
+        image_path=os.path.join(full_output_folder, image_file)
+        # 保存图片
+        img.save(image_path,compress_level=6)
+        width, height = img.size
+
+        (
+            full_output_folder,
+            filename,
+            counter,
+            _,
+            _,
+        ) = folder_paths.get_save_image_path(filename_prefix[0], output_dir)
 
 
+        data_converted = [{
+            "label":labels[i],
+            "grid":[float(grids[i][0]),
+                           float(grids[i][1]),
+                           float(grids[i][2]),
+                           float(grids[i][3])
+                           ]
+        } for i in range(len(grids))]
+
+        data={
+            "width":int(width),
+            "height":int(height),
+            "grids":data_converted
+        }
+
+        save_json_to_file(data,os.path.join(full_output_folder,f"${filename}_{counter:05}.json"))
+
+        return {"ui":{"image": [{
+                "filename": image_file,
+                "subfolder": subfolder,
+                "type":"temp"
+            }],
+            "json":[data["width"],data['height'],data["grids"]]
+            },"result": ()}
+        # return {"ui":{"image": [ ],
+             
+        #     },"result": ()}
+
+class GridInput:
+    @classmethod
+    def INPUT_TYPES(s):
+        return { 
+            "required": {
+                "grids": ("STRING", 
+                                        {
+                                            "multiline": True, 
+                                            "default": "",
+                                            "dynamicPrompts": False
+                                        }),
+                "padding":("INT",{
+                    "default": 24, 
+                    "min": -500, #Minimum value
+                    "max": 5000, #Maximum value
+                    "step": 1, #Slider's step
+                    "display": "number" # Cosmetic only: display as "number" or "slider"
+                }),
+                
+            },
+            "optional":{
+                    "width":("INT",{
+                        "forceInput": True,
+                    }),
+                     "height":("INT",{
+                        "forceInput": True,
+                    }),
+                }
+
+                }
+    
+    RETURN_TYPES = ("_GRID","STRING","IMAGE",)
+    RETURN_NAMES = ("grids","labels","image",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/Input"
+
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,True,False,)
+    OUTPUT_NODE = True
+
+    def run(self,grids,padding,width=[-1],height=[-1]):
+        # print(padding[0],grids[0])
+        width=width[0]
+        height=height[0]
+
+        grids=grids[0]
+        data=json.loads(grids)
+        grids=data['grids']
+
+        if width>-1:
+            data['width']=width
+        if height>-1:
+            data['height']=height
+    
+        new_grids=[]
+        labels=[]
+        
+        for g in grids:
+            labels.append(g['label'])
+            new_grids.append(padding_rectangle(g['grid'],padding[0]))
+
+        image = Image.new("RGB", (int(data['width']),int(data["height"])), "white")
+        im=pil2tensor(image)
+        # image=create_temp_file(im)
+
+        data_converted = [{
+            "label":labels[i],
+            "grid":[float(new_grids[i][0]),
+                           float(new_grids[i][1]),
+                           float(new_grids[i][2]),
+                           float(new_grids[i][3])
+                           ]
+        } for i in range(len(new_grids))]
+
+        # 传递到前端节点的数据 报错,需要处理成 key:[x,x,x,x]
+        return {"ui":{
+            "json":[data["width"],data["height"],data_converted]
+            },"result": (new_grids,labels,im,)}
+    
+        # return (new_grids,labels,pil2tensor(image),)
 
 class GridOutput:
     @classmethod
     def INPUT_TYPES(s):
         return { 
             "required": {
-                "grid": ("_GRID",)
-            }
+                "grid": ("_GRID",),
+                
+            },
+            "optional":{
+                  "bg_image":("IMAGE",)
+                }
                 }
     
-    RETURN_TYPES = ("INT","INT","INT","INT",)
-    RETURN_NAMES = ("x","y","width","height",)
+    RETURN_TYPES = ("INT","INT","INT","INT","MASK",)
+    RETURN_NAMES = ("x","y","width","height","mask",)
 
     FUNCTION = "run"
 
@@ -1819,9 +2244,29 @@ class GridOutput:
     INPUT_IS_LIST = False
     # OUTPUT_IS_LIST = (True,)
 
-    def run(self,grid):
+    def run(self,grid,bg_image=None):
         x,y,w,h=grid
-        return (x,y,w,h,)
+        x=int(x)
+        y=int(y)
+        w=int(w)
+        h=int(h)
+
+        masks=[]
+        if bg_image!=None:
+            for i in range(len(bg_image)):
+                im=bg_image[i]
+                #增加输出mask
+                im=tensor2pil(im)
+                mask=areaToMask(x,y,w,h,im)
+                mask=pil2tensor(mask)
+                masks.append(mask)
+        out=None
+        if len(masks)>0:
+            out = torch.cat(masks, dim=0)
+        return (x,y,w,h,out,)
+
+
+
 
 class ShowLayer:
     @classmethod
@@ -1913,10 +2358,14 @@ class MergeLayers:
     @classmethod
     def INPUT_TYPES(s):
         return {"required": { 
-            "layers": ("LAYER",),
-            "images": ("IMAGE",),
-                             },
-
+                            "layers": ("LAYER",),
+                            "images": ("IMAGE",),
+                                            },
+            "optional":{
+                           
+                            "is_multiply_blend":  ("BOOLEAN", {"default": False}),
+                            
+                    }
                 }
     
     RETURN_TYPES = ("IMAGE","MASK",)
@@ -1929,11 +2378,12 @@ class MergeLayers:
     INPUT_IS_LIST = True
     # OUTPUT_IS_LIST = (False,)
 
-    def run(self,layers,images):
+    def run(self,layers,images,is_multiply_blend):
 
         bg_images=[]
         masks=[]
- 
+        
+        is_multiply_blend=is_multiply_blend[0]
         # print(len(images),images[0].shape)
         # 1  torch.Size([2, 512, 512, 3])
         # 4  torch.Size([1, 1024, 768, 3])
@@ -1964,6 +2414,8 @@ class MergeLayers:
                     
                     layer_image=tensor2pil(image)
                     layer_mask=tensor2pil(mask)
+                    # t=layer_image.convert("RGBA")
+                    # t.save('test.png') 如果layerimage传入的是rgba，则是透明的
                     bg_image=merge_images(bg_image,
                                         layer_image,
                                         layer_mask,
@@ -1971,7 +2423,8 @@ class MergeLayers:
                                         layer['y'],
                                         layer['width'],
                                         layer['height'],
-                                        layer['scale_option']
+                                        layer['scale_option'],
+                                        is_multiply_blend
                                         )
                     
                     final_mask=merge_images(final_mask,
@@ -2218,11 +2671,15 @@ class ResizeImage:
             for ims in image:
                 for im in ims:
                     im=tensor2pil(im)
-                    im=resize_image(im,scale_option,w,h,fill_color)
-                    im=im.convert('RGB')
 
+                    im=im.convert('RGB')
                     a_im,hex=get_average_color_image(im)
 
+                    if average_color=='on':
+                        fill_color=hex
+                        
+                    im=resize_image(im,scale_option,w,h,fill_color)
+
                     im=pil2tensor(im)
                     imgs.append(im)
 
@@ -2322,7 +2779,57 @@ class GetImageSize_:
 
         return (width, height,min_width,min_height,)
 
+class SaveImageAndMetadata:
+    def __init__(self):
+        self.output_dir = folder_paths.get_output_directory()
+        self.type = "output"
+        self.prefix_append = ""
+        self.compress_level = 4
 
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": 
+                    {"images": ("IMAGE", ),
+                     "filename_prefix": ("STRING", {"default": "Mixlab"}),
+                     "metadata": (["disable","enable"],),
+                     },
+                "hidden": {"prompt": "PROMPT", "extra_pnginfo": "EXTRA_PNGINFO"},
+                }
+
+    RETURN_TYPES = ()
+    FUNCTION = "save_images"
+
+    OUTPUT_NODE = True
+
+    CATEGORY = "♾️Mixlab/Output"
+
+    def save_images(self, images, filename_prefix="Mixlab",metadata="disable", prompt=None, extra_pnginfo=None):
+        filename_prefix += self.prefix_append
+        full_output_folder, filename, counter, subfolder, filename_prefix = folder_paths.get_save_image_path(filename_prefix, self.output_dir, images[0].shape[1], images[0].shape[0])
+        results = list()
+        for image in images:
+            i = 255. * image.cpu().numpy()
+            img = Image.fromarray(np.clip(i, 0, 255).astype(np.uint8))
+            metadata = None
+            if (not args.disable_metadata) and (metadata=="enable"):
+                print('##enable_metadata')
+                metadata = PngInfo()
+                if prompt is not None:
+                    metadata.add_text("prompt", json.dumps(prompt))
+                if extra_pnginfo is not None:
+                    for x in extra_pnginfo:
+                        metadata.add_text(x, json.dumps(extra_pnginfo[x]))
+
+            file = f"{filename}_{counter:05}_.png"
+            img.save(os.path.join(full_output_folder, file), pnginfo=metadata, compress_level=self.compress_level)
+            results.append({
+                "filename": file,
+                "subfolder": subfolder,
+                "type": self.type
+            })
+            counter += 1
+
+        return { "ui": { "images": results } }
 
 class ImageColorTransfer:
     @classmethod
@@ -2330,6 +2837,7 @@ class ImageColorTransfer:
         return {"required": {
                 "source": ("IMAGE",),
                 "target": ("IMAGE",),
+                "weight": ("FLOAT", {"default": 0.5, "min": 0.0, "max": 1.0, "step": 0.01}),
                 },
                 }
     
@@ -2340,28 +2848,48 @@ class ImageColorTransfer:
     FUNCTION = "run"
 
     # 右键菜单目录
-    CATEGORY = "♾️Mixlab/Image"
+    CATEGORY = "♾️Mixlab/Color"
 
     # 输入是否为列表
-    INPUT_IS_LIST = True
+    # INPUT_IS_LIST = True
 
     # 输出是否为列表
-    OUTPUT_IS_LIST = (True,)
+    # OUTPUT_IS_LIST = (True,)
 
-    def run(self,source,target):
+    def run(self,source,target,weight):
 
         res=[]
 
-        target=target[0][0]
-        print(target.shape)
-        target=tensor2pil(target)
+        #batch-list
+        source_list = [source[i:i + 1, ...] for i in range(source.shape[0])]
+        target_list = [target[i:i + 1, ...] for i in range(target.shape[0])]
 
-        for ims in source:
-            for im in ims:
-                image=tensor2pil(im)
-                image=color_transfer(image,target)
-                image=pil2tensor(image)
-                res.append(image)
+        # 长度纠正为相等
+        if len(target_list) != len(source_list):
+            target_list = target_list * (len(source_list) // len(target_list)) + target_list[:len(source_list) % len(target_list)]
+        
+        for i in range(len(source_list)):
+            target=target_list[i]
+            source=source_list[i]
+            target=tensor2pil(target)
+
+            image=tensor2pil(source)
+
+            image_res=color_transfer(image,target)
+
+            # weight Blend image # contributors:@ning
+            blend_mask = Image.new(mode="L", size=image.size,
+                                    color=(round(weight * 255)))
+            blend_mask = ImageOps.invert(blend_mask)
+            img_result = Image.composite(image, image_res, blend_mask)
+            del image, image_res, blend_mask
+            
+            img_result=pil2tensor(img_result)
+
+            res.append(img_result)
+
+        # list - batch
+        res=torch.cat(res, dim=0)
 
         return (res,)
 
@@ -2388,7 +2916,7 @@ class SaveImageToLocal:
 
     OUTPUT_NODE = True
 
-    CATEGORY = "♾️Mixlab/Image"
+    CATEGORY = "♾️Mixlab/Output"
 
     def save_images(self, images,file_path , prompt=None, extra_pnginfo=None):
         filename_prefix = os.path.basename(file_path)

nodes/Mask.py

@@ -2,16 +2,14 @@
 import scipy.ndimage
 import torch
 
-from nodes import MAX_RESOLUTION
-
 import numpy as np 
 # from PIL import Image, ImageDraw
 from PIL import Image, ImageOps 
 
 from comfy.cli_args import args
-import cv2
-
-
+import cv2,os
+from nodes import MAX_RESOLUTION, SaveImage, common_ksampler
+import folder_paths,random
 
 # Tensor to PIL
 def tensor2pil(image):
@@ -22,6 +20,19 @@ def pil2tensor(image):
     return torch.from_numpy(np.array(image).astype(np.float32) / 255.0).unsqueeze(0)
 
 
+def add_masks(mask1, mask2):
+    mask1 = mask1.cpu()
+    mask2 = mask2.cpu()
+    cv2_mask1 = np.array(mask1) * 255
+    cv2_mask2 = np.array(mask2) * 255
+
+    if cv2_mask1.shape == cv2_mask2.shape:
+        cv2_mask = cv2.add(cv2_mask1, cv2_mask2)
+        return torch.clamp(torch.from_numpy(cv2_mask) / 255.0, min=0, max=1)
+    else:
+        return mask1
+    
+
 def grow(mask, expand, tapered_corners):
     c = 0 if tapered_corners else 1
     kernel = np.array([[c, 1, c],
@@ -58,6 +69,35 @@ def combine(destination, source, x, y):
 
     return output
 
+
+class PreviewMask_(SaveImage):
+    def __init__(self):
+        self.output_dir = folder_paths.get_temp_directory()
+        self.type = "temp"
+        self.prefix_append =''.join(random.choice("abcdehijklmnopqrstupvxyzfg") for x in range(5))
+        self.compress_level = 4
+
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+                "required": {
+                                "mask": ("MASK",), 
+                            }
+            }
+    
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    FUNCTION = "run"
+    CATEGORY = "♾️Mixlab/Mask"
+
+    # 运行的函数
+    def run(self, mask ):
+        img=tensor2pil(mask)
+        img=img.convert('RGB')
+        img=pil2tensor(img) 
+        return self.save_images(img, 'temp_', None,  None)
+
+
 class OutlineMask:
 
     @classmethod
@@ -87,6 +127,69 @@ class OutlineMask:
         return (m3,)
     
 
+class MaskListReplace:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+            "masks": ("MASK",),
+            "mask_replace": ("MASK",),
+            "start_index":("INT", {"default": 0, "min": 0, "step": 1}),
+            "end_index":("INT", {"default": 0, "min": 0, "step": 1}),
+            "invert": ("BOOLEAN", {"default": False}),
+        }
+        }
+
+    RETURN_TYPES = ("MASK",)
+    FUNCTION = "run"
+    CATEGORY = "♾️Mixlab/Video"
+
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,)
+
+    def run(self, masks,mask_replace,start_index,end_index,invert):
+        mask_replace=mask_replace[0]
+        start_index=start_index[0]
+        end_index=end_index[0]
+        invert=invert[0]
+        
+        new_masks=[]
+        for i in range(len(masks)):
+            if i>=start_index and i<=end_index:
+                if invert:
+                    new_masks.append(masks[i])
+                else:
+                    new_masks.append(mask_replace)
+            else:
+                if invert:
+                    new_masks.append(mask_replace)
+                else:
+                    new_masks.append(masks[i])
+
+        return (new_masks,)
+
+
+class MaskListMerge:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+            "masks": ("MASK",),
+        }
+        }
+
+    RETURN_TYPES = ("MASK",)
+    FUNCTION = "run"
+    CATEGORY = "♾️Mixlab/Mask"
+
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (False,)
+
+    def run(self, masks):
+        mask=masks[0]
+        if isinstance(masks, list):
+            for m in masks:
+                # print(m.shape)
+                mask = add_masks(mask, m)
+        return (mask,)
 
 
 class FeatheredMask:

nodes/PromptNode.py

@@ -189,7 +189,7 @@ class PromptImage:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Prompt"
+    CATEGORY = "♾️Mixlab/Output"
 
     # 运行的函数
     def run(self,prompts,images,save_to_image):
@@ -514,7 +514,7 @@ class RandomPrompt:
 #         return (lora_name,prompt,output_tags.split(','),)
 
 
-import folder_paths
+
 class EmbeddingPrompt:
     @classmethod
     def INPUT_TYPES(s):
@@ -546,7 +546,112 @@ class EmbeddingPrompt:
         # return (new_prompt)
         return (prompt,)
 
-RETURN_TYPES = (any_type,)
+# RETURN_TYPES = (any_type,)
+    
+# conditioning ：提示，正向or负向
+# clip：clip模型
+# gligen_textbox_model：gligen模型
+# grids：矩形框的集合
+# labels：每个矩形框对应的标签的集合
+# index：选取第几个矩形框作为gligen的box
+
+class GLIGENTextBoxApply_Advanced:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {"conditioning": ("CONDITIONING", ),
+                              "clip": ("CLIP", ),
+                              "gligen_textbox_model": ("GLIGEN", ),
+                              "grids": ("_GRID",),
+                              "labels": ("STRING", 
+                                        {
+                                            "multiline": True, 
+                                            "default": "",
+                                            "forceInput": True
+                                        }),
+                              "index": ("INT", {"default": -1, "min": -1, "max": 300, "step": 1}),
+                              "max_size": ("INT", {"default": 8, "min": 1, "max": 300, "step": 1}),
+                              "random_shuffle":(["on","off"],),
+                             },
+                 "optional":{
+                    "seed": (any_type,  {"default": 0, "min": 0, "max": 0xffffffffffffffff,"step": 1}),
+                } 
+                            }
+    RETURN_TYPES = ("CONDITIONING","STRING",)
+    RETURN_NAMES = ("CONDITIONING","label",)
+
+    FUNCTION = "run"
+    # INPUT_IS_LIST = True
+    CATEGORY = "♾️Mixlab/Prompt"
+
+    def run(self, conditioning, clip, gligen_textbox_model, grids, labels, index,max_size,random_shuffle,seed=0):
+        # print('grids',grids)
+        # conditioning=conditioning[0]
+        # clip=clip[0]
+        # gligen_textbox_model=gligen_textbox_model[0]
+        # index=index[0]
+        # max_size=max_size[0]
+        # random_shuffle=random_shuffle[0]
+
+        texts=labels
+        
+        if index>-1:
+            texts=[labels[index]]
+            grids=[grids[index]]
+
+        if random_shuffle=='on':
+            sss=[[texts[i],grids[i]] for i in range(len(texts))]
+            random.shuffle(sss)
+            texts=[s[0] for s in sss]
+            grids=[s[1] for s in sss]
+
+        if len(texts) > max_size:
+            texts = texts[:max_size]
+
+        c = []
+        
+        for t in conditioning:
+            n = [t[0], t[1].copy()]
+
+
+            # 多个
+            position_params=[]
+            for i in range(len(texts)):
+                text=texts[i]
+                grid=grids[i]
+                x,y,width,height=grid
+                # print(text)
+                cond, cond_pooled = clip.encode_from_tokens(clip.tokenize(text), return_pooled=True)
+                position_params =position_params+ [(cond_pooled, height // 8, width // 8, y // 8, x // 8)]
+
+            # 前一个
+            prev = []
+            if "gligen" in n[1]:
+                prev = n[1]['gligen'][2]
+
+            n[1]['gligen'] = ("position", gligen_textbox_model, prev + position_params)
+            # print('gligen',n)
+            c.append(n)
+        
+        #  下面这个写法有bug
+        # for i in range(len(texts)):
+        #     text=texts[i]
+        #     grid=grids[i]
+        #     x,y,width,height=grid
+
+        #     cond, cond_pooled = clip.encode_from_tokens(clip.tokenize(text), return_pooled=True)
+        #     for t in conditioning:
+        #         n = [t[0], t[1].copy()]
+        #         position_params = [(cond_pooled, height // 8, width // 8, y // 8, x // 8)]
+        #         prev = []
+        #         if "gligen" in n[1]:
+        #             prev = n[1]['gligen'][2]
+
+        #         n[1]['gligen'] = ("position", gligen_textbox_model, prev + position_params)
+        #         c.append(n)
+
+
+        return (c,texts, )
+    
 
 class JoinWithDelimiter:
     @classmethod
@@ -561,7 +666,7 @@ class JoinWithDelimiter:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Prompt"
+    CATEGORY = "♾️Mixlab/Text"
 
     INPUT_IS_LIST = True # 当true的时候，输入时list，当false的时候，如果输入是list，则会自动包一层for循环调用
     OUTPUT_IS_LIST = (False,)

nodes/ScreenShareNode.py

@@ -93,7 +93,7 @@ class ScreenShareNode:
     RETURN_NAMES = ("IMAGE","PROMPT","FLOAT","INT")
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Image"
+    CATEGORY = "♾️Mixlab/Screen"
 
     # INPUT_IS_LIST = True
     OUTPUT_IS_LIST = (False,False,False,False)
@@ -118,7 +118,7 @@ class FloatingVideo:
     OUTPUT_NODE = True
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Image"
+    CATEGORY = "♾️Mixlab/Screen"
 
     # INPUT_IS_LIST = True
     # OUTPUT_IS_LIST = (False,False,)

nodes/Style.py

@@ -0,0 +1,503 @@
+import comfy
+import torch
+
+from dataclasses import dataclass
+import torch.nn as nn
+from comfy.model_patcher import ModelPatcher
+import comfy.ops
+from typing import Union
+import comfy.sample
+import latent_preview
+import comfy.utils
+
+T = torch.Tensor
+
+
+from .VisualStylePrompting.attention_functions import VisualStyleProcessor
+
+class ApplyVisualStylePrompting:
+
+    @classmethod
+    def INPUT_TYPES(s):
+        return {
+            "required": {
+                "reference_image": ("IMAGE",),
+                "reference_image_text": ("STRING", {"multiline": True}),
+                "model": ("MODEL",),
+                "clip": ("CLIP", ),
+                "vae": ("VAE", ),
+                "positive": ("CONDITIONING",),
+                "negative": ("CONDITIONING", ),
+                "enabled": ("BOOLEAN", {"default": True}),
+                "denoise": ("FLOAT", {"default": 1., "min": 0., "max": 1., "step": 1e-2}),
+                "batch_size": ("INT", {"default": 1, "min": 1, "max": 4096,"step":2})
+            }
+        }
+
+    RETURN_TYPES = ("MODEL", "CONDITIONING","CONDITIONING", "LATENT")
+    RETURN_NAMES = ("model", "positive", "negative", "latents")
+    
+    CATEGORY = "♾️Mixlab/Style"
+
+    FUNCTION = "run"
+
+    def run(
+        self, 
+        reference_image, 
+        reference_image_text,
+        model: comfy.model_patcher.ModelPatcher, 
+        clip,
+        vae,
+        positive,
+        negative, 
+        enabled,
+        denoise,
+        batch_size=1
+    ):
+        
+        tokens = clip.tokenize(reference_image_text)
+        cond, pooled = clip.encode_from_tokens(tokens, return_pooled=True)
+        reference_image_prompt=[[cond, {"pooled_output": pooled}]]
+   
+        reference_image = reference_image.repeat(((batch_size+1)//2, 1,1,1))
+
+        self.model = model
+        reference_latent = vae.encode(reference_image[:,:,:,:3])
+        
+        for n, m in model.model.diffusion_model.named_modules():
+            if m.__class__.__name__  == "CrossAttention":
+                processor = VisualStyleProcessor(m, enabled=enabled)
+                setattr(m, 'forward', processor.visual_style_forward)
+
+        conditioning_prompt = reference_image_prompt + positive
+        negative_prompt = negative * 2 
+
+        latents = torch.zeros_like(reference_latent) 
+        latents = torch.cat([latents] * 2)
+
+        if denoise < 1.0:
+            latents[::1] = reference_latent[:1]
+        else:
+            latents[::2] = reference_latent
+
+        denoise_mask = torch.ones_like(latents)[:, :1, ...] * denoise
+
+        denoise_mask[0] = 0.
+
+        return (model, conditioning_prompt, negative_prompt, {"samples": latents, "noise_mask": denoise_mask})    
+
+
+
+
+
+def exists(val):
+    return val is not None
+
+def default(val, d):
+    if exists(val):
+        return val
+    return d
+
+
+class StyleAlignedArgs:
+    def __init__(self, share_attn: str) -> None:
+        self.adain_keys = "k" in share_attn
+        self.adain_values = "v" in share_attn
+        self.adain_queries = "q" in share_attn
+
+    share_attention: bool = True
+    adain_queries: bool = True
+    adain_keys: bool = True
+    adain_values: bool = True
+
+
+def expand_first(
+    feat: T,
+    scale=1.0,
+) -> T:
+    """
+    Expand the first element so it has the same shape as the rest of the batch.
+    """
+    b = feat.shape[0]
+    feat_style = torch.stack((feat[0], feat[b // 2])).unsqueeze(1)
+    if scale == 1:
+        feat_style = feat_style.expand(2, b // 2, *feat.shape[1:])
+    else:
+        feat_style = feat_style.repeat(1, b // 2, 1, 1, 1)
+        feat_style = torch.cat([feat_style[:, :1], scale * feat_style[:, 1:]], dim=1)
+    return feat_style.reshape(*feat.shape)
+
+
+def concat_first(feat: T, dim=2, scale=1.0) -> T:
+    """
+    concat the the feature and the style feature expanded above
+    """
+    feat_style = expand_first(feat, scale=scale)
+    return torch.cat((feat, feat_style), dim=dim)
+
+
+def calc_mean_std(feat, eps: float = 1e-5) -> "tuple[T, T]":
+    feat_std = (feat.var(dim=-2, keepdims=True) + eps).sqrt()
+    feat_mean = feat.mean(dim=-2, keepdims=True)
+    return feat_mean, feat_std
+
+def adain(feat: T) -> T:
+    feat_mean, feat_std = calc_mean_std(feat)
+    feat_style_mean = expand_first(feat_mean)
+    feat_style_std = expand_first(feat_std)
+    feat = (feat - feat_mean) / feat_std
+    feat = feat * feat_style_std + feat_style_mean
+    return feat
+
+class SharedAttentionProcessor:
+    def __init__(self, args: StyleAlignedArgs, scale: float):
+        self.args = args
+        self.scale = scale
+
+    def __call__(self, q, k, v, extra_options):
+        if self.args.adain_queries:
+            q = adain(q)
+        if self.args.adain_keys:
+            k = adain(k)
+        if self.args.adain_values:
+            v = adain(v)
+        if self.args.share_attention:
+            k = concat_first(k, -2, scale=self.scale)
+            v = concat_first(v, -2)
+
+        return q, k, v
+
+
+def get_norm_layers(
+    layer: nn.Module,
+    norm_layers_: "dict[str, list[Union[nn.GroupNorm, nn.LayerNorm]]]",
+    share_layer_norm: bool,
+    share_group_norm: bool,
+):
+    if isinstance(layer, nn.LayerNorm) and share_layer_norm:
+        norm_layers_["layer"].append(layer)
+    if isinstance(layer, nn.GroupNorm) and share_group_norm:
+        norm_layers_["group"].append(layer)
+    else:
+        for child_layer in layer.children():
+            get_norm_layers(
+                child_layer, norm_layers_, share_layer_norm, share_group_norm
+            )
+
+
+def register_norm_forward(
+    norm_layer: Union[nn.GroupNorm, nn.LayerNorm],
+) -> Union[nn.GroupNorm, nn.LayerNorm]:
+    if not hasattr(norm_layer, "orig_forward"):
+        setattr(norm_layer, "orig_forward", norm_layer.forward)
+    orig_forward = norm_layer.orig_forward
+
+    def forward_(hidden_states: T) -> T:
+        n = hidden_states.shape[-2]
+        hidden_states = concat_first(hidden_states, dim=-2)
+        hidden_states = orig_forward(hidden_states)  # type: ignore
+        return hidden_states[..., :n, :]
+
+    norm_layer.forward = forward_  # type: ignore
+    return norm_layer
+
+
+def register_shared_norm(
+    model: ModelPatcher,
+    share_group_norm: bool = True,
+    share_layer_norm: bool = True,
+):
+    norm_layers = {"group": [], "layer": []}
+    get_norm_layers(model.model, norm_layers, share_layer_norm, share_group_norm)
+    print(
+        f"Patching {len(norm_layers['group'])} group norms, {len(norm_layers['layer'])} layer norms."
+    )
+    return [register_norm_forward(layer) for layer in norm_layers["group"]] + [
+        register_norm_forward(layer) for layer in norm_layers["layer"]
+    ]
+
+
+SHARE_NORM_OPTIONS = ["both", "group", "layer", "disabled"]
+SHARE_ATTN_OPTIONS = ["q+k", "q+k+v", "disabled"]
+
+class StyleAlignedSampleReferenceLatents:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required":
+                    { 
+                    "reference_image": ("IMAGE",),
+                    "positive": ("CONDITIONING",),
+                    "negative": ("CONDITIONING", ),
+                    "model": ("MODEL",),
+                    "vae": ("VAE", ),
+                    "seed": ("INT", {"default": 0, "min": 0, "max": 0xffffffffffffffff}),
+                    "steps": ("INT", {"default": 20, "min": 1, "max": 10000}),
+                    "cfg": ("FLOAT", {"default": 8.0, "min": 0.0, "max": 100.0, "step":0.1, "round": 0.01}),
+
+                    "scheduler": (comfy.samplers.KSampler.SCHEDULERS.reverse(), ), 
+                    "denoise": ("FLOAT", {"default": 1, "min": 0.0, "max": 1.0, "step": 0.01}),
+                    
+                     }
+                }
+
+    RETURN_TYPES = ("STEP_LATENTS","LATENT")
+    RETURN_NAMES = ("ref_latents", "noised_output")
+
+    FUNCTION = "run"
+
+    # CATEGORY = "style_aligned"
+    CATEGORY = "♾️Mixlab/Style"
+
+    def run(self, reference_image, positive, negative, model, vae, seed, steps, cfg,scheduler,denoise):
+
+        # TODO noise_mask?
+        def vae_encode_crop_pixels(pixels):
+            x = (pixels.shape[1] // 8) * 8
+            y = (pixels.shape[2] // 8) * 8
+            if pixels.shape[1] != x or pixels.shape[2] != y:
+                x_offset = (pixels.shape[1] % 8) // 2
+                y_offset = (pixels.shape[2] % 8) // 2
+                pixels = pixels[:, x_offset:x + x_offset, y_offset:y + y_offset, :]
+            return pixels
+
+        pixels=vae_encode_crop_pixels(reference_image)
+        t = vae.encode(pixels[:,:,:,:3])
+        latent_image =  {"samples":t}
+
+        noise_seed=seed
+
+        sampler_name="ddim"
+        
+        sampler = comfy.samplers.sampler_object(sampler_name)
+
+        total_steps = steps
+        if denoise < 1.0:
+            total_steps = int(steps/denoise)
+
+        comfy.model_management.load_models_gpu([model])
+        sigmas = comfy.samplers.calculate_sigmas_scheduler(model.model, scheduler, total_steps).cpu()
+        sigmas = sigmas[-(steps + 1):]
+
+        sigmas = sigmas.flip(0)
+        if sigmas[0] == 0:
+            sigmas[0] = 0.0001
+
+        latent = latent_image
+        latent_image = latent["samples"]
+        noise = torch.zeros(latent_image.size(), dtype=latent_image.dtype, layout=latent_image.layout, device="cpu")
+
+    
+        noise_mask = None
+        if "noise_mask" in latent:
+            noise_mask = latent["noise_mask"]
+
+        ref_latents = []
+        def callback(step: int, x0: T, x: T, steps: int):
+            ref_latents.insert(0, x[0])
+        
+        disable_pbar = not comfy.utils.PROGRESS_BAR_ENABLED
+        samples = comfy.sample.sample_custom(model, noise, cfg, sampler, sigmas, positive, negative, latent_image, noise_mask=noise_mask, callback=callback, disable_pbar=disable_pbar, seed=noise_seed)
+
+        out = latent.copy()
+        out["samples"] = samples
+        out_noised = out
+
+        ref_latents = torch.stack(ref_latents)
+
+        return (ref_latents, out_noised)
+
+class StyleAlignedReferenceSampler:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+
+                "ref_latents": ("STEP_LATENTS",),
+                "reference_image_text": ("STRING", {"multiline": True}),
+                "model": ("MODEL",),
+                "clip": ("CLIP", ),
+
+                "positive": ("CONDITIONING",),
+                "negative": ("CONDITIONING",),
+
+                "share_norm": (SHARE_NORM_OPTIONS,),
+                "share_attn": (SHARE_ATTN_OPTIONS,),
+                "scale": ("FLOAT", {"default": 1, "min": 0, "max": 2.0, "step": 0.01}),
+                "batch_size": ("INT", {"default": 2, "min": 1, "max": 8, "step": 1}),
+                "seed": ("INT", {"default": 0, "min": 0, "max": 0xffffffffffffffff}),
+                "steps": ("INT", {"default": 20, "min": 1, "max": 10000}),
+                "cfg": ("FLOAT", {"default": 8.0, "min": 0.0, "max": 100.0, "step":0.1, "round": 0.01}),
+                "scheduler": (comfy.samplers.KSampler.SCHEDULERS, ), 
+                "denoise": ("FLOAT", {"default": 1.0, "min": 0.0, "max": 1.0, "step": 0.01}),
+            },
+        }
+
+    RETURN_TYPES = ("LATENT", "LATENT")
+    RETURN_NAMES = ("output", "denoised_output")
+    FUNCTION = "patch"
+    # CATEGORY = "style_aligned"
+    CATEGORY = "♾️Mixlab/Style"
+    def patch(
+        self,
+        ref_latents,
+        reference_image_text,
+        model,
+        clip,
+        positive,
+        negative,
+        share_norm,
+        share_attn,
+        scale,
+        batch_size,
+        seed,steps,cfg,scheduler,denoise
+
+    ) -> "tuple[dict, dict]":
+        
+        m = model.clone()
+
+        # ref_latents = vae.encode(reference_image[:,:,:,:3])
+
+        tokens = clip.tokenize(reference_image_text)
+        cond, pooled = clip.encode_from_tokens(tokens, return_pooled=True)
+        ref_positive=[[cond, {"pooled_output": pooled}]]
+
+        noise_seed=seed
+
+
+        total_steps = steps
+        if denoise < 1.0:
+            total_steps = int(steps/denoise)
+
+        # comfy.model_management.load_models_gpu([model])
+        sigmas = comfy.samplers.calculate_sigmas_scheduler(model.model, scheduler, total_steps).cpu()
+        sigmas = sigmas[-(steps + 1):]
+
+        sampler_name="ddim"
+        
+        sampler = comfy.samplers.sampler_object(sampler_name)
+
+        args = StyleAlignedArgs(share_attn)
+
+        # Concat batch with style latent
+        style_latent_tensor = ref_latents[0].unsqueeze(0)
+        height, width = style_latent_tensor.shape[-2:]
+        latent_t = torch.zeros(
+            [batch_size, 4, height, width], device=ref_latents.device
+        )
+        latent = {"samples": latent_t}
+        noise = comfy.sample.prepare_noise(latent_t, noise_seed)
+
+        latent_t = torch.cat((style_latent_tensor, latent_t), dim=0)
+        ref_noise = torch.zeros_like(noise[0]).unsqueeze(0)
+        noise = torch.cat((ref_noise, noise), dim=0)
+
+        x0_output = {}
+        preview_callback = latent_preview.prepare_callback(m, sigmas.shape[-1] - 1, x0_output)
+
+        # Replace first latent with the corresponding reference latent after each step
+        def callback(step: int, x0: T, x: T, steps: int):
+            preview_callback(step, x0, x, steps)
+            if (step + 1 < steps):
+                # 当ref_latents的step不够时
+                if step+1>len(ref_latents)-1:
+                    step=len(ref_latents)-2
+                
+                x[0] = ref_latents[step+1]
+                x0[0] = ref_latents[step+1]
+
+        # Register shared norms
+        share_group_norm = share_norm in ["group", "both"]
+        share_layer_norm = share_norm in ["layer", "both"]
+        register_shared_norm(m, share_group_norm, share_layer_norm)
+
+        # Patch cross attn
+        m.set_model_attn1_patch(SharedAttentionProcessor(args, scale))
+
+        # Add reference conditioning to batch 
+        batched_condition = []
+        for i,condition in enumerate(positive):
+            additional = condition[1].copy()
+            batch_with_reference = torch.cat([ref_positive[i][0], condition[0].repeat([batch_size] + [1] * len(condition[0].shape[1:]))], dim=0)
+            if 'pooled_output' in additional and 'pooled_output' in ref_positive[i][1]:
+                # combine pooled output
+                pooled_output = torch.cat([ref_positive[i][1]['pooled_output'], additional['pooled_output'].repeat([batch_size] 
+                    + [1] * len(additional['pooled_output'].shape[1:]))], dim=0)
+                additional['pooled_output'] = pooled_output
+            if 'control' in additional:
+                if 'control' in ref_positive[i][1]:
+                    # combine control conditioning
+                    control_hint = torch.cat([ref_positive[i][1]['control'].cond_hint_original, additional['control'].cond_hint_original.repeat([batch_size] 
+                        + [1] * len(additional['control'].cond_hint_original.shape[1:]))], dim=0)
+                    cloned_controlnet = additional['control'].copy()
+                    cloned_controlnet.set_cond_hint(control_hint, strength=additional['control'].strength, timestep_percent_range=additional['control'].timestep_percent_range)
+                    additional['control'] = cloned_controlnet
+                else:
+                    # add zeros for first in batch
+                    control_hint = torch.cat([torch.zeros_like(additional['control'].cond_hint_original), additional['control'].cond_hint_original.repeat([batch_size] 
+                        + [1] * len(additional['control'].cond_hint_original.shape[1:]))], dim=0)
+                    cloned_controlnet = additional['control'].copy()
+                    cloned_controlnet.set_cond_hint(control_hint, strength=additional['control'].strength, timestep_percent_range=additional['control'].timestep_percent_range)
+                    additional['control'] = cloned_controlnet
+            batched_condition.append([batch_with_reference, additional])
+
+        disable_pbar = not comfy.utils.PROGRESS_BAR_ENABLED
+        samples = comfy.sample.sample_custom(
+            m,
+            noise,
+            cfg,
+            sampler,
+            sigmas,
+            batched_condition,
+            negative,
+            latent_t,
+            callback=callback,
+            disable_pbar=disable_pbar,
+            seed=noise_seed,
+        )
+
+        # remove reference image
+        samples = samples[1:]
+
+        out = latent.copy()
+        out["samples"] = samples
+        if "x0" in x0_output:
+            out_denoised = latent.copy()
+            x0 = x0_output["x0"][1:]
+            out_denoised["samples"] = m.model.process_latent_out(x0.cpu())
+        else:
+            out_denoised = out
+        return (out, out_denoised)
+
+
+class StyleAlignedBatchAlign:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "model": ("MODEL",),
+                "share_norm": (SHARE_NORM_OPTIONS,),
+                "share_attn": (SHARE_ATTN_OPTIONS,),
+                "scale": ("FLOAT", {"default": 1, "min": 0, "max": 1.0, "step": 0.1}),
+            }
+        }
+
+    RETURN_TYPES = ("MODEL",)
+    FUNCTION = "patch"
+    # CATEGORY = "style_aligned"
+    CATEGORY = "♾️Mixlab/Style"
+    def patch(
+        self,
+        model: ModelPatcher,
+        share_norm: str,
+        share_attn: str,
+        scale: float,
+    ):
+        m = model.clone()
+        share_group_norm = share_norm in ["group", "both"]
+        share_layer_norm = share_norm in ["layer", "both"]
+        register_shared_norm(model, share_group_norm, share_layer_norm)
+        args = StyleAlignedArgs(share_attn)
+        m.set_model_attn1_patch(SharedAttentionProcessor(args, scale))
+        return (m,)
+
+

nodes/TextGenerateNode.py

@@ -12,6 +12,8 @@ import comfy.utils
 # import numpy as np
 import torch
 import random
+from lark import Lark, Transformer, v_args
+
 
 global _available
 _available=True
@@ -109,7 +111,7 @@ def text_generate(text_pipe,input,seed=None):
     
 import re
 
-def correct_prompt_syntax(prompt):
+def correct_prompt_syntax(prompt=""):
 
     # print("input prompt",prompt)
     corrected_elements = []
@@ -191,7 +193,7 @@ NUMBER: /\s*-?\d+(\.\d+)?\s*/
 WORD: /[^,:\(\)\[\]<>]+/
 """
 
-from lark import Lark, Transformer, v_args
+
 
 @v_args(inline=True)  # Decorator to flatten the tree directly into the function arguments
 class ChinesePromptTranslate(Transformer):
@@ -304,7 +306,6 @@ class ChinesePrompt:
         pbar = comfy.utils.ProgressBar(len(text)+1)
         texts = [correct_prompt_syntax(t) for t in text]
 
-
         global text_pipe,zh_en_model,zh_en_tokenizer
         if zh_en_model==None:
             zh_en_model = AutoModelForSeq2SeqLM.from_pretrained(zh_en_model_path).eval()
@@ -323,13 +324,14 @@ class ChinesePrompt:
         en_texts=[]
 
         for t in texts:
-            # translated_text =  translated_word = translate(zh_en_tokenizer,zh_en_model,str(t))
-            parser = Lark(grammar, start="start", parser="lalr", transformer=ChinesePromptTranslate())
-            # print('t',t)
-            result = parser.parse(t).children
-            # print('en_result',result)        
-            # en_text=translate(zh_en_tokenizer,zh_en_model,text_without_syntax)
-            en_texts.append(result[0])
+            if t:
+                # translated_text =  translated_word = translate(zh_en_tokenizer,zh_en_model,str(t))
+                parser = Lark(grammar, start="start", parser="lalr", transformer=ChinesePromptTranslate())
+                # print('t',t)
+                result = parser.parse(t).children
+                # print('en_result',result)        
+                # en_text=translate(zh_en_tokenizer,zh_en_model,text_without_syntax)
+                en_texts.append(result[0])
 
         zh_en_model.to('cpu')
         print("test en_text",en_texts)
@@ -352,7 +354,8 @@ class ChinesePrompt:
 
         print('prompt_result',prompt_result,)
         # prompt_result = [','.join(correct_prompt_syntax(p)) for p in prompt_result]
-        
+        if len(prompt_result)==0:
+            prompt_result=[""]
         return {
             "ui":{
                     "prompt": prompt_result

nodes/Utils.py

@@ -8,6 +8,18 @@ import matplotlib.font_manager as fm
 import torch
 import importlib.util
 
+def create_incrementing_list(min_value, max_value, step, count):
+    l1 = [int(min_value + i * step) for i in range(count) if min_value + i * step <= max_value]
+    l2 = [float(min_value + i * step) for i in range(count) if min_value + i * step <= max_value]
+    return (l1,l2)
+
+def split_list(lst, chunk_size, transition_size):
+    result = []
+    for i in range(0, len(lst), chunk_size):
+        start = i - transition_size
+        end = i + chunk_size + transition_size
+        result.append(lst[max(start, 0):end])
+    return result
 
 def recursive_search(directory, excluded_dir_names=None):
     if not os.path.isdir(directory):
@@ -146,7 +158,6 @@ class ColorInput:
     @classmethod
     def INPUT_TYPES(s):
         return {"required": { 
-             
                     "color":("TCOLOR",), 
                              },
                 }
@@ -156,7 +167,7 @@ class ColorInput:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Color"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,False,False,False,False,)
@@ -185,7 +196,7 @@ class FontInput:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -218,7 +229,7 @@ class TextToNumber:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Text"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -273,10 +284,10 @@ class FloatSlider:
                 }
     
     RETURN_TYPES = ("FLOAT",) 
-
+    RETURN_NAMES = ('weight(0-1)',)
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -329,7 +340,7 @@ class IntNumber:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -389,7 +400,7 @@ class TextInput:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -398,6 +409,61 @@ class TextInput:
        
         return (text,)
     
+
+class IncrementingListNode:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+                    "min_value": ("FLOAT", {
+                        "default": 0, 
+                        "min": -2000, #Minimum value
+                        "max": 0xffffffffffffffff,
+                        "step": 0.01, #Slider's step
+                        "display": "number" # Cosmetic only: display as "number" or "slider"
+                    }),
+                    "max_value": ("FLOAT", {
+                        "default": 10, 
+                        "min": -2000, #Minimum value
+                        "max": 0xffffffffffffffff,
+                        "step": 0.01, #Slider's step
+                        "display": "number" # Cosmetic only: display as "number" or "slider"
+                    }),
+                    "step": ("FLOAT", {
+                        "default": 0, 
+                        "min": -2000, #Minimum value
+                        "max": 0xffffffffffffffff,
+                        "step": 0.01, #Slider's step
+                        "display": "number" # Cosmetic only: display as "number" or "slider"
+                    }),
+                    "count": ("INT", {
+                        "default": 1, 
+                        "min": 1, #Minimum value
+                        "max": 0xffffffffffffffff,
+                        "step":1, #Slider's step
+                        "display": "number" # Cosmetic only: display as "number" or "slider"
+                    })
+                             },
+                             "optional":{
+                    "seed":("INT", {"default": -1, "min": -1, "max": 1000000}), 
+                    
+                },
+                }
+    
+    RETURN_TYPES = ("INT","FLOAT",) 
+    RETURN_NAMES = ('int_list','float_list',)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/Video"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (True,True,)
+
+    def run(self,min_value,max_value,step,count,seed):
+        print('create_incrementing_list',seed)
+        l1,l2=create_incrementing_list(min_value,max_value,step,count)
+        return (l1,l2,)
+    
 # 接收一个值，然后根据字符串或数值长度计算延迟时间，用户可以自定义延迟"字/s"，延迟之后将转化
 
 import comfy.samplers
@@ -577,14 +643,14 @@ class SwitchByIndex:
         }
 
     RETURN_TYPES = (any_type,"INT",)
-    RETURN_NAMES = ("C","count",)
+    RETURN_NAMES = ("list", "count",)
 
     FUNCTION = "run"
 
     CATEGORY = "♾️Mixlab/Utils"
 
     INPUT_IS_LIST = True
-    OUTPUT_IS_LIST = (True,False,)
+    OUTPUT_IS_LIST = (True, False,)
 
     def run(self, A=[],B=[],index=-1,flat='on'):
 
@@ -605,10 +671,43 @@ class SwitchByIndex:
             try:
                 C=[C[index]]
             except Exception as e:
-                C=[]
+                C=[C[-1]] #最后一个
 
-        return (C,len(C),)
+        return (C, len(C),)
 
+class ListSplit:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+             "optional":{
+                  "A":(any_type,), 
+            },
+            "required": { 
+                "chunk_size": ("INT", {"default": 10, "min": 1, "step": 1}),
+                "transition_size": ("INT", {"default": 0, "min": 0, "step": 1}),
+                "index": ("INT", {"default": -1, "min": -1, "step": 1}),
+            }
+        }
+
+    RETURN_TYPES = (any_type,)
+    RETURN_NAMES = ("B",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/Utils"
+
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,)
+
+    def run(self, A=[],chunk_size=[10],transition_size=[0],index=[-1]):
+        # print(len(A))
+        B=split_list(A,chunk_size[0],transition_size[0])
+
+        if index[0]>-1:
+            B=B[index[0]]
+
+        return (B,)
+    
 
 
 class LimitNumber:
@@ -639,7 +738,7 @@ class LimitNumber:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -706,14 +805,21 @@ class TESTNODE_:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/__TEST"
+    CATEGORY = "♾️Mixlab/Test"
 
     OUTPUT_NODE = True
     INPUT_IS_LIST = True
     OUTPUT_IS_LIST = (True,)
 
     def run(self,ANY):
-        # print(ANY)
+        print(type(ANY))
+        try:
+            print(ANY[0].shape)
+            img= tensor2pil(ANY[0])
+            print(img.size)
+        except:
+            print('')
+        
         # data=ANY
         list_stats = ListStatistics()
 
@@ -751,7 +857,7 @@ class TESTNODE_TOKEN:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/__TEST"
+    CATEGORY = "♾️Mixlab/Test"
 
     OUTPUT_NODE = True
     INPUT_IS_LIST = False
@@ -788,7 +894,7 @@ class CreateSeedNode:
     OUTPUT_NODE = True
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Experiment"
 
     def run(self, seed):
         return (seed,)
@@ -815,7 +921,7 @@ class CreateCkptNames:
     # OUTPUT_NODE = True
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Experiment"
 
     def run(self, ckpt_names):
         ckpt_names=ckpt_names.split('\n')
@@ -844,7 +950,7 @@ class CreateLoraNames:
     # OUTPUT_NODE = True
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Experiment"
 
     def run(self, lora_names):
         lora_names=lora_names.split('\n')
@@ -875,7 +981,7 @@ class CreateSampler_names:
     # OUTPUT_NODE = True
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Experiment"
 
     def run(self, sampler_names):
         sampler_names=sampler_names.split('\n')

nodes/Video.py

@@ -0,0 +1,692 @@
+import os
+import hashlib
+import json
+import subprocess
+import shutil
+import re
+import time,math
+import numpy as np
+from typing import List
+import torch
+from PIL import Image, ImageOps
+from PIL.PngImagePlugin import PngInfo
+import cv2,random,string
+from pathlib import Path
+
+import folder_paths
+from comfy.k_diffusion.utils import FolderOfImages
+from comfy.utils import common_upscale
+
+
+
+
+def generate_folder_name(directory,video_path):
+    # Get the directory and filename from the video path
+    _, filename = os.path.split(video_path)
+    # Generate a random string of lowercase letters and digits
+    random_string = ''.join(random.choices(string.ascii_lowercase + string.digits, k=8))
+    # Create the folder name by combining the random string and the filename
+    folder_name = random_string + '_' + filename
+    # Create the full folder path by joining the directory and the folder name
+    folder_path = os.path.join(directory, folder_name)
+    return folder_path
+
+def create_folder(directory,video_path):
+    folder_path = generate_folder_name(directory,video_path)
+    os.makedirs(folder_path)
+    return folder_path
+
+
+def split_video(video_path, video_segment_frames, transition_frames, output_dir):
+    # 读取视频文件
+    video_capture = cv2.VideoCapture(video_path)
+    
+    # 获取视频的总帧数和帧率
+    total_frames = int(video_capture.get(cv2.CAP_PROP_FRAME_COUNT))
+    fps = video_capture.get(cv2.CAP_PROP_FPS)
+    
+    # 计算每个视频片段的总帧数，包括过渡帧
+    segment_total_frames = video_segment_frames + transition_frames
+    
+    # 计算可以分割的片段数量，向上取整
+    num_segments = (total_frames + transition_frames - 1) // segment_total_frames
+    
+    vs=[]
+    # 计算每个片段的起始帧和结束帧
+    start_frame = 0
+    for i in range(num_segments):
+        # 计算当前片段的结束帧，注意最后一个片段可能没有过渡帧
+        end_frame = min(start_frame + segment_total_frames, total_frames)
+        
+        # 打印当前片段的起始帧和结束帧
+        print(f"Segment {i+1}: Start Frame {start_frame}, End Frame {end_frame}")
+        
+        # 保存当前片段为一个视频文件
+        segment_video_path = f"{output_dir}/segment_{i+1}.avi"
+
+        fourcc = cv2.VideoWriter_fourcc(*'XVID')
+        segment_video = cv2.VideoWriter(segment_video_path, fourcc, fps, (int(video_capture.get(cv2.CAP_PROP_FRAME_WIDTH)),
+                                                              int(video_capture.get(cv2.CAP_PROP_FRAME_HEIGHT))))
+        
+        for frame_num in range(start_frame, end_frame):
+            ret, frame = video_capture.read()
+            if ret:
+                segment_video.write(frame)
+            else:
+                break  # 如果读取失败，则退出循环
+        
+        # 更新起始帧为下一个片段的起始位置
+        start_frame = end_frame + transition_frames
+        vs.append(segment_video_path)
+    
+    # 释放视频捕获对象
+    video_capture.release()
+    # print(vs)
+    return (vs,total_frames,fps)
+
+
+folder_paths.folder_names_and_paths["video_formats"] = (
+    [
+        os.path.join(os.path.dirname(os.path.abspath(__file__)), "..", "video_formats"),
+    ],
+    [".json"]
+)
+
+ffmpeg_path = shutil.which("ffmpeg")
+if ffmpeg_path is None:
+    print("ffmpeg could not be found. Using ffmpeg from imageio-ffmpeg.")
+    from imageio_ffmpeg import get_ffmpeg_exe
+    try:
+        ffmpeg_path = get_ffmpeg_exe()
+    except:
+        print("ffmpeg could not be found. Outputs that require it have been disabled")
+
+# Tensor to PIL
+def tensor2pil(image):
+    return Image.fromarray(np.clip(255. * image.cpu().numpy().squeeze(), 0, 255).astype(np.uint8))
+
+# Convert PIL to Tensor
+def pil2tensor(image):
+    return torch.from_numpy(np.array(image).astype(np.float32) / 255.0).unsqueeze(0)
+
+def count_files(directory):
+    count = 0
+    for root, dirs, files in os.walk(directory):
+        count += len(files)
+    return count
+
+def create_temp_file(image):
+    output_dir = folder_paths.get_temp_directory()
+
+    c=count_files(output_dir)
+
+    (
+            full_output_folder,
+            filename,
+            counter,
+            subfolder,
+            _,
+        ) = folder_paths.get_save_image_path('temp_', output_dir)
+
+    
+    image=tensor2pil(image)
+ 
+    image_file = f"{filename}_{c}_{counter:05}.png"
+     
+    image_path=os.path.join(full_output_folder, image_file)
+
+    image.save(image_path,compress_level=4)
+
+    return [{
+                "filename": image_file,
+                "subfolder": subfolder,
+                "type": "temp"
+                }]
+
+
+def split_list(lst, chunk_size, transition_size):
+    result = []
+    for i in range(0, len(lst), chunk_size):
+        start = i - transition_size
+        end = i + chunk_size + transition_size
+        result.append(lst[max(start, 0):end])
+    return result
+
+# images = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+# chunk_size = 3
+# transition_size = 1
+
+# result = split_list(images, chunk_size, transition_size)
+# print(result)
+
+class ImageListReplace:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+            "images": ("IMAGE",),
+            "start_index":("INT", {"default": 0, "min": 0, "step": 1}),
+            "end_index":("INT", {"default": 0, "min": 0, "step": 1}),
+            "invert": ("BOOLEAN", {"default": False}),
+        },
+         "optional":{
+                    "image_replace": ("IMAGE",),
+                    "images_replace": ("IMAGE",),
+                    
+                    }
+        }
+
+    RETURN_TYPES = ("IMAGE","IMAGE",)
+    RETURN_NAMES = ("images","select_images",)
+    FUNCTION = "run"
+    CATEGORY = "♾️Mixlab/Video"
+
+    OUTPUT_NODE = True
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,True,)
+
+    def run(self, images,start_index=[0],end_index=[0],invert=[False],image_replace=None,images_replace=None):
+        start_index=start_index[0]
+        end_index=end_index[0]
+        invert=invert[0]
+
+        image_rs=[]
+
+        if image_replace!=None:
+            for i in range(end_index-start_index+1):
+                image_rs.append(image_replace[0])
+
+        if images_replace!=None:
+            image_rs=images_replace
+
+        # 如果image replace 为空
+        if image_replace==None and images_replace==None:
+            # print('如果image replace 为空',images[0])
+            # [[tensor(
+            # tensor([[[[0.
+            first_image=tensor2pil(images[0][0])
+            width, height = first_image.size
+            image_replace=Image.new("RGB", (width, height), (0, 0, 0))
+            image_replace=pil2tensor(image_replace)
+            for i in range(end_index-start_index+1):
+                image_rs.append(image_replace)
+
+        
+        new_images=[]
+        select_images=[]
+        k=0
+        for i in range(len(images)):
+            if i>=start_index and i<=end_index:
+                if invert:
+                    new_images.append(images[i])
+                else:
+                    new_images.append(image_rs[k])
+                    select_images.append(images[i])
+                    k+=1
+            else:
+                if invert:
+                    new_images.append(image_rs[k])
+                    select_images.append(images[i])
+                    k+=1
+                else:
+                    new_images.append(images[i])
+
+        imss=[]
+        # print(len(images))
+        for i in range(len(images)):
+            t=images[i][0]
+            t=tensor2pil(t)
+            t = t.convert("RGB")
+            original_width, original_height = t.size
+            scale = 300 / original_width
+            new_height = int(original_height * scale)
+            t = t.resize((300, new_height))
+
+            ims=create_temp_file(pil2tensor(t))
+            imss.append(ims[0])
+
+        # image_replace=create_temp_file(image_replace)
+
+        return {"ui":{"_images": imss},"result": (new_images,select_images,)}
+
+# The code is based on ComfyUI-VideoHelperSuite modification.
+class LoadVideoAndSegment:
+    @classmethod
+    def INPUT_TYPES(s):
+        video_extensions = ['webm', 'mp4', 'mkv', 'gif']
+        input_dir = folder_paths.get_input_directory()
+        files = []
+        for f in os.listdir(input_dir):
+            if os.path.isfile(os.path.join(input_dir, f)):
+                file_parts = f.split('.')
+                if len(file_parts) > 1 and (file_parts[-1] in video_extensions):
+                    files.append(f)
+        return {"required": {
+                    "video": (sorted(files), {"video_upload": True}),
+                     "video_segment_frames": ("INT", {"default": 10, "min": 1, "step": 1}),
+                     "transition_frames": ("INT", {"default": 0, "min": 0, "step": 1}), 
+                     },}
+
+    CATEGORY = "♾️Mixlab/Video"
+
+    RETURN_TYPES = ("SCENE_VIDEO","INT", "INT","INT",)
+    RETURN_NAMES = ("scenes_video","scenes_count","frame_count","fps",)
+    FUNCTION = "load_video"
+    OUTPUT_NODE = True
+    OUTPUT_IS_LIST = (True,False,False,False,)
+
+
+    def is_gif(self, filename):
+        file_parts = filename.split('.')
+        return len(file_parts) > 1 and file_parts[-1] == "gif"
+
+    def load_video_cv_fallback(self, video, frame_load_cap, skip_first_frames):
+        try:
+            video_cap = cv2.VideoCapture(folder_paths.get_annotated_filepath(video))
+            if not video_cap.isOpened():
+                raise ValueError(f"{video} could not be loaded with cv fallback.")
+            # set video_cap to look at start_index frame
+            images = []
+            total_frame_count = 0
+            frames_added = 0
+            base_frame_time = 1/video_cap.get(cv2.CAP_PROP_FPS)
+            
+            target_frame_time = base_frame_time
+
+            time_offset=0.0
+            while video_cap.isOpened():
+                if time_offset < target_frame_time:
+                    is_returned, frame = video_cap.read()
+                    # if didn't return frame, video has ended
+                    if not is_returned:
+                        break
+                    time_offset += base_frame_time
+                if time_offset < target_frame_time:
+                    continue
+                time_offset -= target_frame_time
+                # if not at start_index, skip doing anything with frame
+                total_frame_count += 1
+                if total_frame_count <= skip_first_frames:
+                    continue
+                # TODO: do whatever operations need to happen, like force_size, etc
+
+                # opencv loads images in BGR format (yuck), so need to convert to RGB for ComfyUI use
+                # follow up: can videos ever have an alpha channel?
+                frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+                # convert frame to comfyui's expected format (taken from comfy's load image code)
+                image = Image.fromarray(frame)
+                image = ImageOps.exif_transpose(image)
+                image = np.array(image, dtype=np.float32) / 255.0
+                image = torch.from_numpy(image)[None,]
+                images.append(image)
+                frames_added += 1
+                # if cap exists and we've reached it, stop processing frames
+                if frame_load_cap > 0 and frames_added >= frame_load_cap:
+                    break
+        finally:
+            video_cap.release()
+        images = torch.cat(images, dim=0)
+       
+        return (images, frames_added)
+
+    def load_video(self, video,video_segment_frames,transition_frames ):
+        
+        video_path = folder_paths.get_annotated_filepath(video)
+        
+        # check if video is a gif - will need to use cv fallback to read frames
+        # use cv fallback if ffmpeg not installed or gif
+        # if ffmpeg_path is None:
+        #     return self.load_video_cv_fallback(video, frame_load_cap, skip_first_frames)
+        # otherwise, continue with ffmpeg
+        
+        # args_dummy = [ffmpeg_path, "-i", video_path, "-f", "null", "-"]
+        # try:
+        #     with subprocess.Popen(args_dummy, stdout=subprocess.DEVNULL, stderr=subprocess.PIPE) as proc:
+        #         for line in proc.stderr.readlines():
+        #             match = re.search(", ([1-9]|\\d{2,})x(\\d+)",line.decode('utf-8'))
+        #             if match is not None:
+        #                 size = [int(match.group(1)), int(match.group(2))]
+        #                 break
+        # except Exception as e:
+        #     print(f"Retrying with opencv due to ffmpeg error: {e}")
+        #     return self.load_video_cv_fallback(video, frame_load_cap, skip_first_frames)
+        # args_all_frames = [ffmpeg_path, "-i", video_path, "-v", "error",
+        #                      "-pix_fmt", "rgb24"]
+
+        # vfilters = []
+       
+        # if skip_first_frames > 0:
+        #     vfilters.append(f"select=gt(n\\,{skip_first_frames-1})")
+        # if frame_load_cap > 0:
+        #     vfilters.append(f"select=gt({frame_load_cap}\\,n)")
+        # #manually calculate aspect ratio to ensure reads remain aligned
+        
+        # if len(vfilters) > 0:
+        #     args_all_frames += ["-vf", ",".join(vfilters)]
+
+        # args_all_frames += ["-f", "rawvideo", "-"]
+        # images = []
+        # try:
+        #     with subprocess.Popen(args_all_frames, stdout=subprocess.PIPE) as proc:
+        #         #Manually buffer enough bytes for an image
+        #         bpi = size[0]*size[1]*3
+        #         current_bytes = bytearray(bpi)
+        #         current_offset=0
+        #         while True:
+        #             bytes_read = proc.stdout.read(bpi - current_offset)
+        #             if bytes_read is None:#sleep to wait for more data
+        #                 time.sleep(.2)
+        #                 continue
+        #             if len(bytes_read) == 0:#EOF
+        #                 break
+        #             current_bytes[current_offset:len(bytes_read)] = bytes_read
+        #             current_offset+=len(bytes_read)
+        #             if current_offset == bpi:
+        #                 images.append(np.array(current_bytes, dtype=np.float32).reshape(size[1], size[0], 3) / 255.0)
+        #                 current_offset = 0
+        # except Exception as e:
+        #     print(f"Retrying with opencv due to ffmpeg error: {e}")
+        #     return self.load_video_cv_fallback(video, frame_load_cap, skip_first_frames)
+
+        # imgs=split_list(images,video_segment_frames,transition_frames)
+
+        # temp path 
+        tp=folder_paths.get_temp_directory()
+        basename = os.path.basename(video_path)  # 获取文件名
+        name_without_extension = os.path.splitext(basename)[0]  # 去掉文件后缀
+
+        folder_path = create_folder(tp,name_without_extension)
+        
+ 
+        # 导出的数据
+        scenes_video,total_frames,fps=split_video(video_path,video_segment_frames,
+                                 transition_frames,folder_path)
+      
+
+        # imgs=[torch.from_numpy(np.stack(im)) for im in imgs]
+
+        # images = torch.from_numpy(np.stack(images))
+
+        return (scenes_video,len(scenes_video), total_frames,fps,)
+
+    @classmethod
+    def IS_CHANGED(s, video, **kwargs):
+        image_path = folder_paths.get_annotated_filepath(video)
+        m = hashlib.sha256()
+        with open(image_path, 'rb') as f:
+            m.update(f.read())
+        return m.digest().hex()
+
+    @classmethod
+    def VALIDATE_INPUTS(s, video, **kwargs):
+        if not folder_paths.exists_annotated_filepath(video):
+            return "Invalid image file: {}".format(video)
+
+        return True
+    
+
+# The code is based on ComfyUI-VideoHelperSuite modification.
+class VideoCombine_Adv:
+    @classmethod
+    def INPUT_TYPES(s):
+        #Hide ffmpeg formats if ffmpeg isn't available
+        if ffmpeg_path is not None:
+            ffmpeg_formats = ["video/"+x[:-5] for x in folder_paths.get_filename_list("video_formats")]
+        else:
+            ffmpeg_formats = []
+        return {
+            "required": {
+                "image_batch": ("IMAGE",),
+                "frame_rate": (
+                    "INT",
+                    {"default": 8, "min": 1, "step": 1},
+                ),
+                "loop_count": ("INT", {"default": 0, "min": 0, "max": 100, "step": 1}),
+                "filename_prefix": ("STRING", {"default": "Comfyui"}),
+                "format": (["image/gif", "image/webp"] + ffmpeg_formats,),
+                "pingpong": ("BOOLEAN", {"default": False}),
+                "save_image": ("BOOLEAN", {"default": True}),
+                "metadata": ("BOOLEAN", {"default": False}),
+            },
+            "hidden": {
+                "prompt": "PROMPT",
+                "extra_pnginfo": "EXTRA_PNGINFO",
+            },
+        }
+
+    RETURN_TYPES = ()
+    OUTPUT_NODE = True
+    CATEGORY = "♾️Mixlab/Video"
+    FUNCTION = "run"
+
+    def save_with_tempfile(self, args, metadata, file_path, frames, env):
+        #Ensure temp directory exists
+        os.makedirs(folder_paths.get_temp_directory(), exist_ok=True)
+
+        metadata_path = os.path.join(folder_paths.get_temp_directory(), "metadata.txt")
+        #metadata from file should  escape = ; # \ and newline
+        #From my testing, though, only backslashes need escapes and = in particular causes problems
+        #It is likely better to prioritize future compatibility with containers that don't support
+        #or shouldn't use the comment tag for embedding metadata
+        metadata = metadata.replace("\\","\\\\")
+        metadata = metadata.replace(";","\\;")
+        metadata = metadata.replace("#","\\#")
+        #metadata = metadata.replace("=","\\=")
+        metadata = metadata.replace("\n","\\\n")
+        with open(metadata_path, "w") as f:
+            f.write(";FFMETADATA1\n")
+            f.write(metadata)
+        args = args[:1] + ["-i", metadata_path] + args[1:] + [file_path]
+        with subprocess.Popen(args, stdin=subprocess.PIPE, env=env) as proc:
+            for frame in frames:
+                proc.stdin.write(frame.tobytes())
+
+    def run(
+        self,
+        image_batch,
+        frame_rate: int,
+        loop_count: int,
+        filename_prefix="AnimateDiff",
+        format="image/gif",
+        pingpong=False,
+        save_image=True,
+        metadata=False,
+        prompt=None,
+        extra_pnginfo=None,
+    ):
+        images=image_batch
+
+        frames: List[Image.Image] = []
+        for image in images:
+            img = 255.0 * image.cpu().numpy()
+            img = Image.fromarray(np.clip(img, 0, 255).astype(np.uint8))
+            # resize 保证
+            # 检查图像的高度是否是2的倍数，如果不是，则调整高度
+            if img.height % 2 != 0:
+                img = img.resize((img.width, img.height + 1))
+
+            # 检查图像的宽度是否是2的倍数，如果不是，则调整宽度
+            if img.width % 2 != 0:
+                img = img.resize((img.width + 1, img.height))
+                
+            frames.append(img)
+
+        # get output information
+        output_dir = (
+            folder_paths.get_output_directory()
+            if save_image
+            else folder_paths.get_temp_directory()
+        )
+        (
+            full_output_folder,
+            filename,
+            counter,
+            subfolder,
+            _,
+        ) = folder_paths.get_save_image_path(filename_prefix, output_dir)
+
+        metadata = PngInfo()
+        video_metadata = {}
+        if prompt is not None:
+            metadata.add_text("prompt", json.dumps(prompt))
+            video_metadata["prompt"] = prompt
+        if extra_pnginfo is not None:
+            for x in extra_pnginfo:
+                metadata.add_text(x, json.dumps(extra_pnginfo[x]))
+                video_metadata[x] = extra_pnginfo[x]
+
+        # 取消保存metadata
+        if metadata==False:
+            metadata = PngInfo()
+
+        # save first frame as png to keep metadata
+        file = f"{filename}_{counter:05}_.png"
+        file_path = os.path.join(full_output_folder, file)
+        frames[0].save(
+            file_path,
+            pnginfo=metadata,
+            compress_level=4,
+        )
+        if pingpong:
+            frames = frames + frames[-2:0:-1]
+
+        format_type, format_ext = format.split("/")
+        file = f"{filename}_{counter:05}_.{format_ext}"
+        file_path = os.path.join(full_output_folder, file)
+        if format_type == "image":
+            # Use pillow directly to save an animated image
+            frames[0].save(
+                file_path,
+                format=format_ext.upper(),
+                save_all=True,
+                append_images=frames[1:],
+                duration=round(1000 / frame_rate),
+                loop=loop_count,
+                compress_level=4,
+            )
+        else:
+            # Use ffmpeg to save a video
+            if ffmpeg_path is None:
+                #Should never be reachable
+                raise ProcessLookupError("Could not find ffmpeg")
+
+            video_format_path = folder_paths.get_full_path("video_formats", format_ext + ".json")
+            with open(video_format_path, 'r') as stream:
+                video_format = json.load(stream)
+            file = f"{filename}_{counter:05}_.{video_format['extension']}"
+            file_path = os.path.join(full_output_folder, file)
+            dimensions = f"{frames[0].width}x{frames[0].height}"
+            metadata_args = ["-metadata", "comment=" + json.dumps(video_metadata)]
+            args = [ffmpeg_path, "-v", "error", "-f", "rawvideo", "-pix_fmt", "rgb24",
+                    "-s", dimensions, "-r", str(frame_rate), "-i", "-"] \
+                    + video_format['main_pass']
+            # On linux, max arg length is Pagesize * 32 -> 131072
+            # On windows, this around 32767 but seems to vary wildly by > 500
+            # in a manor not solely related to other arguments
+            if os.name == 'posix':
+                max_arg_length = 4096*32
+            else:
+                max_arg_length = 32767 - len(" ".join(args + [metadata_args[0]] + [file_path])) - 1
+            #test max limit
+            #metadata_args[1] = metadata_args[1] + "a"*(max_arg_length - len(metadata_args[1])-1)
+
+            env=os.environ.copy()
+            if  "environment" in video_format:
+                env.update(video_format["environment"])
+            if len(metadata_args[1]) >= max_arg_length:
+                print(f"Using fallback file for extremely long metadata: {len(metadata_args[1])}/{max_arg_length}")
+                self.save_with_tempfile(args, metadata_args[1], file_path, frames, env)
+            else:
+                try:
+                    with subprocess.Popen(args + metadata_args + [file_path],
+                                          stdin=subprocess.PIPE, env=env) as proc:
+                        for frame in frames:
+                            proc.stdin.write(frame.tobytes())
+                except FileNotFoundError as e:
+                    if "winerror" in dir(e) and e.winerror == 206:
+                        print("Metadata was too long. Retrying with fallback file")
+                        self.save_with_tempfile(args, metadata_args[1], file_path, frames, env)
+                    else:
+                        raise
+                except OSError as e:
+                    if "errno" in dir(e) and e.errno == 7:
+                        print("Metadata was too long. Retrying with fallback file")
+                        self.save_with_tempfile(args, metadata_args[1], file_path, frames, env)
+                    else:
+                        raise
+
+        previews = [
+            {
+                "filename": file,
+                "subfolder": subfolder,
+                "type": "output" if save_image else "temp",
+                "format": format,
+            }
+        ]
+        return {"ui": {"gifs": previews}}
+
+
+class VAEEncodeForInpaint_Frames:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": { 
+            "vae": ("VAE", ), 
+            "images": ("IMAGE", ), 
+            "masks": ("MASK", ), 
+            "grow_mask_by": ("INT", {"default": 6, "min": 0, "max": 64, "step": 1}),
+            }}
+    
+    FUNCTION = "encode"
+
+
+    RETURN_TYPES = ("LATENT",)
+    RETURN_NAMES = ("LATENT",)
+ 
+    CATEGORY = "♾️Mixlab/Video"
+
+    OUTPUT_NODE = True
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,)
+
+
+    def encode(self, vae, images, masks, grow_mask_by=[6]):
+        vae=vae[0]
+        grow_mask_by=grow_mask_by[0]
+
+        result=[]
+
+        for i in range(len(images)):
+            pixels=images[i]
+            mask=masks[i]
+
+
+            x = (pixels.shape[1] // 8) * 8
+            y = (pixels.shape[2] // 8) * 8
+            mask = torch.nn.functional.interpolate(mask.reshape((-1, 1, mask.shape[-2], mask.shape[-1])), size=(pixels.shape[1], pixels.shape[2]), mode="bilinear")
+
+            pixels = pixels.clone()
+            if pixels.shape[1] != x or pixels.shape[2] != y:
+                x_offset = (pixels.shape[1] % 8) // 2
+                y_offset = (pixels.shape[2] % 8) // 2
+                pixels = pixels[:,x_offset:x + x_offset, y_offset:y + y_offset,:]
+                mask = mask[:,:,x_offset:x + x_offset, y_offset:y + y_offset]
+
+            #grow mask by a few pixels to keep things seamless in latent space
+            if grow_mask_by == 0:
+                mask_erosion = mask
+            else:
+                kernel_tensor = torch.ones((1, 1, grow_mask_by, grow_mask_by))
+                padding = math.ceil((grow_mask_by - 1) / 2)
+
+                mask_erosion = torch.clamp(torch.nn.functional.conv2d(mask.round(), kernel_tensor, padding=padding), 0, 1)
+
+            m = (1.0 - mask.round()).squeeze(1)
+            for i in range(3):
+                pixels[:,:,:,i] -= 0.5
+                pixels[:,:,:,i] *= m
+                pixels[:,:,:,i] += 0.5
+            t = vae.encode(pixels)
+
+            result.append({"samples":t, "noise_mask": (mask_erosion[:,:,:x,:y].round())})
+
+
+        return (result, )

nodes/VisualStylePrompting/attention_functions.py

@@ -0,0 +1,45 @@
+from comfy.ldm.modules.attention import default, optimized_attention, optimized_attention_masked
+from .style_functions import adain, concat_first
+
+class VisualStyleProcessor(object):
+    def __init__(self, 
+        module_self, 
+        keys_scale: float = 1.0,
+        enabled: bool = True, 
+        adain_queries: bool = True,
+        adain_keys: bool = True,
+        adain_values: bool = False 
+    ):
+        self.module_self = module_self
+        self.keys_scale = keys_scale
+        self.enabled = enabled
+        self.adain_queries = adain_queries
+        self.adain_keys = adain_keys
+        self.adain_values = adain_values
+
+    def visual_style_forward(self, x, context, value, mask=None):
+        q = self.module_self.to_q(x)
+        context = default(context, x)
+        k = self.module_self.to_k(context)
+        if value is not None:
+            v = self.module_self.to_v(value)
+            del value
+        else:
+            v = self.module_self.to_v(context)
+
+        if self.enabled:
+            if self.adain_queries:
+                q = adain(q)
+            if self.adain_keys:
+                k = adain(k)
+            if self.adain_values:
+                v = adain(v)
+            
+            k = concat_first(k, -2, self.keys_scale)
+            v = concat_first(v, -2)
+
+        if mask is None:
+            out = optimized_attention(q, k, v, self.module_self.heads)
+        else:
+            out = optimized_attention_masked(q, k, v, self.module_self.heads, mask)
+        return self.module_self.to_out(out)

nodes/VisualStylePrompting/style_functions.py

@@ -0,0 +1,60 @@
+import torch
+
+from einops import rearrange
+from dataclasses import dataclass
+
+T = torch.Tensor
+
+@dataclass(frozen=True)
+class StyleAlignedArgs:
+    share_group_norm: bool = True
+    share_layer_norm: bool = True,
+    share_attention: bool = True
+    adain_queries: bool = True
+    adain_keys: bool = True
+    adain_values: bool = False
+    full_attention_share: bool = False
+    keys_scale: float = 1.
+    only_self_level: float = 0.
+
+def expand_first(feat: T, scale=1., ) -> T:
+    b = feat.shape[0]
+    feat_style = torch.stack((feat[0], feat[b // 2])).unsqueeze(1)
+    if scale == 1:
+        feat_style = feat_style.expand(2, b // 2, *feat.shape[1:])
+    else:
+        feat_style = feat_style.repeat(1, b // 2, 1, 1, 1)
+        feat_style = torch.cat([feat_style[:, :1], scale * feat_style[:, 1:]], dim=1)
+    return feat_style.reshape(*feat.shape)
+
+
+def concat_first(feat: T, dim=2, scale=1.) -> T:
+    feat_style = expand_first(feat, scale=scale)
+    return torch.cat((feat, feat_style), dim=dim)
+
+
+def calc_mean_std(feat, eps: float = 1e-5) -> tuple[T, T]:
+    feat_std = (feat.var(dim=-2, keepdims=True) + eps).sqrt()
+    feat_mean = feat.mean(dim=-2, keepdims=True)
+    return feat_mean, feat_std
+
+
+def adain(feat: T) -> T:
+    feat_mean, feat_std = calc_mean_std(feat)
+    feat_style_mean = expand_first(feat_mean)
+    feat_style_std = expand_first(feat_std)
+    feat = (feat - feat_mean) / feat_std
+    feat = feat * feat_style_std + feat_style_mean
+    return feat
+
+def swapping_attention(key, value, chunk_size=2):
+    chunk_length = key.size()[0] // chunk_size  # [text-condition, null-condition]
+    reference_image_index = [0] * chunk_length  # [0 0 0 0 0]
+    key = rearrange(key, "(b f) d c -> b f d c", f=chunk_length)
+    key = key[:, reference_image_index]  # ref to all
+    key = rearrange(key, "b f d c -> (b f) d c")
+    value = rearrange(value, "(b f) d c -> b f d c", f=chunk_length)
+    value = value[:, reference_image_index]  # ref to all
+    value = rearrange(value, "b f d c -> (b f) d c")
+
+    return key, value

requirements.txt

@@ -7,5 +7,6 @@ openai
 simple-lama-inpainting
 clip-interrogator==0.6.0
 transformers>=4.36.0
-zhipuai
-lark-parser
+lark-parser
+imageio-ffmpeg
+rembg[gpu]

web/index.html

@@ -202,7 +202,7 @@
             width: fit-content;
             max-width: 100%;
             margin-left: 12px;
-            min-height: 200px;
+            /*min-height: 200px;*/
         }
 
         .input_card {
@@ -278,8 +278,11 @@
         }
 
         button:hover {
-            border-color: yellow !important;
-            color: yellow !important;
+            /* border-color: yellow !important; */
+            color: #ffffff !important;
+            /* font-weight: 400; */
+            background: #232222;
+            cursor: pointer;
         }
 
         .disabled {
@@ -400,12 +403,53 @@
         .hidden-caption-content {
             display: none;
         }
+
+         /* 定义滚动条轨道的背景颜色 */
+
+         ::-webkit-scrollbar-track {
+            background-color: #f1f1f1;
+            /* 轨道背景颜色 */
+        }
+
+        /* 定义滚动条滑块的颜色 */
+
+        ::-webkit-scrollbar-thumb {
+            background-color: #888;
+            /* 滑块颜色 */
+            border-radius: 4px;
+            /* 滑块圆角 */
+        }
+
+        /* 鼠标悬停时滚动条滑块的颜色 */
+
+        ::-webkit-scrollbar-thumb:hover {
+            background-color: #555;
+            /* 悬停时滑块颜色 */
+        }
+
+        /* 定义滚动条角落的颜色 */
+
+        ::-webkit-scrollbar-corner {
+            background-color: transparent;
+            /* 角落颜色 */
+        }
+
+
+        .dynamic_prompt::after {
+            content: attr(title);
+            position: absolute; 
+            color: black;
+            padding: 4px;
+            padding-left: 25px;
+            border-radius: 4px;
+        }
     </style>
     <!-- <script src="../../../scripts/api.js" type="module"></script> -->
     <link href="/extensions/comfyui-mixlab-nodes/lib/photoswipe.min.css" rel="stylesheet">
     <link href="/extensions/comfyui-mixlab-nodes/lib/classic.min.css" rel="stylesheet">
     <script src="/extensions/comfyui-mixlab-nodes/lib/pickr.min.js"></script>
     <script src="/extensions/comfyui-mixlab-nodes/lib/filerobot-image-editor.min.js"></script>
+    <script type="module" src="/extensions/comfyui-mixlab-nodes/lib/model-viewer.min.js"></script>
     <link rel="stylesheet" href="/extensions/comfyui-mixlab-nodes/lib/login.css">
 </head>
 
@@ -413,7 +457,7 @@
 
     <div id="editor_container"></div>
     <div class="header">
-        <div style="margin: 0 24px;
+        <div id="logo" style="margin: 0 24px;
             margin-bottom: 24px;
             padding: 8px;
             color: #4a4a4a;
@@ -439,8 +483,39 @@
     <script type="module">
         import PhotoSwipeLightbox from '/extensions/comfyui-mixlab-nodes/lib/photoswipe-lightbox.esm.min.js'
         // console.log(Lightbox)
-
         import { api } from "../../../scripts/api.js";
+
+
+        // ComfyUI\web\extensions\core\dynamicPrompts.js
+        // 官方实现修改
+        // Allows for simple dynamic prompt replacement
+        // Inputs in the format {a|b} will have a random value of a or b chosen when the prompt is queued.
+
+        /*
+         * Strips C-style line and block comments from a string
+         */
+        function stripComments(str) {
+            return str.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '');
+        }
+
+        function dynamicPrompts(prompt) {
+            prompt = stripComments(prompt);
+            while (prompt.replace("\\{", "").includes("{") && prompt.replace("\\}", "").includes("}")) {
+                const startIndex = prompt.replace("\\{", "00").indexOf("{");
+                const endIndex = prompt.replace("\\}", "00").indexOf("}");
+
+                const optionsString = prompt.substring(startIndex + 1, endIndex);
+                const options = optionsString.split("|");
+
+                const randomIndex = Math.floor(Math.random() * options.length);
+                const randomOption = options[randomIndex];
+
+                prompt = prompt.substring(0, startIndex) + randomOption + prompt.substring(endIndex + 1);
+            }
+            return prompt
+        }
+
+
         // console.log('api', api)
         const base64Df =
             'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAALZJREFUKFOFkLERwjAQBPdbgBkInECGaMLUQDsE0AkRVRAYWqAByxldPPOWHwnw4OBGye1p50UDSoA+W2ABLPN7i+C5dyC6R/uiAUXRQCs0bXoNIu4QPQzAxDKxHoALOrZcqtiyR/T6CXw7+3IGHhkYcy6BOR2izwT8LptG8rbMiCRAUb+CQ6WzQVb0SNOi5Z2/nX35DRyb/ENazhpWKoGwrpD6nICp5c2qogc4of+c7QcrhgF4Aa/aoAFHiL+RAAAAAElFTkSuQmCC'
@@ -479,6 +554,59 @@
         };
 
 
+        const parseImageToBase64 = url => {
+            return new Promise((res, rej) => {
+                fetch(url)
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const reader = new FileReader()
+                        reader.onloadend = () => {
+                            const base64data = reader.result
+                            res(base64data)
+                            // 在这里可以将base64数据用于进一步处理或显示图片
+                        }
+                        reader.readAsDataURL(blob)
+                    })
+                    .catch(error => {
+                        console.log('发生错误:', error)
+                    })
+            })
+        }
+
+        //给load image to batch节点使用的输入
+        function createBase64ImageForLoadImageToBatch(imageElement, nodeId, bs) {
+            let im = new Image()
+            im.src = bs;
+            im.className = "base64"
+            imageElement.appendChild(im);
+
+            let base64s = imageElement.querySelectorAll('.base64')
+            //更新输入
+            window._appData.data[nodeId].inputs.images.base64 = Array.from(base64s, (b) => b.src)
+
+            // 删除
+            im.addEventListener('click', e => {
+                e.preventDefault();
+                im.remove();
+                let base64s = imageElement.querySelectorAll('.base64')
+                //更新输入
+                window._appData.data[nodeId].inputs.images.base64 = Array.from(base64s, (b) => b.src)
+            })
+        }
+
+        const blobToBase64 = blob => {
+            return new Promise((res, rej) => {
+                const reader = new FileReader()
+                reader.onloadend = () => {
+                    const base64data = reader.result
+                    res(base64data)
+                    // 在这里可以将base64数据用于进一步处理或显示图片
+                }
+                reader.readAsDataURL(blob)
+            })
+        }
+
+
         function base64ToBlob(base64) {
             // 去除base64编码中的前缀
             const base64WithoutPrefix = base64.replace(/^data:image\/\w+;base64,/, '');
@@ -677,18 +805,23 @@
 
         // 种子的处理
         function randomSeed(seed, data) {
+            let max_seed = 4294967295
+            //1849378600828930
             for (const id in data) {
                 if (data[id].inputs.seed != undefined
                     && !Array.isArray(data[id].inputs.seed) //如果是数组，则由其他节点控制
                     && ['increment', 'decrement', 'randomize'].includes(seed[id])) {
-                    data[id].inputs.seed = Math.round(Math.random() * 1849378600828930)
+                    data[id].inputs.seed = Math.round(Math.random() * max_seed)
                     // console.log('new Seed', data[id])
                 }
                 if (data[id].inputs.noise_seed != undefined
                     && !Array.isArray(data[id].inputs.noise_seed) //如果是数组，则由其他节点控制
                     && ['increment', 'decrement', 'randomize'].includes(seed[id])) {
-                    data[id].inputs.noise_seed = Math.round(Math.random() * 1849378600828930)
-
+                    data[id].inputs.noise_seed = Math.round(Math.random() * max_seed)
+                }
+                // class_type:"Seed_"
+                if (data[id].class_type == "Seed_" && ['increment', 'decrement', 'randomize'].includes(seed[id])) {
+                    data[id].inputs.seed = Math.round(Math.random() * max_seed)
                 }
                 console.log('new Seed', data[id])
             }
@@ -712,6 +845,21 @@
             // 随机seed
             promptWorkflow = randomSeed(seed, promptWorkflow);
 
+            // //动态提示,改为输入的时候，手动触发
+            // for (const id in promptWorkflow) {
+            //     let node = promptWorkflow[id]
+            //     if (["TextInput_", "CLIPTextEncode", "PromptSimplification", "ChinesePrompt_Mix"].includes(
+            //         node.class_type
+            //     )) {
+            //         if (node.class_type == "PromptSimplification") {
+            //             promptWorkflow[id].inputs.prompt = dynamicPrompts(node.inputs.prompt);
+            //         } else {
+            //             promptWorkflow[id].inputs.text = dynamicPrompts(node.inputs.text);
+            //         }
+            //         console.log('#动态提示', promptWorkflow[id].inputs)
+            //     }
+            // }
+
             let url = get_url()
             const data = JSON.stringify({ prompt: promptWorkflow, client_id });
             fetch(`${url}/prompt`, {
@@ -747,6 +895,10 @@
             let url = get_url()
             const res = await fetch(`${url}/mixlab/workflow`, {
                 method: 'POST',
+                mode: 'cors', // 允许跨域请求
+                headers: {
+                    'Content-Type': 'application/json'
+                },
                 body: JSON.stringify({
                     task: 'my_app',
                     filename,
@@ -811,11 +963,6 @@
             action.appendChild(copyImage)
             copyImage.style.marginLeft = '18px';
 
-            const copyText = document.createElement('button');
-            copyText.innerText = 'copy text for share'
-            action.appendChild(copyText)
-            copyText.style.marginLeft = '18px';
-
             let isURL = false;
             try {
                 new URL(link)
@@ -865,12 +1012,16 @@
             output_card.className = 'output_card'
             container.appendChild(output_card)
 
-
-            copyText.addEventListener('click', e => {
-                e.preventDefault();
-                copyTextToClipboard((window._appData.share_prefix || '') + " " + output_card.outerHTML, (r) => success(r, copyText, 'copy text for share'))
-
-            })
+            if (window._appData.share_prefix) {
+                const copyText = document.createElement('button');
+                copyText.innerText = 'copy text for share'
+                action.appendChild(copyText)
+                copyText.style.marginLeft = '18px';
+                copyText.addEventListener('click', e => {
+                    e.preventDefault();
+                    copyTextToClipboard((window._appData.share_prefix || '') + " " + output_card.outerHTML, (r) => success(r, copyText, 'copy text for share'))
+                })
+            }
 
             copyImage.addEventListener('click', e => {
                 e.preventDefault();
@@ -884,6 +1035,9 @@
                 // copyImagesToClipboard(output_card.outerHTML)
             })
 
+            //是否显示复制图片，复制html两个按钮
+            let isShowImageFn = false;
+
             for (const node of outputData) {
                 // console.log('output', node)
                 if (node.class_type == "ShowTextForGPT") {
@@ -902,8 +1056,31 @@
                     output_card.appendChild(div);
                 };
 
-                if (["SaveImage", "PreviewImage", "PromptImage"].includes(node.class_type)) {
+                if (["SaveImage",
+                    "PreviewImage",
+                    "PromptImage",
+                    "Image Save",
+                    "SaveImageAndMetadata_",
+                    "TransparentImage"].includes(node.class_type)) {
+                    console.log('output#image', node)
+                    let a = document.createElement('a');
+                    a.id = `output_${node.id}`
+                    a.setAttribute('data-pswp-width', "200");
+                    a.setAttribute('data-pswp-height', "200");
+                    a.setAttribute('target', "_blank");
+                    a.setAttribute('href', base64Df);
+                    a.setAttribute('title', node.title);
 
+                    let img = new Image();
+                    // img;
+                    img.src = window._appData?.icon || base64Df;
+                    a.appendChild(img)
+                    output_card.appendChild(a);
+                    isShowImageFn = true;
+                }
+
+                //3d 
+                if (["SaveTripoSRMesh"].includes(node.class_type)) {
                     let a = document.createElement('a');
                     a.id = `output_${node.id}`
                     a.setAttribute('data-pswp-width', "200");
@@ -919,7 +1096,7 @@
                 }
 
                 // video ,gif
-                if (["VHS_VideoCombine"].includes(node.class_type)) {
+                if (["VHS_VideoCombine", "VideoCombine_Adv"].includes(node.class_type)) {
 
                     let a = document.createElement('a');
                     a.id = `output_${node.id}`
@@ -946,6 +1123,12 @@
                 }
 
             }
+
+            if (isShowImageFn === false) {
+                copyImage.remove();
+                copyHTML.remove();
+            }
+
             return container
         }
 
@@ -1002,6 +1185,7 @@
         }
 
         async function handleClipboardImage(imageElement, data) {
+            //data.class_type === 'LoadImagesToBatch'
             try {
                 const clipboardItems = await navigator.clipboard.read();
                 for (const clipboardItem of clipboardItems) {
@@ -1014,18 +1198,17 @@
 
                             if (hashId == window._appData.data[data.id].hashId) return
 
-                            let { url, name } = await uploadImage(fileBlob);
-                            // 在这里可以对 Blob 对象进行进一步处理
-                            imageElement.src = url;
-                            window._appData.data[data.id].inputs.image = name;
-                            window._appData.data[data.id].hashId = hashId;
-
-                            console.log("上传的文件：", url, data.id, name);
-
-                            // const img = document.createElement('img');
-                            // img.src = URL.createObjectURL(blob);
-                            // document.body.appendChild(img);
-                            // console.log( URL.createObjectURL(blob));
+                            if (data.class_type === 'LoadImagesToBatch') {
+                                let base64 = await blobToBase64(fileBlob)
+                                createBase64ImageForLoadImageToBatch(imageElement, data.id, base64)
+                            } else {
+                                let { url, name } = await uploadImage(fileBlob);
+                                // 在这里可以对 Blob 对象进行进一步处理
+                                imageElement.src = url;
+                                window._appData.data[data.id].inputs.image = name;
+                                window._appData.data[data.id].hashId = hashId;
+                                console.log("上传的文件：", url, data.id, name);
+                            }
                         }
                     }
                 }
@@ -1186,13 +1369,19 @@
             inputData = inputData.filter(inp => inp);
             // console.log('inputData',inputData)
             inputData.forEach(async data => {
-                console.log(data)
+                console.log('inputData', data);
 
                 // 图片 or 视频输入
-                if (data.class_type === "LoadImage" || data.class_type === "VHS_LoadVideo") {
+
+                if (["LoadImage",
+                    "VHS_LoadVideo",
+                    "ImagesPrompt_",
+                    "LoadImagesToBatch"].includes(data.class_type)) {
 
                     let isVideoUpload = data.class_type === "VHS_LoadVideo";
 
+                    let isBase64Upload = data.class_type === "LoadImagesToBatch";
+
                     // Create a container for the upload control
                     const uploadContainer = document.createElement("div");
                     uploadContainer.className = 'card';
@@ -1224,7 +1413,7 @@
                     const btnForImageEdit = document.createElement("button");
                     btnForImageEdit.style = ` width: 32px; background: none;margin-left: 18px;`
                     btnForImageEdit.innerHTML = '<?xml version="1.0" ?><svg version="1.1" style="width: 24px;" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1_1_"><path d="M18.293,31.707h6.414l24-24l-6.414-6.414l-24,24V31.707z M45.879,7.707l-3.586,3.586l-3.586-3.586l3.586-3.586   L45.879,7.707z M20.293,26.121l17-17l3.586,3.586l-17,17h-3.586V26.121z"/><polygon points="43.293,19.707 41.293,19.707 41.293,46.707 3.293,46.707 3.293,8.707 31.293,8.707 31.293,6.707 1.293,6.707    1.293,48.707 43.293,48.707  "/></g></svg>'
-                    if (!isVideoUpload) actionDiv.appendChild(btnForImageEdit);
+                    if ((!isVideoUpload && !isBase64Upload) && data.class_type !== 'ImagesPrompt_') actionDiv.appendChild(btnForImageEdit);
 
 
                     uploadContainer.appendChild(actionDiv)
@@ -1246,7 +1435,7 @@
 
                         // imageElement.innerHTML=`<img src="${base64Df}"/>`
 
-                    } else {
+                    } else if (data.class_type === 'LoadImage') {
                         // 图片
                         let [subfolder, name] = data.inputs.image.split('/');
                         if (!name) {
@@ -1255,19 +1444,40 @@
                         }
                         // imageElement.src = base64Df
                         let url = `${get_url()}/view?filename=${encodeURIComponent(name)}&type=input&subfolder=${subfolder}&rand=${Math.random()}`
-                        imageElement.src = url;
+                        // 如果有默认图                        
+                        imageElement.src = data.options?.defaultImage || url;
                         imageElement.setAttribute('onerror', `this.src='${base64Df}'`)
 
+                    } else if (data.class_type === 'ImagesPrompt_') {
+                        // 图片库模式
+                        const [imgDiv, mainImage] = createSelectForImages(
+                            data.title,
+                            data.options.images,
+                            data.inputs.imageIndex,
+                            (base64, text) => {
+                                window._appData.data[data.id].inputs.image_base64 = base64;
+                                window._appData.data[data.id].inputs.text = text;
+                            })
+                        uploadContainer.appendChild(imgDiv);
+                        window._appData.data[data.id].inputs.image_base64 = mainImage.querySelector('.images_prompt_main').src;
+                    } else if (data.class_type === 'LoadImagesToBatch') {
+                        // 多张base64 图片
+                        let base64 = data.inputs.images.base64
+
+                        imageElement = document.createElement('div');
+                        imageElement.className = "images"
+                        for (const bs of base64) {
+                            createBase64ImageForLoadImageToBatch(imageElement, data.id, bs)
+                        }
 
                     }
 
+
                     imageElement.style.maxWidth = '200px';
 
-
-
                     if (!isVideoUpload) btnFromClipboard.addEventListener('click', (event) => handleClipboardImage(imageElement, data));
 
-                    if (!isVideoUpload) btnForImageEdit.addEventListener('click', e => editImage(imageElement, data))
+                    if (!isVideoUpload && !isBase64Upload) btnForImageEdit.addEventListener('click', e => editImage(imageElement, data))
 
 
                     uploadImageInput.addEventListener('click', (event) => {
@@ -1290,22 +1500,43 @@
 
                             if (hashId == window._appData.data[data.id].hashId) return
 
-                            let { url, name } = await uploadImage(fileBlob, '.' + file.type.split('/')[1])
-                            if (isVideoUpload) {
-                                imageElement.srcObject = null;
-                            }
-                            // 在这里可以对 Blob 对象进行进一步处理
-                            imageElement.src = url;
-
-                            if (isVideoUpload) {
-                                window._appData.data[data.id].inputs.video = name;
+                            if (data.class_type === 'LoadImagesToBatch') {
+                                // 上传 ，转为base64
+                                let base64 = await blobToBase64(fileBlob)
+                                createBase64ImageForLoadImageToBatch(imageElement, data.id, base64)
                             } else {
-                                window._appData.data[data.id].inputs.image = name;
+                                //上传，返回url
+                                let { url, name } = await uploadImage(fileBlob, '.' + file.type.split('/')[1])
+
+                                if (data.class_type === 'ImagesPrompt_') {
+                                    // 
+                                    let base64 = await parseImageToBase64(url);
+                                    uploadContainer.querySelector('.images_prompt_main').src = base64
+                                    window._appData.data[data.id].inputs.image_base64 = base64;
+                                } else {
+                                    if (isVideoUpload) {
+                                        imageElement.srcObject = null;
+                                    }
+                                    // 在这里可以对 Blob 对象进行进一步处理
+                                    imageElement.src = url;
+
+
+                                    if (isVideoUpload) {
+                                        window._appData.data[data.id].inputs.video = name;
+                                    } else {
+                                        window._appData.data[data.id].inputs.image = name;
+                                    }
+
+                                }
+
+
+                                window._appData.data[data.id].hashId = hashId;
+
+                                console.log("上传的文件：", url, data.id, name);
                             }
 
-                            window._appData.data[data.id].hashId = hashId;
 
-                            console.log("上传的文件：", url, data.id, name);
+
                         };
 
                         // 开始读取文件
@@ -1315,7 +1546,7 @@
                     })
 
                     // imageElement.src = `${get_url()}/view?filename=${encodeURIComponent(data.inputs.image)}&type=${type}&subfolder=${subfolder}`;
-                    uploadContainer.appendChild(imageElement);
+                    if (data.class_type !== 'ImagesPrompt_') uploadContainer.appendChild(imageElement);
 
                     // Append the upload container to the main container
                     container.appendChild(uploadContainer);
@@ -1392,7 +1623,7 @@
                         textInput.value = data.inputs.prompt;
                     } else {
                         textInput.value = data.inputs.text;
-                    }
+                    };
 
                     // uploadImageInput.type = "text";
                     let json = localStorage.getItem(`t_${data.id}`)
@@ -1408,7 +1639,6 @@
                             window._appData.data[data.id].inputs.text = textInput.value;
                         }
 
-
                     } catch (error) {
 
                     }
@@ -1416,6 +1646,27 @@
                     uploadContainer.appendChild(textInput);
                     // autoResize(textInput);
 
+
+                    //动态提示功能
+                    const dynamicPromptsBtn = document.createElement('button');
+                    dynamicPromptsBtn.className = "dynamic_prompt"
+                    dynamicPromptsBtn.innerText = 'dynamic';
+                    dynamicPromptsBtn.style.width = '88px'
+                    uploadContainer.appendChild(dynamicPromptsBtn);
+                    dynamicPromptsBtn.addEventListener('click', e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        let prompt = dynamicPrompts(textInput.value)
+                        textInput.setAttribute('title', prompt)
+                        dynamicPromptsBtn.setAttribute('title', prompt)
+                        if (data.class_type == "PromptSimplification") {
+                            window._appData.data[data.id].inputs.prompt = prompt;
+                        } else {
+                            window._appData.data[data.id].inputs.text = prompt;
+                        }
+                    })
+
+
                     function autoResize(textarea) {
                         textarea.style.height = 'auto';
                         textarea.style.height = textarea.scrollHeight + 'px';
@@ -1729,6 +1980,73 @@
 
         }
 
+        function createImageForSelect(isMain, imgurl, keyword) {
+            let im = new Image();
+            im.className = isMain ? 'images_prompt_main' : ''
+            im.src = imgurl;
+            im.title = keyword
+            im.style = `
+            width:${isMain ? 120 : 56}px;
+            height:auto;
+            min-height:${isMain ? 120 : 56}px;
+            filter: brightness(${isMain ? 1 : 0.8});
+            ${isMain ? 'filter: drop-shadow(1px 1px 4px black);' : ''}
+            `
+            let p = document.createElement('p');
+            p.innerText = keyword;
+            p.style = `position: absolute;
+    top: 14px;
+    left: 20px;
+    background-color: #00000075;
+    padding: 2px 4px;
+    color: white;
+    font-size: 12px;`
+            const div = document.createElement("div");
+            // div.className = 'card';
+            div.appendChild(im)
+            if (isMain) div.appendChild(p)
+            im.setAttribute('onerror', `this.src='${base64Df}'`)
+            return div
+        }
+
+        // 创建图库选择
+        function createSelectForImages(title, options, index = 0, callback) {
+
+            const div = document.createElement("div");
+            // div.className = 'card';
+            div.style = `margin-top: 24px;`
+
+            // Create a label for the upload control
+            // const nameLabel = document.createElement("label");
+            // nameLabel.textContent = title;
+            // div.appendChild(nameLabel);
+
+            var mainImg = createImageForSelect(true, options[index].imgurl, options[index].keyword);
+            div.appendChild(mainImg);
+
+            let imgs = document.createElement('div');
+            div.appendChild(imgs);
+            imgs.style = `display:flex; flex-wrap: wrap;`
+            for (const opt of options) {
+                var selectElement = createImageForSelect(false, opt.imgurl, opt.keyword);
+                imgs.appendChild(selectElement);
+                selectElement.addEventListener('click', async e => {
+                    e.preventDefault();
+                    mainImg.querySelector('p').innerText = opt.keyword;
+                    mainImg.querySelector('img').src = opt.imgurl;
+                    if (callback) {
+                        if (!opt.imgurl.match('data:image')) {
+                            opt.imgurl = await parseImageToBase64(opt.imgurl)
+                        }
+                        callback(opt.imgurl, opt.keyword);
+                    }
+                })
+            }
+
+            return [div, mainImg];
+        }
+
+
         // 创建下拉选择
         function createSelect(options, defaultValue) {
             var selectElement = document.createElement("select");
@@ -1791,7 +2109,8 @@
 
         function createUI(data, share = true) {
             // appData.input, appData.output, appData.seed, share, appData.link
-            const { input: inputData, output: outputData, data: workflow, seed, link, name } = data;
+            if (!data) return
+            const { input: inputData, output: outputData, data: workflow, seed, seedTitle, link, name } = data;
 
             let mainDiv = document.createElement('div');
 
@@ -1889,7 +2208,7 @@
 
                             let em = document.createElement('em');
                             let emText = document.createElement('span');
-                            emText.innerText = `#${id} ${s.toUpperCase()}`;
+                            emText.innerText = `#${seedTitle && seedTitle[id] ? seedTitle[id] : id} ${s.toUpperCase()}`;
                             em.appendChild(emText);
 
                             seedInput.appendChild(em)
@@ -1910,7 +2229,7 @@
                                         data.seed[id] = 'randomize';
                                         inSeed.style.display = 'none'
                                     }
-                                    emText.innerText = `#${id} ${data.seed[id].toUpperCase()}`;
+                                    emText.innerText = `#${seedTitle && seedTitle[id] ? seedTitle[id] : id} ${data.seed[id].toUpperCase()}`;
                                 });
 
                                 seedInput.appendChild(inSeed);
@@ -2083,6 +2402,51 @@
 
                         if (val && type == "text" && output.querySelector(`#output_${id}`)) output.querySelector(`#output_${id}`).innerText = val;
 
+                        // 3d meshes
+                        if (val && type == 'meshes' && output.querySelector(`#output_${id}`)) {
+
+                            let threeD = output.querySelector('.threeD')
+                            //判断默认的图片，需要去掉后创建model-viewer
+                            let imgDf = output.querySelector(`#output_${id} img`);
+                            if (!threeD) {
+                                if (imgDf) imgDf.parentElement.remove();
+                                threeD = document.createElement('div');
+                                threeD.className = 'threeD'
+                                threeD.id = `output_${id}`
+                                output.querySelector('.output_card').appendChild(threeD)
+                                // output.insertBefore(threeD, output.firstChild);
+                            };
+
+
+                            for (const meshUrl of val) {
+                                const modelViewer = document.createElement('div');
+                                modelViewer.style = `width:300px;margin:4px;height:300px;display:block`
+                                modelViewer.innerHTML = `<model-viewer  src="${meshUrl}" 
+                                    min-field-of-view="0deg" max-field-of-view="180deg"
+                                    shadow-intensity="1" 
+                                    camera-controls 
+                                    touch-action="pan-y"
+                                    style="width:300px;height:300px;"
+                                    > 
+                                    <div class="controls">
+                                        <button class="export">Save As</button>
+                                    </div>
+                                </model-viewer>`
+
+                                const btn = modelViewer.querySelector('.export');
+                                btn.addEventListener('click', async e => {
+                                    e.preventDefault();
+                                    const glTF = await (modelViewer.querySelector('model-viewer')).exportScene()
+                                    const file = new File([glTF], 'mixlab.glb')
+                                    const link = document.createElement('a')
+                                    link.download = file.name
+                                    link.href = URL.createObjectURL(file)
+                                    link.click()
+                                })
+                                threeD.appendChild(modelViewer)
+                            }
+
+                        }
                     }
                 },
                 submitButton: {
@@ -2198,6 +2562,9 @@
             const _images = detail?.output?._images;
             const prompts = detail?.output?.prompts;
 
+            // 3d模型
+            const meshes = detail?.output?.mesh;
+
             if (images) {
                 // if (!images) return;
 
@@ -2207,6 +2574,14 @@
                     return `${url}/view?filename=${encodeURIComponent(img.filename)}&type=${img.type}&subfolder=${encodeURIComponent(img.subfolder)}&t=${+new Date()}`;
                 }), detail.node, 'images');
 
+            } else if (meshes) {
+                //多个
+                let url = get_url();
+
+                show(Array.from(meshes, mesh => {
+                    return `${url}/view?filename=${encodeURIComponent(mesh.filename)}&type=${mesh.type}&subfolder=${encodeURIComponent(mesh.subfolder)}&t=${+new Date()}`;
+                }), detail.node, 'meshes');
+
             } else if (_images && prompts) {
                 let url = get_url();
 
@@ -2440,6 +2815,9 @@
         // 创建app的选择菜单
         function createAppList(apps = [], innerApp = false) {
             window.prompt_ids = {};
+            if (document.body.querySelector('.apps')) {
+                document.body.querySelector('.apps').remove()
+            }
             let details = document.createElement('details');
             details.className = 'apps';
 
@@ -2640,20 +3018,21 @@
                 card.addEventListener('click', async e => {
                     e.preventDefault();
                     // console.log(c)
+
+                    const { category, filename } = c.appInfo;
+                    window._appData = (await get_my_app(category, filename))[0];
+
+                    await createApp(window._appData);
+
+                    executed(c.data, window._show);
+
                     try {
                         document.body.querySelector('#app_container').setAttribute('open', true)
                         document.body.querySelector('#app_input_pannel').removeAttribute('open')
                         document.body.querySelector('.apps').removeAttribute('open')
                     } catch (error) {
-
+                        console.log(error)
                     }
-
-                    const { category, filename } = c.appInfo;
-                    window._appData = (await get_my_app(category, filename))[0];
-
-                    createApp(window._appData);
-
-                    executed(c.data, window._show);
                 })
             }
 

web/javascript/app_mixlab.js

@@ -2,9 +2,46 @@ import { app } from '../../../scripts/app.js'
 import { $el } from '../../../scripts/ui.js'
 import { api } from '../../../scripts/api.js'
 
+//本机安装的插件节点全集
+window._nodesAll = null
+
+//获取当前系统的插件，节点清单
+function getObjectInfo () {
+  return new Promise(async (resolve, reject) => {
+    let url = getUrl()
+
+    try {
+      const response = await fetch(`${url}/object_info`)
+      const data = await response.json()
+      resolve(data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
 const base64Df =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAALZJREFUKFOFkLERwjAQBPdbgBkInECGaMLUQDsE0AkRVRAYWqAByxldPPOWHwnw4OBGye1p50UDSoA+W2ABLPN7i+C5dyC6R/uiAUXRQCs0bXoNIu4QPQzAxDKxHoALOrZcqtiyR/T6CXw7+3IGHhkYcy6BOR2izwT8LptG8rbMiCRAUb+CQ6WzQVb0SNOi5Z2/nX35DRyb/ENazhpWKoGwrpD6nICp5c2qogc4of+c7QcrhgF4Aa/aoAFHiL+RAAAAAElFTkSuQmCC'
 
+const parseImageToBase64 = url => {
+  return new Promise((res, rej) => {
+    fetch(url)
+      .then(response => response.blob())
+      .then(blob => {
+        const reader = new FileReader()
+        reader.onloadend = () => {
+          const base64data = reader.result
+          res(base64data)
+          // 在这里可以将base64数据用于进一步处理或显示图片
+        }
+        reader.readAsDataURL(blob)
+      })
+      .catch(error => {
+        console.log('发生错误:', error)
+      })
+  })
+}
+
 function get_position_style (ctx, widget_width, y, node_height) {
   const MARGIN = 12 // the margin around the html element
 
@@ -37,14 +74,14 @@ function get_position_style (ctx, widget_width, y, node_height) {
   }
 }
 
-async function drawImageToCanvas (imageUrl) {
+async function drawImageToCanvas (imageUrl, sFactor = 320) {
   var canvas = document.createElement('canvas')
   var ctx = canvas.getContext('2d')
   var img = new Image()
 
   await new Promise((resolve, reject) => {
     img.onload = function () {
-      var scaleFactor = 320 / img.width
+      var scaleFactor = sFactor / img.width
       var canvasWidth = img.width * scaleFactor
       var canvasHeight = img.height * scaleFactor
 
@@ -69,7 +106,11 @@ async function drawImageToCanvas (imageUrl) {
   // 可以在这里执行其他操作，比如将Base64数据保存到服务器或显示在页面上
 }
 
-function extractInputAndOutputData (jsonData, inputIds = [], outputIds = []) {
+async function extractInputAndOutputData (
+  jsonData,
+  inputIds = [],
+  outputIds = []
+) {
   // workflow
   // const workflow=jsonData.workflow;
   // const nodes=workflow.nodes;
@@ -78,6 +119,7 @@ function extractInputAndOutputData (jsonData, inputIds = [], outputIds = []) {
   let input = []
   let output = []
   const seed = {}
+  const seedTitle = {}
 
   for (const id in data) {
     if (data.hasOwnProperty(id)) {
@@ -117,16 +159,43 @@ function extractInputAndOutputData (jsonData, inputIds = [], outputIds = []) {
           }
         }
 
+        if (node.type == 'ImagesPrompt_') {
+          //图库
+          // console.log('ImagesPrompt_', data[id])
+          let image_base64 = data[id].inputs.image_base64
+          let img_index = 0
+          let imgsData = JSON.parse(data[id].inputs.upload)
+          for (let index = 0; index < imgsData.length; index++) {
+            const imgd = imgsData[index].imgurl
+            imgsData[index].index = index
+            //TODO缩放大小
+            imgsData[index].imgurl = await parseImageToBase64(imgd)
+            if (image_base64 == imgsData[index].imgurl) {
+              img_index = index
+            }
+          }
+          options.images = imgsData
+          delete data[id].inputs.upload
+          delete data[id].inputs.image_base64
+
+          data[id].inputs.imageIndex = img_index
+        }
+
         if (node.type == 'Color') {
         }
 
-        // loadImage的mask支持
         if (node.type === 'LoadImage') {
+          // loadImage的mask支持
           let output = node.outputs.filter(ot => ot.type == 'MASK')[0]
           if (output.links) {
             // 有输出
             options.hasMask = true
           }
+          // loadImage的默认图，转为base64
+          let imgurl = app.graph.getNodeById(id).imgs[0].src
+
+          options.defaultImage = await drawImageToCanvas(imgurl, 512)
+          console.log('#loadImage的默认图', options)
         }
 
         input[inputIds.indexOf(id)] = {
@@ -143,12 +212,18 @@ function extractInputAndOutputData (jsonData, inputIds = [], outputIds = []) {
         output[outputIds.indexOf(id)] = { ...data[id], title: node.title, id }
       }
 
-      if (node.type === 'KSampler' || node.type == 'SamplerCustom') {
+      if (
+        node.type === 'KSampler' ||
+        node.type == 'SamplerCustom' ||
+        node.type === 'ChinesePrompt_Mix' ||
+        node.type === 'Seed_'
+      ) {
         // seed 的类型收集
         try {
           seed[id] = node.widgets.filter(
             w => w.name === 'seed' || w.name == 'noise_seed'
           )[0].linkedWidgets[0].value
+          seedTitle[id] = node.title
         } catch (error) {}
       }
     }
@@ -158,7 +233,7 @@ function extractInputAndOutputData (jsonData, inputIds = [], outputIds = []) {
   input = input.filter(i => i)
   output = output.filter(i => i)
 
-  return { input, output, seed }
+  return { input, output, seed, seedTitle }
 }
 
 function getUrl () {
@@ -210,7 +285,10 @@ function downloadJsonFile (jsonData, fileName = 'mix_app.json') {
 }
 
 async function save (json, download = false, showInfo = true) {
-  console.log('####SAVE', json[0])
+  let nodesAll = window._nodesAll || (await getObjectInfo())
+
+  console.log('####SAVE', nodesAll, json[0])
+
   const name = json[0],
     version = json[5],
     share_prefix = json[6], //用于分享的功能扩展
@@ -231,7 +309,14 @@ async function save (json, download = false, showInfo = true) {
   try {
     let data = await app.graphToPrompt()
 
-    let { input, output, seed } = extractInputAndOutputData(
+    //从output数据里把工作流的节点，插件数据统计出来
+    data.nodesMap = {}
+    for (const id in data.output) {
+      data.nodesMap[data.output[id].class_type] =
+        nodesAll[data.output[id].class_type]
+    }
+
+    let { input, output, seed, seedTitle } = await extractInputAndOutputData(
       data,
       inputIds,
       outputIds
@@ -242,8 +327,7 @@ async function save (json, download = false, showInfo = true) {
       authorName =
         localStorage.getItem('_mixlab_author_name') ||
         localStorage.getItem('Comfy.userName'),
-        authorLink =
-        localStorage.getItem('_mixlab_author_link') || ''
+      authorLink = localStorage.getItem('_mixlab_author_link') || ''
 
     data.app = {
       name,
@@ -252,6 +336,7 @@ async function save (json, download = false, showInfo = true) {
       input,
       output,
       seed, //控制是fixed 还是random
+      seedTitle,
       share_prefix,
       link,
       category,
@@ -259,7 +344,7 @@ async function save (json, download = false, showInfo = true) {
       author: {
         avatar: authorAvatar,
         name: authorName,
-        link:authorLink
+        link: authorLink
       }
     }
 
@@ -293,12 +378,13 @@ async function save (json, download = false, showInfo = true) {
 
 function getInputsAndOutputs () {
   const inputs =
-      `LoadImage VHS_LoadVideo CLIPTextEncode PromptSlide TextInput_ Color FloatSlider IntNumber CheckpointLoaderSimple LoraLoader`.split(
+      `LoadImage LoadImagesToBatch ImagesPrompt_ VHS_LoadVideo CLIPTextEncode PromptSlide TextInput_ Color FloatSlider IntNumber CheckpointLoaderSimple LoraLoader`.split(
         ' '
       ),
-    outputs = `PreviewImage SaveImage ShowTextForGPT VHS_VideoCombine`.split(
-      ' '
-    )
+    outputs =
+      `SaveTripoSRMesh,PreviewImage,SaveImage,TransparentImage,ShowTextForGPT,VHS_VideoCombine,VideoCombine_Adv,Image Save,SaveImageAndMetadata_,ClipInterrogator`.split(
+        ','
+      )
 
   let inputsId = [],
     outputsId = []
@@ -321,6 +407,11 @@ function getInputsAndOutputs () {
 
 app.registerExtension({
   name: 'Mixlab.utils.AppInfo',
+  init () {
+    if (!window._nodesAll) {
+      getObjectInfo().then(r => (window._nodesAll = r))
+    }
+  },
   async beforeRegisterNodeDef (nodeType, nodeData, app) {
     if (nodeType.comfyClass == 'AppInfo') {
       const orig_nodeCreated = nodeType.prototype.onNodeCreated
@@ -507,15 +598,13 @@ app.registerExtension({
         authorNameInput.appendChild(authorNameInputLabel)
         authorNameInput.appendChild(authorName)
 
-
         // 社交链接
         let authorLink = document.createElement('input')
         authorLink.type = 'text'
-        authorLink.value =
-          localStorage.getItem('_mixlab_author_link') ||''
-          authorLink.placeholder = 'author link'
-          authorLink.className = `${'comfy-multiline-input'}`
-          authorLink.style = `
+        authorLink.value = localStorage.getItem('_mixlab_author_link') || ''
+        authorLink.placeholder = 'author link'
+        authorLink.className = `${'comfy-multiline-input'}`
+        authorLink.style = `
           outline: none;
           border: none;
           padding: 4px;
@@ -543,7 +632,6 @@ app.registerExtension({
         authorLinkInput.appendChild(authorLinkInputLabel)
         authorLinkInput.appendChild(authorLink)
 
-
         widget.div.appendChild(author)
 
         let btns = document.createElement('div')

web/javascript/checkVersion_mixlab.js

@@ -3,7 +3,7 @@ import { app } from '../../../scripts/app.js'
 const repoOwner = 'shadowcz007' // 替换为仓库的所有者
 const repoName = 'comfyui-mixlab-nodes' // 替换为仓库的名称
 
-const version = 'v0.17.1'
+const version = 'v0.22.1'
 
 fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
   .then(response => response.json())
@@ -17,7 +17,13 @@ fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
       return
     if (latestVersion && latestVersion != version) {
       localStorage.setItem('_mixlab_nodes_vesion', latestVersion)
-      app.ui.dialog.show(`<h4 style="font-size: 18px;">${repoName} <br>
+      app.ui.dialog.show(`<a style="color: white;
+      font-size: 18px;
+      font-weight: 800;
+      letter-spacing: 2px;
+    }"
+    href="https://discord.gg/cXs9vZSqeK">Welcome to Mixlab nodes discord</a>
+    <h4 style="font-size: 18px;">${repoName} <br>
       Latest release version: ${latestVersion}</h4>
       <p>Please proceed to the official repository to download the latest version.</p>
       <a style="color: #2196F3;

web/javascript/gpt_mixlab.js

@@ -61,7 +61,7 @@ app.registerExtension({
   async getCustomWidgets (app) {
     return {
       KEY (node, inputName, inputData, app) {
-        console.log('##inputData', inputData)
+        // console.log('##inputData', inputData)
         const widget = {
           type: inputData[0], // the type, CHEESE
           name: inputName, // the name, slice

web/javascript/image_mixlab.js

@@ -1,7 +1,39 @@
 import { app } from '../../../scripts/app.js'
 import { api } from '../../../scripts/api.js'
-import { ComfyWidgets } from '../../../scripts/widgets.js'
+// import { ComfyWidgets } from '../../../scripts/widgets.js'
 import { $el } from '../../../scripts/ui.js'
+import { applyTextReplacements } from '../../../scripts/utils.js'
+
+function loadImageToCanvas (base64Image) {
+  var img = new Image()
+  var canvas = document.createElement('canvas')
+  var ctx = canvas.getContext('2d')
+  return new Promise((res, rej) => {
+    img.onload = function () {
+      // 等比例缩放图片
+      var width = img.width
+      var height = img.height
+      var max_width = 1024
+      if (width > max_width) {
+        height *= max_width / width
+        width = max_width
+      }
+
+      // 设置canvas尺寸
+      canvas.width = width
+      canvas.height = height
+
+      // 在canvas上绘制图片
+      ctx.drawImage(img, 0, 0, width, height)
+
+      // 将canvas转换为base64图片数据
+      var canvasData = canvas.toDataURL()
+      res(canvasData) //  canvas转换后的base64图片数据
+    }
+
+    img.src = base64Image
+  })
+}
 
 async function uploadImage (blob, fileType = '.svg', filename) {
   // const blob = await (await fetch(src)).blob();
@@ -28,6 +60,9 @@ async function uploadImage (blob, fileType = '.svg', filename) {
   return src
 }
 
+const base64Df =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAALZJREFUKFOFkLERwjAQBPdbgBkInECGaMLUQDsE0AkRVRAYWqAByxldPPOWHwnw4OBGye1p50UDSoA+W2ABLPN7i+C5dyC6R/uiAUXRQCs0bXoNIu4QPQzAxDKxHoALOrZcqtiyR/T6CXw7+3IGHhkYcy6BOR2izwT8LptG8rbMiCRAUb+CQ6WzQVb0SNOi5Z2/nX35DRyb/ENazhpWKoGwrpD6nICp5c2qogc4of+c7QcrhgF4Aa/aoAFHiL+RAAAAAElFTkSuQmCC'
+
 function base64ToBlobFromURL (base64URL, contentType) {
   return fetch(base64URL).then(response => response.blob())
 }
@@ -108,7 +143,7 @@ function createImage (url) {
   })
 }
 
-const parseImage = url => {
+const parseImageToBase64 = url => {
   return new Promise((res, rej) => {
     fetch(url)
       .then(response => response.blob())
@@ -406,9 +441,7 @@ app.registerExtension({
 
         this.serialize_widgets = true //需要保存参数
       }
-    };
-
- 
+    }
   },
   async loadedGraphNode (node, app) {
     // Fires every time a node is constructed
@@ -442,3 +475,369 @@ app.registerExtension({
     }
   }
 })
+
+const createSelect = (imgDiv, select, opts, targetWidget, textWidget) => {
+  select.style.display = 'block'
+  let html = ''
+  let isMatch = false
+  for (const opt of opts) {
+    html += `<option value='${opt.keyword}' ${opt.selected ? 'selected' : ''}>${
+      opt.keyword
+    }</option>`
+    if (opt.selected) {
+      isMatch = true
+      imgDiv.src = opt.imgurl
+      // targetWidget.value = opt.keyword
+    }
+  }
+  select.innerHTML = html
+  if (!isMatch) {
+    // targetWidget.value = opts[0].keyword
+    imgDiv.src = opts[0].imgurl
+  }
+
+  // 添加change事件监听器
+  select.addEventListener('change', async function () {
+    // 获取选中的选项的值
+    var selectedOption = select.options[select.selectedIndex].value
+    let t = opts.filter(opt => opt.keyword === selectedOption)[0]
+
+    targetWidget.value = await parseImageToBase64(t.imgurl)
+    imgDiv.src = targetWidget.value
+    textWidget.value = t.keyword
+  })
+  // console.log(select)
+}
+
+app.registerExtension({
+  name: 'Mixlab.prompt.ImagesPrompt_',
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeType.comfyClass == 'ImagesPrompt_') {
+      const orig_nodeCreated = nodeType.prototype.onNodeCreated
+      nodeType.prototype.onNodeCreated = async function () {
+        orig_nodeCreated?.apply(this, arguments)
+
+        const image_prompt = this.widgets.filter(
+          w => w.name == 'image_base64'
+        )[0]
+        const image_text = this.widgets.filter(w => w.name == 'text')[0]
+
+        const node = this
+
+        const widget = {
+          type: 'div',
+          name: 'upload',
+          draw (ctx, node, widget_width, y, widget_height) {
+            Object.assign(
+              this.div.style,
+              get_position_style(ctx, widget_width, y, node.size[1])
+            )
+          }
+        }
+
+        widget.div = $el('div', {})
+
+        // console.log('image_prompt',image_prompt)
+        const img = new Image()
+        img.src = image_prompt?.value || base64Df
+        widget.div.appendChild(img)
+
+        const btn = document.createElement('button')
+        btn.innerText = 'Upload Images JSON'
+
+        btn.style = `cursor: pointer;
+        font-weight: 300;
+        margin: 2px; 
+        color: var(--descrip-text);
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;height: 30px;min-width: 122px;
+       `
+
+        const select = document.createElement('select')
+        select.style = `display:none;cursor: pointer;
+        font-weight: 300;
+        margin: 2px; 
+        color: var(--descrip-text);
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;height: 30px;min-width: 100px;
+       `
+        widget.select = select
+
+        // const btn=document.createElement('button');
+        // btn.innerText='Upload'
+        btn.addEventListener('click', () => {
+          let inp = document.createElement('input')
+          inp.type = 'file'
+          inp.accept = '.json'
+          inp.click()
+          inp.addEventListener('change', event => {
+            // 获取选择的文件
+            // [{title,imageUrl}]
+            const file = event.target.files[0]
+            this.title = file.name.split('.')[0]
+
+            // console.log(file.name.split('.')[0])
+            // 创建文件读取器
+            const reader = new FileReader()
+
+            // 定义读取完成事件的回调函数
+            reader.onload = async event => {
+              // 读取完成后的文本内容
+              const json = JSON.parse(event.target.result)
+              console.log(node, json)
+
+              widget.value = JSON.stringify(json)
+
+              let img = widget.div.querySelector('img')
+
+              createSelect(img, select, json, image_prompt, image_text)
+
+              image_prompt.value = await parseImageToBase64(json[0].imgurl)
+              image_text.value = json[0].keyword
+
+              if (img) {
+                img.src = image_prompt.value
+              }
+
+              inp.remove()
+            }
+
+            // 以文本方式读取文件
+            reader.readAsText(file)
+          })
+        })
+
+        widget.div.appendChild(btn)
+        widget.div.appendChild(select)
+        document.body.appendChild(widget.div)
+        this.addCustomWidget(widget)
+
+        const onRemoved = this.onRemoved
+        this.onRemoved = () => {
+          widget.div.remove()
+          return onRemoved?.()
+        }
+
+        if (this.onResize) {
+          this.onResize(this.size)
+        }
+
+        this.serialize_widgets = true //需要保存参数
+      }
+    }
+  },
+  async loadedGraphNode (node, app) {
+    if (node.type === 'ImagesPrompt_') {
+      try {
+        let prompt = node.widgets.filter(w => w.name === 'image_base64')[0]
+        let text = node.widgets.filter(w => w.name === 'text')[0]
+        let uploadWidget = node.widgets.filter(w => w.name == 'upload')[0]
+        // console.log('##prompt',prompt.value)
+        let img = uploadWidget.div.querySelector('img')
+        let json = JSON.parse(uploadWidget.value)
+
+        for (let index = 0; index < json.length; index++) {
+          const j = json[index]
+          let base64 = await parseImageToBase64(j.imgurl)
+          if (base64 === prompt.value) {
+            json[index].selected = true
+          }
+        }
+
+        if (json && json[0]) {
+          uploadWidget.select.style.display = 'block'
+          createSelect(img, uploadWidget.select, json, prompt, text)
+        }
+      } catch (error) {}
+    }
+  }
+})
+
+const createInputImageForBatch = (base64, widget) => {
+  let im = new Image()
+  im.src = base64
+  im.style = `width: 88px;`
+
+  im.addEventListener('click', e => {
+    let newValue = []
+    let items = widget.value?.base64 || []
+    for (const v of items) {
+      if (v != base64) newValue.push(v)
+    }
+    widget.value.base64 = newValue
+    im.remove()
+  })
+
+  return im
+}
+
+app.registerExtension({
+  name: 'Mixlab.Comfy.LoadImagesToBatch',
+  async getCustomWidgets (app) {
+    return {
+      IMAGEBASE64 (node, inputName, inputData, app) {
+        // console.log('##node', node)
+        const widget = {
+          value: {
+            base64: []
+          }, // 不能[x,x,x]
+          type: inputData[0], // the type
+          name: inputName, // the name, slice
+          size: [128, 32], // a default size
+          draw (ctx, node, width, y) {},
+          computeSize (...args) {
+            return [128, 32] // a method to compute the current size of the widget
+          }
+          // serializeValue (nodeId, widgetIndex) {
+          //   return widget.value
+          // },
+        }
+        //  widget.something = something;          // maybe adds stuff to it
+        node.addCustomWidget(widget) // adds it to the node
+        return widget // and returns it.
+      }
+    }
+  },
+
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeType.comfyClass == 'LoadImagesToBatch') {
+      const orig_nodeCreated = nodeType.prototype.onNodeCreated
+      nodeType.prototype.onNodeCreated = function () {
+        orig_nodeCreated?.apply(this, arguments)
+
+        let imagesWidget = this.widgets.filter(w => w.name == 'images')[0]
+
+        const widget = {
+          type: 'div',
+          name: 'image_base64',
+          draw (ctx, node, widget_width, y, widget_height) {
+            Object.assign(
+              this.div.style,
+              get_position_style(ctx, widget_width, 44, node.size[1])
+            )
+          },
+          serialize: false
+        }
+
+        widget.div = $el('div', {})
+
+        document.body.appendChild(widget.div)
+
+        let imagePreview = document.createElement('div')
+        let imagesDiv = document.createElement('div') //显示图片
+        imagesDiv.className = 'images_preview'
+        imagesDiv.style = `width: calc(100% - 14px);
+        display: flex;
+        flex-wrap: wrap;
+        padding: 7px;    justify-content: space-between;
+        align-items: center;`
+
+        let inputImage = document.createElement('input')
+        inputImage.type = 'file'
+        inputImage.style.display = 'none'
+        inputImage.addEventListener('change', e => {
+          e.preventDefault()
+          const file = e.target.files[0]
+          const reader = new FileReader()
+          reader.onload = async event => {
+            let base64 = event.target.result
+            //压缩图片，控制1024以内
+            base64 = await loadImageToCanvas(base64)
+            // console.log(base64)
+            if (!imagesWidget.value) imagesWidget.value = { base64: [] }
+            imagesWidget.value.base64.push(base64)
+            let im = createInputImageForBatch(base64, imagesWidget)
+            imagesDiv.appendChild(im)
+          }
+          reader.readAsDataURL(file)
+        })
+
+        const btn = document.createElement('button')
+        btn.innerText = 'Upload Image'
+
+        btn.style = `cursor: pointer;
+        font-weight: 300;
+        margin: 2px; 
+        color: var(--descrip-text);
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;height: 30px;min-width: 122px;
+       `
+
+        btn.addEventListener('click', e => {
+          e.preventDefault()
+          inputImage.click()
+        })
+
+        widget.div.appendChild(imagePreview)
+        imagePreview.appendChild(imagesDiv)
+        imagePreview.appendChild(btn)
+        imagePreview.appendChild(inputImage)
+
+        this.addCustomWidget(widget)
+
+        // document.addEventListener('wheel', handleMouseWheel)
+
+        const onRemoved = this.onRemoved
+        this.onRemoved = () => {
+          inputImage.remove()
+          widget.div.remove()
+          try {
+            // document.removeEventListener('wheel', handleMouseWheel)
+          } catch (error) {
+            console.log(error)
+          }
+
+          return onRemoved?.()
+        }
+
+        this.serialize_widgets = true //需要保存参数
+      }
+    }
+
+    if (nodeData.name === 'SaveImageAndMetadata_') {
+      const onNodeCreated = nodeType.prototype.onNodeCreated
+      // /web/extensions/core/saveImageExtraOutput.js
+      nodeType.prototype.onNodeCreated = function () {
+        const r = onNodeCreated
+          ? onNodeCreated.apply(this, arguments)
+          : undefined
+        const widget = this.widgets.find(w => w.name === 'filename_prefix')
+        widget.serializeValue = () => {
+          return applyTextReplacements(app, widget.value)
+        }
+
+        return r
+      }
+
+      const onExecuted = nodeType.prototype.onExecuted
+      nodeType.prototype.onExecuted = function (message) {
+        onExecuted?.apply(this, arguments)
+        console.log('##onExecuted', this, message)
+        //TODO 是否 保存base64
+        if (message.base64) {
+          if (Array.isArray(message.base64)) {
+          }
+        }
+      }
+    }
+  },
+  async loadedGraphNode (node, app) {
+    if (node.type === 'LoadImagesToBatch') {
+      // await sleep(0)
+      let imagesWidget = node.widgets.filter(w => w.name === 'images')[0]
+      let imagePreview = node.widgets.filter(w => w.name == 'image_base64')[0]
+
+      let pre = imagePreview.div.querySelector('.images_preview')
+      for (const d of imagesWidget.value?.base64 || []) {
+        let im = createInputImageForBatch(d, imagesWidget)
+        pre.appendChild(im)
+      }
+    }
+  }
+})

web/javascript/layer_mixlab.js

@@ -1,8 +1,70 @@
 import { app } from '../../../scripts/app.js'
-// import { api } from '../../../scripts/api.js'
+import { api } from '../../../scripts/api.js'
 import { ComfyWidgets } from '../../../scripts/widgets.js'
 import { $el } from '../../../scripts/ui.js'
 
+function downloadJsonFile (jsonData, fileName = 'grid.json') {
+  const dataString = JSON.stringify(jsonData)
+  const blob = new Blob([dataString], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = url
+  link.download = fileName
+  link.click()
+
+  // 释放URL对象
+  setTimeout(() => {
+    URL.revokeObjectURL(url)
+  }, 0)
+}
+
+function createSelectWithOptions (options) {
+  const select = document.createElement('select')
+
+  options.forEach(option => {
+    const optionElement = document.createElement('option')
+    optionElement.text = option
+    optionElement.value = option
+    select.appendChild(optionElement)
+  })
+
+  select.style = `cursor: pointer;
+  font-weight: 300; 
+  height: 30px;
+  min-width: 122px;
+  position: absolute;
+  top: 24px;
+  left: 88px;
+  z-index: 999999999999999;
+       `
+
+  return select
+}
+
+function drawCanvasWithText (w, h, tag, color = 'rgba(255,255,255,0.4)') {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  // 设置画布大小
+  canvas.width = w
+  canvas.height = h
+
+  // 绘制白色背景
+  ctx.fillStyle = color
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  // 绘制文字
+  ctx.fillStyle = '#000000'
+  ctx.font = '20px Arial'
+  ctx.fillText(tag, 50, 50)
+
+  // 导出为Base64
+  const base64 = canvas.toDataURL()
+
+  return base64
+}
+
 function get_position_style (ctx, widget_width, y, node_height) {
   const MARGIN = 4 // the margin around the html element
 
@@ -156,32 +218,29 @@ const parseSvg = async svgContent => {
   return { data, image: base64, svgElement }
 }
 
-
-function findImages(nodeId) {
+function findImages (nodeId) {
   // 检查当前节点是否有 imgs 字段
   const n = app.graph.getNodeById(nodeId)
   if (n.imgs) {
-    return n.imgs;
+    return n.imgs
   }
 
   // 检查当前节点的 inputs 是否有 image 字段
   if (n.inputs) {
     for (let i = 0; i < n.inputs.length; i++) {
-      if (n.inputs[i].name==='image'||n.inputs[i].name==='images') {
+      if (n.inputs[i].name === 'image' || n.inputs[i].name === 'images') {
         // 获取新的 nodeId，并递归调用 findImages 函数
-        var linkId = n.inputs[i]?.link;
+        var linkId = n.inputs[i]?.link
         var origin_id = app.graph.links[linkId].origin_id
-        return findImages(origin_id);
+        return findImages(origin_id)
       }
     }
   }
 
   // 如果没有找到 imgs 字段或者 image 字段，则返回 null
-  return null;
+  return null
 }
 
- 
-
 async function setArea (cw, ch, topBase64, base64, data, fn) {
   let displayHeight = Math.round(window.screen.availHeight * 0.8)
   let div = document.createElement('div')
@@ -353,6 +412,196 @@ async function setArea (cw, ch, topBase64, base64, data, fn) {
   }
 }
 
+async function setAreaTags (cw, ch, grids, fn) {
+  let base64 = drawCanvasWithText(cw, ch, '', 'white')
+  let displayHeight = Math.round(window.screen.availHeight * 0.8)
+  let div = document.createElement('div')
+  div.innerHTML = `
+    <div id='ml_overlay' style='position: absolute;top:0;background: #251f1fc4;
+    height: 100vh;
+    z-index:999999;
+    width: 100%;'>
+      <img id='ml_video' style='position: absolute; 
+      height: ${displayHeight}px;user-select: none; 
+      -webkit-user-drag: none;
+      outline: 2px solid #eaeaea;
+      box-shadow: 8px 9px 17px #575757;' />
+      ${Array.from(grids, g => {
+        const { label: tag, grid } = g
+        const [dx, dy, dw, dh] = grid
+        const base64Data = drawCanvasWithText(dw, dh, tag)
+
+        let x = 0,
+          y = 0,
+          width = (cw * displayHeight) / ch,
+          height = displayHeight
+
+        let imgWidth = cw
+        let imgHeight = ch
+
+        if (dw > 0 && dh > 0) {
+          // 相同尺寸窗口，恢复选区
+          x = (width * dx) / imgWidth
+          y = (height * dy) / imgHeight
+          width = (width * dw) / imgWidth
+          height = (height * dh) / imgHeight
+        }
+
+        return `<div class='ml_selection' 
+          data-tag="${tag}"
+          style='position:absolute; 
+          border: 2px dashed red;
+          pointer-events: none;
+          background-image: url("${base64Data}");
+                background-repeat: no-repeat;
+                background-size: cover;
+                left:${x}px;
+                top:${y}px;
+                width:${width}px;
+                height:${height}px;
+                '></div>`
+      })}
+      <div class="mx_close"> X </div>
+    </div>`
+  // document.body.querySelector('#ml_overlay')
+  document.body.appendChild(div)
+
+  const tags = Array.from(grids, g => g.label)
+  let select = createSelectWithOptions(tags)
+  document.body.appendChild(select)
+
+  let img = div.querySelector('#ml_video')
+  // let overlay = div.querySelector('#ml_overlay')
+  let selections = [...div.querySelectorAll('.ml_selection')]
+
+  let selection = selections.filter(
+    s => s.getAttribute('data-tag') === select.value
+  )[0]
+
+  select.addEventListener('change', e => {
+    selection = selections.filter(
+      s => s.getAttribute('data-tag') === select.value
+    )[0]
+  })
+
+  // console.log(select.value,selection)
+  let close = div.querySelector('.mx_close')
+  let startX, startY, endX, endY
+  let start = false
+  let setDone = false
+  // Set video source
+  img.src = base64
+  // canvas.toDataURL();
+  close.style = `cursor: pointer;
+  position: fixed;
+  left: 12px;
+  top: 12px;
+  z-index: 99999999;
+  background: black;
+  width: 44px;
+  height: 44px;
+  text-align: center;
+  line-height: 44px;`
+
+  // Add mouse events
+  img.addEventListener('mousedown', startSelection)
+  img.addEventListener('mousemove', updateSelection)
+  img.addEventListener('mouseup', endSelection)
+
+  const removeDiv = () => {
+    div.remove()
+    select?.remove()
+    close.removeEventListener('click', removeDiv)
+    img.removeEventListener('mousedown', startSelection)
+    img.removeEventListener('mousemove', updateSelection)
+    img.removeEventListener('mouseup', endSelection)
+    img.removeEventListener('mousedown', setDoneCheck)
+  }
+  close.addEventListener('click', removeDiv)
+
+  const setDoneCheck = event => {
+    console.log(setDone)
+    if (setDone) {
+      img.addEventListener('mousedown', startSelection)
+      img.addEventListener('mousemove', updateSelection)
+      img.addEventListener('mouseup', endSelection)
+      setDone = false
+      start = false
+      startX = event.clientX
+      startY = event.clientY
+    }
+  }
+  img.addEventListener('mousedown', setDoneCheck)
+
+  function remove () {
+    img.removeEventListener('mousedown', startSelection)
+    img.removeEventListener('mousemove', updateSelection)
+    img.removeEventListener('mouseup', endSelection)
+    setDone = true
+    // select?.remove()
+  }
+
+  function startSelection (event) {
+    if (start == false) {
+      startX = event.clientX
+      startY = event.clientY
+      updateSelection(event)
+      start = true
+    } else {
+    }
+  }
+
+  function updateSelection (event) {
+    endX = event.clientX
+    endY = event.clientY
+
+    // Calculate width, height, and coordinates
+    let width = Math.abs(endX - startX)
+    let height = Math.abs(endY - startY)
+    let left = Math.min(startX, endX)
+    let top = Math.min(startY, endY)
+
+    // Set selection style
+    selection.style.left = left + 'px'
+    selection.style.top = top + 'px'
+    selection.style.width = width + 'px'
+    selection.style.height = height + 'px'
+  }
+
+  function endSelection (event) {
+    endX = event.clientX
+    endY = event.clientY
+
+    // 获取img元素的真实宽度和高度
+    let imgWidth = img.naturalWidth
+    let imgHeight = img.naturalHeight
+
+    // 换算起始坐标
+    let realStartX = (startX / img.offsetWidth) * imgWidth
+    let realStartY = (startY / img.offsetHeight) * imgHeight
+
+    // 换算起始坐标
+    let realEndX = (endX / img.offsetWidth) * imgWidth
+    let realEndY = (endY / img.offsetHeight) * imgHeight
+
+    startX = realStartX
+    startY = realStartY
+    endX = realEndX
+    endY = realEndY
+    // Calculate width, height, and coordinates
+    let width = Math.round(Math.abs(endX - startX))
+    let height = Math.round(Math.abs(endY - startY))
+    let left = Math.round(Math.min(startX, endX))
+    let top = Math.round(Math.min(startY, endY))
+
+    if (width <= 0 && height <= 0) return remove()
+
+    if (!!fn) fn(select.value, left, top, width, height)
+
+    remove()
+  }
+}
+
 app.registerExtension({
   name: 'Mixlab.layer.ShowLayer',
   async getCustomWidgets (app) {
@@ -598,8 +847,8 @@ app.registerExtension({
             }
             try {
               console.log('this.inputs', this.id)
-              let imgs=findImages(this.id)
-              
+              let imgs = findImages(this.id)
+
               // let topLinkId = this.inputs[0].link
               // let topNodeId = app.graph.links[topLinkId].origin_id
               let topIm = imgs[0]
@@ -607,9 +856,9 @@ app.registerExtension({
               let linkId = this.inputs[3].link
               let nodeId = app.graph.links[linkId].origin_id
               // console.log(linkId,this.inputs)
-              let imgs2=findImages(nodeId)
+              let imgs2 = findImages(nodeId)
               let im = imgs2[0]
-              console.log(topIm,im)
+              console.log(topIm, im)
               // let src = im.src
               setArea(
                 im.naturalWidth,
@@ -641,3 +890,306 @@ app.registerExtension({
     }
   }
 })
+
+app.registerExtension({
+  name: 'Mixlab.layer.GridInput',
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeType.comfyClass == 'GridInput') {
+      const orig_nodeCreated = nodeType.prototype.onNodeCreated
+      nodeType.prototype.onNodeCreated = async function () {
+        orig_nodeCreated?.apply(this, arguments)
+
+        const grids_widget = this.widgets.filter(w => w.name == 'grids')[0]
+
+        const widget = {
+          type: 'div',
+          name: 'upload',
+          draw (ctx, node, widget_width, y, widget_height) {
+            Object.assign(
+              this.div.style,
+              get_position_style(ctx, widget_width, y, node.size[1]),
+              {
+                justifyContent: 'flex-start'
+              }
+            )
+          }
+        }
+
+        widget.div = $el('div', {})
+
+        const addBtn = document.createElement('button')
+        addBtn.innerText = 'Add Box'
+        addBtn.style = `cursor: pointer;
+        font-weight: 300;
+        margin: 2px; 
+        color: var(--descrip-text);
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;height: 30px;min-width: 122px;
+       `
+
+        const vbtn = document.createElement('button')
+        vbtn.innerText = 'Set Box'
+        vbtn.style = `cursor: pointer;
+        font-weight: 300;
+        margin: 2px; 
+        color: var(--descrip-text);
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;height: 30px;min-width: 122px;
+       `
+
+        const btn = document.createElement('button')
+        btn.innerText = 'Upload JSON'
+
+        btn.style = `cursor: pointer;
+        font-weight: 300;
+        margin: 2px; 
+        color: var(--descrip-text);
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;height: 30px;min-width: 122px;
+       `
+
+        addBtn.addEventListener('click', () => {
+          const { width, height, grids } = JSON.parse(grids_widget.value)
+          grids.push({
+            label: 'background',
+            grid: [12, 12, width - 24, height - 24]
+          })
+          grids_widget.value = JSON.stringify(
+            {
+              width,
+              height,
+              grids
+            },
+            null,
+            2
+          )
+        })
+
+        vbtn.addEventListener('click', () => {
+          const { width, height, grids } = JSON.parse(grids_widget.value)
+
+          setAreaTags(width, height, grids, (tag, x, y, w, h) => {
+            grids_widget.value = JSON.stringify(
+              {
+                width,
+                height,
+                grids: Array.from(grids, g => {
+                  if (g.label === tag) {
+                    g.grid = [x, y, w, h]
+                  }
+                  return g
+                })
+              },
+              null,
+              2
+            )
+          })
+        })
+
+        btn.addEventListener('click', () => {
+          let inp = document.createElement('input')
+          inp.type = 'file'
+          inp.accept = '.json'
+          inp.click()
+          inp.addEventListener('change', event => {
+            // 获取选择的文件
+            const file = event.target.files[0]
+            this.title = file.name.split('.')[0]
+
+            // console.log(file.name.split('.')[0])
+            // 创建文件读取器
+            const reader = new FileReader()
+
+            // 定义读取完成事件的回调函数
+            reader.onload = event => {
+              // 读取完成后的文本内容
+              const fileContent = JSON.parse(event.target.result)
+              const grids = fileContent
+              grids_widget.value = JSON.stringify(grids, null, 2)
+              // widget.value = grids
+
+              inp.remove()
+            }
+
+            // 以文本方式读取文件
+            reader.readAsText(file)
+          })
+        })
+
+        widget.div.appendChild(addBtn)
+        widget.div.appendChild(vbtn)
+        widget.div.appendChild(btn)
+        document.body.appendChild(widget.div)
+        this.addCustomWidget(widget)
+
+        const onExecuted = nodeType.prototype.onExecuted
+        nodeType.prototype.onExecuted = function (message) {
+          const r = onExecuted?.apply?.(this, arguments)
+
+          let json = message.json
+          if (json) {
+            json = {
+              width: json[0],
+              height: json[1],
+              grids: json[2]
+            }
+            grids_widget.value = JSON.stringify(json, null, 2)
+            // widget.value = json
+          }
+
+          return r
+        }
+
+        const onRemoved = this.onRemoved
+        this.onRemoved = () => {
+          widget.div.remove()
+          return onRemoved?.()
+        }
+
+        if (this.onResize) {
+          this.onResize(this.size)
+        }
+
+        this.serialize_widgets = true //需要保存参数
+      }
+    }
+  },
+  async loadedGraphNode (node, app) {
+    if (node.type === 'GridInput') {
+      try {
+        const grids_widget = node.widgets.filter(w => w.name == 'grids')[0]
+        const { width, height, grids } = JSON.parse(grids_widget.value)
+        console.log('#GridInput', node, grids)
+
+        const div = node.widgets.filter(w => w.name == 'upload')[0]
+        div.div.querySelector('select').innerHTML = Array.from(
+          grids,
+          g => `<option value="${g.label}">${g.label}</option>`
+        ).join('')
+      } catch (error) {}
+    }
+  }
+})
+
+app.registerExtension({
+  name: 'Mixlab.layer.GridDisplayAndSave',
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeType.comfyClass == 'GridDisplayAndSave') {
+      const orig_nodeCreated = nodeType.prototype.onNodeCreated
+      nodeType.prototype.onNodeCreated = async function () {
+        orig_nodeCreated?.apply(this, arguments)
+
+        const grids_widget = this.widgets.filter(w => w.name == 'grids')[0]
+        console.log('GridDisplayAndSave', grids_widget)
+        const widget = {
+          type: 'div',
+          name: 'save_json',
+          draw (ctx, node, widget_width, y, widget_height) {
+            Object.assign(
+              this.div.style,
+              get_position_style(ctx, widget_width, y, node.size[1]),
+              {
+                justifyContent: 'flex-start',
+                flexDirection: 'column'
+              }
+            )
+          }
+        }
+
+        widget.div = $el('div', {})
+
+        const btn = document.createElement('button')
+        btn.innerText = 'Save JSON'
+
+        btn.style = `cursor: pointer;
+        font-weight: 300;
+        margin: 2px; 
+        color: var(--descrip-text);
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;height: 30px;min-width: 122px;
+        max-width: 122px;
+       `
+
+        btn.addEventListener('click', () => {
+          if (window._mixlab_grid)
+            downloadJsonFile(
+              window._mixlab_grid,
+              this.widgets.filter(w => w.name == 'filename_prefix')[0]?.value +
+                '_grid.json'
+            )
+        })
+
+        widget.div.appendChild(btn)
+        document.body.appendChild(widget.div)
+        this.addCustomWidget(widget)
+
+        const onExecuted = nodeType.prototype.onExecuted
+        nodeType.prototype.onExecuted = function (message) {
+          const r = onExecuted?.apply?.(this, arguments)
+          let save_json = this.widgets.filter(d => d.name == 'save_json')[0]
+          let div = save_json?.div
+          // console.log('Test',message)
+
+          let image = message.image[0]
+          let json = message.json
+          if (image) {
+            const { filename, subfolder, type } = image
+
+            if (!div.querySelector('img')) {
+              let im = new Image()
+              div.appendChild(im)
+              im.style.width = '100%'
+            }
+            div.querySelector('img').src = api.apiURL(
+              `/view?filename=${encodeURIComponent(
+                filename
+              )}&type=${type}&subfolder=${subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`
+            )
+
+            window._mixlab_grid = {
+              width: json[0],
+              height: json[1],
+              grids: json[2]
+            }
+            // console.log(src)
+          }
+
+          this.onResize?.(this.size)
+
+          return r
+        }
+
+        const onRemoved = this.onRemoved
+        this.onRemoved = () => {
+          widget.div.remove()
+          return onRemoved?.()
+        }
+
+        if (this.onResize) {
+          this.onResize(this.size)
+        }
+
+        this.serialize_widgets = true //需要保存参数
+      }
+    }
+  },
+  async loadedGraphNode (node, app) {
+    if (node.type === 'GridDisplayAndSave') {
+      try {
+        let grids_widget = node.widgets.filter(w => w.name === 'grids')[0]
+        // let ks = getLocalData(`_mixlab_PromptSlide`)
+        let uploadWidget = node.widgets.filter(w => w.name == 'upload')[0]
+        // console.log('##widget', uploadWidget.value)
+        let grids = JSON.parse(uploadWidget.value)
+      } catch (error) {}
+    }
+  }
+})

web/javascript/smart_connect.js

@@ -46,6 +46,18 @@ const smart_connect_config_input = [
     node_widget_name: 'image',
     inputNodeName: 'LoadImage',
     inputNode_output_name: 'IMAGE'
+  },
+  {
+    node_type: 'TripoSRSampler_',
+    node_widget_name: 'image',
+    inputNodeName: 'LoadImagesToBatch',
+    inputNode_output_name: 'IMAGE'
+  },
+  {
+    node_type: 'TripoSRSampler_',
+    node_widget_name: 'mask',
+    inputNodeName: 'RembgNode_Mix',
+    inputNode_output_name: 'masks'
   }
 ]
 
@@ -74,6 +86,18 @@ const smart_connect_config_output = [
     outputNodeName: 'SaveImage',
     outputNode_input_name: 'images'
   },
+  {
+    node_type: 'VAEDecode',
+    node_output_name: 'IMAGE',
+    outputNodeName: 'AppInfo',
+    outputNode_input_name: 'IMAGE'
+  },
+  {
+    node_type: 'VAEDecode',
+    node_output_name: 'IMAGE',
+    outputNodeName: 'SaveImageAndMetadata_',
+    outputNode_input_name: 'images'
+  },
   {
     node_type: 'Moondream',
     node_output_name: 'STRING',
@@ -181,7 +205,10 @@ export function smart_init () {
       ]
       let node_slotType = config[0]
       // 如果input没有，则创建
-      if (!node.inputs?.filter(inp => inp.name === widget.name)[0]||!node.inputs)
+      if (
+        !node.inputs?.filter(inp => inp.name === widget.name)[0] ||
+        !node.inputs
+      )
         convertToInput(node, widget, config)
       input_node.connectByType(inputNode_slot, node, node_slotType)
     }

web/javascript/ui_mixlab.js

@@ -299,15 +299,16 @@ async function get_my_app (filename = null, category = '') {
     data = []
 
     for (const res of result.data) {
-      let { app, workflow } = res.data
-      if (app.filename)
-        data.push({
+      let { app, workflow } = res.data;
+      if (app?.filename) data.push({
           ...app,
           data: workflow,
           date: res.date
         })
     }
-  } catch (error) {}
+  } catch (error) {
+    console.log(error)
+  }
   return data
 }
 
@@ -943,6 +944,20 @@ app.registerExtension({
         }
       ]
 
+      if (node.widgets) {
+        // let text_widget = node.widgets.filter(
+        //   w => w.name === 'text' && typeof w.value == 'string'
+        // )
+        // if (text_widget && text_widget.length == 1) {
+        //   opts.push({
+        //     content: 'Text-to-Text ♾️Mixlab', // with a name
+        //     callback: () => {
+        //       LGraphCanvas.prototype.text2text(node)
+        //     } // and the callback
+        //   })
+        // }
+      }
+
       opts = addSmartMenu(opts, node)
 
       // if (node.type == 'CLIPTextEncode') {
@@ -1123,6 +1138,57 @@ app.registerExtension({
         (this.canvas.height * 0.5) / (this.ds.scale * dpr) // 考虑设备像素比
       this.setDirty(true, true)
     }
+
+    // 支持app模式的json
+    const loadAppJson = async data => {
+      let workflow
+      try {
+        let w = JSON.parse(data)
+        if (w.app && w.output) workflow = w.workflow
+      } catch (err) {}
+
+      if (workflow && workflow.version && workflow.nodes && workflow.extra) {
+        await app.loadGraphData(workflow)
+      }
+    }
+
+    if (!window._mixlab_app_paste_listener) {
+      window._mixlab_app_paste_listener = true
+      //粘贴json的事件
+      document.addEventListener('paste', async e => {
+        // ctrl+shift+v is used to paste nodes with connections
+        // this is handled by litegraph
+        if (this.shiftDown) return
+
+        let data = e.clipboardData || window.clipboardData
+
+        // No image found. Look for node data
+        data = data.getData('text/plain')
+
+        loadAppJson(data)
+      })
+
+      // 把json往里 拖
+      document.addEventListener('drop', async event => {
+        event.preventDefault()
+        event.stopPropagation()
+
+       
+
+        // Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
+        if (
+          event.dataTransfer.files.length &&
+          event.dataTransfer.files[0].type == 'application/json'
+        ) {
+          const reader = new FileReader()
+          reader.onload = async () => {
+       
+            loadAppJson(reader.result)
+          }
+          reader.readAsText(event.dataTransfer.files[0])
+        }
+      })
+    }
   },
   setup () {
     setTimeout(async () => {
@@ -1132,6 +1198,8 @@ app.registerExtension({
       const apps = await get_my_app()
       if (!apps) return
 
+      console.log('apps',apps)
+
       let apps_map = { 0: [] }
 
       for (const app of apps) {
@@ -1145,7 +1213,7 @@ app.registerExtension({
 
       let apps_opts = []
       for (const category in apps_map) {
-        console.log('category', typeof category)
+        // console.log('category', typeof category)
         if (category === '0') {
           apps_opts.push(
             ...Array.from(apps_map[category], a => {
@@ -1497,14 +1565,16 @@ app.registerExtension({
                 document.body.appendChild(div)
             }
           },
-          {
-            content: 'Workflow App ♾️Mixlab',
-            has_submenu: true,
-            disabled: false,
-            submenu: {
-              options: apps_opts
-            }
-          }
+          apps_opts.length > 0
+            ? {
+                content: 'Workflow App ♾️Mixlab',
+                has_submenu: true,
+                disabled: false,
+                submenu: {
+                  options: apps_opts
+                }
+              }
+            : null
         )
 
         return options
@@ -1573,3 +1643,41 @@ app.registerExtension({
     } catch (error) {}
   }
 })
+
+//获取当前显存
+function fetchSystemStats () {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const response = await fetch('/system_stats')
+      const data = await response.json()
+      resolve(data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+//清理显存
+function postFreeData () {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const postData = {
+        unload_models: true,
+        free_memory: true
+      }
+      const response = await fetch('/free', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(postData)
+      })
+      if (response.ok) {
+        resolve()
+      } else {
+        reject(new Error('Request failed'))
+      }
+    } catch (error) {
+      reject(error)
+    }
+  })
+}

web/javascript/video_mixlab.js

@@ -0,0 +1,515 @@
+import { app } from '../../../scripts/app.js'
+import { api } from '../../../scripts/api.js'
+import { ComfyWidgets } from '../../../scripts/widgets.js'
+
+import { $el } from '../../../scripts/ui.js'
+
+// The code is based on ComfyUI-VideoHelperSuite modification.
+
+
+
+function injectCSS (css) {
+  // 检查页面中是否已经存在具有相同内容的style标签
+  const existingStyle = document.querySelector('style')
+  if (existingStyle && existingStyle.textContent === css) {
+    return // 如果已经存在相同的样式，则不进行注入
+  }
+
+  // 创建一个新的style标签，并将CSS内容注入其中
+  const style = document.createElement('style')
+  style.textContent = css
+
+  // 将style标签插入到页面的head元素中
+  const head = document.querySelector('head')
+  head.appendChild(style)
+}
+
+injectCSS(`
+.hidden{
+  display:none !important
+}`)
+
+function get_position_style (ctx, widget_width, y, node_height) {
+  const MARGIN = 4 // the margin around the html element
+
+  /* Create a transform that deals with all the scrolling and zooming */
+  const elRect = ctx.canvas.getBoundingClientRect()
+  const transform = new DOMMatrix()
+    .scaleSelf(
+      elRect.width / ctx.canvas.width,
+      elRect.height / ctx.canvas.height
+    )
+    .multiplySelf(ctx.getTransform())
+    .translateSelf(MARGIN, MARGIN + y)
+
+  return {
+    transformOrigin: '0 0',
+    transform: transform,
+    left: `0`,
+    top: `0`,
+    cursor: 'pointer',
+    position: 'absolute',
+    maxWidth: `${widget_width - MARGIN * 2}px`,
+    // 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 * 0.3 - MARGIN * 2}px`,
+    // background: '#EEEEEE',
+    display: 'flex',
+    flexDirection: 'column',
+    // alignItems: 'center',
+    justifyContent: 'space-around'
+  }
+}
+
+function videoUpload (node, inputName, inputData, app) {
+  const imageWidget = node.widgets.find(w => w.name === 'video')
+  let uploadWidget
+
+  const widget = {
+    type: 'div',
+    name: 'upload-preview',
+    draw (ctx, node, widget_width, y, widget_height) {
+      Object.assign(
+        this.div.style,
+        get_position_style(ctx, widget_width, 220, node.size[1]),
+        {
+          outline: '1px solid'
+        }
+      )
+    }
+  }
+
+  widget.div = $el('div', {})
+  widget.div.style.width = `120px`
+  document.body.appendChild(widget.div)
+  node.addCustomWidget(widget)
+  // console.log('#imageWidget', imageWidget)
+  const displayDiv = document.createElement('video')
+  displayDiv.controls = true
+  // displayDiv.style=`width:200px;height:200px`
+  imageWidget.callback = () => {
+    displayDiv.src = `/view?filename=${
+      imageWidget.value
+    }&type=input&subfolder=${''}&rand=${Math.random()}`
+
+    // displayDiv.onloadedmetadata = function () {
+    //   var frameCount = displayDiv.duration * displayDiv.webkitDecodedFrameCount
+    //   console.log('视频帧数：' + frameCount)
+    //   node.widgets.filter(w => w.name == 'video_segment_frames')[0].value =
+    //     frameCount
+    // }
+  }
+
+  if (imageWidget.value) {
+    // console.log(imageWidget.value)
+    displayDiv.src = `/view?filename=${
+      imageWidget.value
+    }&type=input&subfolder=${''}&rand=${Math.random()}`
+  }
+
+  widget.div.appendChild(displayDiv)
+
+  const onRemoved = node.onRemoved
+  node.onRemoved = () => {
+    widget.div.remove()
+    return onRemoved?.()
+  }
+
+  var default_value = imageWidget.value
+  Object.defineProperty(imageWidget, 'value', {
+    set: function (value) {
+      this._real_value = value
+    },
+
+    get: function () {
+      let value = ''
+      if (this._real_value) {
+        value = this._real_value
+      } else {
+        return default_value
+      }
+
+      if (value.filename) {
+        let real_value = value
+        value = ''
+        if (real_value.subfolder) {
+          value = real_value.subfolder + '/'
+        }
+
+        value += real_value.filename
+
+        if (real_value.type && real_value.type !== 'input')
+          value += ` [${real_value.type}]`
+      }
+      return value
+    }
+  })
+  async function uploadFile (file, updateNode, pasted = false) {
+    try {
+      // Wrap file in formdata so it includes filename
+      const body = new FormData()
+      body.append('image', file)
+      if (pasted) body.append('subfolder', 'pasted')
+      const resp = await api.fetchApi('/upload/image', {
+        method: 'POST',
+        body
+      })
+
+      if (resp.status === 200) {
+        const data = await resp.json()
+        // Add the file to the dropdown list and update the widget value
+        let path = data.name
+        if (data.subfolder) path = data.subfolder + '/' + path
+
+        if (!imageWidget.options.values.includes(path)) {
+          imageWidget.options.values.push(path)
+        }
+
+        if (updateNode) {
+          imageWidget.value = path
+        }
+
+        return `/view?filename=${path}&type=input&subfolder=${
+          pasted ? 'pasted' : ''
+        }&rand=${Math.random()}`
+      } else {
+        alert(resp.status + ' - ' + resp.statusText)
+      }
+    } catch (error) {
+      alert(error)
+    }
+  }
+
+  const fileInput = document.createElement('input')
+  Object.assign(fileInput, {
+    type: 'file',
+    accept: 'video/*,.mkv,video/webm,video/mp4,video/x-matroska,image/gif',
+    style: 'display: none',
+    onchange: async () => {
+      if (fileInput.files.length) {
+        let file = fileInput.files[0]
+
+        const url = await uploadFile(file, true)
+
+        // console.log('fileInput', file)
+        var reader = new FileReader()
+        reader.onload = function () {
+          displayDiv.src = url
+          displayDiv.onloadedmetadata = function () {
+            // var frameCount =
+            //   displayDiv.duration * displayDiv.webkitDecodedFrameCount
+            // console.log('视频帧数：' + frameCount)
+            // node.widgets.filter(
+            //   w => w.name == 'video_segment_frames'
+            // )[0].value = frameCount
+          }
+        }
+        reader.readAsDataURL(file)
+      }
+    }
+  })
+  document.body.append(fileInput)
+
+  // Create the button widget for selecting the files
+  uploadWidget = node.addWidget('button', 'upload file', 'video', () => {
+    fileInput.click()
+  })
+  uploadWidget.serialize = false
+  return { widget: uploadWidget }
+}
+ComfyWidgets.VIDEOUPLOAD_ = videoUpload
+
+app.registerExtension({
+  name: 'Mixlab.Video.LoadVideoAndSegment_',
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeData?.name == 'LoadVideoAndSegment_') {
+      nodeData.input.required.upload = ['VIDEOUPLOAD_']
+    }
+  },
+  async loadedGraphNode (node, app) {
+    if (node.type === 'LoadVideoAndSegment_') {
+      const imageWidget = node.widgets.find(w => w.name === 'video')
+      const uploadPreview = node.widgets.find(w => w.name === 'upload-preview')
+      if (imageWidget.value) {
+        // console.log(imageWidget.value)
+        uploadPreview.div.querySelector('video').src = `/view?filename=${
+          imageWidget.value
+        }&type=input&subfolder=${''}&rand=${Math.random()}`
+      }
+    }
+  }
+})
+
+
+function offsetDOMWidget(
+  widget,
+  ctx,
+  node,
+  widgetWidth,
+  widgetY,
+  height
+) {
+  const margin = 10
+  const elRect = ctx.canvas.getBoundingClientRect()
+  const transform = new DOMMatrix()
+    .scaleSelf(
+      elRect.width / ctx.canvas.width,
+      elRect.height / ctx.canvas.height
+    )
+    .multiplySelf(ctx.getTransform())
+    .translateSelf(0, widgetY + margin)
+
+  const scale = new DOMMatrix().scaleSelf(transform.a, transform.d)
+  Object.assign(widget.inputEl.style, {
+    transformOrigin: '0 0',
+    transform: scale,
+    left: `${transform.e}px`,
+    top: `${transform.d + transform.f}px`,
+    width: `${widgetWidth}px`,
+    height: `${(height || widget.parent?.inputHeight || 32) - margin}px`,
+    position: 'absolute',
+    background: !node.color ? '' : node.color,
+    color: !node.color ? '' : 'white',
+    zIndex: 5, //app.graph._nodes.indexOf(node),
+  })
+}
+
+export const hasWidgets = (node) => {
+  if (!node.widgets || !node.widgets?.[Symbol.iterator]) {
+    return false
+  }
+  return true
+}
+
+export const cleanupNode = (node) => {
+  if (!hasWidgets(node)) {
+    return
+  }
+
+  for (const w of node.widgets) {
+    if (w.canvas) {
+      w.canvas.remove()
+    }
+    if (w.inputEl) {
+      w.inputEl.remove()
+    }
+    // calls the widget remove callback
+    w.onRemoved?.()
+  }
+}
+
+const CreatePreviewElement = (name, val, format) => {
+  const [type] = format.split('/')  
+  const w = {
+      name,
+      type,
+      value: val,
+      draw: function (ctx, node, widgetWidth, widgetY, height) {
+        const [cw, ch] = this.computeSize(widgetWidth)
+        offsetDOMWidget(this, ctx, node, widgetWidth, widgetY, ch)
+      },
+      computeSize: function (_) {
+        const ratio = this.inputRatio || 1
+        const width = Math.max(220, this.parent.size[0])
+        return [width, (width / ratio + 10)]
+      },
+      onRemoved: function () {
+        if (this.inputEl) {
+          this.inputEl.remove()
+        }
+      },
+    }
+
+    w.inputEl = document.createElement(type === 'video' ? 'video' : 'img')
+    w.inputEl.src = w.value
+    if (type === 'video') {
+      w.inputEl.setAttribute('type', 'video/webm');
+      w.inputEl.autoplay = true
+      w.inputEl.loop = true
+      w.inputEl.controls = false;
+    }
+    w.inputEl.onload = function () {
+      w.inputRatio = w.inputEl.naturalWidth / w.inputEl.naturalHeight
+    }
+    document.body.appendChild(w.inputEl)
+    return w
+  }
+
+
+app.registerExtension({
+  name: 'Mixlab.Video.ImageListReplace',
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeData?.name == 'ImageListReplace_') {
+      const orig_nodeCreated = nodeType.prototype.onNodeCreated
+      nodeType.prototype.onNodeCreated = function () {
+        orig_nodeCreated?.apply(this, arguments)
+        const widget = {
+          type: 'div',
+          name: 'preview',
+          draw (ctx, node, widget_width, y, widget_height) {
+            Object.assign(
+              this.div.style,
+              get_position_style(ctx, widget_width, 188, node.size[1]),
+              {
+                outline: '1px solid',
+                display: 'flex',
+                flexWrap: 'wrap',
+                flexDirection: 'row',
+                justifyContent: 'flex-start'
+              }
+            )
+          }
+        }
+
+        widget.div = $el('div', {})
+        widget.div.style.width = `120px`
+        widget.div.className = 'hidden'
+        document.body.appendChild(widget.div)
+        this.addCustomWidget(widget)
+        // console.log('#ImageListReplace', widget)
+
+        const onRemoved = this.onRemoved
+        this.onRemoved = () => {
+          widget.div.remove()
+          return onRemoved?.()
+        }
+      }
+
+      const onExecuted = nodeType.prototype.onExecuted
+      nodeType.prototype.onExecuted = function (message) {
+        onExecuted?.apply(this, arguments)
+
+        // let _image_replace = message._image_replace[0]
+        // _image_replace = `/view?filename=${_image_replace.filename}&type=${
+        //   _image_replace.type
+        // }&subfolder=${_image_replace.subfolder}&rand=${Math.random()}`
+
+        let preview = this.widgets.filter(w => w.name == 'preview')[0]
+
+        if (message._images.length > 0) {
+          preview.div.className = ''
+          // console.log('#ImageListReplace', preview.div)
+        }
+
+        preview.div.innerHTML = ''
+        for (const img_ of message._images) {
+          let img = new Image()
+          img.style = `width: 100px;
+          margin: 4px;`
+          img.src = `/view?filename=${img_.filename}&type=${
+            img_.type
+          }&subfolder=${img_.subfolder}&rand=${Math.random()}`
+          preview.div.appendChild(img)
+        }
+
+        let start_index = this.widgets.filter(w => w.name == 'start_index')[0]
+        let end_index = this.widgets.filter(w => w.name == 'end_index')[0]
+        let invert = this.widgets.filter(w => w.name == 'invert')[0]
+        let _sc = start_index.callback.bind(start_index)
+        let _ec = end_index.callback.bind(end_index)
+
+        const selectImages = () => {
+          // console.log(v)
+          let s = start_index.value,
+            e = end_index.value
+          let imgs = preview.div.querySelectorAll('img')
+          for (let index = 0; index < imgs.length; index++) {
+            if (invert.value) {
+              imgs[index].style.outline =
+                index >= s && index <= e ? 'none' : '4px solid #cbd3fe'
+            } else {
+              imgs[index].style.outline =
+                index >= s && index <= e ? '4px solid #cbd3fe' : 'none'
+            }
+          }
+        }
+
+        selectImages()
+
+        start_index.callback = v => {
+          let s = v,
+            e = end_index.value
+          let imgs = preview.div.querySelectorAll('img')
+          for (let index = 0; index < imgs.length; index++) {
+            if (invert.value) {
+              imgs[index].style.outline =
+                index >= s && index <= e ? 'none' : '4px solid #cbd3fe'
+            } else {
+              imgs[index].style.outline =
+                index >= s && index <= e ? '4px solid #cbd3fe' : 'none'
+            }
+          }
+
+          _sc(v)
+        }
+
+        end_index.callback = v => {
+          let s = start_index.value,
+            e = v
+          let imgs = preview.div.querySelectorAll('img')
+          for (let index = 0; index < imgs.length; index++) {
+            if (invert.value) {
+              imgs[index].style.outline =
+                index >= s && index <= e ? 'none' : '4px solid #cbd3fe'
+            } else {
+              imgs[index].style.outline =
+                index >= s && index <= e ? '4px solid #cbd3fe' : 'none'
+            }
+          }
+
+          _ec(v)
+        }
+
+        invert.callback = v => {
+          selectImages()
+        }
+
+        try {
+        } catch (error) {}
+      }
+    }
+
+    if (nodeData?.name == 'VideoCombine_Adv') {
+      const onExecuted = nodeType.prototype.onExecuted
+      nodeType.prototype.onExecuted = function (message) {
+        const prefix = 'vhs_gif_preview_'
+        const r = onExecuted ? onExecuted.apply(this, message) : undefined
+
+        if (this.widgets) {
+          const pos = this.widgets.findIndex(w => w.name === `${prefix}_0`)
+          if (pos !== -1) {
+            for (let i = pos; i < this.widgets.length; i++) {
+              this.widgets[i].onRemoved?.()
+            }
+            this.widgets.length = pos
+          }
+          if (message?.gifs) {
+            message.gifs.forEach((params, i) => {
+              const previewUrl = api.apiURL(
+                '/view?' + new URLSearchParams(params).toString()
+              )
+              const w = this.addCustomWidget(
+                CreatePreviewElement(
+                  `${prefix}_${i}`,
+                  previewUrl,
+                  params.format || 'image/gif'
+                )
+              )
+              w.parent = this
+            })
+          }
+          const onRemoved = this.onRemoved
+          this.onRemoved = () => {
+            cleanupNode(this)
+            return onRemoved?.()
+          }
+        }
+        this.setSize([
+          this.size[0],
+          this.computeSize([this.size[0], this.size[1]])[1]
+        ])
+        return r
+      }
+    }
+  }
+})

web/lib/login.css

@@ -1,277 +0,0 @@
-* {
-    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
-}
-
-#app-login {
-    width: 480px;
-    height: 90vh;
-    padding: 6vh;
-    background: white;
-    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
-    z-index: 999;
-    position: fixed;
-    top: 5vh;
-    left: calc(50vw - 240px);
-}
-
-.login-app-view {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 999;
-}
-
-.login-background {
-    background-color: #202020e6;
-    position: fixed;
-    width: 100%;
-    height: 100vh;
-    left: 0;
-    top: 0;
-    z-index: 998;
-}
-
-.app-header {
-    padding: 6vh;
-}
-
-.app-header,
-.app-header>* {
-    font-size: 1.2em;
-    margin: 0;
-    font-weight: 300;
-}
-
-.app-header>h1 {
-    font-size: 4.8vh;
-    font-weight: 400;
-    margin-bottom: 4.8vh;
-}
-
-.app-header>h2 {
-    font-size: 3vh;
-}
-
-.app-subheading {
-    color: rgba(0, 0, 0, 0.45);
-}
-
-.app-register {
-    position: absolute;
-    bottom: 0;
-    height: 10vh;
-    line-height: 10vh;
-    padding: 0 6vh;
-    color: rgba(0, 0, 0, 0.45);
-}
-
-.app-register>a {
-    font-weight: 400;
-}
-
-
-#app-login input {
-    font-size: 2.5vh;
-    width: calc(100% - 13vh);
-    height: 7.5vh;
-    margin-bottom: 2vh;
-    background: transparent;
-    position: absolute;
-    top: 0;
-    left: 6.5vh;
-    z-index: 2;
-    border: none;
-    box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1);
-}
-
-#app-login input:focus {
-    outline: none;
-    box-shadow: inset 0 -0.5vh transparent;
-}
-
-#app-login input[type=email] {
-    top: 58%;
-}
-
-#app-login input[type=password] {
-    top: calc(58% + 7.5vh);
-}
-
-#app-login input[type=email]:valid~* .st1 {
-    transition-timing-function: ease-in-out;
-    stroke-dasharray: 50, 153;
-    stroke-dashoffset: 25;
-}
-
-#app-login input[type=password]:focus~* .st0,
-#app-login input[type=password]:valid~* .st0,
-#login_run:focus~* .st0 {
-    stroke-dasharray: 210, 900;
-    stroke-dashoffset: -305;
-}
-
-#app-login input[type=email]:focus~* .st0 {
-    stroke-dasharray: 210, 900;
-    stroke-dashoffset: 0;
-}
-
-#app-login input:not(:valid)~#login_run {
-    /* pointer-events: none; */
-    opacity: 0.6;
-}
-
-#login_run {
-    text-decoration: none;
-    color: #0f9ede;
-    font-size: 1.5em;
-    padding: 0 6vh;
-    position: absolute;
-    bottom: 10vh;
-    font-weight: 400;
-    z-index: 998;
-    cursor: pointer;
-}
-
-#login_run:focus {
-    outline: none;
-}
-
-.login-app-view:nth-child(2) {
-    display: flex;
-    flex-direction: column;
-    pointer-events: none;
-}
-
-.login-app-view:nth-child(2)>.app-header {
-    font-size: 1rem;
-    flex-basis: 25%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: 4vh;
-    padding-bottom: 1rem;
-}
-
-.login-app-view:nth-child(2)>.app-header>h2 {
-    transform: translateY(1rem);
-}
-
-.login-app-view:nth-child(2)>.app-header>h2>em {
-    color: #0f9ede;
-    font-style: normal;
-}
-
-.login-app-view:nth-child(2)>.app-header>h2,
-.login-app-view:nth-child(2) .app-item>*:not(.app-graphic) {
-    transition-duration: 0.9s;
-    opacity: 0;
-}
-
-
-.st0,
-.st1,
-.svg-loader-segment {
-    fill: none;
-    stroke: #0f9ede;
-    stroke-width: 0.5vh;
-    stroke-alignment: inside;
-    opacity: 1;
-    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
-}
-
-.svg-loader {
-    opacity: 0;
-}
-
-.st0 {
-    stroke-dasharray: 0, 900;
-    stroke-dashoffset: 0;
-}
-
-.st1 {
-    transition-delay: 0.3s;
-    stroke-dasharray: 50, 153;
-    stroke-dashoffset: -153;
-}
-
-.svg-loader-segment {
-    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1), stroke 0.85s cubic-bezier(0.77, 0, 0.175, 1);
-}
-
-#svg-lines {
-    position: absolute;
-    top: 45%;
-    left: 0;
-    width: 100%;
-    z-index: 0;
-    overflow: visible;
-    transform-origin: center 4vh;
-}
-
-.svg-data {
-    fill: none;
-    stroke-width: 0.5vh;
-}
-
-.svg-data.-temp {
-    stroke: #f4814b;
-    stroke-dasharray: 20, 118;
-}
-
-.svg-data.-cal {
-    stroke: #08b5cf;
-    stroke-dasharray: 20, 113;
-}
-
-.svg-data.-steps-bg {
-    stroke: #e0e1e0;
-    stroke-dasharray: 40, 100;
-    stroke-dashoffset: -60;
-}
-
-.svg-data.-steps {
-    stroke: #0f9ede;
-    stroke-dasharray: 20, 73;
-    stroke-dashoffset: -53;
-}
-
-.svg-data.-heart {
-    stroke: #9965aa;
-    stroke-dasharray: 50, 200;
-    stroke-dashoffset: -150;
-}
-
-.svg-activity-fill {
-    fill: #c4e4f8;
-}
-
-.svg-activity-line {
-    fill: none;
-    stroke: #65bcea;
-    stroke-miterlimit: 10;
-    stroke-width: 0.25vh;
-}
-
-.svg-activity-avg,
-.svg-activity-indicator {
-    fill: none;
-    stroke: #d0dff0;
-    stroke-width: 0.25vh;
-    mix-blend-mode: multiply;
-}
-
-.svg-activity-fill,
-.svg-activity-line {
-    transform: translateY(10vh);
-    opacity: 0;
-}
-
-
-*,
-*:before,
-*:after {
-    box-sizing: border-box;
-    position: relative;
-}

web/lib/login.js

@@ -1,67 +0,0 @@
-;(() => {
-  let div = document.createElement('div')
-
-  div.innerHTML = ` 
-    <div id="app-login">
-        <div class="login-app-view">
-            <header class="app-header">
-                <h1>Hi</h1>
-                Welcome back,<br />
-                <span class="app-subheading">
-                    sign in to continue<br />
-    
-                </span>
-            </header>
-            <input class="email" type="email" required pattern=".*\.\w{2,}" placeholder="Email Address" />
-            <input class="password" type="password" required placeholder="Password" />
-            <a class="app-button" id="login_run">登录</a>
-            <!-- <div class="app-register">
-                Don't have an account? <a>Sign Up</a>
-            </div> -->
-            <svg id="svg-lines" version="1.1" xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 284.2 152.7"
-                xml:space="preserve">
-                <path class="st0"
-                    d="M37.7,107.3h222.6c12,0,21.8,9.7,21.8,21.7s-9.7,21.8-21.8,21.8c0,0-203.6,0-222.6,0S2.2,138.6,2.2,103.3   c0-52,113.5-101.5,141-101.5c13.5,0,21.8,9.7,21.8,21.8s-9.7,21.7-21.8,21.7s-21.8-9.7-21.8-21.7s9.7-21.8,21.8-21.8" />
-                <path class="st1"
-                    d="M260.2,76.3L250,87.8l-9-9c-6.2-6.2,2-24.7,17.2-24.7c15.2,0,23.9,17.7,23.9,29.7s-11.7,23.5-23.9,23.5h-10.2">
-                </path>
-                <g class="svg-loader" xmlns="http://www.w3.org/2000/svg">
-                    <path class="svg-loader-segment -cal" d="M164.7,23.5c0-12-9.7-21.8-21.8-21.8" />
-                    <path class="svg-loader-segment -heart" d="M143,45.2c12,0,21.8-9.7,21.8-21.7" />
-                    <path class="svg-loader-segment -steps" d="M121.2,23.5c0,12,9.7,21.7,21.8,21.7" />
-                    <path class="svg-loader-segment -temp" d="M143,1.7c-12,0-21.8,9.7-21.8,21.8" />
-                </g>
-            </svg>
-        </div>
-    </div>
-    <div class="login-background"></div>
-     `
-
-  document.body.appendChild(div)
-  let bg = div.querySelector('.login-background')
-  bg.addEventListener('click', e => {
-    div.style.display = 'none'
-  })
-  let login_btn = document.body.querySelector('#login_btn')
-  // login_btn.href="";
-  if (login_btn) {
-    login_btn.innerHTML =
-      '<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg"><path d="M12 17C14.2091 17 16 15.2091 16 13H8C8 15.2091 9.79086 17 12 17Z" fill="currentColor"></path><path d="M10 10C10 10.5523 9.55228 11 9 11C8.44772 11 8 10.5523 8 10C8 9.44772 8.44772 9 9 9C9.55228 9 10 9.44772 10 10Z" fill="currentColor"></path><path d="M15 11C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9C14.4477 9 14 9.44772 14 10C14 10.5523 14.4477 11 15 11Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor"></path></svg>LOGIN'
-    login_btn.addEventListener('click', e => {
-      e.preventDefault()
-      div.style.display = 'block'
-    })
-  }
-
-  let login_run = div.querySelector('#login_run')
-  if (login_run) {
-    login_run.addEventListener('click', e => {
-      e.preventDefault()
-      let ps = div.querySelector('.password')
-      let email = div.querySelector('.email')
-      div.style.display = 'none'
-      console.log(ps.value, email.value)
-    })
-  }
-})()