test

V0.6   simple app

.gitignore

@@ -1,4 +1,5 @@
 __pycache__/
 https/
 nodes/config.json
-workflow/my_workflow.json
+workflow/my_workflow.json
+workflow/my_workflow_app.json

README.md

@@ -1,19 +1,21 @@
 ## 
-v0.5.0 🚀🚗🚚🏃‍
-- Added video composition support to the MergeLayers.
-- Enhanced visual selection support for the NewLayer node.
-- Introduced the NoiseImage node and ResizeImage node.
-- Improved compatibility for TextImage with line breaks.
-- Optimized the 3DImage node to export textures for modification.
-- [Added DynamicDelayByText, enabling delayed execution based on input text length.](./workflow/audio-chatgpt-workflow.json)
+v0.6.0 🚀🚗🚚🏃‍ Workflow-to-APP
+- 新增AppInfo节点，可以通过简单的配置，把workflow转变为一个Web APP。
+- Add the AppInfo node, which allows you to transform the workflow into a web app by simple configuration.
 
+![](./assets/appinfo-readme.png)
+Example:
+- workflow
+![APP info](./workflow/appinfo-workflow.svg)
 
-- 为MergeLayers添加了视频合成功能。
-- NewLayer节点增加了视觉选择支持。
-- 添加了NoiseImage节点和ResizeImage节点。
-- 支持带有换行的文本图像。
-- 对3D节点进行了优化，支持导出纹理以进行修改。
-- [添加了DynamicDelayByText功能，可以根据输入文本的长度进行延迟执行。](./workflow/audio-chatgpt-workflow.json)
+APP-JSON:
+- [text-to-image](./app/text-to-image_1_Wed%20Dec%2027%202023.json)
+- [image-to-image](./app/image-to-image_1_Wed%20Dec%2027%202023.json)
+- text-to-text
+
+> 暂时支持6种节点作为界面上的输入节点：Load Image、CLIPTextEncode、TextInput_、FloatSlider、CheckpointLoaderSimple、LoraLoader
+
+> 输出节点：PreviewImage 、SaveImage、ShowTextForGPT
 
 
 ### 3D
@@ -55,6 +57,9 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
 
 [workflow-4](./workflow/4-loadfromlocal-watcher-workflow.json)
 
+### LoadImagesFromURL
+> Conveniently load images from a fixed address on the internet to ensure that default images in the workflow can be executed.
+
 
 ### Layers
 > A new layer class node has been added, allowing you to separate the image into layers. After merging the images, you can input the controlnet for further processing.
@@ -66,7 +71,9 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
 ## Utils
 > The Color node provides a color picker for easy color selection, the Font node offers built-in font selection for use with TextImage to generate text images, and the DynamicDelayByText node allows delayed execution based on the length of the input text.
 
+- [添加了DynamicDelayByText功能，可以根据输入文本的长度进行延迟执行。](./workflow/audio-chatgpt-workflow.json)
 
+- [Added DynamicDelayByText, enabling delayed execution based on input text length.](./workflow/audio-chatgpt-workflow.json)
 
 ## Other Nodes
 
@@ -104,7 +111,7 @@ Add edges to an image.
 ### Improvement 
 
 - Add "help" option to the context menu for each node.
-- Add "find the node" option to the global context menu.
+- Add "Nodes Map" option to the global context menu.
 
 An improvement has been made to directly redirect to GitHub to search for missing nodes when loading the graph.
 

__init__.py

@@ -162,12 +162,29 @@ def get_workflows():
     workflows=read_workflow_json_files(workflow_path)
     return workflows
 
+def get_my_workflow_for_app():
+    # print("#####path::", current_path)
+    workflow_path=os.path.join(current_path, "workflow/my_workflow_app.json")
+    print('workflow_path: ',workflow_path)
+    json_data={}
+    try:
+        with open(workflow_path) as json_file:
+            json_data = json.load(json_file)
+    except:
+        print('-')
+    return json_data
+
 def save_workflow_json(data):
     workflow_path=os.path.join(current_path, "workflow/my_workflow.json")
     with open(workflow_path, 'w') as file:
         json.dump(data, file)
     return workflow_path
 
+def save_workflow_for_app(data):
+    workflow_path=os.path.join(current_path, "workflow/my_workflow_app.json")
+    with open(workflow_path, 'w') as file:
+        json.dump(data, file)
+    return workflow_path
 
 def get_nodes_map():
     # print("#####path::", current_path)
@@ -185,6 +202,8 @@ def get_nodes_map():
     return json_data
 
 
+
+
 # 保存原始的 get 方法
 _original_request = aiohttp.ClientSession._request
 
@@ -253,6 +272,22 @@ async def mixlab_hander(request):
             print(e)
     return web.json_response(data)
 
+# @routes.post('/test')
+# async def mixlab_hander(request):
+#     test_auto()
+#     return web.Response(text="test", status=200)
+
+@routes.get('/mixlab/app')
+async def mixlab_app_handler(request):
+    html_file = os.path.join(current_path, "web/index.html")
+    if os.path.exists(html_file):
+        with open(html_file, 'r', encoding='utf-8', errors='ignore') as f:
+            html_data = f.read()
+            return web.Response(text=html_data, content_type='text/html')
+    else:
+        return web.Response(text="HTML file not found", status=404)
+    
+
 @routes.post('/mixlab/workflow')
 async def mixlab_workflow_hander(request):
     data = await request.json()
@@ -265,6 +300,17 @@ async def mixlab_workflow_hander(request):
                     'status':'success',
                     'file_path':file_path
                 }
+            elif data['task']=='save_app':
+                file_path=save_workflow_for_app(data['data'])
+                result={
+                    'status':'success',
+                    'file_path':file_path
+                }
+            elif data['task']=='my_app':
+                result={
+                    'data':get_my_workflow_for_app(),
+                    'status':'success',
+                }
             elif data['task']=='list':
                 result={
                     'data':get_workflows(),
@@ -289,6 +335,7 @@ async def nodes_map_hander(request):
 
     return web.json_response(result)
 
+# 把插件自定义的路由添加到comfyui server里
 def new_add_routes(self):
         import nodes
         self.app.add_routes(routes)
@@ -318,23 +365,25 @@ PromptServer.add_routes=new_add_routes
 
 # 导入节点
 from .nodes.PromptNode import RandomPrompt
-from .nodes.ImageNode import NoiseImage,TransparentImage,LoadImagesFromPath,ResizeImage,TextImage,SvgImage,Image3D,EmptyLayer,ShowLayer,NewLayer,MergeLayers,AreaToMask,SmoothMask,FeatheredMask,SplitLongMask,ImageCropByAlpha,EnhanceImage,FaceToMask
+from .nodes.ImageNode import NoiseImage,TransparentImage,LoadImagesFromPath,LoadImagesFromURL,UploadImageForSMMS,ResizeImage,TextImage,SvgImage,Image3D,EmptyLayer,ShowLayer,NewLayer,MergeLayers,AreaToMask,SmoothMask,FeatheredMask,SplitLongMask,ImageCropByAlpha,EnhanceImage,FaceToMask
 from .nodes.Vae import VAELoader,VAEDecode
 from .nodes.ScreenShareNode import ScreenShareNode,FloatingVideo
 from .nodes.Clipseg import CLIPSeg,CombineMasks
 from .nodes.ChatGPT import ChatGPTNode,ShowTextForGPT,CharacterInText
 from .nodes.Audio import GamePal,SpeechRecognition,SpeechSynthesis
-from .nodes.Utils import ColorInput,FontInput,TextToNumber,DynamicDelayProcessor
-
+from .nodes.Utils import AppInfo,IntNumber,FloatSlider,TextInput,ColorInput,FontInput,TextToNumber,DynamicDelayProcessor,LimitNumber,SwitchByIndex,GetImageSize_,MultiplicationNode
+from .nodes.ShareNode import ShareToWeibo
 
 # 要导出的所有节点及其名称的字典
 # 注意：名称应全局唯一
 NODE_CLASS_MAPPINGS = {
+    "AppInfo":AppInfo,
     "RandomPrompt":RandomPrompt,
     "NoiseImage":NoiseImage,
     "TransparentImage":TransparentImage,
     "ResizeImageMixlab":ResizeImage,
     "LoadImagesFromPath":LoadImagesFromPath,
+    "LoadImagesFromURL":LoadImagesFromURL,
     "TextImage":TextImage,
     "EnhanceImage":EnhanceImage,
     "SvgImage":SvgImage,
@@ -360,15 +409,25 @@ NODE_CLASS_MAPPINGS = {
     "SpeechRecognition":SpeechRecognition,
     "SpeechSynthesis":SpeechSynthesis,
     "Color":ColorInput,
+    "FloatSlider":FloatSlider,
+    "IntNumber":IntNumber,
+    "TextInput_":TextInput,
     "Font":FontInput,
     "TextToNumber":TextToNumber,
-    "DynamicDelayProcessor":DynamicDelayProcessor
+    "DynamicDelayProcessor":DynamicDelayProcessor,
+    "MultiplicationNode":MultiplicationNode,
+    "GetImageSize_":GetImageSize_,
+    "SwitchByIndex":SwitchByIndex,
+    "LimitNumber":LimitNumber, 
+    "UploadImageForSMMS":UploadImageForSMMS,
+    "ShareToWeibo":ShareToWeibo
     # "GamePal":GamePal
 }
 
 # 一个包含节点友好/可读的标题的字典
 NODE_DISPLAY_NAME_MAPPINGS = {
-    "ResizeImageMixlab":"ResizeImage",
+    "AppInfo":"AppInfo ♾️Mixlab",
+    "ResizeImageMixlab":"ResizeImage ♾️Mixlab",
     "RandomPrompt": "Random Prompt ♾️Mixlab",
     "SplitLongMask":"Splitting a long image into sections",
     "VAELoaderConsistencyDecoder":"Consistency Decoder Loader",

data/extension-node-map.json

@@ -4762,15 +4762,17 @@
     "https://github.com/shadowcz007/comfyui-mixlab-nodes": [
         [
             "3DImage",
+            "AppInfo",
+            "IntNumber",
+            "FloatSlider",
+            "ResizeImage",
+            "NoiseImage",
             "AreaToMask",
-            "CLIPSeg",
             "CLIPSeg_",
             "CharacterInText",
             "ChatGPTOpenAI",
             "Color",
             "CombineMasks_",
-            "CombineSegMasks",
-            "EmptyLayer",
             "EnhanceImage",
             "FaceToMask",
             "FeatheredMask",
@@ -4778,6 +4780,7 @@
             "Font",
             "ImageCropByAlpha",
             "LoadImagesFromPath",
+            "LoadImagesFromURL",
             "MergeLayers",
             "NewLayer",
             "RandomPrompt",
@@ -4792,10 +4795,19 @@
             "TextImage",
             "TransparentImage",
             "VAEDecodeConsistencyDecoder",
-            "VAELoaderConsistencyDecoder"
+            "VAELoaderConsistencyDecoder",
+            "TextToNumber",
+            "TextInput_",
+            "DynamicDelayProcessor",
+            "MultiplicationNode",
+            "ShareToWeibo",
+            "LimitNumber",
+            "SwitchByIndex",
+            "UploadImageForSMMS",
+            "GetImageSize_"
         ],
         {
-            "title_aux": "comfyui-mixlab-nodes [WIP]"
+            "title_aux": "comfyui-mixlab-nodes"
         }
     ],
     "https://github.com/shiimizu/ComfyUI_smZNodes": [

nodes/ChatGPT.py

@@ -83,7 +83,7 @@ class ChatGPTNode:
                                        }),
                 "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"], 
                           {"default": "gpt-3.5-turbo"}),
