1berry/wokada-voice-changer
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

remove old gui 2

Browse Source
This commit is contained in:
wataru 2023-06-24 09:02:46 +09:00
parent c333eb188e
commit 4d4b6f2c08
18 changed files with 5 additions and 852 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/demo/dist/assets/gui_settings/RVC.json vendored
View File

@ -2,16 +2,6 @@
"type": "demo",
"id": "RVC",
"front": {
"title": [],
"serverControl": [],
"modelSetting": [],
"lab": [],
"deviceSetting": [],
"qualityControl": [],
"speakerSetting": [],
"converterSetting": [],
"advancedSetting": [],
"modelSlotControl": [
{
"name": "headerArea",
@ -36,17 +26,5 @@
}
}
]
},
"dialogs": {
"license": [
{
"title": "Retrieval-based-Voice-Conversion-WebUI",
"auther": "liujing04",
"contact": "",
"url": "https://github.com/liujing04/Retrieval-based-Voice-Conversion-WebUI",
"license": "MIT"
}
]
}
}

226
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

22
client/demo/public/assets/gui_settings/RVC.json
View File

@ -2,16 +2,6 @@
"type": "demo",
"id": "RVC",
"front": {
"title": [],
"serverControl": [],
"modelSetting": [],
"lab": [],
"deviceSetting": [],
"qualityControl": [],
"speakerSetting": [],
"converterSetting": [],
"advancedSetting": [],
"modelSlotControl": [
{
"name": "headerArea",
@ -36,17 +26,5 @@
}
}
]
},
"dialogs": {
"license": [
{
"title": "Retrieval-based-Voice-Conversion-WebUI",
"auther": "liujing04",
"contact": "",
"url": "https://github.com/liujing04/Retrieval-based-Voice-Conversion-WebUI",
"license": "MIT"
}
]
}
}

40
client/demo/src/001_globalHooks/001_useAppGuiSetting.ts
View File

@ -7,37 +7,10 @@ export type AppGuiDemoSetting = {
type: "demo",
id: ClientType,
front: {
"title": GuiComponentSetting[],
"serverControl": GuiComponentSetting[],
"modelSetting": GuiComponentSetting[],
"deviceSetting": GuiComponentSetting[],
"qualityControl": GuiComponentSetting[],
"speakerSetting": GuiComponentSetting[],
"converterSetting": GuiComponentSetting[],
"advancedSetting": GuiComponentSetting[],
"lab": GuiComponentSetting[],
"modelSlotControl": GuiComponentSetting[],
},
dialogs: {
"license": { title: string, auther: string, contact: string, url: string, license: string }[]
}
}
// export type AppGuiDemoSetting2 = {
// type: "demo",
// id: ClientType,
// front: GuiSectionSetting[],
// dialogs: {
// "license": { title: string, auther: string, contact: string, url: string, license: string }[]
// }
// }
// export type GuiSectionSetting = {
// "title": string,
// "components": GuiComponentSetting[]
// }
export type GuiComponentSetting = {
"name": string,
"options": any
@ -47,20 +20,7 @@ const InitialAppGuiDemoSetting: AppGuiDemoSetting = {
type: "demo",
id: ClientType.MMVCv13,
front: {
"title": [],
"serverControl": [],
"modelSetting": [],
"deviceSetting": [],
"qualityControl": [],
"speakerSetting": [],
"converterSetting": [],
"advancedSetting": [],
"lab": [],
"modelSlotControl": []
},
dialogs: {
"license": [{ title: "", auther: "", contact: "", url: "", license: "MIT" }]
}
}

4
client/demo/src/components/demo/001_GuiStateProvider.tsx
View File

@ -34,7 +34,6 @@ export type StateControls = {
openAdvancedSettingCheckbox: StateControlCheckbox
openLabCheckbox: StateControlCheckbox
showLicenseCheckbox: StateControlCheckbox
showWaitingCheckbox: StateControlCheckbox
showStartingNoticeCheckbox: StateControlCheckbox
showModelSlotManagerCheckbox: StateControlCheckbox
@ -165,7 +164,6 @@ export const GuiStateProvider = ({ children }: Props) => {
const openAdvancedSettingCheckbox = useStateControlCheckbox(OpenAdvancedSettingCheckbox);
const openLabCheckbox = useStateControlCheckbox(OpenLabCheckbox);
const showLicenseCheckbox = useStateControlCheckbox(OpenLicenseDialogCheckbox);
const showWaitingCheckbox = useStateControlCheckbox(OpenWaitingDialogCheckbox);
const showStartingNoticeCheckbox = useStateControlCheckbox(OpenStartingNoticeDialogCheckbox);
const showModelSlotManagerCheckbox = useStateControlCheckbox(OpenModelSlotManagerDialogCheckbox);
@ -187,7 +185,6 @@ export const GuiStateProvider = ({ children }: Props) => {
openAdvancedSettingCheckbox.updateState(false)
showLicenseCheckbox.updateState(false)
showWaitingCheckbox.updateState(false)
@ -233,7 +230,6 @@ export const GuiStateProvider = ({ children }: Props) => {
openAdvancedSettingCheckbox,
openLabCheckbox,
showLicenseCheckbox,
showWaitingCheckbox,
showStartingNoticeCheckbox,
showModelSlotManagerCheckbox,

18
client/demo/src/components/demo/010_Demo.tsx
View File

@ -1,15 +1,6 @@
import React from "react"
import { GuiStateProvider } from "./001_GuiStateProvider";
import { Dialogs } from "./900_Dialogs";
import { TitleArea } from "./100_TitleArea";
import { ServerControl } from "./200_ServerControl";
import { ModelSetting } from "./300_ModelSetting";
import { DeviceSetting } from "./400_DeviceSetting";
import { QualityControl } from "./500_QualityControl";
import { SpeakerSetting } from "./600_SpeakerSetting";
import { ConverterSetting } from "./700_ConverterSetting";
import { AdvancedSetting } from "./800_AdvancedSetting";
import { Lab } from "./a00_Lab";
import { ModelSlotControl } from "./b00_ModelSlotControl";
import { Dialogs2 } from "./910_Dialogs2";
@ -19,16 +10,7 @@ export const Demo = () => {
<div className="main-body">
<Dialogs2 />
<Dialogs />
<TitleArea />
<ModelSlotControl></ModelSlotControl>
<ServerControl />
<ModelSetting />
<SpeakerSetting />
<ConverterSetting />
<DeviceSetting />
<Lab />
<QualityControl />
<AdvancedSetting />
</div>
</GuiStateProvider>
)

22
client/demo/src/components/demo/100_TitleArea.tsx
View File

@ -1,22 +0,0 @@
import React, { useMemo } from "react"
import { generateComponent } from "./002_ComponentGenerator"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
export const TitleArea = () => {
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.title
const titleArea = useMemo(() => {
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{components}
</>
)
}, [])
return titleArea
}

55
client/demo/src/components/demo/200_ServerControl.tsx
View File

@ -1,55 +0,0 @@
import React, { useMemo } from "react"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const ServerControl = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.serverControl
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openServerControlCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const serverControl = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openServerControlCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openServerControlCheckbox.updateState(!guiState.stateControls.openServerControlCheckbox.checked()) }}>
Server Control
</span>
</div>
<div className="partition-content">
{components}
</div>
</div>
</>
)
}, [])
return serverControl
}

55
client/demo/src/components/demo/300_ModelSetting.tsx
View File

@ -1,55 +0,0 @@
import React, { useMemo } from "react"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const ModelSetting = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.modelSetting
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openModelSettingCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const modelSetting = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openModelSettingCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openModelSettingCheckbox.updateState(!guiState.stateControls.openModelSettingCheckbox.checked()) }}>
Model Setting
</span>
<span></span>
</div>
<div className="partition-content">
{components}
</div>
</div>
</>
)
}, [])
return modelSetting
}

56
client/demo/src/components/demo/400_DeviceSetting.tsx
View File

