Merge pull request #18 from lalalune/moon/entity-editor

src/components/editors/EntityEditor/index.tsx

@@ -1,88 +1,219 @@
-import { TimelineSegment, useTimeline } from "@aitube/timeline"
+import { FormFile } from "@/components/forms/FormFile";
+import { FormInput } from "@/components/forms/FormInput";
+import { FormSection } from "@/components/forms/FormSection";
+import { FormSelect } from "@/components/forms/FormSelect";
+import { Button } from "@/components/ui/button";
+import { useEntityEditor, useIO } from "@/services";
+import { ClapEntity, ClapSegmentCategory } from "@aitube/clap";
+import { useTimeline } from "@aitube/timeline";
+import { useEffect, useState } from "react";
 
-import { FormFile } from "@/components/forms/FormFile"
-import { FormInput } from "@/components/forms/FormInput"
-import { FormSection } from "@/components/forms/FormSection"
-import { useEntityEditor, useRenderer } from "@/services"
-import { useEffect } from "react"
-import { ClapEntity, ClapProject } from "@aitube/clap"
+function EntityList({ onSelectEntity }: {
+  onSelectEntity: (entityId: string) => void;
+}) {
+  const { entities, selectEntity, addEntity, removeEntity, current } = useEntityEditor();
 
-export function EntityEditor() {
-  const clap: ClapProject = useTimeline(s => s.clap)
-
-  const segmentsChanged: number = useTimeline(s => s.segmentsChanged)
-  const selectedSegments: TimelineSegment[] = useTimeline(s => s.selectedSegments)
-  const { activeSegments } = useRenderer(s => s.bufferedSegments)
-
-  const current = useEntityEditor(s => s.current)
-  const setCurrent = useEntityEditor(s => s.setCurrent)
-  const history = useEntityEditor(s => s.history)
-  const undo = useEntityEditor(s => s.undo)
-  const redo = useEntityEditor(s => s.redo)
-
-  let segment = selectedSegments.at(-1)
-  let entity: ClapEntity | undefined = clap.entityIndex[segment?.entityId as any]
- 
-  if (!entity) {
-    segment = activeSegments.find(s => clap.entityIndex[s?.entityId as any])
-    entity = clap.entityIndex[segment?.entityId as any]
-  }
+  const handleAddEntity = () => {
+    const newEntity: ClapEntity = {
+      id: Date.now().toString(),
+      label: "NEW_ENTITY",
+      category: ClapSegmentCategory.CHARACTER,
+      description: "",
+      appearance: "",
+    } as ClapEntity; // ignoring some fields for now
+    addEntity(newEntity);
+  };
 
   useEffect(() => {
-    setCurrent(entity)
-  }, [clap, entity, segmentsChanged])
+    if (entities.length > 0 && !current) {
+      selectEntity(entities[0].id);
+    }
+  }, [entities, current, selectEntity]);
 
-  if (!current) {
-    return <div>
-      No Entity selected
+  return (
+    <div className="pt-4">
+      <div className="mb-2">
+        <h1 className="px-4 mb-4 text-xl font-bold inline">Entities</h1>
+        <Button onClick={handleAddEntity} className="absolute top-2 right-2" variant="secondary">
+          New +
+        </Button>
+      </div>
+      <ul>
+        {entities.map((entity: ClapEntity) => (
+          <li key={entity.id} className={`flex py-1 px-2`}>
+            <Button
+              onClick={() => {
+                selectEntity(entity.id);
+                onSelectEntity(entity.id);
+              }}
+              variant="ghost"
+            >
+              {entity.label} ({entity.category})
+            </Button>
+            <Button onClick={() => removeEntity(entity.id)} className={`ml-2 ml-auto`} variant="destructive" size="sm">
+              Remove
+            </Button>
+          </li>
+        ))}
+      </ul>
     </div>
-  }
+  );
+}
+
+export function EntityEditor() {
+  const { current, updateEntity } = useEntityEditor();
+  const { exportEntity, importEntity } = useIO();
+  const [localEntity, setLocalEntity] = useState<ClapEntity | null>(null);
+  const [showEntityList, setShowEntityList] = useState(true);
+
+  const { loadEntities } = useEntityEditor();
+  const clap = useTimeline((s) => s.clap);
+
+  useEffect(() => {
+    if (clap && clap.entities) {
+      loadEntities(clap.entities);
+    }
+  }, [clap, loadEntities]);
+
+  useEffect(() => {
+    if (current) {
+      setLocalEntity(current);
+    }
+  }, [current]);
+
+  const handleInputChange = (field: keyof ClapEntity, value: string | number | undefined) => {
+    if (localEntity) {
+      let updatedValue = value;
+      if (field === "age") {
+        updatedValue = value === "" ? undefined : parseInt(value as string);
+      }
+      if (field === "label") {
+        updatedValue = value?.toString().toUpperCase();
+      }
+      setLocalEntity((prevEntity) => ({
+        ...prevEntity,
+        [field]: updatedValue,
+      } as ClapEntity));
+    }
+  };
+
+  const handleSave = () => {
+    if (localEntity) {
+      updateEntity(localEntity);
+    }
+  };
+
+  const handleFileUpload = async (field: "imageId" | "audioId", file: File) => {
+    if (localEntity) {
+      const dataUrl = await new Promise<string>((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target?.result as string);
+        reader.readAsDataURL(file);
+      });
+      setLocalEntity((prevEntity) => ({
+        ...prevEntity,
+        [field]: dataUrl,
+      } as ClapEntity));
+    }
+  };
+
+  const handleExport = async () => {
+    if (localEntity) {
+      await exportEntity(localEntity);
+    }
+  };
+
+  const handleImport = async (file: File) => {
+    const entity = await importEntity(file);
+    if (entity) {
+      setLocalEntity(entity);
+    }
+  };
+
+  const handleBack = () => {
+    setShowEntityList(true);
+  };
+
+  const handleSelectEntity = (entityId: string) => {
+    setShowEntityList(false);
+  };
 