-                "seed": ("INT", {"default": 0, "min": 0, "max": 10000, "step": 1}),
+                "seed": ("INT", {"default": 0, "min": 0, "max": 0xffffffffffffffff, "step": 1}),
                 "context_size":("INT", {"default": 1, "min": 0, "max":30, "step": 1}),
             },
              "hidden": {

nodes/Clipseg.py

@@ -35,6 +35,16 @@ if not os.path.exists(clipseg_model_dir):
 
 """Helper methods for CLIPSeg nodes"""
 
+
+# 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 tensor_to_numpy(tensor: torch.Tensor) -> np.ndarray:
     """Convert a tensor to a numpy array and scale its values to 0-255."""
     array = tensor.numpy().squeeze()
@@ -107,7 +117,7 @@ class CLIPSeg:
     RETURN_NAMES = ("Mask","Heatmap Mask", "BW Mask")
 
     # INPUT_IS_LIST = True
-    # OUTPUT_IS_LIST = (True,)
+    OUTPUT_IS_LIST = (False,False,False,)
 
     FUNCTION = "segment_image"
     def segment_image(self, image: torch.Tensor, text: str, blur: float, threshold: float, dilation_factor: int) -> Tuple[torch.Tensor, torch.Tensor, torch.Tensor]:
@@ -180,12 +190,13 @@ class CLIPSeg:
         binary_mask_image = Image.fromarray(binary_mask_resized[..., 0])
 
         # convert PIL image to numpy array
-        tensor_bw = binary_mask_image.convert("RGB")
-        tensor_bw = np.array(tensor_bw).astype(np.float32) / 255.0
-        tensor_bw = torch.from_numpy(tensor_bw)[None,]
-        tensor_bw = tensor_bw.squeeze(0)[..., 0]
+        tensor_bw = binary_mask_image.convert("L")
+        tensor_bw=pil2tensor(tensor_bw)
+        # tensor_bw = np.array(tensor_bw).astype(np.float32) / 255.0
+        # tensor_bw = torch.from_numpy(tensor_bw)[None,]
+        # tensor_bw = tensor_bw.squeeze(0)[..., 0]
 
-        return tensor_bw, image_out_heatmap, image_out_binary
+        return (tensor_bw, image_out_heatmap, image_out_binary,)
 
     #OUTPUT_NODE = False
 

nodes/ImageNode.py

@@ -1,4 +1,5 @@
 import numpy as np
+import requests
 import torch
 from PIL import Image, ImageOps,ImageFilter,ImageEnhance,ImageDraw,ImageSequence, ImageFont
 from PIL.PngImagePlugin import PngInfo
@@ -197,6 +198,24 @@ def load_image(fp,white_bg=False):
         
     return images
 
+def load_image_and_mask_from_url(url, timeout=10):
+    # Load the image from the URL
+    response = requests.get(url, timeout=timeout)
+
+    content_type = response.headers.get('Content-Type')
+    
+    image = Image.open(BytesIO(response.content))
+
+    # Create a mask from the image's alpha channel
+    mask = image.convert('RGBA').split()[-1]
+
+    # Convert the mask to a black and white image
+    mask = mask.convert('L')
+
+    image=image.convert('RGB')
+
+    return (image, mask)
+
 
 # 获取图片s
 def get_images_filepath(f,white_bg=False):
@@ -495,10 +514,10 @@ def generate_text_image(text, font_path, font_size, text_color, vertical=True, s
     # 3. Calculate image width and height
     if layout == "vertical":
         width = (len(lines) * (font_size + spacing)) - spacing
-        height = (len(max(lines, key=len)) * (font_size + spacing)) - spacing
+        height = (len(max(lines, key=len)) * (font_size + spacing)) + spacing
     else:
         width = (len(max(lines, key=len)) * (font_size + spacing)) - spacing
-        height = (len(lines) * (font_size + spacing)) - spacing
+        height = (len(lines) * (font_size + spacing)) + spacing
 
     # 4. Draw each character on the image
     image = Image.new('RGBA', (width, height), (255, 255, 255,0))
@@ -541,7 +560,7 @@ def base64_to_image(base64_string):
     return image
 
 
-def create_temp_file(image):
+def create_temp_file(image,fn='material'):
     output_dir = folder_paths.get_temp_directory()
 
     (
@@ -550,7 +569,7 @@ def create_temp_file(image):
             counter,
             subfolder,
             _,
-        ) = folder_paths.get_save_image_path('material', output_dir)
+        ) = folder_paths.get_save_image_path(fn, output_dir)
 
     
     image=tensor2pil(image)
@@ -567,6 +586,42 @@ def create_temp_file(image):
                 "type": "temp"
                 }]
 
+def create_temp_file_for_upload(image,fn='tmp'):
+    output_dir = folder_paths.get_temp_directory()
+
+    (
+            full_output_folder,
+            filename,
+            counter,
+            subfolder,
+            _,
+        ) = folder_paths.get_save_image_path(fn, output_dir)
+
+    
+    image=tensor2pil(image)
+ 
+    image_file = f"{filename}_{counter:05}.png"
+     
+    image_path=os.path.join(full_output_folder, image_file)
+
+    image.save(image_path,compress_level=4)
+
+    return image_path
+
+
+def upload_smms(fp,token):
+    # print(json.dumps(res, indent=4))
+    image_url=''
+    try:
+        headers = {'Authorization': token}
+        files = {'smfile': open(fp, 'rb')}
+        url = 'https://smms.app/api/v2/upload'
+        res = requests.post(url, files=files, headers=headers).json()
+        image_url=res['data']['url']
+    except:
+        print('upload error')
+    return image_url
+
 
 class SmoothMask:
     @classmethod
@@ -869,7 +924,7 @@ class LoadImagesFromPath:
                 }
             }
     
-    RETURN_TYPES = ('IMAGE','MASK','STRING')
+    RETURN_TYPES = ('IMAGE','MASK','STRING',)
 
     FUNCTION = "run"
 
@@ -902,6 +957,11 @@ class LoadImagesFromPath:
 
         images=get_images_filepath(file_path,white_bg=='enable')
 
+        # 当开启了监听，则取最新的，第一个文件
+        if watcher=='enable':
+            index_variable=0
+            newest_files='enable'
+
         # 排序
         sorted_files = sorted(images, key=lambda x: os.path.getmtime(x['file_path']), reverse=(newest_files=='enable'))
 
@@ -913,9 +973,13 @@ class LoadImagesFromPath:
             masks.append(im['mask'])
         
         # print('index_variable',index_variable)
-        if index_variable!=-1:
-            imgs=[imgs[index_variable]] if index_variable < len(imgs) else None
-            masks=[masks[index_variable]] if index_variable < len(masks) else None
+        
+        try:
+            if index_variable!=-1:
+                imgs=[imgs[index_variable]] if index_variable < len(imgs) else None
+                masks=[masks[index_variable]] if index_variable < len(masks) else None
+        except Exception as e:
+            print("发生了一个未知的错误：", str(e))
 
         # print('#prompt::::',prompt)
         return (imgs,masks,prompt,)
@@ -983,7 +1047,7 @@ class TextImage:
                              },
                 }
     
-    RETURN_TYPES = ("IMAGE","MASK")
+    RETURN_TYPES = ("IMAGE","MASK",)
     # RETURN_NAMES = ("WIDTH","HEIGHT","X","Y",)
 
     FUNCTION = "run"
@@ -1004,6 +1068,62 @@ class TextImage:
 
         return (img,mask,)
 
