WIP:WebEdition GUI Improve

2025-02-02 16:23:58 +03:00 · 2023-11-22 07:10:34 +09:00 · 2023-11-22 07:10:34 +09:00 · 82de23bb1a
commit 82de23bb1a
parent ab837561d9
4 changed files with 69 additions and 16 deletions
--- 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<void>;
@ -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<number>(0);
    const [progressWarmup, setProgressWarmup] = useState<number>(0);
    const [upkey, setUpkey] = useState<number>(0);
+    const [responseTimeInfo, setResponseTimeInfo] = useState<ResponseTimeInfo>({
+        responseTime: 0,
+        realDuration: 0,
+        rtf: 0,
+    });
    const voiceChangerJSClient = useRef<VoiceChangerJSClient>();

    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,
--- 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) => {
                        <p>
                            res: <span id="status-res">0</span> ms
                        </p>
+                        <p>
+                            rtf: <span id="status-rtf">0</span>
+                        </p>
                    </div>
                    <div className="portrait-area-terms-of-use">{selectedTermOfUseUrlLink}</div>
                </div>
--- 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) => {
                        <span className="character-area-slider-control-kind"></span>
                        <span className="character-area-control-buttons">
                            <span
-                                className={versionV1ClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : versionV1ClassName}
                                onClick={() => {
+                                    if (webInfoState.voiceChangerConfig.config.voiceChangerType == "rvcv1" || !readyForConfig) return;
                                    webInfoState.setVoiceChangerConfig("rvcv1", webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, webInfoState.voiceChangerConfig.inputLength);
                                }}
                            >
                                v1
                            </span>
                            <span
-                                className={versionV2ClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : versionV2ClassName}
                                onClick={() => {
-                                    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) => {
                        <span className="character-area-slider-control-kind"></span>
                        <span className="character-area-control-buttons">
                            <span
-                                className={sr32KClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : sr32KClassName}
                                onClick={() => {
+                                    if (webInfoState.voiceChangerConfig.sampleRate == "32k" || !readyForConfig) return;
                                    webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, "32k", webInfoState.voiceChangerConfig.useF0, webInfoState.voiceChangerConfig.inputLength);
                                }}
                            >
                                32k
                            </span>
                            <span
-                                className={sr40KClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : sr40KClassName}
                                onClick={() => {
+                                    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) => {
            </div>
        );

+        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) => {
                        <span className="character-area-slider-control-kind"></span>
                        <span className="character-area-control-buttons">
                            <span
-                                className={pitchEnableClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : pitchEnableClassName}
                                onClick={() => {
+                                    if (webInfoState.voiceChangerConfig.useF0 == true || !readyForConfig) return;
                                    webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, true, webInfoState.voiceChangerConfig.inputLength);
                                }}
                            >
                                Enable
                            </span>
                            <span
-                                className={pitchDisableClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : pitchDisableClassName}
                                onClick={() => {
+                                    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) => {
                        <span className="character-area-slider-control-kind"></span>
                        <span className="character-area-control-buttons">
                            <span
-                                className={latencyHighClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : latencyHighClassName}
                                onClick={() => {
+                                    if (webInfoState.voiceChangerConfig.inputLength == "24000" || !readyForConfig) return;
                                    webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, "24000");
                                }}
                            >
                                High
                            </span>
                            <span
-                                className={latencyMidClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : latencyMidClassName}
                                onClick={() => {
+                                    if (webInfoState.voiceChangerConfig.inputLength == "12000" || !readyForConfig) return;
                                    webInfoState.setVoiceChangerConfig(webInfoState.voiceChangerConfig.config.voiceChangerType, webInfoState.voiceChangerConfig.sampleRate, webInfoState.voiceChangerConfig.useF0, "12000");
                                }}
                            >
                                Mid
                            </span>
                            <span
-                                className={latencyLowClassName}
+                                className={!readyForConfig ? "character-area-control-button-disable" : latencyLowClassName}
                                onClick={() => {
+                                    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;
 };
--- 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;