store stting 4

2025-01-23 05:25:01 +03:00 · 2023-01-29 15:25:44 +09:00 · 2023-01-29 15:25:44 +09:00 · 877d6c3c8e
commit 877d6c3c8e
parent ac967fdea1
10 changed files with 106 additions and 644 deletions
--- a/client/demo/dist/index.html
+++ b/client/demo/dist/index.html
@ -1,10 +1 @@
-<!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>
+<!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>
--- a/client/demo/dist/index.js
+++ b/client/demo/dist/index.js
--- a/client/demo/dist/index.js.LICENSE.txt
+++ b/client/demo/dist/index.js.LICENSE.txt
@ -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.
+ */
--- a/client/demo/package-lock.json
+++ b/client/demo/package-lock.json
@ -9,7 +9,7 @@
            "version": "1.0.0",
            "license": "ISC",
            "dependencies": {
-                "@dannadori/voice-changer-client-js": "^1.0.58",
+                "@dannadori/voice-changer-client-js": "^1.0.66",
                "react": "^18.2.0",
                "react-dom": "^18.2.0"
            },
@ -3211,9 +3211,9 @@
            }
        },
        "node_modules/@dannadori/voice-changer-client-js": {
-            "version": "1.0.58",
-            "resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.58.tgz",
-            "integrity": "sha512-grdhyhYbAlJScIvYqNga9yD+sCexDL7WZ8oy3Jb6164lV3i+ceUQaSHMDEyhN/p4G73vcwp3QN4ROj1huCl28A==",
+            "version": "1.0.66",
+            "resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.66.tgz",
+            "integrity": "sha512-0ybUJH3wOUmF59pvsMYp4CCu7F05xjE4EEh/1GLLJ/jx7zjTLGCOqewrJeEhvru0qk9fTDgy8LF7H5yqfMrLxQ==",
            "dependencies": {
                "@types/readable-stream": "^2.3.15",
                "amazon-chime-sdk-js": "^3.10.0",
@ -13296,9 +13296,9 @@
            }
        },
        "@dannadori/voice-changer-client-js": {
-            "version": "1.0.58",
-            "resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.58.tgz",
-            "integrity": "sha512-grdhyhYbAlJScIvYqNga9yD+sCexDL7WZ8oy3Jb6164lV3i+ceUQaSHMDEyhN/p4G73vcwp3QN4ROj1huCl28A==",
+            "version": "1.0.66",
+            "resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.66.tgz",
+            "integrity": "sha512-0ybUJH3wOUmF59pvsMYp4CCu7F05xjE4EEh/1GLLJ/jx7zjTLGCOqewrJeEhvru0qk9fTDgy8LF7H5yqfMrLxQ==",
            "requires": {
                "@types/readable-stream": "^2.3.15",
                "amazon-chime-sdk-js": "^3.10.0",
--- a/client/demo/package.json
+++ b/client/demo/package.json
@ -12,8 +12,10 @@
        "start": "webpack-dev-server  --config webpack.dev.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
-    "keywords": [],
-    "author": "",
+    "keywords": [
+        "voice conversion"
+    ],
+    "author": "wataru.okada@flect.co.jp",
    "license": "ISC",
    "devDependencies": {
        "@babel/plugin-transform-runtime": "^7.19.6",
@ -48,7 +50,7 @@
        "webpack-dev-server": "^4.11.1"
    },
    "dependencies": {
-        "@dannadori/voice-changer-client-js": "^1.0.58",
+        "@dannadori/voice-changer-client-js": "^1.0.66",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
--- a/client/demo/src/101_server_setting.tsx
+++ b/client/demo/src/101_server_setting.tsx
@ -23,8 +23,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
            props.clientState.serverSetting.setFileUploadSetting({
                ...props.clientState.serverSetting.fileUploadSetting,
                pyTorchModel: {
-                    data: await file.arrayBuffer(),
-                    filename: file.name
+                    file: file
                }
            })
        }
@ -43,8 +42,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
            props.clientState.serverSetting.setFileUploadSetting({
                ...props.clientState.serverSetting.fileUploadSetting,
                configFile: {
-                    data: await file.arrayBuffer(),
-                    filename: file.name
+                    file: file
                }
            })
        }
@ -63,8 +61,7 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
            props.clientState.serverSetting.setFileUploadSetting({
                ...props.clientState.serverSetting.fileUploadSetting,
                onnxModel: {
-                    data: await file.arrayBuffer(),
-                    filename: file.name
+                    file: file
                }
            })
        }
