PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-02-02 16:23:58 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

remove old gui 2

Browse Source
This commit is contained in:
wataru 2023-06-24 09:52:21 +09:00
parent 4d4b6f2c08
commit 6b4fe5a349
18 changed files with 99 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/demo/dist/assets/gui_settings/GUI.json vendored Normal file
View File

@ -0,0 +1,30 @@
{
"type": "demo",
"id": "RVC",
"front": {
"modelSlotControl": [
{
"name": "headerArea",
"options": {
"mainTitle": "Realtime Voice Changer Client",
"subTitle": "for RVC"
}
},
{
"name": "modelSlotArea",
"options": {}
},
{
"name": "characterArea",
"options": {}
},
{
"name": "configArea",
"options": {
"detectors": ["dio", "harvest", "crepe"],
"inputChunkNums": [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048]
}
}
]
}
}

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

File diff suppressed because one or more lines are too long

30
client/demo/public/assets/gui_settings/GUI.json Normal file
View File

@ -0,0 +1,30 @@
{
"type": "demo",
"id": "RVC",
"front": {
"modelSlotControl": [
{
"name": "headerArea",
"options": {
"mainTitle": "Realtime Voice Changer Client",
"subTitle": "for RVC"
}
},
{
"name": "modelSlotArea",
"options": {}
},
{
"name": "characterArea",
"options": {}
},
{
"name": "configArea",
"options": {
"detectors": ["dio", "harvest", "crepe"],
"inputChunkNums": [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048]
}
}
]
}
}

6
client/demo/src/000_index.tsx
View File

