-
{t2("community.heading")}
-
{t2("community.text")}
+
{t("communityTitle")}
+
{t("communityText")}
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index 27b6c5dce8..64abb62a58 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
@@ -1,6 +1,4 @@
import React, { useEffect, useCallback, useState } from "react";
-import { t } from "i18next";
-import { Trans } from "react-i18next";
import { Link } from "react-router-dom";
import { SessionTtsInferenceResultList } from "../../../_common/SessionTtsInferenceResultsList";
import { SessionTtsModelUploadResultList } from "../../../_common/SessionTtsModelUploadResultsList";
@@ -68,6 +66,7 @@ import { RatingButtons } from "../../../_common/ratings/RatingButtons";
import { RatingStats } from "../../../_common/ratings/RatingStats";
import { SearchOmnibar } from "./search/SearchOmnibar";
import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
+import { useLocalize } from "hooks";
export interface EnqueueJobResponsePayload {
success: boolean;
@@ -141,6 +140,8 @@ interface Props {
function TtsModelListPage(props: Props) {
PosthogClient.recordPageview();
+ const { t } = useLocalize("TtsModelListPage");
+
//Loading spinning icon
const [loading, setLoading] = useState(false);
const [isAudioLimitAlertVisible, setAudioLimitAlertVisible] = useState(false);
@@ -370,7 +371,7 @@ function TtsModelListPage(props: Props) {
- {t("tts.TtsModelListPage.languageLabel")}:{" "}
+ {t("ttsDetailsLanguageLabel")}{" "}
{modelLanguage.languageName}{" "}
{/* We're not ready for use count yet. */}
{/*| Use count:{" "}
@@ -385,9 +386,7 @@ function TtsModelListPage(props: Props) {
}}
className="d-flex align-items-center"
>
-
- {t("tts.TtsModelListPage.voiceDetails.seeMoreDetails")}
-
+ {t("ttsDetailsViewLink")}
@@ -442,13 +441,7 @@ function TtsModelListPage(props: Props) {
switch (maybeTtsError) {
case GenerateTtsAudioErrorType.TooManyRequests:
hasMessage = true;
- message = (
-
- You're sending too many requests!
- Slow down a little. We have to slow things down a little when the
- server gets busy.
-
- );
+ message = <>{t("tts.TtsModelListPage.errors.tooManyRequests")};
break;
case GenerateTtsAudioErrorType.ServerError |
GenerateTtsAudioErrorType.BadRequest |
@@ -563,7 +556,7 @@ function TtsModelListPage(props: Props) {
{/*
@@ -576,13 +569,10 @@ function TtsModelListPage(props: Props) {
onChange={handleChangeText}
className="form-control text-message h-100"
value={props.textBuffer}
- placeholder={t(
- "tts.TtsModelListPage.form.textInputHint",
- {
- voice:
- props.maybeSelectedTtsModel?.title || "the voice",
- }
- )}
+ placeholder={t("ttsTextInputPlaceholder", {
+ character:
+ props.maybeSelectedTtsModel?.title || "character",
+ })}
>
{audioLimitAlert}
@@ -596,7 +586,7 @@ function TtsModelListPage(props: Props) {
type="submit"
>
- {t("tts.TtsModelListPage.form.buttons.speak")}
+ {t("ttsButtonSpeak")}
{loading && }
@@ -606,7 +596,7 @@ function TtsModelListPage(props: Props) {
disabled={noTextInputButtonDisabled}
>
- {t("tts.TtsModelListPage.form.buttons.clear")}
+ {t("ttsButtonClear")}
@@ -618,7 +608,7 @@ function TtsModelListPage(props: Props) {
icon={faBarsStaggered}
className="me-3"
/>
- {t("tts.TtsModelListPage.sessionTtsResultsLabel")}
+ {t("ttsResultsTitle")}
;
let viewPricingButton = <>;
let upgradeButton = <>;
@@ -36,7 +37,7 @@ export function TtsPageHero(props: Props) {
}}
>
@@ -52,7 +53,7 @@ export function TtsPageHero(props: Props) {
>
@@ -72,7 +73,7 @@ export function TtsPageHero(props: Props) {
>
@@ -88,7 +89,7 @@ export function TtsPageHero(props: Props) {
>
@@ -99,14 +100,8 @@ export function TtsPageHero(props: Props) {
const titleIcon = (
);
- const title = <>{t("tts.TtsModelListPage.heroSection.title")};
- const subText = (
- <>
-
- Use FakeYou's deepfake tech to say stuff with your favorite characters.
-
-
- );
+ const title = <>{t("heroTitle")};
+ const subText = <>{t("heroText")};
const actionButtons = (
<>
{upgradeButton}
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx
index 34d03dc286..a90614802f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx
@@ -1,5 +1,4 @@
import React, { useState } from "react";
-import { t } from "i18next";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { TtsCategoryType } from "../../../../../../AppWrapper";
import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
@@ -8,6 +7,7 @@ import { faChevronDown, faChevronUp } from "@fortawesome/pro-duotone-svg-icons";
import { ScopedVoiceModelOptions } from "./components/ScopedVoiceModelOptions";
import { VoiceCountLabel } from "./components/VoiceCountLabel";
import { Analytics } from "../../../../../../common/Analytics";
+import { useLocalize } from "hooks";
interface Props {
allTtsCategories: TtsCategoryType[];
@@ -31,6 +31,7 @@ interface Props {
}
export function SearchOmnibar(props: Props) {
+ const { t } = useLocalize("TtsModelListPage");
const [isOpen, setIsOpen] = useState(false);
const handleClickExplore = () => {
@@ -79,7 +80,7 @@ export function SearchOmnibar(props: Props) {
icon={isOpen ? faChevronUp : faChevronDown}
className="me-2"
/>
- {t("tts.TtsModelListPage.exploreModal.exploreModalOpenButton")}
+ {t("ttsButtonExplore")}
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ExploreVoicesTray.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ExploreVoicesTray.tsx
index aeb262cffc..c8e1087b07 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ExploreVoicesTray.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/ExploreVoicesTray.tsx
@@ -5,7 +5,7 @@ import { LanguageOptions } from "../filters/LanguageOptions";
import { TtsCategoryType } from "../../../../../../../AppWrapper";
import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
import { CategoryOptions } from "../filters/CategoryOptions";
-import { t } from "i18next";
+import { useLocalize } from "hooks";
interface Props {
allTtsCategories: TtsCategoryType[];
@@ -29,6 +29,7 @@ interface Props {
}
export function ExploreVoicesTray(props: Props) {
+ const { t } = useLocalize("TtsModelListPage");
const {
allTtsCategories,
allTtsCategoriesByTokenMap,
@@ -88,9 +89,7 @@ export function ExploreVoicesTray(props: Props) {
-
+
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx
index c38f52c740..fd24307736 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import { Trans } from "react-i18next";
import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
import { TtsCategoryType } from "../../../../../../../AppWrapper";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -8,6 +7,7 @@ import { Analytics } from "../../../../../../../common/Analytics";
import { GetRandomArrayValue } from "@storyteller/components/src/utils/GetRandomArrayValue";
import Tippy from "@tippyjs/react";
import "tippy.js/dist/tippy.css";
+import { useLocalize } from "hooks";
interface Props {
allTtsModels: TtsModelListItem[];
@@ -22,6 +22,7 @@ interface Props {
// component tree.
export function VoiceCountLabel(props: Props) {
+ const { t } = useLocalize("TtsModelListPage");
const { allTtsModels, ttsModelsByCategoryToken, selectedCategories } = props;
const leafiestCategory = selectedCategories[selectedCategories.length - 1];
@@ -72,14 +73,9 @@ export function VoiceCountLabel(props: Props) {
<>
+ ,
];
}
@@ -131,7 +129,7 @@ function buildDropdowns(
return {
value: category.category_token,
label: category.name_for_dropdown,
- }
+ };
});
currentDropdownCategories.forEach((category) => {
@@ -162,26 +160,28 @@ function buildDropdowns(
// No sense trying to build more.
break;
}
-
- let selectProps : any = {
+
+ let selectProps: any = {
options: options,
classNames: SearchFieldClass,
- className:"w-100",
+ className: "w-100",
autoFocus: false, // On mobile, we don't want the onscreen keyboard to take up half the UI.
isSearchable: false, // On mobile, we don't want the onscreen keyboard to take up half the UI.
- onMenuOpen: () => { Analytics.ttsOpenCategorySelectMenu() },
+ onMenuOpen: () => {
+ Analytics.ttsOpenCategorySelectMenu();
+ },
onChange: (option: any) => handleChangeCategory(i, option?.value),
};
if (selectedCategoryOption === undefined) {
// NB(bt, 2023-01-19): I'm not sure why we're having to do this to clear categories.
// If I had more time to spend with this library, I might have a better solution than this hack.
- selectProps['value'] = {
+ selectProps["value"] = {
value: "*",
- label: t("tts.TtsModelListPage.exploreModal.selectCategoryText"),
+ label: t("ttsExploreCategoryOptionText"),
};
} else {
- selectProps['value'] = selectedCategoryOption;
+ selectProps["value"] = selectedCategoryOption;
}
categoryDropdowns.push(
@@ -190,8 +190,7 @@ function buildDropdowns(
-
+
);
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/filters/LanguageOptions.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/filters/LanguageOptions.tsx
index a992ddaa5b..c67b2cef89 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/filters/LanguageOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/filters/LanguageOptions.tsx
@@ -5,47 +5,50 @@ import Select from "react-select";
import { SearchFieldClass } from "../components/SearchFieldClass";
import { AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP } from "../../../../../../../_i18n/AvailableLanguageMap";
import { Analytics } from "../../../../../../../common/Analytics";
-import { t } from "i18next";
+import { useLocalize } from "hooks";
interface Props {
- selectedTtsLanguageScope: string,
- setSelectedTtsLanguageScope: (selectedTtsLanguageScope: string) => void,
+ selectedTtsLanguageScope: string;
+ setSelectedTtsLanguageScope: (selectedTtsLanguageScope: string) => void;
}
export function LanguageOptions(props: Props) {
-
+ const { t } = useLocalize("TtsModelListPage");
const handleChange = (option: any, actionMeta: any) => {
props.setSelectedTtsLanguageScope(option.value);
- }
+ };
- let languageOptions = Object.entries(AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP).map(([languageCode, language]) => {
- let label = `${language.languageName}`;
+ let languageOptions = Object.entries(AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP).map(
+ ([languageCode, language]) => {
+ let label = `${language.languageName}`;
- if (language.languageNameLocalized !== undefined) {
- label = `${language.languageNameLocalized} / ${label}`;
+ if (language.languageNameLocalized !== undefined) {
+ label = `${language.languageNameLocalized} / ${label}`;
+ }
+
+ if (language.flags.length > 0) {
+ label += ` ${language.flags.join(" ")}`;
+ }
+
+ return {
+ value: languageCode,
+ label: label,
+ };
}
-
- if (language.flags.length > 0) {
- label += ` ${language.flags.join(' ')}`;
- }
-
- return {
- value: languageCode,
- label: label,
- };
- });
+ );
languageOptions = [
{
- label: `${t("tts.TtsModelListPage.exploreModal.allLanguagesOptionText")}`,
- value: '*',
+ label: `${t("ttsExploreLanguageOptionText")}`,
+ value: "*",
},
...languageOptions,
];
- const currentValue = languageOptions.find((option) => {
- return option.value === props.selectedTtsLanguageScope;
- }) || languageOptions[0];
+ const currentValue =
+ languageOptions.find((option) => {
+ return option.value === props.selectedTtsLanguageScope;
+ }) || languageOptions[0];
return (
@@ -58,8 +61,10 @@ export function LanguageOptions(props: Props) {
classNames={SearchFieldClass}
isSearchable={false}
onChange={handleChange}
- onMenuOpen={() => { Analytics.ttsOpenCategorySelectMenu() } }
+ onMenuOpen={() => {
+ Analytics.ttsOpenCategorySelectMenu();
+ }}
/>
- )
+ );
}
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
index 295003e972..db659a3bc9 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx
@@ -34,6 +34,7 @@ import { SessionVoiceConversionResultsList } from "../../../_common/SessionVoice
import PitchShiftComponent from "./components/PitchShiftComponent";
import PitchEstimateMethodComponent from "./components/PitchEstimateMethodComponent";
import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient";
+import { useLocalize } from "hooks";
interface Props {
sessionWrapper: SessionWrapper;
@@ -59,6 +60,7 @@ interface Props {
function VcModelListPage(props: Props) {
usePrefixedDocumentTitle("Voice Conversion");
+ const { t } = useLocalize("VcModelListPage");
PosthogClient.recordPageview();
const [convertLoading, setConvertLoading] = useState(false);
@@ -244,8 +246,7 @@ function VcModelListPage(props: Props) {
>
{/* Explore Rollout */}
@@ -276,7 +277,7 @@ function VcModelListPage(props: Props) {
aria-controls="prerecorded"
aria-selected="true"
>
- Upload
+ {t("vcTabUpload")}
@@ -290,7 +291,7 @@ function VcModelListPage(props: Props) {
aria-controls="recordaudio"
aria-selected="false"
>
- Microphone
+ {t("vcTabRecord")}
@@ -304,7 +305,7 @@ function VcModelListPage(props: Props) {
-
+
- Auto F0 (off for singing, on for speech)
+ Auto F0 ({t("vcPitchControlF0")})
@@ -381,7 +384,9 @@ function VcModelListPage(props: Props) {
-
+
- Convert
+ {t("vcButtonConvert")}
{convertLoading && }
@@ -409,7 +414,9 @@ function VcModelListPage(props: Props) {
>
-
+
-
+
- Auto F0 (off for singing, on for speech)
+ Auto F0 ({t("vcPitchControlF0")})
-
+
- Convert
+ {t("vcButtonConvert")}
{convertLoading && }
@@ -489,7 +500,7 @@ function VcModelListPage(props: Props) {
icon={faBarsStaggered}
className="me-3"
/>
- Session V2V Results
+ {t("vcResultsTitle")}
void;
@@ -22,6 +23,7 @@ interface Props {
}
export default function RecordComponent(props: Props) {
+ const { t } = useLocalize("RecordComponent");
const [uploadLoading, setUploadLoading] = useState(false);
const [isUploadDisabled, setIsUploadDisabled] = useState(false);
const { startRecording, stopRecording, recordingBlob, isRecording } =
@@ -113,13 +115,13 @@ export default function RecordComponent(props: Props) {
>
Recording...
- Stop Recording
+ {t("recordButtonStop")}
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx
index 6c96818af4..b224ad2bb8 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/UploadComponent.tsx
@@ -14,6 +14,7 @@ import {
UploadAudioIsOk,
UploadAudioRequest,
} from "@storyteller/components/src/api/upload/UploadAudio";
+import { useLocalize } from "hooks";
const FILE_TYPES = ["MP3", "WAV", "FLAC", "OGG"];
@@ -28,6 +29,8 @@ interface Props {
}
function UploadComponent(props: Props) {
+ const { t } = useLocalize("UploadComponent");
+
const [file, setFile] = useState
(undefined);
const [audioLink, setAudioLink] = useState();
const [isUploadDisabled, setIsUploadDisabled] = useState(false);
@@ -136,8 +139,8 @@ function UploadComponent(props: Props) {
) : (
<>
- Upload a file or drop it
- here...
+ {t("uploadFileTextUpload")}{" "}
+ {t("uploadFileTextDrop")}
)}
@@ -149,7 +152,9 @@ function UploadComponent(props: Props) {
{file && `${file.name.split(".").pop().toUpperCase()}`}{" "}
file size: {fileSize}
{" "}
-
Change file
+
+ {t("uploadChangeFile")}
+
) : (
@@ -200,12 +205,12 @@ function UploadComponent(props: Props) {
{isUploadDisabled ? (
<>
- Uploaded
+ {t("uploadButtonUploaded")}
) : (
<>
- Upload Audio
+ {t("uploadButtonUploadAudio")}
)}
{uploadLoading && }
@@ -213,7 +218,7 @@ function UploadComponent(props: Props) {
) : (
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/VcPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/VcPageHero.tsx
index 119e6c4cd7..3edf7db0de 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/VcPageHero.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/VcPageHero.tsx
@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
import { Link } from "react-router-dom";
-import { t } from "i18next";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faStar,
@@ -13,6 +12,7 @@ import {
import { Analytics } from "../../../../../../common/Analytics";
import { WebUrl } from "../../../../../../common/WebUrl";
import { PageHeaderWithImage } from "../../../../_common/PageHeaderWithImage";
+import { useLocalize } from "hooks";
interface Props {
sessionWrapper: SessionWrapper;
@@ -20,6 +20,7 @@ interface Props {
}
export function VcPageHero(props: Props) {
+ const { t } = useLocalize("VcModelListPage");
const randomImage = useMemo(() => {
const images = ["mascot/vc.webp"];
@@ -41,7 +42,7 @@ export function VcPageHero(props: Props) {
}}
>
@@ -57,7 +58,7 @@ export function VcPageHero(props: Props) {
>
@@ -77,7 +78,7 @@ export function VcPageHero(props: Props) {
>
@@ -93,7 +94,7 @@ export function VcPageHero(props: Props) {
>
@@ -104,10 +105,8 @@ export function VcPageHero(props: Props) {
const titleIcon = (
);
- const title = <>Voice to Voice;
- const subText = (
- <>Use this tool to change your voice into your favorite characters.
- );
+ const title = <>{t("heroTitle")};
+ const subText = <>{t("heroText")};
const actionButtons = (
<>
{upgradeButton}