@ -82,6 +79,10 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
        const uploadButtonAction = props.clientState.serverSetting.isUploading ? () => { } : onModelUploadClicked
        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 (
            <>
                <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-item-title left-padding-2">Config(.json)</div>
                    <div className="body-item-text">
-                        <div>{props.clientState.serverSetting.fileUploadSetting.configFile?.filename}</div>
+                        <div>{configFilenameText}</div>
                    </div>
                    <div className="body-button-container">
                        <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-item-title left-padding-2">Onnx(.onnx)</div>
                    <div className="body-item-text">
-                        <div>{props.clientState.serverSetting.fileUploadSetting.onnxModel?.filename}</div>
+                        <div>{onnxModelFilenameText}</div>
                    </div>
                    <div className="body-button-container">
                        <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-item-title left-padding-2">PyTorch(.pth)</div>
                            <div className="body-item-text">
-                                <div>{props.clientState.serverSetting.fileUploadSetting.pyTorchModel?.filename}</div>
+                                <div>{pyTorchFilenameText}</div>
                            </div>
                            <div className="body-button-container">
                                <div className="body-button" onClick={onPyTorchFileLoadClicked}>select</div>
--- a/client/lib/package-lock.json
+++ b/client/lib/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "@dannadori/voice-changer-client-js",
-  "version": "1.0.58",
+  "version": "1.0.66",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@dannadori/voice-changer-client-js",
-      "version": "1.0.58",
+      "version": "1.0.66",
      "license": "ISC",
      "dependencies": {
        "@types/readable-stream": "^2.3.15",
--- a/client/lib/package.json
+++ b/client/lib/package.json
@ -1,6 +1,6 @@
 {
  "name": "@dannadori/voice-changer-client-js",
-  "version": "1.0.58",
+  "version": "1.0.66",
  "description": "",
  "main": "dist/index.js",
  "directories": {
@ -20,8 +20,10 @@
    "release": "npm version patch && npm publish --access=public",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "voice conversion"
+  ],
+  "author": "wataru.okada@flect.co.jp",
  "license": "ISC",
  "devDependencies": {
    "@types/audioworklet": "^0.0.36",
--- a/client/lib/src/const.ts
+++ b/client/lib/src/const.ts
@ -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_KEY_CLIENT = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_CLIENT"
 export const INDEXEDDB_KEY_SERVER = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_SERVER"
+export const INDEXEDDB_KEY_MODEL_DATA = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_MODEL_DATA"
 export const INDEXEDDB_KEY_WORKLET = "INDEXEDDB_KEY_VOICE_CHANGER_LIB_WORKLET"
+
+
--- a/client/lib/src/hooks/useServerSetting.ts
+++ b/client/lib/src/hooks/useServerSetting.ts
@ -1,5 +1,5 @@
 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 { useIndexedDB } from "./useIndexedDB"

@ -11,8 +11,9 @@ import { useIndexedDB } from "./useIndexedDB"
 // }

 type ModelData = {
-    data: ArrayBuffer
-    filename: string
+    file?: File
+    data?: ArrayBuffer
+    filename?: string
 }

 export type FileUploadSetting = {
@ -71,6 +72,12 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
                settingRef.current = setting as VoiceChangerServerSetting
            }
            _setSetting({ ...settingRef.current })
+
+            const fileuploadSetting = await getItem(INDEXEDDB_KEY_MODEL_DATA)
+            if (!fileuploadSetting) {
+            } else {
+                setFileUploadSetting(fileuploadSetting as FileUploadSetting)
+            }
        }

        loadCache()
@ -89,11 +96,6 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
        props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeEndRate, "" + setting.crossFadeEndRate)
        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])

    //////////////
@ -189,8 +191,6 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
        }
    }, [props.voiceChangerClient])

-
-
    //////////////
    // 操作
    /////////////
@ -201,8 +201,8 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
    const _uploadFile = useMemo(() => {
        return async (modelData: ModelData, onprogress: (progress: number, end: boolean) => void) => {
            if (!props.voiceChangerClient) return
-            const num = await props.voiceChangerClient.uploadFile(modelData.data, modelData.filename, onprogress)
-            const res = await props.voiceChangerClient.concatUploadedFile(modelData.filename, num)
+            const num = await props.voiceChangerClient.uploadFile(modelData.data!, modelData.filename!, onprogress)
+            const res = await props.voiceChangerClient.concatUploadedFile(modelData.filename!, num)
            console.log("uploaded", num, res)
        }
    }, [props.voiceChangerClient])
@ -218,10 +218,24 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
            }
            if (!props.voiceChangerClient) return

-
            setUploadProgress(0)
            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[]
            for (let i = 0; i < models.length; i++) {
                const progRate = 1 / models.length
@ -236,7 +250,17 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
                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)
            setIsUploading(false)
            reloadServerInfo()
@ -311,6 +335,7 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta

    const clearSetting = async () => {
        await removeItem(INDEXEDDB_KEY_SERVER)
+        await removeItem(INDEXEDDB_KEY_MODEL_DATA)
    }