From dbdbcc6945026fc74f72996fdd1b1e5386cee38c Mon Sep 17 00:00:00 2001
From: wil <wilwong@users.noreply.github.com>
Date: Thu, 12 Sep 2024 21:06:13 -0400
Subject: [PATCH] hook up ai stylize dialog to dispatcher and events (#11)

Co-authored-by: wil <wil@storyteller.ai>
---
 src/KonvaApp/Engine.ts                        |  4 ++-
 .../features/DialogAiStylize/index.tsx        | 13 +++++---
 src/signals/uiEvents/aiStylize.ts             | 31 +++++++++++++++++++
 src/signals/uiEvents/index.ts                 |  3 ++
 4 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 src/signals/uiEvents/aiStylize.ts

diff --git a/src/KonvaApp/Engine.ts b/src/KonvaApp/Engine.ts
index 0a16826d51..2159a858f1 100644
--- a/src/KonvaApp/Engine.ts
+++ b/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");
diff --git a/src/components/features/DialogAiStylize/index.tsx b/src/components/features/DialogAiStylize/index.tsx
index 222fcbd3e8..eb6629af60 100644
--- a/src/components/features/DialogAiStylize/index.tsx
+++ b/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>
diff --git a/src/signals/uiEvents/aiStylize.ts b/src/signals/uiEvents/aiStylize.ts
new file mode 100644
index 0000000000..55a75e1421
--- /dev/null
+++ b/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);
+    }
+  });
+};
diff --git a/src/signals/uiEvents/index.ts b/src/signals/uiEvents/index.ts
index 5b860372d8..147bb167ba 100644
--- a/src/signals/uiEvents/index.ts
+++ b/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,