fix video syncing

jbilcke-hf · Jul 30, 2024 · d573c34 · d573c34
1 parent 2dbfd92
commit d573c34
Show file tree

Hide file tree

Showing 12 changed files with 232 additions and 142 deletions.
diff --git a/src/app/api/resolve/providers/stabilityai/generateVideo.ts b/src/app/api/resolve/providers/stabilityai/generateVideo.ts
@@ -150,9 +150,10 @@ async function pollGenerationResult(
             throw new Error(errors?.join('\n'))
           }
           if (
-            finish_reason !=
+            finish_reason !==
             StabilityAIVImageToVideoFetchhGenerationFinishReason.SUCCESS
           ) {
+            console.log('finish_reason:', finish_reason)
             throw new Error('Content filtered')
           }
           resolve(`data:video/mp4;base64,${video}`)

diff --git a/src/components/editors/EntityEditor/EntityTree/index.tsx b/src/components/editors/EntityEditor/EntityTree/index.tsx
@@ -10,6 +10,7 @@ import { Tree } from '@/components/core/tree'
 
 import { useEntityTree } from './useEntityTree'
 import { ClapEntity } from '@aitube/clap'
+import { useEntityEditor } from '@/services'
 
 export function EntityTree({
   className = '',
@@ -28,42 +29,29 @@ export function EntityTree({
     setProjectEntities(entities)
   }, [entitiesChanged, entities.map((e) => e.id).join(',')])
 
-  /**
-   * handle click on tree node
-   * yes, this is where the magic happens!
-   *
-   * @param id
-   * @param nodeType
-   * @param node
-   * @returns
-   */
-  const handleOnChange = async (
-    id: string | null,
-    nodeType?: LibraryNodeType,
-    nodeItem?: TreeNodeItem
-  ) => {
-    console.log(`calling selectTreeNodeById(id)`)
-    selectTreeNode(id, nodeType, nodeItem)
+  const setCurrent = useEntityEditor((s) => s.setCurrent)
+  const selectedNodeItem = useEntityTree((s) => s.selectedNodeItem)
+  const selectedNodeType = useEntityTree((s) => s.selectedNodeType)
 
-    if (!nodeType || !nodeItem) {
-      console.log('tree-browser: clicked on an undefined node')
+  useEffect(() => {
+    if (!selectedNodeType || !selectedNodeItem) {
+      setCurrent(undefined)
       return
     }
-    if (isClapEntity(nodeType, nodeItem)) {
-      // ClapEntity
+
+    if (isClapEntity(selectedNodeType, selectedNodeItem)) {
+      const entity: ClapEntity = selectedNodeItem
+
+      setCurrent(entity)
     } else {
-      console.log(
-        `tree-browser: no action attached to ${nodeType}, so skipping`
-      )
-      return
+      // must be a different kind of node (eg. a collection, list or folder)
     }
-    console.log(`tree-browser: clicked on a ${nodeType}`, nodeItem)
-  }
+  }, [selectedNodeType, selectedNodeItem])
 
   return (
     <Tree.Root<LibraryNodeType, TreeNodeItem>
       value={selectedTreeNodeId}
-      onChange={handleOnChange}
+      onChange={selectTreeNode}
       className={cn(`not-prose h-full w-full px-2 pt-2`, className)}
       label="Entities"
     >

diff --git a/src/components/editors/EntityEditor/EntityTree/useEntityTree.ts b/src/components/editors/EntityEditor/EntityTree/useEntityTree.ts
@@ -189,13 +189,14 @@ export const useEntityTree = create<{
   */
 
   selectedNodeItem: undefined,
+  /*
   selectEntity: (entity?: ClapEntity) => {
     if (entity) {
       console.log(
-        'TODO julian: change this code to search in the entity collections'
+        'TODO julian: change this code to search in the entity collections children instead'
       )
       const selectedTreeNode = get().libraryTreeRoot.find(
-        (node) => node.data?.id === entity.id
+        (node) =>(node.data as any)?.id === entity.id
       )
 
       // set({ selectedTreeNode })
@@ -207,6 +208,7 @@ export const useEntityTree = create<{
       set({ selectedNodeItem: undefined })
     }
   },
+  */
 
   // selectedTreeNode: undefined,
   selectedTreeNodeId: null,

diff --git a/src/components/editors/FilterEditor/FilterTree/index.tsx b/src/components/editors/FilterEditor/FilterTree/index.tsx
@@ -3,12 +3,21 @@
 import { useEffect } from 'react'
 
 import { cn } from '@/lib/utils'
-import { isClapEntity } from '@/components/tree-browsers/utils/isSomething'
+import {
+  isClapEntity,
+  isFilter,
+  isFilterWithParams,
+} from '@/components/tree-browsers/utils/isSomething'
 import { TreeNodeItem, LibraryNodeType } from '@/components/tree-browsers/types'
 import { Tree } from '@/components/core/tree'
 
 import { useFilterTree } from './useFilterTree'
 import { useFilterEditor } from '@/services/editors/filter-editor/useFilterEditor'
+import {
+  Filter,
+  FilterParams,
+  FilterWithParams,
+} from '@aitube/clapper-services'
 
 export function FilterTree({
   className = '',
@@ -23,47 +32,59 @@ export function FilterTree({
   const availableFilters = useFilterEditor((s) => s.availableFilters)
   const activeFilters = useFilterEditor((s) => s.activeFilters)
   const current = useFilterEditor((s) => s.current)
+  const setCurrent = useFilterEditor((s) => s.setCurrent)
 
   useEffect(() => {
     setAvailableFilters(availableFilters)
   }, [availableFilters.map((f) => f.id).join(',')])
 
-  /**
-   * handle click on tree node
-   * yes, this is where the magic happens!
-   *
-   * @param id
-   * @param nodeType
-   * @param node
-   * @returns
-   */
-  const handleOnChange = async (
-    id: string | null,
-    nodeType?: LibraryNodeType,
-    nodeItem?: TreeNodeItem
-  ) => {
-    console.log(`calling selectTreeNodeById(id)`)
-    selectTreeNode(id, nodeType, nodeItem)
-
-    if (!nodeType || !nodeItem) {
-      console.log('tree-browser: clicked on an undefined node')
+  const selectedNodeItem = useFilterTree((s) => s.selectedNodeItem)
+  const selectedNodeType = useFilterTree((s) => s.selectedNodeType)
+
+  useEffect(() => {
+    console.log('FilterTree:', {
+      selectedNodeType,
+      selectedNodeItem,
+    })
+    if (!selectedNodeType || !selectedNodeItem) {
+      setCurrent(undefined)
       return
     }
-    if (isClapEntity(nodeType, nodeItem)) {
-      // ClapEntity
+
+    if (isFilter(selectedNodeType, selectedNodeItem)) {
+      console.log('is Filter!')
+      const filter: Filter = selectedNodeItem
+
+      const parameters: FilterParams = {}
+      for (const field of filter.parameters) {
+        parameters[field.id] = field.defaultValue
+      }
+
+      const filterWithParams: FilterWithParams = {
+        filter,
+        parameters,
+      }
+
+      const pipeline = [filterWithParams]
+
+      setCurrent(pipeline)
+    } else if (isFilterWithParams(selectedNodeType, selectedNodeItem)) {
+      console.log('is FilterWithParams!')
+      const filterWithParams: FilterWithParams = selectedNodeItem
+
+      const pipeline = [filterWithParams]
+
+      setCurrent(pipeline)
     } else {
-      console.log(
-        `tree-browser: no action attached to ${nodeType}, so skipping`
-      )
-      return
+      console.log('is not a filter..')
+      // must be a different kind of node (eg. a collection, list or folder)
     }
-    console.log(`tree-browser: clicked on a ${nodeType}`, nodeItem)
-  }
+  }, [selectedNodeType, selectedNodeItem])
 
   return (
     <Tree.Root<LibraryNodeType, TreeNodeItem>
       value={selectedTreeNodeId}
-      onChange={handleOnChange}
+      onChange={selectTreeNode}
       className={cn(`not-prose h-full w-full px-2 pt-2`, className)}
       label="Filters"
     >

diff --git a/src/components/editors/FilterEditor/FilterTree/useFilterTree.ts b/src/components/editors/FilterEditor/FilterTree/useFilterTree.ts
@@ -57,7 +57,7 @@ export const useFilterTree = create<{
       children: [
         {
           id: UUID(),
-          nodeType: 'DEFAULT_TREE_NODE_EMPTY',
+          nodeType: 'FILTER_TREE_NODE_ITEM_FILTER',
           label: 'Empty',
           icon: icons.project,
           className: collectionClassName,
@@ -84,11 +84,12 @@ export const useFilterTree = create<{
       className: libraryClassName,
       isExpanded: true,
       children: filters.map((filter) => ({
-        id: UUID(),
-        nodeType: 'DEFAULT_TREE_NODE_ITEM',
+        id: filter.id,
+        nodeType: 'FILTER_TREE_NODE_ITEM_FILTER',
         label: filter.label,
         icon: icons.imageFilter,
         className: collectionClassName,
+        data: filter,
       })),
     }
 
@@ -110,24 +111,26 @@ export const useFilterTree = create<{
   */
 
   selectedNodeItem: undefined,
-  selectEntity: (entity?: ClapEntity) => {
-    if (entity) {
+  /*
+  selectFilter: (filter?: Filter) => {
+    if (filter) {
       console.log(
-        'TODO julian: change this code to search in the entity collections'
+        'TODO julian: change this code to search in the filter collections children instead'
       )
       const selectedTreeNode = get().libraryTreeRoot.find(
-        (node) => node.data?.id === entity.id
+        (node) => (node.data as any)?.id === filter.id
       )
 
       // set({ selectedTreeNode })
       set({ selectedTreeNodeId: selectedTreeNode?.id || null })
-      set({ selectedNodeItem: entity })
+      set({ selectedNodeItem: filter })
     } else {
       // set({ selectedTreeNode: undefined })
       set({ selectedTreeNodeId: null })
       set({ selectedNodeItem: undefined })
     }
   },
+  */
 
   // selectedTreeNode: undefined,
   selectedTreeNodeId: null,

diff --git a/src/components/editors/FilterEditor/FilterViewer/index.tsx b/src/components/editors/FilterEditor/FilterViewer/index.tsx
@@ -1,4 +1,9 @@
-import { FormSection } from '@/components/forms'
+import {
+  FormField,
+  FormInput,
+  FormSection,
+  FormSwitch,
+} from '@/components/forms'
 import { useFilterEditor, useUI } from '@/services'
 
 export function FilterViewer() {
@@ -26,8 +31,40 @@ export function FilterViewer() {
   }
 
   return (
-    <FormSection label={'Filter Editor'} className="p-4">
-      <p>Put filter parameters</p>
-    </FormSection>
+    <>
+      {current.map(({ filter, parameters }) => (
+        <FormSection key={filter.id} label={filter.label} className="p-4">
+          {filter.parameters.map((filter) => (
+            <FormField key={filter.id}>
+              {filter.type === 'string' && (
+                <FormInput
+                  type="text"
+                  label={filter.label}
+                  value={parameters[filter.id]}
+                  defaultValue={filter.defaultValue}
+                />
+              )}
+              {filter.type === 'number' && (
+                <FormInput
+                  type="number"
+                  label={filter.label}
+                  value={parameters[filter.id]}
+                  defaultValue={filter.defaultValue}
+                />
+              )}
+              {filter.type === 'boolean' && (
+                <FormSwitch
+                  label={filter.label}
+                  checked={!!parameters[filter.id]}
+                  onCheckedChange={() => {
+                    // TODO
+                  }}
+                />
+              )}
+            </FormField>
+          ))}
+        </FormSection>
+      ))}
+    </>
   )
 }
diff --git a/src/components/editors/WorkflowEditor/WorkflowTree/index.tsx b/src/components/editors/WorkflowEditor/WorkflowTree/index.tsx
@@ -16,42 +16,12 @@ export function WorkflowTree({
   const selectTreeNode = useWorkflowTree((s) => s.selectTreeNode)
   const selectedTreeNodeId = useWorkflowTree((s) => s.selectedTreeNodeId)
 
-  /**
-   * handle click on tree node
-   * yes, this is where the magic happens!
-   *
-   * @param id
-   * @param nodeType
-   * @param node
-   * @returns
-   */
-  const handleOnChange = async (
-    id: string | null,
-    nodeType?: LibraryNodeType,
-    nodeItem?: TreeNodeItem
-  ) => {
-    console.log(`calling selectTreeNodeById(id)`)
-    selectTreeNode(id, nodeType, nodeItem)
-
-    if (!nodeType || !nodeItem) {
-      console.log('tree-browser: clicked on an undefined node')
-      return
-    }
-    if (isClapEntity(nodeType, nodeItem)) {
-      // ClapEntity
-    } else {
-      console.log(
-        `tree-browser: no action attached to ${nodeType}, so skipping`
-      )
-      return
-    }
-    console.log(`tree-browser: clicked on a ${nodeType}`, nodeItem)
-  }
+  // TODO: allow selecting a workflow (see example of filter/entity tree)
 
   return (
     <Tree.Root<LibraryNodeType, TreeNodeItem>
       value={selectedTreeNodeId}
-      onChange={handleOnChange}
+      onChange={selectTreeNode}
       className={cn(`not-prose h-full w-full px-2 pt-2`, className)}
       label="Workflows"
     >