diff --git a/packages/fakeyou/.env b/packages/fakeyou/.env new file mode 100644 index 0000000000..fc379be3f7 --- /dev/null +++ b/packages/fakeyou/.env @@ -0,0 +1,2 @@ +BROWSER=none +HTTPS=true \ No newline at end of file diff --git a/packages/fakeyou/src/AppNew.scss b/packages/fakeyou/src/AppNew.scss index 02bedb23cb..19bdd40087 100644 --- a/packages/fakeyou/src/AppNew.scss +++ b/packages/fakeyou/src/AppNew.scss @@ -147,10 +147,10 @@ $headings-font-family: "Merriweather", serif; font-size: 15px; font-weight: 600; padding: 0.5rem 1rem; - color: #212529; + color: $secondary; &:hover { - color: #212529; + color: $secondary; } &:focus { background-color: $white; diff --git a/packages/fakeyou/src/scss/colours.scss b/packages/fakeyou/src/scss/colours.scss index ae7482690f..9dd0d6f29c 100644 --- a/packages/fakeyou/src/scss/colours.scss +++ b/packages/fakeyou/src/scss/colours.scss @@ -1,4 +1,5 @@ $primary: #fc6b68; +$secondary: #212529; $info: #252d43; $success: #40ad48; $danger: #e51c23; @@ -47,4 +48,4 @@ $danger-light: desaturate(lighten($danger, 15%), 15%); $danger-dark: darken($danger, 10%); $accent-light: desaturate(lighten($accent, 20%), 15%); -$accent-dark: saturate(darken($accent, 15%), 10%); \ No newline at end of file +$accent-dark: saturate(darken($accent, 15%), 10%); diff --git a/packages/fakeyou/src/scss/site-refresh.scss b/packages/fakeyou/src/scss/site-refresh.scss index b8f69f4b9a..1041db572d 100644 --- a/packages/fakeyou/src/scss/site-refresh.scss +++ b/packages/fakeyou/src/scss/site-refresh.scss @@ -148,14 +148,14 @@ styles with important tags: .btn-secondary:focus, .btn-secondary:active { background-color: $white; - color: #212529; + color: $secondary; border: 2.5px solid; border-color: $white; transition: 0.2s; } .btn-secondary:hover { background-color: #ccc; - color: #212529; + color: $secondary; border: 2.5px solid; border-color: #ccc; } @@ -177,6 +177,14 @@ styles with important tags: border-color: #fdcfce; } + .btn-inform { + height: 42px; + align-items: center; + padding: 0 0.75rem; + padding-top: 1px; + font-size: 22px; + } + .panel { position: relative; width: 100%; @@ -214,6 +222,26 @@ styles with important tags: } } + .menu { + border-radius: 8px !important; + color: #000; + font-weight: 400; + position: absolute; + border-color: rgba($white, 0.12) !important; + border: 1px solid; + border-radius: 8px; + box-shadow: 0px 5px 20px rgba($black, 0.3); + z-index: 3; + overflow: hidden; + } + + .menu-item { + padding: 0.25rem; + padding-left: 2.375rem; + padding-right: 2.375rem; + cursor: pointer; + } + .login-panel { max-width: 800px !important; backdrop-filter: blur(5px); @@ -279,7 +307,7 @@ styles with important tags: // line-height: 2.69rem; text-align: center; pointer-events: none; - color: #212529; + color: $secondary; opacity: 0.9; } } @@ -459,6 +487,20 @@ styles with important tags: color: #664d03; } } + + .alert { + .close { + position: absolute; + border-radius: 50px; + border: none; + background: none; + padding: 0; + margin: 0; + right: 12px; + top: 0px; + font-size: 30px; + } + } } @media (min-width: 992px) { diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx index 00b8d20333..4515e9e6d3 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/AutocompleteSearch.tsx @@ -38,51 +38,59 @@ export function AutocompleteSearch(props: Props) { return ( <>
- {t('ttsListPage.search')} + + {t("ttsListPage.search")} +
- {/* NB: See note above about this library. */} item.title} + getItemValue={(item: TtsModelListItem) => item.title} items={props.allTtsModels} renderInput={(props) => ( - + )} - renderMenu={children => ( -
- {children.slice(0, maxMenuItems)} -
+ renderMenu={(children) => ( +
{children.slice(0, maxMenuItems)}
)} - renderItem={(item : TtsModelListItem, isHighlighted : boolean) => -
+ renderItem={(item: TtsModelListItem, isHighlighted: boolean) => ( +
{item.title}
- } + )} value={searchValue} - onChange={(e : any) => setSearchValue(e.target.value) } - onSelect={(val : string, item: TtsModelListItem) => { + onChange={(e: any) => setSearchValue(e.target.value)} + onSelect={(val: string, item: TtsModelListItem) => { // Nothing selected. props.setSelectedCategories([]); // And the dropdowns themselves // Shouldn't need to rebuild this... - let newDropdownCategories = props.dropdownCategories.slice(0, 1); + let newDropdownCategories = props.dropdownCategories.slice( + 0, + 1 + ); if (newDropdownCategories.length === 0) { // ...but just in case. - newDropdownCategories.push(props.allTtsCategories.filter(category => { - return category.maybe_super_category_token === undefined; - })); + newDropdownCategories.push( + props.allTtsCategories.filter((category) => { + return category.maybe_super_category_token === undefined; + }) + ); } props.setDropdownCategories(newDropdownCategories); - props.setMaybeSelectedTtsModel(item) + props.setMaybeSelectedTtsModel(item); }} - shouldItemRender={(item : TtsModelListItem, value) => { + shouldItemRender={(item: TtsModelListItem, value) => { // TODO: A trie would be so much better. Ugh, this is so bad. let test = value.toLocaleLowerCase().trim(); if (test.length === 0) { @@ -90,9 +98,13 @@ export function AutocompleteSearch(props: Props) { } return item.title.toLocaleLowerCase().includes(test); }} - - inputProps={{ id: 'states-autocomplete' }} - wrapperStyle={{ position: 'relative', display: 'inline-block' }} + inputProps={{ + id: "states-autocomplete", + }} + wrapperStyle={{ + position: "relative", + display: "inline-block", + }} /> @@ -112,6 +124,7 @@ export function AutocompleteSearch(props: Props) { + item.title} items={props.allTtsModels} @@ -125,10 +138,13 @@ export function AutocompleteSearch(props: Props) { /> )} renderMenu={(children) => ( -
{children.slice(0, maxMenuItems)}
+
+ {children.slice(0, maxMenuItems)} +
)} renderItem={(item: TtsModelListItem, isHighlighted: boolean) => (
{item.title} @@ -165,7 +181,11 @@ export function AutocompleteSearch(props: Props) { return item.title.toLocaleLowerCase().includes(test); }} inputProps={{ id: "states-autocomplete" }} - wrapperStyle={{ position: "relative", display: "inline-block" }} + wrapperStyle={{ + position: "relative", + display: "inline-block", + width: "100%", + }} />
diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx index 9a965d273d..f06af18526 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/MultiDropdownSearch.tsx @@ -1,6 +1,7 @@ import React, { useEffect } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { + faCaretRight, faChevronRight, faHeadphonesAlt, faMicrophone, @@ -201,14 +202,14 @@ export function MultiDropdownSearch(props: Props) { if (USE_REFRESH) { // Redesign and Bootstrap CSS - selectCssClasses = "category-dropdown form-select"; // NB: 'category-dropdown' is important for function. + selectCssClasses = "category-dropdown form-select"; // NB: 'category-dropdown' is important for function. xButtonCssClasses = "btn btn-destructive btn-inform"; } categoryDropdowns.push( -
-
+
+
-
- - - -
- -
- -
+
-
- +
+ +
+ +
+ +
); @@ -251,7 +256,10 @@ export function MultiDropdownSearch(props: Props) { if (categoryFields.length >= groupSize) { categoryFieldGroups.push( -
+
{categoryFields.splice(0, categoryFields.length)}
); @@ -260,7 +268,7 @@ export function MultiDropdownSearch(props: Props) { if (categoryFields.length >= 0) { categoryFieldGroups.push( -
+
{categoryFields.splice(0, categoryFields.length)}
); @@ -295,32 +303,34 @@ export function MultiDropdownSearch(props: Props) { return (
{/* Category Dropdowns */} - {t('ttsListPage.categoryFilters')} + {t("ttsListPage.categoryFilters")}
{categoryFieldGroups} {/* Model Dropdown */} - Voice ({voiceCount} to choose from) + Voice ({voiceCount} to choose from)
- + {isLoading + ? loadingOption + : Array.from(leafiestCategoryModels).map((model) => { + return ( + + ); + })}
@@ -328,14 +338,13 @@ export function MultiDropdownSearch(props: Props) {
- ) + ); } return (
{/* Category Dropdowns */} -
{categoryFieldGroups} {/* Model Dropdown */} diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx index fc9497a2e6..ca283fc991 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx @@ -38,7 +38,11 @@ import { TwitchTtsNotice } from "./notices/TwitchTtsNotice"; import { PleaseFollowNotice } from "./notices/PleaseFollowNotice"; import { distance, delay, delay2, duration } from "../../../../data/animation"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faVolumeUp } from "@fortawesome/free-solid-svg-icons"; +import { + faTrash, + faVolumeHigh, + faVolumeUp, +} from "@fortawesome/free-solid-svg-icons"; import { USE_REFRESH } from "../../../../Refresh"; const Fade = require("react-reveal/Fade"); @@ -208,10 +212,11 @@ function TtsModelListFc(props: Props) { let modelName = props.maybeSelectedTtsModel.title; let userName = props.maybeSelectedTtsModel.creator_display_name; directViewLink = ( - + - See more details about the "{{ modelName }}" model - by {{ userName }}  + See more details about the " + {{ modelName }}" model by  + {{ userName }}  - +
+ {message}
); @@ -343,10 +347,7 @@ function TtsModelListFc(props: Props) { setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel} /> - {directViewLink} - -
-
+
{directViewLink}
@@ -470,7 +471,7 @@ function TtsModelListFc(props: Props) { {twitchTtsNotice} -
+
@@ -531,12 +532,14 @@ function TtsModelListFc(props: Props) { className="btn btn-primary w-100" disabled={remainingCharactersButtonDisabled} > + {t("pages.ttsList.buttonSpeak")}
@@ -547,31 +550,22 @@ function TtsModelListFc(props: Props) {
-
-
-
-
- -
-
-
-
- +
); } diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/LanguageNotice.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/LanguageNotice.tsx index 469fe5aee9..bc476d85dc 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/LanguageNotice.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/LanguageNotice.tsx @@ -1,10 +1,10 @@ -import React from 'react'; -import { Language } from '@storyteller/components/src/i18n/Language'; -import { DiscordLink } from '@storyteller/components/src/elements/DiscordLink'; +import React from "react"; +import { Language } from "@storyteller/components/src/i18n/Language"; +import { DiscordLink } from "@storyteller/components/src/elements/DiscordLink"; interface Props { - clearLanguageNotice: () => void, - displayLanguage: Language, + clearLanguageNotice: () => void; + displayLanguage: Language; } /* Template: @@ -18,55 +18,80 @@ interface Props { We will pay for the first fifty {LANGUAGE} models uploaded. */ -function LanguageNotice (props: Props) { +function LanguageNotice(props: Props) { let title = "¡Bienvenidos!"; - let weHaveModels = (<> -

Tenemos modelos de habla hispana. Echa un vistazo a la categoría "Español" - ("Category Filters").

- ); - let joinUs = (<> -

- Podemos ayudarte a hacer tus propias voces.  - . - Pagaremos por los primeros cincuenta modelos subidos. -

- ); + let weHaveModels = ( + <> +

+ Tenemos modelos de habla hispana. Echa un vistazo a la categoría + "Español" ("Category Filters"). +

+ + ); + let joinUs = ( + <> +

+ Podemos ayudarte a hacer tus propias voces.  + + . Pagaremos por los primeros cincuenta modelos subidos. +

+ + ); if (props.displayLanguage === Language.Portuguese) { title = "Bem vinda!"; - weHaveModels = (<> -

Temos modelos que falam português. Dê uma olhada na categoria "Português" ("Filtros de Categoria").

- ); - joinUs = (<> -

- Nós podemos ajudá-lo a fazer suas próprias vozes.  - . - Pagaremos os primeiros cinquenta modelos portugueses carregados. -

- ); + weHaveModels = ( + <> +

+ Temos modelos que falam português. Dê uma olhada na categoria + "Português" ("Filtros de Categoria"). +

+ + ); + joinUs = ( + <> +

+ Nós podemos ajudá-lo a fazer suas próprias vozes.  + + . Pagaremos os primeiros cinquenta modelos portugueses carregados. +

+ + ); } else if (props.displayLanguage === Language.Turkish) { title = "Hoş geldin!"; weHaveModels = <>; - joinUs = (<> -

- Kendi sesinizi çıkarmanıza yardımcı olabiliriz.  - . - Yüklenen ilk elli Türk modelinin ücretini biz ödeyeceğiz. -

- ); - + joinUs = ( + <> +

+ Kendi sesinizi çıkarmanıza yardımcı olabiliriz.  + + . Yüklenen ilk elli Türk modelinin ücretini biz ödeyeceğiz. +

+ + ); } return ( <> -
- -

{title}

- {weHaveModels} - {joinUs} + \ +
+
+ +

{title}

+ {weHaveModels} + {joinUs} +
- ) + ); } -export { LanguageNotice } +export { LanguageNotice }; diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/PleaseFollowNotice.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/PleaseFollowNotice.tsx index efa39b54b1..d73ed3703e 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/PleaseFollowNotice.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/PleaseFollowNotice.tsx @@ -1,44 +1,48 @@ -import { DiscordLink2 } from '@storyteller/components/src/elements/DiscordLink2'; -import { Trans } from 'react-i18next'; -import { TwitterLink } from '@storyteller/components/src/elements/TwitterLink'; -import { TwitchLabsLink } from '@storyteller/components/src/elements/TwitchLabsLink'; -import React from 'react'; +import { DiscordLink2 } from "@storyteller/components/src/elements/DiscordLink2"; +import { Trans } from "react-i18next"; +import { TwitterLink } from "@storyteller/components/src/elements/TwitterLink"; +import { TwitchLabsLink } from "@storyteller/components/src/elements/TwitchLabsLink"; +import React from "react"; interface Props { - clearPleaseFollowNotice: () => void, + clearPleaseFollowNotice: () => void; } function PleaseFollowNotice(props: Props) { return ( <> -
- -

+

+
+ - Sorry our site is so slow! + Sorry our site is so slow! -

-
-

+
- I am so sorry the website is slow. We're getting millions of - requests. Please follow us on Twitter and - also join our Discord. - I'm going to introduce faster processing (less than one minute) for those that - follow us and help support our work. So please follow our Twitter and join our Discord. - Our new video deepfake technology will debut on Twitch, - so please follow us there too. + I am so sorry the website is slow. We're getting millions of + requests. Please follow us on Twitter and + also join our Discord. I'm going to + introduce faster processing (less than one minute) for those that + follow us and help support our work. So please follow our Twitter + and join our Discord. Our new{" "} + + video deepfake technology will debut on Twitch + + , so please follow us there too. -

-
-

+
| | -

+
- ) + ); } -export { PleaseFollowNotice } +export { PleaseFollowNotice }; diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/TwitchTtsNotice.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/TwitchTtsNotice.tsx index 319e741c55..0317d19238 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/TwitchTtsNotice.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/TwitchTtsNotice.tsx @@ -1,30 +1,50 @@ -import React from 'react'; +import React from "react"; interface Props { - clearTwitchTtsNotice: () => void, + clearTwitchTtsNotice: () => void; } function TwitchTtsNotice(props: Props) { return ( <> -
- -

- If you stream on Twitch, we have a brand new platform for you! -

-
-

- Allow us to introduce Storyteller, - a free, zero-download, easy to use platform that lets you use - FakeYou voices on your Twitch stream. Your audience can use bits, channel points, - and soon much more. We've got a ton of features in store. Try it out and - let us know what you think! -

-
-

You think voices are neat? Just wait until we show you what else we've been working on…

+
+
+ + + If you stream on Twitch, we have a brand new platform for you! + +
+ Allow us to introduce{" "} + + Storyteller + + , a free, zero-download, easy to use platform that lets you use + FakeYou voices on your Twitch stream. Your audience can use bits, + channel points, and soon much more. We've got a ton of features in + store.{" "} + + Try it out and let us know what you think! + +
+ You think voices are neat? Just wait until we show you what else we've + been working on… +
- ) + ); } -export { TwitchTtsNotice } +export { TwitchTtsNotice }; diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/VocodesNotice.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/VocodesNotice.tsx index e0f8a52c32..6c58278aff 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/VocodesNotice.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/notices/VocodesNotice.tsx @@ -1,7 +1,7 @@ -import React from 'react'; +import React from "react"; interface Props { - clearVocodesNotice: () => void, + clearVocodesNotice: () => void; } function VocodesNotice(props: Props) { @@ -16,17 +16,26 @@ function VocodesNotice(props: Props) { production and deepfake tools, so stay tuned.
*/} -
- -

Vocodes is now FakeYou! - Why the change? Not many know what vocoders are, so the old name was kind of silly. - We've also got lots of ambitious plans for the future, including a full set of virtual - production and deepfake tools, so stay tuned.

-
-

(You can access us at FakeYou.com to get rid of this notice forever.)

+
+
+ + Vocodes is now{" "} + + FakeYou + + ! Why the change? Not many know what vocoders are, so the old name was + kind of silly. We've also got lots of ambitious plans for the future, + including a full set of virtual production and deepfake tools, so stay + tuned. +
+ (You can access us at FakeYou.com to + get rid of this notice forever.) +
- ) + ); } -export { VocodesNotice } +export { VocodesNotice };