+class LoadImagesFromURL:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": { 
+                    "url": ("STRING",{"multiline": True,"default": "https://","dynamicPrompts": False}),
+                             },
+                }
+    
+    RETURN_TYPES = ("IMAGE","MASK",)
+    RETURN_NAMES = ("images","masks",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/image"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (True,True,)
+
+
+    global urls_image
+    urls_image={}
+
+    def run(self,url):
+        global urls_image
+        print(urls_image)
+        def filter_http_urls(urls):
+            filtered_urls = []
+            for url in urls.split('\n'):
+                if url.startswith('http'):
+                    filtered_urls.append(url)
+            return filtered_urls
+
+        filtered_urls = filter_http_urls(url)
+
+        images=[]
+        masks=[]
+
+        for img_url in filtered_urls:
+            try:
+                if img_url in urls_image:
+                    img,mask=urls_image[img_url]
+                else:
+                    img,mask=load_image_and_mask_from_url(img_url)
+                    urls_image[img_url]=(img,mask)
+
+                img1=pil2tensor(img)
+                mask1=pil2tensor(mask)
+
+                images.append(img1)
+                masks.append(mask1)
+            except Exception as e:
+                print("发生了一个未知的错误：", str(e))
+            
+        return (images,masks,)
+
+
 
 
 class SvgImage:
@@ -1060,16 +1180,22 @@ class Image3D:
 
     def run(self,upload,material=None):
         # print('material',material)
-        # print(upload['image'])
+        # print(upload )
         image = base64_to_image(upload['image'])
-        mat=base64_to_image(upload['material'])
+
+        mat=None
+        if 'material' in upload and upload['material']:
+            mat=base64_to_image(upload['material'])
+            mat=mat.convert('RGB')
+            mat=pil2tensor(mat)
+
         mask = image.split()[3]
         image=image.convert('RGB')
-        mat=mat.convert('RGB')
+        
         mask=mask.convert('L')
 
         bg_image=None
-        if 'bg_image' in upload:
+        if 'bg_image' in upload and upload['bg_image']:
             bg_image = base64_to_image(upload['bg_image'])
             bg_image=bg_image.convert('RGB')
             bg_image=pil2tensor(bg_image)
@@ -1077,8 +1203,7 @@ class Image3D:
 
         mask=pil2tensor(mask)
         image=pil2tensor(image)
-        mat=pil2tensor(mat)
-
+        
         m=[]
         if not material is None:
             m=create_temp_file(material[0])
@@ -1587,4 +1712,60 @@ class ResizeImage:
 
         im=pil2tensor(im)
         
-        return (im,)
+        return (im,)
+    
+
+
+
+class UploadImageForSMMS:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+            "image": ("IMAGE",),
+            "token": ("STRING",{"multiline": False,"default": "","dynamicPrompts": False}),
+                             }, 
+                }
+    
+    RETURN_TYPES = ("STRING",)
+    RETURN_NAMES = ("url",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/image"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,)
+
+    def run(self,image,token):
+        # print(image,token)
+        fp=create_temp_file_for_upload(image)
+
+        url=upload_smms(fp,token)
+        
+        return (url,)
+    
+
+# 压缩到5M
+# from PIL import Image
+# import os
+
+# def compress_image(input_image_path, output_image_path):
+#     image = Image.open(input_image_path)
+#     image.save(output_image_path, optimize=True, quality=50)
+
+# def get_image_size(image_path):
+#     return os.path.getsize(image_path) / (1024 * 1024)  # 将文件大小从字节转换为兆字节
+
+# def compress_to_5mb(input_image_path, output_image_path):
+#     compress_image(input_image_path, output_image_path)
+#     max_iterations = 10  # 设置最大循环次数
+#     iterations = 0
+#     while get_image_size(output_image_path) > 5 and iterations < max_iterations:
+#         compress_image(output_image_path, output_image_path)
+#         iterations += 1
+
+# # 示例用法
+# input_image_path = "input.jpg"
+# output_image_path = "output.jpg"
+# compress_to_5mb(input_image_path, output_image_path)
+

nodes/ShareNode.py

@@ -0,0 +1,37 @@
+
+import urllib.parse
+
+
+# 分享到微博
+class ShareToWeibo:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "title":("STRING",{"multiline": True,"default": "","dynamicPrompts": False}),
+                "pic_url":("STRING",{"multiline": False,"default": "","dynamicPrompts": False}),
+                "url":("STRING",{"multiline": False,"default": "","dynamicPrompts": False}),
+            }
+        }
+
+    RETURN_TYPES = ()
+    # RETURN_NAMES = ("number",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/share"
+
+    INPUT_IS_LIST = False
+    OUTPUT_NODE = True
+    # OUTPUT_IS_LIST = ()
+
+    def run(self, title, pic_url, url):
+        encoded_title = urllib.parse.quote(title)
+        encoded_pic_url = urllib.parse.quote(pic_url)
+        encoded_url = urllib.parse.quote(url)
+        url = "https://service.weibo.com/share/share.php?title={}&pic={}&url={}".format(encoded_title,encoded_pic_url,encoded_url)
+        print(url)
+        return {"ui": {"url": [url]}, "result": ()}
+    
+
+

nodes/Utils.py

@@ -1,9 +1,53 @@
 import os
 import re,random
+from PIL import Image
+import numpy as np
 # FONT_PATH= os.path.abspath(os.path.join(os.path.dirname(__file__),'../assets/王汉宗颜楷体繁.ttf'))
-
+import folder_paths
 import matplotlib.font_manager as fm
 
+# import json
+# import hashlib
+
+
+# def get_json_hash(json_content):
+#     json_string = json.dumps(json_content, sort_keys=True)
+#     hash_object = hashlib.sha256(json_string.encode())
+#     hash_value = hash_object.hexdigest()
+#     return hash_value
+    
+
+
+def tensor2pil(image):
+    return Image.fromarray(np.clip(255. * image.cpu().numpy().squeeze(), 0, 255).astype(np.uint8))
+
+
+def create_temp_file(image):
+    output_dir = folder_paths.get_temp_directory()
+
+    (
+            full_output_folder,
+            filename,
+            counter,
+            subfolder,
+            _,
+        ) = folder_paths.get_save_image_path('tmp', output_dir)
+
+    
+    image=tensor2pil(image)
+ 
+    image_file = f"{filename}_{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 get_font_files(directory):
     font_files = {}
 
@@ -120,6 +164,113 @@ class TextToNumber:
             result= random.randint(1, 10000000000)
         return {"ui": {"text": [text],"num":[result]}, "result": (result,)}
     
+
+   
+class FloatSlider:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+                    "number":("FLOAT", {
+                        "default": 0, 
+                        "min": 0, #Minimum value
+                        "max": 1, #Maximum value
+                        "step": 0.001, #Slider's step
+                        "display": "slider" # Cosmetic only: display as "number" or "slider"
+                    }),
+                             },
+                }
+    
+    RETURN_TYPES = ("FLOAT",) 
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/utils"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,)
+
+    def run(self,number):
+       
+        return (number,)
+    
+  
+class IntNumber:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+                    "number":("INT", {
+                        "default": 0, 
+                        "min": -1, #Minimum value
+                        "max": 0xffffffffffffffff,
+                        "step": 1, #Slider's step
+                        "display": "number" # Cosmetic only: display as "number" or "slider"
+                    }),
+                             },
+                }
+    
+    RETURN_TYPES = ("INT",) 
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/utils"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,)
+
+    def run(self,number):
+       
+        return (number,)
+
+class MultiplicationNode:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+                    "numberA":(any_type,),
+                    "numberB":("FLOAT", {
+                        "default": 0, 
+                        "min": -1, #Minimum value
+                        "max": 0xffffffffffffffff,
+                        "step": 0.1, #Slider's step
+                        "display": "number" # Cosmetic only: display as "number" or "slider"
+                    })
+                             },
+                }
+    
+    RETURN_TYPES = ("FLOAT","INT",) 
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/utils"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,False,)
+
+    def run(self,numberA,numberB):
+        b=int(numberA*numberB)
+        a=float(numberA*numberB)
+        return (a,b,) 
+
+class TextInput:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+                    "text": ("STRING",{"multiline": True,"default": ""}),
+                             },
+                }
+    
+    RETURN_TYPES = ("STRING",) 
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/utils"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,)
+
+    def run(self,text):
+       
+        return (text,)
+    
 # 接收一个值，然后根据字符串或数值长度计算延迟时间，用户可以自定义延迟"字/s"，延迟之后将转化
 
 import comfy.samplers
@@ -141,7 +292,7 @@ class DynamicDelayProcessor:
 
     @classmethod
     def INPUT_TYPES(cls):
