daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-04 09:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #119 from storytold/bflat-fakeyou-guide

Browse Source 
fakeyou guide page
This commit is contained in:
Brandon Thomas authored and GitHub committed 2022-10-27 00:43:33 -04:00
2 parents f448052173 4706fca6d9
commit 2f3a25fbcd
7 files changed
+330 -189
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou/public/mascot/guide.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

packages/fakeyou/public/mascot/tou.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+11
View File
@@ -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
</Link>
</li>
<li data-bs-toggle="offcanvas">
<Link
className="dropdown-item"
to="/guide"
title="to guide"
>
<FontAwesomeIcon icon={faBook} className="me-2" />
Guide
</Link>
</li>
<li data-bs-toggle="offcanvas">
<Link
className="dropdown-item"
packages/fakeyou/src/v2/view/NewVocodesContainer.tsx
+147 -178
View File
@@ -1,140 +1,136 @@
import React from 'react';
import { AboutPage } from './about/about_page/AboutPage';
import { FirehoseEventListFc } from './firehose/FirehoseEventListFc';
import { LoginPage } from './login/LoginPage';
import { ModerationFc } from './moderation/moderation_main/ModerationFc';
import { ModerationIpBanListFc } from './moderation/moderation_ip_ban_list/ModerationIpBanListFc';
import { ModerationViewIpBanFc } from './moderation/moderation_view_ip_ban/ModerationViewIpBanFc';
import { NewFooterNavFc } from './NewFooterNavFc';
import { NewTopNavFc } from './NewTopNavFc';
import { ProfileEditFc } from './profile/profile_edit/ProfileEditFc';
import { ProfileFc } from './profile/profile_view/ProfileFc';
import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
import { SignupPage } from './signup/SignupPage';
import { Switch, Route } from 'react-router-dom';
import { TermsPage } from './about/terms_page/TermsPage';
import { TtsInferenceJob, W2lInferenceJob } from '../../App';
import { TtsModelDeletePage } from './tts/tts_model_delete/TtsModelDeletePage';
import { TtsModelEditPage } from './tts/tts_model_edit/TtsModelEditPage';
import { TtsModelUploadJob } from '@storyteller/components/src/jobs/TtsModelUploadJobs';
import { VocoderUploadJob } from '@storyteller/components/src/jobs/VocoderUploadJobs';
import { TtsModelViewPage } from './tts/tts_model_view/TtsModelViewPage';
import { TtsResultDeletePage } from './tts/tts_result_delete/TtsResultDeletePage';
import { TtsResultViewPage } from './tts/tts_result_view/TtsResultViewPage';
import { ContributeIndexPage } from './contribute/ContributeIndexPage';
import { UploadTtsModelPage } from './upload/UploadTtsModelPage';
import { UploadW2lPhotoPage } from './upload/UploadW2lPhotoPage';
import { UploadW2lVideoPage } from './upload/UploadW2lVideoPage';
import { W2lResultViewFc } from './w2l/w2l_result_view/W2lResultViewFc';
import { W2lTemplateListFc } from './w2l/w2l_template_list/W2lTemplateListFc';
import { W2lTemplateUploadJob } from '@storyteller/components/src/jobs/W2lTemplateUploadJobs';
import { W2lTemplateViewFc } from './w2l/w2l_template_view/W2lTemplateViewFc';
import { TtsResultEditPage } from './tts/tts_result_edit/TtsResultEditPage';
import { W2lResultEditFc } from './w2l/w2l_result_edit/W2lResultEditFc';
import { W2lTemplateDeleteFc } from './w2l/w2l_template_delete/W2lTemplateDeleteFc';
import { W2lTemplateEditFc } from './w2l/w2l_template_edit/W2lTemplateEditFc';
import { W2lResultDeleteFc } from './w2l/w2l_result_delete/W2lResultDeleteFc';
import { W2lTemplateApproveFc } from './w2l/w2l_template_approve/W2lTemplateApproveFc';
import { TtsModelListPage } from './tts/tts_model_list/TtsModelListPage';
import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
import { ProfileBanFc } from './profile/profile_ban/ProfileBanFc';
import { ModerationUserListFc } from './moderation/moderation_user_list/ModerationUserList';
import { LeaderboardFc } from './leaderboard/LeaderboardFc';
import { ModerationJobStatsFc } from './moderation/moderation_job_stats/ModerationJobStatsFc';
import { ModerationPendingW2lTemplatesFc } from './moderation/moderation_pending_w2l_templates/ModerationPendingW2lTemplatesFc';
import { ModerationVoiceStatsFc } from './moderation/moderation_voice_stats/ModerationVoiceStatsFc';
import { CreateCategoryPage } from './category/CreateCategoryPage';
import { TtsEditCategoriesPage } from './tts/tts_edit_categories/TtsEditCategoriesPage';
import { ModerationTtsCategoryListPage } from './moderation/categories/ModerationTtsCategoryListPage';
import { ModerationTtsCategoryEditPage } from './moderation/categories/ModerationTtsCategoryEditPage';
import { ModerationCategoryDeletePage } from './moderation/categories/ModerationCategoryDeletePage';
import { TtsCategoryType } from '../../AppWrapper';
import { PatronPage } from './patrons/PatronPage';
import ScrollToTop from './_common/ScrollToTop';
import { Language } from '@storyteller/components/src/i18n/Language';
import { VoiceCloneRequestPage } from './clone_voice_requests/VoiceCloneRequestPage';
import { VocodesPage } from './vocodes/VocodesPage';
import { UploadVocoderPage } from './upload/UploadVocoderPage';
import React from "react";
import { AboutPage } from "./about/about_page/AboutPage";
import { GuidePage } from "./about/guide_page/GuidePage";
import { FirehoseEventListFc } from "./firehose/FirehoseEventListFc";
import { LoginPage } from "./login/LoginPage";
import { ModerationFc } from "./moderation/moderation_main/ModerationFc";
import { ModerationIpBanListFc } from "./moderation/moderation_ip_ban_list/ModerationIpBanListFc";
import { ModerationViewIpBanFc } from "./moderation/moderation_view_ip_ban/ModerationViewIpBanFc";
import { NewFooterNavFc } from "./NewFooterNavFc";
import { NewTopNavFc } from "./NewTopNavFc";
import { ProfileEditFc } from "./profile/profile_edit/ProfileEditFc";
import { ProfileFc } from "./profile/profile_view/ProfileFc";
import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
import { SignupPage } from "./signup/SignupPage";
import { Switch, Route } from "react-router-dom";
import { TermsPage } from "./about/terms_page/TermsPage";
import { TtsInferenceJob, W2lInferenceJob } from "../../App";
import { TtsModelDeletePage } from "./tts/tts_model_delete/TtsModelDeletePage";
import { TtsModelEditPage } from "./tts/tts_model_edit/TtsModelEditPage";
import { TtsModelUploadJob } from "@storyteller/components/src/jobs/TtsModelUploadJobs";
import { VocoderUploadJob } from "@storyteller/components/src/jobs/VocoderUploadJobs";
import { TtsModelViewPage } from "./tts/tts_model_view/TtsModelViewPage";
import { TtsResultDeletePage } from "./tts/tts_result_delete/TtsResultDeletePage";
import { TtsResultViewPage } from "./tts/tts_result_view/TtsResultViewPage";
import { ContributeIndexPage } from "./contribute/ContributeIndexPage";
import { UploadTtsModelPage } from "./upload/UploadTtsModelPage";
import { UploadW2lPhotoPage } from "./upload/UploadW2lPhotoPage";
import { UploadW2lVideoPage } from "./upload/UploadW2lVideoPage";
import { W2lResultViewFc } from "./w2l/w2l_result_view/W2lResultViewFc";
import { W2lTemplateListFc } from "./w2l/w2l_template_list/W2lTemplateListFc";
import { W2lTemplateUploadJob } from "@storyteller/components/src/jobs/W2lTemplateUploadJobs";
import { W2lTemplateViewFc } from "./w2l/w2l_template_view/W2lTemplateViewFc";
import { TtsResultEditPage } from "./tts/tts_result_edit/TtsResultEditPage";
import { W2lResultEditFc } from "./w2l/w2l_result_edit/W2lResultEditFc";
import { W2lTemplateDeleteFc } from "./w2l/w2l_template_delete/W2lTemplateDeleteFc";
import { W2lTemplateEditFc } from "./w2l/w2l_template_edit/W2lTemplateEditFc";
import { W2lResultDeleteFc } from "./w2l/w2l_result_delete/W2lResultDeleteFc";
import { W2lTemplateApproveFc } from "./w2l/w2l_template_approve/W2lTemplateApproveFc";
import { TtsModelListPage } from "./tts/tts_model_list/TtsModelListPage";
import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
import { ProfileBanFc } from "./profile/profile_ban/ProfileBanFc";
import { ModerationUserListFc } from "./moderation/moderation_user_list/ModerationUserList";
import { LeaderboardFc } from "./leaderboard/LeaderboardFc";
import { ModerationJobStatsFc } from "./moderation/moderation_job_stats/ModerationJobStatsFc";
import { ModerationPendingW2lTemplatesFc } from "./moderation/moderation_pending_w2l_templates/ModerationPendingW2lTemplatesFc";
import { ModerationVoiceStatsFc } from "./moderation/moderation_voice_stats/ModerationVoiceStatsFc";
import { CreateCategoryPage } from "./category/CreateCategoryPage";
import { TtsEditCategoriesPage } from "./tts/tts_edit_categories/TtsEditCategoriesPage";
import { ModerationTtsCategoryListPage } from "./moderation/categories/ModerationTtsCategoryListPage";
import { ModerationTtsCategoryEditPage } from "./moderation/categories/ModerationTtsCategoryEditPage";
import { ModerationCategoryDeletePage } from "./moderation/categories/ModerationCategoryDeletePage";
import { TtsCategoryType } from "../../AppWrapper";
import { PatronPage } from "./patrons/PatronPage";
import ScrollToTop from "./_common/ScrollToTop";
import { Language } from "@storyteller/components/src/i18n/Language";
import { VoiceCloneRequestPage } from "./clone_voice_requests/VoiceCloneRequestPage";
import { VocodesPage } from "./vocodes/VocodesPage";
import { UploadVocoderPage } from "./upload/UploadVocoderPage";
interface Props {
sessionWrapper: SessionWrapper,
querySessionAction: () => 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<TtsInferenceJob>,
enqueueTtsJob: (jobToken: string) => void;
ttsInferenceJobs: Array<TtsInferenceJob>;
enqueueW2lJob: (jobToken: string) => void,
w2lInferenceJobs: Array<W2lInferenceJob>,
enqueueW2lJob: (jobToken: string) => void;
w2lInferenceJobs: Array<W2lInferenceJob>;
enqueueTtsModelUploadJob: (jobToken: string) => void,
ttsModelUploadJobs: Array<TtsModelUploadJob>,
enqueueTtsModelUploadJob: (jobToken: string) => void;
ttsModelUploadJobs: Array<TtsModelUploadJob>;
enqueueW2lTemplateUploadJob: (jobToken: string) => void,
w2lTemplateUploadJobs: Array<W2lTemplateUploadJob>,
enqueueW2lTemplateUploadJob: (jobToken: string) => void;
w2lTemplateUploadJobs: Array<W2lTemplateUploadJob>;
enqueueVocoderUploadJob: (jobToken: string) => void,
vocoderUploadJobs: Array<VocoderUploadJob>,
enqueueVocoderUploadJob: (jobToken: string) => void;
vocoderUploadJobs: Array<VocoderUploadJob>;
textBuffer: string,
setTextBuffer: (textBuffer: string) => void,
clearTextBuffer: () => void,
textBuffer: string;
setTextBuffer: (textBuffer: string) => void;
clearTextBuffer: () => void;
ttsModels: Array<TtsModelListItem>,
setTtsModels: (ttsVoices: Array<TtsModelListItem>) => void,
ttsModels: Array<TtsModelListItem>;
setTtsModels: (ttsVoices: Array<TtsModelListItem>) => void;
allTtsCategories: TtsCategoryType[],
setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void,
allTtsCategories: TtsCategoryType[];
setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void;
allTtsCategoriesByTokenMap: Map<string, TtsCategoryType>,
allTtsModelsByTokenMap: Map<string, TtsModelListItem>,
ttsModelsByCategoryToken: Map<string, Set<TtsModelListItem>>,
allTtsCategoriesByTokenMap: Map<string, TtsCategoryType>;
allTtsModelsByTokenMap: Map<string, TtsModelListItem>;
ttsModelsByCategoryToken: Map<string, Set<TtsModelListItem>>;
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<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
}
this.state = {};
}
logout = () => {
}
logout = () => {};
public render() {
return (
<div id="main" className="mainwrap">
<div id="viewable">
<NewTopNavFc
logoutHandler={this.logout}
sessionWrapper={this.props.sessionWrapper}
@@ -145,15 +141,11 @@ class NewVocodesContainer extends React.Component<Props, State> {
<Switch>
<Route path="/firehose">
<FirehoseEventListFc
sessionWrapper={this.props.sessionWrapper}
/>
<FirehoseEventListFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/leaderboard">
<LeaderboardFc
sessionWrapper={this.props.sessionWrapper}
/>
<LeaderboardFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/login">
@@ -163,28 +155,21 @@ class NewVocodesContainer extends React.Component<Props, State> {
/>
</Route>
<Route path="/profile/:username/edit">
<ProfileEditFc
sessionWrapper={this.props.sessionWrapper}
/>
<ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/profile/:username/ban">
<ProfileBanFc
sessionWrapper={this.props.sessionWrapper}
/>
<ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/profile/:username">
<ProfileFc
sessionWrapper={this.props.sessionWrapper}
/>
<ProfileFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/signup">
<SignupPage
querySessionCallback={() => { }}
querySessionCallback={() => {}}
sessionWrapper={this.props.sessionWrapper}
/>
</Route>
@@ -199,21 +184,15 @@ class NewVocodesContainer extends React.Component<Props, State> {
*/}
<Route path="/tts/result/:token/edit">
<TtsResultEditPage
sessionWrapper={this.props.sessionWrapper}
/>
<TtsResultEditPage sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/tts/result/:token/delete">
<TtsResultDeletePage
sessionWrapper={this.props.sessionWrapper}
/>
<TtsResultDeletePage sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/tts/result/:token">
<TtsResultViewPage
sessionWrapper={this.props.sessionWrapper}
/>
<TtsResultViewPage sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/tts/:token/edit">
@@ -225,9 +204,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
</Route>
<Route path="/tts/:token/delete">
<TtsModelDeletePage
sessionWrapper={this.props.sessionWrapper}
/>
<TtsModelDeletePage sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/tts/:token/categories">
@@ -248,27 +225,19 @@ class NewVocodesContainer extends React.Component<Props, State> {
</Route>
<Route path="/w2l/result/:token/edit">
<W2lResultEditFc
sessionWrapper={this.props.sessionWrapper}
/>
<W2lResultEditFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/w2l/result/:token/delete">
<W2lResultDeleteFc
sessionWrapper={this.props.sessionWrapper}
/>
<W2lResultDeleteFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/w2l/result/:token">
<W2lResultViewFc
sessionWrapper={this.props.sessionWrapper}
/>
<W2lResultViewFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/w2l/:templateToken/edit">
<W2lTemplateEditFc
sessionWrapper={this.props.sessionWrapper}
/>
<W2lTemplateEditFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/w2l/:templateToken/approval">
@@ -278,9 +247,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
</Route>
<Route path="/w2l/:templateToken/delete">
<W2lTemplateDeleteFc
sessionWrapper={this.props.sessionWrapper}
/>
<W2lTemplateDeleteFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/w2l/:templateSlug">
@@ -292,16 +259,16 @@ class NewVocodesContainer extends React.Component<Props, State> {
</Route>
<Route path="/video">
<W2lTemplateListFc
sessionWrapper={this.props.sessionWrapper}
/>
<W2lTemplateListFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/upload/w2l_photo">
<UploadW2lPhotoPage
sessionWrapper={this.props.sessionWrapper}
w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
enqueueW2lTemplateUploadJob={this.props.enqueueW2lTemplateUploadJob}
enqueueW2lTemplateUploadJob={
this.props.enqueueW2lTemplateUploadJob
}
/>
</Route>
@@ -309,7 +276,9 @@ class NewVocodesContainer extends React.Component<Props, State> {
<UploadW2lVideoPage
sessionWrapper={this.props.sessionWrapper}
w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
enqueueW2lTemplateUploadJob={this.props.enqueueW2lTemplateUploadJob}
enqueueW2lTemplateUploadJob={
this.props.enqueueW2lTemplateUploadJob
}
/>
</Route>
@@ -330,15 +299,11 @@ class NewVocodesContainer extends React.Component<Props, State> {
</Route>
<Route path="/contribute">
<ContributeIndexPage
sessionWrapper={this.props.sessionWrapper}
/>
<ContributeIndexPage sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/category/create">
<CreateCategoryPage
sessionWrapper={this.props.sessionWrapper}
/>
<CreateCategoryPage sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/moderation/user/list">
@@ -396,9 +361,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
</Route>
<Route path="/moderation">
<ModerationFc
sessionWrapper={this.props.sessionWrapper}
/>
<ModerationFc sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route exact={true} path="/clone">
@@ -406,9 +369,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
</Route>
<Route path="/patrons">
<PatronPage
sessionWrapper={this.props.sessionWrapper}
/>
<PatronPage sessionWrapper={this.props.sessionWrapper} />
</Route>
<Route path="/about">
@@ -419,8 +380,12 @@ class NewVocodesContainer extends React.Component<Props, State> {
<TermsPage />
</Route>
<Route path="/guide">
<GuidePage />
</Route>
<Route path="/old">
<VocodesPage/>
<VocodesPage />
</Route>
<Route path="/">
@@ -433,10 +398,16 @@ class NewVocodesContainer extends React.Component<Props, State> {
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<Props, State> {
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<Props, State> {
setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
/>
</Route>
</Switch>
<NewFooterNavFc
sessionWrapper={this.props.sessionWrapper}
/>
<NewFooterNavFc sessionWrapper={this.props.sessionWrapper} />
</div>
</div>
)
);
}
}
export { NewVocodesContainer }
export { NewVocodesContainer };
packages/fakeyou/src/v2/view/about/guide_page/GuidePage.tsx
+137
View File
@@ -0,0 +1,137 @@
import React from "react";
import { motion } from "framer-motion";
import { container, item, panel, image } from "../../../../data/animation";
import { Link } from "react-router-dom";
interface Props {}
function GuidePage(props: Props) {
return (
<motion.div initial="hidden" animate="visible" variants={container}>
<div className="container">
<div className="row gx-3 flex-lg-row-reverse align-items-center">
<div className="col-lg-6">
<div className="d-flex justify-content-center">
<motion.img
src="/mascot/guide.webp"
className="img-fluid"
width="516"
height="444"
alt="FakeYou Kitsune Mascot!"
variants={image}
/>
</div>
</div>
<div className="col-lg-6 px-md-2 ps-lg-5 ps-xl-2">
<div className="text-center text-lg-start">
<div>
<motion.h1
className="display-5 fw-bold lh-1 mb-3"
variants={item}
>
FakeYou TTS Guide
</motion.h1>
</div>
<div className="mb-5">
<motion.p className="lead px-5 px-lg-0" variants={item}>
<h4>How to generate the best sounding TTS</h4>
</motion.p>
</div>
<div>
<motion.div
variants={item}
className="d-flex justify-content-center justify-content-lg-start mb-5 mb-lg-0"
>
<Link to="/">
<button className="btn btn-primary">
Generate your TTS
</button>
</Link>
</motion.div>
</div>
</div>
</div>
</div>
</div>
<motion.div className="container-panel pt-4 pb-5" variants={panel}>
<div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
<h1 className="panel-title fw-bold">Quick Tips</h1>
<div className="py-6 d-flex flex-column gap-4">
<p>
These are some tips to generate the best sounding text-to-speech.
</p>
<div>
<h2 className="mb-4">Preventing TTS strokes</h2>
<p>
A TTS stroke is when the generated audio becomes garbled and
incoherent.
</p>
<p>
This can be fixed by adding an ending punctuation as without
one, this will happen frequently. If the message still messes
up, add a comma at the start and end so the program can take a
brief pause and usually corrects it.
</p>
</div>
<div>
<h2 className="mb-4">
Purposefully misspelling words to get correct
pronunciation/manner of speech
</h2>
<p>
Sometimes the TTS program cannot accurately read the word or you
want a word pronounced a certain way. You can experiment with
it. For example, to say the word "ass" with a certain hit, spell
it as "asz". Or another example, Games = Gaymes.
</p>
</div>
<div>
<h2 className="mb-4">Fluffing</h2>
<p>
To get a certain emotion and personality in the message you
want, add fluff. To do this, add the first sentence with words
that you have no intention of using. Like bunch of cursing and
such. "
<span style={{ textDecoration: "line-through" }}>
Fuck you bitch! I hate you!
</span>{" "}
I cant believe you said that to me!". You can remove the first
sentence you had no intention of using in an audio editor of
your choice like Audacity.
</p>
</div>
<div>
<h2 className="mb-4">Yelling</h2>
<p>
This only works if the dataset has yelling and transcript
properly. When you do the transcript of a character that yells,
add an exclamation mark on the transcript clip that has yelling
and periods for normal speech. This will easier trigger angry
emotions. But the yelling will likely not happen with smaller
datasets or if the yelling is not at all in the dataset.
</p>
</div>
</div>
</div>
</motion.div>
<motion.div className="container-panel pt-4 pb-5" variants={panel}>
<div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
<h2 className="panel-title fw-bold">Generate your TTS now!</h2>
<div className="py-6 d-flex flex-column gap-4">
<div>
<Link to="/">
<button className="btn btn-primary w-100">
Go to text-to-speech generation page
</button>
</Link>
</div>
</div>
</div>
</motion.div>
</motion.div>
);
}
export { GuidePage };
packages/fakeyou/src/v2/view/about/terms_page/TermsPage.tsx
+31 -10
View File
@@ -1,6 +1,6 @@
import React from "react";
import { motion } from "framer-motion";
import { container, item, panel } from "../../../../data/animation";
import { container, item, panel, image } from "../../../../data/animation";
import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
interface Props {}
@@ -8,15 +8,36 @@ interface Props {}
function TermsPage(props: Props) {
return (
<motion.div initial="hidden" animate="visible" variants={container}>
<div className="container pt-5 pb-0 pb-lg-5 text-center text-lg-start">
<div className="d-flex flex-column">
<div>
<motion.h1 className="display-5 fw-bold" variants={item}>
Terms and Conditions
</motion.h1>
<motion.h4 className="mb-4 text-light" variants={item}>
Please use this technology responsibly.
</motion.h4>
<div className="container">
<div className="row gx-3 flex-lg-row-reverse align-items-center">
<div className="col-lg-6">
<div className="d-flex justify-content-center">
<motion.img
src="/mascot/tou.webp"
className="img-fluid"
width="516"
height="444"
alt="FakeYou Kitsune Mascot!"
variants={image}
/>
</div>
</div>
<div className="col-lg-6 px-md-2 ps-lg-5 ps-xl-2">
<div className="text-center text-lg-start">
<div>
<motion.h1
className="display-5 fw-bold lh-1 mb-3"
variants={item}
>
Terms and Conditions
</motion.h1>
</div>
<div>
<motion.p className="lead" variants={item}>
<h4>Please use this technology responsibly.</h4>
</motion.p>
</div>
</div>
</div>
</div>
</div>
packages/fakeyou/src/v2/view/patrons/PatronPage.tsx
+4 -1
View File
@@ -28,7 +28,10 @@ function PatronPage(props: Props) {
expensive server bills.
</motion.p>
<motion.div className="d-flex" variants={item}>
<motion.div
className="d-flex justify-content-center justify-content-lg-start"
variants={item}
>
<a
href={ThirdPartyLinks.FAKEYOU_PATREON}
target="_blank"