feat: ✨ improve the debug node

- preserve input order
- new "as_detailed_type" option
- support mask preview
- improved styling a bit for readibility

web/debug.js

@@ -11,13 +11,9 @@
 /// <reference path="../types/typedefs.js" />
 
 import { app } from '../../scripts/app.js'
-
 import * as shared from './comfy_shared.js'
-import { MtbWidgets } from './mtb_widgets.js'
 import * as mtb_ui from './mtb_ui.js'
 
-// TODO: respect inputs order...
-
 function escapeHtml(unsafe) {
   return unsafe
     .replace(/&/g, '&amp;')
@@ -26,6 +22,54 @@ function escapeHtml(unsafe) {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#039;')
 }
+
+function createDebugSection(title) {
+  const section = mtb_ui.makeElement('div', {
+    margin: '8px 0',
+    padding: '8px',
+    borderRadius: '4px',
+    backgroundColor: 'rgba(0,0,0,0.2)'
+  })
+
+  const header = mtb_ui.makeElement('h3', {
+    margin: '0 0 8px 0',
+    padding: '4px 0',
+    borderBottom: '1px solid rgba(255,255,255,0.1)',
+    fontSize: '14px',
+    fontWeight: 'bold',
+    color: '#9f9'
+  })
+  header.textContent = title
+  section.appendChild(header)
+
+  return section
+}
+
+function createDebugContent(content, type) {
+  const wrapper = mtb_ui.makeElement('div', {
+    margin: '4px 0'
+  })
+
+  if (type === 'text') {
+    const text = mtb_ui.makeElement('p', {
+      margin: '2px 0',
+      fontFamily: 'monospace',
+      whiteSpace: 'pre-wrap'
+    })
+    text.innerHTML = content
+    wrapper.appendChild(text)
+  } else if (type === 'image') {
+    const img = mtb_ui.makeElement('img', {
+      width: '100%',
+      borderRadius: '2px'
+    })
+    img.src = content
+    wrapper.appendChild(img)
+  }
+
+  return wrapper
+}
+
 app.registerExtension({
   name: 'mtb.Debug',
 
@@ -84,63 +128,78 @@ app.registerExtension({
         onExecuted?.apply(this, args)
         const [data, ..._rest] = args
 
-        const prefix = 'anything_'
-
         if (this.widgets) {
+          let tgt_len = this.widgets.length
           for (let i = 0; i < this.widgets.length; i++) {
-            if (this.widgets[i].name !== 'output_to_console') {
+            if (
+              this.widgets[i].name !== 'output_to_console' &&
+              this.widgets[i].name !== 'as_detailed_types'
+            ) {
               this.widgets[i].onRemove?.()
               this.widgets[i].onRemoved?.()
+              tgt_len -= 1
             }
           }
-          this.widgets.length = 1
+          this.widgets.length = tgt_len
         }
+
+        const inputData = {}
+
+        const uiData = data.ui || data
+
+        if (uiData.items) {
+            uiData.items.forEach(item => {
+                const inputName = item.input
+                if (!inputData[inputName]) {
+                    inputData[inputName] = { text: [], b64_images: [] }
+                }
+                if (item.text) {
+                    inputData[inputName].text.push(...item.text)
+                }
+                if (item.b64_images) {
+                    inputData[inputName].b64_images.push(...item.b64_images)
+                }
+            })
+        }
+
         let widgetI = 1
-        // console.log(message)
-        if (data.text) {
-          for (const txt of data.text) {
-            const textDom = mtb_ui.makeElement('p', { fontFamily: 'monospace' })
-            textDom.innerHTML = txt
-
-            this.addDOMWidget(
-              `${prefix}_${widgetI}`,
-              'CUSTOM_TEXT',
-              textDom,
-              {},
-            )
-            widgetI++
+        for (const [inputName, content] of Object.entries(inputData)) {
+          if (content.text.length === 0 && content.b64_images.length === 0) {
+            continue
           }
-        }
-        if (data.b64_images) {
-          for (const img of data.b64_images) {
-            const imgDom = mtb_ui.makeElement('img', { width: '100%' })
-            imgDom.src = img
 
-            this.addDOMWidget(
-              `${prefix}_${widgetI}`,
-              'CUSTOM_IMG_B64',
-              mtb_ui.wrapElement(imgDom, {
-                overflow: 'hidden',
-              }),
-              {},
-            )
+          const section = createDebugSection(inputName)
 
-            widgetI++
+          if (content.text.length > 0) {
+            content.text.forEach(text => {
+              section.appendChild(createDebugContent(text, 'text'))
+            })
           }
-        }
 
-        // this.setSize(this.computeSize())
+          if (content.b64_images.length > 0) {
+            content.b64_images.forEach(img => {
+              section.appendChild(createDebugContent(img, 'image'))
+            })
+          }
+
+          this.addDOMWidget(
+            `debug_section_${widgetI}`,
+            'CUSTOM',
+            section,
+            {}
+          )
+          widgetI++
+        }
 
         this.onRemoved = function () {
-          // When removing this node we need to remove the input from the DOM
-          for (const y in this.widgets) {
-            if (this.widgets[y].canvas) {
-              this.widgets[y].canvas.remove()
+          for (const widget of this.widgets) {
+            if (widget.canvas) {
+              widget.canvas.remove()
             }
-            shared.cleanupNode(this)
-            this.widgets[y].onRemoved?.()
-            this.widgets[y].onRemove?.()
+            widget.onRemoved?.()
+            widget.onRemove?.()
           }
+          shared.cleanupNode(this)
         }
       }
     }