新ui支持，适配后，暂未全面测试

README.md

@@ -1,7 +1,5 @@
 ![](https://img.shields.io/github/release/shadowcz007/comfyui-mixlab-nodes)
 
-![alt text](./assets/69feadc0e52f99b420cee0201660c4e.png)
-
 > 适配了最新版 comfyui 的 py3.11 ，torch 2.3.1+cu121
 > [Mixlab nodes discord](https://discord.gg/cXs9vZSqeK)
 

__init__.py

@@ -587,14 +587,39 @@ async def mixlab_hander(request):
 
 @routes.get('/mixlab/app')
 async def mixlab_app_handler(request):
-    html_file = os.path.join(current_path, "web/index.html")
+    html_file = os.path.join(current_path, "webApp/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)
+
+# web app模式独立
+@routes.get('/mixlab/app/{filename:.*}')
+async def static_file_handler(request):
+    filename = request.match_info['filename']
+    file_path = os.path.join(current_path, "webApp", filename)
+    print(file_path)
 
+    if os.path.exists(file_path) and os.path.isfile(file_path):
+        if filename.endswith('.js'):
+            content_type = 'application/javascript'
+        elif filename.endswith('.css'):
+            content_type = 'text/css'
+        elif filename.endswith('.html'):
+            content_type = 'text/html'
+        elif filename.endswith('.svg'):
+            content_type = 'image/svg+xml'
+        else:
+            content_type = 'application/octet-stream'
+
+        with open(file_path, 'r', encoding='utf-8', errors='ignore') as f:
+            file_data = f.read()
+            return web.Response(text=file_data, content_type=content_type)
+    else:
+        return web.Response(text="File not found", status=404)
+
 
 @routes.post('/mixlab/workflow')
 async def mixlab_workflow_hander(request):

web/javascript/3d_mixlab.js

@@ -2,6 +2,36 @@ import { app } from '../../../scripts/app.js'
 import { api } from '../../../scripts/api.js'
 import { $el } from '../../../scripts/ui.js'
 
+let isScriptLoaded = {}
+function loadExternalScript(url,type) {
+  return new Promise((resolve, reject) => {
+    if (isScriptLoaded[url]) {
+      resolve();
+      return;
+    }
+
+    const existingScript = document.querySelector(`script[src="${url}"]`);
+    if (existingScript) {
+      existingScript.onload = () => {
+        isScriptLoaded[url] = true;
+        resolve();
+      };
+      existingScript.onerror = reject;
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = url;
+    script.type = type;  // Add this line to load the script as an ES module
+    script.onload = () => {
+      isScriptLoaded[url] = true;
+      resolve();
+    };
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
 const getLocalData = key => {
   let data = {}
   try {
@@ -99,7 +129,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',
@@ -266,6 +299,12 @@ app.registerExtension({
     if (nodeType.comfyClass == '3DImage') {
       const orig_nodeCreated = nodeType.prototype.onNodeCreated
       nodeType.prototype.onNodeCreated = async function () {
+
+        await loadExternalScript(
+          '/mixlab/app/lib/model-viewer.min.js',
+          'module'
+        )
+
         orig_nodeCreated?.apply(this, arguments)
 
         const uploadWidget = this.widgets.filter(w => w.name == 'upload')[0]

web/javascript/app_mixlab.js

@@ -61,7 +61,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+      document.querySelector('.comfy-menu').style.display === 'none'
+        ? `60px`
+        : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',
@@ -257,9 +260,9 @@ async function extractInputAndOutputData (
         node.type === 'KSampler' ||
         node.type == 'SamplerCustom' ||
         node.type === 'ChinesePrompt_Mix' ||
-        node.type === 'Seed_'||
-        node.type==='SiliconflowLLM'||
-        node.type==='ChatGPTOpenAI'
+        node.type === 'Seed_' ||
+        node.type === 'SiliconflowLLM' ||
+        node.type === 'ChatGPTOpenAI'
       ) {
         // seed 的类型收集
         try {
@@ -473,15 +476,15 @@ app.registerExtension({
           type: 'div',
           name: 'AppInfoRun',
           draw (ctx, node, widget_width, y, widget_height) {
-            Object.assign(
-              this.div.style,
-              {...get_position_style(
+            Object.assign(this.div.style, {
+              ...get_position_style(
                 ctx,
                 widget_width,
                 node.size[1] - widget_height,
                 node.size[1]
-              ),zIndex:1}
-            )
+              ),
+              zIndex: 1
+            })
           }
         }
 
@@ -711,7 +714,6 @@ app.registerExtension({
         this.serialize_widgets = true //需要保存参数
 
         window._mixlab_app_json = null
-
       }
 
       const onExecuted = nodeType.prototype.onExecuted

web/javascript/audio_mixlab.js

@@ -19,7 +19,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',

web/javascript/image_mixlab.js

@@ -104,7 +104,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',
@@ -884,7 +887,7 @@ app.registerExtension({
   init () {
     $el('link', {
       rel: 'stylesheet',
-      href: '/extensions/comfyui-mixlab-nodes/lib/juxtapose.css',
+      href: '/mixlab/app/lib/juxtapose.css',
       parent: document.head
     })
 

web/javascript/layer_mixlab.js

@@ -81,7 +81,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',

web/javascript/main_mixlab.js

@@ -477,7 +477,10 @@ function get_position_style (ctx, widget_width, y, node_height, top) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `${top}px`,
     cursor: 'pointer',
     position: 'absolute',

web/javascript/p5.js

@@ -53,7 +53,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',
@@ -179,7 +182,7 @@ const p5InputNode = {
 
         let nodeId = node.id
         //延迟才能获得this.id
-        widget.div.innerHTML = `<iframe src="extensions/comfyui-mixlab-nodes/p5_export/p5.html?id=${nodeId}" 
+        widget.div.innerHTML = `<iframe src="mixlab/app/p5_export/p5.html?id=${nodeId}" 
           style="border:0;width:100%;height:100%;"
          ></iframe>`
 

web/javascript/prompt_mixlab.js

@@ -3,7 +3,7 @@ import { api } from '../../../scripts/api.js'
 import { ComfyWidgets } from '../../../scripts/widgets.js'
 import { $el } from '../../../scripts/ui.js'
 
-import PhotoSwipeLightbox from '/extensions/comfyui-mixlab-nodes/lib/photoswipe-lightbox.esm.min.js'
+import PhotoSwipeLightbox from '/mixlab/app/lib/photoswipe-lightbox.esm.min.js'
 function loadCSS (url) {
   var link = document.createElement('link')
   link.rel = 'stylesheet'
@@ -40,14 +40,14 @@ function loadCSS (url) {
   // Append the style element to the document head
   document.head.appendChild(style)
 }
-loadCSS('/extensions/comfyui-mixlab-nodes/lib/photoswipe.min.css')
+loadCSS('/mixlab/app/lib/photoswipe.min.css')
 
 function initLightBox () {
   const lightbox = new PhotoSwipeLightbox({
     gallery: '.prompt_image_output',
     children: 'a',
     pswpModule: () =>
-      import('/extensions/comfyui-mixlab-nodes/lib/photoswipe.esm.min.js')
+      import('/mixlab/app/lib/photoswipe.esm.min.js')
   })
 
   lightbox.on('uiRegister', function () {
@@ -100,7 +100,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',
@@ -178,7 +181,7 @@ app.registerExtension({
       const orig_nodeCreated = nodeType.prototype.onNodeCreated
       nodeType.prototype.onNodeCreated = async function () {
         orig_nodeCreated?.apply(this, arguments)
-         
+
         const mutable_prompt = this.widgets.filter(
           w => w.name == 'mutable_prompt'
         )[0]
@@ -190,7 +193,12 @@ app.registerExtension({
           draw (ctx, node, widget_width, y, widget_height) {
             Object.assign(
               this.div.style,
-              get_position_style(ctx, widget_width, y, node.size[1])
+              get_position_style(
+                ctx,
+                widget_width,
+                y + widget_height + 24,
+                node.size[1]
+              )
             )
           }
         }
@@ -207,7 +215,7 @@ app.registerExtension({
         background-color: var(--comfy-input-bg);
         border-radius: 8px;
         border-color: var(--border-color);
-        border-style: solid;    height: 30px;min-width: 122px;
+        border-style: solid;height: 30px;min-width: 122px;
        `
 
         // const btn=document.createElement('button');
@@ -266,7 +274,6 @@ app.registerExtension({
   },
   async loadedGraphNode (node, app) {
     if (node.type === 'RandomPrompt') {
-
     }
   }
 })
@@ -408,7 +415,7 @@ const _createResult = async (node, widget, message) => {
   const width = node.size[0] * 0.5 - 12
 
   let height_add = 0
-  
+
   for (let index = 0; index < message._images.length; index++) {
     const imgs = message._images[index]
 
@@ -559,7 +566,7 @@ app.registerExtension({
 
       let cards = widget.div.querySelectorAll('.card')
       if (cards.length == 0) node.size = [280, 120]
-      if(widget.value) _createResult(node, widget, widget.value)
+      if (widget.value) _createResult(node, widget, widget.value)
     }
   }
 })

web/javascript/saveTripoSrMesh.js

@@ -19,7 +19,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: `0`,
     cursor: 'pointer',
     position: 'absolute',

web/javascript/sound-lab.js

@@ -21,7 +21,10 @@ function get_position_style (ctx, widget_width, y, node_height) {
   return {
     transformOrigin: '0 0',
     transform: transform,
-    left: `0`,
+    left:
+    document.querySelector('.comfy-menu').style.display === 'none'
+      ? `60px`
+      : `0`,
     top: '0',
     cursor: 'pointer',
     position: 'absolute',