hook up ai stylize dialog to dispatcher and events (#11)

Co-authored-by: wil <wil@storyteller.ai>

src/KonvaApp/Engine.ts

@@ -57,7 +57,9 @@ export class Engine {
       console.log("Engine got video: " + video.url);
       // this.addVideo(video.file);
     });
-
+    uiEvents.onRequestAiStylize((data) => {
+      console.log("Engine heard AI Stylize request: ", data);
+    });
     // TODO: You may listen to all the image toolbar events here
     uiEvents.toolbarImage.MOVE.onClick(() => {
       console.log("move");

src/components/features/DialogAiStylize/index.tsx

@@ -17,6 +17,7 @@ import {
 
 import { Prompts } from "./Prompts";
 import { ArtStyleSelector } from "./ArtStyleSelector";
+import { dispatchUiEvents } from "~/signals";
 
 export const DialogAiStylize = ({
   isOpen,
@@ -40,10 +41,12 @@ export const DialogAiStylize = ({
     closeCallback();
   }
 
-  function handleEnter() {
-    // if (data) {
-    //   dispatchUiEvents;
-    // }
+  function handleGenerate() {
+    dispatchUiEvents.requestAiStylize({
+      artstyle: selectedArtStyle,
+      positivePrompt: positivePrompt,
+      negativePrompt: negativePrompt,
+    });
     handleClose();
   }
   const onSelectedArtStyle = useCallback((newArtstyle: ArtStyleNames) => {
@@ -95,7 +98,7 @@ export const DialogAiStylize = ({
             <Button
               className="hover:animate-pulse"
               icon={faWandSparkles}
-              onClick={handleEnter}
+              onClick={handleGenerate}
             >
               Generate
             </Button>

src/signals/uiEvents/aiStylize.ts

@@ -0,0 +1,31 @@
+import { signal, effect } from "@preact/signals-react";
+
+import { ArtStyleNames } from "~/components/features/DialogAiStylize/enums";
+
+const stagedAiStylizeRequest = signal<{
+  artstyle: ArtStyleNames;
+  positivePrompt: string;
+  negativePrompt: string;
+} | null>(null);
+
+export const requestAiStylize = (data: {
+  artstyle: ArtStyleNames;
+  positivePrompt: string;
+  negativePrompt: string;
+}) => {
+  stagedAiStylizeRequest.value = data;
+};
+
+export const onRequestAiStylize = (
+  callback: (data: {
+    artstyle: ArtStyleNames;
+    positivePrompt: string;
+    negativePrompt: string;
+  }) => void,
+) => {
+  effect(() => {
+    if (stagedAiStylizeRequest.value) {
+      callback(stagedAiStylizeRequest.value);
+    }
+  });
+};

src/signals/uiEvents/index.ts

@@ -18,9 +18,11 @@ import {
   dispatcher as buttonTestDispatcher,
   eventsHandler as buttonTestEvent,
 } from "./buttonTest";
+import { requestAiStylize, onRequestAiStylize } from "./aiStylize";
 
 export const uiEvents = {
   ...addMediaEvents,
+  onRequestAiStylize,
   buttonTest: buttonTestEvent,
   toolbarImage: toolbarImageEvents,
   toolbarMain: toolbarMainEvents,
@@ -28,6 +30,7 @@ export const uiEvents = {
 };
 export const dispatchUiEvents = {
   ...addMediaDispatchers,
+  requestAiStylize,
   buttonTest: buttonTestDispatcher,
   toolbarImage: toolbarImageDispatchers,
   toolbarMain: toolbarMainDispatchers,