update

SaveImageAndMetadata: Controls whether metadata is saved with the image
Image Prompt: Custom image gallery that can be used as input for the app mode
MaskList to Mask: Combines a list of masks into a single mask
MaskListReplace: Replaces certain segments in a mask list
GLIGENTextBoxApply_Advanced: Improved version of gligen, used in conjunction with detect by label for greater convenience
Grid Input: Visual selection area and label settings, used in conjunction with gligen.

.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,6 +3,8 @@
 > [Mixlab nodes discord](https://discord.gg/cXs9vZSqeK)
 
 #### 
+[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)
@@ -130,6 +132,8 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
 
 ![](./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.

__init__.py

@@ -591,17 +591,20 @@ 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 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 ListSplit,CreateLoraNames,CreateSampler_names,CreateCkptNames,CreateSeedNode,TESTNODE_,TESTNODE_TOKEN,AppInfo,IntNumber,FloatSlider,TextInput,ColorInput,FontInput,TextToNumber,DynamicDelayProcessor,LimitNumber,SwitchByIndex,MultiplicationNode
+from .nodes.Mask import MaskListReplace,MaskListMerge,OutlineMask,FeatheredMask
+
+from .nodes.Style import ApplyVisualStylePrompting,StyleAlignedReferenceSampler,StyleAlignedBatchAlign,StyleAlignedSampleReferenceLatents
+
+from .nodes.Video import VideoCombine_Adv,LoadVideoAndSegment,ImageListReplace,VAEEncodeForInpaint_Frames
 
-from .nodes.Style import ApplyVisualStylePrompting
 
 # 要导出的所有节点及其名称的字典
 # 注意：名称应全局唯一
@@ -613,6 +616,7 @@ NODE_CLASS_MAPPINGS = {
     # "LoraPrompt":LoraPrompt,
     "EmbeddingPrompt":EmbeddingPrompt,
     "PromptSlide":PromptSlide,
+    "GLIGENTextBoxApply_Advanced":GLIGENTextBoxApply_Advanced,
     "PromptSimplification":PromptSimplification,
     "PromptImage":PromptImage,
     "MirroredImage":MirroredImage,
@@ -629,9 +633,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,
@@ -639,8 +646,10 @@ NODE_CLASS_MAPPINGS = {
     "FaceToMask":FaceToMask,
     "AreaToMask":AreaToMask,
     "ImageCropByAlpha":ImageCropByAlpha,
+    "ImagesPrompt_":ImagesPrompt,
     # "VAELoaderConsistencyDecoder":VAELoader,
     "SaveImageToLocal":SaveImageToLocal,
+    "SaveImageAndMetadata_":SaveImageAndMetadata,
     # "VAEDecodeConsistencyDecoder":VAEDecode,
     "ScreenShare":ScreenShareNode,
     "FloatingVideo":FloatingVideo,
@@ -662,41 +671,74 @@ NODE_CLASS_MAPPINGS = {
     "SwitchByIndex":SwitchByIndex,
     "LimitNumber":LimitNumber, 
     "OutlineMask":OutlineMask,
+    "MaskListMerge_":MaskListMerge,
     "JoinWithDelimiter":JoinWithDelimiter,
     "Seed_":CreateSeedNode,
     "CkptNames_":CreateCkptNames,
     "SamplerNames_":CreateSampler_names,
     "LoraNames_":CreateLoraNames,
-    "ApplyVisualStylePrompting_":ApplyVisualStylePrompting
-    # "LaMaInpainting":LaMaInpainting
+    "ApplyVisualStylePrompting_":ApplyVisualStylePrompting,
+    "StyleAlignedReferenceSampler_": StyleAlignedReferenceSampler,
+    "StyleAlignedSampleReferenceLatents_": StyleAlignedSampleReferenceLatents,
+    "StyleAlignedBatchAlign_": StyleAlignedBatchAlign,
+    "LoadVideoAndSegment_":LoadVideoAndSegment,
+    "VideoCombine_Adv":VideoCombine_Adv,
+    "ListSplit_":ListSplit,
+    "MaskListReplace_":MaskListReplace,
+    "ImageListReplace_":ImageListReplace,
+    "VAEEncodeForInpaint_Frames":VAEEncodeForInpaint_Frames
     # "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",
     "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",
     "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",
+    "RembgNode_Mix":"Remove Background",
     "LoraNames_":"LoraName",
-    "ApplyVisualStylePrompting_":"Apply VisualStyle Prompting"
+    "ApplyVisualStylePrompting_":"Apply VisualStyle Prompting",
+    "StyleAlignedReferenceSampler_": "StyleAligned Reference Sampler",
+    "StyleAlignedSampleReferenceLatents_": "StyleAligned Sample Reference Latents",
+    "StyleAlignedBatchAlign_": "StyleAligned Batch Align",
+    "LoadVideoAndSegment_":"Load Video And Segment",
+    "VideoCombine_Adv":"Video Combine",
+    "MaskListMerge_":"MaskList to Mask",
+    "ListSplit_":"Split List",
+    "MaskListReplace_":"MaskList Replace",
+    "ImageListReplace_":"ImageList Replace",
+    "SwitchByIndex":"List Switch By Index",
+    "GLIGENTextBoxApply_Advanced":"GLIGEN TextBox Apply ♾️Mixlab",
+    "GridDisplayAndSave":"Grid Display And Save",
+    "GridInput":"Grid Input",
+    "GridOutput":"Grid Output",
+    "GetImageSize_":"Get Image Size",
+    "VAEEncodeForInpaint_Frames":"VAE Encode For Inpaint Frames"
 }
 
 # 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,9 @@ import urllib.error
 import re,json,os,string,random
 import folder_paths
 import hashlib
+import codecs
 from zhipuai import ZhipuAI
+
 def get_unique_hash(string):
     hash_object = hashlib.sha1(string.encode())
     unique_hash = hash_object.hexdigest()
@@ -105,7 +107,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}),
@@ -119,7 +129,7 @@ class ChatGPTNode:
     RETURN_TYPES = ("STRING","STRING","STRING",)
     RETURN_NAMES = ("text","messages","session_history",)
     FUNCTION = "generate_contextual_text"
-    CATEGORY = "♾️Mixlab/Prompt/GPT"
+    CATEGORY = "♾️Mixlab/GPT"
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,False,False,)
 
@@ -209,7 +219,7 @@ class ShowTextForGPT:
     OUTPUT_NODE = True
     OUTPUT_IS_LIST = (True,)
 
-    CATEGORY = "♾️Mixlab/Prompt/GPT"
+    CATEGORY = "♾️Mixlab/Text"
 
     def run(self, text,output_dir=[""]):
         
@@ -293,7 +303,7 @@ class CharacterInText:
     # OUTPUT_NODE = True
     OUTPUT_IS_LIST = (False,)
 
-    CATEGORY = "♾️Mixlab/Prompt/GPT"
+    CATEGORY = "♾️Mixlab/Text"
 
     def run(self, text,character,start_index):
         # print(text,character,start_index)
@@ -306,8 +316,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 +348,16 @@ class TextSplitByDelimiter:
     # OUTPUT_NODE = True
     OUTPUT_IS_LIST = (True,)
 
-    CATEGORY = "♾️Mixlab/Prompt/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

@@ -14,10 +14,70 @@ import string
 import math,glob
 from .Watcher import FolderWatcher
 
+
+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"""
 
@@ -628,6 +688,17 @@ def merge_images(bg_image, layer_image, mask, x, y, width, height, scale_option)
     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 +728,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 +1055,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:
@@ -1488,6 +1590,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):
@@ -1804,8 +1937,182 @@ 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
@@ -1830,6 +2137,9 @@ class GridOutput:
         x,y,w,h=grid
         return (x,y,w,h,)
 
+
+
+
 class ShowLayer:
     @classmethod
     def INPUT_TYPES(s):
@@ -2225,11 +2535,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)
 
@@ -2329,7 +2643,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
@@ -2347,7 +2711,7 @@ class ImageColorTransfer:
     FUNCTION = "run"
 
     # 右键菜单目录
-    CATEGORY = "♾️Mixlab/Image"
+    CATEGORY = "♾️Mixlab/Color"
 
     # 输入是否为列表
     INPUT_IS_LIST = True
@@ -2395,7 +2759,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

@@ -22,6 +22,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],
@@ -87,6 +100,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,111 @@ 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):
+        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 +665,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

@@ -1,6 +1,18 @@
 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:
@@ -74,3 +86,418 @@ class ApplyVisualStylePrompting:
 
         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

@@ -9,6 +9,14 @@ import torch
 import importlib.util
 
 
+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):
         return [], {}
@@ -156,7 +164,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 +193,7 @@ class FontInput:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -218,7 +226,7 @@ class TextToNumber:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Text"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -273,10 +281,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 +337,7 @@ class IntNumber:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -389,7 +397,7 @@ class TextInput:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -577,14 +585,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 +613,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 +680,7 @@ class LimitNumber:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Input"
 
     INPUT_IS_LIST = False
     OUTPUT_IS_LIST = (False,)
@@ -706,14 +747,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 +799,7 @@ class TESTNODE_TOKEN:
 
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/__TEST"
+    CATEGORY = "♾️Mixlab/Test"
 
     OUTPUT_NODE = True
     INPUT_IS_LIST = False
@@ -788,7 +836,7 @@ class CreateSeedNode:
     OUTPUT_NODE = True
     FUNCTION = "run"
 
-    CATEGORY = "♾️Mixlab/Utils"
+    CATEGORY = "♾️Mixlab/Experiment"
 
     def run(self, seed):
         return (seed,)
@@ -815,7 +863,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 +892,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 +923,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,614 @@
+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
+from pathlib import Path
+
+import folder_paths
+from comfy.k_diffusion.utils import FolderOfImages
+from comfy.utils import common_upscale
+
+
+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 = ("IMAGE","IMAGE", "INT",)
+    RETURN_NAMES = ("segment_batch","frame_count","segment_count",)
+    FUNCTION = "load_video"
+    OUTPUT_NODE = True
+    OUTPUT_IS_LIST = (True,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 ):
+        frame_load_cap=0
+        skip_first_frames=0
+
+        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)
+
+        imgs=[torch.from_numpy(np.stack(im)) for im in imgs]
+
+        # images = torch.from_numpy(np.stack(images))
+
+        return (imgs, len(images),len(imgs),)
+
+    @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, )

requirements.txt

@@ -8,4 +8,5 @@ simple-lama-inpainting
 clip-interrogator==0.6.0
 transformers>=4.36.0
 zhipuai
-lark-parser
+lark-parser
+imageio-ffmpeg

web/index.html

@@ -202,7 +202,7 @@
             width: fit-content;
             max-width: 100%;
             margin-left: 12px;
-            min-height: 200px;
+            /*min-height: 200px;*/
         }
 
         .input_card {
@@ -413,7 +413,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;
@@ -479,6 +479,26 @@
         };
 
 
+        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 base64ToBlob(base64) {
             // 去除base64编码中的前缀
             const base64WithoutPrefix = base64.replace(/^data:image\/\w+;base64,/, '');
@@ -677,18 +697,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_") {
+                    data[id].inputs.seed = Math.round(Math.random() * max_seed)
                 }
                 console.log('new Seed', data[id])
             }
@@ -747,6 +772,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 +840,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 +889,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();
@@ -902,7 +930,7 @@
                     output_card.appendChild(div);
                 };
 
-                if (["SaveImage", "PreviewImage", "PromptImage"].includes(node.class_type)) {
+                if (["SaveImage", "PreviewImage", "PromptImage", "Image Save", "SaveImageAndMetadata_"].includes(node.class_type)) {
 
                     let a = document.createElement('a');
                     a.id = `output_${node.id}`
@@ -1186,10 +1214,10 @@
             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 (data.class_type === "LoadImage" || data.class_type === "VHS_LoadVideo" || data.class_type === 'ImagesPrompt_') {
 
                     let isVideoUpload = data.class_type === "VHS_LoadVideo";
 
@@ -1224,7 +1252,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 && data.class_type !== 'ImagesPrompt_') actionDiv.appendChild(btnForImageEdit);
 
 
                     uploadContainer.appendChild(actionDiv)
@@ -1246,7 +1274,7 @@
 
                         // imageElement.innerHTML=`<img src="${base64Df}"/>`
 
-                    } else {
+                    } else if (data.class_type === 'LoadImage') {
                         // 图片
                         let [subfolder, name] = data.inputs.image.split('/');
                         if (!name) {
@@ -1259,12 +1287,22 @@
                         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) => {
+                                window._appData.data[data.id].inputs.image_base64 = base64;
+                            })
+                        uploadContainer.appendChild(imgDiv);
+                        window._appData.data[data.id].inputs.image_base64 = mainImage.querySelector('.images_prompt_main').src;
                     }
 
+
                     imageElement.style.maxWidth = '200px';
 
-
-
                     if (!isVideoUpload) btnFromClipboard.addEventListener('click', (event) => handleClipboardImage(imageElement, data));
 
                     if (!isVideoUpload) btnForImageEdit.addEventListener('click', e => editImage(imageElement, data))
@@ -1291,18 +1329,29 @@
                             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 === 'ImagesPrompt_') {
+                                // 
+                                let base64 = await parseImageToBase64(url);
+                                uploadContainer.querySelector('.images_prompt_main').src = base64
+                                window._appData.data[data.id].inputs.image_base64 = base64;
                             } else {
-                                window._appData.data[data.id].inputs.image = name;
+                                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);
@@ -1315,7 +1364,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);
@@ -1729,6 +1778,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);
+                    }
+                })
+            }
+
+            return [div, mainImg];
+        }
+
+
         // 创建下拉选择
         function createSelect(options, defaultValue) {
             var selectElement = document.createElement("select");
@@ -1791,7 +1907,7 @@
 
         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;
+            const { input: inputData, output: outputData, data: workflow, seed, seedTitle, link, name } = data;
 
             let mainDiv = document.createElement('div');
 
@@ -1889,7 +2005,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 +2026,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);

web/javascript/app_mixlab.js

@@ -5,6 +5,25 @@ import { api } from '../../../scripts/api.js'
 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
 
@@ -82,6 +101,7 @@ async function extractInputAndOutputData (
   let input = []
   let output = []
   const seed = {}
+  const seedTitle = {}
 
   for (const id in data) {
     if (data.hasOwnProperty(id)) {
@@ -121,6 +141,28 @@ async function extractInputAndOutputData (
           }
         }
 
+        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') {
         }
 
@@ -133,9 +175,9 @@ async function extractInputAndOutputData (
           }
           // loadImage的默认图，转为base64
           let imgurl = app.graph.getNodeById(id).imgs[0].src
-          
+
           options.defaultImage = await drawImageToCanvas(imgurl, 512)
-          console.log('#loadImage的默认图',options)
+          console.log('#loadImage的默认图', options)
         }
 
         input[inputIds.indexOf(id)] = {
@@ -152,12 +194,17 @@ async function extractInputAndOutputData (
         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'
+      ) {
         // 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) {}
       }
     }
@@ -167,7 +214,7 @@ async function extractInputAndOutputData (
   input = input.filter(i => i)
   output = output.filter(i => i)
 
-  return { input, output, seed }
+  return { input, output, seed, seedTitle }
 }
 
 function getUrl () {
@@ -240,7 +287,7 @@ async function save (json, download = false, showInfo = true) {
   try {
     let data = await app.graphToPrompt()
 
-    let { input, output, seed } = await extractInputAndOutputData(
+    let { input, output, seed, seedTitle } = await extractInputAndOutputData(
       data,
       inputIds,
       outputIds
@@ -260,6 +307,7 @@ async function save (json, download = false, showInfo = true) {
       input,
       output,
       seed, //控制是fixed 还是random
+      seedTitle,
       share_prefix,
       link,
       category,
@@ -301,12 +349,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 ImagesPrompt_ VHS_LoadVideo CLIPTextEncode PromptSlide TextInput_ Color FloatSlider IntNumber CheckpointLoaderSimple LoraLoader`.split(
         ' '
       ),
-    outputs = `PreviewImage SaveImage ShowTextForGPT VHS_VideoCombine`.split(
-      ' '
-    )
+    outputs =
+      `PreviewImage,SaveImage,ShowTextForGPT,VHS_VideoCombine,Image Save,SaveImageAndMetadata_`.split(
+        ','
+      )
 
   let inputsId = [],
     outputsId = []

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.18.0'
+const version = 'v0.19.0'
 
 fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
   .then(response => response.json())

web/javascript/image_mixlab.js

@@ -28,6 +28,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 +111,7 @@ function createImage (url) {
   })
 }
 
-const parseImage = url => {
+const parseImageToBase64 = url => {
   return new Promise((res, rej) => {
     fetch(url)
       .then(response => response.blob())
@@ -406,9 +409,7 @@ app.registerExtension({
 
         this.serialize_widgets = true //需要保存参数
       }
-    };
-
- 
+    }
   },
   async loadedGraphNode (node, app) {
     // Fires every time a node is constructed
@@ -442,3 +443,184 @@ 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) {}
+    }
+  }
+})

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/ui_mixlab.js

@@ -943,6 +943,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') {

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)
-    })
-  }
-})()