From 14c73a71d2431f9475aaa3ffa18e0efc2205e828 Mon Sep 17 00:00:00 2001 From: w-okada Date: Tue, 21 Nov 2023 23:10:43 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=BB=E3=83=A2=E3=83=87=E3=83=AB=E3=82=AD?= =?UTF-8?q?=E3=83=A3=E3=83=83=E3=82=B7=E3=83=A5=E5=AF=BE=E5=BF=9C=20?= =?UTF-8?q?=E3=83=BBupkey=E5=AF=BE=E5=BF=9C=20=E3=83=BB=E3=83=A2=E3=83=87?= =?UTF-8?q?=E3=83=AB=E4=B8=80=E8=A6=A7=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/demo/src/000_index.tsx | 2 + .../src/001_globalHooks/100_useWebInfo.ts | 148 +++++++++++++++--- .../demo/components2/001_HeaderArea.tsx | 2 + .../demo/components2/101-1_TuningArea.tsx | 27 +++- .../demo/components2/101_CharacterArea.tsx | 2 + 5 files changed, 152 insertions(+), 29 deletions(-) diff --git a/client/demo/src/000_index.tsx b/client/demo/src/000_index.tsx index 19d5b70b..27115857 100644 --- a/client/demo/src/000_index.tsx +++ b/client/demo/src/000_index.tsx @@ -13,6 +13,7 @@ import { AppRootProvider, useAppRoot } from "./001_provider/001_AppRootProvider" import { useIndexedDB } from "@dannadori/voice-changer-client-js"; import { Demo } from "./components/demo/010_Demo"; import { useMessageBuilder } from "./hooks/useMessageBuilder"; +import { removeDB as webDBRemove } from "@dannadori/voice-changer-js"; library.add(fas, far, fab); @@ -57,6 +58,7 @@ const AppStateWrapper = () => { const onClearCacheClicked = async () => { await removeDB(); + await webDBRemove(); location.reload(); }; const onReloadClicked = () => { diff --git a/client/demo/src/001_globalHooks/100_useWebInfo.ts b/client/demo/src/001_globalHooks/100_useWebInfo.ts index f241bba0..79d4cba6 100644 --- a/client/demo/src/001_globalHooks/100_useWebInfo.ts +++ b/client/demo/src/001_globalHooks/100_useWebInfo.ts @@ -1,5 +1,5 @@ import { ClientState, WebModelSlot } from "@dannadori/voice-changer-client-js"; -import { VoiceChangerJSClientConfig, VoiceChangerJSClient, ProgressUpdateType, ProgreeeUpdateCallbcckInfo } from "@dannadori/voice-changer-js"; +import { VoiceChangerJSClientConfig, VoiceChangerJSClient, ProgressUpdateType, ProgreeeUpdateCallbcckInfo, VoiceChangerType, InputLengthKey } from "@dannadori/voice-changer-js"; import { useEffect, useMemo, useRef, useState } from "react"; export type UseWebInfoProps = { @@ -30,9 +30,94 @@ export type WebInfoState = { progressLoadVCModel: number; progressWarmup: number; webModelslot: WebModelSlot; + upkey: number; }; export type WebInfoStateAndMethod = WebInfoState & { loadVoiceChanagerModel: () => Promise; + setUpkey: (upkey: number) => void; +}; + +const ModelSampleRateStr = { + "40k": "40k", + "32k": "32k", +} as const; +type ModelSampleRateStr = (typeof ModelSampleRateStr)[keyof typeof ModelSampleRateStr]; + +const noF0ModelUrl: { [modelType in VoiceChangerType]: { [inputLength in InputLengthKey]: { [sampleRate in ModelSampleRateStr]: string } } } = { + rvcv1: { + "24000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_24000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_24000.bin", + }, + "16000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_16000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_16000.bin", + }, + "12000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_12000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_12000.bin", + }, + "8000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_8000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_8000.bin", + }, + }, + rvcv2: { + "24000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_24000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_24000.bin", + }, + "16000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_16000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_16000.bin", + }, + "12000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_12000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_12000.bin", + }, + "8000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_8000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_8000.bin", + }, + }, +}; +const f0ModelUrl: { [modelType in VoiceChangerType]: { [inputLength in InputLengthKey]: { [sampleRate in ModelSampleRateStr]: string } } } = { + rvcv1: { + "24000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_24000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_24000.bin", + }, + "16000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_16000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_16000.bin", + }, + "12000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_12000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_12000.bin", + }, + "8000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_8000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_8000.bin", + }, + }, + rvcv2: { + "24000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_24000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_24000.bin", + }, + "16000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_16000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_16000.bin", + }, + "12000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_12000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_12000.bin", + }, + "8000": { + "40k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_8000.bin", + "32k": "https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_8000.bin", + }, + }, }; // https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_8000.bin @@ -75,29 +160,37 @@ export type WebInfoStateAndMethod = WebInfoState & { // https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_16000.bin // https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_24000.bin -const InitialVoiceChangerConfig: VoiceChangerConfig = { - config: { - voiceChangerType: "rvcv1", - inputLength: "24000", - baseUrl: window.location.origin, - inputSamplingRate: 48000, - outputSamplingRate: 48000, - }, - // modelUrl: `${window.location.origin}/models/rvcv1_amitaro_v1_32k_nof0_24000.bin`, - modelUrl: `https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_24000.bin`, - progressCallback: null, - portrait: `${window.location.origin}/models/amitaro.png`, - name: "あみたろ", - termOfUse: "https://huggingface.co/wok000/vcclient_model/raw/main/rvc/amitaro_contentvec_256/term_of_use.txt", - f0: false, -}; - export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { - const [voiceChangerConfig, setVoiceChangerConfig] = useState(InitialVoiceChangerConfig); + const voiceChangerType: VoiceChangerType = "rvcv1"; + const inputLength: InputLengthKey = "24000"; + const useF0 = false; + const sampleRate: ModelSampleRateStr = "40k"; + let modelUrl; + if (useF0) { + modelUrl = f0ModelUrl[voiceChangerType][inputLength][sampleRate]; + } else { + modelUrl = noF0ModelUrl[voiceChangerType][inputLength][sampleRate]; + } + const [voiceChangerConfig, setVoiceChangerConfig] = useState({ + config: { + voiceChangerType: voiceChangerType, + inputLength: inputLength, + baseUrl: window.location.origin, + inputSamplingRate: 48000, + outputSamplingRate: 48000, + }, + modelUrl: modelUrl, + progressCallback: null, + portrait: `${window.location.origin}/models/amitaro.png`, + name: "あみたろ", + termOfUse: "https://huggingface.co/wok000/vcclient_model/raw/main/rvc/amitaro_contentvec_256/term_of_use.txt", + f0: false, + }); const [webModelLoadingState, setWebModelLoadingState] = useState(WebModelLoadingState.none); const [progressLoadPreprocess, setProgressLoadPreprocess] = useState(0); const [progressLoadVCModel, setProgressLoadVCModel] = useState(0); const [progressWarmup, setProgressWarmup] = useState(0); + const [upkey, setUpkey] = useState(0); const voiceChangerJSClient = useRef(); const webModelslot: WebModelSlot = useMemo(() => { @@ -145,9 +238,7 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { // worm up setWebModelLoadingState("warmup"); - const warmupResult = await voiceChangerJSClient.current.checkResponseTime((progress: number) => { - console.log(`Recieve Progress: ${progress}`); - }); + const warmupResult = await voiceChangerJSClient.current.checkResponseTime(); console.log("warmup result", warmupResult); // check time @@ -159,12 +250,21 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { const audioF32 = new Float32Array(data.buffer); const res = await voiceChangerJSClient.current!.convert(audioF32); const audio = new Uint8Array(res[0].buffer); - console.log("RESPONSE!", res[1]); + if (res[1]) { + console.log("RESPONSE!", res[1]); + } return audio; }, }); setWebModelLoadingState("ready"); }; + useEffect(() => { + if (!voiceChangerJSClient.current) { + console.log("setupkey", voiceChangerJSClient.current); + return; + } + voiceChangerJSClient.current.setUpkey(upkey); + }, [upkey]); return { voiceChangerConfig, @@ -173,6 +273,8 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { progressLoadVCModel, progressWarmup, webModelslot, + upkey, loadVoiceChanagerModel, + setUpkey, }; }; diff --git a/client/demo/src/components/demo/components2/001_HeaderArea.tsx b/client/demo/src/components/demo/components2/001_HeaderArea.tsx index fd34156f..2bed2692 100644 --- a/client/demo/src/components/demo/components2/001_HeaderArea.tsx +++ b/client/demo/src/components/demo/components2/001_HeaderArea.tsx @@ -4,6 +4,7 @@ import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; import { useAppState } from "../../../001_provider/001_AppStateProvider"; import { useIndexedDB } from "@dannadori/voice-changer-client-js"; import { useMessageBuilder } from "../../../hooks/useMessageBuilder"; +import { removeDB as webDBRemove } from "@dannadori/voice-changer-js"; export type HeaderAreaProps = { mainTitle: string; @@ -119,6 +120,7 @@ export const HeaderArea = (props: HeaderAreaProps) => { const onClearSettingClicked = async () => { await clearSetting(); await removeItem(INDEXEDDB_KEY_AUDIO_OUTPUT); + await webDBRemove(); location.reload(); }; diff --git a/client/demo/src/components/demo/components2/101-1_TuningArea.tsx b/client/demo/src/components/demo/components2/101-1_TuningArea.tsx index 3051f058..2fcf4ecd 100644 --- a/client/demo/src/components/demo/components2/101-1_TuningArea.tsx +++ b/client/demo/src/components/demo/components2/101-1_TuningArea.tsx @@ -1,14 +1,20 @@ import React, { useMemo } from "react"; import { useAppState } from "../../../001_provider/001_AppStateProvider"; import { useGuiState } from "../001_GuiStateProvider"; +import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; export type TuningAreaProps = {}; export const TuningArea = (_props: TuningAreaProps) => { - const { serverSetting } = useAppState(); - const { beatriceJVSSpeakerId, setBeatriceJVSSpeakerPitch, beatriceJVSSpeakerPitch } = useGuiState(); + const { appGuiSettingState } = useAppRoot(); + const { serverSetting, webInfoState } = useAppState(); + const { setBeatriceJVSSpeakerPitch, beatriceJVSSpeakerPitch } = useGuiState(); + const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; const selected = useMemo(() => { + if (webEdition) { + return webInfoState.webModelslot; + } if (serverSetting.serverSetting.modelSlotIndex == undefined) { return; } else if (serverSetting.serverSetting.modelSlotIndex == "Beatrice-JVS") { @@ -17,7 +23,7 @@ export const TuningArea = (_props: TuningAreaProps) => { } else { return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex]; } - }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]); + }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots, webEdition]); const tuningArea = useMemo(() => { if (!selected) { @@ -57,9 +63,18 @@ export const TuningArea = (_props: TuningAreaProps) => { ); } - const currentTuning = serverSetting.serverSetting.tran; + let currentTuning; + if (webEdition) { + currentTuning = webInfoState.upkey; + } else { + currentTuning = serverSetting.serverSetting.tran; + } const tranValueUpdatedAction = async (val: number) => { - await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, tran: val }); + if (webEdition) { + webInfoState.setUpkey(val); + } else { + await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, tran: val }); + } }; return ( @@ -85,7 +100,7 @@ export const TuningArea = (_props: TuningAreaProps) => { ); - }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]); + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected, webEdition, webInfoState.upkey]); return tuningArea; }; diff --git a/client/demo/src/components/demo/components2/101_CharacterArea.tsx b/client/demo/src/components/demo/components2/101_CharacterArea.tsx index 22dc3168..dc7708e8 100644 --- a/client/demo/src/components/demo/components2/101_CharacterArea.tsx +++ b/client/demo/src/components/demo/components2/101_CharacterArea.tsx @@ -137,6 +137,8 @@ export const CharacterArea = (_props: CharacterAreaProps) => { ); + } else { + throw new Error("invalid webModelLoadingState"); } } else { return (