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

remove old gui 4

Browse Source
This commit is contained in:
wataru 2023-06-25 16:39:18 +09:00
parent 767dfc520c
commit 73a96c654a
19 changed files with 202 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

4
client/demo/src/001_provider/001_AppStateProvider.tsx
View File

@ -39,8 +39,8 @@ export const AppStateProvider = ({ children }: Props) => {
useEffect(() => { useEffect(() => {
if (clientState.clientState.initialized) { if (clientState.clientState.initialized) {
initializedRef.current = true initializedRef.current = true
clientState.clientState.clientSetting.updateClientSetting({ clientState.clientState.setVoiceChangerClientSetting({
...clientState.clientState.clientSetting.clientSetting ...clientState.clientState.setting.voiceChangerClientSetting
}) })
} }
}, [clientState.clientState.initialized]) }, [clientState.clientState.initialized])

14
client/demo/src/components/demo/906_AdvancedSettingDialog.tsx
View File

@ -6,7 +6,7 @@ import { CrossFadeOverlapSize, Protocol } from "@dannadori/voice-changer-client-
export const AdvancedSettingDialog = () => { export const AdvancedSettingDialog = () => {
const guiState = useGuiState() const guiState = useGuiState()
const { workletNodeSetting, workletSetting, serverSetting } = useAppState() const { setting, serverSetting, setWorkletNodeSetting, setWorkletSetting } = useAppState()
const dialog = useMemo(() => { const dialog = useMemo(() => {
const closeButtonRow = ( const closeButtonRow = (
<div className="body-row split-3-4-3 left-padding-1"> <div className="body-row split-3-4-3 left-padding-1">
@ -21,7 +21,7 @@ export const AdvancedSettingDialog = () => {
) )
const onProtocolChanged = async (val: Protocol) => { const onProtocolChanged = async (val: Protocol) => {
workletNodeSetting.updateWorkletNodeSetting({ ...workletNodeSetting.workletNodeSetting, protocol: val }) setWorkletNodeSetting({ ...setting.workletNodeSetting, protocol: val })
} }
const protocolRow = ( const protocolRow = (
<div className="advanced-setting-container-row"> <div className="advanced-setting-container-row">
@ -29,7 +29,7 @@ export const AdvancedSettingDialog = () => {
protocol protocol
</div> </div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<select value={workletNodeSetting.workletNodeSetting.protocol} onChange={(e) => { <select value={setting.workletNodeSetting.protocol} onChange={(e) => {
onProtocolChanged(e.target.value as onProtocolChanged(e.target.value as
Protocol) Protocol)
}}> }}>
@ -90,9 +90,9 @@ export const AdvancedSettingDialog = () => {
Trancate Trancate
</div> </div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<input type="number" min={5} max={300} step={1} value={workletSetting.setting.numTrancateTreshold} onChange={(e) => { <input type="number" min={5} max={300} step={1} value={setting.workletSetting.numTrancateTreshold} onChange={(e) => {
workletSetting.setSetting({ setWorkletSetting({
...workletSetting.setting, ...setting.workletSetting,
numTrancateTreshold: Number(e.target.value) numTrancateTreshold: Number(e.target.value)
}) })
}} /> }} />
@ -176,7 +176,7 @@ export const AdvancedSettingDialog = () => {
</div> </div>
</div> </div>
); );
}, [serverSetting.serverSetting, serverSetting.updateServerSettings, workletNodeSetting.workletNodeSetting, workletNodeSetting.updateWorkletNodeSetting, workletSetting.setting, workletSetting.setSetting]); }, [serverSetting.serverSetting, serverSetting.updateServerSettings, setting.workletNodeSetting, setWorkletNodeSetting, setting.workletSetting, setWorkletSetting]);
return dialog; return dialog;
}; };

22
client/demo/src/components/demo/components2/101_CharacterArea.tsx
View File

@ -15,7 +15,7 @@ export type CharacterAreaProps = {
export const CharacterArea = (_props: CharacterAreaProps) => { export const CharacterArea = (_props: CharacterAreaProps) => {
const { serverSetting, clientSetting, initializedRef, volume, bufferingTime, performance } = useAppState() const { serverSetting, initializedRef, volume, bufferingTime, performance, setting, setVoiceChangerClientSetting, start, stop } = useAppState()
const guiState = useGuiState() const guiState = useGuiState()
const messageBuilderState = useMessageBuilder() const messageBuilderState = useMessageBuilder()
@ -80,7 +80,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
return return
} }
guiState.setIsConverting(true) guiState.setIsConverting(true)
clientSetting.start() start()
}, [startWithAudioContextCreate]) }, [startWithAudioContextCreate])
const startControl = useMemo(() => { const startControl = useMemo(() => {
@ -98,7 +98,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
setStartWithAudioContextCreate(true) setStartWithAudioContextCreate(true)
} else { } else {
guiState.setIsConverting(true) guiState.setIsConverting(true)
await clientSetting.start() await start()
} }
} else { } else {
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverAudioStated: 1 }) serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverAudioStated: 1 })
@ -108,7 +108,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
const onStopClicked = async () => { const onStopClicked = async () => {
if (serverSetting.serverSetting.enableServerAudio == 0) { if (serverSetting.serverSetting.enableServerAudio == 0) {
guiState.setIsConverting(false) guiState.setIsConverting(false)
await clientSetting.stop() await stop()
} else { } else {
guiState.setIsConverting(false) guiState.setIsConverting(false)
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverAudioStated: 0 }) serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverAudioStated: 0 })
@ -127,26 +127,26 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
) )
}, [ }, [
guiState.isConverting, guiState.isConverting,
clientSetting.start, start,
clientSetting.stop, stop,
serverSetting.serverSetting, serverSetting.serverSetting,
serverSetting.updateServerSettings serverSetting.updateServerSettings
]) ])
const gainControl = useMemo(() => { const gainControl = useMemo(() => {
const currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? clientSetting.clientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain const currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain
const inputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? const inputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ?
async (val: number) => { async (val: number) => {
await clientSetting.updateClientSetting({ ...clientSetting.clientSetting, inputGain: val }) await setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, inputGain: val })
} : } :
async (val: number) => { async (val: number) => {
await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverInputAudioGain: val }) await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverInputAudioGain: val })
} }
const currentOutputGain = serverSetting.serverSetting.enableServerAudio == 0 ? clientSetting.clientSetting.outputGain : serverSetting.serverSetting.serverOutputAudioGain const currentOutputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.outputGain : serverSetting.serverSetting.serverOutputAudioGain
const outputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? const outputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ?
async (val: number) => { async (val: number) => {
await clientSetting.updateClientSetting({ ...clientSetting.clientSetting, outputGain: val }) await setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, outputGain: val })
} : } :
async (val: number) => { async (val: number) => {
await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverOutputAudioGain: val }) await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverOutputAudioGain: val })
@ -182,7 +182,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
</div> </div>
</div> </div>
) )
}, [serverSetting.serverSetting, clientSetting.clientSetting, clientSetting.updateClientSetting, serverSetting.updateServerSettings]) }, [serverSetting.serverSetting, setting, setVoiceChangerClientSetting, serverSetting.updateServerSettings])

