work in progress

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clapper",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": true,
   "description": "🎬 Clapper",
   "license": "GPL-3.0-only",
@@ -38,9 +38,9 @@
   "dependencies": {
     "@aitube/broadway": "0.1.2",
     "@aitube/clap": "0.1.2",
-    "@aitube/clapper-services": "0.1.2-8",
+    "@aitube/clapper-services": "0.1.2-14",
     "@aitube/engine": "0.1.2",
-    "@aitube/timeline": "0.1.2-2",
+    "@aitube/timeline": "0.1.2-3",
     "@fal-ai/serverless-client": "^0.13.0",
     "@ffmpeg/ffmpeg": "^0.12.10",
     "@ffmpeg/util": "^0.12.1",

src/app/main.tsx

@@ -26,6 +26,7 @@ import { ScriptEditor } from '@/components/editors/ScriptEditor'
 import { SegmentEditor } from '@/components/editors/SegmentEditor'
 import { EntityEditor } from '@/components/editors/EntityEditor'
 import { WorkflowEditor } from '@/components/editors/WorkflowEditor'
+import { FilterEditor } from '@/components/editors/FilterEditor'
 
 type DroppableThing = { files: File[] }
 
@@ -117,7 +118,7 @@ function MainContent() {
     <FruityDesktop>
       <FruityWindow
         id="ScriptEditor"
-        title="Script editor"
+        title="Screenplay"
         defaultWidth={375}
         minWidth={200}
         defaultHeight={370}
@@ -131,7 +132,7 @@ function MainContent() {
 
       <FruityWindow
         id="SegmentEditor"
-        title="segment editor"
+        title="Segments"
         defaultWidth={342}
         minWidth={200}
         defaultHeight={395}
@@ -145,7 +146,7 @@ function MainContent() {
 
       <FruityWindow
         id="EntityEditor"
-        title="Entity editor"
+        title="Entities"
         defaultWidth={544}
         minWidth={200}
         defaultHeight={318}
@@ -157,21 +158,33 @@ function MainContent() {
         <EntityEditor />
       </FruityWindow>
 
-      {hasBetaAccess && (
-        <FruityWindow
-          id="WorkflowEditor"
-          title="Workflow editor"
-          defaultWidth={459}
-          minWidth={200}
-          defaultHeight={351}
-          minHeight={100}
-          defaultX={536}
-          defaultY={3}
-          canBeClosed={false}
-        >
-          <WorkflowEditor />
-        </FruityWindow>
-      )}
+      <FruityWindow
+        id="WorkflowEditor"
+        title="Workflows"
+        defaultWidth={459}
+        minWidth={200}
+        defaultHeight={351}
+        minHeight={100}
+        defaultX={536}
+        defaultY={3}
+        canBeClosed={false}
+      >
+        <WorkflowEditor />
+      </FruityWindow>
+
+      <FruityWindow
+        id="FilterEditor"
+        title="Filters"
+        defaultWidth={459}
+        minWidth={200}
+        defaultHeight={351}
+        minHeight={100}
+        defaultX={936}
+        defaultY={400}
+        canBeClosed={false}
+      >
+        <FilterEditor />
+      </FruityWindow>
 
       <FruityWindow
         id="Monitor"

src/components/editors/FilterEditor/FilterTree/index.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { cn } from '@/lib/utils'
+import { isClapEntity } 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'
+
+export function FilterTree({
+  className = '',
+}: {
+  className?: string
+} = {}) {
+  const libraryTreeRoot = useFilterTree((s) => s.libraryTreeRoot)
+  const selectTreeNode = useFilterTree((s) => s.selectTreeNode)
+  const selectedTreeNodeId = useFilterTree((s) => s.selectedTreeNodeId)
+  const setAvailableFilters = useFilterTree((s) => s.setAvailableFilters)
+
+  const availableFilters = useFilterEditor((s) => s.availableFilters)
+  const activeFilters = useFilterEditor((s) => s.activeFilters)
+  const current = useFilterEditor((s) => s.current)
+
+  useEffect(() => {
+    console.log('TODO: populate the filter tree')
+  }, [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')
+      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)
+  }
+
+  return (
+    <Tree.Root<LibraryNodeType, TreeNodeItem>
+      value={selectedTreeNodeId}
+      onChange={handleOnChange}
+      className={cn(`not-prose h-full w-full px-2 pt-2`, className)}
+      label="Filters"
+    >
+      {libraryTreeRoot.map((node) => (
+        <Tree.Node node={node} key={node.id} />
+      ))}
+    </Tree.Root>
+  )
+}

src/components/editors/FilterEditor/FilterTree/useFilterTree.ts

@@ -0,0 +1,147 @@
+'use client'
+
+import { create } from 'zustand'
+import { ClapEntity, UUID } from '@aitube/clap'
+import { Filter } from '@aitube/clapper-services'
+
+import {
+  LibraryTreeNode,
+  TreeNodeItem,
+  LibraryNodeType,
+} from '@/components/tree-browsers/types'
+import { icons } from '@/components/icons'
+import {
+  collectionClassName,
+  libraryClassName,
+} from '@/components/tree-browsers/style/treeNodeStyles'
+
+export const useFilterTree = create<{
+  availableFiltersLibraryTreeNodeId: string
+
+  // activeFiltersLibraryTreeNodeId: string
+
+  libraryTreeRoot: LibraryTreeNode[]
+  init: () => void
+
+  /**
+   * Load available filters into the tree
+   *
+   * @param collections
+   * @returns
+   */
+  setAvailableFilters: (filters: Filter[]) => void
+
+  // we support those all selection modes for convenience - please keep them!
+  selectedNodeItem?: TreeNodeItem
+  selectedNodeType?: LibraryNodeType
+  selectTreeNode: (
+    treeNodeId?: string | null,
+    nodeType?: LibraryNodeType,
+    nodeItem?: TreeNodeItem
+  ) => void
+  selectedTreeNodeId: string | null
+}>((set, get) => ({
+  availableFiltersLibraryTreeNodeId: '',
+
+  // activeFiltersLibraryTreeNodeId: '',
+
+  libraryTreeRoot: [],
+  init: () => {
+    const availableFilterLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: 'TREE_ROOT_PROJECT',
+      label: 'Available filters',
+      icon: icons.project,
+      className: libraryClassName,
+      isExpanded: true,
+      children: [
+        {
+          id: UUID(),
+          nodeType: 'DEFAULT_TREE_NODE_EMPTY',
+          label: 'Empty',
+          icon: icons.project,
+          className: collectionClassName,
+        },
+      ],
+    }
+
+    const libraryTreeRoot = [availableFilterLibrary]
+
+    set({
+      availableFiltersLibraryTreeNodeId: availableFilterLibrary.id,
+      libraryTreeRoot,
+      selectedNodeItem: undefined,
+      selectedTreeNodeId: null,
+    })
+  },
+
+  setAvailableFilters: (filters: Filter[]) => {
+    const availableFilterLibrary: LibraryTreeNode = {
+      id: UUID(),
+      nodeType: 'TREE_ROOT_PROJECT',
+      label: 'Filters',
+      icon: icons.project,
+      className: libraryClassName,
+      isExpanded: true,
+      children: [
+        {
+          id: UUID(),
+          nodeType: 'DEFAULT_TREE_NODE_EMPTY',
+          label: 'Empty',
+          icon: icons.project,
+          className: collectionClassName,
+        },
+      ],
+    }
+
+    const libraryTreeRoot = [availableFilterLibrary]
+
+    set({
+      availableFiltersLibraryTreeNodeId: availableFilterLibrary.id,
+      libraryTreeRoot,
+      selectedNodeItem: undefined,
+      selectedTreeNodeId: null,
+    })
+  },
+
+  /*
+  setCommunityCollections: (collections: CommunityEntityCollection[]) => {
+    // TODO: implement this
+   
+  },
+  */
+
+  selectedNodeItem: undefined,
+  selectEntity: (entity?: ClapEntity) => {
+    if (entity) {
+      console.log(
+        'TODO julian: change this code to search in the entity collections'
+      )
+      const selectedTreeNode = get().libraryTreeRoot.find(
+        (node) => node.data?.id === entity.id
+      )
+
+      // set({ selectedTreeNode })
+      set({ selectedTreeNodeId: selectedTreeNode?.id || null })
+      set({ selectedNodeItem: entity })
+    } else {
+      // set({ selectedTreeNode: undefined })
+      set({ selectedTreeNodeId: null })
+      set({ selectedNodeItem: undefined })
+    }
+  },
+
+  // selectedTreeNode: undefined,
+  selectedTreeNodeId: null,
+  selectTreeNode: (
+    treeNodeId?: string | null,
+    nodeType?: LibraryNodeType,
+    nodeItem?: TreeNodeItem
+  ) => {
+    set({ selectedTreeNodeId: treeNodeId ? treeNodeId : undefined })
+    set({ selectedNodeType: nodeType ? nodeType : undefined })
+    set({ selectedNodeItem: nodeItem ? nodeItem : undefined })
+  },
+}))
+
+useFilterTree.getState().init()

src/components/editors/FilterEditor/FilterViewer/index.tsx

@@ -0,0 +1,33 @@
+import { FormSection } from '@/components/forms'
+import { useFilterEditor, useUI } from '@/services'
+
+export function FilterViewer() {
+  const current = useFilterEditor((s) => s.current)
+  const setCurrent = useFilterEditor((s) => s.setCurrent)
+  const undo = useFilterEditor((s) => s.undo)
+  const redo = useFilterEditor((s) => s.redo)
+
+  const hasBetaAccess = useUI((s) => s.hasBetaAccess)
+
+  if (!hasBetaAccess) {
+    return (
+      <FormSection label={'Filter Editor'} className="p-4">
+        Storyboard filters are WIP and not available yet.
+      </FormSection>
+    )
+  }
+
+  if (!current) {
+    return (
+      <FormSection label={'Filter Editor'} className="p-4">
+        No filter selected.
+      </FormSection>
+    )
+  }
+
+  return (
+    <FormSection label={'Filter Editor'} className="p-4">
+      <p>Put filter parameters</p>
+    </FormSection>
+  )
+}

src/components/editors/FilterEditor/index.tsx

@@ -0,0 +1,17 @@
+import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex'
+import { FilterTree } from './FilterTree'
+import { FilterViewer } from './FilterViewer'
+
+export function FilterEditor() {
+  return (
+    <ReflexContainer orientation="vertical">
+      <ReflexElement minSize={70} size={200}>
+        <FilterTree />
+      </ReflexElement>
+      <ReflexSplitter />
+      <ReflexElement minSize={70}>
+        <FilterViewer />
+      </ReflexElement>
+    </ReflexContainer>
+  )
+}

src/components/editors/ProjectEditor/index.tsx

@@ -12,7 +12,6 @@ export function ProjectEditor() {
 
   const current = useProjectEditor((s) => s.current)
   const setCurrent = useProjectEditor((s) => s.setCurrent)
-  const history = useProjectEditor((s) => s.history)
   const undo = useProjectEditor((s) => s.undo)
   const redo = useProjectEditor((s) => s.redo)
 

src/components/editors/SegmentEditor/index.tsx

@@ -13,7 +13,6 @@ export function SegmentEditor() {
   )
   const current = useSegmentEditor((s) => s.current)
   const setCurrent = useSegmentEditor((s) => s.setCurrent)
-  const history = useSegmentEditor((s) => s.history)
   const undo = useSegmentEditor((s) => s.undo)
   const redo = useSegmentEditor((s) => s.redo)
 

src/components/editors/WorkflowEditor/WorkflowViewer/ReactFlowCanvas/formats/comfyui/types.ts

@@ -2,7 +2,7 @@ export type ComfyuiWorkflow = {
   extra: {
     ds: {
       scale: number
-      offset: number[]
+      offset: { '0': number; '1': number }
     }
   }
   links: [number, number, number, number, number, string][]
@@ -18,37 +18,37 @@ export type ComfyuiWorkflowNode = {
   id: number
   pos: number[]
   mode: number
-  size: number[]
+  size: { '0': number; '1': number }
   type: string
-  color?: string
+  color?: string | null
   flags: {
-    collapsed?: boolean
+    collapsed?: boolean | null
   }
   order: number
   inputs?: ComfyuiWorkflowNodeInput[]
   outputs?: ComfyuiWorkflowNodeOutput[]
   properties: Record<string, any>
-  widgets_values?: any[]
+  widgets_values?: any | null
 }
 
 export type ComfyuiWorkflowNodeInput = {
-  link?: number
+  link?: number | null
   name: string
   type: string
-  label?: string
+  label?: string | null
   widget?: {
     name: string
-  }
-  slot_index?: number
+  } | null
+  slot_index?: number | null
 }
 
 export type ComfyuiWorkflowNodeOutput = {
   name: string
   type: string
-  label?: string
-  links?: number[]
+  label?: string | null
+  links?: number[] | null
   shape: number
-  slot_index?: number
+  slot_index?: number | null
 }
 
 export type ComfyuiWorkflowGroup = {

src/components/editors/WorkflowEditor/WorkflowViewer/ReactFlowCanvas/samples/comfyicu.ts

@@ -0,0 +1,394 @@
+import { ComfyuiWorkflow } from '../formats/comfyui/types'
+
+// live portrait
+export const comfyicu: ComfyuiWorkflow[] = [
+  {
+    extra: {
+      ds: {
+        scale: 0.8264462809917354,
+        offset: {
+          '0': 173.4048767089844,
+          '1': -0.9636010527610779,
+        },
+      },
+    },
+    links: [
+      [30, 8, 0, 19, 0, 'IMAGE'],
+      [32, 19, 0, 18, 0, 'IMAGE'],
+      [58, 1, 0, 30, 0, 'LIVEPORTRAITPIPE'],
+      [59, 4, 0, 30, 1, 'IMAGE'],
+      [60, 8, 0, 30, 2, 'IMAGE'],
+      [64, 18, 0, 23, 0, 'IMAGE'],
+      [67, 30, 1, 18, 1, 'IMAGE'],
+      [68, 30, 1, 19, 1, 'IMAGE'],
+    ],
+    nodes: [
+      {
+        id: 4,
+        pos: [138, 323],
+        mode: 0,
+        size: {
+          '0': 272.85791015625,
+          '1': 331.6089477539062,
+        },
+        type: 'LoadImage',
+        flags: {},
+        order: 0,
+        outputs: [
+          {
+            name: 'IMAGE',
+            type: 'IMAGE',
+            links: [59],
+            shape: 3,
+            slot_index: 0,
+          },
+          {
+            name: 'MASK',
+            type: 'MASK',
+            links: null,
+            shape: 3,
+          },
+        ],
+        properties: {
+          'Node name for S&R': 'LoadImage',
+        },
+        widgets_values: ['monolisa.jpg', 'image'],
+      },
+      {
+        id: 19,
+        pos: [507, 675],
+        mode: 0,
+        size: {
+          '0': 315,
+          '1': 242,
+        },
+        type: 'ImageResizeKJ',
+        flags: {},
+        order: 4,
+        inputs: [
+          {
+            link: 30,
+            name: 'image',
+            type: 'IMAGE',
+          },
+          {
+            link: 68,
+            name: 'get_image_size',
+            type: 'IMAGE',
+          },
+          {
+            link: null,
+            name: 'width_input',
+            type: 'INT',
+            widget: {
+              name: 'width_input',
+            },
+          },
+          {
+            link: null,
+            name: 'height_input',
+            type: 'INT',
+            widget: {
+              name: 'height_input',
+            },
+          },
+        ],
+        outputs: [
+          {
+            name: 'IMAGE',
+            type: 'IMAGE',
+            links: [32],
+            shape: 3,
+            slot_index: 0,
+          },
+          {
+            name: 'width',
+            type: 'INT',
+            links: null,
+            shape: 3,
+          },
+          {
+            name: 'height',
+            type: 'INT',
+            links: null,
+            shape: 3,
+          },
+        ],
+        properties: {
+          'Node name for S&R': 'ImageResizeKJ',
+        },
+        widgets_values: [512, 512, 'nearest-exact', false, 2, 0, 0],
+      },
+      {
+        id: 18,
+        pos: [860, 679],
+        mode: 0,
+        size: {
+          '0': 210,
+          '1': 150,
+        },
+        type: 'ImageConcatMulti',
+        flags: {},
+        order: 5,
+        inputs: [
+          {
+            link: 32,
+            name: 'image_1',
+            type: 'IMAGE',
+          },
+          {
+            link: 67,
+            name: 'image_2',
+            type: 'IMAGE',
+          },
+        ],
+        outputs: [
+          {
+            name: 'images',
+            type: 'IMAGE',
+            links: [64],
+            shape: 3,
+            slot_index: 0,
+          },
+        ],
+        properties: {
+          'Node name for S&R': 'ImageConcatMulti',
+        },
+        widgets_values: [2, 'right', false, null],
+      },
+      {
+        id: 1,
+        pos: [142, 205],
+        mode: 0,
+        size: {
+          '0': 252,
+          '1': 58,
+        },
+        type: 'DownloadAndLoadLivePortraitModels',
+        flags: {},
+        order: 1,
+        outputs: [
+          {
+            name: 'live_portrait_pipe',
+            type: 'LIVEPORTRAITPIPE',
+            links: [58],
+            shape: 3,
+            slot_index: 0,
+          },
+        ],
+        properties: {
+          'Node name for S&R': 'DownloadAndLoadLivePortraitModels',
+        },
+        widgets_values: ['auto'],
+      },
+      {
+        id: 30,
+        pos: [500, 249],
+        mode: 0,
+        size: {
+          '0': 367.7999877929688,
+          '1': 362,
+        },
+        type: 'LivePortraitProcess',
+        flags: {},
+        order: 3,
+        inputs: [
+          {
+            link: 58,
+            name: 'pipeline',
+            type: 'LIVEPORTRAITPIPE',
+          },
+          {
+            link: 59,
+            name: 'source_image',
+            type: 'IMAGE',
+          },
+          {
+            link: 60,
+            name: 'driving_images',
+            type: 'IMAGE',
+          },
+        ],
+        outputs: [
+          {
+            name: 'cropped_images',
+            type: 'IMAGE',
+            links: [],
+            shape: 3,
+            slot_index: 0,
+          },
+          {
+            name: 'full_images',
+            type: 'IMAGE',
+            links: [67, 68],
+            shape: 3,
+            slot_index: 1,
+          },
+        ],
+        properties: {
+          'Node name for S&R': 'LivePortraitProcess',
+        },
+        widgets_values: [
+          512,
+          2.3,
+          0,
+          -0.11,
+          true,
+          false,
+          1,
+          false,
+          1,
+          true,
+          true,
+          'CPU',
+        ],
+      },
+      {
+        id: 8,
+        pos: [161, 714],
+        mode: 0,
+        size: [235.1999969482422, 491.1999969482422],
+        type: 'VHS_LoadVideo',
+        flags: {},
+        order: 2,
+        inputs: [
+          {
+            link: null,
+            name: 'meta_batch',
+            type: 'VHS_BatchManager',
+          },
+          {
+            link: null,
+            name: 'vae',
+            type: 'VAE',
+          },
+        ],
+        outputs: [
+          {
+            name: 'IMAGE',
+            type: 'IMAGE',
+            links: [30, 60],
+            shape: 3,
+            slot_index: 0,
+          },
+          {
+            name: 'frame_count',
+            type: 'INT',
+            links: null,
+            shape: 3,
+          },
+          {
+            name: 'audio',
+            type: 'VHS_AUDIO',
+            links: null,
+            shape: 3,
+          },
+          {
+            name: 'video_info',
+            type: 'VHS_VIDEOINFO',
+            links: null,
+            shape: 3,
+          },
+        ],
+        properties: {
+          'Node name for S&R': 'VHS_LoadVideo',
+        },
+        widgets_values: {
+          video: 'd1.mp4',
+          force_rate: 0,
+          force_size: 'Disabled',
+          custom_width: 512,
+          videopreview: {
+            hidden: false,
+            params: {
+              type: 'input',
+              format: 'video/mp4',
+              filename: 'd1.mp4',
+              force_rate: 0,
+              frame_load_cap: 0,
+              select_every_nth: 1,
+              skip_first_frames: 0,
+            },
+            paused: false,
+          },
+          custom_height: 512,
+          frame_load_cap: 0,
+          select_every_nth: 1,
+          skip_first_frames: 0,
+          'choose video to upload': 'image',
+        },
+      },
+      {
+        id: 23,
+        pos: [1098, 240],
+        mode: 0,
+        size: [1253.234130859375, 940.6170654296875],
+        type: 'VHS_VideoCombine',
+        flags: {},
+        order: 6,
+        inputs: [
+          {
+            link: 64,
+            name: 'images',
+            type: 'IMAGE',
+          },
+          {
+            link: null,
+            name: 'audio',
+            type: 'VHS_AUDIO',
+          },
+          {
+            link: null,
+            name: 'meta_batch',
+            type: 'VHS_BatchManager',
+          },
+          {
+            link: null,
+            name: 'vae',
+            type: 'VAE',
+          },
+        ],
+        outputs: [
+          {
+            name: 'Filenames',
+            type: 'VHS_FILENAMES',
+            links: null,
+            shape: 3,
+          },
+        ],
+        properties: {
+          'Node name for S&R': 'VHS_VideoCombine',
+        },
+        widgets_values: {
+          crf: 19,
+          format: 'video/h264-mp4',
+          pix_fmt: 'yuv420p',
+          pingpong: false,
+          frame_rate: 24,
+          loop_count: 0,
+          save_output: true,
+          videopreview: {
+            hidden: false,
+            params: {
+              src: 'http://comfy.icu/api/v1/view/workflows/mV51t3g_DcTcIHhwBU7p1/temp/LivePortrait_00001.mp4',
+              type: 'temp',
+              format: 'video/h264-mp4',
+              filename:
+                '/workflows/mV51t3g_DcTcIHhwBU7p1/temp/LivePortrait_00001.mp4',
+              subfolder: '',
+              frame_rate: 24,
+            },
+            paused: false,
+          },
+          save_metadata: true,
+          filename_prefix: 'LivePortrait',
+        },
+      },
+    ],
+    config: {},
+    groups: [],
+    version: 0.4,
+    last_link_id: 68,
+    last_node_id: 31,
+  },
+]

src/components/editors/WorkflowEditor/WorkflowViewer/index.tsx

@@ -16,7 +16,7 @@ export function WorkflowViewer({
     <ReactFlowCanvas />
   ) : !current ? (
     <FormSection label={'Workflow Editor'} className="p-4">
-      Workflows are not implemented yet.
+      Workflows are WIP and not available yet.
     </FormSection>
   ) : (
     <FormSection label={'Workflow Editor'} className="p-4">

src/experiments/grading/types.ts

@@ -1,7 +0,0 @@
-import { ClapInputField } from '@aitube/clap/dist/types'
-
-export type ColorGradingFilter = {
-  name: string
-  parameters: Array<ClapInputField>
-  shader: string // WGSL shader code for the filter
-}

src/lib/core/constants.ts

@@ -3,7 +3,7 @@
 export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32
 
 export const APP_NAME = 'Clapper.app'
-export const APP_REVISION = '20240729+1441'
+export const APP_REVISION = '20240729+2245'
 
 export const APP_DOMAIN = 'Clapper.app'
 export const APP_LINK = 'https://clapper.app'

src/services/debug.ts

@@ -6,6 +6,7 @@ import { useBroadcast } from './broadcast/useBroadcast'
 import {
   useEditors,
   useEntityEditor,
+  useFilterEditor,
   useProjectEditor,
   useScriptEditor,
   useSegmentEditor,
@@ -31,6 +32,7 @@ if (typeof window !== 'undefined') {
   w.useBroadcast = useBroadcast
   w.useEditors = useEditors
   w.useEntityEditor = useEntityEditor
+  w.useFilterEditor = useFilterEditor
   w.useProjectEditor = useProjectEditor
   w.useScriptEditor = useScriptEditor
   w.useSegmentEditor = useSegmentEditor

src/services/editors/entity-editor/getDefaultEntityEditorState.ts

@@ -2,9 +2,10 @@ import { EntityEditorState } from '@aitube/clapper-services'
 
 export function getDefaultEntityEditorState(): EntityEditorState {
   const state: EntityEditorState = {
+    before: [],
     current: undefined,
+    after: [],
     version: 0,
-    history: [],
 
     draft: undefined,
     showEntityList: false,

src/{experiments/grading/applyColorGradingDemo.ts → services/editors/filter-editor/demo.ts}

@@ -1,4 +1,4 @@
-import { applyColorGrading } from './applyColorGrading'
+import { runFilterPipeline } from './runFilterPipeline'
 
 import { analogLensSimulator } from './filters/analogLens'
 import { cinematic } from './filters/cinematic'
@@ -12,7 +12,7 @@ import { hdrToneMapping } from './filters/toneMapping'
 import { vintageFilm } from './filters/vintageFilm'
 
 export async function demo() {
-  const base64DataUriImages = await applyColorGrading({
+  const base64DataUriImages = await runFilterPipeline({
     images: [
       {
         image: 'data:image/png....',

src/{experiments/grading → services/editors/filter-editor}/filters/DEPRECATED_analogFilm.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const analogFilmSimulator: ColorGradingFilter = {
-  name: 'Analog Film Simulator',
+export const analogFilmSimulator: Filter = {
+  id: 'analog_film_simulator',
+  label: 'Analog Film Simulator',
   parameters: [
     {
       id: 'preset',

src/{experiments/grading → services/editors/filter-editor}/filters/analogLens.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const analogLensSimulator: ColorGradingFilter = {
-  name: 'Analog Lens Simulator',
+export const analogLensSimulator: Filter = {
+  id: 'analog_lens_simulator',
+  label: 'Analog Lens Simulator',
   parameters: [
     {
       id: 'chromaticAberration',

src/{experiments/grading → services/editors/filter-editor}/filters/cinematic.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const cinematic: ColorGradingFilter = {
-  name: 'Cinematic Color Grading',
+export const cinematic: Filter = {
+  id: 'cinematic_color_grading',
+  label: 'Cinematic Color Grading',
   parameters: [
     {
       id: 'preset',

src/{experiments/grading → services/editors/filter-editor}/filters/colorMapping.ts

@@ -1,8 +1,9 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
 // Example filter implementations
-export const colorMapping: ColorGradingFilter = {
-  name: 'Color Mapping',
+export const colorMapping: Filter = {
+  id: 'color_mapping',
+  label: 'Color Mapping',
   parameters: [
     {
       id: 'redMultiplier',

src/{experiments/grading → services/editors/filter-editor}/filters/colorTemperature.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const colorTemperature: ColorGradingFilter = {
-  name: 'Color Temperature Adjustment',
+export const colorTemperature: Filter = {
+  id: 'color_temperature_adjustment',
+  label: 'Color Temperature Adjustment',
   parameters: [
     {
       id: 'temperature',

src/{experiments/grading → services/editors/filter-editor}/filters/crossProcessing.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const crossProcessing: ColorGradingFilter = {
-  name: 'Cross-Processing',
+export const crossProcessing: Filter = {
+  id: 'cross_processing',
+  label: 'Cross-Processing',
   parameters: [
     {
       id: 'intensity',

src/{experiments/grading → services/editors/filter-editor}/filters/filmDegradation.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const filmDegradation: ColorGradingFilter = {
-  name: 'Film Degradation',
+export const filmDegradation: Filter = {
+  id: 'film_degradation',
+  label: 'Film Degradation',
   parameters: [
     {
       id: 'scratchesIntensity',

src/services/editors/filter-editor/filters/index.ts

@@ -0,0 +1,137 @@
+import { Filter, FilterWithParams } from '@aitube/clapper-services'
+
+export { analogLensSimulator } from './analogLens'
+export { cinematic } from './cinematic'
+export { colorMapping } from './colorMapping'
+export { colorTemperature } from './colorTemperature'
+export { crossProcessing } from './crossProcessing'
+export { filmDegradation } from './filmDegradation'
+export { infraredBlackAndWhite } from './infrared'
+export { lomography } from './lomography'
+export { splitToning } from './splitToning'
+export { hdrToneMapping } from './toneMapping'
+export { vintageFilm } from './vintageFilm'
+
+import { analogLensSimulator } from './analogLens'
+import { cinematic } from './cinematic'
+import { colorMapping } from './colorMapping'
+import { colorTemperature } from './colorTemperature'
+import { crossProcessing } from './crossProcessing'
+import { filmDegradation } from './filmDegradation'
+import { infraredBlackAndWhite } from './infrared'
+import { lomography } from './lomography'
+import { splitToning } from './splitToning'
+import { hdrToneMapping } from './toneMapping'
+import { vintageFilm } from './vintageFilm'
+
+export const filters: Filter[] = [
+  analogLensSimulator,
+  cinematic,
+  colorMapping,
+  colorTemperature,
+  crossProcessing,
+  filmDegradation,
+  infraredBlackAndWhite,
+  lomography,
+  splitToning,
+  hdrToneMapping,
+  vintageFilm,
+]
+
+export const presets: FilterWithParams[] = [
+  {
+    filter: analogLensSimulator,
+    parameters: {
+      chromaticAberration: 0.003,
+      vignetteStrength: 0.4,
+      vignetteRadius: 0.8,
+      distortion: 0.15,
+      bloomStrength: 0.2,
+      bloomRadius: 4,
+      dofFocusDistance: 0.6,
+      dofFocusRange: 0.1,
+      dofBlurStrength: 3,
+    },
+  },
+  {
+    filter: infraredBlackAndWhite,
+    parameters: {
+      contrast: 1.3,
+      grain: 0.25,
+      glow: 0.4,
+    },
+  },
+  {
+    filter: filmDegradation,
+    parameters: {
+      scratchesIntensity: 0.35,
+      dustIntensity: 0.25,
+      colorFading: 0.4,
+      lightLeakIntensity: 0.3,
+    },
+  },
+  {
+    filter: crossProcessing,
+    parameters: {
+      intensity: 0.6,
+      contrastBoost: 0.4,
+      colorShift: 'Cool',
+    },
+  },
+  {
+    filter: lomography,
+    parameters: {
+      saturation: 1.4,
+      contrast: 1.3,
+      vignetteIntensity: 0.6,
+      lightLeakIntensity: 0.4,
+    },
+  },
+  {
+    filter: cinematic,
+    parameters: {
+      preset: 'Blade Runner',
+      intensity: 0.6,
+      contrast: 1.3,
+    },
+  },
+  {
+    filter: splitToning,
+    parameters: {
+      highlightColor: 'Yellow',
+      shadowColor: 'Blue',
+      balance: 0.1,
+      intensity: 0.5,
+    },
+  },
+
+  {
+    filter: hdrToneMapping,
+    parameters: {
+      exposure: 0.5,
+      contrast: 1.2,
+      saturation: 1.1,
+      highlights: -0.2,
+      shadows: 0.3,
+    },
+  },
+  {
+    filter: colorTemperature,
+    parameters: {
+      temperature: 5500,
+      tint: 10,
+    },
+  },
+  {
+    filter: vintageFilm,
+    parameters: {
+      preset: 'Kodachrome 64',
+      intensity: 0.8,
+      grain: 0.3,
+      ageEffect: 0.2,
+      colorShift: 0.05,
+      contrast: 1.1,
+      saturation: 1.2,
+    },
+  },
+]

src/{experiments/grading → services/editors/filter-editor}/filters/infrared.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const infraredBlackAndWhite: ColorGradingFilter = {
-  name: 'Infrared Black and White',
+export const infraredBlackAndWhite: Filter = {
+  id: 'infrared_black_and_white',
+  label: 'Infrared Black and White',
   parameters: [
     {
       id: 'contrast',

src/{experiments/grading → services/editors/filter-editor}/filters/lomography.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const lomography: ColorGradingFilter = {
-  name: 'Lomography',
+export const lomography: Filter = {
+  id: 'lomography',
+  label: 'Lomography',
   parameters: [
     {
       id: 'saturation',

src/{experiments/grading → services/editors/filter-editor}/filters/splitToning.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const splitToning: ColorGradingFilter = {
-  name: 'Split Toning',
+export const splitToning: Filter = {
+  id: 'split_toning',
+  label: 'Split Toning',
   parameters: [
     {
       id: 'highlightColor',

src/{experiments/grading → services/editors/filter-editor}/filters/toneMapping.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const hdrToneMapping: ColorGradingFilter = {
-  name: 'HDR Tone Mapping',
+export const hdrToneMapping: Filter = {
+  id: 'hd_tone_mapping',
+  label: 'HDR Tone Mapping',
   parameters: [
     {
       id: 'exposure',

src/{experiments/grading → services/editors/filter-editor}/filters/vintageFilm.ts

@@ -1,7 +1,8 @@
-import { ColorGradingFilter } from '../types'
+import { Filter } from '@aitube/clapper-services'
 
-export const vintageFilm: ColorGradingFilter = {
-  name: 'Enhanced Vintage Film Stocks',
+export const vintageFilm: Filter = {
+  id: 'enhanced_vintage_film_stocks',
+  label: 'Enhanced Vintage Film Stocks',
   parameters: [
     {
       id: 'preset',

src/services/editors/filter-editor/getDefaultFilterEditorState.ts

@@ -0,0 +1,29 @@
+import { FilterEditorState } from '@aitube/clapper-services'
+
+import { cinematic, filters } from './filters'
+
+export function getDefaultFilterEditorState(): FilterEditorState {
+  const state: FilterEditorState = {
+    before: [],
+    current: undefined,
+    after: [],
+    version: 0,
+
+    isEnabled: true,
+
+    availableFilters: [...filters],
+
+    activeFilters: [
+      {
+        filter: cinematic,
+        parameters: {
+          preset: 'Blade Runner',
+          intensity: 0.6,
+          contrast: 1.3,
+        },
+      },
+    ],
+  }
+
+  return state
+}

src/{experiments/grading/applyColorGrading.ts → services/editors/filter-editor/runFilterPipeline.ts}

@@ -1,16 +1,17 @@
 import { decode, encode } from 'base64-arraybuffer'
 
-import { ColorGradingFilter } from './types'
+import {
+  Filter,
+  FilterParams,
+  FilterWithParams,
+} from '@aitube/clapper-services'
 
-export async function applyColorGrading({
+export async function runFilterPipeline({
   images,
   filters,
 }: {
   images: Array<{ image: string; depthMap?: string }>
-  filters: Array<{
-    filter: ColorGradingFilter
-    parameters?: Record<string, string | number>
-  }>
+  filters: FilterWithParams[]
 }): Promise<string[]> {
   if (!navigator.gpu) {
     throw new Error('WebGPU is not supported in this browser.')
@@ -105,8 +106,8 @@ async function applyFilter(
   device: GPUDevice,
   inputTexture: GPUTexture,
   depthTexture: GPUTexture | null,
-  filter: ColorGradingFilter,
-  parameters?: Record<string, string | number>
+  filter: Filter,
+  parameters?: FilterParams
 ): Promise<GPUTexture> {
   const shader = createShaderModule(device, filter.shader)
   const pipeline = device.createComputePipeline({

src/services/editors/filter-editor/useFilterEditor.ts

@@ -0,0 +1,52 @@
+'use client'
+
+import { create } from 'zustand'
+import {
+  FilterEditorStore,
+  FilterWithParams,
+  redo,
+  undo,
+} from '@aitube/clapper-services'
+
+import { getDefaultFilterEditorState } from './getDefaultFilterEditorState'
+import { runFilterPipeline } from './runFilterPipeline'
+
+export const useFilterEditor = create<FilterEditorStore>()((set, get) => ({
+  ...getDefaultFilterEditorState(),
+
+  setEnabled: (isEnabled: boolean) => {
+    set({ isEnabled })
+  },
+
+  runFilterPipeline: async (input: string) => {
+    const { activeFilters } = get()
+    const results = await runFilterPipeline({
+      images: [{ image: input }],
+      filters: activeFilters,
+    })
+
+    const result = results[0]
+
+    return result
+  },
+
+  setCurrent: (current?: FilterWithParams[]) => {
+    set({ current })
+  },
+
+  undo: () => {
+    set({
+      ...undo<FilterWithParams[]>({
+        ...get(),
+      }),
+    })
+  },
+
+  redo: () => {
+    set({
+      ...redo<FilterWithParams[]>({
+        ...get(),
+      }),
+    })
+  },
+}))

src/services/editors/index.ts

@@ -1,4 +1,5 @@
 export { useEntityEditor } from './entity-editor/useEntityEditor'
+export { useFilterEditor } from './filter-editor/useFilterEditor'
 export { useProjectEditor } from './project-editor/useProjectEditor'
 export { useSegmentEditor } from './segment-editor/useSegmentEditor'
 export { useScriptEditor } from './script-editor/useScriptEditor'

src/services/editors/project-editor/getDefaultProjectEditorState.ts

@@ -2,9 +2,10 @@ import { ProjectEditorState } from '@aitube/clapper-services'
 
 export function getDefaultProjectEditorState(): ProjectEditorState {
   const state: ProjectEditorState = {
+    before: [],
     current: undefined,
+    after: [],
     version: 0,
-    history: [],
   }
 
   return state

src/services/editors/script-editor/getDefaultScriptEditorState.ts

@@ -15,9 +15,10 @@ export function getDefaultScriptEditorState(): ScriptEditorState {
     scrollWidth: 0,
     scrollTopInMs: 0,
 
+    before: [],
     current: undefined,
+    after: [],
     version: 0,
-    history: [],
   }
 
   return state

src/services/editors/segment-editor/getDefaultSegmentEditorState.ts

@@ -2,9 +2,10 @@ import { SegmentEditorState } from '@aitube/clapper-services'
 
 export function getDefaultSegmentEditorState(): SegmentEditorState {
   const state: SegmentEditorState = {
+    before: [],
     current: undefined,
+    after: [],
     version: 0,
-    history: [],
   }
 
   return state

src/services/editors/workflow-editor/getDefaultWorkflowtEditorState.ts

@@ -2,9 +2,10 @@ import { WorkflowEditorState } from '@aitube/clapper-services'
 
 export function getDefaultWorkflowEditorState(): WorkflowEditorState {
   const state: WorkflowEditorState = {
+    before: [],
     current: undefined,
+    after: [],
     version: 0,
-    history: [],
   }
 
   return state

src/services/index.ts

@@ -4,6 +4,7 @@ export { useAudio } from './audio/useAudio'
 export { useBroadcast } from './broadcast/useBroadcast'
 export {
   useEntityEditor,
+  useFilterEditor,
   useProjectEditor,
   useSegmentEditor,
   useScriptEditor,

src/services/plugins/usePlugins.ts

@@ -27,6 +27,7 @@ import {
   useSegmentEditor,
   useScriptEditor,
   useWorkflowEditor,
+  useFilterEditor,
 } from '../editors'
 import { useSimulator } from '../simulator/useSimulator'
 import { useIO } from '../io/useIO'
@@ -67,6 +68,7 @@ export const usePlugins = create<PluginsStore>((set, get) => ({
       mic: useMic,
       segmentEditor: useSegmentEditor,
       entityEditor: useEntityEditor,
+      filterEditor: useFilterEditor,
       projectEditor: useProjectEditor,
       scriptEditor: useScriptEditor,
       workflowEditor: useWorkflowEditor,