add ocif library with initial implementation and tests and have separate ai-flow which runs in worker

Author: devhelpr

apps/vps-web/src/app/ai-flow-engine-worker/ai-flow-engine-worker-message.ts

@@ -0,0 +1,23 @@
+import {
+  Flow,
+  BaseNodeInfo,
+  IComputeResult,
+} from '@devhelpr/visual-programming-system';
+
+export interface AIWorkerMessage {
+  message: string;
+  flow: Flow<BaseNodeInfo>;
+}
+
+export interface AIWorkerMessageResponse {
+  message: string;
+  result: IComputeResult;
+}
+
+export interface AIWorkerWorker extends Omit<Worker, 'postMessage'> {
+  postMessage: (message: AIWorkerMessage) => void;
+}
+
+export interface AIWorkerWorkerSelf extends Omit<Worker, 'postMessage'> {
+  postMessage: (message: AIWorkerMessageResponse) => void;
+}

apps/vps-web/src/app/ai-flow-engine-worker/ai-flow-engine-worker.ts

@@ -0,0 +1,78 @@
+/// <reference lib="webworker" />
+
+import { IComputeResult } from '@devhelpr/visual-programming-system';
+import { FlowEngine } from '../flow-engine/flow-engine';
+import {
+  AIWorkerMessage,
+  AIWorkerWorkerSelf,
+} from './ai-flow-engine-worker-message';
+import { run } from '@devhelpr/web-flow-executor';
+
+declare let self: AIWorkerWorkerSelf;
+console.log('WORKER RuntimeFlowContext', run);
+// Message event handler
+self.addEventListener('message', (event: MessageEvent<AIWorkerMessage>) => {
+  try {
+    const { data } = event;
+
+    const flowEngine = new FlowEngine();
+    flowEngine.onSendUpdateToNode = (data, node) => {
+      console.log('onSendUpdateToNode', data, node);
+      self.postMessage({
+        message: 'node-update',
+        result: {
+          result: node.id,
+          output: data,
+        } as IComputeResult,
+      });
+    };
+    flowEngine.initialize(data.flow.flows['flow'].nodes);
+    flowEngine
+      .run()
+      .then((output) => {
+        // Send the result back to the main thread
+        self.postMessage({
+          message: 'computation-result',
+          result: {
+            result: 'success',
+            output: output,
+            followPath: undefined,
+          },
+        });
+      })
+      .catch((error) => {
+        self.postMessage({
+          message: 'error',
+          result: {
+            result: error?.toString?.() ?? 'Error in flow engine worker',
+            output: undefined,
+            followPath: undefined,
+          },
+        });
+      });
+  } catch (error) {
+    self.postMessage({
+      message: 'error',
+      result: {
+        result: error?.toString?.() ?? 'Error in flow engine worker',
+        output: undefined,
+        followPath: undefined,
+      },
+    });
+  }
+});
+
+// Error handling
+self.addEventListener('error', (error) => {
+  console.log('Worker error:', error.message);
+  self.postMessage({
+    message: 'error',
+    result: {
+      result: error.message,
+      output: undefined,
+      followPath: undefined,
+    },
+  });
+});
+
+export {};

apps/vps-web/src/app/custom-nodes/classes/core-properties-settings-editor.tsx

@@ -1,4 +1,22 @@
-import { createJSXElement } from '@devhelpr/visual-programming-system';
+import {
+  createJSXElement,
+  renderElement,
+} from '@devhelpr/visual-programming-system';
+
+class TestLabel extends HTMLElement {
+  constructor() {
+    super();
+
+    renderElement(
+      <label>
+        <slot name="label-text"></slot>
+      </label>,
+      this
+    );
+  }
+}
+
+customElements.define('test-label', TestLabel);
 
 const COLOR_PRESETS: [number, number, number][] = [
   [0, 0, 0], // black
@@ -85,6 +103,9 @@ export const CorePropertiesSetupEditor = (
     <element:Fragment>
       <div class="control-group">
         <label>Stroke color</label>
+        <test-label>
+          <slot name="label-text">Stroke color</slot>
+        </test-label>
         <input
           type="color"
           id="strokeColorPicker"

apps/vps-web/src/app/custom-nodes/rect-node.tsx

@@ -93,6 +93,7 @@ export const getRectNode =
           width: 200,
           height: 100,
           nodeInfo: {
+            isOCIFNode: true,
             fillColor: fillColorDefault,
             strokeColor: strokeColorDefault,
             strokeWidth: strokeWidthDefault,
@@ -104,14 +105,22 @@ export const getRectNode =
         }
         rect = nodeInstance.rect;
         node = nodeInstance.node as IRectNodeComponent<NodeInfo>;
+
+        if (!node.nodeInfo) {
+          node.nodeInfo = {} as any;
+        }
+
         if (!flowNode) {
-          if (!node.nodeInfo) {
-            node.nodeInfo = {} as any;
+          if (node.nodeInfo) {
+            (node.nodeInfo as any).fillColor = fillColorDefault;
+            (node.nodeInfo as any).strokeColor = strokeColorDefault;
+            (node.nodeInfo as any).strokeWidth = strokeWidthDefault;
+            (node.nodeInfo as any).text = 'rect';
           }
-          (node.nodeInfo as any).fillColor = fillColorDefault;
-          (node.nodeInfo as any).strokeColor = strokeColorDefault;
-          (node.nodeInfo as any).strokeWidth = strokeWidthDefault;
-          (node.nodeInfo as any).text = 'rect';
+        }
+
+        if (node.nodeInfo) {
+          node.nodeInfo.isOCIFNode = true;
         }
 
         rectNode = new NodeClass(node.id, updated, node);

apps/vps-web/src/app/flow-engine/flow-engine.ts

@@ -28,6 +28,9 @@ export class FlowEngine {
   constructor() {
     this.canvasApp = createRuntimeFlowContext<NodeInfo>();
   }
+  onSendUpdateToNode:
+    | undefined
+    | ((data: any, node: IRectNodeComponent<NodeInfo>) => void);
   initialize(flow: FlowNode<NodeInfo>[]) {
     if (!this.canvasApp) {
       throw new Error('CanvasAppInstance not initialized');
@@ -80,6 +83,11 @@ export class FlowEngine {
   }
   private runFlow = (input?: any) => {
     let output: any;
+    console.log(
+      ' this.onSendUpdateToNode',
+      this.onSendUpdateToNode !== undefined,
+      this.onSendUpdateToNode
+    );
     return new Promise<string>((resolve, _reject) => {
       const runCounter = new RunCounter();
       runCounter.setRunCounterResetHandler(() => {
@@ -94,6 +102,7 @@ export class FlowEngine {
           );
         }
       });
+      console.log('run flow', run);
       run(
         this.canvasApp?.elements,
         this.canvasApp,
@@ -105,7 +114,12 @@ export class FlowEngine {
         undefined,
         undefined,
         runCounter,
-        false
+        false,
+        undefined,
+        (data, node) => {
+          console.log('onSendUpdateToNode', data, node);
+          this.onSendUpdateToNode?.(data, node);
+        }
       );
     });
   };