Add the ability to parse workflows from AVIF images (#4420)

Author: FerrahWolfeh

browser_tests/assets/workflow.avif

@@ -15,7 +15,8 @@ test.describe('Load Workflow in Media', () => {
     'workflow.mp4',
     'workflow.mov',
     'workflow.m4v',
-    'workflow.svg'
+    'workflow.svg',
+    'workflow.avif'
   ]
   fileNames.forEach(async (fileName) => {
     test(`Load workflow in ${fileName} (drop from filesystem)`, async ({

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -6,8 +6,8 @@
  * All supported image formats that can contain workflow data
  */
 export const IMAGE_WORKFLOW_FORMATS = {
-  extensions: ['.png', '.webp', '.svg'],
-  mimeTypes: ['image/png', 'image/webp', 'image/svg+xml']
+  extensions: ['.png', '.webp', '.svg', '.avif'],
+  mimeTypes: ['image/png', 'image/webp', 'image/svg+xml', 'image/avif']
 }
 
 /**

src/constants/supportedWorkflowFormats.ts

@@ -80,6 +80,7 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
 import {
+  getAvifMetadata,
   getFlacMetadata,
   getLatentMetadata,
   getPngMetadata,
@@ -1351,6 +1352,16 @@ export class ComfyApp {
       } else {
         this.showErrorOnFileLoad(file)
       }
+    } else if (file.type === 'image/avif') {
+      const { workflow, prompt } = await getAvifMetadata(file)
+
+      if (workflow) {
+        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(JSON.parse(prompt), fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
     } else if (file.type === 'image/webp') {
       const pngInfo = await getWebpMetadata(file)
       // Support loading workflows from that webp custom node.