Introduce locize

2023-08-22 18:53:20 -04:00
1 parent b5f684ca89
commit 4a556c61d5
@@ -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",
@@ -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!"
+}
@@ -0,0 +1,4 @@
+{
+  "myNewKey": "blah",
+  "mySecondKey": "Hello world"
+}
@@ -0,0 +1,7 @@
+{
+  "hero": {
+    "bottom": "FakeYou ディープ フェイク技術を使用して、お気に入りのキャラクターが言いたいことを言う音声やビデオを生成します。",
+    "top": "AI 音楽、テキスト読み上げ、音声変換"
+  },
+  "title": "こんにちは、みんな"
+}
@@ -0,0 +1,4 @@
+{
+  "myNewKey": "何とか",
+  "mySecondKey": "こんにちは世界"
+}
@@ -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<Props, State> {
      });

      i18n.changeLanguage(preferredLanguage.languageCode);
+      i18n2.changeLanguage(preferredLanguage.languageCode);
    }
  };

@@ -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) {
          </div>
          <div className="col-12 col-lg-7 d-flex flex-column justify-content-center flex-reverse px-md-5 px-lg-3">
            <h1 className="fw-bold display-5 text-center text-lg-start px-md-5 px-lg-0">
-              AI Music, Text to Speech,
-              <br />
-              and Voice to Voice
+              {t2('hero.top')}
            </h1>
            <p className="lead opacity-75 pb-4 text-center text-lg-start px-md-5 px-lg-0 pe-lg-5">
-              Generate audio or videos of your favorite characters saying
-              anything you want with FakeYou's deep fake tech.
+              {t2('hero.bottom')}
+             
            </p>
            <div className="d-flex flex-column flex-md-row gap-3 mt-3 mb-4 w-100 justify-content-center justify-content-lg-start">
              {upgradeButton}
@@ -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"