remove old gui 2

client/demo/dist/assets/gui_settings/GUI.json

@@ -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]
+                }
+            }
+        ]
+    }
+}

client/demo/public/assets/gui_settings/GUI.json

@@ -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]
+                }
+            }
+        ]
+    }
+}

client/demo/src/000_index.tsx

@@ -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}>

client/demo/src/001_globalHooks/001_useAppGuiSetting.ts

@@ -1,11 +1,7 @@
 import { useEffect, useState } from "react"
-import { ClientType } from "@dannadori/voice-changer-client-js"
 
-export type AppGuiSetting = AppGuiDemoSetting
+export type AppGuiSetting = {
-
-export type AppGuiDemoSetting = {
     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": []
     }

client/demo/src/001_globalHooks/001_useVCClient.ts

@@ -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,
+        audioContext: props.audioContext
-        clientType: props.clientType,
-
     })
 
-
-    // const setClientType = (clientType: ClientType) => {
-    //     console.log("SET CLIENT TYPE", clientType)
-    //     clientState.setClientType(clientType)
-    // }
-
     const ret: VCClientState = {
         clientState
     }

client/demo/src/001_provider/001_AppRootProvider.tsx

@@ -1,5 +1,4 @@
-import { ClientType } from "@dannadori/voice-changer-client-js";
+import React, { useContext } from "react";
-import React, { useContext, useEffect, useState } 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
+    getGUISetting: () => Promise<void>
-    setClientType: (val: ClientType | null) => 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,
+        getGUISetting
-        setClientType
     };
     return <AppRootContext.Provider value={providerValue}>{children}</AppRootContext.Provider>;
 };

client/demo/src/001_provider/001_AppStateProvider.tsx

@@ -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(() => {

client/demo/src/components/demo/001_GuiStateProvider.tsx

@@ -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: {

client/demo/src/components/demo/components2/001_HeaderArea.tsx

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

client/lib/src/ServerConfigurator.ts

@@ -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) => {

client/lib/src/VoiceChangerClient.ts

@@ -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()
     }

client/lib/src/const.ts

@@ -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",

client/lib/src/hooks/useClient.ts

@@ -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 clientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext })
-    const workletNodeSetting = useWorkletNodeSetting({ clientType: props.clientType, voiceChangerClient })
+    const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient })
-    const workletSetting = useWorkletSetting({ clientType: props.clientType, voiceChangerClient })
+    const workletSetting = useWorkletSetting({ voiceChangerClient })
     const serverSetting = useServerSetting({ voiceChangerClient })
-    const indexedDBState = useIndexedDB({ clientType: props.clientType })
+    const indexedDBState = useIndexedDB({ clientType: null })
 
 
     // (1-3) モニタリングデータ

client/lib/src/hooks/useClientSetting.ts

@@ -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(() => {

client/lib/src/hooks/useIndexedDB.ts

@@ -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

client/lib/src/hooks/useWorkletNodeSetting.ts

@@ -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
-            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
-        }
     }, [])
 
     const [workletNodeSetting, _setWorkletNodeSetting] = useState<WorkletNodeSetting>(defaultWorkletNodeSetting)
-    const { setItem, getItem, removeItem } = useIndexedDB({ clientType: props.clientType })
+    const { setItem, getItem, removeItem } = useIndexedDB({ clientType: null })
 
     // 初期化 その１ DBから取得
     useEffect(() => {

client/lib/src/hooks/useWorkletSetting.ts

@@ -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 () => {