18
client/demo/src/components/demo/components2/102-1_QualityArea.tsx
View File

@ -7,9 +7,9 @@ export type QualityAreaProps = {
} }
export const QualityArea = (props: QualityAreaProps) => { export const QualityArea = (props: QualityAreaProps) => {
const { clientSetting, serverSetting } = useAppState() const { setVoiceChangerClientSetting, serverSetting, setting } = useAppState()
const qualityArea = useMemo(() => { const qualityArea = useMemo(() => {
if (!serverSetting.updateServerSettings || !clientSetting.updateClientSetting || !serverSetting.serverSetting || !clientSetting.clientSetting) { if (!serverSetting.updateServerSettings || !setVoiceChangerClientSetting || !serverSetting.serverSetting || !setting) {
return <></> return <></>
} }
return ( return (
@ -19,9 +19,9 @@ export const QualityArea = (props: QualityAreaProps) => {
<div className="config-sub-area-control-field"> <div className="config-sub-area-control-field">
<div className="config-sub-area-noise-container"> <div className="config-sub-area-noise-container">
<div className="config-sub-area-noise-checkbox-container"> <div className="config-sub-area-noise-checkbox-container">
<input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={clientSetting.clientSetting.echoCancel} onChange={(e) => { <input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={setting.voiceChangerClientSetting.echoCancel} onChange={(e) => {
try { try {
clientSetting.updateClientSetting({ ...clientSetting.clientSetting, echoCancel: e.target.checked }) setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, echoCancel: e.target.checked })
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
@ -29,9 +29,9 @@ export const QualityArea = (props: QualityAreaProps) => {
</div> </div>
<div className="config-sub-area-noise-checkbox-container"> <div className="config-sub-area-noise-checkbox-container">
<input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={clientSetting.clientSetting.noiseSuppression} onChange={(e) => { <input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={setting.voiceChangerClientSetting.noiseSuppression} onChange={(e) => {
try { try {
clientSetting.updateClientSetting({ ...clientSetting.clientSetting, noiseSuppression: e.target.checked }) setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, noiseSuppression: e.target.checked })
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
@ -39,9 +39,9 @@ export const QualityArea = (props: QualityAreaProps) => {
</div> </div>
<div className="config-sub-area-noise-checkbox-container"> <div className="config-sub-area-noise-checkbox-container">
<input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={clientSetting.clientSetting.noiseSuppression2} onChange={(e) => { <input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={setting.voiceChangerClientSetting.noiseSuppression2} onChange={(e) => {
try { try {
clientSetting.updateClientSetting({ ...clientSetting.clientSetting, noiseSuppression2: e.target.checked }) setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, noiseSuppression2: e.target.checked })
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
@ -82,7 +82,7 @@ export const QualityArea = (props: QualityAreaProps) => {
</div> </div>
) )
}, [serverSetting.serverSetting, clientSetting.clientSetting, serverSetting.updateServerSettings, clientSetting.updateClientSetting]) }, [serverSetting.serverSetting, setting.voiceChangerClientSetting, serverSetting.updateServerSettings, setVoiceChangerClientSetting])
return qualityArea return qualityArea

12
client/demo/src/components/demo/components2/102-2_ConvertArea.tsx
View File

@ -8,7 +8,7 @@ export type ConvertProps = {
export const ConvertArea = (props: ConvertProps) => { export const ConvertArea = (props: ConvertProps) => {
const { clientSetting, serverSetting, workletNodeSetting } = useAppState() const { setting, serverSetting, setWorkletNodeSetting, trancateBuffer } = useAppState()
const { appGuiSettingState } = useAppRoot() const { appGuiSettingState } = useAppRoot()
const edition = appGuiSettingState.edition const edition = appGuiSettingState.edition
const convertArea = useMemo(() => { const convertArea = useMemo(() => {
@ -62,9 +62,9 @@ export const ConvertArea = (props: ConvertProps) => {
<div className="config-sub-area-control"> <div className="config-sub-area-control">
<div className="config-sub-area-control-title">CHUNK:</div> <div className="config-sub-area-control-title">CHUNK:</div>
<div className="config-sub-area-control-field"> <div className="config-sub-area-control-field">
<select className="body-select" value={workletNodeSetting.workletNodeSetting.inputChunkNum} onChange={(e) => { <select className="body-select" value={setting.workletNodeSetting.inputChunkNum} onChange={(e) => {
workletNodeSetting.updateWorkletNodeSetting({ ...workletNodeSetting.workletNodeSetting, inputChunkNum: Number(e.target.value) }) setWorkletNodeSetting({ ...setting.workletNodeSetting, inputChunkNum: Number(e.target.value) })
workletNodeSetting.trancateBuffer() trancateBuffer()
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverReadChunkSize: Number(e.target.value) }) serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverReadChunkSize: Number(e.target.value) })
}}> }}>
{ {
@ -81,7 +81,7 @@ export const ConvertArea = (props: ConvertProps) => {
<div className="config-sub-area-control-field"> <div className="config-sub-area-control-field">
<select className="body-select" value={serverSetting.serverSetting.extraConvertSize} onChange={(e) => { <select className="body-select" value={serverSetting.serverSetting.extraConvertSize} onChange={(e) => {
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, extraConvertSize: Number(e.target.value) }) serverSetting.updateServerSettings({ ...serverSetting.serverSetting, extraConvertSize: Number(e.target.value) })
workletNodeSetting.trancateBuffer() trancateBuffer()
}}> }}>
{ {
[1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map(x => { [1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map(x => {
@ -94,7 +94,7 @@ export const ConvertArea = (props: ConvertProps) => {
{gpuSelect} {gpuSelect}
</div> </div>
) )
}, [serverSetting.serverSetting, clientSetting.clientSetting, workletNodeSetting.workletNodeSetting, serverSetting.updateServerSettings, clientSetting.updateClientSetting, workletNodeSetting.updateWorkletNodeSetting, edition]) }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setWorkletNodeSetting, edition])
return convertArea return convertArea

29
client/demo/src/components/demo/components2/102-3_DeviceArea.tsx
View File

@ -3,21 +3,18 @@ import { useAppState } from "../../../001_provider/001_AppStateProvider"
import { fileSelectorAsDataURL, useIndexedDB, } from "@dannadori/voice-changer-client-js" import { fileSelectorAsDataURL, useIndexedDB, } from "@dannadori/voice-changer-client-js"
import { useGuiState } from "../001_GuiStateProvider" import { useGuiState } from "../001_GuiStateProvider"
import { AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL, INDEXEDDB_KEY_AUDIO_OUTPUT } from "../../../const" import { AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL, INDEXEDDB_KEY_AUDIO_OUTPUT } from "../../../const"
import { useAppRoot } from "../../../001_provider/001_AppRootProvider"
export type DeviceAreaProps = { export type DeviceAreaProps = {
} }
export const DeviceArea = (_props: DeviceAreaProps) => { export const DeviceArea = (_props: DeviceAreaProps) => {
const { clientSetting, serverSetting, workletNodeSetting, audioContext, setAudioOutputElementId, initializedRef } = useAppState() const { setting, serverSetting, audioContext, setAudioOutputElementId, initializedRef, setVoiceChangerClientSetting, startOutputRecording, stopOutputRecording } = useAppState()
const { isConverting, audioInputForGUI, inputAudioDeviceInfo, setAudioInputForGUI, fileInputEchoback, setFileInputEchoback, setAudioOutputForGUI, audioOutputForGUI, outputAudioDeviceInfo } = useGuiState() const { isConverting, audioInputForGUI, inputAudioDeviceInfo, setAudioInputForGUI, fileInputEchoback, setFileInputEchoback, setAudioOutputForGUI, audioOutputForGUI, outputAudioDeviceInfo } = useGuiState()
const [inputHostApi, setInputHostApi] = useState<string>("ALL") const [inputHostApi, setInputHostApi] = useState<string>("ALL")
const [outputHostApi, setOutputHostApi] = useState<string>("ALL") const [outputHostApi, setOutputHostApi] = useState<string>("ALL")
const audioSrcNode = useRef<MediaElementAudioSourceNode>() const audioSrcNode = useRef<MediaElementAudioSourceNode>()
const { appGuiSettingState } = useAppRoot()
const clientType = appGuiSettingState.appGuiSetting.id
const { getItem, setItem } = useIndexedDB({ clientType: clientType }) const { getItem, setItem } = useIndexedDB({ clientType: null })
const [outputRecordingStarted, setOutputRecordingStarted] = useState<boolean>(false) const [outputRecordingStarted, setOutputRecordingStarted] = useState<boolean>(false)
// (1) Audio Mode // (1) Audio Mode
@ -57,15 +54,15 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
// (2) Audio Input // (2) Audio Input
// キャッシュの設定は反映（たぶん、設定操作の時も起動していしまう。が問題は起こらないはず） // キャッシュの設定は反映（たぶん、設定操作の時も起動していしまう。が問題は起こらないはず）
useEffect(() => { useEffect(() => {
if (typeof clientSetting.clientSetting.audioInput == "string") { if (typeof setting.voiceChangerClientSetting.audioInput == "string") {
if (inputAudioDeviceInfo.find(x => { if (inputAudioDeviceInfo.find(x => {
// console.log("COMPARE:", x.deviceId, appState.clientSetting.setting.audioInput) // console.log("COMPARE:", x.deviceId, appState.clientSetting.setting.audioInput)
return x.deviceId == clientSetting.clientSetting.audioInput return x.deviceId == setting.voiceChangerClientSetting.audioInput
})) { })) {
setAudioInputForGUI(clientSetting.clientSetting.audioInput) setAudioInputForGUI(setting.voiceChangerClientSetting.audioInput)
} }
} }
}, [inputAudioDeviceInfo, clientSetting.clientSetting.audioInput]) }, [inputAudioDeviceInfo, setting.voiceChangerClientSetting.audioInput])
// (2-1) クライアント // (2-1) クライアント
const clientAudioInputRow = useMemo(() => { const clientAudioInputRow = useMemo(() => {
@ -81,12 +78,12 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
setAudioInputForGUI(e.target.value) setAudioInputForGUI(e.target.value)
if (audioInputForGUI != "file") { if (audioInputForGUI != "file") {
try { try {
await clientSetting.updateClientSetting({ ...clientSetting.clientSetting, audioInput: e.target.value }) await setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, audioInput: e.target.value })
} catch (e) { } catch (e) {
alert(e) alert(e)
console.error(e) console.error(e)
setAudioInputForGUI("none") setAudioInputForGUI("none")
await clientSetting.updateClientSetting({ ...clientSetting.clientSetting, audioInput: null }) await setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, audioInput: null })
} }
} }
}}> }}>
@ -99,7 +96,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
</div> </div>
</div> </div>
) )
}, [clientSetting.updateClientSetting, clientSetting.clientSetting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio]) }, [setVoiceChangerClientSetting, setting.voiceChangerClientSetting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio])
// (2-2) サーバ // (2-2) サーバ
@ -175,7 +172,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
const dst = audioContext.createMediaStreamDestination() const dst = audioContext.createMediaStreamDestination()
audioSrcNode.current.connect(dst) audioSrcNode.current.connect(dst)
try { try {
clientSetting.updateClientSetting({ ...clientSetting.clientSetting, audioInput: dst.stream }) setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, audioInput: dst.stream })
} catch (e) { } catch (e) {
console.error(e) console.error(e)
} }
@ -344,11 +341,11 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
} }
const onOutputRecordStartClicked = async () => { const onOutputRecordStartClicked = async () => {
setOutputRecordingStarted(true) setOutputRecordingStarted(true)
await workletNodeSetting.startOutputRecording() await startOutputRecording()
} }
const onOutputRecordStopClicked = async () => { const onOutputRecordStopClicked = async () => {
setOutputRecordingStarted(false) setOutputRecordingStarted(false)
const record = await workletNodeSetting.stopOutputRecording() const record = await stopOutputRecording()
downloadRecord(record) downloadRecord(record)
} }
@ -366,7 +363,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
</div> </div>
) )
}, [outputRecordingStarted, workletNodeSetting]) }, [outputRecordingStarted, startOutputRecording, stopOutputRecording])

4
client/demo/src/components/demo/components2/102-4_RecorderArea.tsx
View File

@ -7,7 +7,7 @@ export type RecorderAreaProps = {
} }
export const RecorderArea = (_props: RecorderAreaProps) => { export const RecorderArea = (_props: RecorderAreaProps) => {
const { serverSetting, workletNodeSetting } = useAppState() const { serverSetting } = useAppState()
const { audioOutputForAnalyzer, setAudioOutputForAnalyzer, outputAudioDeviceInfo } = useGuiState() const { audioOutputForAnalyzer, setAudioOutputForAnalyzer, outputAudioDeviceInfo } = useGuiState()
const [serverIORecording, setServerIORecording] = useState<boolean>(false) const [serverIORecording, setServerIORecording] = useState<boolean>(false)
@ -106,7 +106,7 @@ export const RecorderArea = (_props: RecorderAreaProps) => {
</> </>
) )
}, [serverIORecording, workletNodeSetting]) }, [serverIORecording])
return ( return (
<div className="config-sub-area"> <div className="config-sub-area">

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

@ -3,7 +3,7 @@ import { VoiceChangerWorkletNode, VoiceChangerWorkletListener } from "./VoiceCha
import workerjs from "raw-loader!../worklet/dist/index.js"; import workerjs from "raw-loader!../worklet/dist/index.js";
import { VoiceFocusDeviceTransformer, VoiceFocusTransformDevice } from "amazon-chime-sdk-js"; import { VoiceFocusDeviceTransformer, VoiceFocusTransformDevice } from "amazon-chime-sdk-js";
import { createDummyMediaStream, validateUrl } from "./util"; import { createDummyMediaStream, validateUrl } from "./util";
import { DefaultVoiceChangerClientSetting, MergeModelRequest, ServerSettingKey, VoiceChangerClientSetting, WorkletNodeSetting, WorkletSetting } from "./const"; import { DefaultClientSettng, MergeModelRequest, ServerSettingKey, VoiceChangerClientSetting, WorkletNodeSetting, WorkletSetting } from "./const";
import { ServerConfigurator } from "./ServerConfigurator"; import { ServerConfigurator } from "./ServerConfigurator";
// オーディオデータの流れ // オーディオデータの流れ
@ -31,7 +31,7 @@ export class VoiceChangerClient {
private promiseForInitialize: Promise<void> private promiseForInitialize: Promise<void>
private _isVoiceChanging = false private _isVoiceChanging = false
private setting: VoiceChangerClientSetting = DefaultVoiceChangerClientSetting private setting: VoiceChangerClientSetting = DefaultClientSettng.voiceChangerClientSetting
private sslCertified: string[] = [] private sslCertified: string[] = []

4
client/lib/src/VoiceChangerWorkletNode.ts
View File

@ -1,5 +1,5 @@
import { VoiceChangerWorkletProcessorRequest } from "./@types/voice-changer-worklet-processor"; import { VoiceChangerWorkletProcessorRequest } from "./@types/voice-changer-worklet-processor";
import { DefaultWorkletNodeSetting, DownSamplingMode, VOICE_CHANGER_CLIENT_EXCEPTION, WorkletNodeSetting, WorkletSetting } from "./const"; import { DefaultClientSettng, DownSamplingMode, VOICE_CHANGER_CLIENT_EXCEPTION, WorkletNodeSetting, WorkletSetting } from "./const";
import { io, Socket } from "socket.io-client"; import { io, Socket } from "socket.io-client";
import { DefaultEventsMap } from "@socket.io/component-emitter"; import { DefaultEventsMap } from "@socket.io/component-emitter";
@ -13,7 +13,7 @@ export type VoiceChangerWorkletListener = {
export class VoiceChangerWorkletNode extends AudioWorkletNode { export class VoiceChangerWorkletNode extends AudioWorkletNode {
private listener: VoiceChangerWorkletListener private listener: VoiceChangerWorkletListener
private setting: WorkletNodeSetting = DefaultWorkletNodeSetting private setting: WorkletNodeSetting = DefaultClientSettng.workletNodeSetting
private requestChunks: ArrayBuffer[] = [] private requestChunks: ArrayBuffer[] = []
private socket: Socket<DefaultEventsMap, DefaultEventsMap> | null = null private socket: Socket<DefaultEventsMap, DefaultEventsMap> | null = null
// performance monitor // performance monitor

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

@ -39,21 +39,6 @@ export const CrossFadeOverlapSize = {
} as const } as const
export type CrossFadeOverlapSize = typeof CrossFadeOverlapSize[keyof typeof CrossFadeOverlapSize] 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 = { export const F0Detector = {
"dio": "dio", "dio": "dio",
"harvest": "harvest", "harvest": "harvest",
@ -147,9 +132,6 @@ export type VoiceChangerServerSetting = {
crossFadeEndRate: number, crossFadeEndRate: number,
crossFadeOverlapSize: CrossFadeOverlapSize, crossFadeOverlapSize: CrossFadeOverlapSize,
framework: Framework
onnxExecutionProvider: OnnxExecutionProvider,
f0Factor: number f0Factor: number
f0Detector: F0Detector // dio or harvest f0Detector: F0Detector // dio or harvest
recordIO: number // 0:off, 1:on recordIO: number // 0:off, 1:on
@ -280,11 +262,8 @@ type ServerAudioDevice = {
} }
export type ServerInfo = VoiceChangerServerSetting & { export type ServerInfo = VoiceChangerServerSetting & {
// コンフィグ対象外 (getInfoで取得のみ可能な情報)
status: string status: string
configFile: string,
pyTorchModelFile: string,
onnxModelFile: string,
onnxExecutionProviders: OnnxExecutionProvider[]
modelSlots: ModelSlotUnion[] modelSlots: ModelSlotUnion[]
serverAudioInputDevices: ServerAudioDevice[] serverAudioInputDevices: ServerAudioDevice[]
serverAudioOutputDevices: ServerAudioDevice[] serverAudioOutputDevices: ServerAudioDevice[]
@ -297,9 +276,6 @@ export type ServerInfo = VoiceChangerServerSetting & {
} }
export type ServerInfoSoVitsSVC = ServerInfo & {
speakers: { [key: string]: number }
}
export type RVCSampleModel = { export type RVCSampleModel = {
id: string id: string
@ -346,9 +322,7 @@ export const DefaultServerSetting: ServerInfo = {
gpu: 0, gpu: 0,
framework: Framework.PyTorch,
f0Factor: 1.0, f0Factor: 1.0,
onnxExecutionProvider: OnnxExecutionProvider.CPUExecutionProvider,
f0Detector: F0Detector.dio, f0Detector: F0Detector.dio,
tran: 0, tran: 0,
@ -379,33 +353,10 @@ export const DefaultServerSetting: ServerInfo = {
enableDirectML: 0, enableDirectML: 0,
// //
status: "ok", status: "ok",
configFile: "",
pyTorchModelFile: "",
onnxModelFile: "",
onnxExecutionProviders: [],
modelSlots: [], modelSlots: [],
serverAudioInputDevices: [], serverAudioInputDevices: [],
serverAudioOutputDevices: [] serverAudioOutputDevices: []
} }
export const DefaultServerSetting_MMVCv15: ServerInfo = {
...DefaultServerSetting, dstId: 101,
}
export const DefaultServerSetting_MMVCv13: ServerInfo = {
...DefaultServerSetting, srcId: 107, dstId: 100,
}
export const DefaultServerSetting_so_vits_svc_40: ServerInfo = {
...DefaultServerSetting, tran: 10, noiseScale: 0.3, extraConvertSize: 1024 * 8, clusterInferRatio: 0.1,
}
export const DefaultServerSetting_DDSP_SVC: ServerInfo = {
...DefaultServerSetting, dstId: 1, tran: 10, extraConvertSize: 1024 * 8
}
export const DefaultServerSetting_RVC: ServerInfo = {
...DefaultServerSetting, tran: 10, extraConvertSize: 1024 * 4, f0Detector: F0Detector.harvest
}
/////////////////////// ///////////////////////
// Workletセッティング // Workletセッティング
@ -416,11 +367,6 @@ export type WorkletSetting = {
volTrancateThreshold: number, volTrancateThreshold: number,
volTrancateLength: number volTrancateLength: number
} }
export const DefaultWorkletSetting: WorkletSetting = {
numTrancateTreshold: 100,
volTrancateThreshold: 0.0005,
volTrancateLength: 32
}
/////////////////////// ///////////////////////
// Worklet Nodeセッティング // Worklet Nodeセッティング
/////////////////////// ///////////////////////
@ -451,13 +397,6 @@ export type WorkletNodeSetting = {
inputChunkNum: number, inputChunkNum: number,
downSamplingMode: DownSamplingMode, downSamplingMode: DownSamplingMode,
} }
export const DefaultWorkletNodeSetting: WorkletNodeSetting = {
serverUrl: "",
protocol: "sio",
sendingSampleRate: 48000,
inputChunkNum: 48,
downSamplingMode: "average"
}
/////////////////////// ///////////////////////
@ -479,14 +418,36 @@ export type VoiceChangerClientSetting = {
outputGain: number outputGain: number
} }
export const DefaultVoiceChangerClientSetting: VoiceChangerClientSetting = { ///////////////////////
audioInput: null, // Client セッティング
sampleRate: 48000, ///////////////////////
echoCancel: false, export type ClientSetting = {
noiseSuppression: false, workletSetting: WorkletSetting
noiseSuppression2: false, workletNodeSetting: WorkletNodeSetting
inputGain: 1.0, voiceChangerClientSetting: VoiceChangerClientSetting
outputGain: 1.0 }
export const DefaultClientSettng: ClientSetting = {
workletSetting: {
numTrancateTreshold: 100,
volTrancateThreshold: 0.0005,
volTrancateLength: 32
},
workletNodeSetting: {
serverUrl: "",
protocol: "sio",
sendingSampleRate: 48000,
inputChunkNum: 48,
downSamplingMode: "average"
},
voiceChangerClientSetting: {
audioInput: null,
sampleRate: 48000,
echoCancel: false,
noiseSuppression: false,
noiseSuppression2: false,
inputGain: 1.0,
outputGain: 1.0
}
} }

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

@ -1,11 +1,11 @@
import { useEffect, useMemo, useRef, useState } from "react" import { useEffect, useMemo, useRef, useState } from "react"
import { VoiceChangerClient } from "../VoiceChangerClient" import { VoiceChangerClient } from "../VoiceChangerClient"
import { ClientSettingState, useClientSetting } from "./useClientSetting" import { useClientSetting } from "./useClientSetting"
import { IndexedDBStateAndMethod, useIndexedDB } from "./useIndexedDB" import { IndexedDBStateAndMethod, useIndexedDB } from "./useIndexedDB"
import { ServerSettingState, useServerSetting } from "./useServerSetting" import { ServerSettingState, useServerSetting } from "./useServerSetting"
import { useWorkletNodeSetting, WorkletNodeSettingState } from "./useWorkletNodeSetting" import { useWorkletNodeSetting } from "./useWorkletNodeSetting"
import { useWorkletSetting, WorkletSettingState } from "./useWorkletSetting" import { useWorkletSetting } from "./useWorkletSetting"
import { DefaultVoiceChangerClientSetting, DefaultWorkletNodeSetting, DefaultWorkletSetting } from "../const" import { ClientSetting, DefaultClientSettng, VoiceChangerClientSetting, WorkletNodeSetting, WorkletSetting } from "../const"
export type UseClientProps = { export type UseClientProps = {
audioContext: AudioContext | null audioContext: AudioContext | null
@ -13,10 +13,24 @@ export type UseClientProps = {
export type ClientState = { export type ClientState = {
initialized: boolean initialized: boolean
setting: ClientSetting,
// 各種設定I/Fへの参照 // 各種設定I/Fへの参照
workletSetting: WorkletSettingState setVoiceChangerClientSetting: (_voiceChangerClientSetting: VoiceChangerClientSetting) => void
clientSetting: ClientSettingState setServerUrl: (url: string) => void;
workletNodeSetting: WorkletNodeSettingState start: () => Promise<void>
stop: () => Promise<void>
reloadClientSetting: () => Promise<void>
setWorkletNodeSetting: (_workletNodeSetting: WorkletNodeSetting) => void
startOutputRecording: () => void
stopOutputRecording: () => Promise<Float32Array>
trancateBuffer: () => Promise<void>
setWorkletSetting: (_workletSetting: WorkletSetting) => void
// workletSetting: WorkletSetting
// workletSetting: WorkletSettingState
// clientSetting: ClientSettingState
// workletNodeSetting: WorkletNodeSettingState
serverSetting: ServerSettingState serverSetting: ServerSettingState
indexedDBState: IndexedDBStateAndMethod indexedDBState: IndexedDBStateAndMethod
@ -54,7 +68,7 @@ const InitialPerformanceData: PerformanceData = {
export const useClient = (props: UseClientProps): ClientState => { export const useClient = (props: UseClientProps): ClientState => {
const [initialized, setInitialized] = useState<boolean>(false) const [initialized, setInitialized] = useState<boolean>(false)
// const [clientType, setClientType] = useState<ClientType | null>(null) const [setting, setSetting] = useState<ClientSetting>(DefaultClientSettng)
// (1-1) クライアント // (1-1) クライアント
const voiceChangerClientRef = useRef<VoiceChangerClient | null>(null) const voiceChangerClientRef = useRef<VoiceChangerClient | null>(null)
const [voiceChangerClient, setVoiceChangerClient] = useState<VoiceChangerClient | null>(voiceChangerClientRef.current) const [voiceChangerClient, setVoiceChangerClient] = useState<VoiceChangerClient | null>(voiceChangerClientRef.current)
@ -68,9 +82,9 @@ export const useClient = (props: UseClientProps): ClientState => {
// (1-2) 各種設定I/F // (1-2) 各種設定I/F
const clientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext, defaultVoiceChangerClientSetting: DefaultVoiceChangerClientSetting }) const voiceChangerClientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext, defaultVoiceChangerClientSetting: setting.voiceChangerClientSetting })
const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient, defaultWorkletNodeSetting: DefaultWorkletNodeSetting }) const workletNodeSetting = useWorkletNodeSetting({ voiceChangerClient: voiceChangerClient, defaultWorkletNodeSetting: setting.workletNodeSetting })
const workletSetting = useWorkletSetting({ voiceChangerClient, defaultWorkletSetting: DefaultWorkletSetting }) useWorkletSetting({ voiceChangerClient, defaultWorkletSetting: setting.workletSetting })
const serverSetting = useServerSetting({ voiceChangerClient }) const serverSetting = useServerSetting({ voiceChangerClient })
const indexedDBState = useIndexedDB({ clientType: null }) const indexedDBState = useIndexedDB({ clientType: null })
@ -173,22 +187,56 @@ export const useClient = (props: UseClientProps): ClientState => {
const getInfo = useMemo(() => { const getInfo = useMemo(() => {
return async () => { return async () => {
await initializedPromise await initializedPromise
await clientSetting.reloadClientSetting() // 実質的な処理の意味はない await voiceChangerClientSetting.reloadClientSetting() // 実質的な処理の意味はない
await serverSetting.reloadServerInfo() await serverSetting.reloadServerInfo()
} }
}, [clientSetting.reloadClientSetting, serverSetting.reloadServerInfo]) }, [voiceChangerClientSetting.reloadClientSetting, serverSetting.reloadServerInfo])
const clearSetting = async () => { const clearSetting = async () => {
// TBD // TBD
} }
// 設定変更
const setVoiceChangerClientSetting = (_voiceChangerClientSetting: VoiceChangerClientSetting) => {
setting.voiceChangerClientSetting = _voiceChangerClientSetting
console.log("setting.voiceChangerClientSetting", setting.voiceChangerClientSetting)
// workletSettingIF.setSetting(_workletSetting)
setSetting({ ...setting })
}
const setWorkletNodeSetting = (_workletNodeSetting: WorkletNodeSetting) => {
setting.workletNodeSetting = _workletNodeSetting
console.log("setting.workletNodeSetting", setting.workletNodeSetting)
// workletSettingIF.setSetting(_workletSetting)
setSetting({ ...setting })
}
const setWorkletSetting = (_workletSetting: WorkletSetting) => {
setting.workletSetting = _workletSetting
console.log("setting.workletSetting", setting.workletSetting)
// workletSettingIF.setSetting(_workletSetting)
setSetting({ ...setting })
}
return { return {
initialized, initialized,
setting,
// 各種設定I/Fへの参照 // 各種設定I/Fへの参照
clientSetting, setVoiceChangerClientSetting,
workletNodeSetting, setServerUrl: voiceChangerClientSetting.setServerUrl,
workletSetting, start: voiceChangerClientSetting.start,
stop: voiceChangerClientSetting.stop,
reloadClientSetting: voiceChangerClientSetting.reloadClientSetting,
setWorkletNodeSetting,
startOutputRecording: workletNodeSetting.startOutputRecording,
stopOutputRecording: workletNodeSetting.stopOutputRecording,
trancateBuffer: workletNodeSetting.trancateBuffer,
setWorkletSetting,
// workletSetting: workletSettingIF.setting,
serverSetting, serverSetting,
indexedDBState, indexedDBState,

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

@ -1,4 +1,4 @@
import { useState, useMemo } from "react" import { useState, useMemo, useEffect } from "react"
import { VoiceChangerClientSetting } from "../const" import { VoiceChangerClientSetting } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient" import { VoiceChangerClient } from "../VoiceChangerClient"
@ -10,35 +10,33 @@ export type UseClientSettingProps = {
} }
export type ClientSettingState = { export type ClientSettingState = {
clientSetting: VoiceChangerClientSetting;
setServerUrl: (url: string) => void;
updateClientSetting: (clientSetting: VoiceChangerClientSetting) => void
setServerUrl: (url: string) => void;
start: () => Promise<void> start: () => Promise<void>
stop: () => Promise<void> stop: () => Promise<void>
reloadClientSetting: () => Promise<void> reloadClientSetting: () => Promise<void>
} }
export const useClientSetting = (props: UseClientSettingProps): ClientSettingState => { export const useClientSetting = (props: UseClientSettingProps): ClientSettingState => {
const [clientSetting, setClientSetting] = useState<VoiceChangerClientSetting>(props.defaultVoiceChangerClientSetting) // 更新比較用
const [voiceChangerClientSetting, setVoiceChangerClientSetting] = useState<VoiceChangerClientSetting>(props.defaultVoiceChangerClientSetting)
////////////// useEffect(() => {
// 設定 const update = async () => {
/////////////
const updateClientSetting = useMemo(() => {
return async (_clientSetting: VoiceChangerClientSetting) => {
if (!props.voiceChangerClient) return if (!props.voiceChangerClient) return
for (let k in _clientSetting) { for (let k in props.defaultVoiceChangerClientSetting) {
const cur_v = clientSetting[k as keyof VoiceChangerClientSetting] const cur_v = voiceChangerClientSetting[k as keyof VoiceChangerClientSetting]
const new_v = _clientSetting[k as keyof VoiceChangerClientSetting] const new_v = props.defaultVoiceChangerClientSetting[k as keyof VoiceChangerClientSetting]
if (cur_v != new_v) { if (cur_v != new_v) {
setClientSetting(_clientSetting) setVoiceChangerClientSetting(props.defaultVoiceChangerClientSetting)
await props.voiceChangerClient.updateClientSetting(_clientSetting) await props.voiceChangerClient.updateClientSetting(props.defaultVoiceChangerClientSetting)
break break
} }
} }
} }
}, [props.voiceChangerClient, clientSetting]) update()
}, [props.voiceChangerClient, props.defaultVoiceChangerClientSetting])
const setServerUrl = useMemo(() => { const setServerUrl = useMemo(() => {
return (url: string) => { return (url: string) => {
@ -55,7 +53,6 @@ export const useClientSetting = (props: UseClientSettingProps): ClientSettingSta
const start = useMemo(() => { const start = useMemo(() => {
return async () => { return async () => {
if (!props.voiceChangerClient) return if (!props.voiceChangerClient) return
// props.voiceChangerClient.setServerUrl(setting.mmvcServerUrl, true)
await props.voiceChangerClient.start() await props.voiceChangerClient.start()
} }
}, [props.voiceChangerClient]) }, [props.voiceChangerClient])
@ -74,9 +71,7 @@ export const useClientSetting = (props: UseClientSettingProps): ClientSettingSta
}, [props.voiceChangerClient]) }, [props.voiceChangerClient])
return { return {
clientSetting,
setServerUrl, setServerUrl,
updateClientSetting,
start, start,
stop, stop,

1
client/lib/src/hooks/useIndexedDB.ts
View File

@ -12,7 +12,6 @@ export type IndexedDBStateAndMethod = IndexedDBState & {
setItem: (key: string, value: unknown) => Promise<void>, setItem: (key: string, value: unknown) => Promise<void>,
getItem: (key: string) => Promise<unknown> getItem: (key: string) => Promise<unknown>
removeItem: (key: string) => Promise<void> removeItem: (key: string) => Promise<void>
// clearAll: () => Promise<void>
removeDB: () => Promise<void> removeDB: () => Promise<void>
} }

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

@ -93,11 +93,6 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
const new_v = setting[k] const new_v = setting[k]
if (cur_v != new_v) { if (cur_v != new_v) {
const res = await props.voiceChangerClient.updateServerSettings(k, "" + new_v) const res = await props.voiceChangerClient.updateServerSettings(k, "" + new_v)
if (res.onnxExecutionProviders && res.onnxExecutionProviders.length > 0) {
res.onnxExecutionProvider = res.onnxExecutionProviders[0]
} else {
res.onnxExecutionProvider = "CPUExecutionProvider"
}
setServerSetting(res) setServerSetting(res)
const storeData = { ...res } const storeData = { ...res }

32
client/lib/src/hooks/useWorkletNodeSetting.ts
View File

@ -1,4 +1,4 @@
import { useState, useMemo } from "react" import { useState, useMemo, useEffect } from "react"
import { WorkletNodeSetting } from "../const" import { WorkletNodeSetting } from "../const"
import { VoiceChangerClient } from "../VoiceChangerClient" import { VoiceChangerClient } from "../VoiceChangerClient"
@ -10,35 +10,33 @@ export type UseWorkletNodeSettingProps = {
} }
export type WorkletNodeSettingState = { export type WorkletNodeSettingState = {
workletNodeSetting: WorkletNodeSetting;
updateWorkletNodeSetting: (setting: WorkletNodeSetting) => void
startOutputRecording: () => void startOutputRecording: () => void
stopOutputRecording: () => Promise<Float32Array> stopOutputRecording: () => Promise<Float32Array>
trancateBuffer: () => Promise<void> trancateBuffer: () => Promise<void>
} }
export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): WorkletNodeSettingState => { export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): WorkletNodeSettingState => {
// 更新比較用
const [workletNodeSetting, _setWorkletNodeSetting] = useState<WorkletNodeSetting>(props.defaultWorkletNodeSetting) const [workletNodeSetting, _setWorkletNodeSetting] = useState<WorkletNodeSetting>(props.defaultWorkletNodeSetting)
////////////// //////////////
// 設定 // 設定
///////////// /////////////
useEffect(() => {
const updateWorkletNodeSetting = useMemo(() => { if (!props.voiceChangerClient) return
return (_workletNodeSetting: WorkletNodeSetting) => { for (let k in props.defaultWorkletNodeSetting) {
if (!props.voiceChangerClient) return const cur_v = workletNodeSetting[k as keyof WorkletNodeSetting]
for (let k in _workletNodeSetting) { const new_v = props.defaultWorkletNodeSetting[k as keyof WorkletNodeSetting]
const cur_v = workletNodeSetting[k as keyof WorkletNodeSetting] if (cur_v != new_v) {
const new_v = _workletNodeSetting[k as keyof WorkletNodeSetting] _setWorkletNodeSetting(props.defaultWorkletNodeSetting)
if (cur_v != new_v) { props.voiceChangerClient.updateWorkletNodeSetting(props.defaultWorkletNodeSetting)
_setWorkletNodeSetting(_workletNodeSetting) break
props.voiceChangerClient.updateWorkletNodeSetting(_workletNodeSetting)
break
}
} }
} }
}, [props.voiceChangerClient, workletNodeSetting])
}, [props.voiceChangerClient, props.defaultWorkletNodeSetting])
const startOutputRecording = useMemo(() => { const startOutputRecording = useMemo(() => {
return () => { return () => {
@ -62,8 +60,6 @@ export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): Workle
}, [props.voiceChangerClient]) }, [props.voiceChangerClient])
return { return {
workletNodeSetting,
updateWorkletNodeSetting,
startOutputRecording, startOutputRecording,
stopOutputRecording, stopOutputRecording,
trancateBuffer trancateBuffer

29
client/lib/src/hooks/useWorkletSetting.ts
View File

@ -1,4 +1,4 @@
import { useState, useMemo, useEffect } from "react" import { useState, useEffect } from "react"
import { WorkletSetting } from "../const"; import { WorkletSetting } from "../const";
import { VoiceChangerClient } from "../VoiceChangerClient"; import { VoiceChangerClient } from "../VoiceChangerClient";
@ -8,30 +8,31 @@ export type UseWorkletSettingProps = {
} }
export type WorkletSettingState = { export type WorkletSettingState = {
setting: WorkletSetting; // setting: WorkletSetting;
setSetting: (setting: WorkletSetting) => void; // setSetting: (setting: WorkletSetting) => void;
} }
export const useWorkletSetting = (props: UseWorkletSettingProps): WorkletSettingState => { export const useWorkletSetting = (props: UseWorkletSettingProps): WorkletSettingState => {
const [setting, _setSetting] = useState<WorkletSetting>(props.defaultWorkletSetting) const [setting, _setSetting] = useState<WorkletSetting>(props.defaultWorkletSetting)
// クライアントへ設定反映 初期化, 設定変更
useEffect(() => { useEffect(() => {
if (!props.voiceChangerClient) return if (!props.voiceChangerClient) return
props.voiceChangerClient.configureWorklet(setting) props.voiceChangerClient.configureWorklet(setting)
}, [props.voiceChangerClient, setting]) }, [props.voiceChangerClient, props.defaultWorkletSetting])
// 設定 _setSettingがトリガでuseEffectが呼ばれて、workletに設定が飛ぶ
const setSetting = useMemo(() => {
return (setting: WorkletSetting) => { // // 設定 _setSettingがトリガでuseEffectが呼ばれて、workletに設定が飛ぶ
if (!props.voiceChangerClient) return // const setSetting = useMemo(() => {
_setSetting(setting) // return (setting: WorkletSetting) => {
} // if (!props.voiceChangerClient) return
}, [props.voiceChangerClient]) // _setSetting(setting)
// }
// }, [props.voiceChangerClient])
return { return {
setting, // setting,
setSetting, // setSetting,
} }
} }

2
client/lib/worklet/src/voice-changer-worklet-processor.ts
View File

@ -74,7 +74,7 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
this.numTrancateTreshold = request.numTrancateTreshold this.numTrancateTreshold = request.numTrancateTreshold
// this.volTrancateLength = request.volTrancateLength // this.volTrancateLength = request.volTrancateLength
// this.volTrancateThreshold = request.volTrancateThreshold // this.volTrancateThreshold = request.volTrancateThreshold
// console.log("[worklet] worklet configured", request) console.log("[worklet] worklet configured", request)
return return
} else if (request.requestType === "start") { } else if (request.requestType === "start") {
if (this.isRecording) { if (this.isRecording) {

3
server/voice_changer/VoiceChangerManager.py
View File

@ -29,7 +29,6 @@ class GPUInfo:
@dataclass() @dataclass()
class VoiceChangerManagerSettings: class VoiceChangerManagerSettings:
dummy: int
modelSlotIndex: int = -1 modelSlotIndex: int = -1
# ↓mutableな物だけ列挙 # ↓mutableな物だけ列挙
intData: list[str] = field(default_factory=lambda: ["modelSlotIndex"]) intData: list[str] = field(default_factory=lambda: ["modelSlotIndex"])
@ -59,7 +58,7 @@ class VoiceChangerManager(ServerDeviceCallbacks):
def __init__(self, params: VoiceChangerParams): def __init__(self, params: VoiceChangerParams):
self.params = params self.params = params
self.voiceChanger: VoiceChanger = None self.voiceChanger: VoiceChanger = None
self.settings: VoiceChangerManagerSettings = VoiceChangerManagerSettings(dummy=0) self.settings: VoiceChangerManagerSettings = VoiceChangerManagerSettings()
self.modelSlotManager = ModelSlotManager.get_instance(self.params.model_dir) self.modelSlotManager = ModelSlotManager.get_instance(self.params.model_dir)
# スタティックな情報を収集 # スタティックな情報を収集