dev-tts page (#627)

* tts revamp init

* revamp 2 init

* update

* removed urls voice details

packages/fakeyou.com/src/components/common/Badge/Badge.scss

@@ -22,7 +22,7 @@
 
   &.badge-small {
     font-size: 11px;
-    padding: 1px 6px;
+    padding: 2px 6px;
     border-radius: 0.3rem;
   }
 }

packages/fakeyou.com/src/components/common/Label/Label.tsx

@@ -14,14 +14,16 @@ export default function Label({
   required,
   disabled,
 }: Props) {
-  return label ? <div {...{ className: `fy-input-label${disabled ? "opacity-50" : "" }` }}>
-    <label {...{ className: `fw-medium${required ? " required" : "" }` }} >
-      {label}
-    </label>
-    { invalidReason ? (
-      <span {...{ className: "label-error form-text red is-danger" }}>
-        {invalidReason}
-      </span>
-    ) : null }
-  </div> : null;
+  return label ? (
+    <div {...{ className: `fy-input-label${disabled ? "opacity-50" : ""}` }}>
+      <label {...{ className: `fw-medium${required ? " required" : ""}` }}>
+        {label}
+      </label>
+      {invalidReason ? (
+        <span {...{ className: "label-error form-text red is-danger" }}>
+          {invalidReason}
+        </span>
+      ) : null}
+    </div>
+  ) : null;
 }

packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss

@@ -8,7 +8,8 @@
   position: relative;
   background-color: #57577d;
 
