fix: update supported file formats to include MP3 in the workflow editor

Author: snomiao

README.md

@@ -1,13 +1,14 @@
 # ComfyUI embedded workflow editor
 
-In-place embedded workflow-exif editing experience for ComfyUI generated images. Edit png exif just in your browser.
+In-place embedded workflow-exif editing experience for ComfyUI generated media files. Edit workflow data embedded in PNG, WEBP, FLAC, MP3, and MP4 files directly in your browser.
 
 ![screenshot](docs/screenshot.png)
 
 ## Usage
 
 1. Open https://comfyui-embeded-workflow-editor.vercel.app/
 2. Upload your img (or mount your local directory)
+   - Supported formats: PNG, WEBP, FLAC, MP3, MP4
    - You can also directly load a file via URL parameter: `?url=https://example.com/image.png`
    - Or paste a URL into the URL input field
 3. Edit as you want

app/page.tsx

@@ -68,7 +68,7 @@ export default function Home() {
     if (!files.length) return toast.error("No files provided.");
     const readedWorkflowInfos = await sflow(files)
       .filter((e) => {
-        if (e.name.match(/\.(png|flac|webp|mp4)$/i)) return true;
+        if (e.name.match(/\.(png|flac|webp|mp4|mp3)$/i)) return true;
         toast.error("Not Supported format discarded: " + e.name);
         return null;
       })
@@ -183,15 +183,15 @@ export default function Home() {
             <input
               readOnly
               className="input input-bordered border-dashed input-sm w-full text-center"
-              placeholder="Way-1. Paste/Drop files here (png, webp, flac, mp4)"
+              placeholder="Way-1. Paste/Drop files here (png, webp, flac, mp3, mp4)"
               onPaste={async (e) => await gotFiles(e.clipboardData.files)}
             />
             <div className="flex w-full gap-2">
               <input
                 value={urlInput}
                 onChange={(e) => setUrlInput(e.target.value)}
                 className="input input-bordered input-sm flex-1"
-                placeholder="Way-4. Paste URL here (png, webp, flac, mp4)"
+                placeholder="Way-4. Paste URL here (png, webp, flac, mp3, mp4)"
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && urlInput) {
                     (
@@ -232,7 +232,7 @@ export default function Home() {
                         description: "Supported Files",
                         accept: {
                           "image/*": [".png", ".webp"],
-                          "audio/*": [".flac"],
+                          "audio/*": [".flac", ".mp3"],
                           "video/*": [".mp4"],
                         },
                       },
@@ -413,6 +413,7 @@ export default function Home() {
               webp: "img",
               mp4: "mp4",
               flac: "flac",
+              mp3: "audio",
             };
             let typeKey = extTypeMap[ext];
             if (!typeKey) {
@@ -534,7 +535,7 @@ export default function Home() {
     const aIter = workingDir.values() as AsyncIterable<FileSystemFileHandle>;
     const readed = await sf(aIter)
       .filter((e) => e.kind === "file")
-      .filter((e) => e.name.match(/\.(png|flac|webp|mp4)$/i))
+      .filter((e) => e.name.match(/\.(png|flac|webp|mp4|mp3)$/i))
       .map(async (e) => await e.getFile())
       .map(async (e) => await readWorkflowInfo(e))
       .filter((e) => e.workflowJson)