Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes and QoL improvements #166

Merged
merged 19 commits into from
Aug 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/demo/dist/index.js

Large diffs are not rendered by default.

6,095 changes: 3,000 additions & 3,095 deletions client/demo/package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 0 additions & 4 deletions client/demo/src/components/demo/900_Dialogs.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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}
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion client/demo/src/components/demo/905_MergeLabDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
37 changes: 27 additions & 10 deletions client/demo/src/components/demo/906_AdvancedSettingDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const AdvancedSettingDialog = () => {
</div>
);

const onForceFp32ModeChanged = (val: number) => {
const onForceFp32ModeChanged = async (val: number) => {
return serverSetting.updateServerSettings({
...serverSetting.serverSetting,
forceFp32: val,
Expand All @@ -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}
>
Expand All @@ -125,7 +124,7 @@ export const AdvancedSettingDialog = () => {
</div>
);

const onDisableJitChanged = (val: number) => {
const onDisableJitChanged = async (val: number) => {
return serverSetting.updateServerSettings({
...serverSetting.serverSetting,
disableJit: val,
Expand All @@ -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}
>
Expand All @@ -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>
Expand Down Expand Up @@ -198,6 +214,7 @@ export const AdvancedSettingDialog = () => {
{silenceFrontRow}
{forceFp32ModeRow}
{disableJitRow}
{convertToOnnx}
{protectRow}
{skipPassThroughConfirmationRow}
</div>
Expand Down
4 changes: 4 additions & 0 deletions client/demo/src/components/demo/910_Dialogs2.tsx
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -221,7 +221,7 @@ export const Portrait = (_props: PortraitProps) => {
</div>
</div>
);
}, [selected]);
}, [selected, serverSetting.serverSetting.useONNX]);

return portrait;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -54,9 +54,5 @@ export const SpeakerArea = (_props: SpeakerAreaProps) => {
);
}, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);

return (
<>
{dstArea}
</>
);
return dstArea;
};
74 changes: 20 additions & 54 deletions client/demo/src/components/demo/components2/101_CharacterArea.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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>
);
};
Loading