scroll queue item for long text

build/plugins/addElementVnodeExportPlugin.ts

@@ -0,0 +1,59 @@
+import { Plugin } from 'vite'
+
+/**
+ * Vite plugin that adds an alias export for Vue's createBaseVNode as createElementVNode.
+ *
+ * This plugin addresses compatibility issues where some components or libraries
+ * might be using the older createElementVNode function name instead of createBaseVNode.
+ * It modifies the Vue vendor chunk during build to add the alias export.
+ *
+ * @returns {Plugin} A Vite plugin that modifies the Vue vendor chunk exports
+ */
+export function addElementVnodeExportPlugin(): Plugin {
+  return {
+    name: 'add-element-vnode-export-plugin',
+
+    renderChunk(code, chunk, _options) {
+      if (chunk.name.startsWith('vendor-vue')) {
+        const exportRegex = /(export\s*\{)([^}]*)(\}\s*;?\s*)$/
+        const match = code.match(exportRegex)
+
+        if (match) {
+          const existingExports = match[2].trim()
+          const exportsArray = existingExports
+            .split(',')
+            .map((e) => e.trim())
+            .filter(Boolean)
+
+          const hasCreateBaseVNode = exportsArray.some((e) =>
+            e.startsWith('createBaseVNode')
+          )
+          const hasCreateElementVNode = exportsArray.some((e) =>
+            e.includes('createElementVNode')
+          )
+
+          if (hasCreateBaseVNode && !hasCreateElementVNode) {
+            const newExportStatement = `${match[1]} ${existingExports ? existingExports + ',' : ''} createBaseVNode as createElementVNode ${match[3]}`
+            const newCode = code.replace(exportRegex, newExportStatement)
+
+            console.log(
+              `[add-element-vnode-export-plugin] Added 'createBaseVNode as createElementVNode' export to vendor-vue chunk.`
+            )
+
+            return { code: newCode, map: null }
+          } else if (!hasCreateBaseVNode) {
+            console.warn(
+              `[add-element-vnode-export-plugin] Warning: 'createBaseVNode' not found in exports of vendor-vue chunk. Cannot add alias.`
+            )
+          }
+        } else {
+          console.warn(
+            `[add-element-vnode-export-plugin] Warning: Could not find expected export block format in vendor-vue chunk.`
+          )
+        }
+      }
+
+      return null
+    }
+  }
+}

build/plugins/generateImportMapPlugin.ts

@@ -1,24 +1,9 @@
-import glob from 'fast-glob'
-import fs from 'fs-extra'
-import { dirname, join } from 'node:path'
-import { HtmlTagDescriptor, Plugin, normalizePath } from 'vite'
+import type { OutputOptions } from 'rollup'
+import { HtmlTagDescriptor, Plugin } from 'vite'
 