@ -1,56 +0,0 @@
import React, { useMemo } from "react"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const DeviceSetting = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.deviceSetting
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openDeviceSettingCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const deviceSetting = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openDeviceSettingCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openDeviceSettingCheckbox.updateState(!guiState.stateControls.openDeviceSettingCheckbox.checked()) }}>
Device Setting
</span>
<span></span>
</div>
<div className="partition-content">
{components}
</div>
</div>
</>
)
}, [])
return deviceSetting
}

62
client/demo/src/components/demo/500_QualityControl.tsx
View File

@ -1,62 +0,0 @@
import React, { useMemo } from "react"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const QualityControl = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.qualityControl
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openQualityControlCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const deviceSetting = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openQualityControlCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openQualityControlCheckbox.updateState(!guiState.stateControls.openQualityControlCheckbox.checked()) }}>
Quality Control
</span>
<span></span>
</div>
<div className="partition-content">
{components}
{/* <NoiseControlRow />
<GainControlRow />
<F0DetectorRow />
<div className="body-row divider"></div>
<AnalyzerRow />
<SamplingRow />
<SamplingPlayRow /> */}
</div>
</div>
</>
)
}, [])
return deviceSetting
}

55
client/demo/src/components/demo/600_SpeakerSetting.tsx
View File

@ -1,55 +0,0 @@
import React, { useMemo } from "react"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const SpeakerSetting = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.speakerSetting
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openSpeakerSettingCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const deviceSetting = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openSpeakerSettingCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openSpeakerSettingCheckbox.updateState(!guiState.stateControls.openSpeakerSettingCheckbox.checked()) }}>
Speaker Setting
</span>
<span></span>
</div>
<div className="partition-content">
{components}
</div>
</div>
</>
)
}, [])
return deviceSetting
}

57
client/demo/src/components/demo/700_ConverterSetting.tsx
View File

@ -1,57 +0,0 @@
import React, { useMemo } from "react"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const ConverterSetting = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.converterSetting
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openConverterSettingCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const deviceSetting = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openConverterSettingCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openConverterSettingCheckbox.updateState(!guiState.stateControls.openConverterSettingCheckbox.checked()) }}>
Converter Setting
</span>
<span></span>
</div>
<div className="partition-content">
{components}
</div>
</div>
</>
)
}, [])
return deviceSetting
}

54
client/demo/src/components/demo/800_AdvancedSetting.tsx
View File

@ -1,54 +0,0 @@
import React, { useMemo } from "react"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const AdvancedSetting = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.advancedSetting
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openAdvancedSettingCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const deviceSetting = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openAdvancedSettingCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openAdvancedSettingCheckbox.updateState(!guiState.stateControls.openAdvancedSettingCheckbox.checked()) }}>
Advanced Setting
</span>
<span></span>
</div>
<div className="partition-content">
{components}
</div>
</div>
</>
)
}, [])
return deviceSetting
}

4
client/demo/src/components/demo/900_Dialogs.tsx
View File

