WIP: refactoring, passthru server config

This commit is contained in:
wataru 2023-02-19 10:12:25 +09:00
parent 096ada6e3d
commit 98ad3b4ff0
10 changed files with 233 additions and 512 deletions

View File

@ -94,9 +94,9 @@ export const useServerControl = () => {
<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-1">Model Info:</div> <div className="body-item-title left-padding-1">Model Info:</div>
<div className="body-item-text"> <div className="body-item-text">
<span className="body-item-text-item">{appState.serverSetting.serverInfo?.configFile || ""}</span> <span className="body-item-text-item">{appState.serverSetting.serverSetting.configFile || ""}</span>
<span className="body-item-text-item">{appState.serverSetting.serverInfo?.pyTorchModelFile || ""}</span> <span className="body-item-text-item">{appState.serverSetting.serverSetting.pyTorchModelFile || ""}</span>
<span className="body-item-text-item">{appState.serverSetting.serverInfo?.onnxModelFile || ""}</span> <span className="body-item-text-item">{appState.serverSetting.serverSetting.onnxModelFile || ""}</span>
</div> </div>
@ -106,7 +106,7 @@ export const useServerControl = () => {
</div> </div>
</> </>
) )
}, [appState.getInfo, appState.serverSetting.serverInfo]) }, [appState.getInfo, appState.serverSetting.serverSetting])
const serverControl = useMemo(() => { const serverControl = useMemo(() => {
return ( return (

View File

@ -190,13 +190,13 @@ export const useModelSettingArea = (): ServerSettingState => {
const frameworkRow = useMemo(() => { const frameworkRow = useMemo(() => {
const onFrameworkChanged = async (val: Framework) => { const onFrameworkChanged = async (val: Framework) => {
appState.serverSetting.setFramework(val) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, framework: val })
} }
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">Framework</div> <div className="body-item-title left-padding-1">Framework</div>
<div className="body-select-container"> <div className="body-select-container">
<select className="body-select" value={appState.serverSetting.setting.framework} onChange={(e) => { <select className="body-select" value={appState.serverSetting.serverSetting.framework} onChange={(e) => {
onFrameworkChanged(e.target.value as onFrameworkChanged(e.target.value as
Framework) Framework)
}}> }}>
@ -209,20 +209,20 @@ export const useModelSettingArea = (): ServerSettingState => {
</div> </div>
</div> </div>
) )
}, [appState.serverSetting.setting.framework, appState.serverSetting.setFramework]) }, [appState.serverSetting.serverSetting.framework, appState.serverSetting.updateServerSettings])
const onnxExecutionProviderRow = useMemo(() => { const onnxExecutionProviderRow = useMemo(() => {
if (appState.serverSetting.setting.framework != "ONNX") { if (appState.serverSetting.serverSetting.framework != "ONNX") {
return return
} }
const onOnnxExecutionProviderChanged = async (val: OnnxExecutionProvider) => { const onOnnxExecutionProviderChanged = async (val: OnnxExecutionProvider) => {
appState.serverSetting.setOnnxExecutionProvider(val) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, onnxExecutionProvider: val })
} }
return ( return (
<div className="body-row split-3-7 left-padding-1"> <div className="body-row split-3-7 left-padding-1">
<div className="body-item-title left-padding-2">OnnxExecutionProvider</div> <div className="body-item-title left-padding-2">OnnxExecutionProvider</div>
<div className="body-select-container"> <div className="body-select-container">
<select className="body-select" value={appState.serverSetting.setting.onnxExecutionProvider} onChange={(e) => { <select className="body-select" value={appState.serverSetting.serverSetting.onnxExecutionProvider} onChange={(e) => {
onOnnxExecutionProviderChanged(e.target.value as onOnnxExecutionProviderChanged(e.target.value as
OnnxExecutionProvider) OnnxExecutionProvider)
}}> }}>
@ -235,7 +235,7 @@ export const useModelSettingArea = (): ServerSettingState => {
</div> </div>
</div> </div>
) )
}, [appState.serverSetting.setting.framework, appState.serverSetting.setting.onnxExecutionProvider, appState.serverSetting.setOnnxExecutionProvider]) }, [appState.serverSetting.serverSetting.framework, appState.serverSetting.serverSetting.onnxExecutionProvider, appState.serverSetting.updateServerSettings])
const modelSetting = useMemo(() => { const modelSetting = useMemo(() => {
return ( return (

View File

@ -157,7 +157,6 @@ export const useDeviceSetting = (): DeviceSettingState => {
} else { } else {
console.log("server mic") console.log("server mic")
appState.clientSetting.setAudioInput(null) appState.clientSetting.setAudioInput(null)
appState.serverSetting.setServerMicrophone(Number(audioInputForGUI))
} }
} }
}, [appState.audioContext, audioInputForGUI, appState.clientSetting.setAudioInput]) }, [appState.audioContext, audioInputForGUI, appState.clientSetting.setAudioInput])

View File

@ -110,8 +110,8 @@ export const useQualityControl = (): QualityControlState => {
<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 ">F0 Detector</div> <div className="body-item-title left-padding-1 ">F0 Detector</div>
<div className="body-select-container"> <div className="body-select-container">
<select className="body-select" value={appState.serverSetting.setting.f0Detector} onChange={(e) => { <select className="body-select" value={appState.serverSetting.serverSetting.f0Detector} onChange={(e) => {
appState.serverSetting.setF0Detector(e.target.value as F0Detector) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, f0Detector: e.target.value as F0Detector })
}}> }}>
{ {
Object.values(F0Detector).map(x => { Object.values(F0Detector).map(x => {
@ -123,17 +123,17 @@ export const useQualityControl = (): QualityControlState => {
</div> </div>
</div> </div>
) )
}, [appState.serverSetting.setting.f0Detector, appState.serverSetting.setF0Detector]) }, [appState.serverSetting.serverSetting.f0Detector, appState.serverSetting.updateServerSettings])
const recordIORow = useMemo(() => { const recordIORow = useMemo(() => {
const onRecordStartClicked = async () => { const onRecordStartClicked = async () => {
setRecording(true) setRecording(true)
await appState.serverSetting.setRecordIO(1) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 1 })
} }
const onRecordStopClicked = async () => { const onRecordStopClicked = async () => {
setRecording(false) setRecording(false)
await appState.serverSetting.setRecordIO(0) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 0 })
} }
const onRecordAnalizeClicked = async () => { const onRecordAnalizeClicked = async () => {
if (appState.frontendManagerState.isConverting) { if (appState.frontendManagerState.isConverting) {
@ -141,7 +141,7 @@ export const useQualityControl = (): QualityControlState => {
return return
} }
appState.frontendManagerState.setIsAnalyzing(true) appState.frontendManagerState.setIsAnalyzing(true)
await appState.serverSetting.setRecordIO(2) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 2 })
// set spectrogram (dio) // set spectrogram (dio)
const imageDio = document.getElementById("body-image-container-img-dio") as HTMLImageElement const imageDio = document.getElementById("body-image-container-img-dio") as HTMLImageElement
imageDio.src = "/tmp/analyze-dio.png?" + new Date().getTime() imageDio.src = "/tmp/analyze-dio.png?" + new Date().getTime()
@ -252,7 +252,7 @@ export const useQualityControl = (): QualityControlState => {
</div> </div>
</> </>
) )
}, [appState.serverSetting.setting.recordIO, appState.serverSetting.setRecordIO, outputAudioDeviceInfo, audioOutputForGUI, appState.frontendManagerState.isAnalyzing, appState.frontendManagerState.isConverting]) }, [appState.serverSetting.serverSetting.recordIO, appState.serverSetting.updateServerSettings, outputAudioDeviceInfo, audioOutputForGUI, appState.frontendManagerState.isAnalyzing, appState.frontendManagerState.isConverting])
const QualityControlContent = useMemo(() => { const QualityControlContent = useMemo(() => {
return ( return (

View File

@ -19,33 +19,45 @@ export const useSpeakerSetting = () => {
const [editSpeakerTargetId, setEditSpeakerTargetId] = useState<number>(0) const [editSpeakerTargetId, setEditSpeakerTargetId] = useState<number>(0)
const [editSpeakerTargetName, setEditSpeakerTargetName] = useState<string>("") const [editSpeakerTargetName, setEditSpeakerTargetName] = useState<string>("")
useEffect(() => { // useEffect(() => {
// const src = appState.clientSetting.setting.correspondences?.find(x => {
// return x.sid == appState.serverSetting.serverSetting.srcId
// })
// const dst = appState.clientSetting.setting.correspondences?.find(x => {
// return x.sid == appState.serverSetting.serverSetting.dstId
// })
// const recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0
// appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, f0Factor: recommendedF0Factor })
// }, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.serverSetting.updateServerSettings])
const calcDefaultF0Factor = (srcId: number, dstId: number) => {
const src = appState.clientSetting.setting.correspondences?.find(x => { const src = appState.clientSetting.setting.correspondences?.find(x => {
return x.sid == appState.serverSetting.setting.srcId return x.sid == srcId
}) })
const dst = appState.clientSetting.setting.correspondences?.find(x => { const dst = appState.clientSetting.setting.correspondences?.find(x => {
return x.sid == appState.serverSetting.setting.dstId return x.sid == dstId
}) })
const recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0 const recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0
appState.serverSetting.setF0Factor(recommendedF0Factor) return recommendedF0Factor
}
}, [appState.serverSetting.setting.srcId, appState.serverSetting.setting.dstId]) console.log()
const srcIdRow = useMemo(() => { const srcIdRow = useMemo(() => {
const selected = appState.clientSetting.setting.correspondences?.find(x => { const selected = appState.clientSetting.setting.correspondences?.find(x => {
return x.sid == appState.serverSetting.setting.srcId return x.sid == appState.serverSetting.serverSetting.srcId
}) })
return ( return (
<div className="body-row split-3-2-1-4 left-padding-1 guided"> <div className="body-row split-3-2-1-4 left-padding-1 guided">
<div className="body-item-title left-padding-1">Source Speaker Id</div> <div className="body-item-title left-padding-1">Source Speaker Id</div>
<div className="body-select-container"> <div className="body-select-container">
<select className="body-select" value={appState.serverSetting.setting.srcId} onChange={(e) => { <select className="body-select" value={appState.serverSetting.serverSetting.srcId} onChange={(e) => {
appState.serverSetting.setSrcId(Number(e.target.value)) const recF0 = calcDefaultF0Factor(Number(e.target.value), appState.serverSetting.serverSetting.dstId)
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, srcId: Number(e.target.value), f0Factor: recF0 })
}}> }}>
{ {
// appState.clientSetting.setting.speakers.map(x => {
// return <option key={x.id} value={x.id}>{x.name}({x.id})</option>
// })
appState.clientSetting.setting.correspondences?.map(x => { appState.clientSetting.setting.correspondences?.map(x => {
return <option key={x.sid} value={x.sid}>{x.dirname}({x.sid})</option> return <option key={x.sid} value={x.sid}>{x.dirname}({x.sid})</option>
}) })
@ -59,18 +71,20 @@ export const useSpeakerSetting = () => {
<div className="body-item-text"></div> <div className="body-item-text"></div>
</div> </div>
) )
}, [appState.clientSetting.setting.speakers, appState.serverSetting.setting.srcId, appState.clientSetting.setting.correspondences, appState.serverSetting.setSrcId]) }, [appState.clientSetting.setting.speakers, appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.setting.correspondences, appState.serverSetting.updateServerSettings])
const dstIdRow = useMemo(() => { const dstIdRow = useMemo(() => {
const selected = appState.clientSetting.setting.correspondences?.find(x => { const selected = appState.clientSetting.setting.correspondences?.find(x => {
return x.sid == appState.serverSetting.setting.dstId return x.sid == appState.serverSetting.serverSetting.dstId
}) })
return ( return (
<div className="body-row split-3-2-1-4 left-padding-1 guided"> <div className="body-row split-3-2-1-4 left-padding-1 guided">
<div className="body-item-title left-padding-1">Destination Speaker Id</div> <div className="body-item-title left-padding-1">Destination Speaker Id</div>
<div className="body-select-container"> <div className="body-select-container">
<select className="body-select" value={appState.serverSetting.setting.dstId} onChange={(e) => { <select className="body-select" value={appState.serverSetting.serverSetting.dstId} onChange={(e) => {
appState.serverSetting.setDstId(Number(e.target.value)) const recF0 = calcDefaultF0Factor(appState.serverSetting.serverSetting.srcId, Number(e.target.value))
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, dstId: Number(e.target.value), f0Factor: recF0 })
}}> }}>
{ {
// appState.clientSetting.setting.speakers.map(x => { // appState.clientSetting.setting.speakers.map(x => {
@ -88,7 +102,7 @@ export const useSpeakerSetting = () => {
<div className="body-item-text"></div> <div className="body-item-text"></div>
</div> </div>
) )
}, [appState.clientSetting.setting.speakers, appState.serverSetting.setting.dstId, appState.clientSetting.setting.correspondences, appState.serverSetting.setDstId]) }, [appState.clientSetting.setting.speakers, appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.setting.correspondences, appState.serverSetting.updateServerSettings])
const editSpeakerIdMappingRow = useMemo(() => { const editSpeakerIdMappingRow = useMemo(() => {
const onSetSpeakerMappingClicked = async () => { const onSetSpeakerMappingClicked = async () => {
@ -139,10 +153,10 @@ export const useSpeakerSetting = () => {
const f0FactorRow = useMemo(() => { const f0FactorRow = useMemo(() => {
const src = appState.clientSetting.setting.correspondences?.find(x => { const src = appState.clientSetting.setting.correspondences?.find(x => {
return x.sid == appState.serverSetting.setting.srcId return x.sid == appState.serverSetting.serverSetting.srcId
}) })
const dst = appState.clientSetting.setting.correspondences?.find(x => { const dst = appState.clientSetting.setting.correspondences?.find(x => {
return x.sid == appState.serverSetting.setting.dstId return x.sid == appState.serverSetting.serverSetting.dstId
}) })
const recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0 const recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0
@ -151,16 +165,16 @@ export const useSpeakerSetting = () => {
<div className="body-row split-3-2-1-4 left-padding-1 guided"> <div className="body-row split-3-2-1-4 left-padding-1 guided">
<div className="body-item-title left-padding-1">F0 Factor</div> <div className="body-item-title left-padding-1">F0 Factor</div>
<div className="body-input-container"> <div className="body-input-container">
<input type="range" className="body-item-input-slider" min="0.1" max="5.0" step="0.1" value={appState.serverSetting.setting.f0Factor} onChange={(e) => { <input type="range" className="body-item-input-slider" min="0.1" max="5.0" step="0.1" value={appState.serverSetting.serverSetting.f0Factor} onChange={(e) => {
appState.serverSetting.setF0Factor(Number(e.target.value)) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, f0Factor: Number(e.target.value) })
}}></input> }}></input>
<span className="body-item-input-slider-val">{appState.serverSetting.setting.f0Factor.toFixed(1)}</span> <span className="body-item-input-slider-val">{appState.serverSetting.serverSetting.f0Factor.toFixed(1)}</span>
</div> </div>
<div className="body-item-text"></div> <div className="body-item-text"></div>
<div className="body-item-text">recommend: {recommendedF0Factor.toFixed(1)}</div> <div className="body-item-text">recommend: {recommendedF0Factor.toFixed(1)}</div>
</div> </div>
) )
}, [appState.serverSetting.setting.f0Factor, appState.serverSetting.setting.srcId, appState.serverSetting.setting.dstId, appState.clientSetting.setting.correspondences, appState.serverSetting.setF0Factor]) }, [appState.serverSetting.serverSetting.f0Factor, appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.setting.correspondences, appState.serverSetting.updateServerSettings])
const speakerSetting = useMemo(() => { const speakerSetting = useMemo(() => {
return ( return (

View File

@ -43,13 +43,13 @@ export const useConvertSetting = (): ConvertSettingState => {
<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">GPU</div> <div className="body-item-title left-padding-1">GPU</div>
<div className="body-input-container"> <div className="body-input-container">
<input type="number" min={-2} max={5} step={1} value={appState.serverSetting.setting.gpu} onChange={(e) => { <input type="number" min={-2} max={5} step={1} value={appState.serverSetting.serverSetting.gpu} onChange={(e) => {
appState.serverSetting.setGpu(Number(e.target.value)) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, gpu: Number(e.target.value) })
}} /> }} />
</div> </div>
</div> </div>
) )
}, [appState.serverSetting.setting.gpu, appState.serverSetting.setGpu]) }, [appState.serverSetting.serverSetting.gpu, appState.serverSetting.updateServerSettings])
const convertSetting = useMemo(() => { const convertSetting = useMemo(() => {

View File

@ -89,8 +89,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
<div className="body-select-container"> <div className="body-select-container">
<select className="body-select" value={appState.clientSetting.setting.sendingSampleRate} onChange={(e) => { <select className="body-select" value={appState.clientSetting.setting.sendingSampleRate} onChange={(e) => {
appState.clientSetting.setSendingSampleRate(Number(e.target.value) as InputSampleRate) appState.clientSetting.setSendingSampleRate(Number(e.target.value) as InputSampleRate)
appState.serverSetting.setInputSampleRate(Number(e.target.value) as InputSampleRate) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, inputSampleRate: Number(e.target.value) as InputSampleRate })
}}> }}>
{ {
Object.values(InputSampleRate).map(x => { Object.values(InputSampleRate).map(x => {
@ -101,7 +100,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
</div> </div>
</div> </div>
) )
}, [appState.clientSetting.setting.sendingSampleRate, appState.clientSetting.setSendingSampleRate, appState.serverSetting.setInputSampleRate]) }, [appState.clientSetting.setting.sendingSampleRate, appState.clientSetting.setSendingSampleRate, appState.serverSetting.updateServerSettings])
const bufferSizeRow = useMemo(() => { const bufferSizeRow = useMemo(() => {
return ( return (
@ -123,55 +122,14 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
) )
}, [appState.clientSetting.setting.bufferSize, appState.clientSetting.setBufferSize]) }, [appState.clientSetting.setting.bufferSize, appState.clientSetting.setBufferSize])
const convertChunkNumRow = useMemo(() => {
return (
<div className="body-row split-3-7 left-padding-1 guided">
<div className="body-item-title left-padding-1">Convert Chunk Num(128sample/chunk)</div>
<div className="body-input-container">
<input type="number" min={1} max={256} step={1} value={appState.serverSetting.setting.convertChunkNum} onChange={(e) => {
appState.serverSetting.setConvertChunkNum(Number(e.target.value))
}} />
</div>
</div>
)
}, [appState.serverSetting.setting.convertChunkNum, appState.serverSetting.setConvertChunkNum])
const minConvertSizeRow = useMemo(() => {
return (
<div className="body-row split-3-7 left-padding-1 guided">
<div className="body-item-title left-padding-1">Min Convert Size(byte)</div>
<div className="body-input-container">
<input type="number" min={0} max={8196} step={8196} value={appState.serverSetting.setting.minConvertSize} onChange={(e) => {
appState.serverSetting.setMinConvertSize(Number(e.target.value))
}} />
</div>
</div>
)
}, [appState.serverSetting.setting.minConvertSize, appState.serverSetting.setMinConvertSize])
const crossFadeOverlapRateRow = useMemo(() => {
return (
<div className="body-row split-3-7 left-padding-1 guided">
<div className="body-item-title left-padding-1">Cross Fade Overlap Rate</div>
<div className="body-input-container">
<input type="number" min={0.1} max={1} step={0.1} value={appState.serverSetting.setting.crossFadeOverlapRate} onChange={(e) => {
appState.serverSetting.setCrossFadeOverlapRate(Number(e.target.value))
}} />
</div>
</div>
)
}, [appState.serverSetting.setting.crossFadeOverlapRate, appState.serverSetting.setCrossFadeOverlapRate])
const crossFadeOverlapSizeRow = useMemo(() => { const crossFadeOverlapSizeRow = useMemo(() => {
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">Cross Fade Overlap Size</div> <div className="body-item-title left-padding-1">Cross Fade Overlap Size</div>
<div className="body-select-container"> <div className="body-select-container">
<select className="body-select" value={appState.serverSetting.setting.crossFadeOverlapSize} onChange={(e) => { <select className="body-select" value={appState.serverSetting.serverSetting.crossFadeOverlapSize} onChange={(e) => {
appState.serverSetting.setCrossFadeOverlapSize(Number(e.target.value) as CrossFadeOverlapSize) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, crossFadeOverlapSize: Number(e.target.value) as CrossFadeOverlapSize })
}}> }}>
{ {
Object.values(CrossFadeOverlapSize).map(x => { Object.values(CrossFadeOverlapSize).map(x => {
@ -182,33 +140,33 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
</div> </div>
</div> </div>
) )
}, [appState.serverSetting.setting.crossFadeOverlapSize, appState.serverSetting.setCrossFadeOverlapSize]) }, [appState.serverSetting.serverSetting.crossFadeOverlapSize, appState.serverSetting.updateServerSettings])
const crossFadeOffsetRateRow = useMemo(() => { const crossFadeOffsetRateRow = useMemo(() => {
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">Cross Fade Offset Rate</div> <div className="body-item-title left-padding-1">Cross Fade Offset Rate</div>
<div className="body-input-container"> <div className="body-input-container">
<input type="number" min={0} max={1} step={0.1} value={appState.serverSetting.setting.crossFadeOffsetRate} onChange={(e) => { <input type="number" min={0} max={1} step={0.1} value={appState.serverSetting.serverSetting.crossFadeOffsetRate} onChange={(e) => {
appState.serverSetting.setCrossFadeOffsetRate(Number(e.target.value)) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, crossFadeOffsetRate: Number(e.target.value) })
}} /> }} />
</div> </div>
</div> </div>
) )
}, [appState.serverSetting.setting.crossFadeOffsetRate, appState.serverSetting.setCrossFadeOffsetRate]) }, [appState.serverSetting.serverSetting.crossFadeOffsetRate, appState.serverSetting.updateServerSettings])
const crossFadeEndRateRow = useMemo(() => { const crossFadeEndRateRow = useMemo(() => {
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">Cross Fade End Rate</div> <div className="body-item-title left-padding-1">Cross Fade End Rate</div>
<div className="body-input-container"> <div className="body-input-container">
<input type="number" min={0} max={1} step={0.1} value={appState.serverSetting.setting.crossFadeEndRate} onChange={(e) => { <input type="number" min={0} max={1} step={0.1} value={appState.serverSetting.serverSetting.crossFadeEndRate} onChange={(e) => {
appState.serverSetting.setCrossFadeEndRate(Number(e.target.value)) appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, crossFadeEndRate: Number(e.target.value) })
}} /> }} />
</div> </div>
</div> </div>
) )
}, [appState.serverSetting.setting.crossFadeEndRate, appState.serverSetting.setCrossFadeEndRate]) }, [appState.serverSetting.serverSetting.crossFadeEndRate, appState.serverSetting.updateServerSettings])
const voiceChangeModeRow = useMemo(() => { const voiceChangeModeRow = useMemo(() => {
@ -306,10 +264,6 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
{sendingSampleRateRow} {sendingSampleRateRow}
{bufferSizeRow} {bufferSizeRow}
<div className="body-row divider"></div> <div className="body-row divider"></div>
{convertChunkNumRow}
{minConvertSizeRow}
{crossFadeOverlapRateRow}
{crossFadeOverlapSizeRow} {crossFadeOverlapSizeRow}
{crossFadeOffsetRateRow} {crossFadeOffsetRateRow}
{crossFadeEndRateRow} {crossFadeEndRateRow}
@ -322,7 +276,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
</> </>
) )
}, [mmvcServerUrlRow, protocolRow, sampleRateRow, sendingSampleRateRow, bufferSizeRow, convertChunkNumRow, minConvertSizeRow, crossFadeOverlapRateRow, crossFadeOverlapSizeRow, crossFadeOffsetRateRow, crossFadeEndRateRow, voiceChangeModeRow, workletSettingRow, downSamplingModeRow]) }, [mmvcServerUrlRow, protocolRow, sampleRateRow, sendingSampleRateRow, bufferSizeRow, crossFadeOverlapSizeRow, crossFadeOffsetRateRow, crossFadeEndRateRow, voiceChangeModeRow, workletSettingRow, downSamplingModeRow])
const advancedSetting = useMemo(() => { const advancedSetting = useMemo(() => {

View File

@ -4,35 +4,128 @@
// 24000sample -> 1sec, 128sample(1chunk) -> 5.333msec // 24000sample -> 1sec, 128sample(1chunk) -> 5.333msec
// 187.5chunk -> 1sec // 187.5chunk -> 1sec
///////////////////////
// サーバセッティング
///////////////////////
export const InputSampleRate = {
"48000": 48000,
"24000": 24000
} as const
export type InputSampleRate = typeof InputSampleRate[keyof typeof InputSampleRate]
export const CrossFadeOverlapSize = {
"1024": 1024,
"2048": 2048,
"4096": 4096,
} as const
export type CrossFadeOverlapSize = typeof CrossFadeOverlapSize[keyof typeof CrossFadeOverlapSize]
export const OnnxExecutionProvider = {
"CPUExecutionProvider": "CPUExecutionProvider",
"CUDAExecutionProvider": "CUDAExecutionProvider",
"DmlExecutionProvider": "DmlExecutionProvider",
"OpenVINOExecutionProvider": "OpenVINOExecutionProvider",
} as const
export type OnnxExecutionProvider = typeof OnnxExecutionProvider[keyof typeof OnnxExecutionProvider]
export const Framework = {
"PyTorch": "PyTorch",
"ONNX": "ONNX",
} as const
export type Framework = typeof Framework[keyof typeof Framework]
export const F0Detector = {
"dio": "dio",
"harvest": "harvest",
} as const
export type F0Detector = typeof F0Detector[keyof typeof F0Detector]
export const ServerSettingKey = {
"srcId": "srcId",
"dstId": "dstId",
"gpu": "gpu",
"crossFadeOffsetRate": "crossFadeOffsetRate",
"crossFadeEndRate": "crossFadeEndRate",
"crossFadeOverlapSize": "crossFadeOverlapSize",
"framework": "framework",
"onnxExecutionProvider": "onnxExecutionProvider",
"f0Factor": "f0Factor",
"f0Detector": "f0Detector",
"recordIO": "recordIO",
"inputSampleRate": "inputSampleRate",
} as const
export type ServerSettingKey = typeof ServerSettingKey[keyof typeof ServerSettingKey]
// types
export type VoiceChangerServerSetting = { export type VoiceChangerServerSetting = {
// VITSに入力する変換サイズ。(入力データの2倍以上の大きさで指定。それより小さいものが指定された場合は、
// サーバ側で自動的に入力の2倍のサイズが設定される。)
convertChunkNum: number,
minConvertSize: number, // この値より小さい場合にこの値に揃える。
srcId: number, srcId: number,
dstId: number, dstId: number,
gpu: number, gpu: number,
crossFadeLowerValue: number,
crossFadeOffsetRate: number, crossFadeOffsetRate: number,
crossFadeEndRate: number, crossFadeEndRate: number,
crossFadeOverlapRate: number, crossFadeOverlapSize: CrossFadeOverlapSize,
crossFadeOverlapSize: number,
framework: Framework framework: Framework
onnxExecutionProvider: OnnxExecutionProvider, onnxExecutionProvider: OnnxExecutionProvider,
f0Factor: number f0Factor: number
f0Detector: string // dio or harvest f0Detector: F0Detector // dio or harvest
recordIO: number // 0:off, 1:on recordIO: number // 0:off, 1:on
serverMicProps: string
inputSampleRate: InputSampleRate inputSampleRate: InputSampleRate
} }
export type ServerInfo = VoiceChangerServerSetting & {
status: string
configFile: string,
pyTorchModelFile: string,
onnxModelFile: string,
onnxExecutionProviders: OnnxExecutionProvider[]
}
export const DefaultServerSetting: ServerInfo = {
srcId: 0,
dstId: 101,
gpu: 0,
crossFadeOffsetRate: 0.1,
crossFadeEndRate: 0.9,
crossFadeOverlapSize: CrossFadeOverlapSize[4096],
framework: Framework.PyTorch,
f0Factor: 1.0,
onnxExecutionProvider: OnnxExecutionProvider.CPUExecutionProvider,
f0Detector: F0Detector.dio,
recordIO: 0,
inputSampleRate: 48000,
//
status: "ok",
configFile: "",
pyTorchModelFile: "",
onnxModelFile: "",
onnxExecutionProviders: []
}
///////////////////////
// Workletセッティング
///////////////////////
///////////////////////
// Clientセッティング
///////////////////////
export type VoiceChangerClientSetting = { export type VoiceChangerClientSetting = {
audioInput: string | MediaStream | null, audioInput: string | MediaStream | null,
mmvcServerUrl: string, mmvcServerUrl: string,
@ -70,29 +163,6 @@ export type Correspondence = {
} }
export type ServerInfo = {
status: string
configFile: string,
pyTorchModelFile: string,
onnxModelFile: string,
convertChunkNum: number,
minConvertSize: number,
crossFadeOffsetRate: number,
crossFadeEndRate: number,
crossFadeOverlapRate: number,
crossFadeOverlapSize: number,
gpu: number,
srcId: number,
dstId: number,
framework: Framework,
onnxExecutionProvider: string[]
f0Factor: number
f0Detector: string
recordIO: number
serverMicProps: string
inputSampleRate: InputSampleRate
}
export type ServerAudioDevice = { export type ServerAudioDevice = {
kind: string, kind: string,
index: number, index: number,
@ -137,12 +207,6 @@ export const SendingSampleRate = {
} as const } as const
export type SendingSampleRate = typeof SendingSampleRate[keyof typeof SendingSampleRate] export type SendingSampleRate = typeof SendingSampleRate[keyof typeof SendingSampleRate]
export const InputSampleRate = {
"48000": 48000,
"24000": 24000
} as const
export type InputSampleRate = typeof InputSampleRate[keyof typeof InputSampleRate]
export const BufferSize = { export const BufferSize = {
"256": 256, "256": 256,
"512": 512, "512": 512,
@ -154,73 +218,8 @@ export const BufferSize = {
} as const } as const
export type BufferSize = typeof BufferSize[keyof typeof BufferSize] export type BufferSize = typeof BufferSize[keyof typeof BufferSize]
export const OnnxExecutionProvider = {
"CPUExecutionProvider": "CPUExecutionProvider",
"CUDAExecutionProvider": "CUDAExecutionProvider",
"DmlExecutionProvider": "DmlExecutionProvider",
"OpenVINOExecutionProvider": "OpenVINOExecutionProvider",
} as const
export type OnnxExecutionProvider = typeof OnnxExecutionProvider[keyof typeof OnnxExecutionProvider]
export const Framework = {
"PyTorch": "PyTorch",
"ONNX": "ONNX",
} as const
export type Framework = typeof Framework[keyof typeof Framework]
export const F0Detector = {
"dio": "dio",
"harvest": "harvest",
} as const
export type F0Detector = typeof F0Detector[keyof typeof F0Detector]
export const CrossFadeOverlapSize = {
"1024": 1024,
"2048": 2048,
"4096": 4096,
} as const
export type CrossFadeOverlapSize = typeof CrossFadeOverlapSize[keyof typeof CrossFadeOverlapSize]
export const ServerSettingKey = {
"srcId": "srcId",
"dstId": "dstId",
"convertChunkNum": "convertChunkNum",
"minConvertSize": "minConvertSize",
"gpu": "gpu",
"crossFadeOffsetRate": "crossFadeOffsetRate",
"crossFadeEndRate": "crossFadeEndRate",
"crossFadeOverlapRate": "crossFadeOverlapRate",
"crossFadeOverlapSize": "crossFadeOverlapSize",
"framework": "framework",
"onnxExecutionProvider": "onnxExecutionProvider",
"f0Factor": "f0Factor",
"f0Detector": "f0Detector",
"recordIO": "recordIO",
"serverMicProps": "serverMicProps",
"inputSampleRate": "inputSampleRate",
} as const
export type ServerSettingKey = typeof ServerSettingKey[keyof typeof ServerSettingKey]
// Defaults // Defaults
export const DefaultVoiceChangerServerSetting: VoiceChangerServerSetting = {
convertChunkNum: 32, //(★1)
minConvertSize: 0,
srcId: 0,
dstId: 101,
gpu: 0,
crossFadeLowerValue: 0.1,
crossFadeOffsetRate: 0.1,
crossFadeEndRate: 0.9,
crossFadeOverlapRate: 0.5,
crossFadeOverlapSize: CrossFadeOverlapSize[4096],
framework: "PyTorch",
f0Factor: 1.0,
onnxExecutionProvider: "CPUExecutionProvider",
f0Detector: "dio",
recordIO: 0,
serverMicProps: "",
inputSampleRate: 48000
}
export const DefaultVoiceChangerClientSetting: VoiceChangerClientSetting = { export const DefaultVoiceChangerClientSetting: VoiceChangerClientSetting = {
audioInput: null, audioInput: null,

View File

@ -1,15 +1,9 @@
import { useState, useMemo, useRef, useEffect } from "react" import { useState, useMemo, useEffect } from "react"
import { VoiceChangerServerSetting, ServerInfo, Framework, OnnxExecutionProvider, DefaultVoiceChangerServerSetting, ServerSettingKey, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_MODEL_DATA, ServerAudioDevices, InputSampleRate } from "../const" import { VoiceChangerServerSetting, ServerInfo, ServerSettingKey, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_MODEL_DATA, ServerAudioDevices, DefaultServerSetting } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient" import { VoiceChangerClient } from "../VoiceChangerClient"
import { useIndexedDB } from "./useIndexedDB" import { useIndexedDB } from "./useIndexedDB"
// export type FileUploadSetting = {
// pyTorchModel: File | null
// configFile: File | null
// onnxModel: File | null
// }
type ModelData = { type ModelData = {
file?: File file?: File
data?: ArrayBuffer data?: ArrayBuffer
@ -22,7 +16,6 @@ export type FileUploadSetting = {
configFile: ModelData | null configFile: ModelData | null
} }
const InitialFileUploadSetting: FileUploadSetting = { const InitialFileUploadSetting: FileUploadSetting = {
pyTorchModel: null, pyTorchModel: null,
configFile: null, configFile: null,
@ -34,38 +27,24 @@ export type UseServerSettingProps = {
} }
export type ServerSettingState = { export type ServerSettingState = {
setting: VoiceChangerServerSetting; serverSetting: ServerInfo
updateServerSettings: (setting: ServerInfo) => Promise<void>
clearSetting: () => Promise<void> clearSetting: () => Promise<void>
serverInfo: ServerInfo | undefined;
fileUploadSetting: FileUploadSetting
setFramework: (framework: Framework) => Promise<boolean>;
setOnnxExecutionProvider: (provider: OnnxExecutionProvider) => Promise<boolean>;
setSrcId: (num: number) => Promise<boolean>;
setDstId: (num: number) => Promise<boolean>;
setConvertChunkNum: (num: number) => Promise<boolean>;
setMinConvertSize: (num: number) => Promise<boolean>
setGpu: (num: number) => Promise<boolean>;
setCrossFadeOffsetRate: (num: number) => Promise<boolean>;
setCrossFadeEndRate: (num: number) => Promise<boolean>;
setCrossFadeOverlapRate: (num: number) => Promise<boolean>;
setCrossFadeOverlapSize: (num: number) => Promise<boolean>;
setF0Factor: (num: number) => Promise<boolean>;
setF0Detector: (val: string) => Promise<boolean>;
setRecordIO: (num: number) => Promise<boolean>;
setServerMicrophone: (index: number) => Promise<boolean | undefined>
setInputSampleRate: (num: InputSampleRate) => Promise<boolean>
reloadServerInfo: () => Promise<void>; reloadServerInfo: () => Promise<void>;
fileUploadSetting: FileUploadSetting
setFileUploadSetting: (val: FileUploadSetting) => void setFileUploadSetting: (val: FileUploadSetting) => void
loadModel: () => Promise<void> loadModel: () => Promise<void>
getServerDevices: () => Promise<ServerAudioDevices>
uploadProgress: number uploadProgress: number
isUploading: boolean isUploading: boolean
getServerDevices: () => Promise<ServerAudioDevices>
} }
export const useServerSetting = (props: UseServerSettingProps): ServerSettingState => { export const useServerSetting = (props: UseServerSettingProps): ServerSettingState => {
const settingRef = useRef<VoiceChangerServerSetting>(DefaultVoiceChangerServerSetting) // const settingRef = useRef<VoiceChangerServerSetting>(DefaultVoiceChangerServerSetting)
const [setting, _setSetting] = useState<VoiceChangerServerSetting>(settingRef.current) const [serverSetting, setServerSetting] = useState<ServerInfo>(DefaultServerSetting)
const [serverInfo, _setServerInfo] = useState<ServerInfo>()
const [fileUploadSetting, setFileUploadSetting] = useState<FileUploadSetting>(InitialFileUploadSetting) const [fileUploadSetting, setFileUploadSetting] = useState<FileUploadSetting>(InitialFileUploadSetting)
const { setItem, getItem, removeItem } = useIndexedDB() const { setItem, getItem, removeItem } = useIndexedDB()
@ -76,9 +55,8 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
const setting = await getItem(INDEXEDDB_KEY_SERVER) const setting = await getItem(INDEXEDDB_KEY_SERVER)
if (!setting) { if (!setting) {
} else { } else {
settingRef.current = setting as VoiceChangerServerSetting setServerSetting(setting as ServerInfo)
} }
_setSetting({ ...settingRef.current })
const fileuploadSetting = await getItem(INDEXEDDB_KEY_MODEL_DATA) const fileuploadSetting = await getItem(INDEXEDDB_KEY_MODEL_DATA)
if (!fileuploadSetting) { if (!fileuploadSetting) {
@ -90,210 +68,42 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
loadCache() loadCache()
}, []) }, [])
// クライアントへ設定反映 初期化, 設定変更 // クライアントへ設定反映 (キャッシュ反映)
useEffect(() => { useEffect(() => {
if (!props.voiceChangerClient) return if (!props.voiceChangerClient) return
props.voiceChangerClient.updateServerSettings(ServerSettingKey.framework, setting.framework) for (let i = 0; i < Object.values(ServerSettingKey).length; i++) {
props.voiceChangerClient.updateServerSettings(ServerSettingKey.onnxExecutionProvider, setting.onnxExecutionProvider) const k = Object.values(ServerSettingKey)[i] as keyof VoiceChangerServerSetting
props.voiceChangerClient.updateServerSettings(ServerSettingKey.srcId, "" + setting.srcId) const v = serverSetting[k]
props.voiceChangerClient.updateServerSettings(ServerSettingKey.dstId, "" + setting.dstId) if (v) {
props.voiceChangerClient.updateServerSettings(ServerSettingKey.convertChunkNum, "" + setting.convertChunkNum) props.voiceChangerClient.updateServerSettings(k, "" + v)
props.voiceChangerClient.updateServerSettings(ServerSettingKey.minConvertSize, "" + setting.minConvertSize) }
props.voiceChangerClient.updateServerSettings(ServerSettingKey.gpu, "" + setting.gpu) }
props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeOffsetRate, "" + setting.crossFadeOffsetRate) reloadServerInfo()
props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeEndRate, "" + setting.crossFadeEndRate) }, [props.voiceChangerClient])
props.voiceChangerClient.updateServerSettings(ServerSettingKey.crossFadeOverlapRate, "" + setting.crossFadeOverlapRate)
props.voiceChangerClient.updateServerSettings(ServerSettingKey.f0Factor, "" + setting.f0Factor)
props.voiceChangerClient.updateServerSettings(ServerSettingKey.f0Detector, "" + setting.f0Detector)
props.voiceChangerClient.updateServerSettings(ServerSettingKey.recordIO, "" + setting.recordIO)
// setting["convertChunkNum"] = 1
// const a = "convertChunkNum"
// setting[a] = ""
}, [props.voiceChangerClient, setting])
////////////// //////////////
// 設定 // 設定
///////////// /////////////
//// サーバに設定後、反映された情報と照合して値が一致していることを確認。一致していない場合はalert const updateServerSettings = useMemo(() => {
const _set_and_store = async (key: ServerSettingKey, newVal: string) => { return async (setting: ServerInfo) => {
if (!props.voiceChangerClient) return false if (!props.voiceChangerClient) return
for (let i = 0; i < Object.values(ServerSettingKey).length; i++) {
const res = await props.voiceChangerClient.updateServerSettings(key, "" + newVal) const k = Object.values(ServerSettingKey)[i] as keyof VoiceChangerServerSetting
const cur_v = serverSetting[k]
_setServerInfo(res) const new_v = setting[k]
if (newVal == res[key]) { if (cur_v != new_v) {
const newSetting: VoiceChangerServerSetting = { // console.log("update server setting!!!4", k, cur_v, new_v)
...settingRef.current, const res = await props.voiceChangerClient.updateServerSettings(k, "" + new_v)
convertChunkNum: res.convertChunkNum, // console.log("update server setting!!!5", res)
minConvertSize: res.minConvertSize,
srcId: res.srcId,
dstId: res.dstId,
gpu: res.gpu,
crossFadeOffsetRate: res.crossFadeOffsetRate,
crossFadeEndRate: res.crossFadeEndRate,
crossFadeOverlapRate: res.crossFadeOverlapRate,
crossFadeOverlapSize: res.crossFadeOverlapSize,
framework: res.framework,
onnxExecutionProvider: (!!res.onnxExecutionProvider && res.onnxExecutionProvider.length > 0) ? res.onnxExecutionProvider[0] as OnnxExecutionProvider : DefaultVoiceChangerServerSetting.onnxExecutionProvider,
f0Factor: res.f0Factor,
f0Detector: res.f0Detector,
recordIO: res.recordIO
setServerSetting(res)
setItem(INDEXEDDB_KEY_SERVER, res)
}
} }
_setSetting(newSetting)
setItem(INDEXEDDB_KEY_SERVER, newSetting)
return true
} else {
alert(`[ServerSetting] 設定が反映されていません([key:${key}, new:${newVal}, res:${res[key]}])。モデルの切り替えの場合、処理が非同期で行われるため反映されていないように見える場合があります。サーバコントロールのリロードボタンを押すとGUIに反映されるます。`)
return false
} }
}, [props.voiceChangerClient, serverSetting])
}
// // New Trial
// // 設定 _setSettingがトリガでuseEffectが呼ばれて、workletに設定が飛ぶ
// const setSetting = useMemo(() => {
// return (setting: ) => {
// if (!props.voiceChangerClient) return false
// const res = await props.voiceChangerClient.updateServerSettings(key, "" + newVal)
// _setServerInfo(res)
// if (newVal == res[key]) {
// const newSetting: VoiceChangerServerSetting = {
// ...settingRef.current,
// convertChunkNum: res.convertChunkNum,
// minConvertSize: res.minConvertSize,
// srcId: res.srcId,
// dstId: res.dstId,
// gpu: res.gpu,
// crossFadeOffsetRate: res.crossFadeOffsetRate,
// crossFadeEndRate: res.crossFadeEndRate,
// crossFadeOverlapRate: res.crossFadeOverlapRate,
// crossFadeOverlapSize: res.crossFadeOverlapSize,
// framework: res.framework,
// onnxExecutionProvider: (!!res.onnxExecutionProvider && res.onnxExecutionProvider.length > 0) ? res.onnxExecutionProvider[0] as OnnxExecutionProvider : DefaultVoiceChangerServerSetting.onnxExecutionProvider,
// f0Factor: res.f0Factor,
// f0Detector: res.f0Detector,
// recordIO: res.recordIO
// }
// _setSetting(newSetting)
// setItem(INDEXEDDB_KEY_SERVER, newSetting)
// return true
// } else {
// alert(`[ServerSetting] 設定が反映されていません([key:${key}, new:${newVal}, res:${res[key]}])。モデルの切り替えの場合、処理が非同期で行われるため反映されていないように見える場合があります。サーバコントロールのリロードボタンを押すとGUIに反映されるます。`)
// return false
// }
// }
// }, [props.voiceChangerClient])
const setFramework = useMemo(() => {
return async (framework: Framework) => {
return await _set_and_store(ServerSettingKey.framework, "" + framework)
}
}, [props.voiceChangerClient])
const setOnnxExecutionProvider = useMemo(() => {
return async (provider: OnnxExecutionProvider) => {
return await _set_and_store(ServerSettingKey.onnxExecutionProvider, "" + provider)
}
}, [props.voiceChangerClient])
const setSrcId = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.srcId, "" + num)
}
}, [props.voiceChangerClient])
const setDstId = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.dstId, "" + num)
}
}, [props.voiceChangerClient])
const setConvertChunkNum = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.convertChunkNum, "" + num)
}
}, [props.voiceChangerClient])
const setMinConvertSize = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.minConvertSize, "" + num)
}
}, [props.voiceChangerClient])
const setGpu = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.gpu, "" + num)
}
}, [props.voiceChangerClient])
const setCrossFadeOffsetRate = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.crossFadeOffsetRate, "" + num)
}
}, [props.voiceChangerClient])
const setCrossFadeEndRate = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.crossFadeEndRate, "" + num)
}
}, [props.voiceChangerClient])
const setCrossFadeOverlapRate = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.crossFadeOverlapRate, "" + num)
}
}, [props.voiceChangerClient])
const setCrossFadeOverlapSize = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.crossFadeOverlapSize, "" + num)
}
}, [props.voiceChangerClient])
const setF0Factor = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.f0Factor, "" + num)
}
}, [props.voiceChangerClient])
const setF0Detector = useMemo(() => {
return async (val: string) => {
return await _set_and_store(ServerSettingKey.f0Detector, "" + val)
}
}, [props.voiceChangerClient])
const setRecordIO = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.recordIO, "" + num)
}
}, [props.voiceChangerClient])
const setServerMicrophone = useMemo(() => {
return async (index: number) => {
if (!props.voiceChangerClient) {
return
}
const sid = props.voiceChangerClient.getSocketId()
const serverMicProps = {
sid: sid,
deviceIndex: index
}
return await _set_and_store(ServerSettingKey.serverMicProps, JSON.stringify(serverMicProps))
}
}, [props.voiceChangerClient])
const setInputSampleRate = useMemo(() => {
return async (num: number) => {
return await _set_and_store(ServerSettingKey.inputSampleRate, "" + num)
}
}, [props.voiceChangerClient])
////////////// //////////////
// 操作 // 操作
///////////// /////////////
@ -372,24 +182,12 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
const reloadServerInfo = useMemo(() => { const reloadServerInfo = useMemo(() => {
return async () => { return async () => {
console.log("reload server info")
if (!props.voiceChangerClient) return if (!props.voiceChangerClient) return
const res = await props.voiceChangerClient.getServerSettings() const res = await props.voiceChangerClient.getServerSettings()
_setServerInfo(res) setServerSetting(res)
_setSetting({ setItem(INDEXEDDB_KEY_SERVER, res)
...settingRef.current,
convertChunkNum: res.convertChunkNum,
srcId: res.srcId,
dstId: res.dstId,
gpu: res.gpu,
crossFadeOffsetRate: res.crossFadeOffsetRate,
crossFadeEndRate: res.crossFadeEndRate,
crossFadeOverlapRate: res.crossFadeOverlapRate,
framework: res.framework,
onnxExecutionProvider: (!!res.onnxExecutionProvider && res.onnxExecutionProvider.length > 0) ? res.onnxExecutionProvider[0] as OnnxExecutionProvider : DefaultVoiceChangerServerSetting.onnxExecutionProvider,
f0Factor: res.f0Factor,
f0Detector: res.f0Detector,
recordIO: res.recordIO
})
} }
}, [props.voiceChangerClient]) }, [props.voiceChangerClient])
@ -410,31 +208,17 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
} }
return { return {
setting, serverSetting,
updateServerSettings,
clearSetting, clearSetting,
serverInfo,
fileUploadSetting,
setFramework,
setOnnxExecutionProvider,
setSrcId,
setDstId,
setConvertChunkNum,
setMinConvertSize,
setGpu,
setCrossFadeOffsetRate,
setCrossFadeEndRate,
setCrossFadeOverlapRate,
setCrossFadeOverlapSize,
setF0Factor,
setF0Detector,
setRecordIO,
setServerMicrophone,
setInputSampleRate,
reloadServerInfo, reloadServerInfo,
fileUploadSetting,
setFileUploadSetting, setFileUploadSetting,
loadModel, loadModel,
getServerDevices,
uploadProgress, uploadProgress,
isUploading, isUploading,
getServerDevices,
} }
} }

