From c52ef38bedb41dba18cef86c622ee842f59595c8 Mon Sep 17 00:00:00 2001 From: BFlat Date: Tue, 17 Jan 2023 00:35:06 +0700 Subject: [PATCH] tts main, explore modal --- packages/fakeyou.com/package.json | 1 + .../src/_i18n/FakeYouTranslations.ts | 375 +++++++++--------- .../fakeyou.com/src/scss/site-refresh.scss | 129 +++++- .../SessionTtsInferenceResultsListFc.tsx | 17 +- .../tts_model_list/MultiDropdownSearch.tsx | 6 +- .../tts/tts_model_list/SearchFieldClass.ts | 14 + .../view/tts/tts_model_list/SelectSearch.tsx | 59 +++ .../tts/tts_model_list/TtsModelListPage.tsx | 200 +++++++++- 8 files changed, 593 insertions(+), 208 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/tts/tts_model_list/SearchFieldClass.ts create mode 100644 packages/fakeyou.com/src/v2/view/tts/tts_model_list/SelectSearch.tsx diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index efb8cf4eaa..72ea7d97bc 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -39,6 +39,7 @@ "react-reveal": "^1.2.2", "react-router-dom": "^5.2.0", "react-scripts": "5.0.0", + "react-select": "^5.7.0", "react-share": "^4.4.1", "sass": "^1.57.1", "typescript": "^3.7.5", diff --git a/packages/fakeyou.com/src/_i18n/FakeYouTranslations.ts b/packages/fakeyou.com/src/_i18n/FakeYouTranslations.ts index 9448b40787..d98b8d1c78 100644 --- a/packages/fakeyou.com/src/_i18n/FakeYouTranslations.ts +++ b/packages/fakeyou.com/src/_i18n/FakeYouTranslations.ts @@ -1,21 +1,24 @@ -import { COMMON_TRANSLATIONS, MergeDeepDictionary } from '@storyteller/components/src/_i18n/CommonTranslations'; +import { + COMMON_TRANSLATIONS, + MergeDeepDictionary, +} from "@storyteller/components/src/_i18n/CommonTranslations"; // Use \u{00a0} =   character literal -// NB: This is the new translation system design. Multiple, per-page or per-module files are easier +// NB: This is the new translation system design. Multiple, per-page or per-module files are easier // to navigate and maintain than singular monolithic files. We'll gradually phase out the old system. -import * as de from './locales/de'; -import * as en from './locales/en'; -import * as es from './locales/es'; -import * as fr from './locales/fr'; -import * as hi from './locales/hi'; -import * as id from './locales/id'; -import * as it from './locales/it'; -import * as ja from './locales/ja'; -import * as ko from './locales/ko'; -import * as pt from './locales/pt'; -import * as vi from './locales/vi'; -import * as zh from './locales/zh'; +import * as de from "./locales/de"; +import * as en from "./locales/en"; +import * as es from "./locales/es"; +import * as fr from "./locales/fr"; +import * as hi from "./locales/hi"; +import * as id from "./locales/id"; +import * as it from "./locales/it"; +import * as ja from "./locales/ja"; +import * as ko from "./locales/ko"; +import * as pt from "./locales/pt"; +import * as vi from "./locales/vi"; +import * as zh from "./locales/zh"; const NEW_TRANSLATIONS: any = { de: { translation: de }, @@ -30,7 +33,7 @@ const NEW_TRANSLATIONS: any = { pt: { translation: pt }, vi: { translation: vi }, zh: { translation: zh }, -} +}; // Make it easy to "see" new translations. Comment out when not developing. // NEW_TRANSLATIONS = DebugPrefixLeaves(NEW_TRANSLATIONS, '\u{2705} '); @@ -42,271 +45,283 @@ const FAKEYOU_TRANSLATIONS: any = { translation: { coreUi: { footerNav: { - apiDocs: 'API Docs', - aboutUs: 'About Us', - builtBy: 'Built by <1>echelon in Atlanta.', - feed: 'Feed', - leaderboard: 'Leaderboard', - patrons: 'Patrons', - termsOfUse: 'Terms of Use', - textToSpeech: 'Text to Speech', - upload: 'Upload', - video: 'Video', - pricing: 'Pricing' + apiDocs: "API Docs", + aboutUs: "About Us", + builtBy: "Built by <1>echelon in Atlanta.", + feed: "Feed", + leaderboard: "Leaderboard", + patrons: "Patrons", + termsOfUse: "Terms of Use", + textToSpeech: "Text to Speech", + upload: "Upload", + video: "Video", + pricing: "Pricing", }, topNav: { - aboutUs: 'About Us', - community: 'Community', - contributeUpload: 'Contribute / Upload', - create: 'Create', - developers: 'Developers', - feed: 'Feed', - leaderboard: 'Leaderboard', - logout: 'Logout', - myData: 'My Data', - patrons: 'Patrons', - signUpLogin: 'Sign up / Login', - terms: 'Terms of Use', - video: 'Video', + aboutUs: "About Us", + community: "Community", + contributeUpload: "Contribute / Upload", + create: "Create", + developers: "Developers", + feed: "Feed", + leaderboard: "Leaderboard", + logout: "Logout", + myData: "My Data", + patrons: "Patrons", + signUpLogin: "Sign up / Login", + terms: "Terms of Use", + video: "Video", }, }, notices: { pleaseFollow: { - title: 'Sorry our site is so slow!', + title: "Sorry our site is so slow!", body: "I am so sorry the website is slow. We're getting millions of requests. <1>Please follow us on Twitter and also <3>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.", - } + }, }, pages: { // Index page ttsList: { - buttonClear: 'Clear', - buttonSpeak: 'Speak', - errorTooManyRequests: "You're sending too many requests! Slow down a little. We have to slow things down a little when the server gets busy.", - heroSubtitle: 'Use FakeYou deep fake tech to say stuff with your favorite characters', - heroTitle: 'Text to Speech', - placeholderTextGoesHere: 'Textual shenanigans go here...', + buttonClear: "Clear", + buttonSpeak: "Speak", + errorTooManyRequests: + "You're sending too many requests! Slow down a little. We have to slow things down a little when the server gets busy.", + heroSubtitle: + "Use FakeYou deep fake tech to say stuff with your favorite characters", + heroTitle: "Text to Speech", + placeholderTextGoesHere: "Textual shenanigans go here...", }, // Other pages contributeIndex: { - buttonCreateCategory: 'Create category', - buttonSuggestCategory: 'Suggest category', - buttonUploadVoice: 'Upload voice (TTS model)', - buttonUploadW2lPhoto: 'Upload lipsync photo (w2l)', - buttonUploadW2lVideo: 'Upload lipsync video (w2l)', - describeMore: 'Want to contribute code, design, or data science? <1 />', - describeSuggest: 'Help us organize the models!', - describeUploadModels: 'Create new voices and video templates for FakeYou. <1 /> to learn how.', - discordLink1: 'Join our Discord', - discordLink2: 'Say hi in Discord', - headingCreateCategory: 'Create categories', - headingMore: 'More Ways to Contribute', - headingSuggestCategory: 'Suggest categories', - headingUploadModels: 'Upload Models', - heroSubtitle: 'You make FakeYou better by contributing', - heroTitle: 'Contribute to FakeYou!', - introText: "You'll get credited for everything you contribute. You'll also get queue priority, be eligible to win prizes, and help us become a Hollywood-killing deepfake tooling, streaming, and filmmaking powerhouse.", + buttonCreateCategory: "Create category", + buttonSuggestCategory: "Suggest category", + buttonUploadVoice: "Upload voice (TTS model)", + buttonUploadW2lPhoto: "Upload lipsync photo (w2l)", + buttonUploadW2lVideo: "Upload lipsync video (w2l)", + describeMore: + "Want to contribute code, design, or data science? <1 />", + describeSuggest: "Help us organize the models!", + describeUploadModels: + "Create new voices and video templates for FakeYou. <1 /> to learn how.", + discordLink1: "Join our Discord", + discordLink2: "Say hi in Discord", + headingCreateCategory: "Create categories", + headingMore: "More Ways to Contribute", + headingSuggestCategory: "Suggest categories", + headingUploadModels: "Upload Models", + heroSubtitle: + "You make FakeYou better by contributing", + heroTitle: "Contribute to FakeYou!", + introText: + "You'll get credited for everything you contribute. You'll also get queue priority, be eligible to win prizes, and help us become a Hollywood-killing deepfake tooling, streaming, and filmmaking powerhouse.", }, }, ttsListPage: { - by: 'by', - categoryFilters: 'Category Filters', // "Category / Language" in other locales - loading: 'Loading...', - search: 'Search', - searchTerm: 'Search Term', - seeModelDetails: 'See more details about the "<1>{{modelName}}" model by <3>{{userName}}\u{00a0}', - voiceCount: 'Voice ({{count}} to choose from)', - } - } + by: "by", + categoryFilters: "Category Filters", // "Category / Language" in other locales + loading: "Loading...", + search: "Search", + searchTerm: "Search Term", + seeModelDetails: + 'See more details about the "<1>{{modelName}}" model by <3>{{userName}}\u{00a0}', + voiceCount: "Voice ({{count}} to choose from)", + }, + }, }, // Spanish: 10.5% Twitch (#2), 20+% FakeYou (#2) es: { translation: { coreUi: { footerNav: { - apiDocs: 'Documentos de la API', - aboutUs: 'Sobre Nosotros', - builtBy: 'Construido por <1>echelon en Atlanta.', - feed: 'Transmisión en Vivo', - leaderboard: 'Tabla\u{00a0}de\u{00a0}Clasificación', - patrons: 'Mecenas', - termsOfUse: 'Términos\u{00a0}de\u{00a0}Uso', - textToSpeech: 'Texto a Voz', - upload: 'Subir', - video: 'Video', // NB: This *is* translated + apiDocs: "Documentos de la API", + aboutUs: "Sobre Nosotros", + builtBy: "Construido por <1>echelon en Atlanta.", + feed: "Transmisión en Vivo", + leaderboard: "Tabla\u{00a0}de\u{00a0}Clasificación", + patrons: "Mecenas", + termsOfUse: "Términos\u{00a0}de\u{00a0}Uso", + textToSpeech: "Texto a Voz", + upload: "Subir", + video: "Video", // NB: This *is* translated }, topNav: { - aboutUs: 'Sobre Nosotros', - community: 'Comunidad', - contributeUpload: 'Contribuir / Subir', - developers: 'Desarrollador', - feed: 'Transmisión en Vivo', - leaderboard: 'Tabla de Clasificación', - logout: 'Cerrar sesión', - myData: 'Mis datos', - patrons: 'Mecenas', - signUpLogin: 'Registrate e inicia secion', - terms: 'Términos de Uso', - video: 'Video', // NB: This *is* translated + aboutUs: "Sobre Nosotros", + community: "Comunidad", + contributeUpload: "Contribuir / Subir", + developers: "Desarrollador", + feed: "Transmisión en Vivo", + leaderboard: "Tabla de Clasificación", + logout: "Cerrar sesión", + myData: "Mis datos", + patrons: "Mecenas", + signUpLogin: "Registrate e inicia secion", + terms: "Términos de Uso", + video: "Video", // NB: This *is* translated }, }, notices: { pleaseFollow: { - title: '¡Lo sentimos, nuestro sitio es tan lento!', + title: "¡Lo sentimos, nuestro sitio es tan lento!", body: "Lamento mucho que el sitio web sea lento. Estamos recibiendo millones de solicitudes. <1>Síganos en Twitter y también únase a nuestro <3>Discord. Voy a presentar un procesamiento más rápido (menos de un minuto) para aquellos que nos siguen y ayudan a respaldar nuestro trabajo. Así que sigue nuestro Twitter y únete a nuestro Discord. <5>Nuestra nueva tecnología de videos falsos profundos debutará en Twitch, así que síganos allí también.", - } + }, }, pages: { // Index page ttsList: { - buttonClear: 'Claro', - buttonSpeak: 'Hablar', - errorTooManyRequests: "¡Estás enviando demasiadas solicitudes! Reduzca la velocidad un poco. Tenemos que ralentizar un poco las cosas cuando el servidor está ocupado. ", - heroSubtitle: 'Usa FakeYou tecnología falsa profunda para decir cosas con tus personajes favoritos', - heroTitle: 'Texto a Voz', - placeholderTextGoesHere: 'Las travesuras textuales van aquí...', + buttonClear: "Claro", + buttonSpeak: "Hablar", + errorTooManyRequests: + "¡Estás enviando demasiadas solicitudes! Reduzca la velocidad un poco. Tenemos que ralentizar un poco las cosas cuando el servidor está ocupado. ", + heroSubtitle: + "Usa FakeYou tecnología falsa profunda para decir cosas con tus personajes favoritos", + heroTitle: "Texto a Voz", + placeholderTextGoesHere: "Las travesuras textuales van aquí...", }, // Other pages contributeIndex: { - buttonCreateCategory: 'Crear categoría', - buttonSuggestCategory: 'Sugerir categoría', - buttonUploadVoice: 'Subir voz (modelo TTS)', - buttonUploadW2lPhoto: 'Foto de sincronización de labios (w2l)', // NB: Remove 'Subdir' ~= upload - buttonUploadW2lVideo: 'Video de sincronización de labios (w2l)', // NB: Remove 'Subdir' ~= upload - describeMore: '¿Quiere contribuir con código, diseño o ciencia de datos? <1 />', - describeSuggest: '¡Ayúdanos a organizar los modelos!', - describeUploadModels: 'Crea nuevas voces y plantillas de video para FakeYou. <1 /> para aprender cómo.', - discordLink1: 'Únase a nuestro Discord', - discordLink2: '¡Saluda en Discord!', - headingCreateCategory: 'Crear categorías', - headingMore: 'Más Formas de Contribuir', - headingSuggestCategory: 'Sugerir categorías', - headingUploadModels: 'Subir Modelos', - heroSubtitle: 'Haces FakeYou mejor contribuyendo', - heroTitle: 'Contribuir a FakeYou', - introText: "Recibirás crédito por todo lo que contribuyas. También obtendrá prioridad en la cola, será elegible para ganar premios y nos ayudará a convertirnos en una potencia de herramientas, transmisión y cine de deepfake que acaba con Hollywood.", + buttonCreateCategory: "Crear categoría", + buttonSuggestCategory: "Sugerir categoría", + buttonUploadVoice: "Subir voz (modelo TTS)", + buttonUploadW2lPhoto: "Foto de sincronización de labios (w2l)", // NB: Remove 'Subdir' ~= upload + buttonUploadW2lVideo: "Video de sincronización de labios (w2l)", // NB: Remove 'Subdir' ~= upload + describeMore: + "¿Quiere contribuir con código, diseño o ciencia de datos? <1 />", + describeSuggest: "¡Ayúdanos a organizar los modelos!", + describeUploadModels: + "Crea nuevas voces y plantillas de video para FakeYou. <1 /> para aprender cómo.", + discordLink1: "Únase a nuestro Discord", + discordLink2: "¡Saluda en Discord!", + headingCreateCategory: "Crear categorías", + headingMore: "Más Formas de Contribuir", + headingSuggestCategory: "Sugerir categorías", + headingUploadModels: "Subir Modelos", + heroSubtitle: "Haces FakeYou mejor contribuyendo", + heroTitle: "Contribuir a FakeYou", + introText: + "Recibirás crédito por todo lo que contribuyas. También obtendrá prioridad en la cola, será elegible para ganar premios y nos ayudará a convertirnos en una potencia de herramientas, transmisión y cine de deepfake que acaba con Hollywood.", }, }, ttsListPage: { - by: 'de', - categoryFilters: 'Categoría / Idioma', - loading: 'Cargando...', - search: 'Búsqueda', - searchTerm: 'Término de búsqueda', - seeModelDetails: 'Ver más detalles sobre el modelo "<1>{{modelName}}" de <3>{{userName}}\u{00a0}', - voiceCount: 'Voz ({{count}} para elegir)', - } - } + by: "de", + categoryFilters: "Categoría / Idioma", + loading: "Cargando...", + search: "Búsqueda", + searchTerm: "Término de búsqueda", + seeModelDetails: + 'Ver más detalles sobre el modelo "<1>{{modelName}}" de <3>{{userName}}\u{00a0}', + voiceCount: "Voz ({{count}} para elegir)", + }, + }, }, // ---------- OTHER LANGUAGES ---------- // German: 6.5% Twitch (#4) de: { - translation: { - } + translation: {}, }, // French: 5.6% Twitch (#6) fr: { - translation: { - } + translation: {}, }, // Indonesian 2% FakeYou id: { - translation: { - } + translation: {}, }, // Japanese: 2.5% Twitch (#8) ja: { translation: { coreUi: { topNav: { - community: 'コミュニティ', - contributeUpload: '投稿 / アップロード', - logout: 'ログアウト', - myData: '私のデータ', - signUpLogin: 'サインアップ / ログイン', - video: 'Video', // NB: Katakana here gets forced horizontal for some reason + community: "コミュニティ", + contributeUpload: "投稿 / アップロード", + logout: "ログアウト", + myData: "私のデータ", + signUpLogin: "サインアップ / ログイン", + video: "Video", // NB: Katakana here gets forced horizontal for some reason }, }, pages: { ttsList: { - heroTitle: 'テキスト読み上げ', - heroSubtitle: 'FakeYouディープフェイクテックを使用して、お気に入りのキャラクターと何かを言いましょう。', + heroTitle: "テキスト読み上げ", + heroSubtitle: + "FakeYouディープフェイクテックを使用して、お気に入りのキャラクターと何かを言いましょう。", }, }, ttsListPage: { - categoryFilters: 'カテゴリ / 言語', - loading: '読み込んでいます...', - search: '検索', - searchTerm: '検索語', - speakButton: '話す', - clearButton: 'クリア', - } - } + categoryFilters: "カテゴリ / 言語", + loading: "読み込んでいます...", + search: "検索", + searchTerm: "検索語", + speakButton: "話す", + clearButton: "クリア", + }, + }, }, // Korean: 5.4% Twitch (#7) ko: { - translation: { - } + translation: {}, }, // Portuguese: 6.2% Twitch (#5) pt: { translation: { coreUi: { topNav: { - community: 'Comunidade', - contributeUpload: 'Contribuir / Carregar', - logout: 'Sair', - myData: 'Meus dados', - signUpLogin: 'Inscreva-se / Faça login', - video: 'Vídeo', + community: "Comunidade", + contributeUpload: "Contribuir / Carregar", + logout: "Sair", + myData: "Meus dados", + signUpLogin: "Inscreva-se / Faça login", + video: "Vídeo", }, }, notices: { pleaseFollow: { - title: 'Desculpe, nosso site é tão lento!', + title: "Desculpe, nosso site é tão lento!", body: "Sinto muito que o site esteja lento. Estamos recebendo milhões de solicitações. <1>Por favor, siga-nos no Twitter e também <3>entre no nosso Discord. Vou apresentar um processamento mais rápido (menos de um minuto) para aqueles que nos seguem e ajudam a apoiar nosso trabalho. Então, por favor, siga nosso Twitter e participe do nosso Discord. <5>Nossa nova tecnologia de deepfake de vídeo será lançada no Twitch, então siga-nos lá também.", - } + }, }, pages: { ttsList: { - heroTitle: 'Texto para Fala', - heroSubtitle: 'Use a tecnologia deepfake do FakeYou para dizer coisas com seus personagens favoritos.', - errorTooManyRequests: "Você está enviando muitos pedidos! Desacelere um pouco. Temos que desacelerar um pouco as coisas quando o servidor fica ocupado.", + heroTitle: "Texto para Fala", + heroSubtitle: + "Use a tecnologia deepfake do FakeYou para dizer coisas com seus personagens favoritos.", + errorTooManyRequests: + "Você está enviando muitos pedidos! Desacelere um pouco. Temos que desacelerar um pouco as coisas quando o servidor fica ocupado.", }, }, ttsListPage: { - categoryFilters: 'Categoria / Idioma', - loading: 'Carregando...', - search: 'Procurar', - searchTerm: 'Termo de pesquisa', - speakButton: 'Falar', - clearButton: 'Claro', - } - } + categoryFilters: "Categoria / Idioma", + loading: "Carregando...", + search: "Procurar", + searchTerm: "Termo de pesquisa", + speakButton: "Falar", + clearButton: "Claro", + }, + }, }, // 6.5% Twitch (#3) ru: { - translation: { - } + translation: {}, }, // Turkish: 4% FakeYou (#3) tr: { translation: { pages: { ttsList: { - heroTitle: 'Konuşma Metni', - heroSubtitle: 'En sevdiğiniz karakterlerle bir şeyler söylemek için FakeYou derin sahte teknolojisini kullanın.', + heroTitle: "Konuşma Metni", + heroSubtitle: + "En sevdiğiniz karakterlerle bir şeyler söylemek için FakeYou derin sahte teknolojisini kullanın.", }, }, - } + }, }, -} +}; // TODO: Type these as i18next dictionaries const FAKEYOU_MERGED_TRANSLATIONS: any = MergeDeepDictionary( - NEW_TRANSLATIONS, + NEW_TRANSLATIONS, MergeDeepDictionary(FAKEYOU_TRANSLATIONS, COMMON_TRANSLATIONS) ); -export { FAKEYOU_MERGED_TRANSLATIONS } +export { FAKEYOU_MERGED_TRANSLATIONS }; diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 73d0993712..8c0efb895b 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -103,6 +103,10 @@ styles with important tags: font-weight: 600; } + .fw-medium { + font-weight: 500; + } + .container { max-width: 1080px !important; } @@ -237,7 +241,12 @@ styles with important tags: border-radius: 0px; .panel-inner { - background-color: lighten($panel, 2%); + background-color: lighten($panel, 4%); + } + + .panel-tts-results { + border-radius: 5px; + background-color: lighten($panel, 4%); } .panel-title { @@ -315,6 +324,9 @@ styles with important tags: .form-control { border-radius: 5px; + background-color: $input-dark !important; + border-color: $input-dark !important; + color: $white !important; } .form-control, @@ -623,10 +635,11 @@ styles with important tags: height: 450px; overflow-x: hidden; overflow-y: auto; + overscroll-behavior: contain; } .direct-view-link { - background-color: lighten($panel, 2%); + background-color: lighten($panel, 4%); border: 1px solid #39394c; border-radius: 5px; padding: 11px 16px; @@ -635,6 +648,100 @@ styles with important tags: border-color: lighten(#39394c, 10%); } } + + .input-icon-search { + .form-control-feedback { + padding: 12px 18px; + position: absolute; + z-index: 2; + width: 2.375rem; + // height: 2.375rem; + // line-height: 2.69rem; + text-align: center; + pointer-events: none; + color: $white; + opacity: 0.9; + } + } + + .select-search { + height: 48px; + border-width: 2px; + padding-left: 2.25rem; + padding-right: 0.5rem; + background-color: $input-dark; + border-radius: 50px; + border-color: $input-dark !important; + box-shadow: none; + cursor: pointer; + + &:hover { + background-color: lighten($input-dark, 5%); + border-color: lighten($input-dark, 5%) !important; + } + + &.focused { + border-color: $primary !important; + } + } + + .select-option { + background-color: $input-dark; + cursor: pointer; + padding: 0.5rem 1rem; + + &:hover { + background-color: lighten($input-dark, 8%); + } + } + + .select-input, + .select-value { + color: $white; + } + + .select-placeholder { + color: $white !important; + } + + .select-container { + background: $input-dark; + margin-top: 6px; + padding: 0; + border-radius: 5px; + z-index: 3; + } + + .select-separator { + display: none; + } + + .rounded-50 { + border-radius: 50px; + } + + .modal-content { + background-color: $panel; + border-color: lighten($panel, 8%) !important; + border: 1px solid; + border-radius: 8px; + box-shadow: 0px 9px 33px 1px rgba(19, 19, 27, 0.8); + -webkit-box-shadow: 0px 9px 33px 1px rgba(19, 19, 27, 0.8); + -moz-box-shadow: 0px 9px 33px 1px rgba(19, 19, 27, 0.8); + min-height: 600px; + } + + .modal-header { + border-bottom: 1px solid lighten($panel, 8%); + } + + .modal-backdrop { + background-color: #0d0d14; + } + + .modal-header .btn-close { + filter: brightness(0) invert(1); + } } select { @@ -668,6 +775,7 @@ textarea { &.text-message { font-size: 18px; + font-weight: 300; min-height: 200px !important; } } @@ -697,11 +805,11 @@ textarea { color: $white !important; } -input { - background-color: $input !important; - border-color: $input !important; - color: $white !important; -} +// input { +// background-color: $input !important; +// border-color: $input !important; +// color: $white !important; +// } .img-product { &.img-tts { @@ -737,7 +845,12 @@ input { .zi-2 { position: relative; - z-index: 2; + z-index: 2 !important; +} + +.zi-3 { + position: relative; + z-index: 3 !important; } @media (min-width: 992px) { diff --git a/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsListFc.tsx b/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsListFc.tsx index 9c73de3769..bc91e18e29 100644 --- a/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsListFc.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsListFc.tsx @@ -8,10 +8,9 @@ import { faClock, faLink, faHeadphonesSimple, - faMicrophone, } from "@fortawesome/free-solid-svg-icons"; import { motion } from "framer-motion"; -import { container, item, sessionItem } from "../../../data/animation"; +import { container, sessionItem } from "../../../data/animation"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import { Analytics } from "../../../common/Analytics"; @@ -25,7 +24,7 @@ function SessionTtsInferenceResultListFc(props: Props) { props.ttsInferenceJobs.forEach((job) => { if (!job.maybeResultToken) { - let cssStyle = "alert alert-secondary mx-3 mx-md-0 mb-0"; + let cssStyle = "alert alert-secondary mb-0"; let stateDescription = "Pending..."; switch (job.jobState) { @@ -37,24 +36,24 @@ function SessionTtsInferenceResultListFc(props: Props) { : job.maybeExtraStatusDescription; break; case JobState.STARTED: - cssStyle = "alert alert-success mx-3 mx-md-0 mb-0"; + cssStyle = "alert alert-success mb-0"; stateDescription = job.maybeExtraStatusDescription == null ? "Started..." : job.maybeExtraStatusDescription; break; case JobState.ATTEMPT_FAILED: - cssStyle = "alert alert-danger mx-3 mx-md-0 mb-0"; + cssStyle = "alert alert-danger mb-0"; stateDescription = `Failed ${job.attemptCount} attempt(s). Will retry...`; break; case JobState.COMPLETE_FAILURE: case JobState.DEAD: - cssStyle = "alert alert-danger mx-3 mx-md-0 mb-0"; + cssStyle = "alert alert-danger mb-0"; stateDescription = "Failed Permanently. Please tell us in Discord so we can fix. :("; break; case JobState.COMPLETE_SUCCESS: - cssStyle = "message is-success mx-3 mx-md-0 mb-0"; + cssStyle = "message is-success mb-0"; stateDescription = "Success!"; // Not sure why we're here instead of other branch! break; } @@ -83,7 +82,7 @@ function SessionTtsInferenceResultListFc(props: Props) { */}
@@ -144,7 +143,7 @@ function SessionTtsInferenceResultListFc(props: Props) { !props.sessionSubscriptionsWrapper.hasPaidFeatures() ) { upgradeNotice = ( -
+
{/* Category Dropdowns */} - {/* + {categoryFieldGroups} {/* Model Dropdown */}
+
+
+ + + Clear category filters + +
+ +
+
+ + + + +
+
+ +
+
+ + + + +
+
+
+ +
+ + + +