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

store stting 4

Browse Source
This commit is contained in:
wataru 2023-01-29 15:25:44 +09:00
parent ac967fdea1
commit 877d6c3c8e
10 changed files with 106 additions and 644 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1 @@
<!DOCTYPE html> <!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>
<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>

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

File diff suppressed because one or more lines are too long

31
client/demo/dist/index.js.LICENSE.txt vendored Normal file
View File

@ -0,0 +1,31 @@
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

14
client/demo/package-lock.json generated
View File

@ -9,7 +9,7 @@
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@dannadori/voice-changer-client-js": "^1.0.58", "@dannadori/voice-changer-client-js": "^1.0.66",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
}, },
@ -3211,9 +3211,9 @@
} }
}, },
"node_modules/@dannadori/voice-changer-client-js": { "node_modules/@dannadori/voice-changer-client-js": {
"version": "1.0.58", "version": "1.0.66",
"resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.58.tgz", "resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.66.tgz",
"integrity": "sha512-grdhyhYbAlJScIvYqNga9yD+sCexDL7WZ8oy3Jb6164lV3i+ceUQaSHMDEyhN/p4G73vcwp3QN4ROj1huCl28A==", "integrity": "sha512-0ybUJH3wOUmF59pvsMYp4CCu7F05xjE4EEh/1GLLJ/jx7zjTLGCOqewrJeEhvru0qk9fTDgy8LF7H5yqfMrLxQ==",
"dependencies": { "dependencies": {
"@types/readable-stream": "^2.3.15", "@types/readable-stream": "^2.3.15",
"amazon-chime-sdk-js": "^3.10.0", "amazon-chime-sdk-js": "^3.10.0",
@ -13296,9 +13296,9 @@
} }
}, },
"@dannadori/voice-changer-client-js": { "@dannadori/voice-changer-client-js": {
"version": "1.0.58", "version": "1.0.66",
"resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.58.tgz", "resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.66.tgz",
"integrity": "sha512-grdhyhYbAlJScIvYqNga9yD+sCexDL7WZ8oy3Jb6164lV3i+ceUQaSHMDEyhN/p4G73vcwp3QN4ROj1huCl28A==", "integrity": "sha512-0ybUJH3wOUmF59pvsMYp4CCu7F05xjE4EEh/1GLLJ/jx7zjTLGCOqewrJeEhvru0qk9fTDgy8LF7H5yqfMrLxQ==",
"requires": { "requires": {
"@types/readable-stream": "^2.3.15", "@types/readable-stream": "^2.3.15",
"amazon-chime-sdk-js": "^3.10.0", "amazon-chime-sdk-js": "^3.10.0",

8
client/demo/package.json
View File

@ -12,8 +12,10 @@
"start": "webpack-dev-server --config webpack.dev.js", "start": "webpack-dev-server --config webpack.dev.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"keywords": [], "keywords": [
"author": "", "voice conversion"
],
"author": "wataru.okada@flect.co.jp",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/plugin-transform-runtime": "^7.19.6", "@babel/plugin-transform-runtime": "^7.19.6",
@ -48,7 +50,7 @@
"webpack-dev-server": "^4.11.1" "webpack-dev-server": "^4.11.1"
}, },
"dependencies": { "dependencies": {
"@dannadori/voice-changer-client-js": "^1.0.58", "@dannadori/voice-changer-client-js": "^1.0.66",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
} }

19
client/demo/src/101_server_setting.tsx
View File

@ -23,8 +23,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
props.clientState.serverSetting.setFileUploadSetting({ props.clientState.serverSetting.setFileUploadSetting({
...props.clientState.serverSetting.fileUploadSetting, ...props.clientState.serverSetting.fileUploadSetting,
pyTorchModel: { pyTorchModel: {
data: await file.arrayBuffer(), file: file
filename: file.name
} }
}) })
} }
@ -43,8 +42,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
props.clientState.serverSetting.setFileUploadSetting({ props.clientState.serverSetting.setFileUploadSetting({
...props.clientState.serverSetting.fileUploadSetting, ...props.clientState.serverSetting.fileUploadSetting,
configFile: { configFile: {
data: await file.arrayBuffer(), file: file
filename: file.name
} }
}) })
} }
@ -63,8 +61,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
props.clientState.serverSetting.setFileUploadSetting({ props.clientState.serverSetting.setFileUploadSetting({
...props.clientState.serverSetting.fileUploadSetting, ...props.clientState.serverSetting.fileUploadSetting,
onnxModel: { onnxModel: {
data: await file.arrayBuffer(), file: file
filename: file.name
} }
}) })
} }
@ -82,6 +79,10 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
const uploadButtonAction = props.clientState.serverSetting.isUploading ? () => { } : onModelUploadClicked const uploadButtonAction = props.clientState.serverSetting.isUploading ? () => { } : onModelUploadClicked
const uploadButtonLabel = props.clientState.serverSetting.isUploading ? "wait..." : "upload" const uploadButtonLabel = props.clientState.serverSetting.isUploading ? "wait..." : "upload"
const configFilenameText = props.clientState.serverSetting.fileUploadSetting.configFile?.filename || props.clientState.serverSetting.fileUploadSetting.configFile?.file?.name || ""
const onnxModelFilenameText = props.clientState.serverSetting.fileUploadSetting.onnxModel?.filename || props.clientState.serverSetting.fileUploadSetting.onnxModel?.file?.name || ""
const pyTorchFilenameText = props.clientState.serverSetting.fileUploadSetting.pyTorchModel?.filename || props.clientState.serverSetting.fileUploadSetting.pyTorchModel?.file?.name || ""
return ( return (
<> <>
<div className="body-row split-3-3-4 left-padding-1 guided"> <div className="body-row split-3-3-4 left-padding-1 guided">
@ -100,7 +101,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
<div className="body-row split-3-3-4 left-padding-1 guided"> <div className="body-row split-3-3-4 left-padding-1 guided">
<div className="body-item-title left-padding-2">Config(.json)</div> <div className="body-item-title left-padding-2">Config(.json)</div>
<div className="body-item-text"> <div className="body-item-text">
<div>{props.clientState.serverSetting.fileUploadSetting.configFile?.filename}</div> <div>{configFilenameText}</div>
</div> </div>
<div className="body-button-container"> <div className="body-button-container">
<div className="body-button" onClick={onConfigFileLoadClicked}>select</div> <div className="body-button" onClick={onConfigFileLoadClicked}>select</div>
@ -110,7 +111,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
<div className="body-row split-3-3-4 left-padding-1 guided"> <div className="body-row split-3-3-4 left-padding-1 guided">
<div className="body-item-title left-padding-2">Onnx(.onnx)</div> <div className="body-item-title left-padding-2">Onnx(.onnx)</div>
<div className="body-item-text"> <div className="body-item-text">
<div>{props.clientState.serverSetting.fileUploadSetting.onnxModel?.filename}</div> <div>{onnxModelFilenameText}</div>
</div> </div>
<div className="body-button-container"> <div className="body-button-container">
<div className="body-button" onClick={onOnnxFileLoadClicked}>select</div> <div className="body-button" onClick={onOnnxFileLoadClicked}>select</div>
@ -122,7 +123,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
<div className="body-row split-3-3-4 left-padding-1 guided"> <div className="body-row split-3-3-4 left-padding-1 guided">
<div className="body-item-title left-padding-2">PyTorch(.pth)</div> <div className="body-item-title left-padding-2">PyTorch(.pth)</div>
<div className="body-item-text"> <div className="body-item-text">
<div>{props.clientState.serverSetting.fileUploadSetting.pyTorchModel?.filename}</div> <div>{pyTorchFilenameText}</div>
</div> </div>
<div className="body-button-container"> <div className="body-button-container">
<div className="body-button" onClick={onPyTorchFileLoadClicked}>select</div> <div className="body-button" onClick={onPyTorchFileLoadClicked}>select</div>

4
client/lib/package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@dannadori/voice-changer-client-js", "name": "@dannadori/voice-changer-client-js",
"version": "1.0.58", "version": "1.0.66",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@dannadori/voice-changer-client-js", "name": "@dannadori/voice-changer-client-js",
"version": "1.0.58", "version": "1.0.66",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@types/readable-stream": "^2.3.15", "@types/readable-stream": "^2.3.15",

8
client/lib/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@dannadori/voice-changer-client-js", "name": "@dannadori/voice-changer-client-js",
"version": "1.0.58", "version": "1.0.66",
"description": "", "description": "",
"main": "dist/index.js", "main": "dist/index.js",
"directories": { "directories": {
@ -20,8 +20,10 @@
"release": "npm version patch && npm publish --access=public", "release": "npm version patch && npm publish --access=public",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"keywords": [], "keywords": [
"author": "", "voice conversion"
],
"author": "wataru.okada@flect.co.jp",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@types/audioworklet": "^0.0.36", "@types/audioworklet": "^0.0.36",

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

@ -196,4 +196,7 @@ export const INDEXEDDB_DB_APP_NAME = "INDEXEDDB_KEY_VOICE_CHANGER"
export const INDEXEDDB_DB_NAME = "INDEXEDDB_KEY_VOICE_CHANGER_DB" export const INDEXEDDB_DB_NAME = "INDEXEDDB_KEY_VOICE_CHANGER_DB"
export const INDEXEDDB_KEY_CLIENT = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_CLIENT" export const INDEXEDDB_KEY_CLIENT = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_CLIENT"
export const INDEXEDDB_KEY_SERVER = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_SERVER" export const INDEXEDDB_KEY_SERVER = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_SERVER"
export const INDEXEDDB_KEY_WORKLET = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_WORKLET" export const INDEXEDDB_KEY_MODEL_DATA = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_MODEL_DATA"
export const INDEXEDDB_KEY_WORKLET = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_WORKLET"

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

@ -1,5 +1,5 @@
import { useState, useMemo, useRef, useEffect } from "react" import { useState, useMemo, useRef, useEffect } from "react"
import { VoiceChangerServerSetting, ServerInfo, Framework, OnnxExecutionProvider, DefaultVoiceChangerServerSetting, ServerSettingKey, INDEXEDDB_KEY_SERVER } from "../const" import { VoiceChangerServerSetting, ServerInfo, Framework, OnnxExecutionProvider, DefaultVoiceChangerServerSetting, ServerSettingKey, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_MODEL_DATA } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient" import { VoiceChangerClient } from "../VoiceChangerClient"
import { useIndexedDB } from "./useIndexedDB" import { useIndexedDB } from "./useIndexedDB"
@ -11,8 +11,9 @@ import { useIndexedDB } from "./useIndexedDB"
// } // }
type ModelData = { type ModelData = {
data: ArrayBuffer file?: File
filename: string data?: ArrayBuffer
filename?: string
} }
export type FileUploadSetting = { export type FileUploadSetting = {
@ -71,6 +72,12 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
settingRef.current = setting as VoiceChangerServerSetting settingRef.current = setting as VoiceChangerServerSetting
} }
_setSetting({ ...settingRef.current }) _setSetting({ ...settingRef.current })
const fileuploadSetting = await getItem(INDEXEDDB_KEY_MODEL_DATA)
if (!fileuploadSetting) {
} else {
setFileUploadSetting(fileuploadSetting as FileUploadSetting)
}
} }
loadCache() loadCache()
@ -89,11 +96,6 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeEndRate, "" + setting.crossFadeEndRate) props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeEndRate, "" + setting.crossFadeEndRate)
props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeOverlapRate, "" + setting.crossFadeOverlapRate) props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeOverlapRate, "" + setting.crossFadeOverlapRate)
// props.voiceChangerClient.setServerUrl(settingRef.current.mmvcServerUrl)
// props.voiceChangerClient.setInputChunkNum(settingRef.current.inputChunkNum)
// props.voiceChangerClient.setProtocol(settingRef.current.protocol)
// props.voiceChangerClient.setVoiceChangerMode(settingRef.current.voiceChangerMode)
}, [props.voiceChangerClient]) }, [props.voiceChangerClient])
////////////// //////////////
@ -189,8 +191,6 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
} }
}, [props.voiceChangerClient]) }, [props.voiceChangerClient])
////////////// //////////////
// 操作 // 操作
///////////// /////////////
@ -201,8 +201,8 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
const _uploadFile = useMemo(() => { const _uploadFile = useMemo(() => {
return async (modelData: ModelData, onprogress: (progress: number, end: boolean) => void) => { return async (modelData: ModelData, onprogress: (progress: number, end: boolean) => void) => {
if (!props.voiceChangerClient) return if (!props.voiceChangerClient) return
const num = await props.voiceChangerClient.uploadFile(modelData.data, modelData.filename, onprogress) const num = await props.voiceChangerClient.uploadFile(modelData.data!, modelData.filename!, onprogress)
const res = await props.voiceChangerClient.concatUploadedFile(modelData.filename, num) const res = await props.voiceChangerClient.concatUploadedFile(modelData.filename!, num)
console.log("uploaded", num, res) console.log("uploaded", num, res)
} }
}, [props.voiceChangerClient]) }, [props.voiceChangerClient])
@ -218,10 +218,24 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
} }
if (!props.voiceChangerClient) return if (!props.voiceChangerClient) return
setUploadProgress(0) setUploadProgress(0)
setIsUploading(true) setIsUploading(true)
// ファイルをメモリにロード
if (fileUploadSetting.onnxModel && !fileUploadSetting.onnxModel.data) {
fileUploadSetting.onnxModel.data = await fileUploadSetting.onnxModel.file!.arrayBuffer()
fileUploadSetting.onnxModel.filename = await fileUploadSetting.onnxModel.file!.name
}
if (fileUploadSetting.pyTorchModel && !fileUploadSetting.pyTorchModel.data) {
fileUploadSetting.pyTorchModel.data = await fileUploadSetting.pyTorchModel.file!.arrayBuffer()
fileUploadSetting.pyTorchModel.filename = await fileUploadSetting.pyTorchModel.file!.name
}
if (!fileUploadSetting.configFile.data) {
fileUploadSetting.configFile.data = await fileUploadSetting.configFile.file!.arrayBuffer()
fileUploadSetting.configFile.filename = await fileUploadSetting.configFile.file!.name
}
// ファイルをサーバにアップロード
const models = [fileUploadSetting.onnxModel, fileUploadSetting.pyTorchModel].filter(x => { return x != null }) as ModelData[] const models = [fileUploadSetting.onnxModel, fileUploadSetting.pyTorchModel].filter(x => { return x != null }) as ModelData[]
for (let i = 0; i < models.length; i++) { for (let i = 0; i < models.length; i++) {
const progRate = 1 / models.length const progRate = 1 / models.length
@ -236,7 +250,17 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
console.log(progress, end) console.log(progress, end)
}) })
await props.voiceChangerClient.loadModel(fileUploadSetting.configFile.filename, fileUploadSetting.pyTorchModel?.filename || null, fileUploadSetting.onnxModel?.filename || null) const loadPromise = props.voiceChangerClient.loadModel(fileUploadSetting.configFile.filename!, fileUploadSetting.pyTorchModel?.filename || null, fileUploadSetting.onnxModel?.filename || null)
// サーバでロード中にキャッシュにセーブ
const saveData: FileUploadSetting = {
pyTorchModel: fileUploadSetting.pyTorchModel ? { data: fileUploadSetting.pyTorchModel.data, filename: fileUploadSetting.pyTorchModel.filename } : null,
onnxModel: fileUploadSetting.onnxModel ? { data: fileUploadSetting.onnxModel.data, filename: fileUploadSetting.onnxModel.filename } : null,
configFile: { data: fileUploadSetting.configFile.data, filename: fileUploadSetting.configFile.filename }
}
setItem(INDEXEDDB_KEY_MODEL_DATA, saveData)
await loadPromise
setUploadProgress(0) setUploadProgress(0)
setIsUploading(false) setIsUploading(false)
reloadServerInfo() reloadServerInfo()
@ -311,6 +335,7 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
const clearSetting = async () => { const clearSetting = async () => {
await removeItem(INDEXEDDB_KEY_SERVER) await removeItem(INDEXEDDB_KEY_SERVER)
await removeItem(INDEXEDDB_KEY_MODEL_DATA)
} }