WIP: refactoring

client/lib/src/VoiceChangerClient.ts

@@ -261,14 +261,7 @@ export class VoiceChangerClient {
 
     // configure worklet
     configureWorklet = (setting: WorkletSetting) => {
-        // const req: VoiceChangerWorkletProcessorRequest = {
+        console.log("configureWorklet", setting)
-        //     requestType: "config",
-        //     voice: new ArrayBuffer(1),
-        //     numTrancateTreshold: setting.numTrancateTreshold,
-        //     volTrancateThreshold: setting.volTrancateThreshold,
-        //     volTrancateLength: setting.volTrancateLength
-        // }
-        // this.vcNode.postReceivedVoice(req)
         this.vcNode.configure(setting)
     }
     startOutputRecordingWorklet = () => {

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<void>
+    // 設定クリア
     clearSetting: () => Promise<void>
 }
 
@@ -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<number>(0)
     const [responseTime, setResponseTime] = useState<number>(0)
     const [volume, setVolume] = useState<number>(0)
     const [outputRecordData, setOutputRecordData] = useState<Float32Array[] | null>(null)
 
-
     // (1-4) エラーステータス
     const errorCountRef = useRef<number>(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,
     }
 }

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

client/lib/src/hooks/useWorkletSetting.ts

@@ -48,21 +48,22 @@ export const useWorkletSetting = (props: UseWorkletSettingProps): WorkletSetting
         loadCache()
     }, [])
 
-    // 初期化 その２ クライアントに設定
+    // クライアントに設定  初期化, 設定変更
     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)
     }