diff --git a/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx new file mode 100644 index 0000000000..0a6e561d63 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/PageHeaderModelView.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +interface PageHeaderModelViewProps { + titleIcon?: React.ReactNode; + title: string; + subText: React.ReactNode; + tags?: string[]; +} + +export default function PageHeaderModelView(props: PageHeaderModelViewProps) { + return ( +
+
+
+
+

+ {props.titleIcon} + {props.title} +

+

{props.subText}

+
+
+ {props.tags && + props.tags.map((tag, index) => ( +
+ {tag} +
+ ))} +
+
+
+
+ ); +} diff --git a/packages/fakeyou.com/src/components/common/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel.tsx index 6ad8c5dcf0..8ae8d478ce 100644 --- a/packages/fakeyou.com/src/components/common/Panel.tsx +++ b/packages/fakeyou.com/src/components/common/Panel.tsx @@ -5,12 +5,17 @@ import { panel } from "data/animation"; interface PanelProps { children: React.ReactNode; padding?: boolean; + mb?: boolean; } export default function Panel(props: PanelProps) { return ( -
+
{props.children}
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 65f8940ed3..eebb2ff48b 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -662,6 +662,13 @@ styles with important tags: background-color: #fff3cd; color: #664d03; } + + &.badge-tag { + font-size: 13px; + padding: 6px 12px; + background-color: $input-dark; + color: $white; + } } .badge-model { diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index b5ed8144be..976d368bd9 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -502,6 +502,15 @@ class PageContainer extends React.Component { /> + + + + { /> - - - - diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx index 8292f89871..5f850ae2ef 100644 --- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx @@ -1,9 +1,99 @@ +import { + faBarsStaggered, + faDeleteLeft, + faVolumeHigh, +} from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; +import Panel from "components/common/Panel"; import React from "react"; -import { useParams } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; +import { SessionVoiceConversionResultsList } from "v2/view/_common/SessionVoiceConversionResultsList"; +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import PageHeaderModelView from "components/common/PageHeaderModelView"; -interface VcModelViewPageProps {} +interface VcModelViewPageProps { + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; + inferenceJobsByCategory: any; +} export default function VcModelViewPage(props: VcModelViewPageProps) { let { token } = useParams() as { token: string }; - return
VcModelViewPage
; + + const title = "Solid Snake"; + const subText = ( +
+
+ RVCv2 +
+

+ V2V model created by Vegito1089 +

+
+ ); + const tags = ["Speaking", "English", "Character", "Singing", "Spanish"]; + + return ( +
+ + + +
+
+

+ + Use Voice +

+ {/* have to replace this below with Voice conversion stuff instead of the textarea */} +
{}}> + +
+ + + +
+
+
+
+

+ + Session V2V Results +

+
+ +
+
+
+
+ +

+ + Voice Details +

+ lol +
+
+ ); }