v2v model page update

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 (
+    <div className="container-panel hero-section pt-3 pb-4">
+      <div className="panel p-3 py-4 p-md-4">
+        <div className="row g-3">
+          <div className="col-12 col-lg-8">
+            <h2 className="fw-bold">
+              {props.titleIcon}
+              {props.title}
+            </h2>
+            <p>{props.subText}</p>
+          </div>
+          <div className="col-12 col-lg-4 d-flex flex-wrap justify-content-lg-end gap-2">
+            {props.tags &&
+              props.tags.map((tag, index) => (
+                <div key={index}>
+                  <span className="badge badge-tag">{tag}</span>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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 (
     <motion.div className="container-panel" variants={panel}>
-      <div className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""}`}>
+      <div
+        className={`panel ${props.padding ? "p-3 py-4 p-md-4" : ""} ${
+          props.mb ? "mb-4" : ""
+        }`}
+      >
         {props.children}
       </div>
     </motion.div>

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 {

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -502,6 +502,15 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
+            <Route path="/voice-conversion/:token">
+              <VcModelViewPage
+                sessionSubscriptionsWrapper={
+                  this.props.sessionSubscriptionsWrapper
+                }
+                inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+              />
+            </Route>
+
             <Route path="/voice-conversion">
               <VcModelListPage
                 sessionWrapper={this.props.sessionWrapper}
@@ -522,10 +531,6 @@ class PageContainer extends React.Component<Props, State> {
               />
             </Route>
 
-            <Route path="/voice-conversion/:token">
-              <VcModelViewPage />
-            </Route>
-
             <Route path="/about">
               <AboutPage />
             </Route>

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 <div>VcModelViewPage</div>;
+
+  const title = "Solid Snake";
+  const subText = (
+    <div className="d-flex align-items-center gap-2">
+      <div>
+        <span className="badge-model badge-model-rvc fs-6">RVCv2</span>
+      </div>
+      <p>
+        V2V model created by <Link to="/">Vegito1089</Link>
+      </p>
+    </div>
+  );
+  const tags = ["Speaking", "English", "Character", "Singing", "Spanish"];
+
+  return (
+    <div>
+      <PageHeaderModelView title={title} subText={subText} tags={tags} />
+
+      <Panel padding mb>
+        <div className="row g-5">
+          <div className="col-12 col-lg-6">
+            <h4 className="mb-3">
+              <FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
+              Use Voice
+            </h4>
+            {/* have to replace this below with Voice conversion stuff instead of the textarea */}
+            <form onSubmit={() => {}}>
+              <textarea
+                onChange={() => {}}
+                value={""}
+                className="form-control"
+                placeholder="Textual shenanigans go here..."
+                rows={6}
+              ></textarea>
+              <div className="d-flex gap-3 mt-3">
+                <button className="btn btn-primary w-100">
+                  <FontAwesomeIcon icon={faVolumeHigh} className="me-2" />
+                  Speak
+                </button>
+
+                <button
+                  className="btn btn-destructive w-100"
+                  onClick={() => {}}
+                >
+                  <FontAwesomeIcon icon={faDeleteLeft} className="me-2" />
+                  Clear
+                </button>
+              </div>
+            </form>
+          </div>
+          <div className="col-12 col-lg-6">
+            <h4 className="mb-3">
+              <FontAwesomeIcon icon={faBarsStaggered} className="me-3" />
+              Session V2V Results
+            </h4>
+            <div className="d-flex flex-column gap-3 session-tts-section session-vc-section">
+              <SessionVoiceConversionResultsList
+                inferenceJobs={
+                  props.inferenceJobsByCategory.get(
+                    FrontendInferenceJobType.VoiceConversion
+                  )!
+                }
+                sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
+              />
+            </div>
+          </div>
+        </div>
+      </Panel>
+      <Panel padding>
+        <h4 className="text-center text-lg-start mb-4">
+          <FontAwesomeIcon icon={faBarsStaggered} className="me-3" />
+          Voice Details
+        </h4>
+        lol
+      </Panel>
+    </div>
+  );
 }