v0.5.2

The bug of missing texture mapping for 3D nodes has been fixed.

README.md

@@ -1,8 +1,20 @@
 ## 
-v0.4.0 🚀🚗🚚🏃‍
-- Add "help" option to the context menu for each node.
-- Add "find the node" option to the global context menu.
-- Optimize the 3D Image node and add workflow.
+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)
+
+
+- 为MergeLayers添加了视频合成功能。
+- NewLayer节点增加了视觉选择支持。
+- 添加了NoiseImage节点和ResizeImage节点。
+- 支持带有换行的文本图像。
+- 对3D节点进行了优化，支持导出纹理以进行修改。
+- [添加了DynamicDelayByText功能，可以根据输入文本的长度进行延迟执行。](./workflow/audio-chatgpt-workflow.json)
+
 
 ### 3D
 ![](./assets/3dimage.png)
@@ -51,6 +63,11 @@ https://github.com/shadowcz007/comfyui-mixlab-nodes/assets/12645064/e7e77f90-e43
 
 ![poster](./assets/poster-workflow.svg)
 
+## 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.
+
+
+
 ## Other Nodes
 
 ![main](./assets/all-workflow.svg)

__init__.py

@@ -318,19 +318,20 @@ PromptServer.add_routes=new_add_routes
 
 # 导入节点
 from .nodes.PromptNode import RandomPrompt
