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

separate indexeddb by model type

Browse Source
This commit is contained in:
wataru 2023-03-09 06:47:11 +09:00
parent bdf11d9206
commit 85e51bd3a9
27 changed files with 968 additions and 2733 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/demo_v13/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

14
client/demo_v13/src/000_index.tsx
View File

@ -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()
// localForage.config({
// driver: localForage.INDEXEDDB,
// name: INDEXEDDB_DB_APP_NAME,
// version: 1.0,
// storeName: INDEXEDDB_DB_NAME,
// description: 'appStorage'
// })
const { removeItem } = useIndexedDB({ clientType: CLIENT_TYPE })
const errorComponent = useMemo(() => {
const errorName = error?.error.name || "no error name"

3
client/demo_v13/src/001_globalHooks/001_useVCClient.ts
View File

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

2
client/demo_v13/src/001_provider/001_AppRootProvider.tsx
View File

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

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

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

2
client/demo_v13/src/001_provider/900_ErrorBoundary.tsx
View File

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

4
client/demo_v13/src/103_device_setting.tsx
View File

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

1
client/demo_v13/src/104_qulity_control.tsx
View File

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

2
client/demo_v13/src/105_speaker_setting.tsx
View File

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

4
client/demo_v13/src/const.ts
View File

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

11
client/demo_v15/dist/index.html vendored
View File

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

892
client/demo_v15/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

2671
client/demo_v15/dist/index.js.LICENSE.txt vendored
View File

File diff suppressed because it is too large Load Diff

14
client/demo_v15/src/000_index.tsx
View File

@ -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()
// localForage.config({
// driver: localForage.INDEXEDDB,
// name: INDEXEDDB_DB_APP_NAME,
// version: 1.0,
// storeName: INDEXEDDB_DB_NAME,
// description: 'appStorage'
// })
const { removeItem } = useIndexedDB({ clientType: CLIENT_TYPE })
const errorComponent = useMemo(() => {
const errorName = error?.error.name || "no error name"

3
client/demo_v15/src/001_globalHooks/001_useVCClient.ts
View File

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

2
client/demo_v15/src/001_provider/001_AppRootProvider.tsx
View File

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

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

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

2
client/demo_v15/src/001_provider/900_ErrorBoundary.tsx
View File

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

4
client/demo_v15/src/103_device_setting.tsx
View File

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

4
client/demo_v15/src/const.ts
View File

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

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

@ -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]
///////////////////////
// サーバセッティング
///////////////////////

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

@ -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 workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient })
const workletSetting = useWorkletSetting({ voiceChangerClient })
const serverSetting = useServerSetting({ voiceChangerClient })
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 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,

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

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

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

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

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

@ -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から設定取得（キャッシュによる初期化）

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

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

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

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