@ -38,7 +38,7 @@ const App = () => {
}
const AppStateWrapper = () => {
const { appGuiSettingState, setClientType } = useAppRoot()
const { appGuiSettingState, getGUISetting } = useAppRoot()
const messageBuilderState = useMessageBuilder()
// エラーメッセージ登録
useMemo(() => {
@ -103,7 +103,7 @@ const AppStateWrapper = () => {
useEffect(() => {
const loadDefaultModelType = async () => {
setClientType("RVC")
getGUISetting()
}
loadDefaultModelType()
}, [])
@ -111,7 +111,7 @@ const AppStateWrapper = () => {
if (!appGuiSettingState.guiSettingLoaded) {
return <>a</>
return <>loading...</>
} else {
return (
<ErrorBoundary fallback={errorComponent} onError={updateError}>

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

@ -1,11 +1,7 @@
import { useEffect, useState } from "react"
import { ClientType } from "@dannadori/voice-changer-client-js"
export type AppGuiSetting = AppGuiDemoSetting
export type AppGuiDemoSetting = {
export type AppGuiSetting = {
type: "demo",
id: ClientType,
front: {
"modelSlotControl": GuiComponentSetting[],
}
@ -16,9 +12,8 @@ export type GuiComponentSetting = {
"options": any
}
const InitialAppGuiDemoSetting: AppGuiDemoSetting = {
const InitialAppGuiDemoSetting: AppGuiSetting = {
type: "demo",
id: ClientType.MMVCv13,
front: {
"modelSlotControl": []
}

13
client/demo/src/001_globalHooks/001_useVCClient.ts
View File

@ -1,8 +1,7 @@
import { ClientState, useClient, ClientType } from "@dannadori/voice-changer-client-js"
import { ClientState, useClient } from "@dannadori/voice-changer-client-js"
export type UseVCClientProps = {
audioContext: AudioContext | null
clientType: ClientType | null
}
export type VCClientState = {
@ -11,17 +10,9 @@ export type VCClientState = {
export const useVCClient = (props: UseVCClientProps): VCClientState => {
const clientState = useClient({
audioContext: props.audioContext,
clientType: props.clientType,
audioContext: props.audioContext
})
// const setClientType = (clientType: ClientType) => {
// console.log("SET CLIENT TYPE", clientType)
// clientState.setClientType(clientType)
// }
const ret: VCClientState = {
clientState
}

21
client/demo/src/001_provider/001_AppRootProvider.tsx
View File

@ -1,5 +1,4 @@
import { ClientType } from "@dannadori/voice-changer-client-js";
import React, { useContext, useEffect, useState } from "react";
import React, { useContext } from "react";
import { ReactNode } from "react";
import { AppGuiSettingStateAndMethod, useAppGuiSetting } from "../001_globalHooks/001_useAppGuiSetting";
import { AudioConfigState, useAudioConfig } from "../001_globalHooks/001_useAudioConfig";
@ -11,8 +10,7 @@ type Props = {
type AppRootValue = {
audioContextState: AudioConfigState
appGuiSettingState: AppGuiSettingStateAndMethod
clientType: ClientType | null
setClientType: (val: ClientType | null) => void
getGUISetting: () => Promise<void>
}
const AppRootContext = React.createContext<AppRootValue | null>(null);
@ -28,21 +26,14 @@ export const AppRootProvider = ({ children }: Props) => {
const audioContextState = useAudioConfig()
const appGuiSettingState = useAppGuiSetting()
const [clientType, setClientType] = useState<ClientType | null>(null)
useEffect(() => {
if (!clientType) {
return
}
appGuiSettingState.getAppGuiSetting(`/assets/gui_settings/${clientType}.json`)
}, [clientType])
const getGUISetting = async () => {
await appGuiSettingState.getAppGuiSetting(`/assets/gui_settings/GUI.json`)
}
const providerValue: AppRootValue = {
audioContextState,
appGuiSettingState,
clientType,
setClientType
getGUISetting
};
return <AppRootContext.Provider value={providerValue}>{children}</AppRootContext.Provider>;
};

2
client/demo/src/001_provider/001_AppStateProvider.tsx
View File

@ -25,7 +25,7 @@ export const useAppState = (): AppStateValue => {
export const AppStateProvider = ({ children }: Props) => {
const appRoot = useAppRoot()
const clientState = useVCClient({ audioContext: appRoot.audioContextState.audioContext, clientType: appRoot.clientType })
const clientState = useVCClient({ audioContext: appRoot.audioContextState.audioContext })
const messageBuilderState = useMessageBuilder()
useEffect(() => {

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

@ -87,7 +87,7 @@ type TextInputResolveType = {
}
export const GuiStateProvider = ({ children }: Props) => {
const { clientType, appGuiSettingState } = useAppRoot()
const { appGuiSettingState } = useAppRoot()
const [isConverting, setIsConverting] = useState<boolean>(false)
const [isAnalyzing, setIsAnalyzing] = useState<boolean>(false)
const [modelSlotNum, setModelSlotNum] = useState<number>(0)
@ -214,10 +214,6 @@ export const GuiStateProvider = ({ children }: Props) => {
}, [appGuiSettingState.edition])
useEffect(() => {
setModelSlotNum(0)
}, [clientType])
const providerValue = {
stateControls: {

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

@ -16,8 +16,7 @@ export const HeaderArea = (props: HeaderAreaProps) => {
const messageBuilderState = useMessageBuilder()
const { clearSetting } = useAppState()
const clientType = appGuiSettingState.appGuiSetting.id
const { removeItem } = useIndexedDB({ clientType: clientType })
const { removeItem } = useIndexedDB({ clientType: null })
useMemo(() => {
messageBuilderState.setMessage(__filename, "github", { "ja": "github", "en": "github" })

18
client/lib/src/ServerConfigurator.ts
View File

@ -1,4 +1,4 @@
import { ClientType, MergeModelRequest, OnnxExporterInfo, ServerInfo, ServerSettingKey } from "./const";
import { MergeModelRequest, OnnxExporterInfo, ServerInfo, ServerSettingKey } from "./const";
type FileChunk = {
@ -204,22 +204,6 @@ export class ServerConfigurator {
return await info
}
switchModelType = async (clinetType: ClientType) => {
const url = this.serverUrl + "/model_type"
const info = new Promise<ServerInfo>(async (resolve) => {
const formData = new FormData();
formData.append("modelType", clinetType);
const request = new Request(url, {
method: 'POST',
body: formData,
});
const res = await (await fetch(request)).json() as ServerInfo
resolve(res)
})
return await info
}
getModelType = async () => {
const url = this.serverUrl + "/model_type"
const info = new Promise<ServerInfo>(async (resolve) => {

5
client/lib/src/VoiceChangerClient.ts
View File

@ -3,7 +3,7 @@ import { VoiceChangerWorkletNode, VoiceChangerWorkletListener } from "./VoiceCha
import workerjs from "raw-loader!../worklet/dist/index.js";
import { VoiceFocusDeviceTransformer, VoiceFocusTransformDevice } from "amazon-chime-sdk-js";
import { createDummyMediaStream, validateUrl } from "./util";
import { ClientType, DefaultVoiceChangerClientSetting, MergeModelRequest, ServerSettingKey, VoiceChangerClientSetting, WorkletNodeSetting, WorkletSetting } from "./const";
import { DefaultVoiceChangerClientSetting, MergeModelRequest, ServerSettingKey, VoiceChangerClientSetting, WorkletNodeSetting, WorkletSetting } from "./const";
import { ServerConfigurator } from "./ServerConfigurator";
// オーディオデータの流れ
@ -265,9 +265,6 @@ export class VoiceChangerClient {
// コンポーネント設定、操作
/////////////////////////////////////////////////////
//## Server ##//
switchModelType = (clientType: ClientType) => {
return this.configurator.switchModelType(clientType)
}
getModelType = () => {
return this.configurator.getModelType()
}

11
client/lib/src/const.ts
View File

@ -4,17 +4,6 @@
// 24000sample -> 1sec, 128sample(1chunk) -> 5.333msec
// 187.5chunk -> 1sec
export const ClientType = {
"MMVCv15": "MMVCv15",
"MMVCv13": "MMVCv13",
"so-vits-svc-40": "so-vits-svc-40",
"DDSP-SVC": "DDSP-SVC",
"RVC": "RVC"
} as const
export type ClientType = typeof ClientType[keyof typeof ClientType]
export const VoiceChangerType = {
"MMVCv15": "MMVCv15",
"MMVCv13": "MMVCv13",

10
client/lib/src/hooks/useClient.ts
View File

@ -1,5 +1,4 @@
import { useEffect, useMemo, useRef, useState } from "react"
import { ClientType } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient"
import { ClientSettingState, useClientSetting } from "./useClientSetting"
import { IndexedDBStateAndMethod, useIndexedDB } from "./useIndexedDB"
@ -9,7 +8,6 @@ import { useWorkletSetting, WorkletSettingState } from "./useWorkletSetting"
export type UseClientProps = {
audioContext: AudioContext | null
clientType: ClientType | null
}
export type ClientState = {
@ -69,11 +67,11 @@ export const useClient = (props: UseClientProps): ClientState => {
// (1-2) 各種設定I/F
const clientSetting = useClientSetting({ clientType: props.clientType, voiceChangerClient, audioContext: props.audioContext })
const workletNodeSetting = useWorkletNodeSetting({ clientType: props.clientType, voiceChangerClient })
const workletSetting = useWorkletSetting({ clientType: props.clientType, voiceChangerClient })
const clientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext })
const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient })
const workletSetting = useWorkletSetting({ voiceChangerClient })
const serverSetting = useServerSetting({ voiceChangerClient })
const indexedDBState = useIndexedDB({ clientType: props.clientType })
const indexedDBState = useIndexedDB({ clientType: null })
// (1-3) モニタリングデータ

5
client/lib/src/hooks/useClientSetting.ts
View File

@ -1,11 +1,10 @@
import { useState, useMemo, useEffect } from "react"
import { VoiceChangerClientSetting, DefaultVoiceChangerClientSetting, INDEXEDDB_KEY_CLIENT, ClientType } from "../const"
import { VoiceChangerClientSetting, DefaultVoiceChangerClientSetting, INDEXEDDB_KEY_CLIENT } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient"
import { useIndexedDB } from "./useIndexedDB"
export type UseClientSettingProps = {
clientType: ClientType | null
voiceChangerClient: VoiceChangerClient | null
audioContext: AudioContext | null
}
@ -23,7 +22,7 @@ export type ClientSettingState = {
export const useClientSetting = (props: UseClientSettingProps): ClientSettingState => {
const [clientSetting, setClientSetting] = useState<VoiceChangerClientSetting>(DefaultVoiceChangerClientSetting)
const { setItem, getItem, removeItem } = useIndexedDB({ clientType: props.clientType })
const { setItem, getItem, removeItem } = useIndexedDB({ clientType: null })
// 初期化 その１ DBから取得
useEffect(() => {

4
client/lib/src/hooks/useIndexedDB.ts
View File

@ -1,9 +1,9 @@
import localForage from "localforage";
import { useMemo } from "react";
import { ClientType, INDEXEDDB_DB_APP_NAME, INDEXEDDB_DB_NAME } from "../const";
import { INDEXEDDB_DB_APP_NAME, INDEXEDDB_DB_NAME } from "../const";
export type UseIndexedDBProps = {
clientType: ClientType | null
clientType: null
}
export type IndexedDBState = {
dummy: string

19
client/lib/src/hooks/useWorkletNodeSetting.ts
View File

@ -1,11 +1,10 @@
import { useState, useMemo, useEffect } from "react"
import { ClientType, DefaultWorkletNodeSetting, DefaultWorkletNodeSetting_DDSP_SVC, DefaultWorkletNodeSetting_RVC, DefaultWorkletNodeSetting_so_vits_svc_40, INDEXEDDB_KEY_WORKLETNODE, WorkletNodeSetting } from "../const"
import { DefaultWorkletNodeSetting, INDEXEDDB_KEY_WORKLETNODE, WorkletNodeSetting } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient"
import { useIndexedDB } from "./useIndexedDB"
export type UseWorkletNodeSettingProps = {
clientType: ClientType | null
voiceChangerClient: VoiceChangerClient | null
}
@ -20,23 +19,11 @@ export type WorkletNodeSettingState = {
export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): WorkletNodeSettingState => {
const defaultWorkletNodeSetting = useMemo(() => {
if (props.clientType == "MMVCv13") {
return DefaultWorkletNodeSetting
} else if (props.clientType == "MMVCv15") {
return DefaultWorkletNodeSetting
} else if (props.clientType == "so-vits-svc-40") {
return DefaultWorkletNodeSetting_so_vits_svc_40
} else if (props.clientType == "DDSP-SVC") {
return DefaultWorkletNodeSetting_DDSP_SVC
} else if (props.clientType == "RVC") {
return DefaultWorkletNodeSetting_RVC
} else {
return DefaultWorkletNodeSetting
}
return DefaultWorkletNodeSetting
}, [])
const [workletNodeSetting, _setWorkletNodeSetting] = useState<WorkletNodeSetting>(defaultWorkletNodeSetting)
const { setItem, getItem, removeItem } = useIndexedDB({ clientType: props.clientType })
const { setItem, getItem, removeItem } = useIndexedDB({ clientType: null })
// 初期化 その１ DBから取得
useEffect(() => {

5
client/lib/src/hooks/useWorkletSetting.ts
View File

@ -1,10 +1,9 @@
import { useState, useMemo, useEffect } from "react"
import { WorkletSetting, DefaultWorkletSetting, INDEXEDDB_KEY_WORKLET, ClientType } from "../const";
import { WorkletSetting, DefaultWorkletSetting, INDEXEDDB_KEY_WORKLET } from "../const";
import { VoiceChangerClient } from "../VoiceChangerClient";
import { useIndexedDB } from "./useIndexedDB";
export type UseWorkletSettingProps = {
clientType: ClientType | null
voiceChangerClient: VoiceChangerClient | null
}
@ -17,7 +16,7 @@ export type WorkletSettingState = {
export const useWorkletSetting = (props: UseWorkletSettingProps): WorkletSettingState => {
const [setting, _setSetting] = useState<WorkletSetting>(DefaultWorkletSetting)
const { setItem, getItem, removeItem } = useIndexedDB({ clientType: props.clientType })
const { setItem, getItem, removeItem } = useIndexedDB({ clientType: null })
// DBから設定取得（キャッシュによる初期化）
useEffect(() => {
const loadCache = async () => {