-from .nodes.ImageNode import TransparentImage,LoadImagesFromPath,ResizeImage,TextImage,SvgImage,Image3D,EmptyLayer,ShowLayer,NewLayer,MergeLayers,AreaToMask,SmoothMask,FeatheredMask,SplitLongMask,ImageCropByAlpha,EnhanceImage,FaceToMask
+from .nodes.ImageNode import NoiseImage,TransparentImage,LoadImagesFromPath,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
+from .nodes.Utils import ColorInput,FontInput,TextToNumber,DynamicDelayProcessor
 
 
 # 要导出的所有节点及其名称的字典
 # 注意：名称应全局唯一
 NODE_CLASS_MAPPINGS = {
     "RandomPrompt":RandomPrompt,
+    "NoiseImage":NoiseImage,
     "TransparentImage":TransparentImage,
     "ResizeImageMixlab":ResizeImage,
     "LoadImagesFromPath":LoadImagesFromPath,
@@ -360,7 +361,8 @@ NODE_CLASS_MAPPINGS = {
     "SpeechSynthesis":SpeechSynthesis,
     "Color":ColorInput,
     "Font":FontInput,
-    "TextToNumber":TextToNumber
+    "TextToNumber":TextToNumber,
+    "DynamicDelayProcessor":DynamicDelayProcessor
     # "GamePal":GamePal
 }
 
@@ -379,6 +381,8 @@ NODE_DISPLAY_NAME_MAPPINGS = {
     "SpeechSynthesis":"SpeechSynthesis ♾️Mixlab",
     "SpeechRecognition":"SpeechRecognition ♾️Mixlab",
     "3DImage":"3DImage ♾️Mixlab",
+    "DynamicDelayProcessor":"DynamicDelayByText ♾️Mixlab"
+
     # "GamePal":"GamePal ♾️Mixlab"
 }
 

nodes/ImageNode.py

@@ -2,7 +2,7 @@ import numpy as np
 import torch
 from PIL import Image, ImageOps,ImageFilter,ImageEnhance,ImageDraw,ImageSequence, ImageFont
 from PIL.PngImagePlugin import PngInfo
-import base64,os
+import base64,os,random
 from io import BytesIO
 import folder_paths
 import json,io
@@ -235,7 +235,30 @@ def get_images_filepath(f,white_bg=False):
 
     return images
 
+# 创建噪声图像
+def create_noisy_image(width, height, mode="RGB", noise_level=128):
+    # 创建空白图像
+    image = Image.new(mode, (width, height))
 
+    # 遍历每个像素，并随机设置像素值
+    pixels = image.load()
+    for i in range(width):
+        for j in range(height):
+            # 随机生成噪声值
+            noise_r = random.randint(-noise_level, noise_level)
+            noise_g = random.randint(-noise_level, noise_level)
+            noise_b = random.randint(-noise_level, noise_level)
+
+            # 像素值加上噪声值，并限制在0-255的范围内
+            r = max(0, min(pixels[i, j][0] + noise_r, 255))
+            g = max(0, min(pixels[i, j][1] + noise_g, 255))
+            b = max(0, min(pixels[i, j][2] + noise_b, 255))
+
+            # 设置像素值
+            pixels[i, j] = (r, g, b)
+
+    image=image.convert(mode)
+    return image
 
 
 # 对轮廓进行平滑
@@ -458,7 +481,7 @@ def generate_text_image(text, font_path, font_size, text_color, vertical=True, s
                 y += font_size + spacing
             x += font_size + spacing
             y = 0
-        print(char_coordinates)
+        # print(char_coordinates)
     else:
         x = 0
         y = 0
@@ -972,7 +995,7 @@ class TextImage:
 
     def run(self,text,font_path,font_size,spacing,text_color,vertical):
         
-        text_list=list(text)
+        # text_list=list(text)
 
         img,mask=generate_text_image(text,font_path,font_size,text_color,vertical,spacing)
         
@@ -1037,16 +1060,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 upload['bg_image']:
+        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)
@@ -1054,8 +1083,7 @@ class Image3D:
 
         mask=pil2tensor(mask)
         image=pil2tensor(image)
-        mat=pil2tensor(mat)
-
+        
         m=[]
         if not material is None:
             m=create_temp_file(material[0])
@@ -1359,8 +1387,9 @@ class MergeLayers:
     def INPUT_TYPES(s):
         return {"required": { 
             "layers": ("LAYER",),
-            "image": ("IMAGE",),
+            "images": ("IMAGE",),
                              },
+
                 }
     
     RETURN_TYPES = ("IMAGE",)
@@ -1373,59 +1402,148 @@ class MergeLayers:
     INPUT_IS_LIST = True
     # OUTPUT_IS_LIST = (False,)
 
-    def run(self,layers,image):
-        # print(len(layers),len(image))
-        bg_image=image[0]
-        bg_image=tensor2pil(bg_image)
-        # 按z-index排序
-        layers_new = sorted(layers, key=lambda x: x["z_index"])
-     
-        for layer in layers_new:
-            image=layer['image']
-            mask=layer['mask']
-            if 'type' in layer and layer['type']=='base64' and type(image) == str:
-                im=base64_to_image(image)
-                im=im.convert('RGB')
-                image=pil2tensor(im)
+    def run(self,layers,images):
 
-                mask=base64_to_image(mask)
-                mask=mask.convert('L')
+        bg_images=[]
+        masks=[]
+ 
+        # print(len(images),images[0].shape)
+        # 1  torch.Size([2, 512, 512, 3])
+        # 4  torch.Size([1, 1024, 768, 3])
+
+        for img in images:
+
+            for bg_image in img:
+                # bg_image=image[0]
+                bg_image=tensor2pil(bg_image)
+                # 按z-index排序
+                layers_new = sorted(layers, key=lambda x: x["z_index"])
+            
+                for layer in layers_new:
+                    image=layer['image']
+                    mask=layer['mask']
+                    if 'type' in layer and layer['type']=='base64' and type(image) == str:
+                        im=base64_to_image(image)
+                        im=im.convert('RGB')
+                        image=pil2tensor(im)
+
+                        mask=base64_to_image(mask)
+                        mask=mask.convert('L')
+                        mask=pil2tensor(mask)
+                    
+                    
+                    layer_image=tensor2pil(image)
+                    layer_mask=tensor2pil(mask)
+                    bg_image=merge_images(bg_image,
+                                        layer_image,
+                                        layer_mask,
+                                        layer['x'],
+                                        layer['y'],
+                                        layer['width'],
+                                        layer['height'],
+                                        layer['scale_option']
+                                        )
+                    
+                mask=bg_image.convert('RGBA')
                 mask=pil2tensor(mask)
-            
-            
-            layer_image=tensor2pil(image)
-            layer_mask=tensor2pil(mask)
-            bg_image=merge_images(bg_image,
-                                  layer_image,
-                                  layer_mask,
-                                  layer['x'],
-                                  layer['y'],
-                                  layer['width'],
-                                  layer['height'],
-                                  layer['scale_option']
-                                  )
-            
-        mask=bg_image.convert('RGBA')
-        mask=pil2tensor(mask)
-        
-        bg_image=bg_image.convert('RGB')
-        bg_image=pil2tensor(bg_image)
+                
+                bg_image=bg_image.convert('RGB')
+                bg_image=pil2tensor(bg_image)
 
-        channels = ["red", "green", "blue", "alpha"]
-        # print(mask,mask.shape)
-        mask = mask[:, :, :, channels.index("green")]
+                channels = ["red", "green", "blue", "alpha"]
+                # print(mask,mask.shape)
+                mask = mask[:, :, :, channels.index("green")]
+
+                bg_images.append(bg_image)
+                masks.append(mask)
         
-        return (bg_image,mask,)
+        bg_images=torch.cat(bg_images, dim=0)
+        masks=torch.cat(masks, dim=0)
+        return (bg_images,masks,)
     
 
 
+class NoiseImage:
+    @classmethod
+    def INPUT_TYPES(s):
+        return {"required": {
+                "width": ("INT",{
+                    "default": 512, 
+                    "min": 1, # 最小值
+                    "max": 8192, # 最大值
+                    "step": 1, # 间隔
+                    "display": "number" # 控件类型： 输入框 number、滑块 slider
+                }),
+                "height": ("INT",{
+                    "default": 512, 
+                    "min": 1,
+                    "max": 8192,
+                    "step": 1,
+                    "display": "number"
+                }),
+                "noise_level": ("INT",{
+                    "default": 128, 
+                    "min": 0,
+                    "max": 8192,
+                    "step": 1,
+                    "display": "slider"
+                }),
+
+                },
+                }
+    
+    # 输出的数据类型
+    RETURN_TYPES = ("IMAGE",)
+
+    # 运行时方法名称
+    FUNCTION = "run"
+
+    # 右键菜单目录
+    CATEGORY = "♾️Mixlab/image"
+
+    # 输入是否为列表
+    INPUT_IS_LIST = False
+
+    # 输出是否为列表
+    OUTPUT_IS_LIST = (False,)
+
+    def run(self,width,height,noise_level):
+        # 创建噪声图像
+        im=create_noisy_image(width,height,"RGB",noise_level)
+        
+        #获取临时目录：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)
+        # 保存图片
+        im.save(image_path,compress_level=6)
+
+        # 把PIL数据类型转为tensor
+        im=pil2tensor(im)
+
+        # 定义ui字段，数据将回传到web前端的 nodeType.prototype.onExecuted
+        # result是节点的输出
+        return {"ui":{"images": [{
+                "filename": image_file,
+                "subfolder": subfolder,
+                "type":"temp"
+            }]},"result": (im,)}
+
 
 class ResizeImage:
     @classmethod
     def INPUT_TYPES(s):
         return {"required": {
-            "image": ("IMAGE",),
-
             "width": ("INT",{
                     "default": 512, 
                     "min": 1, #Minimum value
@@ -1443,6 +1561,10 @@ class ResizeImage:
                 "scale_option": (["width","height",'overall'],),
 
                              },
+
+            "optional":{
+                    "image": ("IMAGE",),
+            }
                 }
     
     RETURN_TYPES = ("IMAGE",)
@@ -1454,16 +1576,20 @@ class ResizeImage:
     INPUT_IS_LIST = True
     OUTPUT_IS_LIST = (False,)
 
-    def run(self,image,width,height,scale_option):
+    def run(self,width,height,scale_option,image=None):
         
         w=width[0]
         h=height[0]
         scale_option=scale_option[0]
-        im=image[0]
 
-        im=tensor2pil(im)
-        im=resize_image(im,scale_option,w,h)
-        im=im.convert('RGB')
+        if image==None:
+            im=create_noisy_image(w,h,"RGB")
+        else:
+            im=image[0]
+            im=tensor2pil(im)
+            im=resize_image(im,scale_option,w,h)
+            im=im.convert('RGB')
+
         im=pil2tensor(im)
         
         return (im,)

nodes/Utils.py

@@ -114,8 +114,99 @@ class TextToNumber:
         result=0
         for n in numbers:
             result = int(n)
-            print(result)
+            # print(result)
         
         if random_number=='enable' and result>0:
             result= random.randint(1, 10000000000)
-        return {"ui": {"text": [text],"num":[result]}, "result": (result,)}
+        return {"ui": {"text": [text],"num":[result]}, "result": (result,)}
+    
+# 接收一个值，然后根据字符串或数值长度计算延迟时间，用户可以自定义延迟"字/s"，延迟之后将转化
+
+import comfy.samplers
+import folder_paths
+ 
+# import time
+
+
+class AnyType(str):
+  """A special class that is always equal in not equal comparisons. Credit to pythongosssss"""
+
+  def __ne__(self, __value: object) -> bool:
+    return False
+
+any_type = AnyType("*")
+import time
+
+class DynamicDelayProcessor:
+
+    @classmethod
+    def INPUT_TYPES(cls):
+        print("print INPUT_TYPES",cls)
+        return {
+            "required":{
+                    "delay_seconds":("INT",{
+                    "default":1,
+                    "min": 0,
+                    "max": 1000000,
+                    }),
+            },
+            "optional":{
+                "any_input":(any_type,),
+                "delay_by_text":("STRING",{"multiline":True,}),
+                "words_per_seconds":("FLOAT",{ "default":1.50,"min": 0.0,"max": 1000.00,"display":"Chars per second?"}),
+                "replace_output": (["disable","enable"],),
+                "replace_value":("INT",{ "default":-1,"min": 0,"max": 1000000,"display":"Replacement value"})
+                }
+            }
+  
+    @classmethod
+    def calculate_words_length(cls,text):
+        chinese_char_pattern = re.compile(r'[\u4e00-\u9fff]')
+        english_word_pattern = re.compile(r'\b[a-zA-Z]+\b')
+        number_pattern = re.compile(r'\b[0-9]+\b')
+
+        words_length = 0
+        for segment in text.split():
+            if chinese_char_pattern.search(segment):
+                # 中文字符，每个字符计为 1
+                words_length += len(segment)
+            elif number_pattern.match(segment):
+                # 数字，每个字符计为 1
+                words_length += len(segment)
+            elif english_word_pattern.match(segment):
+                # 英文单词，整个单词计为 1
+                words_length += 1
+
+        return words_length
+
+
+
+    FUNCTION = "run"
+    RETURN_TYPES = (any_type,)
+    RETURN_NAMES = ('output',)
+
+    CATEGORY = "♾️Mixlab/utils"
+    def run(self,any_input,delay_seconds,delay_by_text,words_per_seconds,replace_output,replace_value):
+        # print(f"Delay text:",delay_by_text )
+        # 获取开始时间戳
+        start_time = time.time()
+
+        # 计算延迟时间
+        delay_time = delay_seconds
+        if delay_by_text and isinstance(delay_by_text, str) and words_per_seconds > 0:
+            words_length = self.calculate_words_length(delay_by_text)
+            print(f"Delay text: {delay_by_text}, Length: {words_length}")
+            delay_time += words_length / words_per_seconds
+            
+        # 延迟执行
+        print(f"延迟执行: {delay_time}")
+        time.sleep(delay_time)
+
+        # 获取结束时间戳并计算间隔
+        end_time = time.time()
+        elapsed_time = end_time - start_time
+        print(f"实际延迟时间: {elapsed_time} 秒")        
+
+        # 根据 replace_output 决定输出值
+        return (max(0, replace_value),) if replace_output == "enable" else (any_input,)
+        

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

@@ -68,7 +68,7 @@ function speakText (text) {
 // speakText('Hello, how are you?');
 //                      #MixCopilot
 
-const start = (element, id, startBtn) => {
+const start = (element, id, startBtn, node) => {
   startBtn.className = 'loading_mixlab'
 
   window.recognition = new webkitSpeechRecognition()
@@ -99,7 +99,18 @@ const start = (element, id, startBtn) => {
 
     timeoutId = setTimeout(function () {
       console.log('结果传递：：', result)
-      app.queuePrompt(0, 1)
+
+      // 把数据发送到chatgpt的输入prompt里
+      try {
+        const sendToId = node.widgets.filter(
+          w => w.name === 'Send to ChatGPT #'
+        )[0].value
+        app.graph
+          .getNodeById(sendToId)
+          .widgets.filter(w => w.name === 'prompt')[0].value = result
+      } catch (error) {}
+
+      setTimeout(() => app.queuePrompt(0, 1), 100)
       window.recognition?.stop()
       window.recognition = null
       startBtn.className = ''
@@ -113,7 +124,7 @@ const start = (element, id, startBtn) => {
           !window.recognition &&
           window._mixlab_speech_synthesis_onend
         ) {
-          start(element, id, startBtn)
+          start(element, id, startBtn, node)
           startBtn.innerText = 'STOP'
           if (intervalId) {
             clearInterval(intervalId)
@@ -170,13 +181,21 @@ app.registerExtension({
       nodeType.prototype.onNodeCreated = function () {
         orig_nodeCreated?.apply(this, arguments)
 
+        const sendTo = ComfyWidgets.INT(
+          this,
+          'Send to ChatGPT #',
+          ['INT', { default: 0 }],
+          app
+        )
+        // console.log('sendTo',sendTo)
+
         const widget = {
           type: 'div',
           name: 'chatgptdiv',
           draw (ctx, node, widget_width, y, widget_height) {
             Object.assign(
               this.div.style,
-              get_position_style(ctx, widget_width, 44, node.size[1])
+              get_position_style(ctx, widget_width, 78, node.size[1])
             )
           }
         }
@@ -188,7 +207,14 @@ app.registerExtension({
         const inputDiv = (key, placeholder) => {
           let div = document.createElement('div')
           const startBtn = document.createElement('button')
+
           const textArea = document.createElement('textarea')
+          textArea.placeholder = 'speak text'
+          // sendTo.type='range';
+          // sendTo.min=0;
+          // sendTo.max=2000;
+          // sendTo.step=1;
+          // sendTo.className='comfy-multiline-input'
 
           textArea.className = `${'comfy-multiline-input'} ${placeholder}`
 
@@ -211,6 +237,7 @@ app.registerExtension({
           startBtn.innerText = 'START'
 
           div.appendChild(startBtn)
+          // div.appendChild(sendTo);
           div.appendChild(textArea)
 
           startBtn.addEventListener('click', () => {
@@ -220,11 +247,15 @@ app.registerExtension({
               startBtn.innerText = 'START'
               startBtn.className = ''
             } else {
-              start(textArea, this.id, startBtn)
+              start(textArea, this.id, startBtn, this)
               startBtn.innerText = 'STOP'
             }
           })
 
+          // sendTo.addEventListener('change',()=>{
+          //   console.log(sendTo.value)
+          // })
+
           return div
         }
 
@@ -243,8 +274,6 @@ app.registerExtension({
         this.serialize_widgets = true //需要保存参数
       }
 
-      
-
       // const onGraphConfigured=nodeType.prototype.onGraphConfigured;
       // nodeType.prototype.onGraphConfigured = function (message) {
       //   onGraphConfigured?.apply(this, arguments)
@@ -254,15 +283,17 @@ app.registerExtension({
       const onExecuted = nodeType.prototype.onExecuted
       nodeType.prototype.onExecuted = function (message) {
         onExecuted?.apply(this, arguments)
-        
+        // console.log('this.widgets', this.widgets)
+
         try {
+          // 是否根据start by 开启
           let open = message.start_by[0] > 0
           if (open) {
             const div = this.widgets.filter(w => w.name == 'chatgptdiv')[0].div
             const startBtn = div.querySelector('button')
-            let textArea= div.querySelector('textarea')
+            let textArea = div.querySelector('textarea')
             if (open && !window.recognition) {
-              start(textArea, this.id, startBtn)
+              start(textArea, this.id, startBtn, this)
               startBtn.innerText = 'STOP'
             } else if (!open && window.recognition) {
               window.recognition.stop()
@@ -284,16 +315,16 @@ app.registerExtension({
       let div = node.widgets.filter(f => f.type === 'div')[0]
       if (div && data[node.id]) {
         div.div.querySelector('textarea').value = data[node.id]
-      };
+      }
 
       try {
         let open = node.widgets_values[1] > 0
         if (open) {
           const div = node.widgets.filter(w => w.name == 'chatgptdiv')[0].div
           const startBtn = div.querySelector('button')
-          let textArea= div.querySelector('textarea')
+          let textArea = div.querySelector('textarea')
           if (open && !window.recognition) {
-            start(textArea, node.id, startBtn)
+            start(textArea, node.id, startBtn, node)
             startBtn.innerText = 'STOP'
           } else if (!open && window.recognition) {
             window.recognition.stop()
@@ -305,7 +336,6 @@ app.registerExtension({
       } catch (error) {
         console.log('###SpeechRecognition', 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.4.2'
+const version = 'v0.5.2'
 
 fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
   .then(response => response.json())

web/javascript/gpt_mixlab.js

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

web/javascript/image_mixlab.js

@@ -193,6 +193,11 @@ const parseSvg = async svgContent => {
 
     svgWidth = viewBox.width
     svgHeight = viewBox.height
+  } else {
+    try {
+      svgWidth = ~~svgWidth.replace('px', '')
+      svgHeight = ~~svgHeight.replace('px', '')
+    } catch (error) {}
   }
 
   // 创建一个新的canvas元素
@@ -356,7 +361,7 @@ app.registerExtension({
               setLocalDataOfWin(key, dd)
               // console.log(this.id, ip.value.trim())
 
-              svgElement.style = `width: 90%;padding: 5%;`
+              svgElement.style = `width: 90%;padding: 5%;height: auto;`
               // 将提取的SVG元素显示在页面上
 
               svgContainer.innerHTML = ''
@@ -424,7 +429,7 @@ app.registerExtension({
       let svgStr = await dt.text()
 
       const { svgElement, data, image } = await parseSvg(svgStr)
-      svgElement.style = `width: 90%;padding: 5%;`
+      svgElement.style = `width: 90%;padding: 5%;height:auto`
       // 将提取的SVG元素显示在页面上
 
       widget.div.querySelector('.preview').innerHTML = ''
@@ -432,7 +437,6 @@ app.registerExtension({
 
       const uploadWidget = node.widgets.filter(w => w.name == 'upload')[0]
       uploadWidget.value = await uploadWidget.serializeValue()
- 
     }
   }
-})
+})

web/javascript/main_mixlab.js

@@ -1800,11 +1800,15 @@ const updateUI = node => {
     pw.inputEl.title = `Total of ${prompts.length} prompts`
   } else {
     // 动态添加
+    console.log('ComfyWidgets',ComfyWidgets.STRING(
+      node,
+      'prompts',
+      ['STRING', { multiline: true }]
+    ))
     const w = ComfyWidgets.STRING(
       node,
       'prompts',
-      ['STRING', { multiline: true }],
-      app
+      ['STRING', { multiline: true }]
     ).widget
     w.inputEl.readOnly = true
     w.inputEl.style.opacity = 0.6

web/javascript/ui_mixlab.js

@@ -2,7 +2,12 @@ import { app } from '../../../scripts/app.js'
 import { api } from '../../../scripts/api.js'
 import { ComfyWidgets } from '../../../scripts/widgets.js'
 import { $el } from '../../../scripts/ui.js'
-import {closeIcon} from './svg_icons.js'
+import { closeIcon } from './svg_icons.js'
+
+import {
+  GroupNodeConfig,
+  GroupNodeHandler
+} from '../../../extensions/core/groupNode.js'
 
 function deepEqual (obj1, obj2) {
   if (typeof obj1 !== typeof obj2) {
@@ -43,16 +48,17 @@ async function get_nodes_map () {
   return await res.json()
 }
 
-function loadCSS(url) {
-  var link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.type = 'text/css';
-  link.href = url;
-  document.getElementsByTagName('head')[0].appendChild(link);
+function loadCSS (url) {
+  var link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.type = 'text/css'
+  link.href = url
+  document.getElementsByTagName('head')[0].appendChild(link)
 }
 
-var cssURL = 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown-light.min.css';
-loadCSS(cssURL);
+var cssURL =
+  'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown-light.min.css'
+loadCSS(cssURL)
 
 function injectCSS (css) {
   // 检查页面中是否已经存在具有相同内容的style标签
@@ -112,7 +118,7 @@ async function getCustomnodeMappings (mode = 'url') {
       nodes[node] = { url, title: n[1].title_aux }
     }
   }
-  
+
   // try {
   //   const response = await fetch(`${url}/customnode/getmappings?mode=${mode}`)
   //   const data = await response.json()
@@ -309,8 +315,7 @@ async function fetchReadmeContent (url) {
   }
 }
 
-function createModal (url, markdown,title) {
-  
+function createModal (url, markdown, title) {
   // Create modal element
   var div =
     document.querySelector('#mix-modal') || document.createElement('div')
@@ -329,7 +334,7 @@ function createModal (url, markdown,title) {
   var modal = document.createElement('div')
 
   div.appendChild(modal)
-  modal.classList.add("modal-body")
+  modal.classList.add('modal-body')
   // Set modal styles
   modal.style.cssText = `
     background: white;
@@ -348,17 +353,17 @@ function createModal (url, markdown,title) {
   var modalContent = document.createElement('div')
   modalContent.classList.add('modal-content')
   // Create modal header
-  const headerElement =  document.createElement('div')
+  const headerElement = document.createElement('div')
   headerElement.classList.add('modal-header')
   headerElement.style.cssText = `
     display: flex;
     padding: 20px 24px 8px 24px;
     justify-content: space-between;
   `
-  
+
   const headTitleElement = document.createElement('a')
   headTitleElement.classList.add('header-title')
-  headTitleElement.style.cssText=`
+  headTitleElement.style.cssText = `
     color: var(--descrip-text);
     font-size: 18px;
     display: flex;
@@ -368,22 +373,20 @@ function createModal (url, markdown,title) {
     text-decoration: none;
     font-weight: bold;
   `
-  headTitleElement.onmouseenter = function(){
+  headTitleElement.onmouseenter = function () {
     headTitleElement.style.color = 'var(--comfy-menu-bg)'
   }
-  headTitleElement.onmouseleave = function(){
+  headTitleElement.onmouseleave = function () {
     headTitleElement.style.color = 'var(--descrip-text)'
   }
-  headTitleElement.textContent= title ||'';
+  headTitleElement.textContent = title || ''
   headTitleElement.href = url
-  headTitleElement.target='_blank'
+  headTitleElement.target = '_blank'
   const linkIcon = document.createElement('small')
   linkIcon.textContent = '🔗'
-  headTitleElement.appendChild(linkIcon);
+  headTitleElement.appendChild(linkIcon)
   headerElement.appendChild(headTitleElement)
 
-  
-
   // Create close button
   const closeButton = document.createElement('span')
   closeButton.classList.add('close')
@@ -400,20 +403,19 @@ function createModal (url, markdown,title) {
       user-select: none;
       fill: var(--descrip-text);
       `
-  closeButton.onmouseenter = function(){
-    closeButton.style.fill = 'var(--comfy-menu-bg)'; 
+  closeButton.onmouseenter = function () {
+    closeButton.style.fill = 'var(--comfy-menu-bg)'
   }
-  closeButton.onmouseleave = function(){
-    closeButton.style.fill = 'var(--descrip-text)';
+  closeButton.onmouseleave = function () {
+    closeButton.style.fill = 'var(--descrip-text)'
   }
 
   headerElement.appendChild(closeButton)
 
-
   // Click event to close the modal
-  function closeMixModal(){
+  function closeMixModal () {
     div.style.display = 'none'
-    window.removeEventListener('keydown',MixModalEscKeyEvent)
+    window.removeEventListener('keydown', MixModalEscKeyEvent)
   }
   closeButton.onclick = function () {
     closeMixModal()
@@ -433,10 +435,10 @@ function createModal (url, markdown,title) {
 
   // Create element for displaying Markdown content
   var markdownContent = document.createElement('div')
-  markdownContent.classList.add('markdown-content','markdown-body')
+  markdownContent.classList.add('markdown-content', 'markdown-body')
   markdownContent.style.cssText = `max-width: 50vw;padding: 0px 24px 100px 24px;`
 
-  showdown.setFlavor('github');
+  showdown.setFlavor('github')
   var converter = new showdown.Converter()
 
   var html = converter.makeHtml(markdown)
@@ -468,7 +470,7 @@ function createModal (url, markdown,title) {
   modal.appendChild(modalContent)
 
   const footerElement = document.createElement('div')
-  footerElement.style.cssText=`
+  footerElement.style.cssText = `
       position: absolute;
       left: 0;
       right: 0;
@@ -478,37 +480,35 @@ function createModal (url, markdown,title) {
   `
 
   const footerText = document.createElement('a')
-  footerText.href ="https://github.com/shadowcz007/comfyui-mixlab-nodes"
-  footerText.innerText =  "Support by Mixlab"
-  footerText.style.cssText=`color:inherit`
-  footerText.target = "_blank"
-  footerText.onmouseenter=function(){
+  footerText.href = 'https://github.com/shadowcz007/comfyui-mixlab-nodes'
+  footerText.innerText = 'Support by Mixlab'
+  footerText.style.cssText = `color:inherit`
+  footerText.target = '_blank'
+  footerText.onmouseenter = function () {
     footerText.style.color = 'var(--input-text)'
   }
-  footerText.onmouseleave=function(){
+  footerText.onmouseleave = function () {
     footerText.style.color = 'inherit'
   }
-  
-  
-  footerText.onclick = function(e){
+
+  footerText.onclick = function (e) {
     e.stopPropagation()
   }
   footerElement.appendChild(footerText)
 
   div.appendChild(footerElement)
 
-
   // Append modal element to the page
   if (!document.querySelector('#mix-modal')) {
     document.body.appendChild(div)
   }
-  function MixModalEscKeyEvent(event){
-      if(event.key == "Escape"){
-        closeMixModal()
-      }
+  function MixModalEscKeyEvent (event) {
+    if (event.key == 'Escape') {
+      closeMixModal()
+    }
   }
-  window.removeEventListener('keydown',MixModalEscKeyEvent)
-  window.addEventListener('keydown',MixModalEscKeyEvent)
+  window.removeEventListener('keydown', MixModalEscKeyEvent)
+  window.addEventListener('keydown', MixModalEscKeyEvent)
 
   const bgElement = document.createElement('div')
   bgElement.classList.add('mix-modal-bg')
@@ -517,13 +517,11 @@ function createModal (url, markdown,title) {
     height:100%;
     background-color: rgba(0,0,0,0.8);
   `
-  bgElement.onclick =  function( ){   
+  bgElement.onclick = function () {
     closeMixModal()
   }
-  
+
   div.appendChild(bgElement)
-
-
 }
 
 app.registerExtension({
@@ -539,7 +537,7 @@ app.registerExtension({
       let repo = nodesMap[node.type]
       if (repo) {
         let markdown = await fetchReadmeContent(repo.url)
-        createModal(repo.url,markdown,repo.title)
+        createModal(repo.url, markdown, repo.title)
       }
     }
 
@@ -548,17 +546,7 @@ app.registerExtension({
       // replace it
       const options = getNodeMenuOptions.apply(this, arguments) // start by calling the stored one
       node.setDirtyCanvas(true, true) // force a redraw of (foreground, background)
-      // options.splice(
-      //   options.length - 1,
-      //   0, // splice a new option in at the end
-      //   {
-      //     content: '♾️Mixlab', // with a name
-      //     callback: () => {
-      //       LGraphCanvas.prototype.helpAboutNode(node)
-      //     } // and the callback
-      //   },
-      //   null // a divider
-      // )
+
       return [
         {
           content: 'Help ♾️Mixlab', // with a name
@@ -570,32 +558,140 @@ app.registerExtension({
         ...options
       ] // and return the options
     }
+
+    const getGroupMenuOptions = LGraphCanvas.prototype.getGroupMenuOptions // store the existing method
+    LGraphCanvas.prototype.getGroupMenuOptions = function (node) {
+      // replace it
+      const options = getGroupMenuOptions.apply(this, arguments) // start by calling the stored one
+      node.setDirtyCanvas(true, true) // force a redraw of (foreground, background)
+
+      // templete
+      const key = 'Comfy.NodeTemplates'
+      let templates = localStorage.getItem(key)
+      if (templates) {
+        templates = JSON.parse(templates)
+      } else {
+        templates = []
+      }
+      const store = () => localStorage.setItem(key, JSON.stringify(templates))
+
+      return [
+        {
+          content: 'Clone Group ♾️Mixlab', // with a name
+          callback: async (value, opts, e, menu, group) => {
+            const clipboardAction = async cb => {
+              // We use the clipboard functions but dont want to overwrite the current user clipboard
+              // Restore it after we've run our callback
+              const old = localStorage.getItem('litegrapheditor_clipboard')
+              await cb()
+              localStorage.setItem('litegrapheditor_clipboard', old)
+            }
+
+            clipboardAction(async () => {
+              let name = group.title
+              let nodes = group._nodes
+
+              app.canvas.copyToClipboard(nodes)
+              let data = localStorage.getItem('litegrapheditor_clipboard')
+              data = JSON.parse(data)
+
+              for (let i = 0; i < nodes.length; i++) {
+                const node = app.graph.getNodeById(nodes[i].id)
+                const nodeData = node.serialize()
+
+                let groupData = GroupNodeHandler.getGroupData(node)
+                if (groupData) {
+                  groupData = groupData.nodeData
+                  if (!data.groupNodes) {
+                    data.groupNodes = {}
+                  }
+                  data.groupNodes[nodeData.name] = groupData
+                  data.nodes[i].type = nodeData.name
+                }
+              }
+
+              await GroupNodeConfig.registerFromWorkflow(data.groupNodes, {})
+              localStorage.setItem(
+                'litegrapheditor_clipboard',
+                JSON.stringify(data)
+              )
+              app.canvas.pasteFromClipboard()
+            })
+          } // and the callback
+        },
+        {
+          content: 'Save Group as Template ♾️Mixlab', // with a name
+          callback: async (value, opts, e, menu, group) => {
+            // console.log(options)
+
+            const clipboardAction = async cb => {
+              // We use the clipboard functions but dont want to overwrite the current user clipboard
+              // Restore it after we've run our callback
+              const old = localStorage.getItem('litegrapheditor_clipboard')
+              await cb()
+              localStorage.setItem('litegrapheditor_clipboard', old)
+            }
+
+            clipboardAction(() => {
+              let name = group.title+' ♾️Mixlab'
+              let nodes = group._nodes
+
+              app.canvas.copyToClipboard(nodes)
+              let data = localStorage.getItem('litegrapheditor_clipboard')
+              data = JSON.parse(data)
+
+              for (let i = 0; i < nodes.length; i++) {
+                const node = app.graph.getNodeById(nodes[i].id)
+                const nodeData = node.serialize()
+
+                let groupData = GroupNodeHandler.getGroupData(node)
+                if (groupData) {
+                  groupData = groupData.nodeData
+                  if (!data.groupNodes) {
+                    data.groupNodes = {}
+                  }
+                  data.groupNodes[nodeData.name] = groupData
+                  data.nodes[i].type = nodeData.name
+                }
+              }
+
+              templates.push({
+                name,
+                data: JSON.stringify(data)
+              })
+              store()
+            })
+          } // and the callback
+        },
+        null,
+        ...options
+      ] // and return the options
+    }
   },
   async setup () {
+    // Add canvas menu options
+    const orig = LGraphCanvas.prototype.getCanvasMenuOptions
+    LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+      const options = orig.apply(this, arguments)
 
-    // Add canvas menu options 
-			const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
-			LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-				const options = orig.apply(this, arguments);
+      options.push(null, {
+        content: `Find ♾️Mixlab`,
+        disabled: false, // or a function determining whether to disable
+        callback: async () => {
+          nodesMap =
+            nodesMap && Object.keys(nodesMap).length > 0
+              ? nodesMap
+              : await getCustomnodeMappings('url')
 
-				options.push(null,  {
-          content: `Find ♾️Mixlab`,
-          disabled: false, // or a function determining whether to disable
-          callback: async () => {
-            nodesMap =
-              nodesMap && Object.keys(nodesMap).length > 0
-                ? nodesMap
-                : await getCustomnodeMappings('url')
-  
-            const nodesDiv = document.createDocumentFragment()
-            const nodes = (await app.graphToPrompt()).output
-  
-            // console.log('[Mixlab]', 'loaded graph node: ', app)
-            let div =
-              document.querySelector('#mixlab_find_the_node') ||
-              document.createElement('div')
-            div.id = 'mixlab_find_the_node'
-            div.style = `
+          const nodesDiv = document.createDocumentFragment()
+          const nodes = (await app.graphToPrompt()).output
+
+          // console.log('[Mixlab]', 'loaded graph node: ', app)
+          let div =
+            document.querySelector('#mixlab_find_the_node') ||
+            document.createElement('div')
+          div.id = 'mixlab_find_the_node'
+          div.style = `
               flex-direction: column;
               align-items: end;
               display:flex;position: absolute; 
@@ -604,96 +700,63 @@ app.registerExtension({
               background-color: var(--comfy-menu-bg);
               padding: 10px; 
               border: 1px solid black;z-index: 999999999;padding-top: 0;`
-  
-            div.innerHTML = ''
-  
-            let btn = document.createElement('div')
-            btn.style=`display: flex;
+
+          div.innerHTML = ''
+
+          let btn = document.createElement('div')
+          btn.style = `display: flex;
             width: calc(100% - 24px);
             justify-content: space-between;
             align-items: center;
             padding: 0 12px;
             height: 32px;`
-            let btnB = document.createElement('button')
-            let textB = document.createElement('p')
-            btn.appendChild(textB)
-            btn.appendChild(btnB)
-            textB.innerText = `Find The Node`
-  
-            btnB.style = `float: right; border: none; color: var(--input-text);
+          let btnB = document.createElement('button')
+          let textB = document.createElement('p')
+          btn.appendChild(textB)
+          btn.appendChild(btnB)
+          textB.innerText = `Find The Node`
+
+          btnB.style = `float: right; border: none; color: var(--input-text);
             background-color: var(--comfy-input-bg); border-color: var(--border-color);cursor: pointer;`
-            btnB.addEventListener('click', () => {
-              div.style.display = 'none'
-            })
-            btnB.innerText = 'X'
-  
-            // 悬浮框拖动事件
-            div.addEventListener('mousedown', function (e) {
-              var startX = e.clientX
-              var startY = e.clientY
-              var offsetX = div.offsetLeft
-              var offsetY = div.offsetTop
-  
-              function moveBox (e) {
-                var newX = e.clientX
-                var newY = e.clientY
-                var deltaX = newX - startX
-                var deltaY = newY - startY
-                div.style.left = offsetX + deltaX + 'px'
-                div.style.top = offsetY + deltaY + 'px'
-              }
-  
-              function stopMoving () {
-                document.removeEventListener('mousemove', moveBox)
-                document.removeEventListener('mouseup', stopMoving)
-              }
-  
-              document.addEventListener('mousemove', moveBox)
-              document.addEventListener('mouseup', stopMoving)
-            })
-  
-            div.appendChild(btn)
-  
-            const updateNodes = (ns, nd) => {
-              for (let nodeId in ns) {
-                let n = ns[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, 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)
-              }
+          btnB.addEventListener('click', () => {
+            div.style.display = 'none'
+          })
+          btnB.innerText = 'X'
+
+          // 悬浮框拖动事件
+          div.addEventListener('mousedown', function (e) {
+            var startX = e.clientX
+            var startY = e.clientY
+            var offsetX = div.offsetLeft
+            var offsetY = div.offsetTop
+
+            function moveBox (e) {
+              var newX = e.clientX
+              var newY = e.clientY
+              var deltaX = newX - startX
+              var deltaY = newY - startY
+              div.style.left = offsetX + deltaX + 'px'
+              div.style.top = offsetY + deltaY + 'px'
             }
-  
-            let nodesDivv = document.createElement('div')
-  
-            for (let nodeId in nodes) {
-              let n = nodes[nodeId].class_type
+
+            function stopMoving () {
+              document.removeEventListener('mousemove', moveBox)
+              document.removeEventListener('mouseup', stopMoving)
+            }
+
+            document.addEventListener('mousemove', moveBox)
+            document.addEventListener('mouseup', stopMoving)
+          })
+
+          div.appendChild(btn)
+
+          const updateNodes = (ns, nd) => {
+            for (let nodeId in ns) {
+              let n = ns[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;`
+                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
@@ -701,37 +764,67 @@ 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, nodes)) {
-                  nodesDivv.innerHTML = ''
-                  updateNodes(n, nodesDivv)
+                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
+            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%;`
-  
-            div.appendChild(nodesDivv)
-  
-            if (!document.querySelector('#mixlab_find_the_node'))
-              document.body.appendChild(div)
+            d.title = title
+
+            nodesDiv.appendChild(d)
           }
-        });
-				return options;
-			};
 
+          nodesDivv.appendChild(nodesDiv)
+          nodesDivv.style = `overflow: scroll;
+            height: 70vh;width: 100%;`
 
-    
+          div.appendChild(nodesDivv)
+
+          if (!document.querySelector('#mixlab_find_the_node'))
+            document.body.appendChild(div)
+        }
+      })
+      return options
+    }
   }
 })

workflow/audio-chatgpt-workflow.json

@@ -0,0 +1,314 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 16,
+  "nodes": [
+    {
+      "id": 9,
+      "type": "SpeechSynthesis",
+      "pos": [
+        40,
+        356
+      ],
+      "size": {
+        "0": 352.8227844238281,
+        "1": 95.3553237915039
+      },
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "text",
+          "type": "STRING",
+          "link": 12,
+          "widget": {
+            "name": "text"
+          }
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [
+            13,
+            16
+          ],
+          "shape": 6,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SpeechSynthesis"
+      },
+      "widgets_values": [
+        "作为一个人工智能助手，我没有性别，也无法进行社交互动。我的主要任务是为用户提供帮助和信息。请问有什么问题我可以为您解答吗？"
+      ]
+    },
+    {
+      "id": 8,
+      "type": "SpeechRecognition",
+      "pos": [
+        537,
+        321
+      ],
+      "size": {
+        "0": 228.5580291748047,
+        "1": 239.85951232910156
+      },
+      "flags": {},
+      "order": 3,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "start_by",
+          "type": "INT",
+          "link": 14,
+          "widget": {
+            "name": "start_by"
+          }
+        }
+      ],
+      "outputs": [
+        {
+          "name": "prompt",
+          "type": "STRING",
+          "links": [
+            15
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "SpeechRecognition"
+      },
+      "widgets_values": [
+        null,
+        1,
+        4,
+        null
+      ]
+    },
+    {
+      "id": 4,
+      "type": "ChatGPTOpenAI",
+      "pos": [
+        -403,
+        14
+      ],
+      "size": {
+        "0": 400,
+        "1": 358
+      },
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "outputs": [
+        {
+          "name": "text",
+          "type": "STRING",
+          "links": [
+            12
+          ],
+          "shape": 3,
+          "slot_index": 0
+        },
+        {
+          "name": "messages",
+          "type": "STRING",
+          "links": null,
+          "shape": 3
+        },
+        {
+          "name": "session_history",
+          "type": "STRING",
+          "links": null,
+          "shape": 3
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ChatGPTOpenAI"
+      },
+      "widgets_values": [
+        null,
+        null,
+        "跟你一样泡妞",
+        "You are ChatGPT, a large language model trained by OpenAI. Answer as concisely as possible.",
+        "gpt-3.5-turbo",
+        354,
+        "randomize",
+        1,
+        null
+      ]
+    },
+    {
+      "id": 10,
+      "type": "ShowTextForGPT",
+      "pos": [
+        867,
+        349
+      ],
+      "size": {
+        "0": 315,
+        "1": 76.00000762939453
+      },
+      "flags": {},
+      "order": 4,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "text",
+          "type": "STRING",
+          "link": 15,
+          "widget": {
+            "name": "text"
+          }
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": null,
+          "shape": 6
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "ShowTextForGPT"
+      },
+      "widgets_values": [
+        "纽斯"
+      ]
+    },
+    {
+      "id": 5,
+      "type": "DynamicDelayProcessor",
+      "pos": [
+        496,
+        4
+      ],
+      "size": {
+        "0": 400,
+        "1": 200
+      },
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "any_input",
+          "type": "*",
+          "link": 13
+        },
+        {
+          "name": "delay_by_text",
+          "type": "STRING",
+          "link": 16,
+          "widget": {
+            "name": "delay_by_text"
+          }
+        }
+      ],
+      "outputs": [
+        {
+          "name": "output",
+          "type": "*",
+          "links": [
+            14
+          ],
+          "shape": 3,
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DynamicDelayProcessor"
+      },
+      "widgets_values": [
+        1,
+        "",
+        2.5,
+        "enable",
+        1
+      ]
+    }
+  ],
+  "links": [
+    [
+      4,
+      2,
+      0,
+      5,
+      0,
+      "*"
+    ],
+    [
+      7,
+      4,
+      0,
+      6,
+      0,
+      "STRING"
+    ],
+    [
+      8,
+      6,
+      0,
+      5,
+      1,
+      "STRING"
+    ],
+    [
+      9,
+      5,
+      0,
+      7,
+      0,
+      "INT"
+    ],
+    [
+      12,
+      4,
+      0,
+      9,
+      0,
+      "STRING"
+    ],
+    [
+      13,
+      9,
+      0,
+      5,
+      0,
+      "*"
+    ],
+    [
+      14,
+      5,
+      0,
+      8,
+      0,
+      "INT"
+    ],
+    [
+      15,
+      8,
+      0,
+      10,
+      0,
+      "STRING"
+    ],
+    [
+      16,
+      9,
+      0,
+      5,
+      1,
+      "STRING"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}