From 7fc290b701bfb12dce2d5f9bfc56a668bfd64aed Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sun, 20 Oct 2024 18:24:40 +0700
Subject: [PATCH] helmet test

---
 src/website/package.json                      |  1 +
 .../packages/fakeyou.com/src/index.tsx        |  5 +++-
 .../src/v2/view/pages/f5_tts/F5TTS.tsx        | 22 ++++++++++++--
 src/website/yarn.lock                         | 30 +++++++++++++++++++
 4 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/website/package.json b/src/website/package.json
index ebb5622954..91a7a97da1 100644
--- a/src/website/package.json
+++ b/src/website/package.json
@@ -40,6 +40,7 @@
     "local-storage": "^2.0.0",
     "moment": "^2.29.4",
     "react-easy-crop": "^5.0.7",
+    "react-helmet-async": "^2.0.5",
     "react-webcam": "^7.2.0",
     "universal-cookie": "^6.1.1",
     "yarn": "^1.22.19"
diff --git a/src/website/packages/fakeyou.com/src/index.tsx b/src/website/packages/fakeyou.com/src/index.tsx
index da8e998167..33365e13af 100644
--- a/src/website/packages/fakeyou.com/src/index.tsx
+++ b/src/website/packages/fakeyou.com/src/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 // import * as serviceWorker from "./serviceWorker";
 // import AppTranslated from "./AppTranslated";
 import { App } from "./App";
+import { HelmetProvider } from "react-helmet-async";
 
 const designSystemClass = "fakeyou-refresh";
 
@@ -24,7 +25,9 @@ document.getElementsByTagName("html")[0].classList.add(designSystemClass);
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/f5_tts/F5TTS.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/f5_tts/F5TTS.tsx
index 4a3e38afd9..19fba4f5b5 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/f5_tts/F5TTS.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/f5_tts/F5TTS.tsx
@@ -33,7 +33,7 @@ import { AITools } from "components/marketing";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from "react-router-dom";
 import { AppStateContext } from "components/providers/AppStateProvider";
-import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle";
+import { Helmet } from "react-helmet-async";
 
 export default function F5TTS() {
   const { sessionWrapper } = useContext(AppStateContext);
@@ -54,8 +54,6 @@ export default function F5TTS() {
   const [isRecordingAudio, setIsRecordingAudio] = useState(false);
   const [isGenerating, setIsGenerating] = useState(false);
 
-  usePrefixedDocumentTitle("F5-TTS Zero-Shot Voice Cloning");
-
   const textChange = ({ target }: { target: any }) => {
     setText(target.value);
   };
@@ -98,6 +96,24 @@ export default function F5TTS() {
 
   return (
     <>
+      <Helmet prioritizeSeoTags={true}>
+        <title>F5-TTS: AI Voice Cloning & Text-to-Speech Tool</title>
+        <meta
+          property="og:title"
+          content="F5-TTS: AI Voice Cloning & Text-to-Speech Tool"
+        />
+        <meta
+          property="og:description"
+          content="What is F5-TTS?
+F5-TTS is an AI-driven text-to-speech tool that transforms written text into lifelike speech. With real-time processing, it’s great for generating dynamic audio content, whether it's for voice-overs, digital storytelling, or any other project that requires high-quality spoken output."
+        />
+
+        <meta
+          name="description"
+          content="What is F5-TTS?
+F5-TTS is an AI-driven text-to-speech tool that transforms written text into lifelike speech. With real-time processing, it’s great for generating dynamic audio content, whether it's for voice-overs, digital storytelling, or any other project that requires high-quality spoken output."
+        />
+      </Helmet>
       <Container type="panel" className="mt-3 mt-lg-5">
         <Panel padding={true} className="p-lg-5">
           <form onSubmit={handleConvert}>
diff --git a/src/website/yarn.lock b/src/website/yarn.lock
index 1f96efa0c0..3e730a232a 100644
--- a/src/website/yarn.lock
+++ b/src/website/yarn.lock
@@ -4489,6 +4489,7 @@ __metadata:
     prettier: ^3.1.0
     pretty-quick: ^3.1.3
     react-easy-crop: ^5.0.7
+    react-helmet-async: ^2.0.5
     react-webcam: ^7.2.0
     universal-cookie: ^6.1.1
     yarn: ^1.22.19
@@ -12559,6 +12560,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: ^1.0.0
+  checksum: cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14
+  languageName: node
+  linkType: hard
+
 "ip@npm:^1.1.0, ip@npm:^1.1.5":
   version: 1.1.5
   resolution: "ip@npm:1.1.5"
@@ -17925,6 +17935,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 2071415b4f76a3e6b55c84611c4d24dcb12ffc85811a2840b5a3f1ff2d1a99be1020d9437ee7c6e024c9f4cbb84ceb35e48cf84f28fcb00265ad2dfdd3947704
+  languageName: node
+  linkType: hard
+
 "react-fast-marquee@npm:^1.3.5":
   version: 1.3.5
   resolution: "react-fast-marquee@npm:1.3.5"
@@ -17945,6 +17962,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-helmet-async@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "react-helmet-async@npm:2.0.5"
+  dependencies:
+    invariant: ^2.2.4
+    react-fast-compare: ^3.2.2
+    shallowequal: ^1.1.0
+  peerDependencies:
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: cc2d13496f6fdee6b5f9472d3f7369db3e70e4fc1a55793708c2bbd90d48b0dedc725fd066f987c7a3d74b03a29bd5e65b9f40fa29bd8239e7cfb526aff4d4b6
+  languageName: node
+  linkType: hard
+
 "react-i18next@npm:^11.15.4":
   version: 11.15.4
   resolution: "react-i18next@npm:11.15.4"