diff --git a/packages/fakeyou/public/mascot/guide.webp b/packages/fakeyou/public/mascot/guide.webp
new file mode 100644
index 0000000000..b69a658423
Binary files /dev/null and b/packages/fakeyou/public/mascot/guide.webp differ
diff --git a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
index c4d3b22a68..c10654e55f 100644
--- a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -16,6 +16,7 @@ import {
faSignOutAlt,
faComputer,
faLaptop,
+ faBook,
} from "@fortawesome/free-solid-svg-icons";
import { faDiscord, faPatreon } from "@fortawesome/free-brands-svg-icons";
import { Logout } from "@storyteller/components/src/api/session/Logout";
@@ -411,6 +412,16 @@ function NewTopNavFc(props: Props) {
Patrons
+
+
+
+ Guide
+
+
void,
+ sessionWrapper: SessionWrapper;
+ querySessionAction: () => void;
- isShowingVocodesNotice: boolean,
- clearVocodesNotice: () => void,
+ isShowingVocodesNotice: boolean;
+ clearVocodesNotice: () => void;
- isShowingLangaugeNotice: boolean,
- clearLanguageNotice: () => void,
- displayLanguage: Language,
- primaryLanguageCode: string,
+ isShowingLangaugeNotice: boolean;
+ clearLanguageNotice: () => void;
+ displayLanguage: Language;
+ primaryLanguageCode: string;
- isShowingTwitchTtsNotice: boolean,
- clearTwitchTtsNotice: () => void,
+ isShowingTwitchTtsNotice: boolean;
+ clearTwitchTtsNotice: () => void;
- isShowingPleaseFollowNotice: boolean,
- clearPleaseFollowNotice: () => void,
+ isShowingPleaseFollowNotice: boolean;
+ clearPleaseFollowNotice: () => void;
- isShowingBootstrapLanguageNotice: boolean,
- clearBootstrapLanguageNotice: () => void,
+ isShowingBootstrapLanguageNotice: boolean;
+ clearBootstrapLanguageNotice: () => void;
- enqueueTtsJob: (jobToken: string) => void,
- ttsInferenceJobs: Array,
+ enqueueTtsJob: (jobToken: string) => void;
+ ttsInferenceJobs: Array;
- enqueueW2lJob: (jobToken: string) => void,
- w2lInferenceJobs: Array,
+ enqueueW2lJob: (jobToken: string) => void;
+ w2lInferenceJobs: Array;
- enqueueTtsModelUploadJob: (jobToken: string) => void,
- ttsModelUploadJobs: Array,
+ enqueueTtsModelUploadJob: (jobToken: string) => void;
+ ttsModelUploadJobs: Array;
- enqueueW2lTemplateUploadJob: (jobToken: string) => void,
- w2lTemplateUploadJobs: Array,
+ enqueueW2lTemplateUploadJob: (jobToken: string) => void;
+ w2lTemplateUploadJobs: Array;
- enqueueVocoderUploadJob: (jobToken: string) => void,
- vocoderUploadJobs: Array,
+ enqueueVocoderUploadJob: (jobToken: string) => void;
+ vocoderUploadJobs: Array;
- textBuffer: string,
- setTextBuffer: (textBuffer: string) => void,
- clearTextBuffer: () => void,
+ textBuffer: string;
+ setTextBuffer: (textBuffer: string) => void;
+ clearTextBuffer: () => void;
- ttsModels: Array,
- setTtsModels: (ttsVoices: Array) => void,
+ ttsModels: Array;
+ setTtsModels: (ttsVoices: Array) => void;
- allTtsCategories: TtsCategoryType[],
- setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void,
+ allTtsCategories: TtsCategoryType[];
+ setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void;
- allTtsCategoriesByTokenMap: Map,
- allTtsModelsByTokenMap: Map,
- ttsModelsByCategoryToken: Map>,
+ allTtsCategoriesByTokenMap: Map;
+ allTtsModelsByTokenMap: Map;
+ ttsModelsByCategoryToken: Map>;
- dropdownCategories: TtsCategoryType[][],
- setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void,
- selectedCategories: TtsCategoryType[],
- setSelectedCategories: (selectedCategories: TtsCategoryType[]) => void,
+ dropdownCategories: TtsCategoryType[][];
+ setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void;
+ selectedCategories: TtsCategoryType[];
+ setSelectedCategories: (selectedCategories: TtsCategoryType[]) => void;
- maybeSelectedTtsModel?: TtsModelListItem,
- setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void,
+ maybeSelectedTtsModel?: TtsModelListItem;
+ setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
}
-interface State {
-}
+interface State {}
class NewVocodesContainer extends React.Component {
-
constructor(props: Props) {
super(props);
- this.state = {
- }
+ this.state = {};
}
- logout = () => {
- }
+ logout = () => {};
public render() {
return (
-
{
-
+
-
+
@@ -163,28 +155,21 @@ class NewVocodesContainer extends React.Component {
/>
-
-
+
-
+
-
+
{ }}
+ querySessionCallback={() => {}}
sessionWrapper={this.props.sessionWrapper}
/>
@@ -199,21 +184,15 @@ class NewVocodesContainer extends React.Component {
*/}
-
+
-
+
-
+
@@ -225,9 +204,7 @@ class NewVocodesContainer extends React.Component {
-
+
@@ -248,27 +225,19 @@ class NewVocodesContainer extends React.Component {
-
+
-
+
-
+
-
+
@@ -278,9 +247,7 @@ class NewVocodesContainer extends React.Component {
-
+
@@ -292,16 +259,16 @@ class NewVocodesContainer extends React.Component {
-
+
@@ -309,7 +276,9 @@ class NewVocodesContainer extends React.Component {
@@ -330,15 +299,11 @@ class NewVocodesContainer extends React.Component {
-
+
-
+
@@ -396,9 +361,7 @@ class NewVocodesContainer extends React.Component {
-
+
@@ -406,9 +369,7 @@ class NewVocodesContainer extends React.Component {
-
+
@@ -419,8 +380,12 @@ class NewVocodesContainer extends React.Component {
+
+
+
+
-
+
@@ -433,10 +398,16 @@ class NewVocodesContainer extends React.Component {
displayLanguage={this.props.displayLanguage}
isShowingTwitchTtsNotice={this.props.isShowingTwitchTtsNotice}
clearTwitchTtsNotice={this.props.clearTwitchTtsNotice}
- isShowingPleaseFollowNotice={this.props.isShowingPleaseFollowNotice}
+ isShowingPleaseFollowNotice={
+ this.props.isShowingPleaseFollowNotice
+ }
clearPleaseFollowNotice={this.props.clearPleaseFollowNotice}
- isShowingBootstrapLanguageNotice={this.props.isShowingBootstrapLanguageNotice}
- clearBootstrapLanguageNotice={this.props.clearBootstrapLanguageNotice}
+ isShowingBootstrapLanguageNotice={
+ this.props.isShowingBootstrapLanguageNotice
+ }
+ clearBootstrapLanguageNotice={
+ this.props.clearBootstrapLanguageNotice
+ }
enqueueTtsJob={this.props.enqueueTtsJob}
ttsInferenceJobs={this.props.ttsInferenceJobs}
ttsModelUploadJobs={this.props.ttsModelUploadJobs}
@@ -449,7 +420,9 @@ class NewVocodesContainer extends React.Component {
setTtsModels={this.props.setTtsModels}
allTtsCategories={this.props.allTtsCategories}
setAllTtsCategories={this.props.setAllTtsCategories}
- allTtsCategoriesByTokenMap={this.props.allTtsCategoriesByTokenMap}
+ allTtsCategoriesByTokenMap={
+ this.props.allTtsCategoriesByTokenMap
+ }
allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
dropdownCategories={this.props.dropdownCategories}
@@ -460,17 +433,13 @@ class NewVocodesContainer extends React.Component {
setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
/>
-
-
-
+
- )
+ );
}
}
-export { NewVocodesContainer }
+export { NewVocodesContainer };
diff --git a/packages/fakeyou/src/v2/view/about/guide_page/GuidePage.tsx b/packages/fakeyou/src/v2/view/about/guide_page/GuidePage.tsx
new file mode 100644
index 0000000000..d498a86ac2
--- /dev/null
+++ b/packages/fakeyou/src/v2/view/about/guide_page/GuidePage.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { container, item, panel, image } from "../../../../data/animation";
+import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
+
+interface Props {}
+
+function GuidePage(props: Props) {
+ return (
+
+
+
+
+
+
+
+
+ FakeYou Site Guide
+
+
+
+
+ How do I use FakeYou text-to-speech?
+
+
+
+
+
+
+
+
+
+
Guide
+
+
Description.
+
+
How to get the best sounding TTS?
+
+ The machine learning models and content at FakeYou are
+ user-submitted, but we'll be happy to remove content for any
+ reason for copyright holders, original speakers, voice actors,
+ et al. Please send us an email to{" "}
+ copyright@storyteller.io with details in order to
+ request a takedown.
+
+
+
+
+
+
+ );
+}
+
+export { GuidePage };