Style Strength button (#383)

Co-authored-by: Storyteller <storyteller@MacBook-Pro-de-Storyteller.local>

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx

@@ -15,6 +15,12 @@ export function StyleButtons() {
   const [upscale, setUpscale] = useState(false);
   const [faceDetail, setFaceDetail] = useState(false);
 
+  const [value, setStyleStrength] = useState(0.7);
+
+  const sliderChanged = (event:React.ChangeEvent<HTMLInputElement>) => {
+     setStyleStrength(parseFloat(event.target.value));
+  };
+
   const switchPreview = async () => {
     Queue.publish({
       queueName: QueueNames.TO_ENGINE,
@@ -32,9 +38,11 @@ export function StyleButtons() {
   };
 
   const generateMovie = async () => {
+    
     const options: GenerationOptions = {
       upscale: upscale,
       faceDetail: faceDetail,
+      styleStrength: value,
     };
 
     Queue.publish({
@@ -73,6 +81,27 @@ export function StyleButtons() {
         )}
       </div>
       <div className="w-full">
+
+      <Label>
+          <div className="mb-1 leading-tight">
+            Set the Style Strength, the higher the value the more the style will be applied,
+            the lower the value the closer to source.
+          </div>
+        </Label>
+
+      <input 
+        type="range" 
+        value={value} min="0" 
+        max="1.0"
+        step="0.1"
+        onChange={sliderChanged} 
+        style={{width: "100%"}}
+        ></input>
+        <Label>
+          <div className="mb-1 leading-tight">
+            Currently set to {value}
+          </div>
+        </Label>
         <PremiumLock requiredPlan="any" plural={true}>
           <Switch.Group>
             <div className="mt-1 flex gap-6">
@@ -83,6 +112,7 @@ export function StyleButtons() {
                 <Switch
                   checked={upscale}
                   onChange={setUpscale}
+
                   className={`${
                     upscale
                       ? "bg-brand-primary"

app/pages/PageEnigma/js/api_manager.ts

@@ -361,7 +361,8 @@ export class APIManager {
     negative_prompt: string,
     visibility: Visibility,
     use_face_detailer: boolean = false,
-    use_upscaler: boolean = false
+    use_upscaler: boolean = false,
+    style_strength: number = 1.0,
   ) {
 
     const uuid = uuidv4();
@@ -378,6 +379,7 @@ export class APIManager {
       creator_set_visibility: visibility,
       use_face_detailer: use_face_detailer,
       use_upscaler: use_upscaler,
+      style_strength: style_strength,
     };
 
     const json_data = JSON.stringify(data);

app/pages/PageEnigma/js/editor.ts

@@ -275,7 +275,7 @@ class Editor {
     this.negative_prompt = "";
     this.art_style = ArtStyle.Anime2DFlat;
 
-    this.generation_options = { faceDetail: false, upscale:false }
+    this.generation_options = { faceDetail: false, upscale:false, styleStrength: 1.0 };
   }
 
   isEmpty(value: string) {
@@ -1243,7 +1243,8 @@ class Editor {
         this.negative_prompt,
         Visibility.Public,
         this.generation_options.faceDetail,
-        this.generation_options.upscale
+        this.generation_options.upscale,
+        this.generation_options.styleStrength,
       )
       .catch((error) => {
         console.log(error);

app/pages/PageEnigma/models/generationOptions.ts

@@ -1,4 +1,5 @@
 export interface GenerationOptions {
     upscale: boolean;
     faceDetail: boolean;
+    styleStrength: number;
   }