PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-02-02 16:23:58 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

WIP: refactoring...

Browse Source
This commit is contained in:
wataru 2023-02-19 19:22:00 +09:00
parent 12e717d1b7
commit 091b72e291
14 changed files with 119 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

9
client/demo/src/102_model_setting.tsx
View File

@ -100,11 +100,12 @@ export const useModelSettingArea = (): ServerSettingState => {
return cor
}
}).filter(x => { return x != null }) as Correspondence[]
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, correspondences: cors })
console.log(cors)
appState.clientSetting.updateClientSetting({ ...appState.clientSetting.clientSetting, correspondences: cors })
}
const onCorrespondenceFileClearClicked = () => {
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, correspondences: [] })
appState.clientSetting.updateClientSetting({ ...appState.clientSetting.clientSetting, correspondences: [] })
}
const onModelUploadClicked = async () => {
@ -118,7 +119,7 @@ export const useModelSettingArea = (): ServerSettingState => {
const configFilenameText = appState.serverSetting.fileUploadSetting.configFile?.filename || appState.serverSetting.fileUploadSetting.configFile?.file?.name || ""
const onnxModelFilenameText = appState.serverSetting.fileUploadSetting.onnxModel?.filename || appState.serverSetting.fileUploadSetting.onnxModel?.file?.name || ""
const pyTorchFilenameText = appState.serverSetting.fileUploadSetting.pyTorchModel?.filename || appState.serverSetting.fileUploadSetting.pyTorchModel?.file?.name || ""
const correspondenceFileText = appState.serverSetting.serverSetting.correspondences ? JSON.stringify(appState.serverSetting.serverSetting.correspondences.map(x => { return x.dirname })) : ""
const correspondenceFileText = appState.clientSetting.clientSetting.correspondences ? JSON.stringify(appState.clientSetting.clientSetting.correspondences.map(x => { return x.dirname })) : ""
return (
<>
@ -202,7 +203,7 @@ export const useModelSettingArea = (): ServerSettingState => {
appState.serverSetting.loadModel,
appState.serverSetting.isUploading,
appState.serverSetting.uploadProgress,
appState.serverSetting.serverSetting.correspondences,
appState.clientSetting.clientSetting.correspondences,
appState.serverSetting.updateServerSettings,
appState.serverSetting.setFileUploadSetting,
showPyTorch])

8
client/demo/src/103_device_setting.tsx
View File

@ -30,6 +30,13 @@ const reloadDevices = async () => {
toJSON: () => { }
})
const audioOutputs = mediaDeviceInfos.filter(x => { return x.kind == "audiooutput" })
audioOutputs.push({
deviceId: "none",
groupId: "none",
kind: "audiooutput",
label: "none",
toJSON: () => { }
})
// audioOutputs.push({
// deviceId: "record",
// groupId: "record",
@ -98,7 +105,6 @@ export const useDeviceSetting = (): DeviceSettingState => {
return x.deviceId == appState.clientSetting.clientSetting.audioInput
})) {
setAudioInputForGUI(appState.clientSetting.clientSetting.audioInput)
}
}
}, [inputAudioDeviceInfo, appState.clientSetting.clientSetting.audioInput])

6
client/demo/src/104_qulity_control.tsx
View File

@ -131,11 +131,11 @@ export const useQualityControl = (): QualityControlState => {
const recordIORow = useMemo(() => {
const onRecordStartClicked = async () => {
setRecording(true)
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 1 })
await appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 1 })
}
const onRecordStopClicked = async () => {
setRecording(false)
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 0 })
await appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 0 })
}
const onRecordAnalizeClicked = async () => {
if (appState.frontendManagerState.isConverting) {
@ -143,7 +143,7 @@ export const useQualityControl = (): QualityControlState => {
return
}
appState.frontendManagerState.setIsAnalyzing(true)
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 2 })
await appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, recordIO: 2 })
// set spectrogram (dio)
const imageDio = document.getElementById("body-image-container-img-dio") as HTMLImageElement
imageDio.src = "/tmp/analyze-dio.png?" + new Date().getTime()

37
client/demo/src/105_speaker_setting.tsx
View File