-  // TODO: adapt the editor based on the kind of
-  // entity (character, location..)
-  //
-  // I think we can use UI elements of our legacy character editor
-  // that I did in a Hugging Face space
   return (
-    <FormSection
-      label={"Entity editor"}
-      className="p-4">
-        <label>Visual identity</label>
-        {current?.imageId
-          ? <img src={current?.imageId}></img>
-          : null}
-        <FormFile
-          label={"Visual identity file (TODO)"}
-        />
-        {/*
-        <FormInput<string>
-          label={"Audio identity"}
-          value={current?.audioId.slice(0, 20)}
-        />
-        */}
-        <FormFile
-          label={"Audio identity file (TODO)"}
-        />
-        <FormInput<string>
-          label={"Label"}
-          value={current.label}
-        />
-        <FormInput<string>
-          label={"Description"}
-          value={current.description}
-        />
-        <FormInput<number>
-          label={"Age"}
-          value={current.age}
-        />
-        <FormInput<string>
-          label={"Gender"}
-          value={current.gender}
-        />
-        <FormInput<string>
-          label={"Appearance"}
-          value={current.appearance}
-        />
-      </FormSection>
-  )
+    <div className="flex flex-col w-full h-full overflow-x-auto">
+      {showEntityList ? (
+        <div className="mb-4">
+          <EntityList onSelectEntity={handleSelectEntity} />
+        </div>
+      ) : (
+        <div className="flex">
+          {localEntity && (
+            <FormSection className="px-2">
+              <Button onClick={handleBack}>Back</Button>
+              <FormInput
+                label="Identifier (UPPERCASE)"
+                value={localEntity.label || ""}
+                onChange={(value) => handleInputChange("label", value)}
+              />
+              <FormSelect
+                label="Category"
+                selectedItemId={localEntity.category}
+                items={Object.values(ClapSegmentCategory).map((category) => ({
+                  id: category,
+                  label: category,
+                  value: category,
+                }))}
+                onSelect={(value) => handleInputChange("category", value)}
+              />
+              {/* ... form fields ... */}
+              <FormFile
+                label="Visual Identity"
+                onChange={(files) => files[0] && handleFileUpload("imageId", files[0])}
+              />
+              {localEntity.imageId && (
+                <div className="mt-2">
+                  <img src={localEntity.imageId} alt="Entity Preview" className="max-w-full h-auto" />
+                </div>
+              )}
+              <FormFile
+                label="Audio Identity"
+                onChange={(files) => files[0] && handleFileUpload("audioId", files[0])}
+              />
+              {localEntity.audioId && (
+                <div className="mt-2">
+                  <audio controls src={localEntity.audioId} />
+                </div>
+              )}
+              <FormInput
+                label="Description"
+                value={localEntity.description || ""}
+                onChange={(value) => handleInputChange("description", value)}
+              />
+              <FormInput
+                label="Appearance"
+                value={localEntity.appearance || ""}
+                onChange={(value) => handleInputChange("appearance", value)}
+              />
+              <FormInput
+                label="Age"
+                value={localEntity.age?.toString() || ""}
+                onChange={(value) => handleInputChange("age", value)}
+              />
+              <FormInput
+                label="Gender"
+                value={localEntity.gender || ""}
+                onChange={(value) => handleInputChange("gender", value)}
+              />
+              <div className="mt-4 flex space-x-2">
+                <Button onClick={handleSave}>Save</Button>
+                <Button onClick={handleExport}>Export</Button>
+              </div>
+              <div className="mt-4 flex space-x-2">
+                <FormFile label="Import" onChange={(files) => files[0] && handleImport(files[0])} />
+              </div>
+            </FormSection>
+          )}
+        </div>
+      )}
+    </div>
+  );
 }

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

@@ -1,19 +1,67 @@
-"use client"
-
 import { create } from "zustand"
 import { ClapEntity } from "@aitube/clap"
 import { EntityEditorStore } from "@aitube/clapper-services"
+import { useTimeline } from "@aitube/timeline"
 
 import { getDefaultEntityEditorState } from "./getDefaultEntityEditorState"
 
 export const useEntityEditor = create<EntityEditorStore>((set, get) => ({
   ...getDefaultEntityEditorState(),
-  setCurrent: (current?: ClapEntity) => { set({ current }) },
+  current: undefined,
+  entities: [],
+  setCurrent: (current?: ClapEntity) => set({ current }),
+  selectEntity: (id: string) => {
+    const entity = get().entities.find(e => e.id === id)
+    set({ current: entity })
+  },
   undo: () => {},
   redo: () => {},
-}))
-
-
-if (typeof window !== "undefined") {
-  (window as any).useEntityEditor = useEntityEditor
-}
+  addEntity: (entity: ClapEntity) => {
+    set(state => {
+      const newEntities = [...state.entities, entity]
+      const timelineState = useTimeline.getState()
+      timelineState.setClap({
+        ...timelineState.clap,
+        entities: newEntities
+      })
+      return {
+        entities: newEntities,
+        current: entity
+      }
+    })
+  },
+  removeEntity: (id: string) => {
+    set(state => {
+      const newEntities = state.entities.filter(e => e.id !== id)
+      const timelineState = useTimeline.getState()
+      timelineState.setClap({
+        ...timelineState.clap,
+        entities: newEntities
+      })
+      return {
+        entities: newEntities,
+        current: state.current?.id === id ? undefined : state.current
+      }
+    })
+  },
+  updateEntity: (updatedEntity: ClapEntity) => {
+    set(state => {
+      const newEntities = state.entities.map(e => 
+        e.id === updatedEntity.id ? updatedEntity : e
+      )
+      return {
+        entities: newEntities,
+        current: updatedEntity
+      }
+    })
+    // Update the timeline state
+    const timelineState = useTimeline.getState()
+    timelineState.setClap({
+      ...timelineState.clap,
+      entities: get().entities
+    })
+  },
+  loadEntities: (entities: ClapEntity[]) => {
+    set({ entities, current: undefined })
+  },
+}))

src/services/io/useIO.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { ClapAssetSource, ClapProject, ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType, newSegment, parseClap, serializeClap } from "@aitube/clap"
+import { ClapAssetSource, ClapEntity, ClapProject, ClapSegmentCategory, ClapSegmentStatus, getClapAssetSourceType, newSegment, parseClap, serializeClap } from "@aitube/clap"
 import { TimelineStore, useTimeline, TimelineSegment } from "@aitube/timeline"
 import { ParseScriptProgressUpdate, parseScriptToClap } from "@aitube/broadway"
 import { TaskCategory, TaskVisibility } from "@aitube/clapper-services"
@@ -741,7 +741,28 @@ export const useIO = create<IOStore>((set, get) => ({
 
   saveOpenTimelineIO: async () => {
 
-  }
+  },
+  
+  exportEntity: async (entity: ClapEntity) => {
+    const blob = new Blob([JSON.stringify(entity, null, 2)], { type: 'application/json' })
+    const fileName = `${entity.label.toLowerCase()}.clap`
+    get().saveAnyFile(blob, fileName)
+  },
+
+  importEntity: async (file: File): Promise<ClapEntity | undefined> => {
+    try {
+      const text = await file.text()
+      const entity = JSON.parse(text) as ClapEntity
+      if (!entity.id || !entity.label || !entity.category) {
+        throw new Error('Invalid entity file format')
+      }
+      return entity
+    } catch (error) {
+      console.error('Error importing entity:', error)
+      // You might want to show an error message to the user here
+      return undefined
+    }
+  },
 }))