feat: add video display in Create.vue and let comfyUi.ts process vide…

…os || Signed-off-by: julianbollig <julian.bollig@tngtech.com>
TNG · Feb 23, 2025 · 72e71ed · 72e71ed
1 parent 65ee527
commit 72e71ed
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/WebUI/src/assets/js/store/comfyUi.ts b/WebUI/src/assets/js/store/comfyUi.ts
@@ -263,9 +263,10 @@ export const useComfyUi = defineStore(
                   msg.data?.output?.images?.find((i: { type: string }) => i.type === 'output')
                 const gifFromOutput: {
                   filename: string
-                  workflow_name: string
+                  workflow: string
                   type: string
                   subfolder: string
+                  format: string
                 } = msg.data?.output?.gifs?.find((i: { type: string }) => i.type === 'output')
                 const currentImage = queuedImages[generateIdx]
                 let newImage: Media
@@ -280,8 +281,9 @@ export const useComfyUi = defineStore(
                   newImage = {
                     ...currentImage,
                     state: 'done',
-                    imageUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.filename}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
-                    videoUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.workflow_name}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
+                    imageUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.workflow}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
+                    videoUrl: `${comfyBaseUrl.value}/view?filename=${gifFromOutput.filename}&type=${gifFromOutput.type}&subfolder=${gifFromOutput.subfolder ?? ''}`,
+                    videoFormat: gifFromOutput.format,
                   }
                 }
                 imageGeneration.updateImage(newImage!)

diff --git a/WebUI/src/views/Create.vue b/WebUI/src/views/Create.vue
@@ -43,7 +43,9 @@
           >
             <!-- eslint-enable -->
             <img v-if="!isVideo(image)" :src="image.imageUrl" />
-            <video v-else :src="image.videoUrl" :type="image.videoFormat" />
+            <video v-else>
+              <source :src="image.videoUrl" :type="image.videoFormat" />
+            </video>
           </div>
           <div
             v-show="imageGeneration.processing"