diff --git a/fakeyou/src/App.tsx b/fakeyou/src/App.tsx index abd95fc822..e0bd4dce07 100644 --- a/fakeyou/src/App.tsx +++ b/fakeyou/src/App.tsx @@ -15,7 +15,7 @@ import { TtsModelUploadJob, TtsModelUploadJobStateResponsePayload } from './jobs import { W2lTemplateUploadJob, W2lTemplateUploadJobStateResponsePayload } from './jobs/W2lTemplateUploadJobs'; import { jobStateCanChange } from './jobs/JobStates'; import { TtsModelListItem } from './v2/api/tts/ListTtsModels'; -import { TtsCategory } from './v2/api/category/ListTtsCategories'; +import { TtsCategoryType } from './AppWrapper'; enum MigrationMode { NEW_VOCODES, @@ -27,20 +27,20 @@ interface Props { flashVocodesNotice: boolean, - allTtsCategories: TtsCategory[], - setAllTtsCategories: (allTtsCategories: TtsCategory[]) => void, + allTtsCategories: TtsCategoryType[], + setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void, allTtsModels: TtsModelListItem[], setAllTtsModels: (allTtsModels: TtsModelListItem[]) => void, - allTtsCategoriesByTokenMap: Map, + allTtsCategoriesByTokenMap: Map, allTtsModelsByTokenMap: Map, ttsModelsByCategoryToken: Map>, - dropdownCategories: TtsCategory[][], - setDropdownCategories: (dropdownCategories: TtsCategory[][]) => void, - selectedCategories: TtsCategory[], - setSelectedCategories: (selectedCategories: TtsCategory[]) => void, + dropdownCategories: TtsCategoryType[][], + setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void, + selectedCategories: TtsCategoryType[], + setSelectedCategories: (selectedCategories: TtsCategoryType[]) => void, maybeSelectedTtsModel?: TtsModelListItem, setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void, diff --git a/fakeyou/src/AppWrapper.tsx b/fakeyou/src/AppWrapper.tsx index 3dbf84d677..fc9f3b54a4 100644 --- a/fakeyou/src/AppWrapper.tsx +++ b/fakeyou/src/AppWrapper.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { TtsCategory } from './v2/api/category/ListTtsCategories'; import { TtsModelListItem } from './v2/api/tts/ListTtsModels'; import { App } from './App'; +import { v4 as uuidv4 } from 'uuid'; interface Props { // Certan browsers (iPhone) have pitiful support for drawing APIs. Worse yet, @@ -14,14 +15,35 @@ interface Props { flashVocodesNotice: boolean, } +// Special synthetic categories created on the frontend. +// Used in a union type, but they should play well with `TtsCategory`. +export class SyntheticCategory { + name: string; + name_for_dropdown: string; + category_token: string; + maybe_super_category_token?: string; + + ttsModels: Set; + + constructor(name: string, token?: string, maybe_super_category_token?: string) { + this.name = name; + this.name_for_dropdown = name; + this.category_token = !!token ? token : `syn:${uuidv4()}`; + this.maybe_super_category_token = maybe_super_category_token; + this.ttsModels = new Set(); + } +} + +export type TtsCategoryType = TtsCategory|SyntheticCategory; + export function AppWrapper(props: Props) { // Caches of all objects queried // These may be triggered by a different page than the user initially lands on. - const [allTtsCategories, setAllTtsCategories] = useState([]); + const [allTtsCategories, setAllTtsCategories] = useState([]); const [allTtsModels, setAllTtsModels] = useState([]); // Precalculated maps for lookup by primary key - const [allCategoriesByTokenMap, setAllCategoriesByTokenMap] = useState>(new Map()); + const [allCategoriesByTokenMap, setAllCategoriesByTokenMap] = useState>(new Map()); const [allTtsModelsByTokenMap, setAllTtsModelsByTokenMap] = useState>(new Map()); // Precalculated map for lookup by foreign key @@ -34,13 +56,13 @@ export function AppWrapper(props: Props) { // Outer array has length of at least one, one element per