-
+
{props.titleIcon && (
-
+
)}
{props.title}
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/landing/Dashboard.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
index 8e062a4572..1622d746ca 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
@@ -78,7 +78,7 @@ export default function Dashboard(props: DashboardProps) {
to: "/voice-conversion",
title: t("productVcTitle"),
text: t("productVcText"),
- imgSrc: "/images/landing/select-vc.webp",
+ imgSrc: "/images/landing/select-v2v.webp",
imgAlt: "Voice Conversion",
},
{
@@ -97,7 +97,7 @@ export default function Dashboard(props: DashboardProps) {
to: "/face-animator",
title: t("productFaceAnimatorTitle"),
text: t("productFaceAnimatorText"),
- imgSrc: "/images/landing/select-w2l.webp",
+ imgSrc: "/images/landing/select-fa.webp",
imgAlt: "Face Animator",
},
{
@@ -112,6 +112,18 @@ export default function Dashboard(props: DashboardProps) {
label: "NEW",
},
},
+ {
+ to: "/video-styletransfer",
+ title: t("productVideoStyleTransferTitle"),
+ text: t("productVideoStyleTransferText"),
+ imgSrc: "/images/landing/select-vst.webp",
+ imgAlt: "Video Style Transfer",
+ badgeContent: {
+ type: "new",
+ icon: faSparkles,
+ label: "NEW",
+ },
+ },
];
return (
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx
index ea29b33241..5425463984 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx
@@ -1,17 +1,20 @@
-import React, {useReducer, useEffect} from 'react';
+import React, { useReducer, useEffect } from "react";
-import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { StudioNotAvailable } from 'v2/view/_common/StudioNotAvailable';
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable";
import { useInferenceJobs, useLocalize } from "hooks";
-import { FrontendInferenceJobType, InferenceJob } from '@storyteller/components/src/jobs/InferenceJob';
-
+import {
+ FrontendInferenceJobType,
+ InferenceJob,
+} from "@storyteller/components/src/jobs/InferenceJob";
import { Container } from "components/common";
-import PageHeader from "components/layout/PageHeader";
import { states, reducer } from "./reducer";
import SubRoutes from "./routes";
+import PageHeaderWithImage from "components/layout/PageHeaderWithImage";
+import { faFilms } from "@fortawesome/pro-solid-svg-icons";
-export default function VideoStyleTransfer(props:{
+export default function VideoStyleTransfer(props: {
enqueueInferenceJob: (
jobToken: string,
frontendInferenceJobType: FrontendInferenceJobType
@@ -19,18 +22,16 @@ export default function VideoStyleTransfer(props:{
inferenceJobs: Array;
inferenceJobsByCategory: Map>;
sessionWrapper: SessionWrapper;
-}){
+}) {
const debug = false;
- const {t} = useLocalize("VideoStyleTransfer");
+ const { t } = useLocalize("VideoStyleTransfer");
const { NO_FILE } = states;
const [pageState, dispatchPageState] = useReducer(reducer, {
status: NO_FILE,
});
const { enqueueInferenceJob } = props;
- useInferenceJobs(
- FrontendInferenceJobType.VideoStyleTransfer
- );
+ useInferenceJobs(FrontendInferenceJobType.VideoStyleTransfer);
useEffect(() => {
if (
pageState.status === states.JOB_ENQUEUED &&
@@ -48,18 +49,23 @@ export default function VideoStyleTransfer(props:{
}, [pageState, enqueueInferenceJob]);
if (!props.sessionWrapper.canAccessStudio()) {
- return
+ return ;
}
- return(
+ return (
- {debug && {`Status:${pageState.status} MediaToken:${pageState.mediaFileToken}`}
}
- {`Status:${pageState.status} MediaToken:${pageState.mediaFileToken}`}
+ )}
+
-
+
);
-}
\ No newline at end of file
+}
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 0f9788575b..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;
-