separate indexeddb by model type

client/demo_v13/src/000_index.tsx

@@ -5,7 +5,6 @@ import { ErrorInfo, useMemo, useState, } from "react";
 import { useMicrophoneOptions } from "./100_options_microphone";
 import { AppStateProvider, useAppState } from "./001_provider/001_AppStateProvider";
 
-import localForage from "localforage";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
@@ -13,7 +12,7 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
 import { AppRootProvider } from "./001_provider/001_AppRootProvider";
 import ErrorBoundary from "./001_provider/900_ErrorBoundary";
 import { INDEXEDDB_KEY_CLIENT, INDEXEDDB_KEY_MODEL_DATA, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_WORKLET, INDEXEDDB_KEY_WORKLETNODE, useIndexedDB } from "@dannadori/voice-changer-client-js";
-import { INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const";
+import { CLIENT_TYPE, INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const";
 
 library.add(fas, far, fab);
 
@@ -23,7 +22,7 @@ const root = createRoot(container);
 
 const App = () => {
     const appState = useAppState()
-    const { removeItem } = useIndexedDB()
+    const { removeItem } = useIndexedDB({ clientType: CLIENT_TYPE })
     const { voiceChangerSetting } = useMicrophoneOptions()
     const titleRow = useMemo(() => {
         return (
@@ -93,14 +92,7 @@ const App = () => {
 const AppStateWrapper = () => {
     // エラーバウンダリー設定
     const [error, setError] = useState<{ error: Error, errorInfo: ErrorInfo }>()
-    const { removeItem } = useIndexedDB()
+    const { removeItem } = useIndexedDB({ clientType: CLIENT_TYPE })
-    // localForage.config({
-    //     driver: localForage.INDEXEDDB,
-    //     name: INDEXEDDB_DB_APP_NAME,
-    //     version: 1.0,
-    //     storeName: INDEXEDDB_DB_NAME,
-    //     description: 'appStorage'
-    // })
 
     const errorComponent = useMemo(() => {
         const errorName = error?.error.name || "no error name"

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

@@ -1,5 +1,5 @@
 import { ClientState, useClient } from "@dannadori/voice-changer-client-js"
-import { AUDIO_ELEMENT_FOR_PLAY_RESULT } from "../const"
+import { AUDIO_ELEMENT_FOR_PLAY_RESULT, CLIENT_TYPE } from "../const"
 
 export type UseVCClientProps = {
     audioContext: AudioContext | null
@@ -12,6 +12,7 @@ export type VCClientState = {
 export const useVCClient = (props: UseVCClientProps) => {
 
     const clientState = useClient({
+        clientType: CLIENT_TYPE,
         audioContext: props.audioContext,
         audioOutputElementId: AUDIO_ELEMENT_FOR_PLAY_RESULT
     })

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

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from "react";
+import React, { useContext } from "react";
 import { ReactNode } from "react";
 import { AudioConfigState, useAudioConfig } from "../001_globalHooks/001_useAudioConfig";
 

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

@@ -1,7 +1,7 @@
 import { ClientState } from "@dannadori/voice-changer-client-js";
 import React, { useContext, useEffect, useRef } from "react";
 import { ReactNode } from "react";
-import { useVCClient, VCClientState } from "../001_globalHooks/001_useVCClient";
+import { useVCClient } from "../001_globalHooks/001_useVCClient";
 import { FrontendManagerStateAndMethod, useFrontendManager } from "../001_globalHooks/010_useFrontendManager";
 import { useAppRoot } from "./001_AppRootProvider";
 

client/demo_v13/src/001_provider/900_ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, ErrorInfo } from 'react';
+import React, { ErrorInfo } from 'react';
 
 type ErrorBoundaryProps = {
     children: React.ReactNode;

client/demo_v13/src/103_device_setting.tsx

@@ -1,6 +1,6 @@
 import { fileSelectorAsDataURL, useIndexedDB } from "@dannadori/voice-changer-client-js"
 import React, { useEffect, useMemo, useRef, useState } from "react"
-import { AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL, INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const"
+import { AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL, CLIENT_TYPE, INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const"
 import { useAppState } from "./001_provider/001_AppStateProvider";
 import { AnimationTypes, HeaderButton, HeaderButtonProps } from "./components/101_HeaderButton";
 
@@ -71,7 +71,7 @@ export const useDeviceSetting = (): DeviceSettingState => {
     const [audioInputForGUI, setAudioInputForGUI] = useState<string>("none")
     const [audioOutputForGUI, setAudioOutputForGUI] = useState<string>("none")
     const [fileInputEchoback, setFileInputEchoback] = useState<boolean>()//最初のmuteが有効になるように。undefined
-    const { getItem, setItem } = useIndexedDB()
+    const { getItem, setItem } = useIndexedDB({ clientType: CLIENT_TYPE })
 
     const audioSrcNode = useRef<MediaElementAudioSourceNode>()
 

client/demo_v13/src/104_qulity_control.tsx

@@ -1,4 +1,3 @@
-import { F0Detector } from "@dannadori/voice-changer-client-js"
 import React, { useEffect, useMemo, useState } from "react"
 import { useAppState } from "./001_provider/001_AppStateProvider";
 import { AnimationTypes, HeaderButton, HeaderButtonProps } from "./components/101_HeaderButton";

client/demo_v13/src/105_speaker_setting.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react"
+import React, { useMemo, useState } from "react"
 import { useAppState } from "./001_provider/001_AppStateProvider";
 import { AnimationTypes, HeaderButton, HeaderButtonProps } from "./components/101_HeaderButton";
 

client/demo_v13/src/const.ts

@@ -1,4 +1,6 @@
-export const CHROME_EXTENSION = false
+import { ClientType } from "@dannadori/voice-changer-client-js"
+
+export const CLIENT_TYPE = ClientType.MMVCv13
 
 export const AUDIO_ELEMENT_FOR_PLAY_RESULT = "audio-result"
 export const AUDIO_ELEMENT_FOR_TEST_ORIGINAL = "audio-test-original"

client/demo_v15/dist/index.html

@@ -1 +1,10 @@
-<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html>
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%; overflow: hidden">
+    <head>
+        <meta charset="utf-8" />
+        <title>Voice Changer Client Demo</title>
+    <script defer src="index.js"></script></head>
+    <body style="width: 100%; height: 100%; margin: 0px">
+        <div id="app" style="width: 100%; height: 100%"></div>
+    </body>
+</html>

client/demo_v15/src/000_index.tsx

@@ -5,7 +5,6 @@ import { ErrorInfo, useMemo, useState, } from "react";
 import { useMicrophoneOptions } from "./100_options_microphone";
 import { AppStateProvider, useAppState } from "./001_provider/001_AppStateProvider";
 
-import localForage from "localforage";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
@@ -13,7 +12,7 @@ import { fab } from "@fortawesome/free-brands-svg-icons";
 import { AppRootProvider } from "./001_provider/001_AppRootProvider";
 import ErrorBoundary from "./001_provider/900_ErrorBoundary";
 import { INDEXEDDB_KEY_CLIENT, INDEXEDDB_KEY_MODEL_DATA, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_WORKLET, INDEXEDDB_KEY_WORKLETNODE, useIndexedDB } from "@dannadori/voice-changer-client-js";
-import { INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const";
+import { CLIENT_TYPE, INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const";
 
 library.add(fas, far, fab);
 
@@ -23,7 +22,7 @@ const root = createRoot(container);
 
 const App = () => {
     const appState = useAppState()
-    const { removeItem } = useIndexedDB()
+    const { removeItem } = useIndexedDB({ clientType: CLIENT_TYPE })
     const { voiceChangerSetting } = useMicrophoneOptions()
     const titleRow = useMemo(() => {
         return (
@@ -93,14 +92,7 @@ const App = () => {
 const AppStateWrapper = () => {
     // エラーバウンダリー設定
     const [error, setError] = useState<{ error: Error, errorInfo: ErrorInfo }>()
-    const { removeItem } = useIndexedDB()
+    const { removeItem } = useIndexedDB({ clientType: CLIENT_TYPE })
-    // localForage.config({
-    //     driver: localForage.INDEXEDDB,
-    //     name: INDEXEDDB_DB_APP_NAME,
-    //     version: 1.0,
-    //     storeName: INDEXEDDB_DB_NAME,
-    //     description: 'appStorage'
-    // })
 
     const errorComponent = useMemo(() => {
         const errorName = error?.error.name || "no error name"

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

@@ -1,5 +1,5 @@
 import { ClientState, useClient } from "@dannadori/voice-changer-client-js"
-import { AUDIO_ELEMENT_FOR_PLAY_RESULT } from "../const"
+import { AUDIO_ELEMENT_FOR_PLAY_RESULT, CLIENT_TYPE } from "../const"
 
 export type UseVCClientProps = {
     audioContext: AudioContext | null
@@ -12,6 +12,7 @@ export type VCClientState = {
 export const useVCClient = (props: UseVCClientProps) => {
 
     const clientState = useClient({
+        clientType: CLIENT_TYPE,
         audioContext: props.audioContext,
         audioOutputElementId: AUDIO_ELEMENT_FOR_PLAY_RESULT
     })

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

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from "react";
+import React, { useContext } from "react";
 import { ReactNode } from "react";
 import { AudioConfigState, useAudioConfig } from "../001_globalHooks/001_useAudioConfig";
 

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

@@ -1,7 +1,7 @@
 import { ClientState } from "@dannadori/voice-changer-client-js";
 import React, { useContext, useEffect, useRef } from "react";
 import { ReactNode } from "react";
-import { useVCClient, VCClientState } from "../001_globalHooks/001_useVCClient";
+import { useVCClient } from "../001_globalHooks/001_useVCClient";
 import { FrontendManagerStateAndMethod, useFrontendManager } from "../001_globalHooks/010_useFrontendManager";
 import { useAppRoot } from "./001_AppRootProvider";
 

client/demo_v15/src/001_provider/900_ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React, { createRef, ErrorInfo } from 'react';
+import React, { ErrorInfo } from 'react';
 
 type ErrorBoundaryProps = {
     children: React.ReactNode;

client/demo_v15/src/103_device_setting.tsx

@@ -1,6 +1,6 @@
 import { fileSelectorAsDataURL, useIndexedDB } from "@dannadori/voice-changer-client-js"
 import React, { useEffect, useMemo, useRef, useState } from "react"
-import { AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL, INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const"
+import { AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL, CLIENT_TYPE, INDEXEDDB_KEY_AUDIO_OUTPUT } from "./const"
 import { useAppState } from "./001_provider/001_AppStateProvider";
 import { AnimationTypes, HeaderButton, HeaderButtonProps } from "./components/101_HeaderButton";
 
@@ -71,7 +71,7 @@ export const useDeviceSetting = (): DeviceSettingState => {
     const [audioInputForGUI, setAudioInputForGUI] = useState<string>("none")
     const [audioOutputForGUI, setAudioOutputForGUI] = useState<string>("none")
     const [fileInputEchoback, setFileInputEchoback] = useState<boolean>()//最初のmuteが有効になるように。undefined
-    const { getItem, setItem } = useIndexedDB()
+    const { getItem, setItem } = useIndexedDB({ clientType: CLIENT_TYPE })
 
     const audioSrcNode = useRef<MediaElementAudioSourceNode>()
 

client/demo_v15/src/const.ts

@@ -1,4 +1,6 @@
-export const CHROME_EXTENSION = false
+import { ClientType } from "@dannadori/voice-changer-client-js"
+
+export const CLIENT_TYPE = ClientType.MMVCv15
 
 export const AUDIO_ELEMENT_FOR_PLAY_RESULT = "audio-result"
 export const AUDIO_ELEMENT_FOR_TEST_ORIGINAL = "audio-test-original"

client/lib/src/const.ts

@@ -4,6 +4,13 @@
 // 24000sample -> 1sec, 128sample(1chunk) -> 5.333msec
 // 187.5chunk -> 1sec
 
+export const ClientType = {
+    "MMVCv15": "MMVCv15",
+    "MMVCv13": "MMVCv13",
+    "so-vits-svc": "so-vits-svc",
+} as const
+export type ClientType = typeof ClientType[keyof typeof ClientType]
+
 ///////////////////////
 // サーバセッティング
 ///////////////////////

client/lib/src/hooks/useClient.ts

@@ -1,6 +1,8 @@
 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"
 import { ServerSettingState, useServerSetting } from "./useServerSetting"
 import { useWorkletNodeSetting, WorkletNodeSettingState } from "./useWorkletNodeSetting"
 import { useWorkletSetting, WorkletSettingState } from "./useWorkletSetting"
@@ -8,6 +10,7 @@ import { useWorkletSetting, WorkletSettingState } from "./useWorkletSetting"
 export type UseClientProps = {
     audioContext: AudioContext | null
     audioOutputElementId: string
+    clientType: ClientType
 }
 
 export type ClientState = {
@@ -17,6 +20,7 @@ export type ClientState = {
     clientSetting: ClientSettingState
     workletNodeSetting: WorkletNodeSettingState
     serverSetting: ServerSettingState
+    indexedDBState: IndexedDBStateAndMethod
 
     // モニタリングデータ
     bufferingTime: number;
@@ -58,10 +62,12 @@ export const useClient = (props: UseClientProps): ClientState => {
 
 
     // (1-2) 各種設定I/F
-    const clientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext })
+    const clientSetting = useClientSetting({ clientType: props.clientType, voiceChangerClient, audioContext: props.audioContext })
-    const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient })
+    const workletNodeSetting = useWorkletNodeSetting({ clientType: props.clientType, voiceChangerClient })
-    const workletSetting = useWorkletSetting({ voiceChangerClient })
+    const workletSetting = useWorkletSetting({ clientType: props.clientType, voiceChangerClient })
-    const serverSetting = useServerSetting({ voiceChangerClient })
+    const serverSetting = useServerSetting({ clientType: props.clientType, voiceChangerClient })
+    const indexedDBState = useIndexedDB({ clientType: props.clientType })
+
 
     // (1-3) モニタリングデータ
     const [bufferingTime, setBufferingTime] = useState<number>(0)
@@ -142,6 +148,7 @@ export const useClient = (props: UseClientProps): ClientState => {
         workletNodeSetting,
         workletSetting,
         serverSetting,
+        indexedDBState,
 
         // モニタリングデータ
         bufferingTime,

client/lib/src/hooks/useClientSetting.ts

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

client/lib/src/hooks/useIndexedDB.ts

@@ -1,8 +1,10 @@
 import localForage from "localforage";
 import { useMemo } from "react";
-import { INDEXEDDB_DB_APP_NAME, INDEXEDDB_DB_NAME } from "../const";
+import { ClientType, INDEXEDDB_DB_APP_NAME, INDEXEDDB_DB_NAME } from "../const";
-
 
+export type UseIndexedDBProps = {
+    clientType: ClientType
+}
 export type IndexedDBState = {
     dummy: string
 }
@@ -13,12 +15,12 @@ export type IndexedDBStateAndMethod = IndexedDBState & {
     // clearAll: () => Promise<void>
 }
 
-export const useIndexedDB = (): IndexedDBStateAndMethod => {
+export const useIndexedDB = (props: UseIndexedDBProps): IndexedDBStateAndMethod => {
     localForage.config({
         driver: localForage.INDEXEDDB,
         name: INDEXEDDB_DB_APP_NAME,
         version: 1.0,
-        storeName: INDEXEDDB_DB_NAME,
+        storeName: `${INDEXEDDB_DB_NAME}_${props.clientType}`,
         description: 'appStorage'
 
     })

client/lib/src/hooks/useServerSetting.ts

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from "react"
-import { VoiceChangerServerSetting, ServerInfo, ServerSettingKey, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_MODEL_DATA, DefaultServerSetting } from "../const"
+import { VoiceChangerServerSetting, ServerInfo, ServerSettingKey, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_MODEL_DATA, DefaultServerSetting, ClientType } from "../const"
 import { VoiceChangerClient } from "../VoiceChangerClient"
 import { useIndexedDB } from "./useIndexedDB"
 
@@ -23,6 +23,7 @@ const InitialFileUploadSetting: FileUploadSetting = {
 }
 
 export type UseServerSettingProps = {
+    clientType: ClientType
     voiceChangerClient: VoiceChangerClient | null
 }
 
@@ -44,7 +45,7 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
     // const settingRef = useRef<VoiceChangerServerSetting>(DefaultVoiceChangerServerSetting)
     const [serverSetting, setServerSetting] = useState<ServerInfo>(DefaultServerSetting)
     const [fileUploadSetting, setFileUploadSetting] = useState<FileUploadSetting>(InitialFileUploadSetting)
-    const { setItem, getItem, removeItem } = useIndexedDB()
+    const { setItem, getItem, removeItem } = useIndexedDB({ clientType: props.clientType })
 
 
     // DBから設定取得（キャッシュによる初期化）

client/lib/src/hooks/useWorkletNodeSetting.ts

@@ -1,10 +1,11 @@
 import { useState, useMemo, useEffect } from "react"
 
-import { DefaultWorkletNodeSetting, INDEXEDDB_KEY_WORKLETNODE, WorkletNodeSetting } from "../const"
+import { ClientType, DefaultWorkletNodeSetting, INDEXEDDB_KEY_WORKLETNODE, WorkletNodeSetting } from "../const"
 import { VoiceChangerClient } from "../VoiceChangerClient"
 import { useIndexedDB } from "./useIndexedDB"
 
 export type UseWorkletNodeSettingProps = {
+    clientType: ClientType
     voiceChangerClient: VoiceChangerClient | null
 }
 
@@ -19,7 +20,7 @@ export type WorkletNodeSettingState = {
 
 export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): WorkletNodeSettingState => {
     const [workletNodeSetting, _setWorkletNodeSetting] = useState<WorkletNodeSetting>(DefaultWorkletNodeSetting)
-    const { setItem, getItem, removeItem } = useIndexedDB()
+    const { setItem, getItem, removeItem } = useIndexedDB({ clientType: props.clientType })
 
     // 初期化 その１ DBから取得
     useEffect(() => {

client/lib/src/hooks/useWorkletSetting.ts

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