From 82de23bb1a6ea089f06d73cda62415c5c615ede2 Mon Sep 17 00:00:00 2001 From: w-okada Date: Wed, 22 Nov 2023 07:10:34 +0900 Subject: [PATCH] WIP:WebEdition GUI Improve --- .../src/001_globalHooks/100_useWebInfo.ts | 13 ++++- .../demo/components2/101-0_Portrait.tsx | 16 +++++-- .../101-8_web-editionSettingArea.tsx | 47 ++++++++++++++----- client/demo/src/css/App.css | 9 ++++ 4 files changed, 69 insertions(+), 16 deletions(-) diff --git a/client/demo/src/001_globalHooks/100_useWebInfo.ts b/client/demo/src/001_globalHooks/100_useWebInfo.ts index 39297adb..d76e2c9d 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, VoiceChangerType, InputLengthKey } from "@dannadori/voice-changer-js"; +import { VoiceChangerJSClientConfig, VoiceChangerJSClient, ProgressUpdateType, ProgreeeUpdateCallbcckInfo, VoiceChangerType, InputLengthKey, ResponseTimeInfo } from "@dannadori/voice-changer-js"; import { useEffect, useMemo, useRef, useState } from "react"; export type UseWebInfoProps = { @@ -33,6 +33,7 @@ export type WebInfoState = { progressWarmup: number; webModelslot: WebModelSlot; upkey: number; + responseTimeInfo: ResponseTimeInfo; }; export type WebInfoStateAndMethod = WebInfoState & { loadVoiceChanagerModel: () => Promise; @@ -160,7 +161,7 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { name: "あみたろ", termOfUse: "https://huggingface.co/wok000/vcclient_model/raw/main/rvc/amitaro_contentvec_256/term_of_use.txt", sampleRate: sampleRate, - useF0: false, + useF0: useF0, inputLength: inputLength, progressCallback, }; @@ -173,6 +174,11 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { const [progressLoadVCModel, setProgressLoadVCModel] = useState(0); const [progressWarmup, setProgressWarmup] = useState(0); const [upkey, setUpkey] = useState(0); + const [responseTimeInfo, setResponseTimeInfo] = useState({ + responseTime: 0, + realDuration: 0, + rtf: 0, + }); const voiceChangerJSClient = useRef(); const webModelslot: WebModelSlot = useMemo(() => { @@ -223,6 +229,7 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { // check time const responseTimeInfo = await voiceChangerJSClient.current.checkResponseTime(); console.log("responseTimeInfo", responseTimeInfo); + setResponseTimeInfo(responseTimeInfo); props.clientState?.setInternalAudioProcessCallback({ processAudio: async (data: Uint8Array) => { @@ -231,6 +238,7 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { const audio = new Uint8Array(res[0].buffer); if (res[1]) { console.log("RESPONSE!", res[1]); + setResponseTimeInfo(res[1]); } return audio; }, @@ -263,6 +271,7 @@ export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => { progressWarmup, webModelslot, upkey, + responseTimeInfo, loadVoiceChanagerModel, setUpkey, setVoiceChangerConfig, diff --git a/client/demo/src/components/demo/components2/101-0_Portrait.tsx b/client/demo/src/components/demo/components2/101-0_Portrait.tsx index e4840f56..93431788 100644 --- a/client/demo/src/components/demo/components2/101-0_Portrait.tsx +++ b/client/demo/src/components/demo/components2/101-0_Portrait.tsx @@ -48,13 +48,20 @@ export const Portrait = (_props: PortraitProps) => { const vol = document.getElementById("status-vol") as HTMLSpanElement; const buf = document.getElementById("status-buf") as HTMLSpanElement; const res = document.getElementById("status-res") as HTMLSpanElement; + const rtf = document.getElementById("status-rtf") as HTMLSpanElement; if (!vol || !buf || !res) { return; } vol.innerText = volume.toFixed(4); - buf.innerText = bufferingTime.toString(); - res.innerText = performance.responseTime.toString(); - }, [volume, bufferingTime, performance]); + if (webEdition) { + buf.innerText = webInfoState.responseTimeInfo.realDuration.toString() ?? "0"; + res.innerText = webInfoState.responseTimeInfo.responseTime.toString() ?? "0"; + rtf.innerText = webInfoState.responseTimeInfo.rtf.toString() ?? "0"; + } else { + buf.innerText = bufferingTime.toString(); + res.innerText = performance.responseTime.toString(); + } + }, [volume, bufferingTime, performance, webInfoState.responseTimeInfo]); const setSelectedClass = () => { const iframe = document.querySelector(".beatrice-speaker-graph-container"); @@ -194,6 +201,9 @@ export const Portrait = (_props: PortraitProps) => {

res: 0 ms

+

+ rtf: 0 +

{selectedTermOfUseUrlLink}
diff --git a/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx b/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx index 7413dcef..3a81c78c 100644 --- a/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx +++ b/client/demo/src/components/demo/components2/101-8_web-editionSettingArea.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from "react"; import { useAppState } from "../../../001_provider/001_AppStateProvider"; import { useAppRoot } from "../../../001_provider/001_AppRootProvider"; +import { useGuiState } from "../001_GuiStateProvider"; export type WebEditionSettingAreaProps = {}; @@ -8,6 +9,7 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { const { serverSetting, webInfoState } = useAppState(); const { appGuiSettingState } = useAppRoot(); const webEdition = appGuiSettingState.edition.indexOf("web") >= 0; + const guiState = useGuiState(); const selected = useMemo(() => { if (webEdition) { @@ -21,6 +23,8 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { return <>; } + const readyForConfig = guiState.isConverting == false && webInfoState.webModelLoadingState == "ready"; + const versionV1ClassName = "character-area-control-button" + (webInfoState.voiceChangerConfig.config.voiceChangerType == "rvcv1" ? " character-area-control-button-active" : " character-area-control-button-stanby"); const versionV2ClassName = "character-area-control-button" + (webInfoState.voiceChangerConfig.config.voiceChangerType == "rvcv2" ? " character-area-control-button-active" : " character-area-control-button-stanby"); const verison = ( @@ -31,17 +35,18 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { { + if (webInfoState.voiceChangerConfig.config.voiceChangerType == "rvcv1" || !readyForConfig) return; webInfoState.setVoiceChangerConfig("rvcv1", webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, webInfoState.voiceChangerConfig.inputLength); }} > v1 { - console.log("v2 clicked!"); + if (webInfoState.voiceChangerConfig.config.voiceChangerType == "rvcv2" || !readyForConfig) return; webInfoState.setVoiceChangerConfig("rvcv2", webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, webInfoState.voiceChangerConfig.inputLength); }} > @@ -63,16 +68,18 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { { + if (webInfoState.voiceChangerConfig.sampleRate == "32k" || !readyForConfig) return; webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, "32k", webInfoState.voiceChangerConfig.useF0, webInfoState.voiceChangerConfig.inputLength); }} > 32k { + if (webInfoState.voiceChangerConfig.sampleRate == "40k" || !readyForConfig) return; webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, "40k", webInfoState.voiceChangerConfig.useF0, webInfoState.voiceChangerConfig.inputLength); }} > @@ -84,6 +91,7 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { ); + console.log("webInfoState.voiceChangerConfig.useF0 ", webInfoState.voiceChangerConfig.useF0); const pitchEnableClassName = "character-area-control-button" + (webInfoState.voiceChangerConfig.useF0 == true ? " character-area-control-button-active" : " character-area-control-button-stanby"); const pitchDisableClassName = "character-area-control-button" + (webInfoState.voiceChangerConfig.useF0 == false ? " character-area-control-button-active" : " character-area-control-button-stanby"); const pitch = ( @@ -94,16 +102,18 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { { + if (webInfoState.voiceChangerConfig.useF0 == true || !readyForConfig) return; webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, true, webInfoState.voiceChangerConfig.inputLength); }} > Enable { + if (webInfoState.voiceChangerConfig.useF0 == false || !readyForConfig) return; webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, false, webInfoState.voiceChangerConfig.inputLength); }} > @@ -126,24 +136,27 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { { + if (webInfoState.voiceChangerConfig.inputLength == "24000" || !readyForConfig) return; webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, "24000"); }} > High { + if (webInfoState.voiceChangerConfig.inputLength == "12000" || !readyForConfig) return; webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, "12000"); }} > Mid { + if (webInfoState.voiceChangerConfig.inputLength == "8000" || !readyForConfig) return; webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, "8000"); }} > @@ -162,7 +175,19 @@ export const WebEditionSettingArea = (_props: WebEditionSettingAreaProps) => { {latency} ); - }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected, webInfoState.upkey, webInfoState.voiceChangerConfig.config.voiceChangerType]); + }, [ + serverSetting.serverSetting, + serverSetting.updateServerSettings, + selected, + webInfoState.upkey, + webInfoState.voiceChangerConfig.config.voiceChangerType, + webInfoState.voiceChangerConfig.sampleRate, + webInfoState.voiceChangerConfig.useF0, + webInfoState.voiceChangerConfig.inputLength, + webInfoState.webModelLoadingState, + guiState.isConverting, + webInfoState.webModelLoadingState, + ]); return settingArea; }; diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css index 6132aadf..9152c9b4 100644 --- a/client/demo/src/css/App.css +++ b/client/demo/src/css/App.css @@ -1364,6 +1364,15 @@ body { border: solid 1px #000; } } + .character-area-control-button-disable { + width: 5rem; + border: solid 1px #333; + border-radius: 2px; + background: #d3d7d3; + font-weight: 700; + text-align: center; + color: grey; + } .character-area-control-passthru-button-stanby { width: 5rem; border: solid 1px #999;