@ -16,27 +16,12 @@ export const useSpeakerSetting = () => {
return <HeaderButton {...accodionButtonProps}></HeaderButton>;
}, []);
const [editSpeakerTargetId, setEditSpeakerTargetId] = useState<number>(0)
const [editSpeakerTargetName, setEditSpeakerTargetName] = useState<string>("")
// 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.serverSetting.serverSetting.correspondences?.find(x => {
const src = appState.clientSetting.clientSetting.correspondences?.find(x => {
return x.sid == srcId
})
const dst = appState.serverSetting.serverSetting.correspondences?.find(x => {
const dst = appState.clientSetting.clientSetting.correspondences?.find(x => {
return x.sid == dstId
})
const recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0
@ -46,7 +31,7 @@ export const useSpeakerSetting = () => {
console.log()
const srcIdRow = useMemo(() => {
const selected = appState.serverSetting.serverSetting.correspondences?.find(x => {
const selected = appState.clientSetting.clientSetting.correspondences?.find(x => {
return x.sid == appState.serverSetting.serverSetting.srcId
})
return (
@ -58,7 +43,7 @@ export const useSpeakerSetting = () => {
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, srcId: Number(e.target.value), f0Factor: recF0 })
}}>
{
appState.serverSetting.serverSetting.correspondences?.map(x => {
appState.clientSetting.clientSetting.correspondences?.map(x => {
return <option key={x.sid} value={x.sid}>{x.dirname}({x.sid})</option>
})
@ -71,10 +56,10 @@ export const useSpeakerSetting = () => {
<div className="body-item-text"></div>
</div>
)
}, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.serverSetting.serverSetting.correspondences, appState.serverSetting.updateServerSettings])
}, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings])
const dstIdRow = useMemo(() => {
const selected = appState.serverSetting.serverSetting.correspondences?.find(x => {
const selected = appState.clientSetting.clientSetting.correspondences?.find(x => {
return x.sid == appState.serverSetting.serverSetting.dstId
})
return (
@ -90,7 +75,7 @@ export const useSpeakerSetting = () => {
// appState.clientSetting.setting.speakers.map(x => {
// return <option key={x.id} value={x.id}>{x.name}({x.id})</option>
// })
appState.serverSetting.serverSetting.correspondences?.map(x => {
appState.clientSetting.clientSetting.correspondences?.map(x => {
return <option key={x.sid} value={x.sid}>{x.dirname}({x.sid})</option>
})
}
@ -102,7 +87,7 @@ export const useSpeakerSetting = () => {
<div className="body-item-text"></div>
</div>
)
}, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.serverSetting.serverSetting.correspondences, appState.serverSetting.updateServerSettings])
}, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings])
// const editSpeakerIdMappingRow = useMemo(() => {
// const onSetSpeakerMappingClicked = async () => {
@ -152,10 +137,10 @@ export const useSpeakerSetting = () => {
const f0FactorRow = useMemo(() => {
const src = appState.serverSetting.serverSetting.correspondences?.find(x => {
const src = appState.clientSetting.clientSetting.correspondences?.find(x => {
return x.sid == appState.serverSetting.serverSetting.srcId
})
const dst = appState.serverSetting.serverSetting.correspondences?.find(x => {
const dst = appState.clientSetting.clientSetting.correspondences?.find(x => {
return x.sid == appState.serverSetting.serverSetting.dstId
})
@ -174,7 +159,7 @@ export const useSpeakerSetting = () => {
<div className="body-item-text">recommend: {recommendedF0Factor.toFixed(1)}</div>
</div>
)
}, [appState.serverSetting.serverSetting.f0Factor, appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.serverSetting.serverSetting.correspondences, appState.serverSetting.updateServerSettings])
}, [appState.serverSetting.serverSetting.f0Factor, appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings])
const speakerSetting = useMemo(() => {
return (

4
client/demo/src/106_convert_setting.tsx
View File

@ -26,7 +26,7 @@ export const useConvertSetting = (): ConvertSettingState => {
<div className="body-item-title left-padding-1">Input Chunk Num(128sample/chunk)</div>
<div className="body-input-container">
<input type="number" min={1} max={256} step={1} value={appState.streamerSetting.audioStreamerSetting.inputChunkNum} onChange={(e) => {
appState.streamerSetting.setSetting({ ...appState.streamerSetting.audioStreamerSetting, inputChunkNum: Number(e.target.value) })
appState.streamerSetting.updateAudioStreamerSetting({ ...appState.streamerSetting.audioStreamerSetting, inputChunkNum: Number(e.target.value) })
}} />
</div>
<div className="body-item-text">
@ -36,7 +36,7 @@ export const useConvertSetting = (): ConvertSettingState => {
</div>
)
}, [appState.streamerSetting.audioStreamerSetting.inputChunkNum, appState.streamerSetting.setSetting])
}, [appState.streamerSetting.audioStreamerSetting.inputChunkNum, appState.streamerSetting.updateAudioStreamerSetting])
const gpuRow = useMemo(() => {
return (

12
client/demo/src/107_advanced_setting.tsx
View File

@ -41,7 +41,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
const protocolRow = useMemo(() => {
const onProtocolChanged = async (val: Protocol) => {
appState.streamerSetting.setSetting({ ...appState.streamerSetting.audioStreamerSetting, protocol: val })
appState.streamerSetting.updateAudioStreamerSetting({ ...appState.streamerSetting.audioStreamerSetting, protocol: val })
}
return (
<div className="body-row split-3-7 left-padding-1 guided">
@ -60,7 +60,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
</div>
</div>
)
}, [appState.streamerSetting.audioStreamerSetting.protocol, appState.streamerSetting.setSetting])
}, [appState.streamerSetting.audioStreamerSetting.protocol, appState.streamerSetting.updateAudioStreamerSetting])
const sampleRateRow = useMemo(() => {
@ -88,7 +88,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
<div className="body-item-title left-padding-1">Sending Sample Rate</div>
<div className="body-select-container">
<select className="body-select" value={appState.streamerSetting.audioStreamerSetting.sendingSampleRate} onChange={(e) => {
appState.streamerSetting.setSetting({ ...appState.streamerSetting.audioStreamerSetting, sendingSampleRate: Number(e.target.value) as InputSampleRate })
appState.streamerSetting.updateAudioStreamerSetting({ ...appState.streamerSetting.audioStreamerSetting, sendingSampleRate: Number(e.target.value) as InputSampleRate })
appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, inputSampleRate: Number(e.target.value) as InputSampleRate })
}}>
{
@ -100,7 +100,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
</div>
</div>
)
}, [appState.streamerSetting.audioStreamerSetting.sendingSampleRate, appState.streamerSetting.setSetting, appState.serverSetting.updateServerSettings])
}, [appState.streamerSetting.audioStreamerSetting.sendingSampleRate, appState.streamerSetting.updateAudioStreamerSetting, appState.serverSetting.updateServerSettings])
const bufferSizeRow = useMemo(() => {
return (
@ -175,7 +175,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
<div className="body-item-title left-padding-1 ">DownSamplingMode</div>
<div className="body-select-container">
<select className="body-select" value={appState.streamerSetting.audioStreamerSetting.downSamplingMode} onChange={(e) => {
appState.streamerSetting.setSetting({ ...appState.streamerSetting.audioStreamerSetting, downSamplingMode: e.target.value as DownSamplingMode })
appState.streamerSetting.updateAudioStreamerSetting({ ...appState.streamerSetting.audioStreamerSetting, downSamplingMode: e.target.value as DownSamplingMode })
}}>
{
Object.values(DownSamplingMode).map(x => {
@ -186,7 +186,7 @@ export const useAdvancedSetting = (): AdvancedSettingState => {
</div>
</div>
)
}, [appState.streamerSetting.audioStreamerSetting.downSamplingMode, appState.streamerSetting.setSetting])
}, [appState.streamerSetting.audioStreamerSetting.downSamplingMode, appState.streamerSetting.updateAudioStreamerSetting])
const workletSettingRow = useMemo(() => {

1
client/lib/src/AudioStreamer.ts
View File

@ -28,6 +28,7 @@ export class AudioStreamer extends Duplex {
super(options);
this.callbacks = callbacks
this.audioStreamerListeners = audioStreamerListeners
this.createSocketIO()
}
private createSocketIO = () => {

10
client/lib/src/VoiceChangerClient.ts
View File

@ -236,10 +236,20 @@ export class VoiceChangerClient {
reconstructInputRequired = true
}
if (this.setting.inputGain != setting.inputGain) {
this.setInputGain(setting.inputGain)
}
if (this.setting.outputGain != setting.outputGain) {
this.setOutputGain(setting.outputGain)
}
this.setting = setting
if (reconstructInputRequired) {
this.setup()
}
}
setInputGain = (val: number) => {

79
client/lib/src/const.ts
View File

@ -41,6 +41,8 @@ export const F0Detector = {
} as const
export type F0Detector = typeof F0Detector[keyof typeof F0Detector]
export const ServerSettingKey = {
"srcId": "srcId",
"dstId": "dstId",
@ -62,16 +64,6 @@ export const ServerSettingKey = {
export type ServerSettingKey = typeof ServerSettingKey[keyof typeof ServerSettingKey]
export type Speaker = {
"id": number,
"name": string,
}
export type Correspondence = {
"sid": number,
"correspondence": number,
"dirname": string
}
export type VoiceChangerServerSetting = {
srcId: number,
dstId: number,
@ -89,7 +81,6 @@ export type VoiceChangerServerSetting = {
recordIO: number // 0:off, 1:on
inputSampleRate: InputSampleRate
}
export type ServerInfo = VoiceChangerServerSetting & {
@ -98,9 +89,6 @@ export type ServerInfo = VoiceChangerServerSetting & {
pyTorchModelFile: string,
onnxModelFile: string,
onnxExecutionProviders: OnnxExecutionProvider[]
speakers: Speaker[],
correspondences: Correspondence[],
}
export const DefaultServerSetting: ServerInfo = {
@ -125,32 +113,7 @@ export const DefaultServerSetting: ServerInfo = {
configFile: "",
pyTorchModelFile: "",
onnxModelFile: "",
onnxExecutionProviders: [],
//
speakers: [
{
"id": 0,
"name": "user"
},
{
"id": 101,
"name": "ずんだもん"
},
{
"id": 102,
"name": "そら"
},
{
"id": 103,
"name": "めたん"
},
{
"id": 104,
"name": "つむぎ"
}
],
correspondences: [],
onnxExecutionProviders: []
}
@ -224,6 +187,15 @@ export const BufferSize = {
} as const
export type BufferSize = typeof BufferSize[keyof typeof BufferSize]
export type Speaker = {
"id": number,
"name": string,
}
export type Correspondence = {
"sid": number,
"correspondence": number,
"dirname": string
}
export type VoiceChangerClientSetting = {
audioInput: string | MediaStream | null,
sampleRate: SampleRate, // 48000Hz
@ -232,7 +204,8 @@ export type VoiceChangerClientSetting = {
noiseSuppression: boolean,
noiseSuppression2: boolean
speakers: Speaker[],
correspondences: Correspondence[],
inputGain: number
outputGain: number
}
@ -241,7 +214,29 @@ export const DefaultVoiceChangerClientSetting: VoiceChangerClientSetting = {
audioInput: null,
sampleRate: 48000,
bufferSize: 1024,
speakers: [
{
"id": 0,
"name": "user"
},
{
"id": 101,
"name": "ずんだもん"
},
{
"id": 102,
"name": "そら"
},
{
"id": 103,
"name": "めたん"
},
{
"id": 104,
"name": "つむぎ"
}
],
correspondences: [],
echoCancel: true,
noiseSuppression: true,
noiseSuppression2: false,

35
client/lib/src/hooks/useAudioStreamerSetting.ts
View File

@ -1,6 +1,6 @@
import { useState, useMemo, useEffect } from "react"
import { INDEXEDDB_KEY_CLIENT, INDEXEDDB_KEY_STREAMER, AudioStreamerSetting, DefaultAudioStreamerSetting } from "../const"
import { INDEXEDDB_KEY_STREAMER, AudioStreamerSetting, DefaultAudioStreamerSetting } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient"
import { useIndexedDB } from "./useIndexedDB"
@ -11,7 +11,7 @@ export type UseAudioStreamerSettingProps = {
export type AudioStreamerSettingState = {
audioStreamerSetting: AudioStreamerSetting;
clearSetting: () => Promise<void>
setSetting: (setting: AudioStreamerSetting) => void
updateAudioStreamerSetting: (setting: AudioStreamerSetting) => void
}
@ -48,30 +48,27 @@ export const useAudioStreamerSetting = (props: UseAudioStreamerSettingProps): Au
/////////////
// const setServerUrl = useMemo(() => {
// return (url: string) => {
// if (!props.voiceChangerClient) return
// props.voiceChangerClient.setServerUrl(url, true)
// settingRef.current.mmvcServerUrl = url
// setSetting({ ...settingRef.current })
// }
// }, [props.voiceChangerClient])
const setSetting = useMemo(() => {
return (setting: AudioStreamerSetting) => {
const updateAudioStreamerSetting = useMemo(() => {
return (_audioStreamerSetting: AudioStreamerSetting) => {
if (!props.voiceChangerClient) return
_setAudioStreamerSetting(setting)
setItem(INDEXEDDB_KEY_CLIENT, setting)
props.voiceChangerClient.updateAudioStreamerSetting(setting)
for (let k in _audioStreamerSetting) {
const cur_v = audioStreamerSetting[k]
const new_v = _audioStreamerSetting[k]
if (cur_v != new_v) {
_setAudioStreamerSetting(_audioStreamerSetting)
setItem(INDEXEDDB_KEY_STREAMER, _audioStreamerSetting)
props.voiceChangerClient.updateAudioStreamerSetting(_audioStreamerSetting)
break
}
}
}
}, [props.voiceChangerClient])
}, [props.voiceChangerClient, audioStreamerSetting])
console.log("AUDIO STREAMER SETTING", audioStreamerSetting)
return {
audioStreamerSetting,
clearSetting,
setSetting,
updateAudioStreamerSetting,
}
}

3
client/lib/src/hooks/useClient.ts
View File

@ -1,4 +1,5 @@
import { useEffect, useMemo, useRef, useState } from "react"
import { AudioStreamer } from "../AudioStreamer"
import { VoiceChangerClient } from "../VoiceChangerClient"
import { AudioStreamerSettingState, useAudioStreamerSetting } from "./useAudioStreamerSetting"
import { ClientSettingState, useClientSetting } from "./useClientSetting"
@ -118,10 +119,10 @@ export const useClient = (props: UseClientProps): ClientState => {
const clearSetting = async () => {
await clientSetting.clearSetting()
await streamerSetting.clearSetting()
await workletSetting.clearSetting()
await serverSetting.clearSetting()
}
console.log("AUDIO STREAMER SETTING USE CLIENT", clientSetting, streamerSetting)
return {
// 各種設定I/Fへの参照

13
client/lib/src/hooks/useClientSetting.ts
View File

@ -62,10 +62,17 @@ export const useClientSetting = (props: UseClientSettingProps): ClientSettingSta
// 設定
/////////////
const updateClientSetting = useMemo(() => {
return (clientSetting: VoiceChangerClientSetting) => {
return (_clientSetting: VoiceChangerClientSetting) => {
if (!props.voiceChangerClient) return
// storeSetting(clientSetting)
// props.voiceChangerClient.updateClientSetting(clientSetting)
for (let k in _clientSetting) {
const cur_v = clientSetting[k]
const new_v = _clientSetting[k]
if (cur_v != new_v) {
storeSetting(_clientSetting)
props.voiceChangerClient.updateClientSetting(_clientSetting)
break
}
}
}
}, [props.voiceChangerClient, clientSetting])

4
client/lib/src/hooks/useServerSetting.ts
View File

@ -90,9 +90,9 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
const cur_v = serverSetting[k]
const new_v = setting[k]
if (cur_v != new_v) {
// console.log("update server setting!!!4", k, cur_v, new_v)
console.log("update server setting!!!4", k, cur_v, new_v)
const res = await props.voiceChangerClient.updateServerSettings(k, "" + new_v)
// console.log("update server setting!!!5", res)
console.log("update server setting!!!5", res)
setServerSetting(res)
setItem(INDEXEDDB_KEY_SERVER, res)