@ -1,6 +1,5 @@
import React from "react";
import { useGuiState } from "./001_GuiStateProvider";
import { LicenseDialog } from "./901_LicenseDialog";
import { WaitingDialog } from "./902_WaitingDialog";
import { StartingNoticeDialog } from "./903_StartingNoticeDialog";
import { ModelSlotManagerDialog } from "./904_ModelSlotManagerDialog";
@ -11,15 +10,12 @@ export const Dialogs = () => {
const guiState = useGuiState()
const dialogs = (
<div>
{guiState.stateControls.showLicenseCheckbox.trigger}
{guiState.stateControls.showWaitingCheckbox.trigger}
{guiState.stateControls.showStartingNoticeCheckbox.trigger}
{guiState.stateControls.showModelSlotManagerCheckbox.trigger}
{guiState.stateControls.showMergeLabCheckbox.trigger}
{guiState.stateControls.showAdvancedSettingCheckbox.trigger}
<div className="dialog-container" id="dialog">
{guiState.stateControls.showLicenseCheckbox.trigger}
<LicenseDialog></LicenseDialog>
{guiState.stateControls.showWaitingCheckbox.trigger}
<WaitingDialog></WaitingDialog>
{guiState.stateControls.showStartingNoticeCheckbox.trigger}

48
client/demo/src/components/demo/901_LicenseDialog.tsx
View File

@ -1,48 +0,0 @@
import React, { useMemo } from "react";
import { useAppRoot } from "../../001_provider/001_AppRootProvider";
import { useGuiState } from "./001_GuiStateProvider";
export const LicenseDialog = () => {
const { appGuiSettingState } = useAppRoot()
const guiState = useGuiState()
const licenses = appGuiSettingState.appGuiSetting.dialogs.license
const dialog = useMemo(() => {
const closeButtonRow = (
<div className="body-row split-3-4-3 left-padding-1">
<div className="body-item-text">
</div>
<div className="body-button-container body-button-container-space-around">
<div className="body-button" onClick={() => { guiState.stateControls.showLicenseCheckbox.updateState(false) }} >close</div>
</div>
<div className="body-item-text"></div>
</div>
)
const records = licenses.map(x => {
return (
<div key={x.url} className="body-row split-3-4-3 left-padding-1">
<div className="body-item-text">
<a href={x.url} target="_blank" rel="noopener noreferrer">{x.title}</a>
</div>
<div className="body-item-text">
<a href={x.url} target="_blank" rel="noopener noreferrer">{x.auther}({x.contact})</a>
</div>
<div className="body-item-text">{x.license}</div>
</div>
)
})
return (
<div className="dialog-frame">
<div className="dialog-title">License</div>
<div className="dialog-content">
<div className={"dialog-application-title"}>Voice Changer Demo</div>
{records}
{closeButtonRow}
</div>
</div>
);
}, [licenses]);
return dialog;
};

54
client/demo/src/components/demo/a00_Lab.tsx
View File

@ -1,54 +0,0 @@
import React, { useMemo } from "react"
import { useAppRoot } from "../../001_provider/001_AppRootProvider"
import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
import { useGuiState } from "./001_GuiStateProvider"
import { generateComponent } from "./002_ComponentGenerator"
export const Lab = () => {
const guiState = useGuiState()
const { appGuiSettingState } = useAppRoot()
const componentSettings = appGuiSettingState.appGuiSetting.front.lab
const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = {
stateControlCheckbox: guiState.stateControls.openLabCheckbox,
tooltip: "Open/Close",
onIcon: ["fas", "caret-up"],
offIcon: ["fas", "caret-up"],
animation: AnimationTypes.spinner,
tooltipClass: "tooltip-right",
};
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const deviceSetting = useMemo(() => {
if (componentSettings.length == 0) {
return <></>
}
const components = componentSettings.map((x, index) => {
const c = generateComponent(x.name, x.options)
return <div key={`${x.name}_${index}`}>{c}</div>
})
return (
<>
{guiState.stateControls.openLabCheckbox.trigger}
<div className="partition">
<div className="partition-header">
<span className="caret">
{accodionButton}
</span>
<span className="title" onClick={() => { guiState.stateControls.openLabCheckbox.updateState(!guiState.stateControls.openLabCheckbox.checked()) }}>
Labs (Experimental)
</span>
<span></span>
</div>
<div className="partition-content">
{components}
</div>
</div>
</>
)
}, [])
return deviceSetting
}

3
client/demo/src/components/demo/components2/001_HeaderArea.tsx
View File

@ -1,6 +1,5 @@
import React, { useMemo } from "react";
import { INDEXEDDB_KEY_AUDIO_OUTPUT, INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, isDesktopApp } from "../../../const";
import { useGuiState } from "../001_GuiStateProvider";
import { INDEXEDDB_KEY_AUDIO_OUTPUT, isDesktopApp } from "../../../const";
import { useAppRoot } from "../../../001_provider/001_AppRootProvider";
import { useAppState } from "../../../001_provider/001_AppStateProvider";
import { useIndexedDB } from "@dannadori/voice-changer-client-js";