bugfix: clearsetting can not all data

client/demo/dist/assets/gui_settings/DDSP-SVC.json

@@ -60,6 +60,8 @@
                 "options": {}
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

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

@@ -51,6 +51,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

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

@@ -50,6 +50,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

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

@@ -70,6 +70,12 @@
                 }
             }
         ],
+        "lab": [
+            {
+                "name": "mergeLab",
+                "options": {}
+            }
+        ],
         "deviceSetting": [
             {
                 "name": "audioInput",

client/demo/dist/assets/gui_settings/so-vits-svc-40.json

@@ -50,6 +50,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

client/demo/dist/assets/gui_settings/so-vits-svc-40v2.json

@@ -50,6 +50,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

client/demo/package.json

@@ -23,7 +23,7 @@
         "@babel/preset-env": "^7.21.5",
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.21.5",
-        "@types/node": "^18.16.2",
+        "@types/node": "^18.16.3",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.1",
         "autoprefixer": "^10.4.14",
@@ -38,7 +38,7 @@
         "html-loader": "^4.2.0",
         "html-webpack-plugin": "^5.5.1",
         "npm-run-all": "^4.1.5",
-        "postcss-loader": "^7.2.4",
+        "postcss-loader": "^7.3.0",
         "postcss-nested": "^6.0.1",
         "prettier": "^2.8.8",
         "rimraf": "^5.0.0",
@@ -51,7 +51,7 @@
         "webpack-dev-server": "^4.13.3"
     },
     "dependencies": {
-        "@dannadori/voice-changer-client-js": "^1.0.117",
+        "@dannadori/voice-changer-client-js": "^1.0.118",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",
         "@fortawesome/free-brands-svg-icons": "^6.4.0",
         "@fortawesome/free-regular-svg-icons": "^6.4.0",

client/demo/public/assets/gui_settings/DDSP-SVC.json

@@ -60,6 +60,8 @@
                 "options": {}
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

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

@@ -51,6 +51,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

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

@@ -50,6 +50,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

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

@@ -70,6 +70,12 @@
                 }
             }
         ],
+        "lab": [
+            {
+                "name": "mergeLab",
+                "options": {}
+            }
+        ],
         "deviceSetting": [
             {
                 "name": "audioInput",

client/demo/public/assets/gui_settings/so-vits-svc-40.json

@@ -50,6 +50,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

client/demo/public/assets/gui_settings/so-vits-svc-40v2.json

@@ -50,6 +50,8 @@
                 }
             }
         ],
