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

add warmup progress

Browse Source
This commit is contained in:
w-okada 2023-11-21 11:45:27 +09:00
parent 3186e4322b
commit db9e02cf09
2 changed files with 74 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
client/demo/src/001_globalHooks/100_useWebInfo.ts
View File

@ -1,5 +1,5 @@
import { ClientState, WebModelSlot } from "@dannadori/voice-changer-client-js"; import { ClientState, WebModelSlot } from "@dannadori/voice-changer-client-js";
import { VoiceChangerJSClientConfig, VoiceChangerJSClient } from "@dannadori/voice-changer-js"; import { VoiceChangerJSClientConfig, VoiceChangerJSClient, ProgressUpdateType, ProgreeeUpdateCallbcckInfo } from "@dannadori/voice-changer-js";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
export type UseWebInfoProps = { export type UseWebInfoProps = {
@ -28,23 +28,52 @@ export type WebInfoState = {
webModelLoadingState: WebModelLoadingState; webModelLoadingState: WebModelLoadingState;
progressLoadPreprocess: number; progressLoadPreprocess: number;
progressLoadVCModel: number; progressLoadVCModel: number;
progressWarmup: number;
webModelslot: WebModelSlot; webModelslot: WebModelSlot;
}; };
export type WebInfoStateAndMethod = WebInfoState & { export type WebInfoStateAndMethod = WebInfoState & {
loadVoiceChanagerModel: () => Promise<void>; loadVoiceChanagerModel: () => Promise<void>;
}; };
// const modelUrl = `${baseUrl}/models/rvc2v_40k_f0_24000.bin`;
// const modelUrl = `${baseUrl}/models/rvc2v_40k_nof0_24000.bin`;
// const modelUrl = `${baseUrl}/models/rvc2v_16k_f0_24000.bin`;
// const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_40k_f0_24000.bin`;
// const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_40k_nof0_24000.bin`;
// const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_32k_f0_24000.bin`;
// const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_32k_nof0_24000.bin`;
// const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_32k_f0_24000.bin`; // https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_8000.bin
// const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_32k_nof0_24000.bin`; // https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_12000.bin
// const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_40k_f0_24000.bin`; // https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_16000.bin
// const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_40k_nof0_24000.bin`; // https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_f0_24000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_8000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_12000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_16000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_32k_nof0_24000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_8000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_12000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_16000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_f0_24000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_8000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_12000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_16000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv1_amitaro_v1_40k_nof0_24000.bin
// 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/rvcv2_amitaro_v2_32k_f0_12000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_16000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_f0_24000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_8000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_12000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_16000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_32k_nof0_24000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_8000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_12000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_16000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_f0_24000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_8000.bin
// https://huggingface.co/wok000/vcclient_model/resolve/main/web_model/v_01_alpha/amitaro/rvcv2_amitaro_v2_40k_nof0_12000.bin
// 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 = { const InitialVoiceChangerConfig: VoiceChangerConfig = {
config: { config: {
@ -68,6 +97,7 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => {
const [webModelLoadingState, setWebModelLoadingState] = useState<WebModelLoadingState>(WebModelLoadingState.none); const [webModelLoadingState, setWebModelLoadingState] = useState<WebModelLoadingState>(WebModelLoadingState.none);
const [progressLoadPreprocess, setProgressLoadPreprocess] = useState<number>(0); const [progressLoadPreprocess, setProgressLoadPreprocess] = useState<number>(0);
const [progressLoadVCModel, setProgressLoadVCModel] = useState<number>(0); const [progressLoadVCModel, setProgressLoadVCModel] = useState<number>(0);
const [progressWarmup, setProgressWarmup] = useState<number>(0);
const voiceChangerJSClient = useRef<VoiceChangerJSClient>(); const voiceChangerJSClient = useRef<VoiceChangerJSClient>();
const webModelslot: WebModelSlot = useMemo(() => { const webModelslot: WebModelSlot = useMemo(() => {
@ -89,11 +119,13 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => {
}, []); }, []);
useEffect(() => { useEffect(() => {
const progressCallback = (data: any) => { const progressCallback = (data: ProgreeeUpdateCallbcckInfo) => {
if (data.progressUpdateType === "loadPreprocessModel") { if (data.progressUpdateType === ProgressUpdateType.loadPreprocessModel) {
setProgressLoadPreprocess(data.progress); setProgressLoadPreprocess(data.progress);
} else if (data.progressUpdateType === "loadVCModel") { } else if (data.progressUpdateType === ProgressUpdateType.loadVCModel) {
setProgressLoadVCModel(data.progress); setProgressLoadVCModel(data.progress);
} else if (data.progressUpdateType === ProgressUpdateType.checkResponseTime) {
setProgressWarmup(data.progress);
} }
}; };
setVoiceChangerConfig({ ...voiceChangerConfig, progressCallback }); setVoiceChangerConfig({ ...voiceChangerConfig, progressCallback });
@ -113,7 +145,9 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => {
// worm up // worm up
setWebModelLoadingState("warmup"); setWebModelLoadingState("warmup");
const warmupResult = await voiceChangerJSClient.current.checkResponseTime(); const warmupResult = await voiceChangerJSClient.current.checkResponseTime((progress: number) => {
console.log(`Recieve Progress: ${progress}`);
});
console.log("warmup result", warmupResult); console.log("warmup result", warmupResult);
// check time // check time
@ -137,6 +171,7 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => {
webModelLoadingState, webModelLoadingState,
progressLoadPreprocess, progressLoadPreprocess,
progressLoadVCModel, progressLoadVCModel,
progressWarmup,
webModelslot, webModelslot,
loadVoiceChanagerModel, loadVoiceChanagerModel,
}; };

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

@ -17,7 +17,7 @@ export type CharacterAreaProps = {};
export const CharacterArea = (_props: CharacterAreaProps) => { export const CharacterArea = (_props: CharacterAreaProps) => {
const { appGuiSettingState } = useAppRoot(); const { appGuiSettingState } = useAppRoot();
const { serverSetting, initializedRef, volume, bufferingTime, performance, setting, setVoiceChangerClientSetting, start, stop, webInfoState } = useAppState(); const { serverSetting, initializedRef, setting, setVoiceChangerClientSetting, start, stop, webInfoState } = useAppState();
const guiState = useGuiState(); const guiState = useGuiState();
const messageBuilderState = useMessageBuilder(); const messageBuilderState = useMessageBuilder();
const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; const webEdition = appGuiSettingState.edition.indexOf("web") >= 0;
@ -113,20 +113,31 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
const startClassName = guiState.isConverting ? "character-area-control-button-active" : "character-area-control-button-stanby"; const startClassName = guiState.isConverting ? "character-area-control-button-active" : "character-area-control-button-stanby";
const stopClassName = guiState.isConverting ? "character-area-control-button-stanby" : "character-area-control-button-active"; const stopClassName = guiState.isConverting ? "character-area-control-button-stanby" : "character-area-control-button-active";
const passThruClassName = serverSetting.serverSetting.passThrough == false ? "character-area-control-passthru-button-stanby" : "character-area-control-passthru-button-active blinking"; const passThruClassName = serverSetting.serverSetting.passThrough == false ? "character-area-control-passthru-button-stanby" : "character-area-control-passthru-button-active blinking";
console.log("serverSetting.serverSetting.passThrough", passThruClassName, serverSetting.serverSetting.passThrough);
if (webEdition && webInfoState.webModelLoadingState != "ready") { if (webEdition && webInfoState.webModelLoadingState != "ready") {
return ( if (webInfoState.webModelLoadingState == "none" || webInfoState.webModelLoadingState == "loading") {
<div className="character-area-control"> return (
<div className="character-area-control-title">wait...</div> <div className="character-area-control">
<div className="character-area-control-field"> <div className="character-area-control-title">wait...</div>
<div className="character-area-text blink">{webInfoState.webModelLoadingState}..</div> <div className="character-area-control-field">
<div className="character-area-text"> <div className="character-area-text blink">{webInfoState.webModelLoadingState}..</div>
pre:{Math.floor(webInfoState.progressLoadPreprocess * 100)}%, model: {Math.floor(webInfoState.progressLoadVCModel * 100)}% <div className="character-area-text">
pre:{Math.floor(webInfoState.progressLoadPreprocess * 100)}%, model: {Math.floor(webInfoState.progressLoadVCModel * 100)}%
</div>
</div> </div>
</div> </div>
</div> );
); } else if (webInfoState.webModelLoadingState == "warmup") {
return (
<div className="character-area-control">
<div className="character-area-control-title">wait...</div>
<div className="character-area-control-field">
<div className="character-area-text blink">{webInfoState.webModelLoadingState}..</div>
<div className="character-area-text">warm up:{Math.floor(webInfoState.progressWarmup * 100)}%</div>
</div>
</div>
);
}
} else { } else {
return ( return (
<div className="character-area-control"> <div className="character-area-control">
@ -144,7 +155,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
</div> </div>
); );
} }
}, [guiState.isConverting, start, stop, serverSetting.serverSetting, serverSetting.updateServerSettings, webInfoState.progressLoadPreprocess, webInfoState.progressLoadVCModel, webInfoState.webModelLoadingState]); }, [guiState.isConverting, start, stop, serverSetting.serverSetting, serverSetting.updateServerSettings, webInfoState.progressLoadPreprocess, webInfoState.progressLoadVCModel, webInfoState.progressWarmup, webInfoState.webModelLoadingState]);
const gainControl = useMemo(() => { const gainControl = useMemo(() => {
const currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain; const currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain;