diff --git a/packages/fakeyou.com/public/locales/bn/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/bn/VideoStyleTransfer.json index 06b146f981..02a7054dd7 100644 --- a/packages/fakeyou.com/public/locales/bn/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/de/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/de/VideoStyleTransfer.json index ae652bfd7c..fd33438a7c 100644 --- a/packages/fakeyou.com/public/locales/de/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/en/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/en/VideoStyleTransfer.json index 979e27c192..3e844b7bae 100644 --- a/packages/fakeyou.com/public/locales/en/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/es/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/es/VideoStyleTransfer.json index e4d3a1f35b..8c7a1d841e 100644 --- a/packages/fakeyou.com/public/locales/es/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/fr/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/fr/VideoStyleTransfer.json index c32fe60789..0c73eca28a 100644 --- a/packages/fakeyou.com/public/locales/fr/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/hi/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/hi/VideoStyleTransfer.json index e99e01be75..9493df5ee9 100644 --- a/packages/fakeyou.com/public/locales/hi/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/id/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/id/VideoStyleTransfer.json index 954b96fb30..2122569c55 100644 --- a/packages/fakeyou.com/public/locales/id/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/it/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/it/VideoStyleTransfer.json index e951e98eb5..9f65087004 100644 --- a/packages/fakeyou.com/public/locales/it/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/ja/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/ja/VideoStyleTransfer.json index 9a5e5cf5a0..087ed5df6a 100644 --- a/packages/fakeyou.com/public/locales/ja/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/ko/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/ko/VideoStyleTransfer.json index 438e48739d..8a9ca91239 100644 --- a/packages/fakeyou.com/public/locales/ko/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/pt/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/pt/VideoStyleTransfer.json index 4137cdad9c..2826b5516d 100644 --- a/packages/fakeyou.com/public/locales/pt/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/ru/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/ru/VideoStyleTransfer.json index 414a1c1839..9123a138c3 100644 --- a/packages/fakeyou.com/public/locales/ru/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/th/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/th/VideoStyleTransfer.json index dffba0f53b..8d74a0c6c1 100644 --- a/packages/fakeyou.com/public/locales/th/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/tr/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/tr/VideoStyleTransfer.json index ca1ac81479..ee5afae82c 100644 --- a/packages/fakeyou.com/public/locales/tr/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/vi/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/vi/VideoStyleTransfer.json index b251c107be..612dcbe46d 100644 --- a/packages/fakeyou.com/public/locales/vi/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/public/locales/zh-Hans/VideoStyleTransfer.json b/packages/fakeyou.com/public/locales/zh-Hans/VideoStyleTransfer.json index 30411b2b3f..6ba9c89195 100644 --- a/packages/fakeyou.com/public/locales/zh-Hans/VideoStyleTransfer.json +++ b/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": { diff --git a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx b/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx index 0408f0aec2..accc1c3261 100644 --- a/packages/fakeyou.com/src/components/common/SelectModal/SelectModalV2.tsx +++ b/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 ({ diff --git a/packages/fakeyou.com/src/scss/custom-bootstrap.scss b/packages/fakeyou.com/src/scss/custom-bootstrap.scss index af52e438e1..b865ec6b74 100644 --- a/packages/fakeyou.com/src/scss/custom-bootstrap.scss +++ b/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, diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx similarity index 99% rename from packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx rename to packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx index 6514bd9afc..be700ae4aa 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/sectionAdvanceOptions.tsx +++ b/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; diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compStyleModal.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compStyleModal.tsx new file mode 100644 index 0000000000..38612db3da --- /dev/null +++ b/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(null); + const [onSelectTimeStamp, setOnSelectTimeStamp] = useState(new Date()); + return( + onChange({ + sdModelToken: "", + sdModelTitle: "", + })} + > + {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 ( +
+ +
+ ); + })} + + + ); + +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataCnPresets.tsx similarity index 100% rename from packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/cnPresets.tsx rename to packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataCnPresets.tsx diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataDefaultValues.tsx similarity index 88% rename from packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx rename to packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataDefaultValues.tsx index 728c90f036..7273dc7976 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/defaultValues.tsx +++ b/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 diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataStyleModels.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataStyleModels.tsx new file mode 100644 index 0000000000..74915b39bd --- /dev/null +++ b/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; + diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx index 0ffb3eeeb2..cc0681c64d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx +++ b/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 diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx index c39eb2d192..e6eb05181d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx +++ b/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(); const [vstValues, setVstValues] = useState({ @@ -109,51 +109,26 @@ export default function PageVSTApp({ }} /> - { - setVstValues(curr => ({ - ...curr, - sdModelToken: "", - })); - }} - > - {styleModels.map((data: any, key: number) => { - const weightProps = { data }; - console.log(data); - return ( - - ); - })} - - - + - {/*
- -
*/} +
+ {debug && +
+

Debug Values:

+
+ }
); diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/styleModel.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/styleModel.tsx deleted file mode 100644 index 3520da7a38..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/styleModel.tsx +++ /dev/null @@ -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; -