added language selection for TTS and VC models on update weight page

src/website/packages/components/src/api/Languages.ts

@@ -0,0 +1,32 @@
+export type LanguageTag =
+  | "en" // English
+  | "es" // Spanish
+  | "fr" // French
+  | "de" // German
+  | "hi" // Hindi
+  | "it" // Italian
+  | "pt" // Portuguese
+  | "tr" // Turkish
+  | "ar" // Arabic
+  | "ja" // Japanese
+  | "id" // Indonesian
+  | "ru" // Russian
+  | "th" // Thai
+  | "zh"; // Chinese
+
+export const LanguageLabels: Record<LanguageTag, string> = {
+  en: "English",
+  es: "Spanish",
+  fr: "French",
+  de: "German",
+  hi: "Hindi",
+  it: "Italian",
+  pt: "Portuguese",
+  tr: "Turkish",
+  ar: "Arabic",
+  ja: "Japanese",
+  id: "Indonesian",
+  ru: "Russian",
+  th: "Thai",
+  zh: "Chinese",
+};

src/website/packages/components/src/api/weights/GetWeight.ts

@@ -2,6 +2,7 @@ import MakeRequest from "../MakeRequest";
 import { UserDetailsLight } from "../_common/UserDetailsLight";
 import { WeightCategory } from "../_common/enums/WeightCategory";
 import { WeightType } from "../_common/enums/WeightType";
+import { LanguageTag } from "../Languages";
 
 export interface Weight {
   weight_token: string;
@@ -32,6 +33,7 @@ export interface Weight {
     positive_rating_count: number;
   };
   usage_count: number;
+  language_tag: LanguageTag;
 }
 
 export interface GetWeightRequest {}

src/website/packages/components/src/api/weights/UpdateWeight.ts

@@ -1,20 +1,28 @@
 import MakeRequest from "../MakeRequest";
+import { LanguageTag } from "../Languages";
 
 export interface UpdateWeightRequest {
   cover_image_media_file_token?: string;
-  description_markdown: string,
-  description_rendered_html: string,
-  title: string,
-  visibility: string,
-  weight_category: string,
-  weight_type: string
+  description_markdown: string;
+  description_rendered_html: string;
+  title: string;
+  visibility: string;
+  weight_category: string;
+  weight_type: string;
+  language_tag: LanguageTag;
 }
 
 export interface UpdateWeightResponse {
-  success: boolean
+  success: boolean;
 }
 
-export const UpdateWeight = MakeRequest<string, UpdateWeightRequest, UpdateWeightResponse,{}>({
+export const UpdateWeight = MakeRequest<
+  string,
+  UpdateWeightRequest,
+  UpdateWeightResponse,
+  {}
+>({
   method: "POST",
-  routingFunction: (weight_token: string) => `/v1/weights/weight/${ weight_token }`,
-});
+  routingFunction: (weight_token: string) =>
+    `/v1/weights/weight/${weight_token}`,
+});

src/website/packages/fakeyou.com/src/hooks/useWeightFetch/useWeightFetch.tsx

