diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index 5922ec176..1d1e58f90 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -36,6 +36,7 @@ "framer-motion": "^6.5.1", "howler": "^2.2.0", "i18next": "^21.6.11", + "i18next-browser-languagedetector": "^7.1.0", "js-cookie": "^3.0.1", "posthog-js": "^1.73.1", "pretty-num": "^0.5.2", diff --git a/packages/fakeyou.com/public/locales/en/LandingPage.json b/packages/fakeyou.com/public/locales/en/LandingPage.json new file mode 100644 index 000000000..ebdf5a5b7 --- /dev/null +++ b/packages/fakeyou.com/public/locales/en/LandingPage.json @@ -0,0 +1,7 @@ +{ + "hero": { + "bottom": "Generate audio or videos of your favorite characters saying anything you want with FakeYou's deep fake tech.", + "top": "AI Music, Text to Speech, and Voice to Voice" + }, + "title": "Hello Everyone!" +} \ No newline at end of file diff --git a/packages/fakeyou.com/public/locales/en/namespace1.json b/packages/fakeyou.com/public/locales/en/namespace1.json new file mode 100644 index 000000000..2a128c289 --- /dev/null +++ b/packages/fakeyou.com/public/locales/en/namespace1.json @@ -0,0 +1,4 @@ +{ + "myNewKey": "blah", + "mySecondKey": "Hello world" +} \ No newline at end of file diff --git a/packages/fakeyou.com/public/locales/ja/LandingPage.json b/packages/fakeyou.com/public/locales/ja/LandingPage.json new file mode 100644 index 000000000..cfed4e4f2 --- /dev/null +++ b/packages/fakeyou.com/public/locales/ja/LandingPage.json @@ -0,0 +1,7 @@ +{ + "hero": { + "bottom": "FakeYou ディープ フェイク技術を使用して、お気に入りのキャラクターが言いたいことを言う音声やビデオを生成します。", + "top": "AI 音楽、テキスト読み上げ、音声変換" + }, + "title": "こんにちは、みんな" +} \ No newline at end of file diff --git a/packages/fakeyou.com/public/locales/ja/namespace1.json b/packages/fakeyou.com/public/locales/ja/namespace1.json new file mode 100644 index 000000000..70292e6ca --- /dev/null +++ b/packages/fakeyou.com/public/locales/ja/namespace1.json @@ -0,0 +1,4 @@ +{ + "myNewKey": "何とか", + "mySecondKey": "こんにちは世界" +} \ No newline at end of file diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 9d8455cfb..09b2a2f1f 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -49,7 +49,19 @@ import { FrontendInferenceJobType, InferenceJob } from "@storyteller/components/ import { GetModelInferenceJobStatus, GetModelInferenceJobStatusIsOk } from "@storyteller/components/src/api/model_inference/GetModelInferenceJobStatus"; import { VoiceConversionModelUploadJob } from "@storyteller/components/src/jobs/VoiceConversionModelUploadJob"; import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels"; +import HttpBackend from 'i18next-http-backend' +// NB: We're transitioning over to this instance of i18n-next that loads translations over HTTP from Json Files. +// The old i18n-next instance (see below) bakes in translations into the compiled javascript blob. +// This new instance uses the Locize paid service to manage translation strings on their website. It's automated, +// can easily sync to version control, and makes translation easy to maintain across a wide number of languages. +export const i18n2 = i18n.createInstance(); + +// OLD i18n-next instance +// This instance of i18n-next should not be used for new translations going forward. +// All of the translations behind this instance are backed into the javascript app at compile time and are manually +// curated and managed, which is a maintainability nightmare. In time, the above 'i18n2' instance will take over +// and we can remove this instance. i18n .use(initReactI18next) // passes i18n down to react-i18next .init({ @@ -57,7 +69,6 @@ i18n // (tip move them in a JSON file and import them, // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui) resources: FAKEYOU_MERGED_TRANSLATIONS, - //lng: 'en', // if you're using a language detector, do not define the lng option fallbackLng: "en", // For finding 'Trans' component keys. @@ -68,6 +79,17 @@ i18n }, }); +i18n2 + .use(HttpBackend) + .init({ + fallbackLng: "en", + debug: true, + backend: { + // This is the path localizations are loaded from. + loadPath: '/locales/{{lng}}/{{ns}}.json', + } + }); + enum MigrationMode { NEW_VOCODES, OLD_VOCODES, @@ -305,6 +327,7 @@ class App extends React.Component { }); i18n.changeLanguage(preferredLanguage.languageCode); + i18n2.changeLanguage(preferredLanguage.languageCode); } }; diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index 0c2b74563..d1e7518ca 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -4,6 +4,7 @@ import { Link } from "react-router-dom"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import { t } from "i18next"; +import { i18n2 } from "../../../../App"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faStar, @@ -29,6 +30,9 @@ interface Props { function LandingPage(props: Props) { PosthogClient.recordPageview(); + i18n2.loadNamespaces("LandingPage"); + const t2 = i18n2.getFixedT(null, "LandingPage"); + let signUpButton = <>; let viewPricingButton = <>; let upgradeButton = <>; @@ -170,13 +174,11 @@ function LandingPage(props: Props) {