-        print("print INPUT_TYPES",cls)
+        # print("print INPUT_TYPES",cls)
         return {
             "required":{
                     "delay_seconds":("INT",{
@@ -210,3 +361,169 @@ class DynamicDelayProcessor:
         # 根据 replace_output 决定输出值
         return (max(0, replace_value),) if replace_output == "enable" else (any_input,)
         
+
+
+
+# app 配置节点
+class AppInfo:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": { 
+                    "name": ("STRING",{"multiline": False,"default": "Mixlab-App"}),
+                    "image": ("IMAGE",),
+                    "input_ids":("STRING",{"multiline": True,"default": "\n".join(["1","2","3"])}),
+                    "output_ids":("STRING",{"multiline": True,"default": "\n".join(["5","9"])}),
+                             },
+
+                "optional":{
+                    "description":("STRING",{"multiline": True,"default": ""}),
+                    "version":("INT", {
+                        "default": 1, 
+                        "min": 1, 
+                        "max": 10000, 
+                        "step": 1, 
+                        "display": "number"  
+                    }),
+                }
+
+                }
+    
+    RETURN_TYPES = ("IMAGE",)
+    RETURN_NAMES = ("IMAGE",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,)
+    OUTPUT_NODE = True
+
+    def run(self,name,image,input_ids,output_ids,description,version):
+
+        im=create_temp_file(image)
+        
+        # id=get_json_hash([name,im,input_ids,output_ids,description,version])
+
+        return {"ui": {"json": [name,im,input_ids,output_ids,description,version]}, "result": (image,)}
+    
+
+    
+
+class GetImageSize_:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "image": ("IMAGE",),
+            }
+        }
+
+    RETURN_TYPES = ("INT", "INT")
+    RETURN_NAMES = ("width", "height")
+
+    FUNCTION = "get_size"
+
+    CATEGORY = "♾️Mixlab/utils"
+
+    def get_size(self, image):
+        _, height, width, _ = image.shape
+        return (width, height)
+
+
+
+class SwitchByIndex:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "A":(any_type,),
+                "B":(any_type,),
+                "index":("INT", {
+                        "default": -1, 
+                        "min": -1, 
+                        "max": 1000, 
+                        "step": 1, 
+                        "display": "number"  
+                    }),
+            }
+        }
+
+    RETURN_TYPES = (any_type,)
+    RETURN_NAMES = ("C",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/utils"
+
+    INPUT_IS_LIST = True
+    OUTPUT_IS_LIST = (True,)
+
+    def run(self, A,B,index):
+        C=[]
+        index=index[0]
+        for a in A:
+            C.append(a)
+        for b in B:
+            C.append(b)
+        if index>-1:
+            try:
+                C=[C[index]]
+            except Exception as e:
+                C=[]
+        return (C,)
+
+
+
+class LimitNumber:
+    @classmethod
+    def INPUT_TYPES(cls):
+        return {
+            "required": {
+                "number":(any_type,),
+                "min_value":("INT", {
+                        "default": 0, 
+                        "min": 0, 
+                        "max": 0xffffffffffffffff,
+                        "step": 1, 
+                        "display": "number"  
+                    }),
+                "max_value":("INT", {
+                        "default": 1, 
+                        "min": 1, 
+                        "max": 0xffffffffffffffff,
+                        "step": 1, 
+                        "display": "number"  
+                    }),
+            }
+        }
+
+    RETURN_TYPES = (any_type,)
+    RETURN_NAMES = ("number",)
+
+    FUNCTION = "run"
+
+    CATEGORY = "♾️Mixlab/utils"
+
+    INPUT_IS_LIST = False
+    OUTPUT_IS_LIST = (False,)
+
+    def run(self, number, min_value, max_value):
+        nn=number
+
+        if isinstance(number, int):
+            min_value=int(min_value)
+            max_value=int(max_value)
+        if isinstance(number, float):
+            min_value=float(min_value)
+            max_value=float(max_value)
+
+        if number < min_value:
+            nn= min_value
+        elif number > max_value:
+            nn= max_value
+        
+        return (nn,)
+
+
+ 

requirements.txt

@@ -3,4 +3,5 @@ pyOpenSSL
 watchdog
 opencv-python-headless
 matplotlib
-openai
+openai
+# playwright

web/index.html

@@ -0,0 +1,914 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mixlab APP</title>
+    <style>
+        .app {
+            display: flex;
+            width: 90%;
+            min-width: 400px;
+            margin-left: 5%;
+        }
+
+
+
+        .status {
+            background: black;
+            color: white;
+            display: flex;
+            width: fit-content;
+            padding: 4px;
+            font-size: 12px;
+            margin: 12px;
+        }
+
+        .description {
+            display: flex;
+            margin: 12px;
+            background: white;
+            padding: 8px;
+            width: 80%;
+        }
+
+        .description p {
+            max-width: 200px;
+            word-wrap: break-word;
+        }
+
+        .panel {
+            display: flex;
+            flex-direction: column;
+            min-width: 400px;
+            background: #eee;
+            margin: 24px;
+            flex: 1;
+            align-items: center;
+            /* justify-content: center; */
+        }
+
+        .panel h1 {
+            padding: 0 12px;
+            margin-top: 12px;
+            margin-bottom: 0;
+        }
+
+        .panel img,
+        video {
+            height: fit-content;
+            width: fit-content;
+            max-width: 100%;
+            margin-left: 12px;
+        }
+
+        .input_card {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .output_card {
+            height: 100%;
+            width: 100%;
+            box-shadow: 0px 0px 8px 3px #e6e7e7;
+
+            display: flex;
+
+            /* justify-content: center;
+            align-items: center; */
+
+        }
+
+        .output_card img,
+        video {
+            max-width: 400px;
+            max-height: 600px;
+        }
+
+        .card {
+            background-color: #eee;
+            display: flex;
+            flex-direction: column;
+            padding: 24px;
+            font-size: 12px;
+        }
+
+        .card textarea {
+            width: 100%;
+            /* height: 200px; */
+            /* min-width: 300px; */
+            margin-top: 12px;
+            resize: vertical;
+            overflow: hidden;
+        }
+
+        .card img {
+            width: 100%;
+            margin-top: 12px;
+        }
+
+        .card .select {
+            margin-top: 12px;
+        }
+
+        .run_btn {
+            background: black;
+            color: white;
+            width: 88px;
+            height: 88px;
+            position: fixed;
+            bottom: 72px;
+            left: calc(50% - 44px);
+            border-radius: 100%;
+            cursor: pointer;
+            border: 3px solid;
+        }
+
+        .run_btn:hover {
+            border-color: yellow;
+            color: yellow;
+        }
+
+        .disabled {
+            background-color: #eee !important;
+            color: #4a4a4a !important;
+        }
+
+        .upload_btn {
+            width: 188px;
+            cursor: pointer;
+            height: 188px;
+            background: black;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            font-size: 14px;
+            margin-left: calc(50% - 94px);
+            margin-top: calc(30vh - 94px);
+        }
+
+        .upload_btn:hover {
+            outline: 4px solid yellow;
+            color: yellow;
+        }
+
+        .show_text {
+            font-size: 14px;
+            /* display: inline-block; */
+            /* margin: 13px; */
+            padding: 32px;
+            background: #242424;
+            color: white;
+        }
+
+        .link {
+            text-decoration: none;
+            color: gray;
+            font-size: 12px;
+            font-weight: 300;
+        }
+    </style>
+    <!-- <script src="../../../scripts/api.js" type="module"></script> -->
+</head>
+
+<body>
+    <div style="margin: 24px;
+    background: #eee;
+    padding: 24px;
+    color: #4a4a4a;">Explore your creative potential with <a class="link"
+            href="https://github.com/shadowcz007/comfyui-mixlab-nodes" target="_blank">mixlab-nodes</a> / 尽情发挥你的创意
+        <br>
+        <a class="link" href="https://www.mixcomfy.com" target="_blank">ComfyUI中文爱好者社区推荐</a>
+    </div>
+    <div></div>
+    <script type="module">
+        import { api } from "../../../scripts/api.js";
+        // console.log('api', api)
+        const base64Df =
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAALZJREFUKFOFkLERwjAQBPdbgBkInECGaMLUQDsE0AkRVRAYWqAByxldPPOWHwnw4OBGye1p50UDSoA+W2ABLPN7i+C5dyC6R/uiAUXRQCs0bXoNIu4QPQzAxDKxHoALOrZcqtiyR/T6CXw7+3IGHhkYcy6BOR2izwT8LptG8rbMiCRAUb+CQ6WzQVb0SNOi5Z2/nX35DRyb/ENazhpWKoGwrpD6nICp5c2qogc4of+c7QcrhgF4Aa/aoAFHiL+RAAAAAElFTkSuQmCC'
+
+
+        function get_url() {
+            let api_host = `${window.location.hostname}:${window.location.port}`
+            let api_base = ''
+            let url = `${window.location.protocol}//${api_host}${api_base}`
+            return url
+        }
+
+        async function uploadImage(blob, fileType = '.png', filename) {
+            const body = new FormData()
+            body.append(
+                'image',
+                new File([blob], (filename || new Date().getTime()) + fileType)
+            )
+
+            const url = get_url()
+
+            const resp = await fetch(`${url}/upload/image`, {
+                method: 'POST',
+                body
+            })
+
+            // console.log(resp)
+            let data = await resp.json()
+            let { name, subfolder } = data
+            let src = `${url}/view?filename=${encodeURIComponent(
+                name
+            )}&type=input&subfolder=${subfolder}&rand=${Math.random()}`
+
+            return { url: src, name }
+
+        }
+
+
+        function randomSeed(data) {
+            for (const key in data) {
+                if (data[key].inputs.seed != undefined) {
+                    data[key].inputs.seed = Math.round(Math.random() * 1849378600828930)
+                    console.log('new Seed', data[key])
+                }
+            }
+            return data
+        }
+
+
+        function queuePrompt(promptWorkflow, client_id) {
+
+            // 随机seed
+            promptWorkflow = randomSeed(promptWorkflow);
+
+            let url = get_url()
+            const data = JSON.stringify({ prompt: promptWorkflow, client_id });
+            fetch(`${url}/prompt`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: data,
+            })
+                .then(response => {
+                    // Handle response here
+                    console.log(response)
+                })
+                .catch(error => {
+                    // Handle error here
+                });
+        }
+
+        async function get_my_app() {
+
+            let url = get_url()
+
+            const res = await fetch(`${url}/mixlab/workflow`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    task: 'my_app'
+                })
+            })
+            let result = await res.json();
+
+            let { output, app } = result.data
+
+            return {
+                ...app,
+                data: output
+            }
+        }
+
+
+        function createOutputs(outputData) {
+            // Array.from( window._appData.output,n=>n.id)
+            const container = document.createElement("div");
+            container.className = 'output_card'
+
+            for (const node of outputData) {
+                console.log('output', node)
+                if (node.class_type == "ShowTextForGPT") {
+                    let div = document.createElement('div');
+                    div.className = "show_text"
+                    div.id = `output_${node.id}`;
+                    div.innerText = node.inputs.text[0]
+                    container.appendChild(div);
+                };
+                if (["SaveImage", "PreviewImage"].includes(node.class_type)) {
+                    let img = new Image();
+                    img.id = `output_${node.id}`;
+                    img.src = base64Df;
+                    container.appendChild(img);
+                }
+
+                // video ,gif
+                if (["VHS_VideoCombine"].includes(node.class_type)) {
+                    let v = document.createElement('div');
+                    let video = document.createElement('video'), img = new Image();
+                    video.style.display = 'none'
+                    video.controls = 'true'
+                    video.autoplay = 'true'
+                    video.loop = 'true'
+                    v.id = `output_${node.id}`;
+                    img.src = base64Df;
+
+                    v.appendChild(video);
+                    v.appendChild(img);
+                    container.appendChild(v);
+                }
+
+            }
+            return container
+        }
+
+
+        async function calculateImageHash(blob) {
+            const buffer = await blob.arrayBuffer();
+            const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+            const hashArray = Array.from(new Uint8Array(hashBuffer));
+            const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
+            return hashHex;
+        }
+
+        async function handleClipboardImage(imageElement, data) {
+            try {
+                const clipboardItems = await navigator.clipboard.read();
+                for (const clipboardItem of clipboardItems) {
+                    for (const type of clipboardItem.types) {
+
+                        if (type.startsWith('image/')) {
+                            const fileBlob = await clipboardItem.getType(type);
+                            // // 获取读取的文件内容，即 Blob 对象
+                            let hashId = await calculateImageHash(fileBlob)
+
+                            if (hashId == window._appData.data[data.id].hashId) return
+
+                            let { url, name } = await uploadImage(fileBlob);
+                            // 在这里可以对 Blob 对象进行进一步处理
+                            imageElement.src = url;
+                            window._appData.data[data.id].inputs.image = name;
+                            window._appData.data[data.id].hashId = hashId;
+
+                            console.log("上传的文件：", url, data.id, name);
+
+                            // const img = document.createElement('img');
+                            // img.src = URL.createObjectURL(blob);
+                            // document.body.appendChild(img);
+                            // console.log( URL.createObjectURL(blob));
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error('无法读取剪贴板中的图片:', error);
+            }
+        }
+
+        function createInputs(inputData) {
+            // Assuming you have an HTML element with the id "container" to hold the UI
+            const container = document.createElement("div");
+            container.className = 'input_card'
+
+            // const inputData = [
+            //     {
+            //         inputs: {
+            //             image: "1703554480406.png",
+            //             upload: "image"
+            //         },
+            //         class_type: "LoadImage"
+            //     },
+            //     {
+            //         inputs: {
+            //             image: "6b7f3c570ee13ef22aad3d26dcc7414.png",
+            //             upload: "image"
+            //         },
+            //         class_type: "LoadImage"
+            //     }
+            // ];
+            inputData.forEach(data => {
+                // Check if the class_type is "LoadImage"
+                if (data.class_type === "LoadImage") {
+                    // Create a container for the upload control
+                    const uploadContainer = document.createElement("div");
+                    uploadContainer.className = 'card';
+
+                    // Create a label for the upload control
+                    const nameLabel = document.createElement("label");
+                    nameLabel.textContent = data.title || "LoadImage: ";
+                    uploadContainer.appendChild(nameLabel);
+
+                    let actionDiv = document.createElement('div');
+
+                    // Create an input field for the image name
+                    const uploadImageInput = document.createElement("button");
+                    uploadImageInput.style = `width: 88px;`;
+                    uploadImageInput.innerText = 'upload'
+                    const uploadImageInputHide = document.createElement('input');
+                    uploadImageInputHide.type = "file";
+                    uploadImageInputHide.style.display = "none"
+                    actionDiv.appendChild(uploadImageInput);
+                    actionDiv.appendChild(uploadImageInputHide);
+
+                    const btnFromClipboard = document.createElement("button");
+                    btnFromClipboard.style = `width: 156px;
+                    height: 24px;
+                    margin-left: 18px;`
+                    btnFromClipboard.innerText = 'paste from clipboard'
+                    actionDiv.appendChild(btnFromClipboard);
+
+                    uploadContainer.appendChild(actionDiv)
+
+                    // Create an image element to display the uploaded image
+                    const imageElement = document.createElement("img");
+                    imageElement.src = base64Df
+                    imageElement.style.maxWidth = '200px';
+
+
+                    btnFromClipboard.addEventListener('click', (event) => handleClipboardImage(imageElement, data));
+
+
+                    uploadImageInput.addEventListener('click', (event) => {
+                        uploadImageInputHide.click()
+                    })
+                    uploadImageInputHide.addEventListener('change', (event) => {
+
+                        // 获取用户选择的文件
+                        const file = event.target.files[0];
+
+                        // 创建一个 FileReader 对象
+                        const reader = new FileReader();
+
+                        // 读取文件并在读取完成后执行回调函数
+                        reader.onloadend = async function () {
+                            // 获取读取的文件内容，即 Blob 对象
+                            const fileBlob = new Blob([reader.result], { type: file.type });
+
+                            let hashId = await calculateImageHash(fileBlob)
+
+                            if (hashId == window._appData.data[data.id].hashId) return
+
+                            let { url, name } = await uploadImage(fileBlob)
+                            // 在这里可以对 Blob 对象进行进一步处理
+                            imageElement.src = url;
+                            window._appData.data[data.id].inputs.image = name;
+                            window._appData.data[data.id].hashId = hashId;
+
+                            console.log("上传的文件：", url, data.id, name);
+                        };
+
+                        // 开始读取文件
+                        reader.readAsArrayBuffer(file);
+
+
+                    })
+
+                    // imageElement.src = `${get_url()}/view?filename=${encodeURIComponent(data.inputs.image)}&type=${type}&subfolder=${subfolder}`;
+                    uploadContainer.appendChild(imageElement);
+
+                    // Append the upload container to the main container
+                    container.appendChild(uploadContainer);
+                }
+
+                if (['FloatSlider', 'IntNumber'].includes(data.class_type)) {
+                    // 滑块输入
+                    let silde = createFloatSlide(data.title, data.inputs.number, (v) => {
+                        window._appData.data[data.id].inputs.number = v;
+                    })
+                    container.appendChild(silde);
+                }
+
+                // Check if the class_type is "CLIPTextEncode"
+                if (["TextInput_", "CLIPTextEncode"].includes(data.class_type)) {
+                    // Create a container for the upload control
+                    const uploadContainer = document.createElement("div");
+                    uploadContainer.className = 'card';
+
+                    // Create a label for the upload control
+                    const nameLabel = document.createElement("label");
+                    nameLabel.textContent = data.title || "CLIPTextEncode: ";
+                    uploadContainer.appendChild(nameLabel);
+
+                    // Create an input field for the image name
+                    const textInput = document.createElement("textarea");
+                    // uploadImageInput.type = "text";
+                    textInput.value = data.inputs.text;
+                    uploadContainer.appendChild(textInput);
+
+                    function autoResize(textarea) {
+                        textarea.style.height = 'auto';
+                        textarea.style.height = textarea.scrollHeight + 'px';
+                    }
+
+                    textInput.addEventListener('input', (event) => {
+                        // console.log(textInput.value)
+                        autoResize(textInput);
+                        window._appData.data[data.id].inputs.text = textInput.value;
+                    })
+
+                    // Append the upload container to the main container
+                    container.appendChild(uploadContainer);
+                }
+
+
+                if (["CheckpointLoaderSimple", "LoraLoader"].includes(data.class_type)) {
+                    let value = data.inputs.ckpt_name || data.inputs.lora_name;
+
+                    let [div, selectDom] = createSelectWithOptions(data.title, Array.from(data.options, o => {
+                        return {
+                            value: o,
+                            text: o
+                        }
+                    }), value);
+
+                    selectDom.addEventListener('change', e => {
+                        e.preventDefault();
+                        // console.log(selectDom.value)
+                        if (data.class_type === 'CheckpointLoaderSimple') {
+                            window._appData.data[data.id].inputs.ckpt_name = selectDom.value;
+                        }
+                        if (data.class_type === 'LoraLoader') {
+                            window._appData.data[data.id].inputs.lora_name = selectDom.value;
+                        }
+                    })
+
+                    container.appendChild(div);
+                }
+
+
+            });
+            return container
+        }
+
+        function createFloatSlide(labelText, value = 0, callback, minValue = 0, maxValue = 1) {
+
+            // 创建滑块输入元素
+            var slider = document.createElement("input");
+            slider.type = "range";
+            slider.min = minValue;
+            slider.max = maxValue;
+            slider.step = 0.01
+            slider.value = value;
+
+            // 创建标签元素
+            var label = document.createElement("label");
+            label.innerHTML = labelText;
+
+            // 创建容器元素，并将滑块输入和标签添加到容器中
+            var container = document.createElement("div");
+            container.appendChild(label);
+            container.appendChild(slider);
+            container.className = 'card'
+
+            // 添加change事件监听器
+            slider.addEventListener("change", function (event) {
+                var value = event.target.value;
+                console.log("滑块输入的值为：" + value);
+                // 在这里可以执行其他操作，根据需要进行相应的处理
+                callback && callback(value)
+            });
+
+            // 返回容器元素
+            return container;
+
+        }
+
+        function createSelectWithOptions(title, options, defaultValue) {
+
+            const div = document.createElement("div");
+            div.className = 'card';
+
+            // Create a label for the upload control
+            const nameLabel = document.createElement("label");
+            nameLabel.textContent = title;
+            div.appendChild(nameLabel);
+
+            var selectElement = document.createElement("select");
+            selectElement.className = "select"
+
+            // 循环遍历选项数组
+            for (var i = 0; i < options.length; i++) {
+                var option = document.createElement("option");
+                option.value = options[i].value;
+                option.text = options[i].text;
+                selectElement.appendChild(option);
+            }
+
+            // 设置默认值
+            selectElement.value = defaultValue;
+
+            div.appendChild(selectElement)
+
+            return [div, selectElement];
+        }
+
+        function getTypeFromUrl(url) {
+            const queryString = url.split('?')[1];
+            if (!queryString) {
+                return null;
+            }
+
+            const params = new URLSearchParams(queryString);
+            const type = params.get('type');
+
+            return type;
+        }
+
+
+
+        function createUI(inputData, outputData) {
+
+            let mainDiv = document.createElement('div');
+            let leftDiv = document.createElement('div');
+            let rightDiv = document.createElement('div');
+
+            mainDiv.className = 'app'
+            leftDiv.className = 'panel'
+            leftDiv.style.alignItems = 'flex-start';
+            rightDiv.className = 'panel'
+            leftDiv.style.flex = 0.4
+            rightDiv.style.flex = 0.6;
+            // rightDiv.style.height='70vh'
+            //         rightDiv.style=`position: fixed;
+            // right: 0;
+            // top: 12px;flex:0.6`
+
+            // 创建标题
+            var title = document.createElement('h1');
+            title.textContent = 'My Application';
+
+            let iconDes = document.createElement('div');
+            // 创建应用图标
+            var icon = document.createElement('img');
+            icon.style.width = '48px';
+            // icon.style.height = '98px';
+            icon.src = base64Df;
+
+            var des = document.createElement('p');
+            des.style = `margin-left: 12px; font-size: 14px;`
+            iconDes.appendChild(icon)
+            iconDes.appendChild(des);
+            iconDes.className = 'description'
+
+            // 创建状态标签
+            var status = document.createElement('div');
+            status.textContent = 'Status';
+            status.className = 'status';
+
+            // 创建输入框
+            var input1 = createInputs(inputData)
+
+            var output = createOutputs(outputData)
+
+            // 创建提交按钮
+            var submitButton = document.createElement('button');
+            submitButton.textContent = 'Create';
+            submitButton.className = 'run_btn'
+
+            // 将所有UI元素添加到页面中
+            leftDiv.appendChild(title);
+            leftDiv.appendChild(iconDes);
+            // leftDiv.appendChild(des);
+            leftDiv.appendChild(status);
+            leftDiv.appendChild(input1);
+            leftDiv.appendChild(submitButton);
+
+            rightDiv.appendChild(output);
+
+            mainDiv.appendChild(leftDiv);
+            mainDiv.appendChild(rightDiv);
+
+            document.body.appendChild(mainDiv)
+
+            // 返回每个UI元素的引用和对应的更新方法
+            return {
+                title: {
+                    element: title,
+                    update: function (newTitle) {
+                        title.textContent = newTitle;
+                    }
+                },
+                icon: {
+                    element: icon,
+                    update: function (newIconPath) {
+                        icon.src = newIconPath;
+                    }
+                },
+                des: {
+                    element: des,
+                    update: function (text) {
+                        des.textContent = text;
+                    }
+                },
+                status: {
+                    element: status,
+                    update: function (newStatus) {
+                        status.textContent = newStatus;
+                    }
+                },
+                input1: {
+                    element: input1,
+                    update: function () {
+                        // 可以在这里添加上传图片的逻辑
+                    }
+                },
+                output: {
+                    element: output,
+                    update: function (type = "image", val, id) {
+                        console.log(val, id)
+                        if (type == "image" && output.querySelector(`#output_${id}`)) {
+                            if (output.querySelector(`#output_${id} img`)) {
+                                output.querySelector(`#output_${id} img`).src = val;
+                            } else {
+                                output.querySelector(`#output_${id}`).src = val;
+                            }
+
+                        }
+
+                        if (type == "video" && output.querySelector(`#output_${id}`)) {
+                            let video = output.querySelector(`#output_${id} video`);
+                            let img = output.querySelector(`#output_${id} img`);
+                            img.style.display = 'none';
+                            video.style.display = 'block';
+                            video.src = val;
+                        }
+
+                        if (type == "text" && output.querySelector(`#output_${id}`)) output.querySelector(`#output_${id}`).innerText = val;
+
+                    }
+                },
+                submitButton: {
+                    element: submitButton,
+                    update: function (callback) {
+                        submitButton.addEventListener('dblclick', (e) => {
+                            submitButton.classList.remove('disabled');
+                        });
+                        submitButton.addEventListener('click', (e) => {
+
+                            if (!submitButton.classList.contains('disabled')) {
+                                callback && callback();
+                                submitButton.classList.add('disabled');
+                                setTimeout(() => submitButton.classList.remove('disabled'), 500)
+                            }
+
+                        });
+                    }
+                }
+            };
+        }
+
+        function createUploadJson() {
+
+            // 创建一个div元素
+            var div = document.createElement('div');
+            div.className = 'upload_btn'
+            div.textContent = '点击上传JSON文件';
+            div.addEventListener('click', function () {
+                document.getElementById('jsonFileInput').click();
+            });
+
+            // 创建一个input元素
+            var input = document.createElement('input');
+            input.type = 'file';
+            input.id = 'jsonFileInput';
+            input.style.display = 'none';
+            input.addEventListener('change', function (event) {
+                var file = event.target.files[0];
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    var contents = e.target.result;
+                    var jsonData = JSON.parse(contents);
+                    setTimeout(() => {
+                        div.remove();
+                        input.remove();
+                    }, 500);
+
+                    let { output, app } = jsonData;
+
+                    window._appData = {
+                        ...app,
+                        data: output
+                    };
+
+                    createApp(window._appData);
+
+                    // res(jsonData);
+                };
+                reader.readAsText(file);
+            });
+
+            // 将div和input元素添加到body中
+            document.body.appendChild(div);
+            document.body.appendChild(input);
+
+
+        }
+
+
+        async function createApp(appData) {
+            // 使用示例：
+            var ui = createUI(appData.input, appData.output);
+
+            // 更新标题
+            ui.title.update(appData.name || 'Mixlab APP');
+
+            // 更新应用图标
+            ui.icon.update(appData.icon || base64Df);
+
+            ui.des.update(appData.description || '-');
+
+            // 更新状态标签
+            ui.status.update(appData ? 'READY' : '-');
+
+            // 添加提交按钮点击事件
+            ui.submitButton.update(function () {
+                // 在提交按钮点击时执行的逻辑
+                queuePrompt(window._appData.data, api.clientId)
+            });
+
+
+            const show = (src, id, type = "image") => {
+                // console.log(src)
+                ui.output.update(type, src, id)
+            };
+
+            api.addEventListener("status", ({ detail }) => {
+                console.log("status", detail);
+                try {
+                    ui.status.update(`queue#${detail.exec_info.queue_remaining}`);
+                } catch (error) {
+
+                }
+
+            });
+
+            api.addEventListener("progress", ({ detail }) => {
+                console.log("progress", detail);
+                try {
+                    ui.status.update(`${detail.value}/${detail.max}`);
+                } catch (error) {
+
+                }
+            });
+
+            api.addEventListener("executed", ({ detail }) => {
+                console.log("executed", detail)
+                // if (!enabled) return;
+                const images = detail?.output?.images;
+                const text = detail?.output?.text;
+                const gifs = detail?.output?.gifs;
+
+                if (images) {
+                    // if (!images) return; 
+                    const src = `${get_url()}/view?filename=${encodeURIComponent(images[0].filename)}&type=${images[0].type}&subfolder=${encodeURIComponent(images[0].subfolder)}&t=${+new Date()}`;
+                    show(src, detail.node, 'image');
+                } else if (text && text[0]) {
+                    ui.output.update("text", text[0], detail.node)
+                } else if (gifs && gifs[0]) {
+                    // if (!images) return; 
+                    const src = `${get_url()}/view?filename=${encodeURIComponent(gifs[0].filename)}&type=${gifs[0].type}&subfolder=${encodeURIComponent(gifs[0].subfolder)
+                        }&&format=${gifs[0].format}&t=${+new Date()}`;
+
+                    show(src, detail.node, gifs[0].format.match('video') ? 'video' : 'image');
+                }
+
+
+                try {
+                    ui.status.update(`executed_#${detail.node}`);
+                } catch (error) {
+
+                }
+
+            });
+
+            api.addEventListener("b_preview", ({ detail }) => {
+                // if (!enabled) return;
+                console.log("b_preview", detail)
+                show(URL.createObjectURL(detail));
+            });
+
+            api.api_base = ""
+            api.init();
+        }
+
+
+        async function init_app() {
+
+            let appData = {}
+
+            const type = getTypeFromUrl(location.href);
+            if (type === 'new') {
+                createUploadJson();
+            } else {
+                appData = await get_my_app();
+                // console.log(appData)
+                window._appData = appData;
+
+                createApp(appData);
+            }
+
+
+        };
+
+        init_app()
+    </script>
+</body>
+
+</html>

web/javascript/3d_mixlab.js

@@ -187,20 +187,22 @@ app.registerExtension({
           },
           async serializeValue (nodeId, widgetIndex) {
             let d = getLocalData('_mixlab_3d_image')
-            console.log('serializeValue', node)
+            // console.log('serializeValue', node)
             if (d && d[node.id]) {
               let { url, bg, material } = d[node.id]
-              let base64 = await parseImage(url)
-              let bg_base64 = await parseImage(bg)
-              let material_base64 = await parseImage(material)
+              let data = {}
+              if (url) {
+                data.image = await parseImage(url)
+              }
+              if (bg) {
+                data.bg_image = await parseImage(bg)
+              }
 
-              return JSON.parse(
-                JSON.stringify({
-                  image: base64,
-                  bg_image: bg_base64,
-                  material: material_base64
-                })
-              )
+              if (material) {
+                data.material = await parseImage(material)
+              }
+
+              return JSON.parse(JSON.stringify(data))
             } else {
               return {}
             }
@@ -281,6 +283,8 @@ app.registerExtension({
                   <div>Material: <select class="material"></select></div>
                   <div>Material: <div class="material_img"> </div></div>
                   <div><button class="bg">BG</button></div>
+                  <div><button class="export">Export GLB</button></div>
+                  
                 </div></model-viewer>`
 
               preview.innerHTML = html
@@ -294,6 +298,7 @@ app.registerExtension({
               const selectMaterial = preview.querySelector('.material')
               const material_img = preview.querySelector('.material_img')
               const bg = preview.querySelector('.bg')
+              const exportGLB = preview.querySelector('.export')
 
               if (modelViewerVariants) {
                 modelViewerVariants.style.width = `${that.size[0] - 24}px`
@@ -341,21 +346,26 @@ app.registerExtension({
                 let url = await uploadImage(blob, '.png')
                 // console.log(url)
 
-                //  材质贴图
-                let thumbUrl = material_img.getAttribute('src')
-                let tb = await base64ToBlobFromURL(thumbUrl)
-                let tUrl = await uploadImage(tb, '.png')
-
-                // console.log(tUrl)
-
                 let bg_blob = await base64ToBlobFromURL(
                   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN88uXrPQAFwwK/6xJ6CQAAAABJRU5ErkJggg=='
                 )
                 let url_bg = await uploadImage(bg_blob, '.png')
+                // console.log('url_bg',url_bg)
 
-                if (!dd[that.id])
-                  dd[that.id] = { url, bg: url_bg, material: tUrl }
-                dd[that.id] = { ...dd[that.id], url, material: tUrl }
+                if (!dd[that.id]) {
+                  dd[that.id] = { url, bg: url_bg }
+                } else {
+                  dd[that.id] = { ...dd[that.id], url }
+                }
+
+                //  材质贴图
+                let thumbUrl = material_img.getAttribute('src')
+                if (thumbUrl) {
+                  let tb = await base64ToBlobFromURL(thumbUrl)
+                  let tUrl = await uploadImage(tb, '.png')
+                  // console.log('材质贴图', tUrl, thumbUrl)
+                  dd[that.id].material = tUrl
+                }
 
                 setLocalDataOfWin(key, dd)
               }
@@ -367,11 +377,11 @@ app.registerExtension({
 
               modelViewerVariants.addEventListener('camera-change', startTimer)
 
-              select.addEventListener('input', event => {
+              select.addEventListener('input', async event => {
                 modelViewerVariants.variantName =
                   event.target.value === 'default' ? null : event.target.value
                 // 材质
-                extractMaterial(
+                await extractMaterial(
                   modelViewerVariants,
                   selectMaterial,
                   material_img
@@ -456,6 +466,15 @@ app.registerExtension({
                 input.click()
               })
 
+              exportGLB.addEventListener('click', async () => {
+                const glTF = await modelViewerVariants.exportScene()
+                const file = new File([glTF], 'export.glb')
+                const link = document.createElement('a')
+                link.download = file.name
+                link.href = URL.createObjectURL(file)
+                link.click()
+              })
+
               uploadWidget.value = await uploadWidget.serializeValue()
 
               // 更新尺寸

web/javascript/app_mixlab.js

@@ -0,0 +1,298 @@
+import { app } from '../../../scripts/app.js'
+import { $el } from '../../../scripts/ui.js'
+import { api } from '../../../scripts/api.js'
+
+function get_position_style (ctx, widget_width, y, node_height) {
+  const MARGIN = 12 // 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: 'row',
+    // alignItems: 'center',
+    justifyContent: 'flex-start'
+  }
+}
+
+async function drawImageToCanvas (imageUrl) {
+  var canvas = document.createElement('canvas')
+  var ctx = canvas.getContext('2d')
+  var img = new Image()
+
+  await new Promise((resolve, reject) => {
+    img.onload = function () {
+      var scaleFactor = 320 / img.width
+      var canvasWidth = img.width * scaleFactor
+      var canvasHeight = img.height * scaleFactor
+
+      canvas.width = canvasWidth
+      canvas.height = canvasHeight
+
+      ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight)
+
+      resolve()
+    }
+
+    img.onerror = function () {
+      reject(new Error('Failed to load image'))
+    }
+
+    img.src = imageUrl
+  })
+
+  var base64 = canvas.toDataURL('image/jpeg')
+  // console.log(base64); // 输出Base64数据
+  return base64
+  // 可以在这里执行其他操作，比如将Base64数据保存到服务器或显示在页面上
+}
+
+function extractInputAndOutputData (jsonData, inputIds = [], outputIds = []) {
+  const data = jsonData
+  const input = []
+  const output = []
+
+  for (const id in data) {
+    if (data.hasOwnProperty(id)) {
+      if (inputIds.includes(id)) {
+        let node = app.graph.getNodeById(id)
+        let options = []
+        // 模型
+        try {
+          if (node.type === 'CheckpointLoaderSimple') {
+            options = node.widgets.filter(w => w.name === 'ckpt_name')[0]
+              .options.values
+          }else if(node.type === 'LoraLoader'){
+            options =node.widgets.filter(w=>w.name==='lora_name')[0].options.values
+          }
+        } catch (error) {}
+
+        input[inputIds.indexOf(id)] = {
+          ...data[id],
+          title: node.title,
+          id,
+          options
+        }
+        // input.push()
+      }
+      if (outputIds.includes(id)) {
+        let node = app.graph.getNodeById(id)
+        // output.push()
+        output[outputIds.indexOf(id)] = { ...data[id], title: node.title, id }
+      }
+    }
+  }
+
+  return { input, output }
+}
+
+function getUrl () {
+  let api_host = `${window.location.hostname}:${window.location.port}`
+  let api_base = ''
+  let url = `${window.location.protocol}//${api_host}${api_base}`
+  return url
+}
+
+async function save_app (json) {
+  let url = getUrl()
+
+  const res = await fetch(`${url}/mixlab/workflow`, {
+    method: 'POST',
+    body: JSON.stringify({
+      data: json,
+      task: 'save_app'
+    })
+  })
+  return await res.json()
+}
+
+function downloadJsonFile (jsonData, fileName = 'mix_app.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)
+}
+
+async function save (json, download = false) {
+  const name = json[0],
+    version = json[5],
+    description = json[4],
+    inputIds = json[2].split('\n').filter(f => f),
+    outputIds = json[3].split('\n').filter(f => f)
+
+  const iconData = json[1][0]
+  let { filename, subfolder, type } = iconData
+  let iconUrl = api.apiURL(
+    `/view?filename=${encodeURIComponent(
+      filename
+    )}&type=${type}&subfolder=${subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`
+  )
+
+  try {
+    let data = await app.graphToPrompt()
+
+    const { input, output } = extractInputAndOutputData(
+      data.output,
+      inputIds,
+      outputIds
+    )
+
+    data.app = {
+      name,
+      description,
+      version,
+      input,
+      output
+    }
+
+    try {
+      data.app.icon = await drawImageToCanvas(iconUrl)
+    } catch (error) {}
+    // console.log(data.app)
+    // let http_workflow = app.graph.serialize()
+
+    if (download) {
+      await downloadJsonFile(
+        data,
+        `${data.app.name}_${data.app.version}_${new Date().toDateString()}.json`
+      )
+      let open = window.confirm(
+        `You can now access the standalone application on a new page!\n${getUrl()}/mixlab/app?type=new`
+      )
+      if (open) window.open(`${getUrl()}/mixlab/app?type=new`)
+    } else {
+      await save_app(data)
+
+      let open = window.confirm(
+        `You can now access the standalone application on a new page!\n${getUrl()}/mixlab/app`
+      )
+      if (open) window.open(`${getUrl()}/mixlab/app`)
+    }
+  } catch (error) {
+    console.log('###SpeechRecognition', error)
+  }
+}
+
+app.registerExtension({
+  name: 'Mixlab.utils.AppInfo',
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeType.comfyClass == 'AppInfo') {
+      const orig_nodeCreated = nodeType.prototype.onNodeCreated
+      nodeType.prototype.onNodeCreated = function () {
+        orig_nodeCreated?.apply(this, arguments)
+        // console.log(this)
+        const widget = {
+          type: 'div',
+          name: 'AppInfoRun',
+          draw (ctx, node, widget_width, y, widget_height) {
+            Object.assign(
+              this.div.style,
+              get_position_style(
+                ctx,
+                widget_width,
+                node.widgets[4].last_y + 24,
+                node.size[1]
+              )
+            )
+          }
+        }
+
+        const style = `
+        flex-direction: row;
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;
+        color: var(--descrip-text);`
+
+        widget.div = $el('div', {})
+
+        const btn = document.createElement('button')
+        btn.innerText = 'Save For App'
+        btn.style = style
+
+        btn.addEventListener('click', () => {
+          //   console.log('hahhah')
+          if (window._mixlab_app_json) {
+            save(window._mixlab_app_json)
+          } else {
+            alert('Please run the workflow before saving')
+            // app.queuePrompt(0, 1)
+          }
+        })
+
+        const download = document.createElement('button')
+        download.innerText = 'Download For App'
+        download.style = style
+        download.style.marginLeft = '12px'
+
+        download.addEventListener('click', () => {
+          //   console.log('hahhah')
+          if (window._mixlab_app_json) {
+            save(window._mixlab_app_json, true)
+          } else {
+            alert('Please run the workflow before saving')
+            // app.queuePrompt(0, 1)
+          }
+        })
+
+        document.body.appendChild(widget.div)
+        widget.div.appendChild(btn)
+        widget.div.appendChild(download)
+
+        this.addCustomWidget(widget)
+
+        const onRemoved = this.onRemoved
+        this.onRemoved = () => {
+          widget.div.remove()
+          return onRemoved?.()
+        }
+
+        this.serialize_widgets = true //需要保存参数
+      }
+
+      const onExecuted = nodeType.prototype.onExecuted
+      nodeType.prototype.onExecuted = async function (message) {
+        onExecuted?.apply(this, arguments)
+        // console.log(this.widgets)
+
+        window._mixlab_app_json = message.json
+        try {
+          const div = this.widgets.filter(w => w.div)[0].div
+          Array.from(
+            div.querySelectorAll('button'),
+            b => (b.style.background = 'yellow')
+          )
+        } catch (error) {}
+      }
+    }
+  }
+})

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

web/javascript/image_mixlab.js

@@ -406,7 +406,9 @@ app.registerExtension({
 
         this.serialize_widgets = true //需要保存参数
       }
-    }
+    };
+
+ 
   },
   async loadedGraphNode (node, app) {
     // Fires every time a node is constructed

web/javascript/layer_mixlab.js

@@ -156,8 +156,8 @@ const parseSvg = async svgContent => {
   return { data, image: base64, svgElement }
 }
 
-async function setArea (cw, ch, base64, data, fn) {
-  let displayHeight = Math.round(window.screen.availHeight * 0.6)
+async function setArea (cw, ch, topBase64, base64, data, fn) {
+  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;
@@ -170,8 +170,13 @@ async function setArea (cw, ch, base64, data, fn) {
       outline: 2px solid #eaeaea;
       box-shadow: 8px 9px 17px #575757;' />
       <div id='ml_selection' style='position: absolute; 
-      border: 2px dashed red; 
-      pointer-events: none;'></div>
+      border: 2px dashed red;
+      pointer-events: none;
+      background-image: url("${topBase64}");
+            background-repeat: no-repeat;
+            background-size: cover;
+            '></div>
+      <div class="mx_close"> X </div>
     </div>`
   // document.body.querySelector('#ml_overlay')
   document.body.appendChild(div)
@@ -181,13 +186,25 @@ async function setArea (cw, ch, base64, data, fn) {
   // canvas.height = ch
 
   let img = div.querySelector('#ml_video')
-  let overlay = div.querySelector('#ml_overlay')
+  // let overlay = div.querySelector('#ml_overlay')
   let selection = div.querySelector('#ml_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;`
 
   // init area
   // const data = getSetAreaData()
@@ -216,14 +233,37 @@ async function setArea (cw, ch, base64, data, fn) {
   img.addEventListener('mousedown', startSelection)
   img.addEventListener('mousemove', updateSelection)
   img.addEventListener('mouseup', endSelection)
-  overlay.addEventListener('click', remove)
 
-  function remove () {
-    overlay.removeEventListener('click', remove)
+  const removeDiv = () => {
+    div.remove()
+    close.removeEventListener('click', removeDiv)
     img.removeEventListener('mousedown', startSelection)
     img.removeEventListener('mousemove', updateSelection)
     img.removeEventListener('mouseup', endSelection)
-    div.remove()
+    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
+    // div.remove()
   }
 
   function startSelection (event) {
@@ -531,12 +571,24 @@ app.registerExtension({
               }
             }
             try {
+              console.log('this.inputs', this.inputs)
+              let topLinkId = this.inputs[0].link
+              let topNodeId = app.graph.links[topLinkId].origin_id
+              let topIm = app.graph.getNodeById(topNodeId).imgs[0]
+
               let linkId = this.inputs[3].link
               let nodeId = app.graph.links[linkId].origin_id
               // console.log(linkId,this.inputs)
               let im = app.graph.getNodeById(nodeId).imgs[0]
-              let src = im.src
-              setArea(im.naturalWidth, im.naturalHeight, src, data, updateValue)
+              // let src = im.src
+              setArea(
+                im.naturalWidth,
+                im.naturalHeight,
+                topIm.src,
+                im.src,
+                data,
+                updateValue
+              )
             } catch (error) {}
           })
         }

web/javascript/share_mixlab.js

@@ -0,0 +1,110 @@
+import { app } from '../../../scripts/app.js'
+import { $el } from '../../../scripts/ui.js'
+import { api } from '../../../scripts/api.js'
+
+function get_position_style (ctx, widget_width, y, node_height) {
+  const MARGIN = 12 // 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: 'row',
+    // alignItems: 'center',
+    justifyContent: 'flex-start'
+  }
+}
+
+app.registerExtension({
+  name: 'Mixlab.share.ShareToWeibo',
+  async beforeRegisterNodeDef (nodeType, nodeData, app) {
+    if (nodeType.comfyClass == 'ShareToWeibo') {
+      const orig_nodeCreated = nodeType.prototype.onNodeCreated
+      nodeType.prototype.onNodeCreated = function () {
+        orig_nodeCreated?.apply(this, arguments)
+        // console.log(this)
+        const widget = {
+          type: 'div',
+          name: 'ShareToWeiboBtn',
+          draw (ctx, node, widget_width, y, widget_height) {
+            Object.assign(
+              this.div.style,
+              get_position_style(
+                ctx,
+                widget_width,
+                node.widgets[2].last_y +16,
+                node.size[1]
+              )
+            )
+          }
+        }
+
+        const style = `
+        flex-direction: row;
+        background-color: var(--comfy-input-bg);
+        border-radius: 8px;
+        border-color: var(--border-color);
+        border-style: solid;
+        color: var(--descrip-text);`
+
+        widget.div = $el('div', {})
+
+        const btn = document.createElement('button')
+        btn.innerText = 'Share'
+        btn.style = style
+
+        btn.addEventListener('click', () => {
+          if (window._mixlab_share_to_weibo)
+            window.open(window._mixlab_share_to_weibo)
+        })
+
+        document.body.appendChild(widget.div)
+        widget.div.appendChild(btn)
+
+        this.addCustomWidget(widget)
+
+        const onRemoved = this.onRemoved
+        this.onRemoved = () => {
+          widget.div.remove()
+          return onRemoved?.()
+        }
+
+        this.serialize_widgets = true //需要保存参数
+      }
+
+      const onExecuted = nodeType.prototype.onExecuted
+      nodeType.prototype.onExecuted = async function (message) {
+        onExecuted?.apply(this, arguments)
+        // console.log(this.widgets)
+
+        window._mixlab_share_to_weibo = message.url
+        try {
+          const div = this.widgets.filter(w => w.div)[0].div
+          Array.from(
+            div.querySelectorAll('button'),
+            b => (b.style.background = 'yellow')
+          )
+        } catch (error) {}
+      }
+    }
+  }
+})

web/javascript/ui_mixlab.js

@@ -633,7 +633,7 @@ app.registerExtension({
             }
 
             clipboardAction(() => {
-              let name = group.title+' ♾️Mixlab'
+              let name = group.title + ' ♾️Mixlab'
               let nodes = group._nodes
 
               app.canvas.copyToClipboard(nodes)
@@ -675,7 +675,7 @@ app.registerExtension({
       const options = orig.apply(this, arguments)
 
       options.push(null, {
-        content: `Find ♾️Mixlab`,
+        content: `Nodes Map ♾️Mixlab`,
         disabled: false, // or a function determining whether to disable
         callback: async () => {
           nodesMap =
@@ -709,12 +709,13 @@ app.registerExtension({
             justify-content: space-between;
             align-items: center;
             padding: 0 12px;
-            height: 32px;`
+            height: 44px;`
           let btnB = document.createElement('button')
           let textB = document.createElement('p')
           btn.appendChild(textB)
           btn.appendChild(btnB)
-          textB.innerText = `Find The Node`
+          textB.style.fontSize='12px';
+          textB.innerText = `Locate and navigate nodes ♾️Mixlab`
 
           btnB.style = `float: right; border: none; color: var(--input-text);
             background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
@@ -753,6 +754,42 @@ app.registerExtension({
           const updateNodes = (ns, nd) => {
             for (let nodeId in ns) {
               let n = ns[nodeId].class_type
+              if (nodesMap[n]) {
+                const { url, title } = nodesMap[n]
+                let d = document.createElement('button')
+                d.style = `text-align: left;margin:6px;color: var(--input-text);
+                  background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
+                d.addEventListener('click', () => {
+                  const node = app.graph.getNodeById(nodeId)
+                  if (!node) return
+                  app.canvas.centerOnNode(node)
+                  app.canvas.setZoom(1)
+                })
+                d.addEventListener('mouseover', async () => {
+                  // console.log('mouseover')
+                  let n = (await app.graphToPrompt()).output
+                  if (!deepEqual(n, ns)) {
+                    nd.innerHTML = ''
+                    updateNodes(n, nd)
+                  }
+                })
+
+                d.innerHTML = `
+                  <span>${'#' + nodeId} ${n}</span>
+                  <a href="${url}" target="_blank" style="text-decoration: none;">🔗</a>
+                  `
+                d.title = title
+
+                nd.appendChild(d)
+              }
+            }
+          }
+
+          let nodesDivv = document.createElement('div')
+
+          for (let nodeId in nodes) {
+            let n = nodes[nodeId].class_type
+            if (nodesMap[n]) {
               const { url, title } = nodesMap[n]
               let d = document.createElement('button')
               d.style = `text-align: left;margin:6px;color: var(--input-text);
@@ -764,11 +801,11 @@ app.registerExtension({
                 app.canvas.setZoom(1)
               })
               d.addEventListener('mouseover', async () => {
-                // console.log('mouseover')
+                console.log('mouseover')
                 let n = (await app.graphToPrompt()).output
-                if (!deepEqual(n, ns)) {
-                  nd.innerHTML = ''
-                  updateNodes(n, nd)
+                if (!deepEqual(n, nodes)) {
+                  nodesDivv.innerHTML = ''
+                  updateNodes(n, nodesDivv)
                 }
               })
 
@@ -778,42 +815,10 @@ app.registerExtension({
                 `
               d.title = title
 
-              nd.appendChild(d)
+              nodesDiv.appendChild(d)
             }
           }
 
-          let nodesDivv = document.createElement('div')
-
-          for (let nodeId in nodes) {
-            let n = nodes[nodeId].class_type
-            const { url, title } = nodesMap[n]
-            let d = document.createElement('button')
-            d.style = `text-align: left;margin:6px;color: var(--input-text);
-              background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
-            d.addEventListener('click', () => {
-              const node = app.graph.getNodeById(nodeId)
-              if (!node) return
-              app.canvas.centerOnNode(node)
-              app.canvas.setZoom(1)
-            })
-            d.addEventListener('mouseover', async () => {
-              console.log('mouseover')
-              let n = (await app.graphToPrompt()).output
-              if (!deepEqual(n, nodes)) {
-                nodesDivv.innerHTML = ''
-                updateNodes(n, nodesDivv)
-              }
-            })
-
-            d.innerHTML = `
-              <span>${'#' + nodeId} ${n}</span>
-              <a href="${url}" target="_blank" style="text-decoration: none;">🔗</a>
-              `
-            d.title = title
-
-            nodesDiv.appendChild(d)
-          }
-
           nodesDivv.appendChild(nodesDiv)
           nodesDivv.style = `overflow: scroll;
             height: 70vh;width: 100%;`
@@ -824,6 +829,14 @@ app.registerExtension({
             document.body.appendChild(div)
         }
       })
+
+      // options.push({
+      //   content: `Save For App ♾️Mixlab`,
+      //   disabled: false, // or a function determining whether to disable
+      //   callback: async () => {
+
+      //   }
+      // })
       return options
     }
   }

workflow/workflow.md

@@ -1,2 +0,0 @@
-![workflow](./assets/City_Snapshot_00005_.png)
-![workflow](./assets/挖掘机_00076_1.png)