-interface ImportMapSource {
+interface VendorLibrary {
   name: string
-  pattern: string | RegExp
-  entry: string
-  recursiveDependence?: boolean
-  override?: Record<string, Partial<ImportMapSource>>
-}
-
-const parseDeps = (root: string, pkg: string) => {
-  const pkgPath = join(root, 'node_modules', pkg, 'package.json')
-  if (fs.existsSync(pkgPath)) {
-    const content = fs.readFileSync(pkgPath, 'utf-8')
-    const pkg = JSON.parse(content)
-    return Object.keys(pkg.dependencies || {})
-  }
-  return []
+  pattern: RegExp
 }
 
 /**
@@ -38,89 +23,53 @@ const parseDeps = (root: string, pkg: string) => {
  * @returns {Plugin} A Vite plugin that generates and injects an import map
  */
 export function generateImportMapPlugin(
-  importMapSources: ImportMapSource[]
+  vendorLibraries: VendorLibrary[]
 ): Plugin {
   const importMapEntries: Record<string, string> = {}
-  const resolvedImportMapSources: Map<string, ImportMapSource> = new Map()
-  const assetDir = 'assets/lib'
-  let root: string
 
   return {
     name: 'generate-import-map-plugin',
 
     // Configure manual chunks during the build process
     configResolved(config) {
-      root = config.root
-
       if (config.build) {
         // Ensure rollupOptions exists
         if (!config.build.rollupOptions) {
           config.build.rollupOptions = {}
         }
 
-        for (const source of importMapSources) {
-          resolvedImportMapSources.set(source.name, source)
-          if (source.recursiveDependence) {
-            const deps = parseDeps(root, source.name)
-
-            while (deps.length) {
-              const dep = deps.shift()!
-              const depSource = Object.assign({}, source, {
-                name: dep,
-                pattern: dep,
-                ...source.override?.[dep]
-              })
-              resolvedImportMapSources.set(depSource.name, depSource)
-
-              const _deps = parseDeps(root, depSource.name)
-              deps.unshift(..._deps)
+        const outputOptions: OutputOptions = {
+          manualChunks: (id: string) => {
+            for (const lib of vendorLibraries) {
+              if (lib.pattern.test(id)) {
+                return `vendor-${lib.name}`
+              }
             }
-          }
+            return null
+          },
+          // Disable minification of internal exports to preserve function names
+          minifyInternalExports: false
         }
-
-        const external: (string | RegExp)[] = []
-        for (const [, source] of resolvedImportMapSources) {
-          external.push(source.pattern)
-        }
-        config.build.rollupOptions.external = external
+        config.build.rollupOptions.output = outputOptions
       }
     },
 
-    generateBundle(_options) {
-      for (const [, source] of resolvedImportMapSources) {
-        if (source.entry) {
-          const moduleFile = join(source.name, source.entry)
-          const sourceFile = join(root, 'node_modules', moduleFile)
-          const targetFile = join(root, 'dist', assetDir, moduleFile)
+    generateBundle(_options, bundle) {
+      for (const fileName in bundle) {
+        const chunk = bundle[fileName]
+        if (chunk.type === 'chunk' && !chunk.isEntry) {
+          // Find matching vendor library by chunk name
+          const vendorLib = vendorLibraries.find(
+            (lib) => chunk.name === `vendor-${lib.name}`
+          )
 
-          importMapEntries[source.name] =
-            './' + normalizePath(join(assetDir, moduleFile))
+          if (vendorLib) {
+            const relativePath = `./${chunk.fileName.replace(/\\/g, '/')}`
+            importMapEntries[vendorLib.name] = relativePath
 
-          const targetDir = dirname(targetFile)
-          if (!fs.existsSync(targetDir)) {
-            fs.mkdirSync(targetDir, { recursive: true })
-          }
-          fs.copyFileSync(sourceFile, targetFile)
-        }
-
-        if (source.recursiveDependence) {
-          const files = glob.sync(['**/*.{js,mjs}'], {
-            cwd: join(root, 'node_modules', source.name)
-          })
-
-          for (const file of files) {
-            const moduleFile = join(source.name, file)
-            const sourceFile = join(root, 'node_modules', moduleFile)
-            const targetFile = join(root, 'dist', assetDir, moduleFile)
-
-            importMapEntries[normalizePath(join(source.name, dirname(file)))] =
-              './' + normalizePath(join(assetDir, moduleFile))
-
-            const targetDir = dirname(targetFile)
-            if (!fs.existsSync(targetDir)) {
-              fs.mkdirSync(targetDir, { recursive: true })
-            }
-            fs.copyFileSync(sourceFile, targetFile)
+            console.log(
+              `[ImportMap Plugin] Found chunk: ${chunk.name} -> Mapped '${vendorLib.name}' to '${relativePath}'`
+            )
           }
         }
       }

build/plugins/index.ts

@@ -1,2 +1,3 @@
+export { addElementVnodeExportPlugin } from './addElementVnodeExportPlugin'
 export { comfyAPIPlugin } from './comfyAPIPlugin'
 export { generateImportMapPlugin } from './generateImportMapPlugin'

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -36,6 +36,7 @@
       />
       <ResultVideo v-else-if="item.isVideo" :result="item" />
       <ResultAudio v-else-if="item.isAudio" :result="item" />
+      <ResultText v-else-if="item.isText" :result="item" />
     </template>
   </Galleria>
 </template>
@@ -48,12 +49,13 @@ import ComfyImage from '@/components/common/ComfyImage.vue'
 import { ResultItemImpl } from '@/stores/queueStore'
 
 import ResultAudio from './ResultAudio.vue'
+import ResultText from './ResultText.vue'
 import ResultVideo from './ResultVideo.vue'
 
 const galleryVisible = ref(false)
 
 const emit = defineEmits<{
-  (e: 'update:activeIndex', value: number): void
+  'update:activeIndex': [number]
 }>()
 
 const props = defineProps<{

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -13,6 +13,7 @@
     />
     <ResultVideo v-else-if="result.isVideo" :result="result" />
     <ResultAudio v-else-if="result.isAudio" :result="result" />
+    <ResultText v-else-if="result.isText" :result="result" />
     <div v-else class="task-result-preview">
       <i class="pi pi-file" />
       <span>{{ result.mediaType }}</span>
@@ -28,6 +29,7 @@ import { ResultItemImpl } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 
 import ResultAudio from './ResultAudio.vue'
+import ResultText from './ResultText.vue'
 import ResultVideo from './ResultVideo.vue'
 
 const props = defineProps<{

src/components/sidebar/tabs/queue/ResultText.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="result-text-container">
+    <div class="text-content">
+      {{ result.text }}
+    </div>
+
+    <Button
+      class="copy-button"
+      icon="pi pi-copy"
+      text
+      @click.stop="copyToClipboard(result.text ?? '')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { ResultItemImpl } from '@/stores/queueStore'
+
+defineProps<{
+  result: ResultItemImpl
+}>()
+
+const { copyToClipboard } = useCopyToClipboard()
+</script>
+
+<style scoped>
+.result-text-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  padding: 1rem;
+  text-align: center;
+  word-break: break-word;
+}
+
+.text-content {
+  font-size: 0.875rem;
+  color: var(--text-color);
+  width: 100%;
+  max-height: 100%;
+  max-width: 80vw;
+  overflow-y: auto;
+  line-height: 1.5;
+  padding-right: 0.5rem;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+/* Hide scrollbar but keep functionality */
+.text-content::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+
+.copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  color: var(--text-color-secondary);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--surface-ground);
+}
+
+.result-text-container:hover .copy-button {
+  opacity: 1;
+}
+
+.copy-button:hover {
+  background-color: var(--surface-hover);
+}
+</style>

src/extensions/core/apiNode.ts

@@ -1,97 +0,0 @@
-import { t } from '@/i18n'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useExtensionService } from '@/services/extensionService'
-import { useToastStore } from '@/stores/toastStore'
-
-useExtensionService().registerExtension({
-  name: 'Comfy.FetchApi',
-
-  async nodeCreated(node) {
-    if (node.constructor.comfyClass !== 'FetchApi') return
-
-    const onExecuted = node.onExecuted
-    const msg = t('toastMessages.unableToFetchFile')
-
-    const downloadFile = async (
-      typeValue: string,
-      subfolderValue: string,
-      filenameValue: string
-    ) => {
-      try {
-        const params = [
-          'filename=' + encodeURIComponent(filenameValue),
-          'type=' + encodeURIComponent(typeValue),
-          'subfolder=' + encodeURIComponent(subfolderValue),
-          app.getRandParam().substring(1)
-        ].join('&')
-
-        const fetchURL = `/view?${params}`
-        const response = await api.fetchApi(fetchURL)
-
-        if (!response.ok) {
-          console.error(response)
-          useToastStore().addAlert(msg)
-          return false
-        }
-
-        const blob = await response.blob()
-        const downloadFilename = filenameValue
-
-        const url = window.URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.style.display = 'none'
-        a.href = url
-        a.download = downloadFilename
-
-        document.body.appendChild(a)
-        a.click()
-        document.body.removeChild(a)
-
-        window.URL.revokeObjectURL(url)
-
-        return true
-      } catch (error) {
-        console.error(error)
-        useToastStore().addAlert(msg)
-        return false
-      }
-    }
-
-    const type = node.widgets?.find((w) => w.name === 'type')
-    const subfolder = node.widgets?.find((w) => w.name === 'subfolder')
-    const filename = node.widgets?.find((w) => w.name === 'filename')
-
-    node.onExecuted = function (message: any) {
-      onExecuted?.apply(this, arguments as any)
-
-      const typeInput = message.result[0]
-      const subfolderInput = message.result[1]
-      const filenameInput = message.result[2]
-      const autoDownload = node.widgets?.find((w) => w.name === 'auto_download')
-
-      if (type && subfolder && filename) {
-        type.value = typeInput
-        subfolder.value = subfolderInput
-        filename.value = filenameInput
-
-        if (autoDownload && autoDownload.value) {
-          downloadFile(typeInput, subfolderInput, filenameInput)
-        }
-      }
-    }
-
-    node.addWidget('button', 'download', 'download', async () => {
-      if (type && subfolder && filename) {
-        await downloadFile(
-          type.value as string,
-          subfolder.value as string,
-          filename.value as string
-        )
-      } else {
-        console.error(msg)
-        useToastStore().addAlert(msg)
-      }
-    })
-  }
-})

src/extensions/core/index.ts

@@ -1,4 +1,3 @@
-import './apiNode'
 import './clipspace'
 import './contextMenuFilter'
 import './dynamicPrompts'

src/extensions/core/load3d.ts

@@ -266,7 +266,7 @@ useExtensionService().registerExtension({
       LOAD_3D_ANIMATION(node) {
         const fileInput = document.createElement('input')
         fileInput.type = 'file'
-        fileInput.accept = '.gltf,.glb,.fbx'
+        fileInput.accept = '.fbx,glb,gltf'
         fileInput.style.display = 'none'
         fileInput.onchange = async () => {
           if (fileInput.files?.length) {
@@ -452,43 +452,31 @@ useExtensionService().registerExtension({
 
     const onExecuted = node.onExecuted
 
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
-      const config = new Load3DConfiguration(load3d)
+    node.onExecuted = function (message: any) {
+      onExecuted?.apply(this, arguments as any)
 
-      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      let filePath = message.result[0]
 
-      if (modelWidget) {
-        const lastTimeModelFile = node.properties['Last Time Model File']
+      if (!filePath) {
+        const msg = t('toastMessages.unableToGetModelFilePath')
+        console.error(msg)
+        useToastStore().addAlert(msg)
+      }
 
-        if (lastTimeModelFile) {
-          modelWidget.value = lastTimeModelFile
+      let cameraState = message.result[1]
 
-          const cameraState = node.properties['Camera Info']
-
-          config.configure('output', modelWidget, cameraState)
-        }
-
-        node.onExecuted = function (message: any) {
-          onExecuted?.apply(this, arguments as any)
-
-          let filePath = message.result[0]
-
-          if (!filePath) {
-            const msg = t('toastMessages.unableToGetModelFilePath')
-            console.error(msg)
-            useToastStore().addAlert(msg)
-          }
-
-          let cameraState = message.result[1]
+      useLoad3dService().waitForLoad3d(node, (load3d) => {
+        const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
 
+        if (modelWidget) {
           modelWidget.value = filePath.replaceAll('\\', '/')
 
-          node.properties['Last Time Model File'] = modelWidget.value
+          const config = new Load3DConfiguration(load3d)
 
           config.configure('output', modelWidget, cameraState)
         }
-      }
-    })
+      })
+    }
   }
 })
 
@@ -538,42 +526,29 @@ useExtensionService().registerExtension({
 
     const onExecuted = node.onExecuted
 
-    useLoad3dService().waitForLoad3d(node, (load3d) => {
-      const config = new Load3DConfiguration(load3d)
+    node.onExecuted = function (message: any) {
+      onExecuted?.apply(this, arguments as any)
 
-      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      let filePath = message.result[0]
 
-      if (modelWidget) {
-        const lastTimeModelFile = node.properties['Last Time Model File']
+      if (!filePath) {
+        const msg = t('toastMessages.unableToGetModelFilePath')
+        console.error(msg)
+        useToastStore().addAlert(msg)
+      }
 
-        if (lastTimeModelFile) {
-          modelWidget.value = lastTimeModelFile
-
-          const cameraState = node.properties['Camera Info']
-
-          config.configure('output', modelWidget, cameraState)
-        }
-
-        node.onExecuted = function (message: any) {
-          onExecuted?.apply(this, arguments as any)
-
-          let filePath = message.result[0]
-
-          if (!filePath) {
-            const msg = t('toastMessages.unableToGetModelFilePath')
-            console.error(msg)
-            useToastStore().addAlert(msg)
-          }
-
-          let cameraState = message.result[1]
+      let cameraState = message.result[1]
 
+      useLoad3dService().waitForLoad3d(node, (load3d) => {
+        const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+        if (modelWidget) {
           modelWidget.value = filePath.replaceAll('\\', '/')
 
-          node.properties['Last Time Model File'] = modelWidget.value
+          const config = new Load3DConfiguration(load3d)
 
           config.configure('output', modelWidget, cameraState)
         }
-      }
-    })
+      })
+    }
   }
 })

src/extensions/core/load3d/LoaderManager.ts

@@ -132,14 +132,6 @@ export class LoaderManager implements LoaderManagerInterface {
         if (this.modelManager.materialMode === 'original') {
           const mtlUrl = url.replace(/(filename=.*?)\.obj/, '$1.mtl')
 
-          const subfolderMatch = url.match(/[?&]subfolder=([^&]*)/)
-
-          const subfolder = subfolderMatch
-            ? decodeURIComponent(subfolderMatch[1])
-            : '3d'
-
-          this.mtlLoader.setSubfolder(subfolder)
-
           try {
             const materials = await this.mtlLoader.loadAsync(mtlUrl)
             materials.preload()

src/extensions/core/load3d/threejsOverride/OverrideMTLLoader.js

@@ -38,10 +38,6 @@ class OverrideMTLLoader extends Loader {
     this.loadRootFolder = loadRootFolder
   }
 
-  setSubfolder(subfolder) {
-    this.subfolder = subfolder
-  }
-
   /**
    * Starts loading from the given URL and passes the loaded MTL asset
    * to the `onLoad()` callback.
@@ -139,8 +135,7 @@ class OverrideMTLLoader extends Loader {
     const materialCreator = new OverrideMaterialCreator(
       this.resourcePath || path,
       this.materialOptions,
-      this.loadRootFolder,
-      this.subfolder
+      this.loadRootFolder
     )
     materialCreator.setCrossOrigin(this.crossOrigin)
     materialCreator.setManager(this.manager)
@@ -160,7 +155,7 @@ class OverrideMTLLoader extends Loader {
  */
 
 class OverrideMaterialCreator {
-  constructor(baseUrl = '', options = {}, loadRootFolder, subfolder) {
+  constructor(baseUrl = '', options = {}, loadRootFolder) {
     this.baseUrl = baseUrl
     this.options = options
     this.materialsInfo = {}
@@ -169,7 +164,6 @@ class OverrideMaterialCreator {
     this.nameLookup = {}
 
     this.loadRootFolder = loadRootFolder
-    this.subfolder = subfolder
 
     this.crossOrigin = 'anonymous'
 
@@ -289,25 +283,16 @@ class OverrideMaterialCreator {
     /**
      * Override for ComfyUI api url
      */
-    function resolveURL(baseUrl, url, loadRootFolder, subfolder) {
+    function resolveURL(baseUrl, url, loadRootFolder) {
       if (typeof url !== 'string' || url === '') return ''
 
-      if (baseUrl.endsWith('/')) {
-        baseUrl = baseUrl.slice(0, -1)
-      }
-
-      if (!baseUrl.endsWith('api')) {
-        baseUrl = '/api'
-      }
-
       baseUrl =
         baseUrl +
         '/view?filename=' +
         url +
         '&type=' +
         loadRootFolder +
-        '&subfolder=' +
-        subfolder
+        '&subfolder=3d'
 
       return baseUrl
     }
@@ -317,12 +302,7 @@ class OverrideMaterialCreator {
 
       const texParams = scope.getTextureParams(value, params)
       const map = scope.loadTexture(
-        resolveURL(
-          scope.baseUrl,
-          texParams.url,
-          scope.loadRootFolder,
-          scope.subfolder
-        )
+        resolveURL(scope.baseUrl, texParams.url, scope.loadRootFolder)
       )
 
       map.repeat.copy(texParams.scale)

src/locales/en/main.json

@@ -1273,8 +1273,7 @@
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
-    "nothingSelected": "Nothing selected",
-    "unableToFetchFile": "Unable to fetch file"
+    "nothingSelected": "Nothing selected"
   },
   "auth": {
     "apiKey": {

src/locales/es/main.json

@@ -1359,7 +1359,6 @@
     "pendingTasksDeleted": "Tareas pendientes eliminadas",
     "pleaseSelectNodesToGroup": "Por favor, seleccione los nodos (u otros grupos) para crear un grupo para",
     "pleaseSelectOutputNodes": "Por favor, selecciona los nodos de salida",
-    "unableToFetchFile": "No se pudo obtener el archivo",
     "unableToGetModelFilePath": "No se puede obtener la ruta del archivo del modelo",
     "unauthorizedDomain": "Tu dominio {domain} no está autorizado para usar este servicio. Por favor, contacta a {email} para agregar tu dominio a la lista blanca.",
     "updateRequested": "Actualización solicitada",

src/locales/es/nodeDefs.json

@@ -3403,7 +3403,7 @@
       "clear": {
       },
       "height": {
-        "name": "alto"
+        "name": "altura"
       },
       "image": {
         "name": "imagen"
@@ -3417,26 +3417,20 @@
         "name": "ancho"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "imagen"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "ruta_malla"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "normal"
       },
-      "4": {
+      {
         "name": "lineart"
       },
-      "5": {
-        "name": "info_cámara"
+      {
+        "name": "camera_info"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
     "display_name": "Cargar 3D - Animación",
@@ -3444,7 +3438,7 @@
       "clear": {
       },
       "height": {
-        "name": "alto"
+        "name": "altura"
       },
       "image": {
         "name": "imagen"
@@ -3458,23 +3452,17 @@
         "name": "ancho"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "imagen"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "ruta_malla"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "normal"
       },
-      "4": {
-        "name": "info_cámara"
+      {
+        "name": "camera_info"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "CargarAudio",

src/locales/fr/main.json

@@ -1359,7 +1359,6 @@
     "pendingTasksDeleted": "Tâches en attente supprimées",
     "pleaseSelectNodesToGroup": "Veuillez sélectionner les nœuds (ou autres groupes) pour créer un groupe pour",
     "pleaseSelectOutputNodes": "Veuillez sélectionner les nœuds de sortie",
-    "unableToFetchFile": "Impossible de récupérer le fichier",
     "unableToGetModelFilePath": "Impossible d'obtenir le chemin du fichier modèle",
     "unauthorizedDomain": "Votre domaine {domain} n'est pas autorisé à utiliser ce service. Veuillez contacter {email} pour ajouter votre domaine à la liste blanche.",
     "updateRequested": "Mise à jour demandée",

src/locales/fr/nodeDefs.json

@@ -3417,26 +3417,20 @@
         "name": "largeur"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "image"
-      },
-      "1": {
-        "name": "masque"
-      },
-      "2": {
-        "name": "chemin_maillage"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "normale"
       },
-      "4": {
-        "name": "lineart"
+      {
+        "name": "ligne artistique"
       },
-      "5": {
-        "name": "info_caméra"
+      {
+        "name": "informations caméra"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
     "display_name": "Charger 3D - Animation",
@@ -3458,23 +3452,17 @@
         "name": "largeur"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "image"
+    "outputs": [
+      null,
+      null,
+      null,
+      {
+        "name": "normal"
       },
-      "1": {
-        "name": "masque"
-      },
-      "2": {
-        "name": "chemin_maillage"
-      },
-      "3": {
-        "name": "normale"
-      },
-      "4": {
-        "name": "info_caméra"
+      {
+        "name": "camera_info"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "ChargerAudio",

src/locales/ja/main.json

@@ -1359,7 +1359,6 @@
     "pendingTasksDeleted": "保留中のタスクが削除されました",
     "pleaseSelectNodesToGroup": "グループを作成するためのノード（または他のグループ）を選択してください",
     "pleaseSelectOutputNodes": "出力ノードを選択してください",
-    "unableToFetchFile": "ファイルを取得できません",
     "unableToGetModelFilePath": "モデルファイルのパスを取得できません",
     "unauthorizedDomain": "あなたのドメイン {domain} はこのサービスを利用する権限がありません。ご利用のドメインをホワイトリストに追加するには、{email} までご連絡ください。",
     "updateRequested": "更新が要求されました",

src/locales/ja/nodeDefs.json

@@ -3417,29 +3417,23 @@
         "name": "幅"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "画像"
-      },
-      "1": {
-        "name": "マスク"
-      },
-      "2": {
-        "name": "メッシュパス"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "法線"
       },
-      "4": {
+      {
         "name": "線画"
       },
-      "5": {
+      {
         "name": "カメラ情報"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
-    "display_name": "3D読み込み - アニメーション",
+    "display_name": "3Dを読み込む - アニメーション",
     "inputs": {
       "clear": {
       },
@@ -3458,23 +3452,17 @@
         "name": "幅"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "画像"
-      },
-      "1": {
-        "name": "マスク"
-      },
-      "2": {
-        "name": "メッシュパス"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "法線"
       },
-      "4": {
+      {
         "name": "カメラ情報"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "音声を読み込む",

src/locales/ko/main.json

@@ -1359,7 +1359,6 @@
     "pendingTasksDeleted": "보류 중인 작업이 삭제되었습니다",
     "pleaseSelectNodesToGroup": "그룹을 만들기 위해 노드(또는 다른 그룹)를 선택해 주세요",
     "pleaseSelectOutputNodes": "출력 노드를 선택해 주세요",
-    "unableToFetchFile": "파일을 가져올 수 없습니다",
     "unableToGetModelFilePath": "모델 파일 경로를 가져올 수 없습니다",
     "unauthorizedDomain": "귀하의 도메인 {domain}은(는) 이 서비스를 사용할 수 있는 권한이 없습니다. 도메인을 허용 목록에 추가하려면 {email}로 문의해 주세요.",
     "updateRequested": "업데이트 요청됨",

src/locales/ko/nodeDefs.json

@@ -3398,7 +3398,7 @@
     }
   },
   "Load3D": {
-    "display_name": "3D 불러오기",
+    "display_name": "3D 로드",
     "inputs": {
       "clear": {
       },
@@ -3417,29 +3417,23 @@
         "name": "너비"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "이미지"
-      },
-      "1": {
-        "name": "마스크"
-      },
-      "2": {
-        "name": "메시 경로"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "노멀"
       },
-      "4": {
+      {
         "name": "라인아트"
       },
-      "5": {
+      {
         "name": "카메라 정보"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
-    "display_name": "3D 불러오기 - 애니메이션",
+    "display_name": "3D 로드 - 애니메이션",
     "inputs": {
       "clear": {
       },
@@ -3458,23 +3452,17 @@
         "name": "너비"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "이미지"
-      },
-      "1": {
-        "name": "마스크"
-      },
-      "2": {
-        "name": "메시 경로"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "노멀"
       },
-      "4": {
+      {
         "name": "카메라 정보"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "오디오 로드",

src/locales/ru/main.json

@@ -1359,7 +1359,6 @@
     "pendingTasksDeleted": "Ожидающие задачи удалены",
     "pleaseSelectNodesToGroup": "Пожалуйста, выберите узлы (или другие группы) для создания группы",
     "pleaseSelectOutputNodes": "Пожалуйста, выберите выходные узлы",
-    "unableToFetchFile": "Не удалось получить файл",
     "unableToGetModelFilePath": "Не удалось получить путь к файлу модели",
     "unauthorizedDomain": "Ваш домен {domain} не авторизован для использования этого сервиса. Пожалуйста, свяжитесь с {email}, чтобы добавить ваш домен в белый список.",
     "updateRequested": "Запрошено обновление",

src/locales/ru/nodeDefs.json

@@ -3409,7 +3409,7 @@
         "name": "изображение"
       },
       "model_file": {
-        "name": "файл модели"
+        "name": "файл_модели"
       },
       "upload 3d model": {
       },
@@ -3417,29 +3417,23 @@
         "name": "ширина"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "изображение"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "путь к mesh"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "нормаль"
       },
-      "4": {
-        "name": "линейный рисунок"
+      {
+        "name": "линеарт"
       },
-      "5": {
-        "name": "информация о камере"
+      {
+        "name": "информация_камеры"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
-    "display_name": "Загрузить 3D - Анимация",
+    "display_name": "Загрузить 3D — Анимация",
     "inputs": {
       "clear": {
       },
@@ -3458,23 +3452,17 @@
         "name": "ширина"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "изображение"
-      },
-      "1": {
-        "name": "mask"
-      },
-      "2": {
-        "name": "путь_к_модели"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "нормаль"
       },
-      "4": {
-        "name": "информация_о_камере"
+      {
+        "name": "информация_камеры"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "Загрузить аудио",

src/locales/zh/main.json

@@ -1359,7 +1359,6 @@
     "pendingTasksDeleted": "待处理任务已删除",
     "pleaseSelectNodesToGroup": "请选取节点（或其他组）以创建分组",
     "pleaseSelectOutputNodes": "请选择输出节点",
-    "unableToFetchFile": "无法获取文件",
     "unableToGetModelFilePath": "无法获取模型文件路径",
     "unauthorizedDomain": "您的域名 {domain} 未被授权使用此服务。请联系 {email} 将您的域名添加到白名单。",
     "updateRequested": "已请求更新",

src/locales/zh/nodeDefs.json

@@ -3417,26 +3417,20 @@
         "name": "宽度"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "image"
+    "outputs": [
+      null,
+      null,
+      null,
+      {
+        "name": "法线"
       },
-      "1": {
-        "name": "mask"
+      {
+        "name": "线稿"
       },
-      "2": {
-        "name": "mesh_path"
-      },
-      "3": {
-        "name": "normal"
-      },
-      "4": {
-        "name": "lineart"
-      },
-      "5": {
-        "name": "camera_info"
+      {
+        "name": "相机信息"
       }
-    }
+    ]
   },
   "Load3DAnimation": {
     "display_name": "加载3D动画",
@@ -3458,23 +3452,17 @@
         "name": "宽度"
       }
     },
-    "outputs": {
-      "0": {
-        "name": "图像"
-      },
-      "1": {
-        "name": "遮罩"
-      },
-      "2": {
-        "name": "mesh_path"
-      },
-      "3": {
+    "outputs": [
+      null,
+      null,
+      null,
+      {
         "name": "法线"
       },
-      "4": {
+      {
         "name": "相机信息"
       }
-    }
+    ]
   },
   "LoadAudio": {
     "display_name": "加载音频",

src/schemas/apiSchema.ts

@@ -22,7 +22,8 @@ const zOutputs = z
     audio: z.array(zResultItem).optional(),
     images: z.array(zResultItem).optional(),
     video: z.array(zResultItem).optional(),
-    animated: z.array(z.boolean()).optional()
+    animated: z.array(z.boolean()).optional(),
+    text: z.string().optional()
   })
   .passthrough()
 

src/stores/queueStore.ts

@@ -30,6 +30,7 @@ export class ResultItemImpl {
   filename: string
   subfolder: string
   type: string
+  text?: string
 
   nodeId: NodeId
   // 'audio' | 'images' | ...
@@ -43,6 +44,7 @@ export class ResultItemImpl {
     this.filename = obj.filename ?? ''
     this.subfolder = obj.subfolder ?? ''
     this.type = obj.type ?? ''
+    this.text = obj.text
 
     this.nodeId = obj.nodeId
     this.mediaType = obj.mediaType
@@ -193,8 +195,12 @@ export class ResultItemImpl {
     )
   }
 
+  get isText(): boolean {
+    return ['text', 'json', 'display_text'].includes(this.mediaType)
+  }
+
   get supportsPreview(): boolean {
-    return this.isImage || this.isVideo || this.isAudio
+    return this.isImage || this.isVideo || this.isAudio || this.isText
   }
 }
 
@@ -233,14 +239,21 @@ export class TaskItemImpl {
     }
     return Object.entries(this.outputs).flatMap(([nodeId, nodeOutputs]) =>
       Object.entries(nodeOutputs).flatMap(([mediaType, items]) =>
-        (items as ResultItem[]).map(
-          (item: ResultItem) =>
-            new ResultItemImpl({
+        (items as (ResultItem | string)[]).map((item: ResultItem | string) => {
+          if (typeof item === 'string') {
+            return new ResultItemImpl({
+              text: item,
+              nodeId,
+              mediaType
+            })
+          } else {
+            return new ResultItemImpl({
               ...item,
               nodeId,
               mediaType
             })
-        )
+          }
+        })
       )
     )
   }

vite.config.mts

@@ -8,7 +8,11 @@ import { createHtmlPlugin } from 'vite-plugin-html'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import type { UserConfigExport } from 'vitest/config'
 
-import { comfyAPIPlugin, generateImportMapPlugin } from './build/plugins'
+import {
+  addElementVnodeExportPlugin,
+  comfyAPIPlugin,
+  generateImportMapPlugin
+} from './build/plugins'
 
 dotenv.config()
 
@@ -73,40 +77,11 @@ export default defineConfig({
       : [vue()]),
     comfyAPIPlugin(IS_DEV),
     generateImportMapPlugin([
-      {
-        name: 'vue',
-        pattern: 'vue',
-        entry: './dist/vue.esm-browser.prod.js'
-      },
-      {
-        name: 'vue-i18n',
-        pattern: 'vue-i18n',
-        entry: './dist/vue-i18n.esm-browser.prod.js'
-      },
-      {
-        name: 'primevue',
-        pattern: /^primevue\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/themes',
-        pattern: /^@primevue\/themes\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true
-      },
-      {
-        name: '@primevue/forms',
-        pattern: /^@primevue\/forms\/?.*/,
-        entry: './index.mjs',
-        recursiveDependence: true,
-        override: {
-          '@primeuix/forms': {
-            entry: ''
-          }
-        }
-      }
+      { name: 'vue', pattern: /[\\/]node_modules[\\/]vue[\\/]/ },
+      { name: 'primevue', pattern: /[\\/]node_modules[\\/]primevue[\\/]/ },
+      { name: 'vue-i18n', pattern: /[\\/]node_modules[\\/]vue-i18n[\\/]/ }
     ]),
+    addElementVnodeExportPlugin(),
 
     Icons({
       compiler: 'vue3'