-  img, .cover-img-edit {
+  img,
+  .cover-img-edit {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -23,32 +24,36 @@
   }
 
   .cover-img-edit {
-    padding: .25rem;
-    font-size: .75rem;
+    padding: 0.25rem;
+    font-size: 0.75rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all .25s ease-in-out;
+    transition: all 0.25s ease-in-out;
     color: transparent;
 
-    span { text-align: center }
+    span {
+      text-align: center;
+    }
 
     svg {
       position: absolute;
       color: #fff;
-      transition: background .25s ease-in-out;
-      background: rgba(#000, .5);
-      border-radius: .25rem;
-      padding: .5rem;
-      right: .25rem;
-      bottom: .25rem;
+      transition: background 0.25s ease-in-out;
+      background: rgba(#000, 0.5);
+      border-radius: 0.25rem;
+      padding: 0.5rem;
+      right: 0.25rem;
+      bottom: 0.25rem;
     }
 
     &:hover {
       color: #fff;
-      background: rgba(#000, .5);
-      svg { background: none }
+      background: rgba(#000, 0.5);
+      svg {
+        background: none;
+      }
     }
   }
 }

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

@@ -68,6 +68,7 @@ export default function TopNav({
     "/creator-onboarding"
   );
   const isOnWelcomePage = window.location.pathname === "/welcome";
+  const isOnTtsPage = window.location.pathname.includes("/dev-tts");
 
   const { open } = useModal();
   const openModal = () => open({ component: InferenceJobsModal });
@@ -481,11 +482,13 @@ export default function TopNav({
                   {(!isOnLandingPage &&
                     !isOnLoginPage &&
                     !isOnSignUpPage &&
-                    !isOnStudioPage) ||
+                    !isOnStudioPage &&
+                    !isOnTtsPage) ||
                   (loggedIn &&
                     !isOnLoginPage &&
                     !isOnSignUpPage &&
-                    !isOnStudioPage) ||
+                    !isOnStudioPage &&
+                    !isOnTtsPage) ||
                   (isOnLandingPage &&
                     isScrolled &&
                     !isOnLoginPage &&

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

@@ -282,6 +282,9 @@ styles with important tags:
 
   .alert {
     border-radius: 0.5rem !important;
+    padding: 0.75rem 1rem;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   .alert-pricing {
@@ -1812,7 +1815,7 @@ textarea {
     }
 
     .session-tts-section {
-      height: 450px;
+      height: 370px;
     }
 
     .session-vc-section {

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

@@ -727,8 +727,20 @@ class PageContainer extends React.Component<
                     <DevMediaInput />
                   </Route>
 
-                  <Route path="/dev-tts">
-                    <DevTTS />
+                  <Route path="/dev-tts/:weight_token">
+                    <DevTTS
+                      sessionSubscriptionsWrapper={
+                        this.props.sessionSubscriptionsWrapper
+                      }
+                    />
+                  </Route>
+
+                  <Route exact path="/dev-tts">
+                    <DevTTS
+                      sessionSubscriptionsWrapper={
+                        this.props.sessionSubscriptionsWrapper
+                      }
+                    />
                   </Route>
 
                   {/* Route for initial voice creation */}

packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx

@@ -3,11 +3,7 @@ import { Link } from "react-router-dom";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { JobState } from "@storyteller/components/src/jobs/JobStates";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClock,
-  faLink,
-  faHeadphonesSimple,
-} from "@fortawesome/free-solid-svg-icons";
+import { faClock, faHeadphonesSimple } from "@fortawesome/free-solid-svg-icons";
 
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import { Analytics } from "../../../common/Analytics";
@@ -23,6 +19,11 @@ import {
   InferenceJob,
 } from "@storyteller/components/src/jobs/InferenceJob";
 import { useInferenceJobs, useLocalize } from "hooks";
+import { Button } from "components/common";
+import {
+  faArrowDownToLine,
+  faArrowRight,
+} from "@fortawesome/pro-solid-svg-icons";
 
 interface Props {
   sessionSubscriptionsWrapper: SessionSubscriptionsWrapper;
@@ -115,11 +116,7 @@ function SessionTtsInferenceResultList(props: Props) {
 
         results.push(
           <div key={job.jobToken}>
-            <div>
-              <div>
-                <div className={cssStyle}>{stateDescription}</div>
-              </div>
-            </div>
+            <div className={cssStyle}>{stateDescription}</div>
           </div>
         );
       } else {
@@ -145,27 +142,41 @@ function SessionTtsInferenceResultList(props: Props) {
               <button className="delete" aria-label="delete"></button>
             </div>*/}
             <div>
-              <div className="panel panel-tts-results p-4 gap-3 d-flex flex-column">
+              <div className="panel panel-tts-results p-3 gap-3 d-flex flex-column">
                 <div>
-                  <h5 className="mb-2">{job.maybeModelTitle}</h5>
-                  <p>{job.maybeRawInferenceText}</p>
+                  <div className="d-flex align-items-center gap-1">
+                    <h6 className="mb-1 fw-semibold flex-grow-1">
+                      {job.maybeModelTitle}
+                    </h6>
+                    <Button
+                      iconFlip={true}
+                      variant="link"
+                      label="More details"
+                      className="fs-7"
+                      icon={faArrowRight}
+                      to={ttsPermalink}
+                    />
+                  </div>
+
+                  <p className="fs-7">{job.maybeRawInferenceText}</p>
                 </div>
 
-                {/* <audio
-                className="w-100"
-                controls
-                src={audioLink}
-                onClick={() => {
-                  Analytics.ttsClickResultInlinePlay();
-                }}
-              >
-                Your browser does not support the
-                <code>audio</code> element.
-              </audio> */}
+                <div className="d-flex gap-3 align-items-center">
+                  {wavesurfers}
+                  <Button
+                    variant="action"
+                    small={true}
+                    square={true}
+                    icon={faArrowDownToLine}
+                    fontLarge={true}
+                    to={ttsPermalink}
+                    onClick={() => {
+                      Analytics.ttsClickResultLink();
+                    }}
+                  />
+                </div>
 
-                {wavesurfers}
-
-                <div className="mt-2">
+                {/* <div className="mt-2">
                   <Link
                     to={ttsPermalink}
                     onClick={() => {
@@ -176,7 +187,7 @@ function SessionTtsInferenceResultList(props: Props) {
                     <FontAwesomeIcon icon={faLink} className="me-2" />
                     {t("resultsAudioShareDownload")}
                   </Link>
-                </div>
+                </div> */}
               </div>
             </div>
           </div>
@@ -227,13 +238,9 @@ function SessionTtsInferenceResultList(props: Props) {
   }
 
   return (
-    <div>
-      <div>
-        <div className="d-flex flex-column gap-3">
-          {upgradeNotice}
-          <div className="d-flex flex-column gap-3">{results}</div>
-        </div>
-      </div>
+    <div className="d-flex flex-column gap-3">
+      {upgradeNotice}
+      <div className="d-flex flex-column gap-3">{results}</div>
     </div>
   );
 }

packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss

@@ -1,37 +1,81 @@
 @import "scss/colours.scss";
 @import "scss/site-refresh.scss";
 
+.fy-featured-voices-section {
+  background-color: rgba($action, 0.25);
+  border-radius: 0.5rem;
+  padding: 20px;
+}
+
+.fy-featured-voices {
+  background-color: $secondary-light;
+  border-radius: 0.5rem;
+  padding: 0.6rem;
+  border: 2px solid $action;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+  height: 100%;
+
+  &:hover {
+    border-color: $primary;
+    background-color: rgba($action, 0.7);
+  }
+
+  .fy-select-voice {
+    color: $white;
+    padding: 1px 8px;
+    background-color: lighten($action, 5%);
+    border-radius: 0.35rem;
+    font-size: 13px !important;
+  }
+}
+
 .fy-weight-picker {
-	
   @include panel;
-	border-radius: .5rem;
-	background-color: rgba($secondary, .6);
+  border-radius: 0.5rem;
+  background-color: rgba($secondary, 0.6);
 
-	&.fy-weight-picker-full {
-		.fy-input input { border-radius: .5rem .5rem 0 0 }
-	}
+  .fy-card-badge {
+    display: inline-flex;
+    margin-left: 0.5rem;
+  }
 
-	.fy-weight-picker-preview {
-		border-top: 1px solid rgba(#fff,.15);
-		display: flex;
-	}
+  .fy-input {
+    margin-bottom: 0;
+  }
+}
 
-	.fy-card-badge {
-		display: inline-flex;
-		margin-left: .5rem;
-	}
+.fy-weight-picker-preview {
+  border-radius: 0 0 0.5rem 0.5rem;
+  padding: 0.6rem;
+  background-color: rgba($action, 0.8);
+  border: 2px solid lighten($action, 12%);
+  display: flex;
+  align-items: center;
+  transition: all 0.2s;
+  cursor: pointer;
 
-	.fy-input { margin-bottom: 0 }
+  &:hover {
+    background-color: rgba($action, 1);
+    border: 2px solid $primary;
+  }
+}
 
-	.fy-weight-picker-reselect {
-		background-color: $secondary-light;
-		border-radius: .5rem;
-		padding: .5rem;
-		margin: 0 0 auto auto;
-	}
+.fy-weight-picker-reselect {
+  background-color: $secondary;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  margin: 0 0 auto auto;
+  transition: all 0.2s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $action;
+  }
 }
 
 .fy-card-badge {
-	display: flex;
-	height: min-content;
-}
+  display: flex;
+  height: min-content;
+}

packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx

@@ -1,39 +1,84 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import PageHeader from 'components/layout/PageHeader';
 import { MediaBrowser } from "components/modals";
 import { CardBadge } from "components/entities";
-import { Button, Container, Label, Panel, TempTextArea as TextArea, TempInput as Input, WeightCoverImage } from "components/common";
-import { useDebounce, useModal } from "hooks";
+import {
+  Button,
+  Container,
+  Input,
+  Label,
+  Panel,
+  TextArea,
+  WeightCoverImage,
+} from "components/common";
+import { useDebounce, useInferenceJobs, useModal } from "hooks";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
-import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
-import { faRotateLeft, faSearch } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faArrowRight,
+  faBell,
+  faChevronRight,
+  faDeleteLeft,
+  faSearch,
+  faWaveformLines,
+  faXmark,
+} from "@fortawesome/pro-solid-svg-icons";
 import "./DevTTS.scss";
+import { FeaturedVoice } from "./FeaturedVoice";
+import { SessionTtsInferenceResultList } from "v2/view/_common/SessionTtsInferenceResultsList";
+import StorytellerStudioCTA from "components/common/StorytellerStudioCTA";
+import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import {
+  GenerateTtsAudio,
+  GenerateTtsAudioRequest,
+  GenerateTtsAudioResponse,
+  GenerateTtsAudioIsOk,
+} from "@storyteller/components/src/api/tts/GenerateTtsAudio";
+import { v4 as uuidv4 } from "uuid";
+import { WeightType } from "@storyteller/components/src/api/_common/enums";
+import useWeightTypeInfo from "hooks/useWeightTypeInfo";
+import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob";
 
 interface Props {
-  value?: any;
+  sessionSubscriptionsWrapper: any;
 }
 
-export default function DevTTS({ value }: Props) {
+export default function DevTTS({ sessionSubscriptionsWrapper }: Props) {
+  const { enqueueInferenceJob } = useInferenceJobs();
   const { modalState, open } = useModal();
-  const [search,searchSet] = useState("");
-  const [updated,updatedSet] = useState(false);
-  const [selectedVoice,selectedVoiceSet] = useState<Weight | undefined>();
-  const [text,textSet] = useState("");
+  const [search, searchSet] = useState("");
+  const [updated, updatedSet] = useState(false);
+  const [selectedVoice, selectedVoiceSet] = useState<Weight | undefined>();
+  const [text, textSet] = useState("");
   const bucketConfig = new BucketConfig();
-  const preview = bucketConfig.getCdnUrl(selectedVoice?.cover_image?.maybe_cover_image_public_bucket_path || "");
-
+  const preview = selectedVoice?.cover_image
+    ?.maybe_cover_image_public_bucket_path
+    ? bucketConfig.getCdnUrl(
+        selectedVoice?.cover_image?.maybe_cover_image_public_bucket_path
+      )
+    : "/images/avatars/default-pfp.png";
   const textChange = ({ target }: { target: any }) => {
     textSet(target.value);
   };
+  const [isGenerating, setIsGenerating] = useState(false);
+  usePrefixedDocumentTitle(
+    selectedVoice
+      ? selectedVoice.title + " Text to Speech"
+      : "FakeYou. Deep Fake Text to Speech."
+  );
 
-  const searchChange = (setUpdate = true) => ({ target }: { target: any }) => {
-    // console.log("🩵",target.value);
-    if (setUpdate) updatedSet(true);
-    // console.log("aaaa",);
-    searchSet(target.value);
-  };
+  const weightTypeInfo = useWeightTypeInfo(
+    selectedVoice?.weight_type || WeightType.NONE
+  );
+  const { label: weightType, color: weightTagColor } = weightTypeInfo;
+
+  const searchChange =
+    (setUpdate = true) =>
+    ({ target }: { target: any }) => {
+      if (setUpdate) updatedSet(true);
+      searchSet(target.value);
+    };
 
   useDebounce({
     blocked: !(updated && !modalState && search),
@@ -45,47 +90,257 @@ export default function DevTTS({ value }: Props) {
           onSelect: (weight: any) => selectedVoiceSet(weight),
           inputMode: 3,
           onSearchChange: searchChange(false),
-          search
-        }
+          search,
+        },
       });
-    }
+    },
   });
 
-  return <Container>
-    <PageHeader {...{ title: "TTS" }}/>
-    <Panel padding {...{ className: ""}}>
-      <Label {...{ label: "Select a voice" }}/>
-      <div {...{ className: `fy-weight-picker mb-3 fy-weight-picker-${ selectedVoice ? "full" : "empty" }` }}>
-        <Input autoFocus {...{ icon: faSearch, placeholder: "Search 9999 voices...", onChange: searchChange(), value: search  }}/>
-        {
-          selectedVoice && <div {...{ className: "fy-weight-picker-preview p-3" }}>
-            <WeightCoverImage {...{ src: preview, height: 60, width: 60 }}/>
-            <div {...{ className: "fy-weight-picker-preview-details" }}>
-              <h6>
-                { selectedVoice.title }
-                 <CardBadge {...{
-                  className: `fy-entity-type-${ selectedVoice.weight_type || "" }`,
-                  label: selectedVoice.weight_type || ""
-                }}/>
-              </h6>
-              <span>
-                by 
-                <Link {...{ className: "fw-medium", to: `/profile/${ selectedVoice.creator?.username || "" }`}}>
-                  {
-                    " " + selectedVoice.creator?.display_name || "" 
-                  }
-                </Link>
-              </span>
+  const openModal = () => {
+    open({
+      component: MediaBrowser,
+      props: {
+        onSelect: (weight: any) => selectedVoiceSet(weight),
+        inputMode: 3,
+        onSearchChange: searchChange(false),
+        search,
+        accept: ["tts"],
+        title: "Select a Voice",
+      },
+    });
+  };
 
-            </div>
-            <Icon {...{ className: "fy-weight-picker-reselect", icon: faRotateLeft }}/>
-          </div>
-        }
-      </div>
-      { selectedVoice && <TextArea autoFocus {...{ label: "Enter text", onChange: textChange, value: text }}/> }
-      {
-        text && <Button autoFocus {...{ label: "Speak" }}/>
+  const featuredVoiceTokens = [
+    "weight_31ewdsvev9bttgb4eg7zy7mj5",
+    "weight_b8rncypy7gw6nb0wthnwe2kk4",
+    "weight_3k28fws0v6r1ke3p0w0vw48gm",
+    "weight_0f762jdzgsy1dhpb86qxy4ssm",
+    "weight_1ptwk6pa8krh3ykfr7rztf3pz",
+    "weight_b8rncypy7gw6nb0wthnwe2kk4",
+    "weight_3k28fws0v6r1ke3p0w0vw48gm",
+    "weight_0f762jdzgsy1dhpb86qxy4ssm",
+  ];
+
+  const handleSpeak = async () => {
+    if (!selectedVoice || !text) return;
+
+    setIsGenerating(true);
+
+    const request: GenerateTtsAudioRequest = {
+      uuid_idempotency_token: uuidv4(),
+      tts_model_token: selectedVoice.weight_token,
+      inference_text: text,
+    };
+
+    try {
+      const response: GenerateTtsAudioResponse =
+        await GenerateTtsAudio(request);
+      if (GenerateTtsAudioIsOk(response)) {
+        console.log("TTS queued successfully:", response.inference_job_token);
+        enqueueInferenceJob(
+          response.inference_job_token,
+          FrontendInferenceJobType.TextToSpeech
+        );
+        setIsGenerating(false);
+      } else {
+        console.error("Error queuing TTS:", response.error);
+        setIsGenerating(false);
       }
-    </Panel>
-  </Container>;
-};
+    } catch (error) {
+      console.error("Unexpected error:", error);
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <>
+      <Container type="panel" className="mt-3 mt-lg-5">
+        <Panel padding={true}>
+          <h1 className="fw-bold mb-1">Text to Speech</h1>
+          <p className="mb-4 opacity-75 fw-medium">
+            Make your favorite characters speak!
+          </p>
+
+          <div className="d-flex flex-column gap-4">
+            <div className="fy-featured-voices-section d-none d-lg-block">
+              <h5 className="fw-bold">Featured Voices</h5>
+              <div className="row g-3">
+                {featuredVoiceTokens.map(token => (
+                  <FeaturedVoice
+                    key={token}
+                    token={token}
+                    onClick={selectedVoiceSet}
+                  />
+                ))}
+              </div>
+            </div>
+
+            <div className="row">
+              <div className="d-flex flex-column gap-3 col-12 col-lg-6">
+                <div>
+                  <div className="d-flex align-items-center">
+                    {!selectedVoice && (
+                      <div className="mb-2">
+                        <div className="focus-point" />
+                      </div>
+                    )}
+
+                    <div className="d-flex gap-2 align-items-center w-100">
+                      <div className="flex-grow-1">
+                        <Label
+                          label={`${
+                            selectedVoice ? "Selected Voice" : "Select a Voice"
+                          }`}
+                        />
+                      </div>
+
+                      <div className="d-flex gap-2">
+                        {selectedVoice && (
+                          <Button
+                            icon={faBell}
+                            variant="link"
+                            label="Notify me when this voice improves"
+                            className="fs-7"
+                          />
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="position-relative">
+                    <Input
+                      autoFocus
+                      icon={faSearch}
+                      placeholder={"Search from 3000+ voices"}
+                      onChange={searchChange()}
+                      value={search}
+                      style={{ borderRadius: "0.5rem 0.5rem 0 0" }}
+                    />
+                    {search && (
+                      <FontAwesomeIcon
+                        icon={faXmark}
+                        className="position-absolute opacity-75 fs-5"
+                        style={{
+                          right: "1rem",
+                          top: "50%",
+                          transform: "translateY(-50%)",
+                          cursor: "pointer",
+                        }}
+                        onClick={() => searchSet("")}
+                      />
+                    )}
+                  </div>
+                  <div className="fy-weight-picker-preview" onClick={openModal}>
+                    <WeightCoverImage
+                      {...{ src: preview, height: 80, width: 80 }}
+                    />
+                    <div className="d-flex flex-column justify-content-center flex-grow-1">
+                      <h6 className="mb-1 fw-semibold d-flex gap-2 align-items-center">
+                        <div>{selectedVoice?.title || "No Voice Selected"}</div>
+
+                        {selectedVoice?.weight_type && (
+                          <CardBadge
+                            className={`fy-entity-type-${
+                              selectedVoice?.weight_type || ""
+                            }`}
+                            label={weightType || ""}
+                            small={true}
+                            color={weightTagColor || ""}
+                          />
+                        )}
+                      </h6>
+                      {selectedVoice ? (
+                        <span className="fs-7 d-flex gap-1 flex-column flex-lg-row">
+                          <div className="d-flex gap-1">
+                            by
+                            <Link
+                              className="fw-medium"
+                              to={`/profile/${
+                                selectedVoice?.creator?.username || ""
+                              }`}
+                              onClick={e => e.stopPropagation()}
+                            >
+                              {" " + selectedVoice?.creator?.display_name || ""}
+                            </Link>
+                          </div>
+
+                          {/* <span className="opacity-25">|</span>
+                          <span>English</span> */}
+                          <div className="d-flex gap-1 align-items-center">
+                            <span className="d-none d-lg-block px-1 opacity-50">
+                              |
+                            </span>
+                            <Link
+                              to={`/weight/${selectedVoice.weight_token}`}
+                              className="fw-medium"
+                              onClick={e => e.stopPropagation()}
+                            >
+                              View voice details
+                              <FontAwesomeIcon
+                                icon={faArrowRight}
+                                className="ms-2"
+                              />
+                            </Link>
+                          </div>
+                        </span>
+                      ) : (
+                        <span className="fs-7 opacity-75">
+                          Click to select a voice
+                        </span>
+                      )}
+                    </div>
+                    <FontAwesomeIcon
+                      icon={faChevronRight}
+                      className="fs-5 me-1"
+                    />
+                  </div>
+                </div>
+                <TextArea
+                  label="Enter Text"
+                  onChange={textChange}
+                  value={text}
+                  rows={5}
+                  placeholder={`Enter the text you want ${
+                    selectedVoice ? selectedVoice.title : "your character"
+                  } to say...`}
+                  resize={false}
+                />
+                <div className="d-flex justify-content-end gap-2">
+                  <Button
+                    icon={faDeleteLeft}
+                    label="Clear"
+                    disabled={!text}
+                    variant="secondary"
+                    onClick={() => textSet("")}
+                  />
+                  <Button
+                    icon={faWaveformLines}
+                    label="Speak"
+                    onClick={handleSpeak}
+                    disabled={!selectedVoice || !text}
+                    isLoading={isGenerating}
+                  />
+                </div>
+              </div>
+              <div className="col-12 col-lg-6">
+                <div className="d-flex flex-column">
+                  <Label label="Output" />
+                  <div className="d-flex flex-column session-tts-section">
+                    <SessionTtsInferenceResultList
+                      sessionSubscriptionsWrapper={sessionSubscriptionsWrapper}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Panel>
+      </Container>
+
+      <Container type="panel" className="py-5 mt-5 d-flex flex-column gap-5">
+        {/* <MentionsSection /> */}
+        <StorytellerStudioCTA />.
+      </Container>
+    </>
+  );
+}

packages/fakeyou.com/src/v2/view/pages/dev_tts/FeaturedVoice.tsx

@@ -0,0 +1,81 @@
+import { WeightType } from "@storyteller/components/src/api/_common/enums";
+import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
+import LoadingSpinner from "components/common/LoadingSpinner";
+import WeightCoverImage from "components/common/WeightCoverImage";
+import { CardBadge } from "components/entities";
+import { useWeightFetch } from "hooks";
+import useWeightTypeInfo from "hooks/useWeightTypeInfo";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+interface FeaturedVoiceProps {
+  token: string;
+  onClick?: (weight: any) => void;
+}
+
+export const FeaturedVoice = ({ token, onClick }: FeaturedVoiceProps) => {
+  const weight_token = token;
+  const fetchedWeight = useWeightFetch({
+    onSuccess: () => setIsLoading(false),
+    token: weight_token,
+  });
+
+  const { data: weight } = fetchedWeight;
+
+  const bucketConfig = new BucketConfig();
+
+  const weightTypeInfo = useWeightTypeInfo(
+    weight?.weight_type || WeightType.NONE
+  );
+  const { label: weightType, color: weightTagColor } = weightTypeInfo;
+
+  const coverImage = weight?.cover_image?.maybe_cover_image_public_bucket_path
+    ? bucketConfig.getCdnUrl(
+        weight?.cover_image?.maybe_cover_image_public_bucket_path
+      )
+    : "/images/avatars/default-pfp.png";
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <div className="col-12 col-lg-6 col-xl-3">
+      <div
+        className="fy-featured-voices d-flex align-items-center position-relative"
+        onClick={() => onClick && weight && onClick(weight)}
+        style={{ height: "74px" }}
+      >
+        {isLoading ? (
+          <div className="w-100 d-flex align-items-center justify-content-center">
+            <LoadingSpinner />
+          </div>
+        ) : (
+          <>
+            <WeightCoverImage {...{ src: coverImage, height: 50, width: 50 }} />
+            <div className="d-flex flex-column justify-content-center">
+              <h6 className="mb-1 fw-semibold d-flex align-items-center gap-2">
+                {weight?.title}
+                <CardBadge
+                  label={weightType}
+                  color={weightTagColor}
+                  small={true}
+                />
+              </h6>
+              <span className="fs-7 fw-medium">
+                by{" "}
+                <Link to={`/profile/${weight?.creator.display_name}`}>
+                  {weight?.creator.display_name}
+                </Link>
+              </span>
+            </div>
+            <div
+              className="position-absolute fs-7 fw-medium fy-select-voice"
+              style={{ bottom: "8px", right: "8px" }}
+            >
+              Use
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};