WIP:gui improve 1

This commit is contained in:
wataru 2023-05-15 06:28:34 +09:00
parent d86e02ce1e
commit ffd2894d5e
14 changed files with 1812 additions and 101 deletions

View File

@ -25,17 +25,17 @@
"name": "performance", "name": "performance",
"options": {} "options": {}
}, },
{
"name": "serverInfo",
"options": {}
},
{ {
"name": "modelSwitch", "name": "modelSwitch",
"options": {} "options": {}
}, },
{ {
"name": "onnxExport", "name": "serverOperation",
"options": {} "options": {
"showDownload": true,
"showExportOnnx": true,
"showReload": true
}
} }
], ],
"modelSetting": [ "modelSetting": [
@ -126,13 +126,6 @@
} }
], ],
"speakerSetting": [ "speakerSetting": [
{
"name": "dstId",
"options": {
"dstIdDisplayType": "ddspsvc",
"staticIds": [1]
}
},
{ {
"name": "tune", "name": "tune",
"options": {} "options": {}

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>

File diff suppressed because one or more lines are too long

View File

@ -1,31 +0,0 @@
/*! 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.
*/

View File

@ -25,17 +25,17 @@
"name": "performance", "name": "performance",
"options": {} "options": {}
}, },
{
"name": "serverInfo",
"options": {}
},
{ {
"name": "modelSwitch", "name": "modelSwitch",
"options": {} "options": {}
}, },
{ {
"name": "onnxExport", "name": "serverOperation",
"options": {} "options": {
"showDownload": true,
"showExportOnnx": true,
"showReload": true
}
} }
], ],
"modelSetting": [ "modelSetting": [
@ -126,13 +126,6 @@
} }
], ],
"speakerSetting": [ "speakerSetting": [
{
"name": "dstId",
"options": {
"dstIdDisplayType": "ddspsvc",
"staticIds": [1]
}
},
{ {
"name": "tune", "name": "tune",
"options": {} "options": {}

View File

@ -151,12 +151,14 @@ export const GuiStateProvider = ({ children }: Props) => {
useEffect(() => { useEffect(() => {
openServerControlCheckbox.updateState(true) openServerControlCheckbox.updateState(true)
openModelSettingCheckbox.updateState(true) openModelSettingCheckbox.updateState(false)
openDeviceSettingCheckbox.updateState(true) openDeviceSettingCheckbox.updateState(true)
openSpeakerSettingCheckbox.updateState(true) openSpeakerSettingCheckbox.updateState(true)
openConverterSettingCheckbox.updateState(true) openConverterSettingCheckbox.updateState(true)
openQualityControlCheckbox.updateState(true) openQualityControlCheckbox.updateState(false)
openLabCheckbox.updateState(true) openLabCheckbox.updateState(false)
openAdvancedSettingCheckbox.updateState(false)
showLicenseCheckbox.updateState(false) showLicenseCheckbox.updateState(false)
showWaitingCheckbox.updateState(false) showWaitingCheckbox.updateState(false)

View File

@ -53,6 +53,7 @@ import { DefaultTuneRow2, DefaultTuneRow2Props } from "./components/301-i_Defaul
import { DiffEnablerRow, DiffEnablerRowProps } from "./components/611_DiffEnablerRow" import { DiffEnablerRow, DiffEnablerRowProps } from "./components/611_DiffEnablerRow"
import { DiffSettingRow, DiffSettingRowProps } from "./components/612_DiffSettingRow" import { DiffSettingRow, DiffSettingRowProps } from "./components/612_DiffSettingRow"
import { DiffMethodRow, DiffMethodRowProps } from "./components/613_DiffMethodRow" import { DiffMethodRow, DiffMethodRowProps } from "./components/613_DiffMethodRow"
import { ServerOpertationRow, ServerOpertationRowProps } from "./components/207_ServerOpertationRow"
export const catalog: { [key: string]: (props: any) => JSX.Element } = {} export const catalog: { [key: string]: (props: any) => JSX.Element } = {}
@ -80,6 +81,7 @@ const initialize = () => {
addToCatalog("modelSwitch", (props: ModelSwitchRowProps) => { return <ModelSwitchRow {...props} /> }) addToCatalog("modelSwitch", (props: ModelSwitchRowProps) => { return <ModelSwitchRow {...props} /> })
addToCatalog("onnxExport", (props: ONNXExportRowProps) => { return <ONNXExportRow {...props} /> }) addToCatalog("onnxExport", (props: ONNXExportRowProps) => { return <ONNXExportRow {...props} /> })
addToCatalog("onnxExecutor", (props: ONNXExecutorRowProps) => { return <ONNXExecutorRow {...props} /> }) addToCatalog("onnxExecutor", (props: ONNXExecutorRowProps) => { return <ONNXExecutorRow {...props} /> })
addToCatalog("serverOperation", (props: ServerOpertationRowProps) => { return <ServerOpertationRow {...props} /> })
addToCatalog("modelUploaderv2", (props: ModelUploaderRowv2Props) => { return <ModelUploaderRowv2 {...props} /> }) addToCatalog("modelUploaderv2", (props: ModelUploaderRowv2Props) => { return <ModelUploaderRowv2 {...props} /> })

View File

@ -10,25 +10,24 @@ import { SpeakerSetting } from "./600_SpeakerSetting";
import { ConverterSetting } from "./700_ConverterSetting"; import { ConverterSetting } from "./700_ConverterSetting";
import { AdvancedSetting } from "./800_AdvancedSetting"; import { AdvancedSetting } from "./800_AdvancedSetting";
import { Lab } from "./a00_Lab"; import { Lab } from "./a00_Lab";
import { useAppRoot } from "../../001_provider/001_AppRootProvider";
export const Demo = () => { export const Demo = () => {
return ( return (
<GuiStateProvider> <GuiStateProvider>
<div className="main-body"> <div className="main-body">
<Dialogs /> <Dialogs />
<TitleArea /> <TitleArea />
<ServerControl /> <ServerControl />
<ModelSetting /> <ModelSetting />
<Lab></Lab>
<DeviceSetting />
<QualityControl />
<SpeakerSetting /> <SpeakerSetting />
<ConverterSetting /> <ConverterSetting />
<DeviceSetting />
<Lab />
<QualityControl />
<AdvancedSetting /> <AdvancedSetting />
</div> </div>
</GuiStateProvider> </GuiStateProvider>
) )
} }

View File

@ -28,12 +28,16 @@ export const ModelSwitchRow = (_props: ModelSwitchRowProps) => {
} else { } else {
return null return null
} }
const f0str = x.f0 == true ? "f0" : "nof0" const f0str = x.f0 == true ? "f0" : "nof0"
const srstr = Math.floor(x.samplingRate / 1000) + "K" const srstr = Math.floor(x.samplingRate / 1000) + "K"
const embedstr = x.embChannels const embedstr = x.embChannels
const typestr = x.modelType == 0 ? "org" : "webui" const typestr = x.modelType == 0 ? "org" : "webui"
const metadata = x.deprecated ? "[deprecated version]" : `[${f0str},${srstr},${embedstr},${typestr}]` const metadata = x.deprecated ? `[${index}] [deprecated version]` : `[${index}] [${f0str},${srstr},${embedstr},${typestr}]`
const displayName = `${metadata} ${filename}` const tuning = `tune:${x.defaultTrans}`
const useIndex = x.indexFile != null && x.featureFile != null ? `index:true` : `index:false`
const subMetadata = `(${tuning},${useIndex})`
const displayName = `${metadata} ${filename} ${subMetadata}`
return ( return (
@ -44,7 +48,7 @@ export const ModelSwitchRow = (_props: ModelSwitchRowProps) => {
return ( return (
<> <>
<div className="body-row split-3-7 left-padding-1 guided"> <div className="body-row split-3-7 left-padding-1 guided">
<div className="body-item-title left-padding-1">Swicth Model</div> <div className="body-item-title left-padding-1">Switch Model</div>
<div className="body-input-container"> <div className="body-input-container">
<select className="body-select" value={slot} onChange={(e) => { <select className="body-select" value={slot} onChange={(e) => {
onSwitchModelClicked(Number(e.target.value)) onSwitchModelClicked(Number(e.target.value))

View File

@ -36,11 +36,7 @@ export const ONNXExportRow = (_props: ONNXExportRowProps) => {
const model = appState.serverSetting.serverSetting.modelSlots[slot] const model = appState.serverSetting.serverSetting.modelSlots[slot]
const a = document.createElement("a") const a = document.createElement("a")
if (model.pyTorchModelFile && model.pyTorchModelFile.length > 0) { a.href = model.modelFile
a.href = model.pyTorchModelFile
} else {
a.href = model.onnxModelFile
}
a.download = a.href.replace(/^.*[\\\/]/, ''); a.download = a.href.replace(/^.*[\\\/]/, '');
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();

View File

@ -0,0 +1,86 @@
import { OnnxExporterInfo } from "@dannadori/voice-changer-client-js"
import React, { useMemo } from "react"
import { useAppState } from "../../../001_provider/001_AppStateProvider"
import { useGuiState } from "../001_GuiStateProvider"
export type ServerOpertationRowProps = {
showDownload: boolean
showExportOnnx: boolean
showReload: boolean
}
export const ServerOpertationRow = (props: ServerOpertationRowProps) => {
const appState = useAppState()
const guiState = useGuiState()
const serverOpertationRow = useMemo(() => {
const onnxExportButtonAction = async () => {
if (guiState.isConverting) {
alert("cannot export onnx when voice conversion is enabled")
return
}
document.getElementById("dialog")?.classList.add("dialog-container-show")
guiState.stateControls.showWaitingCheckbox.updateState(true)
const res = await appState.serverSetting.getOnnx() as OnnxExporterInfo
const a = document.createElement("a")
a.href = res.path
a.download = res.filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
guiState.stateControls.showWaitingCheckbox.updateState(false)
}
const onDownloadClicked = () => {
const slot = appState.serverSetting.serverSetting.modelSlotIndex
const model = appState.serverSetting.serverSetting.modelSlots[slot]
const a = document.createElement("a")
a.href = model.modelFile
a.download = a.href.replace(/^.*[\\\/]/, '');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
guiState.stateControls.showWaitingCheckbox.updateState(false)
}
const onReloadClicked = async () => {
const info = await appState.getInfo()
console.log("info", info)
}
const exportOnnx = (
appState.serverSetting.serverSetting.framework == "PyTorch" &&
props.showExportOnnx == true ? <div className="body-button left-margin-1" onClick={onnxExportButtonAction}>export onnx</div> : <></>
)
const download = (
props.showDownload ? <div className="body-button left-margin-1" onClick={() => {
onDownloadClicked()
}}>download</div> : <></>
)
const reload = (
props.showReload ? <div className="body-button-container">
<div className="body-button" onClick={onReloadClicked}>reload</div>
</div> : <></>
)
return (
<>
<div className="body-row split-3-7 left-padding-1 guided">
<div className="body-item-title left-padding-1">Operation</div>
<div className="body-button-container">
{exportOnnx}
{download}
{reload}
</div>
</div>
</>
)
}, [appState.getInfo, appState.serverSetting.serverSetting])
return serverOpertationRow
}

View File

@ -112,7 +112,6 @@ export const AudioOutputRow = (_props: AudioOutputRowProps) => {
const filteredDevice = devices.map((x, index) => { const filteredDevice = devices.map((x, index) => {
const className = (x.hostAPI == hostApi || hostApi == "") ? "select-option-red" : "" const className = (x.hostAPI == hostApi || hostApi == "") ? "select-option-red" : ""
return <option className={className} value={x.index} key={index}>[{x.hostAPI}]{x.name}</option> return <option className={className} value={x.index} key={index}>[{x.hostAPI}]{x.name}</option>
}) })
return ( return (

View File

@ -67,6 +67,7 @@ class MMVC_Rest:
app_fastapi.mount( app_fastapi.mount(
"/upload_dir", StaticFiles(directory=f"{UPLOAD_DIR}"), name="static" "/upload_dir", StaticFiles(directory=f"{UPLOAD_DIR}"), name="static"
) )
app_fastapi.mount("/models", StaticFiles(directory="models"), name="static")
restHello = MMVC_Rest_Hello() restHello = MMVC_Rest_Hello()
app_fastapi.include_router(restHello.router) app_fastapi.include_router(restHello.router)

View File

@ -7,31 +7,9 @@ import json
import os import os
def generateModelSlot_(params):
modelSlot = ModelSlot()
modelSlot.modelFile = params["files"]["rvcModel"]
modelSlot.featureFile = (
params["files"]["rvcFeature"] if "rvcFeature" in params["files"] else None
)
modelSlot.indexFile = (
params["files"]["rvcIndex"] if "rvcIndex" in params["files"] else None
)
modelSlot.defaultTrans = params["trans"] if "trans" in params else 0
modelSlot.isONNX = modelSlot.modelFile.endswith(".onnx")
if modelSlot.isONNX:
_setInfoByONNX(modelSlot)
else:
_setInfoByPytorch(modelSlot)
return modelSlot
def generateModelSlot(slotDir: str): def generateModelSlot(slotDir: str):
modelSlot = ModelSlot() modelSlot = ModelSlot()
if os.path.exists(slotDir) == False: if os.path.exists(slotDir) is False:
return modelSlot return modelSlot
paramFile = os.path.join(slotDir, "params.json") paramFile = os.path.join(slotDir, "params.json")
with open(paramFile, "r") as f: with open(paramFile, "r") as f: