add prettier config

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "prettier"
+  ]
 }

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "es5",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package-lock.json

@@ -109,12 +109,15 @@
         "@types/uuid": "^9.0.8",
         "@vitejs/plugin-react": "^4.3.1",
         "eslint": "^8",
-        "eslint-config-next": "14.2.4",
+        "eslint-config-next": "14.2.5",
+        "eslint-config-prettier": "^9.1.0",
         "jsdom": "^24.1.0",
         "postcss": "^8",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.5",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "^3.4.3",
-        "typescript": "^5",
+        "typescript": "^5.5.0",
         "vitest": "^2.0.2"
       }
     },
@@ -3127,9 +3130,9 @@
       "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.4.tgz",
-      "integrity": "sha512-svSFxW9f3xDaZA3idQmlFw7SusOuWTpDTAeBlO3AEPDltrraV+lqs7mAc6A27YdnpQVVIA3sODqUAAHdWhVWsA==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.5.tgz",
+      "integrity": "sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==",
       "dev": true,
       "dependencies": {
         "glob": "10.3.10"
@@ -8282,12 +8285,12 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.4.tgz",
-      "integrity": "sha512-Qr0wMgG9m6m4uYy2jrYJmyuNlYZzPRQq5Kvb9IDlYwn+7yq6W6sfMNFgb+9guM1KYwuIo6TIaiFhZJ6SnQ/Efw==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.5.tgz",
+      "integrity": "sha512-zogs9zlOiZ7ka+wgUnmcM0KBEDjo4Jis7kxN1jvC0N4wynQ2MIx/KBkg4mVF63J5EK4W0QMCn7xO3vNisjaAoA==",
       "dev": true,
       "dependencies": {
-        "@next/eslint-plugin-next": "14.2.4",
+        "@next/eslint-plugin-next": "14.2.5",
         "@rushstack/eslint-patch": "^1.3.3",
         "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
         "eslint-import-resolver-node": "^0.3.6",
@@ -8307,6 +8310,18 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -12048,6 +12063,80 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
+      "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",

package.json

@@ -116,12 +116,15 @@
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "14.2.5",
+    "eslint-config-prettier": "^9.1.0",
     "jsdom": "^24.1.0",
     "postcss": "^8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5",
+    "typescript": "^5.5.0",
     "vitest": "^2.0.2"
   }
 }

src/app/main.tsx

@@ -55,7 +55,7 @@ function MainContent() {
 
   const searchParams = useSearchParams()
   const hasBetaAccess = searchParams.get("beta") === "true"
-  useEffect(() => { setHasBetaAccess(hasBetaAccess) }, [hasBetaAccess])
+  useEffect(() => { setHasBetaAccess(hasBetaAccess) }, [hasBetaAccess, setHasBetaAccess])
 
   return (
     <div

src/components/core/timeline/index.tsx

@@ -34,7 +34,7 @@ export function Timeline() {
     // we need to apply theme to it
     useUI.getState().applyThemeToComponents()
     startLoop()
-  }, [isReady])
+  }, [isReady, setSegmentResolver, setJumpAt, setIsPlaying, setTogglePlayback, startLoop, checkIfPlaying, jumpAt, resolveSegment, togglePlayback])
   
   
   return (

src/components/core/tree/useTreeNode.ts

@@ -77,7 +77,7 @@ export function useTreeNode<T extends ElementType>(
       // Ensure the action is dispatched only once, otherwise we wouldn't be able to collapse the node
       dispatchOnce.current = true
     }
-  }, [id, options.isExpanded, open, dispatch])
+  }, [id, options?.isExpanded, options?.data?.nodeType, open, dispatch])
 
   return useMemo(() => {
     const isOpen = open.get(id) ?? false
@@ -189,6 +189,8 @@ export function useTreeNode<T extends ElementType>(
     open,
     options.isFolder,
     options.selectionType,
+    options?.data?.nodeType,
+    options?.data?.data,
     options.isExpanded,
     select,
     selectedId,

src/components/core/waveform/useWaveform.ts

@@ -58,7 +58,10 @@ export function useWaveform({
 
   const debounceSize = useDebounce(cacheKey, 300)
 
-  const redraw = () => {
+
+  useLayoutEffect(() => {
+    if (error) { return }
+
     const cachedImage = cache[cacheKey]
 
     console.log(`redraw() for cache key "${cacheKey}"`)
@@ -100,12 +103,8 @@ export function useWaveform({
     } else {
       console.error("redraw(): no canvasRenderingContext")
     }
-  }
 
-  useLayoutEffect(() => {
-    if (error) { return }
-    redraw()
-  }, [id, debounceSize, zoom, color, onDone, gain, error])
+  }, [id, debounceSize, zoom, color, onDone, gain, error, height, width, mode, cacheKey])
 
   return {
     canvas,

src/components/editors/ProjectEditor/index.tsx

@@ -18,7 +18,7 @@ export function ProjectEditor() {
 
   useEffect(() => {
     setCurrent(clap?.meta)
-  }, [clap?.meta])
+  }, [clap?.meta, setCurrent])
   
   if (!current) {
     return <div>

src/components/editors/SegmentEditor/index.tsx

@@ -18,7 +18,8 @@ export function SegmentEditor() {
 
   useEffect(() => {
     setCurrent(selectedSegments.at(-1))
-  }, [selectedSegments.map(s => s.id).join(',')])
+  // eslint-disable-next-line
+  }, [setCurrent, selectedSegments.map(s => s.id).join(',')])
 
   if (!current) {
     return <div>

src/components/forms/FormDir.tsx

@@ -34,9 +34,8 @@ export function FormDir({
       return
     }
 
-    const files = Array.from(event.currentTarget.files || [])
-    onChange(files)
-  }, [])
+    onChange(Array.from<File>(event.currentTarget.files || []))
+  }, [disabled, onChange])
 
   return (
     <FormField

src/components/forms/FormFile.tsx

@@ -35,9 +35,8 @@ export function FormFile({
       return
     }
 
-    const files = Array.from(event.currentTarget.files || [])
-    onChange(files)
-  }, [])
+    onChange(Array.from<File>(event.currentTarget.files || []))
+  }, [disabled, onChange])
 
   return (
     <FormField

src/components/forms/FormInput.tsx

@@ -83,7 +83,7 @@ export function FormInput<T>({
     } else {
       onChange(rawStringValue as T)
     }
-  }, [isNumberInput, isTextInput, minValue, maxValue, defaultValue])
+  }, [isNumberInput, minValue, maxValue, defaultValue, disabled, onChange])
 
   return (
     <FormField

src/components/monitor/DynamicPlayer/StoryboardBuffer.tsx

@@ -29,6 +29,7 @@ export function StoryboardBuffer({
         className
       )}
       src={src}
+      alt="storyboard"
     />
   )
 }

src/components/monitor/DynamicPlayer/index.tsx

@@ -69,10 +69,8 @@ export const DynamicPlayer = ({
     return () => {
       clearTimeout(timeoutRef.current)
     }
-  }, [
-    currentSegmentKey,
-    preloadSegmentKey
-  ])
+  // eslint-disable-next-line
+  }, [currentSegmentKey, preloadSegmentKey])
 
   return (
     <div className={cn(`

src/components/monitor/StaticPlayer/index.tsx

@@ -44,7 +44,7 @@ export function StaticPlayer({
   useEffect(() => {
     if (!ref.current) { return }
     setStaticVideoRef(ref.current)
-  }, [ref])
+  }, [setStaticVideoRef])
 
   const placeholder = <div
     className="

src/components/toolbars/top-menu/file/index.tsx

@@ -42,7 +42,7 @@ export function TopMenuFile() {
       }
       await openClapUrl(clapUrl)
     })()
-  }, [clapUrl])
+  }, [openClapUrl, clapUrl])
 
   // const setShowSettings = useUISettings(s => s.setShowSettings)
   useHotkeys('ctrl+o', () => openFilePicker(), { preventDefault: true }, [])

src/components/toolbars/top-menu/view/index.tsx

@@ -22,22 +22,22 @@ export function TopMenuView() {
     if (typeof window !== "undefined") {
       ref.current = document.body
     }
-  }, [])
+  }, [ref])
 
-  const showTimeline = useUI((s) => s.showTimeline)
-  const setShowTimeline = useUI((s) => s.setShowTimeline)
+  const showTimeline = useUI(s => s.showTimeline)
+  const setShowTimeline = useUI(s => s.setShowTimeline)
 
-  const showExplorer = useUI((s) => s.showExplorer)
-  const setShowExplorer = useUI((s) => s.setShowExplorer)
+  const showExplorer = useUI(s => s.showExplorer)
+  const setShowExplorer = useUI(s => s.setShowExplorer)
 
-  const showAssistant = useUI((s) => s.showAssistant)
-  const setShowAssistant = useUI((s) => s.setShowAssistant)
+  const showAssistant = useUI(s => s.showAssistant)
+  const setShowAssistant = useUI(s => s.setShowAssistant)
 
-  const showVideoPlayer = useUI((s) => s.showVideoPlayer)
-  const setShowVideoPlayer = useUI((s) => s.setShowVideoPlayer)
+  const showVideoPlayer = useUI(s => s.showVideoPlayer)
+  const setShowVideoPlayer = useUI(s => s.setShowVideoPlayer)
 
-  const followCursor = useUI((s) => s.followCursor)
-  const setFollowCursor = useUI((s) => s.setFollowCursor)
+  const followCursor = useUI(s => s.followCursor)
+  const setFollowCursor = useUI(s => s.setFollowCursor)
 
   const hasBetaAccess = useUI(s => s.hasBetaAccess)
 

src/components/tree-browsers/model-tree-browser/index.tsx

@@ -25,18 +25,15 @@ export function ModelTreeBrowser() {
   const newReplicateCollections = useReplicateCollections()
   useEffect(() => {
     setReplicateCollections(newReplicateCollections)
-  }, [
-    JSON.stringify(newReplicateCollections) // ... yeah, I know, I know..
-  ])
+  // eslint-disable-next-line
+  }, [JSON.stringify(newReplicateCollections)]) // ... yeah, I know, I know..
   
   const newCivitaiCollections = useCivitaiCollections()
   useEffect(() => {
     setCivitaiCollections(newCivitaiCollections)
-  }, [
-    JSON.stringify(newCivitaiCollections) // ... yeah, I know, I know..
-  ])
+  // eslint-disable-next-line
+  }, [JSON.stringify(newCivitaiCollections)]) // ... yeah, I know, I know..
   
-
   /**
    * handle click on tree node
    * yes, this is where the magic happens!

src/lib/hf/parseHuggingFaceHubId.test.ts

@@ -0,0 +1,21 @@
+import { expect, test } from 'vitest'
+
+import { parseHuggingFaceHubId } from './parseHuggingFaceHubId'
+
+test('parseHuggingFaceHubId', () => {
+  expect(parseHuggingFaceHubId("stabilityai/stable-cascade")).toStrictEqual({
+    category: "models",
+    categoryAndOwnerAndId: "models/stabilityai/stable-cascade",
+    id: "stable-cascade",
+    owner: "stabilityai",
+    ownerAndId: "stabilityai/stable-cascade",
+  })
+  expect(parseHuggingFaceHubId("spaces/jbilcke-hf/ai-comic-factory")).toStrictEqual({
+    category: "spaces",
+    categoryAndOwnerAndId: "spaces/jbilcke-hf/ai-comic-factory",
+    id: "ai-comic-factory",
+    owner: "jbilcke-hf",
+    ownerAndId: "jbilcke-hf/ai-comic-factory",
+  })
+})
+

src/lib/hooks/useAnimationFrame.ts

@@ -18,5 +18,6 @@ export function useAnimationFrame(callback: (time: number) => void, deps: Depend
   useEffect(() => {
     requestRef.current = requestAnimationFrame(animate);
     return () => cancelAnimationFrame(requestRef.current as any);
+  // eslint-disable-next-line
   }, deps); // Make sure the effect runs only once
 }

src/lib/hooks/useOpenFilePicker.ts

@@ -1,18 +1,18 @@
-import { useEffect, useState, useTransition } from "react"
+import { useEffect, useState } from "react"
 import { useFilePicker } from "use-file-picker"
 
 import { parseFileName } from "@/services/io/parseFileName"
 import { useIO } from "@/services/io/useIO"
 
+const supportedExtensions = ['clap', 'txt']
+
 export function useOpenFilePicker() {
   const [isLoading, setIsLoading] = useState(false)
   const openClapBlob = useIO(s => s.openClapBlob)
   const openScreenplay = useIO(s => s.openScreenplay)
 
-  const supportedExtensions = ['clap', 'txt']
-
   const { openFilePicker, filesContent, loading } = useFilePicker({
-    accept: supportedExtensions.map(ext => `.${ext}`),
+    accept: ['clap', 'txt'].map(ext => `.${ext}`),
     readAs: "ArrayBuffer"
   })
 
@@ -58,7 +58,7 @@ export function useOpenFilePicker() {
       }
     }
     fn()
-  }, [fileData?.name])
+  }, [fileData?.name, fileData?.content, openClapBlob, openScreenplay])
 
   return { openFilePicker, filesContent, fileData, isLoading: loading || isLoading } 
 }

src/lib/hooks/useRequestAnimationFrame.ts

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useRef } from 'react'
 
 type Config = {
   duration?: number
@@ -30,8 +30,8 @@ export const useRequestAnimationFrame = (
   }
     */
 
-  const frame = React.useRef(0)
-  const firstFrameTime = React.useRef(performance.now())
+  const frame = useRef(0)
+  const firstFrameTime = useRef(performance.now())
 
   const animate = (now: number) => {
     // calculate at what time fraction we are currently of whole time of animation
@@ -48,7 +48,7 @@ export const useRequestAnimationFrame = (
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (shouldAnimate) {
       firstFrameTime.current = performance.now()
       frame.current = requestAnimationFrame(animate)
@@ -57,6 +57,7 @@ export const useRequestAnimationFrame = (
     }
 
     return () => cancelAnimationFrame(frame.current)
+  // eslint-disable-next-line
   }, [shouldAnimate])
 }
 

src/lib/utils/base64DataUriToBlob.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from 'vitest'
+
+import { base64DataUriToBlob } from './base64DataUriToBlob'
+import { blobToBase64DataUri } from './blobToBase64DataUri'
+
+const gifUri = `data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7`
+
+const pngUri = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=`
+
+const mp4Uri = `data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAtJtZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE2NCByMzEwMyA5NDFjYWU2IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAyMiAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTEgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTIzLjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAVZYiEABX//vfJ78Cm6/X2tb9gAQD5AAADBm1vb3YAAABsbXZoZAAAAADgYBEw4GARMAAAA+gAAAPoAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIwdHJhawAAAFx0a2hkAAAAA+BgETDgYBEwAAAAAQAAAAAAAAPoAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAUAAAAFAAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAABAAAD6AAAAAAAAQAAAAABqG1kaWEAAAAgbWRoZAAAAADgYBEw4GARMAAAQAAAAEAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAAVNtaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAETc3RibAAAAK9zdHNkAAAAAAAAAAEAAACfYXZjMQAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAUABQASAAAAEgAAAAAAAAAARVMYXZjNTkuNTYuMTAwIGxpYngyNjQAAAAAAAAAAAAAABj//wAAADVhdmNDAWQAM//hABhnZAAzrNlJeeeEAAADAAQAAAMACDxgxlgBAAZo6+PLIsD9+PgAAAAAFGJ0cnQAAAAAAAAWUAAAFlAAAAAYc3R0cwAAAAAAAAABAAAAAQAAQAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAACygAAAAEAAAAUc3RjbwAAAAAAAAABAAAAMAAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTkuMzUuMTAw`
+
+test('base64DataUriToBlob', async () => {
+  expect(await blobToBase64DataUri(base64DataUriToBlob(gifUri))).toBe(gifUri)
+  expect(await blobToBase64DataUri(base64DataUriToBlob(pngUri))).toBe(pngUri)
+  expect(await blobToBase64DataUri(base64DataUriToBlob(mp4Uri))).toBe(mp4Uri)
+})
+

src/lib/utils/blobToBase64DataUri.ts

@@ -1,4 +1,12 @@
-export const blobToBase64DataUri = async (blob: Blob): Promise<string> => {
-  const buffer = Buffer.from(await blob.arrayBuffer())
-  return "data:" + blob.type + ';base64,' + buffer.toString('base64')
-}
+export const blobToBase64DataUri = async (blob: Blob): Promise<string> =>  
+  new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    
+    reader.onload = (event) => {
+      const dataUrl = (event.target?.result || "") as string
+      if (!dataUrl) { throw new Error(`invalid blob`) }
+      resolve(dataUrl)
+    };
+      
+    reader.readAsDataURL(blob)
+  })

src/lib/utils/cn.test.ts

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest'
+
+import { cn } from './cn'
+
+test('cn', () => {
+  expect(cn("p-4 m-4", true ? "m-4 p-2" : "p-4 m-2")).toBe("m-4 p-2")
+})
+

src/lib/utils/getTypeAndExtension.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from 'vitest'
+
+import { getTypeAndExtension } from './getTypeAndExtension'
+
+const gifUri = `data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7`
+
+const pngUri = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=`
+
+const mp4Uri = `data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAtJtZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE2NCByMzEwMyA5NDFjYWU2IC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAyMiAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTEgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTIzLjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAVZYiEABX//vfJ78Cm6/X2tb9gAQD5AAADBm1vb3YAAABsbXZoZAAAAADgYBEw4GARMAAAA+gAAAPoAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIwdHJhawAAAFx0a2hkAAAAA+BgETDgYBEwAAAAAQAAAAAAAAPoAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAUAAAAFAAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAABAAAD6AAAAAAAAQAAAAABqG1kaWEAAAAgbWRoZAAAAADgYBEw4GARMAAAQAAAAEAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAAVNtaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAETc3RibAAAAK9zdHNkAAAAAAAAAAEAAACfYXZjMQAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAUABQASAAAAEgAAAAAAAAAARVMYXZjNTkuNTYuMTAwIGxpYngyNjQAAAAAAAAAAAAAABj//wAAADVhdmNDAWQAM//hABhnZAAzrNlJeeeEAAADAAQAAAMACDxgxlgBAAZo6+PLIsD9+PgAAAAAFGJ0cnQAAAAAAAAWUAAAFlAAAAAYc3R0cwAAAAAAAAABAAAAAQAAQAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAACygAAAAEAAAAUc3RjbwAAAAAAAAABAAAAMAAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTkuMzUuMTAw`
+
+test('getTypeAndExtension', () => {
+  expect(getTypeAndExtension(gifUri)).toStrictEqual({
+    assetFileFormat: "image/gif",
+    category: "image",
+    extension: "gif",
+    outputType: "image",
+  })
+  expect(getTypeAndExtension(pngUri)).toStrictEqual({
+    assetFileFormat: "image/png",
+    category: "image",
+    extension: "png",
+    outputType: "image",
+  })
+  expect(getTypeAndExtension(mp4Uri)).toStrictEqual({
+    assetFileFormat: "video/mp4",
+    category: "video",
+    extension: "mp4",
+    outputType: "video",
+  })
+})
+

src/lib/utils/getValidComfyWorkflowTemplate.test.ts

@@ -0,0 +1,16 @@
+import { expect, test } from 'vitest'
+
+import { getValidComfyWorkflowTemplate } from './getValidComfyWorkflowTemplate'
+
+const defaultJson = {}
+const defaultStr = JSON.stringify(defaultJson, null, 2)
+
+const mockJson = {  "3": {    "inputs": {      "seed": 156680208700286,      "steps": 10,      "cfg": 2.5,      "sampler_name": "dpmpp_2m_sde",      "scheduler": "karras",      "denoise": 1,      "model": [        "4",        0      ],      "positive": [        "6",        0      ],      "negative": [        "7",        0      ],      "latent_image": [        "5",        0      ]    },    "class_type": "KSampler",    "_meta": {      "title": "KSampler"    }  },  "4": {    "inputs": {      "ckpt_name": "SDXL-Flash.safetensors"    },    "class_type": "CheckpointLoaderSimple",    "_meta": {      "title": "Load Checkpoint"    }  },  "5": {    "inputs": {      "width": 1024,      "height": 1024,      "batch_size": 1    },    "class_type": "EmptyLatentImage",    "_meta": {      "title": "Empty Latent Image"    }  },  "6": {    "inputs": {      "text": "beautiful scenery nature glass bottle landscape, purple galaxy bottle,",      "clip": [        "4",        1      ]    },    "class_type": "CLIPTextEncode",    "_meta": {      "title": "CLIP Text Encode (Prompt)"    }  },  "7": {    "inputs": {      "text": "text, watermark",      "clip": [        "4",        1      ]    },    "class_type": "CLIPTextEncode",    "_meta": {      "title": "CLIP Text Encode (Prompt)"    }  },  "8": {    "inputs": {      "samples": [        "3",        0      ],      "vae": [        "4",        2      ]    },    "class_type": "VAEDecode",    "_meta": {      "title": "VAE Decode"    }  },  "9": {    "inputs": {      "filename_prefix": "ComfyUI",      "images": [        "8",        0      ]    },    "class_type": "SaveImage",    "_meta": {      "title": "Save Image"    }  }}
+const mockStr = JSON.stringify(mockJson, null, 2)
+
+// getValidComfyWorkflowTemplate takes a string, tries to unpack it as JSON to validate it, then returns a string
+test('getValidComfyWorkflowTemplate', () => {
+  expect(getValidComfyWorkflowTemplate(null, defaultStr)).toBe(defaultStr)
+  expect(getValidComfyWorkflowTemplate(mockStr, defaultStr)).toBe(mockStr)
+})
+

src/lib/utils/getValidComfyWorkflowTemplate.ts

@@ -1,3 +1,10 @@
+/**
+ * Take a string, try to unpack it as JSON to validate it, return a string
+ * 
+ * @param something 
+ * @param defaultComfyWorkflowTemplate 
+ * @returns 
+ */
 export function getValidComfyWorkflowTemplate(something: any, defaultComfyWorkflowTemplate: string) {
   const strValue = `${something || defaultComfyWorkflowTemplate}`
   try {

src/services/assistant/useVoiceAssistant.ts

@@ -9,5 +9,5 @@ export function useVoiceAssistant() {
 
   useEffect(() =>  {
     processMessage(transcript)
-  }, [transcript])
+  }, [transcript, processMessage])
 }