diff --git a/client/lib/src/VoiceChangerClient.ts b/client/lib/src/VoiceChangerClient.ts index 6e911149..38fa9495 100644 --- a/client/lib/src/VoiceChangerClient.ts +++ b/client/lib/src/VoiceChangerClient.ts @@ -261,14 +261,7 @@ export class VoiceChangerClient { // configure worklet configureWorklet = (setting: WorkletSetting) => { - // const req: VoiceChangerWorkletProcessorRequest = { - // requestType: "config", - // voice: new ArrayBuffer(1), - // numTrancateTreshold: setting.numTrancateTreshold, - // volTrancateThreshold: setting.volTrancateThreshold, - // volTrancateLength: setting.volTrancateLength - // } - // this.vcNode.postReceivedVoice(req) + console.log("configureWorklet", setting) this.vcNode.configure(setting) } startOutputRecordingWorklet = () => { diff --git a/client/lib/src/hooks/useClient.ts b/client/lib/src/hooks/useClient.ts index 6dd2397d..5bb95585 100644 --- a/client/lib/src/hooks/useClient.ts +++ b/client/lib/src/hooks/useClient.ts @@ -10,16 +10,20 @@ export type UseClientProps = { } export type ClientState = { + // 各種設定I/Fへの参照 workletSetting: WorkletSettingState clientSetting: ClientSettingState serverSetting: ServerSettingState + // モニタリングデータ bufferingTime: number; responseTime: number; volume: number; - outputRecordData: Float32Array[] | null; + outputRecordData: Float32Array[] | null; // Serverから帰ってきたデータをレコードしたもの + // 情報取得 getInfo: () => Promise + // 設定クリア clearSetting: () => Promise } @@ -39,22 +43,20 @@ export const useClient = (props: UseClientProps): ClientState => { }, []) - // (1-2) 各種設定 + // (1-2) 各種設定I/F const clientSetting = useClientSetting({ voiceChangerClient, audioContext: props.audioContext }) const workletSetting = useWorkletSetting({ voiceChangerClient }) const serverSetting = useServerSetting({ voiceChangerClient }) - // (1-3) ステータス + // (1-3) モニタリングデータ const [bufferingTime, setBufferingTime] = useState(0) const [responseTime, setResponseTime] = useState(0) const [volume, setVolume] = useState(0) const [outputRecordData, setOutputRecordData] = useState(null) - // (1-4) エラーステータス const errorCountRef = useRef(0) - // (2-1) 初期化処理 useEffect(() => { const initialized = async () => { @@ -118,16 +120,21 @@ export const useClient = (props: UseClientProps): ClientState => { } return { + // 各種設定I/Fへの参照 + clientSetting, + workletSetting, + serverSetting, + + // モニタリングデータ bufferingTime, responseTime, volume, outputRecordData, + // 情報取得 getInfo, - clientSetting, - workletSetting, - serverSetting, + // 設定クリア clearSetting, } } \ No newline at end of file diff --git a/client/lib/src/hooks/useServerSetting.ts b/client/lib/src/hooks/useServerSetting.ts index 1eddf2e9..f6fb8253 100644 --- a/client/lib/src/hooks/useServerSetting.ts +++ b/client/lib/src/hooks/useServerSetting.ts @@ -316,52 +316,6 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta } }, [fileUploadSetting, props.voiceChangerClient]) - // const _uploadFile = useMemo(() => { - // return async (file: File, onprogress: (progress: number, end: boolean) => void) => { - // if (!props.voiceChangerClient) return - // const num = await props.voiceChangerClient.uploadFile(file, onprogress) - // const res = await props.voiceChangerClient.concatUploadedFile(file, num) - // console.log("uploaded", num, res) - // } - // }, [props.voiceChangerClient]) - // const loadModel = useMemo(() => { - // return async () => { - // if (!fileUploadSetting.pyTorchModel && !fileUploadSetting.onnxModel) { - // alert("PyTorchモデルとONNXモデルのどちらか一つ以上指定する必要があります。") - // return - // } - // if (!fileUploadSetting.configFile) { - // alert("Configファイルを指定する必要があります。") - // return - // } - // if (!props.voiceChangerClient) return - - - // setUploadProgress(0) - // setIsUploading(true) - // const models = [fileUploadSetting.pyTorchModel, fileUploadSetting.onnxModel].filter(x => { return x != null }) as File[] - // for (let i = 0; i < models.length; i++) { - // const progRate = 1 / models.length - // const progOffset = 100 * i * progRate - // await _uploadFile(models[i], (progress: number, _end: boolean) => { - // // console.log(progress * progRate + progOffset, end, progRate,) - // setUploadProgress(progress * progRate + progOffset) - // }) - // } - - // await _uploadFile(fileUploadSetting.configFile, (progress: number, end: boolean) => { - // console.log(progress, end) - // }) - - // await props.voiceChangerClient.loadModel(fileUploadSetting.configFile, fileUploadSetting.pyTorchModel, fileUploadSetting.onnxModel) - // setUploadProgress(0) - // setIsUploading(false) - // reloadServerInfo() - // } - // }, [fileUploadSetting, props.voiceChangerClient]) - - - const reloadServerInfo = useMemo(() => { return async () => { if (!props.voiceChangerClient) return diff --git a/client/lib/src/hooks/useWorkletSetting.ts b/client/lib/src/hooks/useWorkletSetting.ts index 56e205a6..8c509d86 100644 --- a/client/lib/src/hooks/useWorkletSetting.ts +++ b/client/lib/src/hooks/useWorkletSetting.ts @@ -48,21 +48,22 @@ export const useWorkletSetting = (props: UseWorkletSettingProps): WorkletSetting loadCache() }, []) - // 初期化 その2 クライアントに設定 + // クライアントに設定 初期化, 設定変更 useEffect(() => { if (!props.voiceChangerClient) return props.voiceChangerClient.configureWorklet(setting) }, [props.voiceChangerClient, setting]) + // 設定 _setSettingがトリガでuseEffectが呼ばれて、workletに設定が飛ぶ const setSetting = useMemo(() => { return (setting: WorkletSetting) => { if (!props.voiceChangerClient) return - props.voiceChangerClient.configureWorklet(setting) _setSetting(setting) setItem(INDEXEDDB_KEY_WORKLET, setting) } }, [props.voiceChangerClient]) + // その他 オペレーション const clearSetting = async () => { await removeItem(INDEXEDDB_KEY_WORKLET) }