- AI Music, Text to Speech, -
- and Voice to Voice + {t2('hero.top')}

- Generate audio or videos of your favorite characters saying - anything you want with FakeYou's deep fake tech. + {t2('hero.bottom')} +

{upgradeButton} diff --git a/yarn.lock b/yarn.lock index 9367db1e6..639e8f019 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1703,6 +1703,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.19.4": + version: 7.22.10 + resolution: "@babel/runtime@npm:7.22.10" + dependencies: + regenerator-runtime: ^0.14.0 + checksum: 524d41517e68953dbc73a4f3616b8475e5813f64e28ba89ff5fca2c044d535c2ea1a3f310df1e5bb06162e1f0b401b5c4af73fe6e2519ca2450d9d8c44cf268d + languageName: node + linkType: hard + "@babel/runtime@npm:^7.7.2": version: 7.21.0 resolution: "@babel/runtime@npm:7.21.0" @@ -4378,6 +4387,8 @@ __metadata: framer-motion: ^6.5.1 howler: ^2.2.0 i18next: ^21.6.11 + i18next-browser-languagedetector: ^7.1.0 + i18next-http-backend: ^2.2.1 js-cookie: ^3.0.1 posthog-js: ^1.73.1 pretty-num: ^0.5.2 @@ -8480,6 +8491,15 @@ __metadata: languageName: node linkType: hard +"cross-fetch@npm:3.1.6": + version: 3.1.6 + resolution: "cross-fetch@npm:3.1.6" + dependencies: + node-fetch: ^2.6.11 + checksum: 704b3519ab7de488328cc49a52cf1aa14132ec748382be5b9557b22398c33ffa7f8c2530e8a97ed8cb55da52b0a9740a9791d361271c4591910501682d981d9c + languageName: node + linkType: hard + "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3": version: 7.0.3 resolution: "cross-spawn@npm:7.0.3" @@ -11722,6 +11742,24 @@ __metadata: languageName: node linkType: hard +"i18next-browser-languagedetector@npm:^7.1.0": + version: 7.1.0 + resolution: "i18next-browser-languagedetector@npm:7.1.0" + dependencies: + "@babel/runtime": ^7.19.4 + checksum: 36981b9a9995ed66387f3735cceffe107ed3cdb6ca278d45fa243fabc65669c0eca095ed4a55a93dac046ca1eb23fd986ec0079723be7ebb8505e6ba25f379bb + languageName: node + linkType: hard + +"i18next-http-backend@npm:^2.2.1": + version: 2.2.1 + resolution: "i18next-http-backend@npm:2.2.1" + dependencies: + cross-fetch: 3.1.6 + checksum: a3f33b455555587ac1a5db94119bd944dca1ce7b685161d487dd0bd50342f4ed060dd263bf1adacd14cb0c0a58f695befb9a22ea1eb87f19be98ef7bbac91349 + languageName: node + linkType: hard + "i18next@npm:^21.6.11": version: 21.6.11 resolution: "i18next@npm:21.6.11" @@ -14563,6 +14601,20 @@ __metadata: languageName: node linkType: hard +"node-fetch@npm:^2.6.11": + version: 2.6.13 + resolution: "node-fetch@npm:2.6.13" + dependencies: + whatwg-url: ^5.0.0 + peerDependencies: + encoding: ^0.1.0 + peerDependenciesMeta: + encoding: + optional: true + checksum: 055845ae5b4796c78c7053564745345025cf959563b3568b43c385f67d311779e6b00e5fef6ed1b79f86ba4048e4b4b722e1aa948305521b9353eb7e788912c9 + languageName: node + linkType: hard + "node-forge@npm:^1.2.0": version: 1.2.1 resolution: "node-forge@npm:1.2.1" @@ -17631,6 +17683,13 @@ __metadata: languageName: node linkType: hard +"regenerator-runtime@npm:^0.14.0": + version: 0.14.0 + resolution: "regenerator-runtime@npm:0.14.0" + checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3 + languageName: node + linkType: hard + "regenerator-transform@npm:^0.14.2": version: 0.14.5 resolution: "regenerator-transform@npm:0.14.5"