Merge pull request #166 from deiteris/fixes-2

Fixes and QoL improvements
deiteris · Aug 11, 2024 · 958a25f · 958a25f
2 parents 8d1a68e + 19e7419
commit 958a25f
Show file tree

Hide file tree

Showing 27 changed files with 5,649 additions and 5,899 deletions.
diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js
diff --git a/client/demo/package-lock.json b/client/demo/package-lock.json
diff --git a/client/demo/package.json b/client/demo/package.json
@@ -54,7 +54,7 @@
         "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
-        "@dannadori/voice-changer-client-js": "^1.0.180",
+        "@dannadori/voice-changer-client-js": "1.0.180",
         "@dannadori/worker-manager": "^1.0.20",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-brands-svg-icons": "^6.5.1",

diff --git a/client/demo/src/components/demo/900_Dialogs.tsx b/client/demo/src/components/demo/900_Dialogs.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useGuiState } from "./001_GuiStateProvider";
-import { WaitingDialog } from "./902_WaitingDialog";
 import { StartingNoticeDialog } from "./903_StartingNoticeDialog";
 import { ModelSlotManagerDialog } from "./904_ModelSlotManagerDialog";
 import { MergeLabDialog } from "./905_MergeLabDialog";
@@ -13,7 +12,6 @@ export const Dialogs = () => {
     const guiState = useGuiState();
     const dialogs = (
         <div>
-            {guiState.stateControls.showWaitingCheckbox.trigger}
             {guiState.stateControls.showStartingNoticeCheckbox.trigger}
             {guiState.stateControls.showModelSlotManagerCheckbox.trigger}
             {guiState.stateControls.showMergeLabCheckbox.trigger}
@@ -22,8 +20,6 @@ export const Dialogs = () => {
             {guiState.stateControls.showGetClientInformationCheckbox.trigger}
             {guiState.stateControls.showEnablePassThroughDialogCheckbox.trigger}
             <div className="dialog-container" id="dialog">
-                {guiState.stateControls.showWaitingCheckbox.trigger}
-                <WaitingDialog></WaitingDialog>
                 {guiState.stateControls.showStartingNoticeCheckbox.trigger}
                 <StartingNoticeDialog></StartingNoticeDialog>
                 {guiState.stateControls.showModelSlotManagerCheckbox.trigger}

diff --git a/client/demo/src/components/demo/905_MergeLabDialog.tsx b/client/demo/src/components/demo/905_MergeLabDialog.tsx
@@ -33,7 +33,7 @@ export const MergeLabDialog = () => {
                 if (!cur.modelFile || cur.modelFile.length == 0) {
                     return prev;
                 }
-                if (curRVC.modelType == "onnxRVC" || curRVC.modelType == "onnxRVCNono") {
+                if (curRVC.isONNX) {
                     return prev;
                 }
                 if (!existKeys.includes(key)) {

diff --git a/client/demo/src/components/demo/906_AdvancedSettingDialog.tsx b/client/demo/src/components/demo/906_AdvancedSettingDialog.tsx
@@ -96,7 +96,7 @@ export const AdvancedSettingDialog = () => {
             </div>
         );
 
-        const onForceFp32ModeChanged = (val: number) => {
+        const onForceFp32ModeChanged = async (val: number) => {
             return serverSetting.updateServerSettings({
                 ...serverSetting.serverSetting,
                 forceFp32: val,
@@ -109,12 +109,11 @@ export const AdvancedSettingDialog = () => {
                     <select
                         value={serverSetting.serverSetting.forceFp32}
                         onChange={async (e) => {
-                            // TODO: Need to fix CSS to show waiting dialog over all page contents. Lazy :\
-                            //guiState.stateControls.showWaitingCheckbox.updateState(true);
-                            onForceFp32ModeChanged(Number(e.target.value));
+                            guiState.stateControls.showWaitingCheckbox.updateState(true);
+                            await onForceFp32ModeChanged(Number(e.target.value));
                             // Switching between FP16-FP32 reloads models and buffers.
                             guiState.setVoiceChangerSettingsChanged(false);
-                            //guiState.stateControls.showWaitingCheckbox.updateState(false);
+                            guiState.stateControls.showWaitingCheckbox.updateState(false);
                         }}
                         disabled={guiState.isConverting}
                     >
@@ -125,7 +124,7 @@ export const AdvancedSettingDialog = () => {
             </div>
         );
 
-        const onDisableJitChanged = (val: number) => {
+        const onDisableJitChanged = async (val: number) => {
             return serverSetting.updateServerSettings({
                 ...serverSetting.serverSetting,
                 disableJit: val,
@@ -138,11 +137,10 @@ export const AdvancedSettingDialog = () => {
                     <select
                         value={serverSetting.serverSetting.disableJit}
                         onChange={async (e) => {
-                            // TODO: Need to fix CSS to show waiting dialog over all page contents. Lazy :\
-                            //guiState.stateControls.showWaitingCheckbox.updateState(true);
-                            onDisableJitChanged(Number(e.target.value));
+                            guiState.stateControls.showWaitingCheckbox.updateState(true);
+                            await onDisableJitChanged(Number(e.target.value));
                             guiState.setVoiceChangerSettingsChanged(false);
-                            //guiState.stateControls.showWaitingCheckbox.updateState(false);
+                            guiState.stateControls.showWaitingCheckbox.updateState(false);
                         }}
                         disabled={guiState.isConverting}
                     >
@@ -153,6 +151,24 @@ export const AdvancedSettingDialog = () => {
             </div>
         );
 
+        const convertToOnnx = (
+            <div className="advanced-setting-container-row">
+                <div className="advanced-setting-container-row-title"><a className="hint-text" data-tooltip-id="hint" data-tooltip-content="Automatically converts models into ONNX format. Note that model conversion is performed once and may take 1-2 minutes. Recommended for DirectML version and inference on CPU.">Convert to ONNX</a></div>
+                <div className="advanced-setting-container-row-field">
+                    <input
+                        type="checkbox"
+                        checked={Boolean(serverSetting.serverSetting.useONNX)}
+                        onChange={async (e) => {
+                            guiState.stateControls.showWaitingCheckbox.updateState(true);
+                            await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, useONNX: Number(e.target.checked) });
+                            guiState.stateControls.showWaitingCheckbox.updateState(false);
+                        }}
+                        disabled={guiState.isConverting}
+                    />
+                </div>
+            </div>
+        );
+
         const protectRow = (
             <div className="advanced-setting-container-row">
                 <div className="advanced-setting-container-row-title"><a className="hint-text" data-tooltip-id="hint" data-tooltip-content="Voiceless consonants protection. Has no effect when set to 0.5 or when 'Index' is inactive.">Protect</a></div>
@@ -198,6 +214,7 @@ export const AdvancedSettingDialog = () => {
                 {silenceFrontRow}
                 {forceFp32ModeRow}
                 {disableJitRow}
+                {convertToOnnx}
                 {protectRow}
                 {skipPassThroughConfirmationRow}
             </div>

diff --git a/client/demo/src/components/demo/910_Dialogs2.tsx b/client/demo/src/components/demo/910_Dialogs2.tsx
@@ -1,14 +1,18 @@
 import React from "react";
 import { useGuiState } from "./001_GuiStateProvider";
 import { TextInputDialog } from "./911_TextInputDialog";
+import { WaitingDialog } from "./902_WaitingDialog";
 
 export const Dialogs2 = () => {
     const guiState = useGuiState();
     const dialogs = (
         <div>
+            {guiState.stateControls.showWaitingCheckbox.trigger}
             {guiState.stateControls.showTextInputCheckbox.trigger}
             {guiState.stateControls.showLicenseCheckbox.trigger}
             <div className="dialog-container2" id="dialog2">
+                {guiState.stateControls.showWaitingCheckbox.trigger}
+                <WaitingDialog></WaitingDialog>
                 {guiState.stateControls.showTextInputCheckbox.trigger}
                 <TextInputDialog></TextInputDialog>
                 {guiState.stateControls.showLicenseCheckbox.trigger}

diff --git a/client/demo/src/components/demo/components2/101-0_Portrait.tsx b/client/demo/src/components/demo/components2/101-0_Portrait.tsx
@@ -199,7 +199,7 @@ export const Portrait = (_props: PortraitProps) => {
                     {portrait}
                     <div className="portrait-area-status">
                         <p>
-                            <span className="portrait-area-status-vctype">{selected.voiceChangerType}</span>
+                            <span className="portrait-area-status-vctype">{serverSetting.serverSetting.useONNX ? selected.modelTypeOnnx : selected.modelType}</span>
                         </p>
                         <p>
                             vol(in): <span ref={elVolRef}>-90</span> dB
@@ -221,7 +221,7 @@ export const Portrait = (_props: PortraitProps) => {
                 </div>
             </div>
         );
-    }, [selected]);
+    }, [selected, serverSetting.serverSetting.useONNX]);
 
     return portrait;
 };
diff --git a/client/demo/src/components/demo/components2/101-3_SpeakerArea.tsx b/client/demo/src/components/demo/components2/101-3_SpeakerArea.tsx
@@ -34,7 +34,7 @@ export const SpeakerArea = (_props: SpeakerAreaProps) => {
 
         return (
             <div className="character-area-control">
-                <div className="character-area-control-title">{selected.voiceChangerType == "RVC" ? "Voice:" : ""}</div>
+                <div className="character-area-control-title">{selected.voiceChangerType == "RVC" ? "SPEAKER:" : ""}</div>
                 <div className="character-area-control-field">
                     <div className="character-area-slider-control">
                         <span className="character-area-slider-control-kind"></span>
@@ -54,9 +54,5 @@ export const SpeakerArea = (_props: SpeakerAreaProps) => {
         );
     }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);
 
-    return (
-        <>
-            {dstArea}
-        </>
-    );
+    return dstArea;
 };
diff --git a/client/demo/src/components/demo/components2/101_CharacterArea.tsx b/client/demo/src/components/demo/components2/101_CharacterArea.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useAppState } from "../../../001_provider/001_AppStateProvider";
 import { useGuiState } from "../001_GuiStateProvider";
-import { OnnxExporterInfo } from "@dannadori/voice-changer-client-js";
 import { useMessageBuilder } from "../../../hooks/useMessageBuilder";
 import { TuningArea } from "./101-1_TuningArea";
 import { IndexArea } from "./101-2_IndexArea";
@@ -17,9 +16,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
     const guiState = useGuiState();
     const messageBuilderState = useMessageBuilder();
     useMemo(() => {
-        messageBuilderState.setMessage(__filename, "export_to_onnx", { ja: "onnx出力", en: "export to onnx" });
         messageBuilderState.setMessage(__filename, "save_default", { ja: "設定保存", en: "save setting" });
-        messageBuilderState.setMessage(__filename, "alert_onnx", { ja: "ボイチェン中はonnx出力できません", en: "cannot export onnx when voice conversion is enabled" });
     }, []);
 
     const selected = useMemo(() => {
@@ -240,69 +237,38 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
             await serverSetting.updateModelDefault();
         };
 
-        const onnxExportButtonAction = async () => {
-            if (guiState.isConverting) {
-                alert(messageBuilderState.getMessage(__filename, "alert_onnx"));
-                return;
-            }
-
-            document.getElementById("dialog")?.classList.add("dialog-container-show");
-            guiState.stateControls.showWaitingCheckbox.updateState(true);
-            const res = (await serverSetting.getOnnx()) as OnnxExporterInfo;
-            if (res.status === 'ALREADY_CONVERTED') {
-                guiState.stateControls.showWaitingCheckbox.updateState(false);
-                toast.error('Model is already in ONNX. Try switching to another slot, then back to this model.')
-                return
-            }
-            const a = document.createElement("a");
-            a.href = res.path;
-            a.download = res.filename;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            guiState.stateControls.showWaitingCheckbox.updateState(false);
-        };
-
-        const exportOnnx =
-            selected.voiceChangerType == "RVC" && (selected.modelFile.endsWith("pth") || selected.modelFile.endsWith("safetensors")) ? (
-                <div className="character-area-button" onClick={onnxExportButtonAction}>
-                    {messageBuilderState.getMessage(__filename, "export_to_onnx")}
-                </div>
-            ) : (
-                <></>
-            );
         return (
-            <div className="character-area-control">
-                <div className="character-area-control-title"></div>
+            <div className="character-area-control" style={{ margin: "0 auto" }}>
                 <div className="character-area-control-field">
                     <div className="character-area-buttons">
                         <div className="character-area-button" onClick={onUpdateDefaultClicked}>
                             {messageBuilderState.getMessage(__filename, "save_default")}
                         </div>
-                        {exportOnnx}
                     </div>
                 </div>
             </div>
         );
-    }, [selected, serverSetting.getOnnx, serverSetting.updateModelDefault, guiState.isConverting]);
+    }, [selected, serverSetting.updateModelDefault]);
 
-    const characterArea = useMemo(() => {
+    const characterControlArea = useMemo(() => {
         return (
-            <div className="character-area">
-                <Portrait></Portrait>
-                <div className="character-area-control-area">
-                    {nameArea}
-                    {startControl}
-                    {gainControl}
-                    <TuningArea />
-                    <FormantShiftArea />
-                    <IndexArea />
-                    <SpeakerArea />
-                    {modelSlotControl}
-                </div>
+            <div className="character-area-control-area">
+                {nameArea}
+                {startControl}
+                {gainControl}
+                <TuningArea />
+                <FormantShiftArea />
+                <IndexArea />
+                <SpeakerArea />
+                {modelSlotControl}
             </div>
-        );
-    }, [startControl, gainControl, modelSlotControl]);
+        )
+    }, [startControl, gainControl, modelSlotControl])
 
-    return characterArea;
+    return (
+        <div className="character-area">
+            <Portrait></Portrait>
+            {characterControlArea}
+        </div>
+    );
 };