+        "lab": [],
+
         "deviceSetting": [
             {
                 "name": "audioInput",

client/demo/src/000_index.tsx

@@ -43,31 +43,33 @@ const AppStateWrapper = () => {
     // エラーバウンダリー設定
     const [error, setError] = useState<{ error: Error, errorInfo: ErrorInfo }>()
     const { removeItem } = useIndexedDB({ clientType: clientType })
-    const { getItem } = useIndexedDB({ clientType: null })
+    const { getItem, removeDB } = useIndexedDB({ clientType: null })
     const errorComponent = useMemo(() => {
         const errorName = error?.error.name || "no error name"
         const errorMessage = error?.error.message || "no error message"
         const errorInfos = (error?.errorInfo.componentStack || "no error stack").split("\n")
 
         const onClearCacheClicked = async () => {
-
+            await removeDB()
-            const indexedDBKeys = [
-                INDEXEDDB_KEY_CLIENT,
-                INDEXEDDB_KEY_SERVER,
-                INDEXEDDB_KEY_WORKLETNODE,
-                INDEXEDDB_KEY_WORKLET,
-                INDEXEDDB_KEY_AUDIO_OUTPUT
-            ]
-            for (const k of indexedDBKeys) {
-                await removeItem(k)
-            }
-
-            for (let i = 0; i < MAX_MODEL_SLOT_NUM; i++) {
-                const modleKey = `${INDEXEDDB_KEY_MODEL_DATA}_${i}`
-                await removeItem(modleKey)
-            }
-
             location.reload();
+
+            // const indexedDBKeys = [
+            //     INDEXEDDB_KEY_CLIENT,
+            //     INDEXEDDB_KEY_SERVER,
+            //     INDEXEDDB_KEY_WORKLETNODE,
+            //     INDEXEDDB_KEY_WORKLET,
+            //     INDEXEDDB_KEY_AUDIO_OUTPUT
+            // ]
+            // for (const k of indexedDBKeys) {
+            //     await removeItem(k)
+            // }
+
+            // for (let i = 0; i < MAX_MODEL_SLOT_NUM; i++) {
+            //     const modleKey = `${INDEXEDDB_KEY_MODEL_DATA}_${i}`
+            //     await removeItem(modleKey)
+            // }
+
+
         }
         return (
             <div className="error-container">

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

@@ -15,6 +15,7 @@ export type AppGuiDemoSetting = {
         "speakerSetting": GuiComponentSetting[],
         "converterSetting": GuiComponentSetting[],
         "advancedSetting": GuiComponentSetting[],
+        "lab": GuiComponentSetting[],
     },
     dialogs: {
         "license": { title: string, auther: string, contact: string, url: string, license: string }[]
@@ -37,7 +38,8 @@ const InitialAppGuiDemoSetting: AppGuiDemoSetting = {
         "qualityControl": [],
         "speakerSetting": [],
         "converterSetting": [],
-        "advancedSetting": []
+        "advancedSetting": [],
+        "lab": []
     },
     dialogs: {
         "license": [{ title: "", auther: "", contact: "", url: "", license: "MIT" }]

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

@@ -10,6 +10,7 @@ export const OpenQualityControlCheckbox = "open-quality-control-checkbox"
 export const OpenSpeakerSettingCheckbox = "open-speaker-setting-checkbox"
 export const OpenConverterSettingCheckbox = "open-converter-setting-checkbox"
 export const OpenAdvancedSettingCheckbox = "open-advanced-setting-checkbox"
+export const OpenLabCheckbox = "open-lab-checkbox"
 
 export const OpenLicenseDialogCheckbox = "open-license-dialog-checkbox"
 export const OpenWaitingDialogCheckbox = "open-waiting-dialog-checkbox"
@@ -26,9 +27,11 @@ export type StateControls = {
     openSpeakerSettingCheckbox: StateControlCheckbox
     openConverterSettingCheckbox: StateControlCheckbox
     openAdvancedSettingCheckbox: StateControlCheckbox
+    openLabCheckbox: StateControlCheckbox
 
     showLicenseCheckbox: StateControlCheckbox
     showWaitingCheckbox: StateControlCheckbox
+
 }
 
 type GuiStateAndMethod = {
@@ -141,6 +144,7 @@ export const GuiStateProvider = ({ children }: Props) => {
     const openSpeakerSettingCheckbox = useStateControlCheckbox(OpenSpeakerSettingCheckbox);
     const openConverterSettingCheckbox = useStateControlCheckbox(OpenConverterSettingCheckbox);
     const openAdvancedSettingCheckbox = useStateControlCheckbox(OpenAdvancedSettingCheckbox);
+    const openLabCheckbox = useStateControlCheckbox(OpenLabCheckbox);
 
     const showLicenseCheckbox = useStateControlCheckbox(OpenLicenseDialogCheckbox);
     const showWaitingCheckbox = useStateControlCheckbox(OpenWaitingDialogCheckbox);
@@ -152,6 +156,7 @@ export const GuiStateProvider = ({ children }: Props) => {
         openSpeakerSettingCheckbox.updateState(true)
         openConverterSettingCheckbox.updateState(true)
         openQualityControlCheckbox.updateState(true)
+        openLabCheckbox.updateState(true)
 
         showLicenseCheckbox.updateState(false)
         showWaitingCheckbox.updateState(false)
@@ -173,6 +178,7 @@ export const GuiStateProvider = ({ children }: Props) => {
             openSpeakerSettingCheckbox,
             openConverterSettingCheckbox,
             openAdvancedSettingCheckbox,
+            openLabCheckbox,
 
             showLicenseCheckbox,
             showWaitingCheckbox

client/demo/src/components/demo/002_ComponentGenerator.tsx

@@ -43,6 +43,7 @@ import { SilenceFrontRow, SilenceFrontRowProps } from "./components/812_SilenceF
 import { ModelSwitchRow, ModelSwitchRowProps } from "./components/204_ModelSwitchRow"
 import { ONNXExportRow, ONNXExportRowProps } from "./components/205_ONNXExportRow"
 import { ONNXExecutorRow, ONNXExecutorRowProps } from "./components/206_ONNXExecutorRow"
+import { MergeLabRow, MergeLabRowProps } from "./components/a01_MergeLab.Row"
 
 export const catalog: { [key: string]: (props: any) => JSX.Element } = {}
 
@@ -116,7 +117,7 @@ const initialize = () => {
     addToCatalog("rvcQuality", (props: RVCQualityRowProps) => { return <RVCQualityRow {...props} /> })
     addToCatalog("silenceFront", (props: SilenceFrontRowProps) => { return <SilenceFrontRow {...props} /> })
 
-
+    addToCatalog("mergeLab", (props: MergeLabRowProps) => { return <MergeLabRow {...props} /> })
 
 }
 

client/demo/src/components/demo/010_Demo.tsx

@@ -9,6 +9,7 @@ import { QualityControl } from "./500_QualityControl";
 import { SpeakerSetting } from "./600_SpeakerSetting";
 import { ConverterSetting } from "./700_ConverterSetting";
 import { AdvancedSetting } from "./800_AdvancedSetting";
+import { Lab } from "./a00_Lab";
 
 export const Demo = () => {
     return (
@@ -19,6 +20,7 @@ export const Demo = () => {
                 <TitleArea />
                 <ServerControl />
                 <ModelSetting />
+                <Lab></Lab>
                 <DeviceSetting />
                 <QualityControl />
                 <SpeakerSetting />

client/demo/src/components/demo/a00_Lab.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from "react"
+import { useAppRoot } from "../../001_provider/001_AppRootProvider"
+import { AnimationTypes, HeaderButton, HeaderButtonProps } from "../101_HeaderButton"
+import { useGuiState } from "./001_GuiStateProvider"
+import { generateComponent } from "./002_ComponentGenerator"
+
+export const Lab = () => {
+    const guiState = useGuiState()
+    const { appGuiSettingState } = useAppRoot()
+    const componentSettings = appGuiSettingState.appGuiSetting.front.lab
+    const accodionButton = useMemo(() => {
+        const accodionButtonProps: HeaderButtonProps = {
+            stateControlCheckbox: guiState.stateControls.openLabCheckbox,
+            tooltip: "Open/Close",
+            onIcon: ["fas", "caret-up"],
+            offIcon: ["fas", "caret-up"],
+            animation: AnimationTypes.spinner,
+            tooltipClass: "tooltip-right",
+        };
+        return <HeaderButton {...accodionButtonProps}></HeaderButton>;
+    }, []);
+
+    const deviceSetting = useMemo(() => {
+        const components = componentSettings.map((x, index) => {
+            const c = generateComponent(x.name, x.options)
+            return <div key={`${x.name}_${index}`}>{c}</div>
+        })
+        return (
+            <>
+                {guiState.stateControls.openLabCheckbox.trigger}
+                <div className="partition">
+                    <div className="partition-header">
+                        <span className="caret">
+                            {accodionButton}
+                        </span>
+                        <span className="title" onClick={() => { guiState.stateControls.openLabCheckbox.updateState(!guiState.stateControls.openLabCheckbox.checked()) }}>
+                            Labs(N/A)
+                        </span>
+                        <span></span>
+                    </div>
+
+                    <div className="partition-content">
+                        {/* {components} */}
+                    </div>
+                </div>
+            </>
+        )
+    }, [])
+
+    return deviceSetting
+}

client/demo/src/components/demo/components/a01_MergeLab.Row.tsx

@@ -0,0 +1,104 @@
+import { Framework } from "@dannadori/voice-changer-client-js"
+import React, { useEffect, useMemo, useState } from "react"
+import { useAppState } from "../../../001_provider/001_AppStateProvider"
+
+
+export type MergeLabRowProps = {
+}
+
+type MergeElement = {
+    filename: string
+    strength: number
+}
+
+export const MergeLabRow = (_props: MergeLabRowProps) => {
+    const [mergeElements, setMergeElements] = useState<MergeElement[]>([])
+    const appState = useAppState()
+
+    // スロットが変更されたときの初期化処理
+    const newSlotChangeKey = useMemo(() => {
+        return appState.serverSetting.serverSetting.modelSlots.reduce((prev, cur) => {
+            return prev + "_" + cur.pyTorchModelFile
+        }, "")
+    }, [appState.serverSetting.serverSetting.modelSlots])
+
+    useEffect(() => {
+        // PyTorchモデルだけフィルタリング
+        const models = appState.serverSetting.serverSetting.modelSlots.filter(x => { return x.pyTorchModelFile && x.pyTorchModelFile.length > 0 })
+        if (models.length == 0) {
+            return
+        }
+
+        // サンプリングレート、埋め込み次元数、モデルタイプが同一の場合のみ処理可能
+
+        if (
+            models.map(x => { return x.samplingRate }).every((x, _i, arr) => x == arr[0]) &&
+            models.map(x => { return x.embChannels }).every((x, _i, arr) => x == arr[0]) &&
+            models.map(x => { return x.modelType }).every((x, _i, arr) => x == arr[0])
+        ) {
+
+            const newMergeElements = models.map((x) => {
+                const elem: MergeElement = { filename: x.pyTorchModelFile, strength: 100 }
+                return elem
+            })
+            setMergeElements(newMergeElements)
+        } else {
+            console.log("not all model is same properties.")
+            setMergeElements([])
+        }
+    }, [newSlotChangeKey])
+
+
+    const modelSwitchRow = useMemo(() => {
+        const onMergeClicked = async () => {
+
+        }
+        const onMergeElementsChanged = (filename: string, strength: number) => {
+            const newMergeElements = mergeElements.map(x => {
+                if (x.filename != filename) return x
+
+                x.strength = strength
+                return x
+            })
+            setMergeElements(newMergeElements)
+        }
+        const modelOptions = mergeElements.map((x, index) => {
+            let filename = ""
+            if (x.filename.length > 0) {
+                filename = x.filename.replace(/^.*[\\\/]/, '')
+            } else {
+                return (
+                    <div key={index} >
+                    </div>
+                )
+            }
+
+            return (
+                <div key={index} className="merge-field">
+                    <div className="merge-field-elem">{filename}</div>
+                    <div className="merge-field-elem">
+                        <input type="range" className="body-item-input-slider" min="0" max="100" step="1" value={x.strength} onChange={(e) => {
+                            onMergeElementsChanged(x.filename, Number(e.target.value))
+                        }}></input>
+                        <span className="body-item-input-slider-val">{x.strength}</span>
+                    </div>
+                </div >
+            )
+        })
+
+        return (
+            <div className="body-row split-3-3-4 left-padding-1 guided">
+                <div className="body-item-title left-padding-1">Model Merger</div>
+                <div className="merge-field-container">
+                    {modelOptions.length == 0 ? <>no torch model or not same type</> : modelOptions}
+                </div>
+                <div className="body-button-container">
+                    <div className="body-button" onClick={onMergeClicked}>merge</div>
+                </div>
+            </div>
+        )
+    }, [mergeElements, appState.serverSetting.serverSetting])
+
+    return modelSwitchRow
+}
+

client/demo/src/css/App.css

@@ -769,3 +769,17 @@ body {
     cursor: pointer;
     display: inline-block;
 }
+
+/* ##################  */
+.merge-field-container {
+    display: flex;
+    flex-direction: column;
+    .merge-field {
+        display: flex;
+        flex-direction: row;
+        .merge-field-elem {
+            padding-left: 5px;
+            width: 100%;
+        }
+    }
+}

client/lib/package-lock.json

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

client/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dannadori/voice-changer-client-js",
-  "version": "1.0.117",
+  "version": "1.0.118",
   "description": "",
   "main": "dist/index.js",
   "directories": {

client/lib/src/hooks/useIndexedDB.ts

@@ -13,6 +13,7 @@ export type IndexedDBStateAndMethod = IndexedDBState & {
     getItem: (key: string) => Promise<unknown>
     removeItem: (key: string) => Promise<void>
     // clearAll: () => Promise<void>
+    removeDB: () => Promise<void>
 }
 
 export const useIndexedDB = (props: UseIndexedDBProps): IndexedDBStateAndMethod => {
@@ -43,16 +44,27 @@ export const useIndexedDB = (props: UseIndexedDBProps): IndexedDBStateAndMethod
     const removeItem = useMemo(() => {
         return async (key: string) => {
             const clientKey = `${clientType}_${key}`
-            // console.log("remove key:", clientKey)
+            console.log("remove key:", clientKey)
             return await localForage.removeItem(clientKey)
         }
     }, [props.clientType])
 
+    const removeDB = useMemo(() => {
+        return async () => {
+            const keys = await localForage.keys()
+            for (const key of keys) {
+                console.log("remove key:", key)
+                await localForage.removeItem(key)
+            }
+        }
+    }, [props.clientType])
+
 
     return {
         dummy: "",
         setItem,
         getItem,
         removeItem,
+        removeDB
     }
 }

server/voice_changer/RVC/RVC.py

@@ -129,6 +129,7 @@ class RVC:
 
         except Exception as e:
             print("EXCEPTION during loading hubert/contentvec model", e)
+            print("          hubert_path:", hubert_path)
 
         # 初回のみロード
         if self.initialLoad or tmp_slot == self.currentSlot: