Merge pull request #339 from storytold/bflat-fy-voice-designer-use-voice

voice designer use voice

packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx

@@ -8,7 +8,7 @@ import BackButton from "components/common/BackButton";
 interface BackConfig {
   label: string;
   to: string;
-};
+}
 
 interface PageHeaderProps {
   back?: BackConfig;
@@ -57,9 +57,12 @@ export default function PageHeader({
     return (
       <div className="py-3 py-lg-4">
         <Panel clear={true}>
-          {( back || showBackButton) && (
+          {(back || showBackButton) && (
             <div className="d-flex mb-2 mb-lg-3">
-              <BackButton label={back ? back.label : backbuttonLabel} to={ back ? back.to : backbuttonTo } />
+              <BackButton
+                label={back ? back.label : backbuttonLabel}
+                to={back ? back.to : backbuttonTo}
+              />
             </div>
           )}
           <div className="row">
@@ -73,7 +76,9 @@ export default function PageHeader({
                   {/* {icon} */}
                   {title}
                 </h1>
-                <p className="opacity-75">{subText}</p>
+                <p className={typeof subText === "string" ? "opacity-75" : ""}>
+                  {subText}
+                </p>
               </div>
               {showButton && (
                 <div className="d-md-flex">

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -739,7 +739,7 @@ styles with important tags:
   }
 
   .session-tts-section {
-    height: 100%;
+    // height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior: contain;

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

@@ -94,6 +94,7 @@ import TtsModelSearchPage from "./pages/tts/tts_model_search/TtsModelSearchPage"
 import MediaPage from "./pages/media/MediaPage";
 import { VoiceDesignerMainPage } from "./pages/voice_designer/VoiceDesignerMainPage";
 import { VoiceDesignerVoiceEditPage } from "./pages/voice_designer/VoiceDesignerVoiceEditPage";
+import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVoicePage";
 import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmailPage";
 import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage";
 import { PasswordResetChangePage } from "./pages/password_reset/PasswordResetChangePage";
@@ -653,7 +654,7 @@ class PageContainer extends React.Component<
               exact
               path="/voice-designer/dataset/:dataset_token/edit"
               {...{
-                sessionWrapper: this.props.sessionWrapper
+                sessionWrapper: this.props.sessionWrapper,
               }}
               component={DatasetEditor}
             />
@@ -669,8 +670,19 @@ class PageContainer extends React.Component<
               <VoiceDesignerVoiceEditPage />
             </Route>
 
+            <Route path="/voice-designer/voice/:voice_token">
+              <VoiceDesignerUseVoicePage
+                sessionWrapper={this.props.sessionWrapper}
+                sessionSubscriptionsWrapper={
+                  this.props.sessionSubscriptionsWrapper
+                }
+                inferenceJobs={this.props.inferenceJobs}
+                ttsInferenceJobs={this.props.ttsInferenceJobs}
+              />
+            </Route>
+
             <Route path="/voice-designer">
-              <VoiceDesignerMainPage/>
+              <VoiceDesignerMainPage />
             </Route>
 
             <Route path="/generate-speech">

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from "react";
+import {
+  faBarsStaggered,
+  faDeleteLeft,
+  faEdit,
+  faEye,
+  faMemo,
+  faMemoCircleInfo,
+  faMessages,
+  faTrash,
+  faWaveformLines,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Panel from "components/common/Panel/Panel";
+import { Link } from "react-router-dom";
+import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
+import PageHeader from "components/layout/PageHeader";
+import { CommentComponent } from "v2/view/_common/comments/CommentComponent";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import Container from "components/common/Container/Container";
+// import { useSession } from "hooks";
+import TextArea from "components/common/TextArea";
+import { Button } from "components/common";
+import { SessionTtsInferenceResultList } from "v2/view/_common/SessionTtsInferenceResultsList";
+import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob";
+import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
+import { faVolumeUp } from "@fortawesome/free-solid-svg-icons";
+
+interface VoiceDesignerUseVoicePageProps {
+  sessionWrapper: SessionWrapper;
+  sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
+  inferenceJobs: Array<InferenceJob>;
+  ttsInferenceJobs: Array<TtsInferenceJob>;
+}
+
+export default function VoiceDesignerUseVoicePage(
+  props: VoiceDesignerUseVoicePageProps
+) {
+  // const { user } = useSession();
+  // let { token } = useParams() as { token: string };
+  const [textBuffer, setTextBuffer] = useState("");
+
+  const title = "Solid Snake";
+  const subText = "Voice Designer TTS model by Vegito1089";
+  // const tags = ["Speaking", "English", "Character", "Singing", "Spanish"];
+
+  let modelCreatorLink = <Link to="">Creator Name</Link>;
+  let modelTitle = title;
+  let modelDescription = "This is a description of the model";
+  let modelUseCount = 10000;
+  let modelLanguage = "English";
+  let modelType = "RVCv2";
+  let modelUploadDate = "2021-09-10T06:15:04Z";
+  let modelVisibility = (
+    <div>
+      <FontAwesomeIcon icon={faEye} className="me-2" />
+      Public
+    </div>
+  );
+  let modelCreatorBanned = "good standing";
+  let modelCreationIp = "0.0.0.0.0";
+  let modelUpdateIp = "0.0.0.0.0";
+  let frontPageFeatured = "no";
+  let moderatorDeletedAt = "not deleted";
+  let userDeletedAt = "not deleted";
+
+  const voiceDetails = [
+    { label: "Creator", value: modelCreatorLink },
+    { label: "Title", value: modelTitle },
+    { label: "Use count", value: modelUseCount },
+    { label: "Spoken language", value: modelLanguage },
+    { label: "Model type", value: modelType },
+    { label: "Upload date (UTC)", value: modelUploadDate },
+    { label: "Visibility", value: modelVisibility },
+  ];
+
+  const voiceDetailsModerator = [
+    { label: "Creator is banned?", value: modelCreatorBanned },
+    { label: "Creation IP address", value: modelCreationIp },
+    { label: "Update IP address", value: modelUpdateIp },
+    { label: "Mod deleted at (UTC)", value: moderatorDeletedAt },
+    { label: "User deleted at (UTC)", value: userDeletedAt },
+    { label: "Front page featured?", value: frontPageFeatured },
+  ];
+
+  // const shareUrl = window.location.href;
+
+  const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) => {
+    ev.preventDefault();
+  };
+
+  const handleChangeText = (ev: React.FormEvent<HTMLTextAreaElement>) => {
+    const textValue = (ev.target as HTMLTextAreaElement).value;
+    setTextBuffer(textValue);
+  };
+
+  return (
+    <Container type="panel">
+      <PageHeader title={title} subText={subText} />
+
+      <Panel padding={true} mb={true}>
+        <form onSubmit={handleFormSubmit}>
+          <div className="row g-4">
+            <div className="col-12 col-lg-6 d-flex flex-column gap-3">
+              <h4>
+                <FontAwesomeIcon icon={faWaveformLines} className="me-3" />
+                Use Voice
+              </h4>
+              <TextArea
+                placeholder="Enter text you want your character to say here..."
+                value={textBuffer}
+                onChange={handleChangeText}
+                rows={8}
+              />
+              <div className="d-flex gap-3">
+                <Button icon={faVolumeUp} label="Speak" full={true} />
+                <Button
+                  icon={faDeleteLeft}
+                  label="Clear"
+                  full={true}
+                  variant="danger"
+                />
+              </div>
+            </div>
+            <div className="col-12 col-lg-6 d-flex flex-column gap-3">
+              <h4>
+                <FontAwesomeIcon icon={faBarsStaggered} className="me-3" />
+                Session TTS Results
+              </h4>
+              <div className="d-flex flex-column gap-3 session-tts-section">
+                <SessionTtsInferenceResultList
+                  inferenceJobs={props.inferenceJobs}
+                  ttsInferenceJobs={props.ttsInferenceJobs}
+                  sessionSubscriptionsWrapper={
+                    props.sessionSubscriptionsWrapper
+                  }
+                />
+              </div>
+            </div>
+          </div>
+        </form>
+      </Panel>
+
+      {modelDescription && (
+        <Panel padding mb>
+          <h4 className="mb-4">
+            <FontAwesomeIcon icon={faMemo} className="me-3" />
+            Description
+          </h4>
+          <p>{modelDescription}</p>
+        </Panel>
+      )}
+
+      <Panel padding mb>
+        <h4 className="mb-4">
+          <FontAwesomeIcon icon={faMemoCircleInfo} className="me-3" />
+          Voice Details
+        </h4>
+        <table className="table">
+          <tbody>
+            {voiceDetails.map((item, index) => (
+              <tr key={index}>
+                <th scope="row" className="fw-semibold">
+                  {item.label}
+                </th>
+                <td>{item.value}</td>
+              </tr>
+            ))}
+            {props.sessionWrapper.canBanUsers() &&
+              voiceDetailsModerator.map((item, index) => (
+                <tr key={index}>
+                  <th scope="row" className="fw-semibold">
+                    {item.label}
+                  </th>
+                  <td>{item.value}</td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+
+        {props.sessionWrapper.canBanUsers() && (
+          <div className="d-flex flex-column flex-md-row gap-3 mt-5">
+            <Link className={"btn btn-secondary w-100"} to="">
+              <FontAwesomeIcon icon={faEdit} className="me-2" />
+              Edit Model Details
+            </Link>
+            <Link className="btn btn-destructive w-100" to="">
+              <FontAwesomeIcon icon={faTrash} className="me-2" />
+              Delete Model
+            </Link>
+          </div>
+        )}
+      </Panel>
+
+      <Panel padding className="mb-5">
+        <h4 className="mb-4">
+          <FontAwesomeIcon icon={faMessages} className="me-3" />
+          Comments
+        </h4>
+        <CommentComponent
+          entityType="user"
+          entityToken="test"
+          sessionWrapper={props.sessionWrapper}
+        />
+      </Panel>
+    </Container>
+  );
+}