bugfix: clearsetting can not all data
This commit is contained in:
wataru
parent
37eba531e9
commit
093e01dd4e
@ -60,6 +60,8 @@
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -51,6 +51,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -50,6 +50,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -70,6 +70,12 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [
|
||||
{
|
||||
"name": "mergeLab",
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -50,6 +50,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -50,6 +50,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
2
client/demo/dist/index.js
vendored
2
client/demo/dist/index.js
vendored
File diff suppressed because one or more lines are too long
2676
client/demo/dist/index.js.LICENSE.txt
vendored
2676
client/demo/dist/index.js.LICENSE.txt
vendored
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
||||
@ -60,6 +60,8 @@
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -51,6 +51,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -50,6 +50,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -70,6 +70,12 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [
|
||||
{
|
||||
"name": "mergeLab",
|
||||
"options": {}
|
||||
}
|
||||
],
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -50,6 +50,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -50,6 +50,8 @@
|
||||
}
|
||||
}
|
||||
],
|
||||
"lab": [],
|
||||
|
||||
"deviceSetting": [
|
||||
{
|
||||
"name": "audioInput",
|
||||
|
||||
@ -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 () => {
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
await removeDB()
|
||||
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">
|
||||
|
||||
@ -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" }]
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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} /> })
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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 />
|
||||
|
||||
51
client/demo/src/components/demo/a00_Lab.tsx
Normal file
51
client/demo/src/components/demo/a00_Lab.tsx
Normal file
@ -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
|
||||
}
|
||||
104
client/demo/src/components/demo/components/a01_MergeLab.Row.tsx
Normal file
104
client/demo/src/components/demo/components/a01_MergeLab.Row.tsx
Normal file
@ -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
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
4
client/lib/package-lock.json
generated
4
client/lib/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@dannadori/voice-changer-client-js",
|
||||
"version": "1.0.117",
|
||||
"version": "1.0.118",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"directories": {
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
@ -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:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user