Merge pull request #527 from storytold/feature/contdev/page/vst

select style is good

packages/fakeyou.com/public/locales/bn/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "আপলোড করুন"
   },
   "headings": {
-    "subtitle": "আপনার ভিডিওর স্টাইল একটি থেকে অন্যটিতে পরিবর্তন করুন",
-    "title": "ভিডিও শৈলী স্থানান্তর"
+    "subtitle": "এই বিটাতে, আমরা আপনার ভিডিওটিকে কার্টুন শৈলীতে পরিবর্তন করি",
+    "title": "ভিডিও শৈলী স্থানান্তর (বিটা।)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "এখানে প্রম্পট টাইপ করুন। যেমন: মানুষ ভাল্লুক নয়",
-      "prompt": "এখানে প্রম্পট টাইপ করুন। যেমন: ম্যান অ্যানিমে স্টাইলে নাচছে"
+      "prompt": "এখানে প্রম্পট টাইপ করুন। যেমন: ম্যান অ্যানিমে স্টাইলে নাচছে",
+      "selectStyle": "এবং কিন্তুএবং কিন্তুএবং কিন্তুএবং কিন্তুএবং কিন্তু"
     },
     "thumbtip": {
       "styleStrength": "শক্তি"
+    },
+    "title": {
+      "selectStyle": "একটি শৈলী নির্বাচন করুন"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/de/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Hochladen"
   },
   "headings": {
-    "subtitle": "Ändern Sie den Stil Ihres Videos von einem zum anderen",
-    "title": "Übertragung des Videostils"
+    "subtitle": "In dieser Beta verwandeln wir Ihr Video in einen Cartoon-Stil",
+    "title": "Videostilübertragung (Beta)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Geben Sie hier prompt ein. ZB: Der Mensch ist kein Bär",
-      "prompt": "Geben Sie hier prompt ein. Beispiel: Mann tanzt im Anime-Stil"
+      "prompt": "Geben Sie hier prompt ein. Beispiel: Mann tanzt im Anime-Stil",
+      "selectStyle": "Nichts ausgewählt"
     },
     "thumbtip": {
       "styleStrength": "Stärke"
+    },
+    "title": {
+      "selectStyle": "Wählen Sie einen Stil aus"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/en/VideoStyleTransfer.json

@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Type prompt here. Eg: Man is not a bear",
-      "prompt": "Type prompt here. Eg: Man dancing in the style of anime"
+      "prompt": "Type prompt here. Eg: Man dancing in the style of anime",
+      "selectStyle": "None Selected"
     },
     "thumbtip": {
       "styleStrength": "Strength"
+    },
+    "title": {
+      "selectStyle": "Select a style"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/es/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Subir"
   },
   "headings": {
-    "subtitle": "Cambia el estilo de tu vídeo de uno a otro",
-    "title": "Transferencia de estilo de vídeo"
+    "subtitle": "En esta versión beta, cambiamos tu video al estilo de dibujos animados.",
+    "title": "Transferencia de estilo de vídeo (beta.)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Escriba el mensaje aquí. Por ejemplo: el hombre no es un oso",
-      "prompt": "Escriba el mensaje aquí. Por ejemplo: hombre bailando al estilo anime."
+      "prompt": "Escriba el mensaje aquí. Por ejemplo: hombre bailando al estilo anime.",
+      "selectStyle": "Ninguna seleccionada"
     },
     "thumbtip": {
       "styleStrength": "Fortaleza"
+    },
+    "title": {
+      "selectStyle": "Selecciona un estilo"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/fr/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Télécharger"
   },
   "headings": {
-    "subtitle": "Changez le style de votre vidéo de l'un à l'autre",
-    "title": "Transfert de style vidéo"
+    "subtitle": "Dans cette version bêta, nous transformons votre vidéo en style dessin animé",
+    "title": "Transfert de style vidéo (bêta.)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Tapez l'invite ici. Ex : L'homme n'est pas un ours",
-      "prompt": "Tapez l'invite ici. Par exemple : un homme qui danse à la manière d'un anime"
+      "prompt": "Tapez l'invite ici. Par exemple : un homme qui danse à la manière d'un anime",
+      "selectStyle": "Aucune sélection"
     },
     "thumbtip": {
       "styleStrength": "Force"
+    },
+    "title": {
+      "selectStyle": "Sélectionnez un style"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/hi/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "डालना"
   },
   "headings": {
-    "subtitle": "अपने वीडियो की शैली को एक से दूसरे में बदलें",
-    "title": "वीडियो शैली स्थानांतरण"
+    "subtitle": "इस बीटा में, हम आपके वीडियो को कार्टून शैली में बदलते हैं",
+    "title": "वीडियो शैली स्थानांतरण (बीटा)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "यहां प्रॉम्प्ट टाइप करें। उदाहरणार्थ: मनुष्य भालू नहीं है",
-      "prompt": "यहां प्रॉम्प्ट टाइप करें। जैसे: आदमी एनीमे की शैली में नृत्य कर रहा है"
+      "prompt": "यहां प्रॉम्प्ट टाइप करें। जैसे: आदमी एनीमे की शैली में नृत्य कर रहा है",
+      "selectStyle": "कोई भी नहीं चुना गया"
     },
     "thumbtip": {
       "styleStrength": "ताकत"
+    },
+    "title": {
+      "selectStyle": "एक शैली चुनें"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/id/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Mengunggah"
   },
   "headings": {
-    "subtitle": "Ubah gaya video Anda dari satu ke yang lain",
-    "title": "Transfer Gaya Video"
+    "subtitle": "Dalam versi beta ini, kami mengubah video Anda menjadi gaya kartun",
+    "title": "Transfer Gaya Video (beta.)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Ketik perintah di sini. Misalnya: Manusia bukan beruang",
-      "prompt": "Ketik perintah di sini. Misalnya: Pria menari dengan gaya anime"
+      "prompt": "Ketik perintah di sini. Misalnya: Pria menari dengan gaya anime",
+      "selectStyle": "Tidak ada yang di pilih"
     },
     "thumbtip": {
       "styleStrength": "Kekuatan"
+    },
+    "title": {
+      "selectStyle": "Pilih gaya"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/it/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Caricamento"
   },
   "headings": {
-    "subtitle": "Cambia lo stile del tuo video da uno all'altro",
-    "title": "Trasferimento di stili video"
+    "subtitle": "In questa beta, trasformiamo il tuo video in stile cartone animato",
+    "title": "Trasferimento stile video (beta)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Digita la richiesta qui. Ad esempio: l'uomo non è un orso",
-      "prompt": "Digita la richiesta qui. Ad esempio: un uomo che balla in stile anime"
+      "prompt": "Digita la richiesta qui. Ad esempio: un uomo che balla in stile anime",
+      "selectStyle": "Nessuno selezionato"
     },
     "thumbtip": {
       "styleStrength": "Forza"
+    },
+    "title": {
+      "selectStyle": "Seleziona uno stile"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/ja/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "アップロード"
   },
   "headings": {
-    "subtitle": "ビデオのスタイルを別のスタイルに変更する",
-    "title": "ビデオスタイルの転送"
+    "subtitle": "このベータ版では、ビデオを漫画スタイルに変更します",
+    "title": "ビデオ スタイル転送 (ベータ版)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "ここに「プロンプト」と入力します。例: 人間はクマではありません",
-      "prompt": "ここに「プロンプト」と入力します。例: アニメ風に踊る男性"
+      "prompt": "ここに「プロンプト」と入力します。例: アニメ風に踊る男性",
+      "selectStyle": "何も選択されていません"
     },
     "thumbtip": {
       "styleStrength": "強さ"
+    },
+    "title": {
+      "selectStyle": "スタイルを選択してください"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/ko/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "업로드"
   },
   "headings": {
-    "subtitle": "비디오 스타일을 다른 스타일로 변경하세요.",
-    "title": "비디오 스타일 전송"
+    "subtitle": "이 베타에서는 비디오를 만화 스타일로 변경합니다.",
+    "title": "비디오 스타일 전송(베타)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "여기에 프롬프트를 입력하세요. 예: 사람은 곰이 아니다",
-      "prompt": "여기에 프롬프트를 입력하세요. 예: 애니메이션 스타일로 춤추는 남자"
+      "prompt": "여기에 프롬프트를 입력하세요. 예: 애니메이션 스타일로 춤추는 남자",
+      "selectStyle": "선택한 항목 없음"
     },
     "thumbtip": {
       "styleStrength": "힘"
+    },
+    "title": {
+      "selectStyle": "스타일을 선택하세요"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/pt/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Carregar"
   },
   "headings": {
-    "subtitle": "Mude o estilo do seu vídeo de um para outro",
-    "title": "Transferência de estilo de vídeo"
+    "subtitle": "Nesta versão beta, transformamos seu vídeo em estilo cartoon",
+    "title": "Transferência de estilo de vídeo (beta.)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Digite prompt aqui. Ex.: O homem não é um urso",
-      "prompt": "Digite prompt aqui. Ex.: Homem dançando no estilo anime"
+      "prompt": "Digite prompt aqui. Ex.: Homem dançando no estilo anime",
+      "selectStyle": "Nenhum selecionado"
     },
     "thumbtip": {
       "styleStrength": "Força"
+    },
+    "title": {
+      "selectStyle": "Selecione um estilo"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/ru/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Загрузить"
   },
   "headings": {
-    "subtitle": "Меняйте стиль вашего видео с одного на другой",
-    "title": "Передача стиля видео"
+    "subtitle": "В этой бета-версии мы преобразуем ваше видео в мультяшный стиль.",
+    "title": "Перенос стилей видео (бета-версия)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Введите подсказку здесь. Например: Человек не медведь",
-      "prompt": "Введите подсказку здесь. Например: Мужчина танцует в стиле аниме."
+      "prompt": "Введите подсказку здесь. Например: Мужчина танцует в стиле аниме.",
+      "selectStyle": "Не выбрано, ничего не выбрано"
     },
     "thumbtip": {
       "styleStrength": "Сила"
+    },
+    "title": {
+      "selectStyle": "Выберите стиль"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/th/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "ที่อัพโหลด"
   },
   "headings": {
-    "subtitle": "เปลี่ยนสไตล์วิดีโอของคุณจากที่หนึ่งไปอีกที่หนึ่ง",
-    "title": "การถ่ายโอนสไตล์วิดีโอ"
+    "subtitle": "ในรุ่นเบต้านี้ เราจะเปลี่ยนวิดีโอของคุณให้เป็นสไตล์การ์ตูน",
+    "title": "การโอนสไตล์วิดีโอ (เบต้า)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "พิมพ์ prompt ที่นี่ เช่น มนุษย์ไม่ใช่หมี",
-      "prompt": "พิมพ์ prompt ที่นี่ เช่น ผู้ชายเต้นตามสไตล์อนิเมะ"
+      "prompt": "พิมพ์ prompt ที่นี่ เช่น ผู้ชายเต้นตามสไตล์อนิเมะ",
+      "selectStyle": "ไม่ได้เลือกเลย"
     },
     "thumbtip": {
       "styleStrength": "ความแข็งแกร่ง"
+    },
+    "title": {
+      "selectStyle": "เลือกสไตล์"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/tr/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Yüklemek"
   },
   "headings": {
-    "subtitle": "Videonuzun stilini birinden diğerine değiştirin",
-    "title": "Video Stili Aktarımı"
+    "subtitle": "Bu betada videonuzu çizgi film stiline dönüştürüyoruz",
+    "title": "Video Stili Aktarımı (beta.)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "İstemi buraya yazın. Örnek: İnsan ayı değildir",
-      "prompt": "İstemi buraya yazın. Örnek: Anime tarzında dans eden adam"
+      "prompt": "İstemi buraya yazın. Örnek: Anime tarzında dans eden adam",
+      "selectStyle": "Hiçbiri seçilmedi"
     },
     "thumbtip": {
       "styleStrength": "Kuvvet"
+    },
+    "title": {
+      "selectStyle": "Bir stil seçin"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/vi/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "Tải lên"
   },
   "headings": {
-    "subtitle": "Thay đổi phong cách video của bạn từ cái này sang cái khác",
-    "title": "Chuyển kiểu video"
+    "subtitle": "Trong phiên bản beta này, chúng tôi thay đổi video của bạn thành phong cách hoạt hình",
+    "title": "Chuyển kiểu video (beta.)"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "Nhập lời nhắc ở đây. Ví dụ: Con người không phải là gấu",
-      "prompt": "Nhập lời nhắc ở đây. Ví dụ: Người đàn ông nhảy theo phong cách anime"
+      "prompt": "Nhập lời nhắc ở đây. Ví dụ: Người đàn ông nhảy theo phong cách anime",
+      "selectStyle": "Không có gì được chọn"
     },
     "thumbtip": {
       "styleStrength": "Sức mạnh"
+    },
+    "title": {
+      "selectStyle": "Chọn một phong cách"
     }
   },
   "message": {

packages/fakeyou.com/public/locales/zh-Hans/VideoStyleTransfer.json

@@ -7,8 +7,8 @@
     "upload": "上传"
   },
   "headings": {
-    "subtitle": "将视频风格从一种更改为另一种",
-    "title": "视频风格迁移"
+    "subtitle": "在此测试版中，我们将您的视频更改为卡通风格",
+    "title": "视频风格迁移（测试版）"
   },
   "image": {
     "label": {
@@ -24,10 +24,14 @@
     },
     "placeholder": {
       "negPrompt": "在此输入提示。例如：人不是熊",
-      "prompt": "在此输入提示。例如：以动漫风格跳舞的男人"
+      "prompt": "在此输入提示。例如：以动漫风格跳舞的男人",
+      "selectStyle": "未选择"
     },
     "thumbtip": {
       "styleStrength": "力量"
+    },
+    "title": {
+      "selectStyle": "选择风格"
     }
   },
   "message": {

packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx

@@ -20,18 +20,21 @@ export type SelectModalData = {
 
 interface SelectModalProps {
   label?: string;
+  placeholder?: string;
   modalTitle?: string;
   value?: string | SelectModalData;
   onClear: () => void;
+  forcedClose?: Date; //if you need to force close modal, supply date
   required?: boolean;
   children: ReactNode
 }
 
 export default memo(function SelectModal ({
   label,
-  // tabs,
   modalTitle = "Select",
+  placeholder = "None selected",
   onClear,
+  forcedClose,
   value:valueProps = "",
   required,
   children
@@ -39,7 +42,7 @@ export default memo(function SelectModal ({
     const [isModalOpen, setModalOpen] = useState(false)
     const openModal = () => setModalOpen(true);
     const closeModal = () => setModalOpen(false);
-    useEffect(closeModal, [valueProps]);
+    useEffect(closeModal, [valueProps, forcedClose]);
     const value = typeof valueProps === "string" ? valueProps : valueProps.title;
 
     return (
@@ -60,7 +63,7 @@ export default memo(function SelectModal ({
             <Input
               disabled={true}
               wrapperClassName="w-100"
-              placeholder="None selected"
+              placeholder={placeholder}
               onClick={openModal}
               value={value}
             />

packages/fakeyou.com/src/scss/custom-bootstrap.scss

@@ -1,6 +1,6 @@
 // Override the $spacers variable
 $spacers: (
-  0: 0,
+  0: 0rem,
   1: 0.25rem,
   2: 0.5rem,
   3: 1rem,

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx

@@ -26,12 +26,16 @@ import {
   landscapePreset,
   typogPreset,
   defaultPreset,
-} from "./cnPresets";
+} from "./dataCnPresets";
 
 export default function SectionAdvanceOptions({
+  debug,
+  t,
   vstValues: vstVal,
   onChange: handleOnChange,
 }: {
+  debug?: boolean;
+  t: Function;
   vstValues: VSTType;
   onChange: (val: {
     [key: string]: number | string | boolean | undefined;

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compStyleModal.tsx

@@ -0,0 +1,72 @@
+import React, {useRef, useState} from 'react';
+
+import {
+  MasonryGrid,
+  WeightsCards }
+from 'components/common';
+import { SelectModalV2 } from "components/common/SelectModal";
+import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
+
+import styleModels from './dataStyleModels';
+
+export default function CompStyleModal({
+  debug,
+  t,
+  value,
+  onChange,
+}:{
+  debug?: boolean;
+  t: Function;
+  value: string;
+  onChange: (val: {
+    [key: string]: number | string | boolean | undefined;
+  }) => void;
+}){
+  const gridContainerRef = useRef<HTMLDivElement | null>(null);
+  const [onSelectTimeStamp, setOnSelectTimeStamp] = useState<Date>(new Date());
+  return(
+    <SelectModalV2
+      modalTitle={t("input.title.selectStyle")}
+      label={t("input.label.selectStyle")}
+      value={value}
+      placeholder={t("input.placeholder.selectStyle")}
+      forcedClose={onSelectTimeStamp}
+      onClear={()=>onChange({
+        sdModelToken: "",
+        sdModelTitle: "",
+      })}
+    >
+      <MasonryGrid
+        gridRef={gridContainerRef}
+        onLayoutComplete={() => {if(debug)console.log("Layout complete!")}}
+      >
+      {styleModels.map((data: any, key: number) => {
+        const weightProps: any = {
+          data,
+          type: "weights",
+          inSelectModal: true,
+          onResultSelect: (data: any)=>{
+            onChange({
+              sdModelToken:data.token,
+              sdModelTitle: data.title,
+            })
+            setOnSelectTimeStamp(new Date());
+          }
+        };
+        console.log(data);
+        return (
+          <div key={key}
+            className="col-12 col-sm-6 col-xl-4 grid-item"
+          >
+          <WeightsCards 
+            type={WeightCategory.SD}
+            props={weightProps}
+          />
+          </div>
+        );
+      })}
+      </MasonryGrid>
+    </SelectModalV2>
+  );
+
+}

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataDefaultValues.tsx

@@ -1,5 +1,5 @@
-import { defaultPreset as defaultCN } from "./cnPresets";
-import styleModels from "./styleModel";
+import { defaultPreset as defaultCN } from "./dataCnPresets";
+import styleModels from "./dataStyleModels";
 export {initialValues, hiddenValues};
 const initialValues = {
   //files Settings

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataStyleModels.tsx

@@ -0,0 +1,77 @@
+const styleModels = [
+  {
+    "weight_token": "weight_yqexh77ntqyawzgh9fzash798",
+    "weight_type": "sd_1.5",
+    "weight_category": "image_generation",
+    "title": "Flat2D Animerge v3",
+    "maybe_cover_image_public_bucket_path": "/media/2/t/5/a/q/2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n/upload_2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n.png",
+    "cover_image": {
+        "maybe_cover_image_public_bucket_path": "/media/2/t/5/a/q/2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n/upload_2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n.png",
+        "default_cover": {
+            "image_index": 16,
+            "color_index": 2
+        }
+    },
+    "creator": {
+        "user_token": "U:38X9ACM68GFK7",
+        "username": "crossproduct1",
+        "display_name": "crossproduct1",
+        "gravatar_hash": "e7cc43eed149c304c917383c665fe9e2",
+        "default_avatar": {
+            "image_index": 4,
+            "color_index": 8
+        }
+    },
+    "creator_set_visibility": "public",
+    "file_size_bytes": 0,
+    "file_checksum_sha2": "5dd56bfa12e9ea2f1f3e86a04d0d2cde06a58f2cdf3bfc46cbff6aaa8f00921d",
+    "creator_username": "crossproduct1",
+    "creator_display_name": "crossproduct1",
+    "creator_email_gravatar_hash": "e7cc43eed149c304c917383c665fe9e2",
+    "stats": {
+        "positive_rating_count": 2,
+        "bookmark_count": 1
+    },
+    "created_at": "2024-02-28T21:00:43Z",
+    "updated_at": "2024-02-28T21:00:43Z"
+  },
+//   {
+//     "weight_token": "weight_vbz0wq7wkv80casj3vfptrrpg",
+//     "title": "Aniverse V15 Pruned",
+//     "weight_type": "sd_1.5",
+//     "weight_category": "image_generation",
+//     "description_markdown": "Used In Ghibli Style with Ghubli Lora",
+//     "description_rendered_html": "",
+//     "creator": {
+//         "user_token": "U:38X9ACM68GFK7",
+//         "username": "crossproduct1",
+//         "display_name": "crossproduct1",
+//         "gravatar_hash": "e7cc43eed149c304c917383c665fe9e2",
+//         "default_avatar": {
+//             "image_index": 4,
+//             "color_index": 8
+//         }
+//     },
+//     "creator_set_visibility": "public",
+//     "file_size_bytes": 0,
+//     "file_checksum_sha2": "3335ce7830ff1de58ba1b120c91091935c8e84581244f63c94d01eeb53d42797",
+//     "cover_image": {
+//         "maybe_cover_image_public_bucket_path": "/media/3/x/5/z/5/3x5z550m80v7cz0x23jmb7aerbwasq71/upload_3x5z550m80v7cz0x23jmb7aerbwasq71.png",
+//         "default_cover": {
+//             "image_index": 1,
+//             "color_index": 5
+//         }
+//     },
+//     "maybe_cover_image_public_bucket_path": "/media/3/x/5/z/5/3x5z550m80v7cz0x23jmb7aerbwasq71/upload_3x5z550m80v7cz0x23jmb7aerbwasq71.png",
+//     "stats": {
+//         "positive_rating_count": 1,
+//         "bookmark_count": 1
+//     },
+//     "version": 0,
+//     "created_at": "2024-02-29T19:49:52Z",
+//     "updated_at": "2024-02-29T19:49:52Z"
+//   }
+]
+
+export default styleModels;
+

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx

@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from "uuid";
-import { hiddenValues } from "./defaultValues";
+import { hiddenValues } from "./dataDefaultValues";
 
 export type VSTType = {
   // File Settings

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx

@@ -2,22 +2,21 @@ import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 import { useParams, useHistory } from "react-router-dom";
 
-import { Button, Panel, TextArea, WeightsCards } from "components/common";
+import { Button, Panel, TextArea } from "components/common";
 import VideoQuickTrim, {
   QuickTrimData,
 } from "components/common/VideoQuickTrim";
-import { SelectModalV2 } from "components/common/SelectModal";
 import EnqueueVideoStyleTransfer from "@storyteller/components/src/api/video_styleTransfer";
 
 import { Action, State } from "../../reducer";
-import { initialValues } from "./defaultValues";
+import { initialValues } from "./dataDefaultValues";
 import { mapRequest, VSTType } from "./helpers";
 
-import styleModels from "./styleModel";
-import SectionAdvanceOptions from "./sectionAdvanceOptions";
+import CompStyleModal from "./compStyleModal";
+import CompAdvanceOptions from "./compAdvanceOptions";
 
 export default function PageVSTApp({
-  debug,
+  debug: debugProps,
   t,
   pageState,
   dispatchPageState,
@@ -29,6 +28,7 @@ export default function PageVSTApp({
   parentPath: string;
   dispatchPageState: (action: Action) => void;
 }) {
+  const debug = debugProps || true;
   const { mediaToken } = useParams<any>();
 
   const [vstValues, setVstValues] = useState<VSTType>({
@@ -109,51 +109,26 @@ export default function PageVSTApp({
             }}
           />
 
-          <SelectModalV2
-            modalTitle="Select Styles"
-            label="Select Style"
+          <CompStyleModal
+            debug={debug}
+            t={t}
             value={vstValues.sdModelTitle}
-            onClear={() => {
-              setVstValues(curr => ({
-                ...curr,
-                sdModelToken: "",
-              }));
-            }}
-          >
-            {styleModels.map((data: any, key: number) => {
-              const weightProps = { data };
-              console.log(data);
-              return (
-                <WeightsCards type="image_generation" props={weightProps} />
-              );
-            })}
-          </SelectModalV2>
-
-          <SectionAdvanceOptions
+            onChange={handleOnChange}
+          />
+          <CompAdvanceOptions
+            debug={debug}
+            t={t}
             onChange={handleOnChange}
             vstValues={vstValues}
           />
         </div>
       </div>
-      {/* <div className="row g-3 mt-4">
-        <SectionAdvanceOptions 
-          onChange={handleOnChange}
-          vstValues={vstValues}
-        />
-      </div> */}
+
       <div className="row g-3 mt-4">
         <div className="col-12 d-flex justify-content-between">
           <NavLink to={`${parentPath}`}>
             <Button label={t("button.cancel")} variant="secondary" />
           </NavLink>
-          {/* <Button
-            label="Fake Gen"
-            onClick={()=>{
-              const request = mapRequest(vstValues);
-              console.log(request);
-            }}
-            variant="secondary"
-          />  */}
           <Button
             label={t("button.enqueue")}
             onClick={handleGenerate}
@@ -161,6 +136,27 @@ export default function PageVSTApp({
             disabled={vstValues.trimEnd === 0}
           />
         </div>
+        {debug && 
+          <div className="col-12 d-flex justify-content-end align-items-center">
+            <p className="me-3"><b>Debug Values: </b></p>
+            <Button
+              className="me-3"
+              label="Console Log State"
+              onClick={()=>{
+                console.log(vstValues);
+              }}
+              variant="secondary"
+            />
+            <Button
+              label="Console Log Request"
+              onClick={()=>{
+                const request = mapRequest(vstValues);
+                console.log(request);
+              }}
+              variant="secondary"
+            />
+          </div>
+        }
       </div>
     </Panel>
   );

packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/styleModel.tsx

@@ -1,41 +0,0 @@
-const styleModels = [
-  {
-    "weight_token": "weight_yqexh77ntqyawzgh9fzash798",
-    "weight_type": "sd_1.5",
-    "weight_category": "image_generation",
-    "title": "Flat2D Animerge v3",
-    "maybe_cover_image_public_bucket_path": "/media/2/t/5/a/q/2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n/upload_2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n.png",
-    "cover_image": {
-        "maybe_cover_image_public_bucket_path": "/media/2/t/5/a/q/2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n/upload_2t5aq2nvtdt4zcfvmx8xm6xqzg0tka7n.png",
-        "default_cover": {
-            "image_index": 16,
-            "color_index": 2
-        }
-    },
-    "creator": {
-        "user_token": "U:38X9ACM68GFK7",
-        "username": "crossproduct1",
-        "display_name": "crossproduct1",
-        "gravatar_hash": "e7cc43eed149c304c917383c665fe9e2",
-        "default_avatar": {
-            "image_index": 4,
-            "color_index": 8
-        }
-    },
-    "creator_set_visibility": "public",
-    "file_size_bytes": 0,
-    "file_checksum_sha2": "5dd56bfa12e9ea2f1f3e86a04d0d2cde06a58f2cdf3bfc46cbff6aaa8f00921d",
-    "creator_username": "crossproduct1",
-    "creator_display_name": "crossproduct1",
-    "creator_email_gravatar_hash": "e7cc43eed149c304c917383c665fe9e2",
-    "stats": {
-        "positive_rating_count": 2,
-        "bookmark_count": 1
-    },
-    "created_at": "2024-02-28T21:00:43Z",
-    "updated_at": "2024-02-28T21:00:43Z"
-  },
-]
-
-export default styleModels;
-