1berry/wokada-voice-changer
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve gui for so-vits-svc

Browse Source
This commit is contained in:
wataru 2023-03-13 09:25:35 +09:00
parent 0fc36c91af
commit 9c62da1a5d
3 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/demo_so-vits-svc_40v2/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

52
client/demo_so-vits-svc_40v2/src/102_model_setting.tsx
View File

@ -10,7 +10,8 @@ export type ServerSettingState = {
export const useModelSettingArea = (): ServerSettingState => { export const useModelSettingArea = (): ServerSettingState => {
const appState = useAppState() const appState = useAppState()
const [showPyTorch, setShowPyTorch] = useState<boolean>(false) // const [showPyTorch, setShowPyTorch] = useState<boolean>(false)
const [showPyTorch, setShowPyTorch] = useState<boolean>(true)
const accodionButton = useMemo(() => { const accodionButton = useMemo(() => {
const accodionButtonProps: HeaderButtonProps = { const accodionButtonProps: HeaderButtonProps = {
@ -107,9 +108,9 @@ export const useModelSettingArea = (): ServerSettingState => {
</div> </div>
<div className="body-item-text"> <div className="body-item-text">
<div> <div>
<input type="checkbox" checked={showPyTorch} onChange={(e) => { {/* <input type="checkbox" checked={showPyTorch} onChange={(e) => {
setShowPyTorch(e.target.checked) setShowPyTorch(e.target.checked)
}} /> enable PyTorch }} /> enable PyTorch */}
</div> </div>
</div> </div>
</div> </div>
@ -124,7 +125,7 @@ export const useModelSettingArea = (): ServerSettingState => {
<div className="body-button left-margin-1" onClick={onConfigFileClearClicked}>clear</div> <div className="body-button left-margin-1" onClick={onConfigFileClearClicked}>clear</div>
</div> </div>
</div> </div>
<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>{onnxModelFilenameText}</div> <div>{onnxModelFilenameText}</div>
@ -133,7 +134,7 @@ export const useModelSettingArea = (): ServerSettingState => {
<div className="body-button" onClick={onOnnxFileLoadClicked}>select</div> <div className="body-button" onClick={onOnnxFileLoadClicked}>select</div>
<div className="body-button left-margin-1" onClick={onOnnxFileClearClicked}>clear</div> <div className="body-button left-margin-1" onClick={onOnnxFileClearClicked}>clear</div>
</div> </div>
</div> </div> */}
{showPyTorch ? {showPyTorch ?
( (
<div className="body-row split-3-3-4 left-padding-1 guided"> <div className="body-row split-3-3-4 left-padding-1 guided">
@ -175,26 +176,27 @@ export const useModelSettingArea = (): ServerSettingState => {
showPyTorch]) showPyTorch])
const frameworkRow = useMemo(() => { const frameworkRow = useMemo(() => {
const onFrameworkChanged = async (val: Framework) => { return <></>
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, framework: val }) // const onFrameworkChanged = async (val: Framework) => {
} // appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, framework: val })
return ( // }
<div className="body-row split-3-7 left-padding-1 guided"> // return (
<div className="body-item-title left-padding-1">Framework</div> // <div className="body-row split-3-7 left-padding-1 guided">
<div className="body-select-container"> // <div className="body-item-title left-padding-1">Framework</div>
<select className="body-select" value={appState.serverSetting.serverSetting.framework} onChange={(e) => { // <div className="body-select-container">
onFrameworkChanged(e.target.value as // <select className="body-select" value={appState.serverSetting.serverSetting.framework} onChange={(e) => {
Framework) // onFrameworkChanged(e.target.value as
}}> // Framework)
{ // }}>
Object.values(Framework).map(x => { // {
return <option key={x} value={x}>{x}</option> // Object.values(Framework).map(x => {
}) // return <option key={x} value={x}>{x}</option>
} // })
</select> // }
</div> // </select>
</div> // </div>
) // </div>
// )
}, [appState.serverSetting.serverSetting.framework, appState.serverSetting.updateServerSettings]) }, [appState.serverSetting.serverSetting.framework, appState.serverSetting.updateServerSettings])
const onnxExecutionProviderRow = useMemo(() => { const onnxExecutionProviderRow = useMemo(() => {

30
client/demo_so-vits-svc_40v2/src/105_speaker_setting.tsx
View File

@ -44,9 +44,8 @@ export const useSpeakerSetting = () => {
const tranRow = useMemo(() => { const tranRow = useMemo(() => {
return ( return (
<div className="body-row split-3-2-2-3 left-padding-1 guided"> <div className="body-row split-3-2-2-3 left-padding-1 guided">
<div className="body-item-title left-padding-1 ">Tuning</div> <div className="body-item-title left-padding-1 ">Tran</div>
<div> <div>
<span className="body-item-input-slider-label">tran</span>
<input type="range" className="body-item-input-slider" min="-50" max="50" step="1" value={appState.serverSetting.serverSetting.tran} onChange={(e) => { <input type="range" className="body-item-input-slider" min="-50" max="50" step="1" value={appState.serverSetting.serverSetting.tran} onChange={(e) => {
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, tran: Number(e.target.value) }) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, tran: Number(e.target.value) })
}}></input> }}></input>
@ -67,19 +66,30 @@ export const useSpeakerSetting = () => {
]) ])
const noiseControlRow = useMemo(() => { const noiceScaleRow = useMemo(() => {
return ( return (
<div className="body-row split-3-2-2-3 left-padding-1 guided"> <div className="body-row split-3-3-4 left-padding-1 guided">
<div className="body-item-title left-padding-1 ">Noise Control</div> <div className="body-item-title left-padding-1 ">Noice Scale</div>
<div> <div>
<span className="body-item-input-slider-label">n-scale</span>
<input type="range" className="body-item-input-slider" min="0" max="1" step="0.1" value={appState.serverSetting.serverSetting.noiceScale} onChange={(e) => { <input type="range" className="body-item-input-slider" min="0" max="1" step="0.1" value={appState.serverSetting.serverSetting.noiceScale} onChange={(e) => {
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, noiceScale: Number(e.target.value) }) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, noiceScale: Number(e.target.value) })
}}></input> }}></input>
<span className="body-item-input-slider-val">{appState.serverSetting.serverSetting.noiceScale}</span> <span className="body-item-input-slider-val">{appState.serverSetting.serverSetting.noiceScale}</span>
</div> </div>
<div className="body-button-container">
</div>
</div>
)
}, [
appState.serverSetting.serverSetting,
appState.serverSetting.updateServerSettings
])
const silentThresholdRow = useMemo(() => {
return (
<div className="body-row split-3-3-4 left-padding-1 guided">
<div className="body-item-title left-padding-1 ">Silent Threshold</div>
<div> <div>
<span className="body-item-input-slider-label">silent thr</span>
<input type="range" className="body-item-input-slider" min="0.00000" max="0.001" step="0.00001" value={appState.serverSetting.serverSetting.silentThreshold} onChange={(e) => { <input type="range" className="body-item-input-slider" min="0.00000" max="0.001" step="0.00001" value={appState.serverSetting.serverSetting.silentThreshold} onChange={(e) => {
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, silentThreshold: Number(e.target.value) }) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, silentThreshold: Number(e.target.value) })
}}></input> }}></input>
@ -95,7 +105,6 @@ export const useSpeakerSetting = () => {
appState.serverSetting.updateServerSettings appState.serverSetting.updateServerSettings
]) ])
const speakerSetting = useMemo(() => { const speakerSetting = useMemo(() => {
return ( return (
<> <>
@ -113,12 +122,13 @@ export const useSpeakerSetting = () => {
<div className="partition-content"> <div className="partition-content">
{dstIdRow} {dstIdRow}
{tranRow} {tranRow}
{noiseControlRow} {noiceScaleRow}
{silentThresholdRow}
</div> </div>
</div> </div>
</> </>
) )
}, [dstIdRow, tranRow, noiseControlRow]) }, [dstIdRow, tranRow, noiceScaleRow, silentThresholdRow])
return { return {
speakerSetting, speakerSetting,