Add video editor view

Author: Shellishack

.changeset/cruel-zoos-play.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Add image and video gen hooks

.changeset/pre.json

@@ -17,6 +17,7 @@
     "beige-pandas-rhyme",
     "calm-rivers-march",
     "chatty-trains-beam",
+    "cruel-zoos-play",
     "curvy-places-wash",
     "dirty-swans-rescue",
     "early-pumas-listen",

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.18
+
+### Patch Changes
+
+- Add image and video gen hooks
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-alpha.18
+
 ## 0.1.1-alpha.17
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-alpha.17",
+  "version": "0.1.1-alpha.18",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -38,7 +38,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-alpha.17",
+    "@pulse-editor/shared-utils": "0.1.1-alpha.18",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/react-api/src/hooks/modality/use-image-gen.ts

@@ -25,7 +25,10 @@ export default function useImageGen() {
     imagePrompt?: string | ArrayBuffer,
     // LLM config is optional, if not provided, the default config will be used.
     imageModelConfig?: ImageModelConfig
-  ): Promise<ArrayBuffer> {
+  ): Promise<{
+    arrayBuffer?: ArrayBuffer;
+    url?: string;
+  }> {
     if (!imc) {
       throw new Error("IMC not initialized.");
     }
@@ -41,7 +44,10 @@ export default function useImageGen() {
         imageModelConfig,
       })
       .then((response) => {
-        return response as ArrayBuffer;
+        return response as {
+          arrayBuffer?: ArrayBuffer;
+          url?: string;
+        };
       });
 
     return result;

npm-packages/react-api/src/hooks/modality/use-video-gen.ts

@@ -21,11 +21,15 @@ export default function useVideoGen() {
    * @returns The generated video in an ArrayBuffer.
    */
   async function runVideoGen(
+    duration: number,
     textPrompt?: string,
     imagePrompt?: string | ArrayBuffer,
     // LLM config is optional, if not provided, the default config will be used.
     videoModelConfig?: VideoModelConfig
-  ): Promise<ArrayBuffer> {
+  ): Promise<{
+    url?: string;
+    arrayBuffer?: ArrayBuffer;
+  }> {
     if (!imc) {
       throw new Error("IMC not initialized.");
     }
@@ -36,12 +40,16 @@ export default function useVideoGen() {
 
     const result = await imc
       .sendMessage(IMCMessageTypeEnum.UseVideoGen, {
+        duration,
         textPrompt,
         imagePrompt,
         videoModelConfig,
       })
       .then((response) => {
-        return response as ArrayBuffer;
+        return response as {
+          url?: string;
+          arrayBuffer?: ArrayBuffer;
+        };
       });
 
     return result;

npm-packages/react-api/src/main.ts

@@ -8,11 +8,12 @@ import useTheme from "./hooks/editor/use-theme";
 import useToolbar from "./hooks/editor/use-toolbar";
 import useExtCommand from "./hooks/extension/use-ext-command";
 
-import useDiffusion from "./hooks/modality/use-image-gen";
+import useImageGen from "./hooks/modality/use-image-gen";
 import useLLM from "./hooks/modality/use-llm";
 import useOCR from "./hooks/modality/use-ocr";
 import useSTT from "./hooks/modality/use-stt";
 import useTTS from "./hooks/modality/use-tts";
+import useVideoGen from "./hooks/modality/use-video-gen";
 import useTerminal from "./hooks/terminal/use-terminal";
 
 export {
@@ -23,7 +24,8 @@ export {
   useNotification,
   useTheme,
   useToolbar,
-  useDiffusion,
+  useImageGen,
+  useVideoGen,
   useLLM,
   useOCR,
   useSTT,

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.18
+
+### Patch Changes
+
+- Add image and video gen hooks
+
 ## 0.1.1-alpha.17
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-alpha.17",
+    "version": "0.1.1-alpha.18",
     "main": "dist/main.js",
     "files": [
         "dist"

npm-packages/shared-utils/src/imc/inter-module-communication.ts

@@ -21,7 +21,7 @@ export class InterModuleCommunication {
 
   private listener: ((event: MessageEvent) => void) | undefined;
 
-  constructor() {}
+  private messageRecords: Map<string, IMCMessage> | undefined;
 
   /**
    * Initialize a receiver to receive message.
@@ -46,7 +46,19 @@ export class InterModuleCommunication {
     );
     this.receiver = receiver;
 
+    this.messageRecords = new Map<string, IMCMessage>();
+
     this.listener = (event: MessageEvent<IMCMessage>) => {
+      const messageId = event.data.id;
+
+      if (this.messageRecords?.has(messageId)) {
+        console.warn(
+          `Duplicate message received with ID: ${messageId}. Ignoring this message.`
+        );
+        return;
+      }
+      this.messageRecords?.set(messageId, event.data);
+
       if (!receiver) {
         throw new Error(
           "Receiver not initialized at module " + this.thisWindowId