View File

@ -89,26 +89,26 @@ class VocieChangerSettings():
gpu: int = 0 gpu: int = 0
srcId: int = 107 srcId: int = 107
dstId: int = 100 dstId: int = 100
inputSampleRate: int = 48000 # 48000 or 24000
crossFadeOffsetRate: float = 0.1 crossFadeOffsetRate: float = 0.1
crossFadeEndRate: float = 0.9 crossFadeEndRate: float = 0.9
crossFadeOverlapSize: int = 4096 crossFadeOverlapSize: int = 4096
convertChunkNum: int = 32
minConvertSize: int = 0
framework: str = "PyTorch" # PyTorch or ONNX
f0Factor: float = 1.0 f0Factor: float = 1.0
f0Detector: str = "dio" # dio or harvest f0Detector: str = "dio" # dio or harvest
recordIO: int = 1 # 0:off, 1:on recordIO: int = 1 # 0:off, 1:on
serverMicProps: str = ""
inputSampleRate: int = 48000 # 48000 or 24000
framework: str = "PyTorch" # PyTorch or ONNX
pyTorchModelFile: str = "" pyTorchModelFile: str = ""
onnxModelFile: str = "" onnxModelFile: str = ""
configFile: str = "" configFile: str = ""
# ↓mutableな物だけ列挙 # ↓mutableな物だけ列挙
intData = ["gpu", "srcId", "dstId", "convertChunkNum", "minConvertSize", "recordIO", "inputSampleRate", "crossFadeOverlapSize"] intData = ["gpu", "srcId", "dstId", "inputSampleRate", "crossFadeOverlapSize", "recordIO"]
floatData = ["crossFadeOffsetRate", "crossFadeEndRate", "f0Factor"] floatData = ["crossFadeOffsetRate", "crossFadeEndRate", "f0Factor"]
strData = ["framework", "f0Detector", "serverMicProps"] strData = ["framework", "f0Detector"]
def readMicrophone(queue, sid, deviceIndex): def readMicrophone(queue, sid, deviceIndex):
@ -288,35 +288,6 @@ class VoiceChanger():
setattr(self.settings, key, float(val)) setattr(self.settings, key, float(val))
elif key in self.settings.strData: elif key in self.settings.strData:
setattr(self.settings, key, str(val)) setattr(self.settings, key, str(val))
if key == "serverMicProps":
if hasattr(self, "serverMicrophoneReaderProcess"):
self.serverMicrophoneReaderProcess.terminate()
if len(val) == 0:
print("server mic close")
pass
else:
props = json.loads(val)
print(props)
sid = props["sid"]
deviceIndex = props["deviceIndex"]
self.serverMicrophoneReaderProcessQueue = Queue()
self.serverMicrophoneReaderProcess = Process(target=readMicrophone, args=(
self.serverMicrophoneReaderProcessQueue, sid, deviceIndex,))
self.serverMicrophoneReaderProcess.start()
try:
print(sid, deviceIndex)
except Exception as e:
print(e)
# audio = pyaudio.PyAudio()
# audio_input_stream = audio.open(format=pyaudio.paInt16,
# channels=1,
# rate=SAMPLING_RATE,
# frames_per_buffer=4096,
# input_device_index=val,
# input=True)
else: else:
print(f"{key} is not mutalbe variable!") print(f"{key} is not mutalbe variable!")
@ -505,8 +476,8 @@ class VoiceChanger():
powered_cur = cur_overlap * self.cur_strength powered_cur = cur_overlap * self.cur_strength
powered_result = powered_prev + powered_cur powered_result = powered_prev + powered_cur
print(overlapSize, prev_overlap.shape, cur_overlap.shape, self.prev_strength.shape, self.cur_strength.shape) # print(overlapSize, prev_overlap.shape, cur_overlap.shape, self.prev_strength.shape, self.cur_strength.shape)
print(self.prev_audio1.shape, audio1.shape, inputSize, overlapSize) # print(self.prev_audio1.shape, audio1.shape, inputSize, overlapSize)
cur = audio1[-1 * inputSize:-1 * overlapSize] # 今回のインプットの生部分。(インプット - 次回のCrossfade部分)。 cur = audio1[-1 * inputSize:-1 * overlapSize] # 今回のインプットの生部分。(インプット - 次回のCrossfade部分)。
result = torch.cat([powered_result, cur], axis=0) # Crossfadeと今回のインプットの生部分を結合 result = torch.cat([powered_result, cur], axis=0) # Crossfadeと今回のインプットの生部分を結合
@ -521,11 +492,11 @@ class VoiceChanger():
def on_request(self, unpackedData: any): def on_request(self, unpackedData: any):
if self.settings.inputSampleRate != 24000: if self.settings.inputSampleRate != 24000:
print("convert sampling rate!", self.settings.inputSampleRate) # print("convert sampling rate!", self.settings.inputSampleRate)
unpackedData = resampy.resample(unpackedData, 48000, 24000) unpackedData = resampy.resample(unpackedData, 48000, 24000)
convertSize = unpackedData.shape[0] + min(self.settings.crossFadeOverlapSize, unpackedData.shape[0]) convertSize = unpackedData.shape[0] + min(self.settings.crossFadeOverlapSize, unpackedData.shape[0])
print(convertSize, unpackedData.shape[0]) # print(convertSize, unpackedData.shape[0])
if convertSize < 8192: if convertSize < 8192:
convertSize = 8192 convertSize = 8192