From 7de88cb5382d45aefadbb08aa24431d6a9f3f451 Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Sat, 30 Mar 2024 01:44:09 -0400
Subject: [PATCH] Stylization done wired in the prompts and styles. This will
 be used by generate video once we are able to login.

---
 .../comps/SidePanelTabs/TabStylization.tsx    | 34 ++++++++++++++-----
 app/pages/PageEnigma/js/editor.ts             |  8 +++++
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
index 85d1fc5dea..d4ee6b842d 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
@@ -10,16 +10,32 @@ import {
 import { AppUiContext } from '../../contexts/AppUiContext';
 import { APPUI_ACTION_TYPES } from '../../reducers';
 import { APPUI_VIEW_MODES } from '../../reducers';
-
+import { EngineContext } from '../../contexts/EngineContext';
+import { ArtStyle } from '../../js/api_manager';
 export const TabStylization = ()=>{
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
   const [ selection, setSelection ] = useState<string>("Anime");
-  const handlePickingStylizer = (picked:string)=>{
+
+  const editorEngine = useContext(EngineContext);
+
+  const handlePickingStylizer = (picked:ArtStyle)=>{
     console.log(`Picked style: ${picked}`);
+    if (editorEngine == null) { console.log("Editor is null"); return;}
+    editorEngine.art_style = picked
     setSelection(picked);
   }
 
+  const onChangeHandlerNegative = (e:React.ChangeEvent<HTMLInputElement>) => {
+    if (editorEngine == null) { console.log("Editor is null"); return;}
+    editorEngine.negative_prompt = e.target.value
+    console.log(e.target.value)
+  }
 
+  const onChangeHandlerPositive = (e:React.ChangeEvent<HTMLInputElement>) => {
+    if (editorEngine == null) { console.log("Editor is null"); return;}
+    editorEngine.positive_prompt = e.target.value
+    console.log(e.target.value)
+  }
   const handleChangeViewMode = ()=>{
     if(dispatchAppUiState!==null){
       dispatchAppUiState({
@@ -37,25 +53,25 @@ export const TabStylization = ()=>{
       <div className="flex gap-2 my-2">
         <ItemPicker
           label="Anime"
-          selected={(selection === "Anime")}
+          selected={(selection === ArtStyle.Anime2DFlat)}
           onSelected={handlePickingStylizer}
           src="/resources/avatars/0.webp"
         />
         <ItemPicker
           label="Pixel"
-          selected={selection === "Pixel"}
+          selected={selection === ArtStyle.PixelArt}
           onSelected={handlePickingStylizer}
           src="/resources/avatars/1.webp"
         />
         <ItemPicker
           label="Pixar"
-          selected={selection === "Pixar"}
+          selected={selection === ArtStyle.Cartoon3D}
           onSelected={handlePickingStylizer}
           src="/resources/avatars/2.webp"
         />
         <ItemPicker
           label="Stylized"
-          selected={selection === "Stylized"}
+          selected={selection === ArtStyle.ComicBook}
           onSelected={handlePickingStylizer}
           src="/resources/avatars/3.webp"
         />
@@ -65,14 +81,16 @@ export const TabStylization = ()=>{
         <Textarea
           className="w-full h-32"
           placeholder="Type here to describe your scene"
+          onChange={onChangeHandlerPositive}
         />
       </div>
       <H4>Negative Prompt</H4>
       <div className="flex gap-2 my-2">
         <Textarea
           className="w-full h-32"
-          placeholder="Type here to filter out the things you don't want in the scene
-        "/>
+          placeholder="Type here to filter out the things you don't want in the scene"
+          onChange={onChangeHandlerNegative}
+        />
       </div>
       <div className="flex gap-2 mt-6 justify-center">
         <Button onClick={handleChangeViewMode}>
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index b30850ee9c..eca04edc4f 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -96,6 +96,9 @@ class Editor {
   render_width: number;
   render_height: number;
 
+  positive_prompt: string;
+  negative_prompt: string;
+  art_style:ArtStyle;
   // Default params.
   constructor() {
     console.log(
@@ -186,6 +189,11 @@ class Editor {
     // Scene State
     this.current_scene_media_token = null;
     this.current_scene_glb_media_token = null;
+
+    // stylization parameters
+    this.positive_prompt = ""
+    this.negative_prompt = ""
+    this.art_style = ArtStyle.Anime2DFlat
   }
 
   initialize(config: any) {