@@ -8,6 +8,7 @@ import {
 import { UpdateWeight } from "@storyteller/components/src/api/weights/UpdateWeight";
 import { DeleteWeight } from "@storyteller/components/src/api/weights/DeleteWeight";
 import { useCoverImgUpload } from "hooks";
+import { LanguageTag } from "@storyteller/components/src/api/Languages";
 
 interface Props {
   onSuccess?: (res: Weight) => any;
@@ -30,6 +31,7 @@ export default function useWeightFetch({
   const [title, titleSet] = useState("");
   const [maybeUrlSlug, maybeUrlSlugSet] = useState(undefined);
   const [visibility, visibilitySet] = useState("public");
+  const [languageTag, languageTagSet] = useState<LanguageTag>("en");
   const [descriptionMD, descriptionMDSet] = useState("");
   const isLoading =
     status === FetchStatus.ready || status === FetchStatus.in_progress;
@@ -42,6 +44,7 @@ export default function useWeightFetch({
       descriptionMDSet,
       titleSet,
       visibilitySet,
+      languageTagSet,
     };
     todo[target.name + "Set"](target.value);
   };
@@ -56,6 +59,7 @@ export default function useWeightFetch({
       description_rendered_html: data?.description_rendered_html || "",
       title,
       visibility,
+      language_tag: languageTag,
       weight_category: data?.weight_category || "",
       weight_type: data?.weight_type || "",
     })
@@ -88,6 +92,7 @@ export default function useWeightFetch({
       maybeUrlSlugSet(undefined);
       descriptionMDSet("");
       visibilitySet("public");
+      languageTagSet("en");
     }
   }, [token, refetch]);
 
@@ -102,6 +107,7 @@ export default function useWeightFetch({
               description_markdown,
               title: resTitle,
               maybe_url_slug: resMaybeUrlSlug,
+              language_tag,
             } = res;
 
             statusSet(FetchStatus.success);
@@ -109,6 +115,7 @@ export default function useWeightFetch({
             maybeUrlSlugSet(resMaybeUrlSlug);
             descriptionMDSet(description_markdown);
             visibilitySet(creator_set_visibility);
+            languageTagSet(language_tag);
             onSuccess(res);
             setData(res);
           } else {
@@ -135,5 +142,6 @@ export default function useWeightFetch({
     update,
     visibility,
     writeStatus,
+    languageTag,
   };
 }

src/website/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx

@@ -2,11 +2,9 @@ import React from "react";
 import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
 import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
 import { Container } from "components/common";
-// import { AIFaceMirrorCTA } from "components/marketing";
 import FakeYouLandingHeader from "./fakeyou/FakeYouLandingHeader";
 import Dashboard from "./Dashboard";
 import "./LandingPage.scss";
-// import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody";
 import {
   Website,
   GetWebsite,
@@ -14,7 +12,6 @@ import {
 import PostlaunchLanding from "./storyteller/PostlaunchLanding/PostlaunchLanding";
 import MentionsSection from "components/common/MentionsSection";
 import { useSession } from "hooks";
-// import VstSectionV3 from "./components/VstSectionV3";
 
 function LandingPage() {
   PosthogClient.recordPageview();
@@ -32,24 +29,9 @@ function LandingPage() {
 
   const isLoggedIn = sessionWrapper.isLoggedIn();
 
-  //// DO NOT LEAK THIS YET!!
-  //let protectedStudioOnboarding = <></>;
-
-  //if (props.sessionWrapper.canAccessStudio()) {
-  //  protectedStudioOnboarding = (
-  //    <>
-  //      <OnboardingSelection />
-  //    </>
-  //  );
-  //}
-
   return (
     <>
-      {domain.website === Website.StorytellerAi && (
-        // <LandingVideoReel sessionWrapper={props.sessionWrapper} />
-        // <PrelaunchLanding sessionWrapper={props.sessionWrapper} />
-        <PostlaunchLanding />
-      )}
+      {domain.website === Website.StorytellerAi && <PostlaunchLanding />}
       {domain.website === Website.FakeYou && (
         <>
           <Container type="panel">
@@ -59,33 +41,12 @@ function LandingPage() {
             {!isLoggedIn && (
               <FakeYouLandingHeader {...{ experimental: true }} />
             )}
-
-            {/*         <div className="mt-5">
-              <VstSectionV3 />
-            </div>
-
-            <div className="mt-5">
-              <AIFaceMirrorCTA />
-            </div>*/}
-
-            {/*            {!isLoggedIn && (
-              <>
-                <FakeYouLandingBody />
-              </>
-            )}*/}
           </Container>
           {!isLoggedIn && (
             <Container type="panel">
               <MentionsSection />
             </Container>
           )}
-          {/*isLoggedIn && (
-            <Container type="panel" className="pt-5">
-              <div className="py-5">
-                <StorytellerStudioCTA />
-              </div>
-            </Container>
-          )*/}
         </>
       )}
     </>

src/website/packages/fakeyou.com/src/v2/view/pages/weight/WeightEditPage.tsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import {
   faCircleExclamation,
   faEye,
+  faLanguage,
   faWaveform,
 } from "@fortawesome/pro-solid-svg-icons";
 import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
@@ -21,6 +22,8 @@ import {
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import { useSession, useWeightFetch } from "hooks";
 import "./WeightEditPage.scss";
+import { LanguageLabels } from "@storyteller/components/src/api/Languages";
+import { WeightCategory } from "@storyteller/components/src/api/_common/enums";
 
 export default function WeightEditPage() {
   const { user, canEditTtsModel } = useSession();
@@ -40,6 +43,7 @@ export default function WeightEditPage() {
     title,
     update,
     visibility,
+    languageTag,
     writeStatus,
     // status
   } = useWeightFetch({ token: weight_token });
@@ -55,27 +59,36 @@ export default function WeightEditPage() {
     { label: "Private", value: "private" },
   ];
 
+  const languageOptions = Object.entries(LanguageLabels).map(
+    ([value, label]) => ({
+      label,
+      value,
+    })
+  );
+
   let weightToken = weight?.creator?.user_token;
 
   if (isLoading) {
     return (
-      <Panel padding={true}>
-        <div className="d-flex flex-column gap-3">
-          <Skeleton type="short" />
-          <Skeleton height="40px" />
-          <Skeleton type="short" />
-          <Skeleton height="40px" />
-          <div className="d-flex justify-content-end mt-3 gap-2">
-            <Skeleton height="40px" width="120px" />
-            <Skeleton height="40px" width="120px" />
+      <Container type="panel" className="mt-5">
+        <Panel padding={true}>
+          <div className="d-flex flex-column gap-3">
+            <Skeleton type="short" />
+            <Skeleton height="40px" />
+            <Skeleton type="short" />
+            <Skeleton height="40px" />
+            <div className="d-flex justify-content-end mt-3 gap-2">
+              <Skeleton height="40px" width="120px" />
+              <Skeleton height="40px" width="120px" />
+            </div>
           </div>
-        </div>
-      </Panel>
+        </Panel>
+      </Container>
     );
   } else {
     if (!weightToken) {
       return (
-        <Container type="panel">
+        <Container type="panel" className="mt-5">
           <PageHeader
             titleIcon={faCircleExclamation}
             title="Access Denied"
@@ -152,6 +165,21 @@ export default function WeightEditPage() {
                     value: title,
                   }}
                 />
+                {(weight?.weight_category === WeightCategory.TTS ||
+                  weight?.weight_category === WeightCategory.VC) && (
+                  <TempSelect
+                    {...{
+                      icon: faLanguage,
+                      label: "Language",
+                      name: "languageTag",
+                      options: languageOptions,
+                      onChange,
+                      placeholder: "Select language",
+                      value: languageTag,
+                    }}
+                  />
+                )}
+
                 <TempSelect
                   {...{
                     icon: faEye,