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

model name dialog

Browse Source
This commit is contained in:
wataru 2023-06-10 16:46:43 +09:00
parent c273a40f44
commit 012b6a76a9
7 changed files with 170 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

25
client/demo/src/components/demo/001_GuiStateProvider.tsx
View File

@ -19,6 +19,7 @@ export const OpenModelSlotManagerDialogCheckbox = "open-model-slot-manager-dialo
export const OpenMergeLabDialogCheckbox = "open-merge-lab-dialog-checkbox"
export const OpenAdvancedSettingDialogCheckbox = "open-advanced-setting-dialog-checkbox"
export const OpenTextInputDialogCheckbox = "open-text-input-dialog-checkbox"
type Props = {
children: ReactNode;
};
@ -41,6 +42,7 @@ export type StateControls = {
showMergeLabCheckbox: StateControlCheckbox
showAdvancedSettingCheckbox: StateControlCheckbox
showTextInputCheckbox: StateControlCheckbox
}
type GuiStateAndMethod = {
@ -68,6 +70,8 @@ type GuiStateAndMethod = {
modelSlotNum: number
setModelSlotNum: (val: number) => void
textInputResolve: TextInputResolveType | null
setTextInputResolve: (val: TextInputResolveType | null) => void
}
const GuiStateContext = React.createContext<GuiStateAndMethod | null>(null);
@ -79,6 +83,10 @@ export const useGuiState = (): GuiStateAndMethod => {
return state;
};
type TextInputResolveType = {
resolve: ((value: string | PromiseLike<string>) => void) | null
}
export const GuiStateProvider = ({ children }: Props) => {
const { clientType, appGuiSettingState } = useAppRoot()
const [isConverting, setIsConverting] = useState<boolean>(false)
@ -95,6 +103,8 @@ export const GuiStateProvider = ({ children }: Props) => {
const [fileInputEchoback, setFileInputEchoback] = useState<boolean>(false)//最初のmuteが有効になるように。undefined <-- ??? falseしておけばよさそう。undefinedだとwarningがでる。
const [audioOutputForAnalyzer, setAudioOutputForAnalyzer] = useState<string>("default")
const [textInputResolve, setTextInputResolve] = useState<TextInputResolveType | null>(null)
const reloadDeviceInfo = async () => {
try {
const ms = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
@ -162,6 +172,10 @@ export const GuiStateProvider = ({ children }: Props) => {
const showMergeLabCheckbox = useStateControlCheckbox(OpenMergeLabDialogCheckbox);
const showAdvancedSettingCheckbox = useStateControlCheckbox(OpenAdvancedSettingDialogCheckbox);
const showTextInputCheckbox = useStateControlCheckbox(OpenTextInputDialogCheckbox);
useEffect(() => {
openServerControlCheckbox.updateState(true)
openModelSettingCheckbox.updateState(false)
@ -182,6 +196,8 @@ export const GuiStateProvider = ({ children }: Props) => {
showMergeLabCheckbox.updateState(false)
showAdvancedSettingCheckbox.updateState(false)
showTextInputCheckbox.updateState(false)
}, [])
useEffect(() => {
@ -195,6 +211,7 @@ export const GuiStateProvider = ({ children }: Props) => {
document.getElementById("dialog")?.classList.add("dialog-container-show")
showStartingNoticeCheckbox.updateState(true)
document.getElementById("dialog2")?.classList.add("dialog-container-show")
}
setTimeout(show)
}, [appGuiSettingState.edition])
@ -222,7 +239,9 @@ export const GuiStateProvider = ({ children }: Props) => {
showModelSlotManagerCheckbox,
showMergeLabCheckbox,
showAdvancedSettingCheckbox
showAdvancedSettingCheckbox,
showTextInputCheckbox
},
isConverting,
@ -250,6 +269,10 @@ export const GuiStateProvider = ({ children }: Props) => {
modelSlotNum,
setModelSlotNum,
textInputResolve,
setTextInputResolve
};
return <GuiStateContext.Provider value={providerValue}>{children}</GuiStateContext.Provider>;
};

2
client/demo/src/components/demo/010_Demo.tsx
View File

@ -11,11 +11,13 @@ import { ConverterSetting } from "./700_ConverterSetting";
import { AdvancedSetting } from "./800_AdvancedSetting";
import { Lab } from "./a00_Lab";
import { ModelSlotControl } from "./b00_ModelSlotControl";
import { Dialogs2 } from "./910_Dialogs2";
export const Demo = () => {
return (
<GuiStateProvider>
<div className="main-body">
<Dialogs2 />
<Dialogs />
<TitleArea />
<ModelSlotControl></ModelSlotControl>

14
client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx
View File

@ -135,12 +135,16 @@ export const ModelSlotManagerDialog = () => {
const nameValueClass = isRegisterd ? "model-slot-detail-row-value-pointable" : "model-slot-detail-row-value"
const nameValueAction = isRegisterd ? async (index: number) => {
const name = window.prompt("input new name", "");
if (!name) {
return
const p = new Promise<string>((resolve) => {
guiState.setTextInputResolve({ resolve: resolve })
})
guiState.stateControls.showTextInputCheckbox.updateState(true)
const text = await p;
if (text.length > 0) {
console.log("input text:", text)
await serverSetting.updateModelInfo(index, "name", text)
}
await serverSetting.updateModelInfo(index, "name", name)
console.log(name)
} : async (_index: number) => { }
const iconClass = isRegisterd ? "model-slot-icon-pointable" : "model-slot-icon"
const iconAction = isRegisterd ? async (index: number) => {

19
client/demo/src/components/demo/910_Dialogs2.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { useGuiState } from "./001_GuiStateProvider";
import { TextInputDialog } from "./911_TextInputDialog";
export const Dialogs2 = () => {
const guiState = useGuiState()
const dialogs = (
<div>
{guiState.stateControls.showTextInputCheckbox.trigger}
<div className="dialog-container2" id="dialog2">
{guiState.stateControls.showTextInputCheckbox.trigger}
<TextInputDialog></TextInputDialog>
</div>
</div>
);
return dialogs
}

56
client/demo/src/components/demo/911_TextInputDialog.tsx Normal file
View File

@ -0,0 +1,56 @@
import React, { useMemo } from "react";
import { useGuiState } from "./001_GuiStateProvider";
export const TextInputDialog = () => {
const guiState = useGuiState()
const dialog = useMemo(() => {
const buttonsRow = (
<div className="body-row split-3-4-3 left-padding-1">
<div className="body-item-text">
</div>
<div className="body-button-container body-button-container-space-around">
<div className="body-button" onClick={() => {
const inputText = document.getElementById("input-text") as HTMLInputElement
const text = inputText.value
inputText.value = ""
if (guiState.textInputResolve) {
guiState.textInputResolve.resolve!(text)
guiState.setTextInputResolve(null)
}
guiState.stateControls.showTextInputCheckbox.updateState(false)
}} >ok</div>
<div className="body-button" onClick={() => {
const inputText = document.getElementById("input-text") as HTMLInputElement
const text = inputText.value
inputText.value = ""
if (guiState.textInputResolve) {
guiState.textInputResolve.resolve!("")
guiState.setTextInputResolve(null)
}
guiState.stateControls.showTextInputCheckbox.updateState(false)
}} >cancel</div>
</div>
<div className="body-item-text"></div>
</div>
)
const textInput = (
<div className="input-text-container">
<div>Input Text: </div>
<input id="input-text" type="text" />
</div>
)
return (
<div className="dialog-frame">
<div className="dialog-title">Input Dialog</div>
<div className="dialog-content">
{textInput}
{buttonsRow}
</div>
</div>
);
}, [guiState.textInputResolve]);
return dialog;
};

60
client/demo/src/css/App.css
View File

@ -682,7 +682,8 @@ body {
}
/* Dialog */
.dialog-container {
.dialog-container,
.dialog-container2 {
justify-content: center;
align-items: center;
position: absolute;
@ -722,6 +723,11 @@ body {
margin-top: 1rem;
margin-bottom: 1rem;
}
.input-text-container {
display: flex;
flex-direction: row;
margin: 20px;
}
}
.dialog-fixed-size-content {
width: 90%;
@ -902,6 +908,58 @@ body {
}
}
.state-control-checkbox:checked ~ .dialog-container2 {
background: rgba(200, 200, 200, 0.4);
animation-name: dialog-show2;
animation-duration: 0.4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: normal;
}
.state-control-checkbox ~ .dialog-container2 {
background: rgba(100, 100, 100, 0.4);
animation-name: dialog-hide2;
animation-duration: 0.4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: normal;
}
/* .state-control-checkbox:checked + .dialog-frame {
display: flex;
}
.state-control-checkbox + .dialog-frame {
display: none;
} */
@keyframes dialog-hide2 {
from {
opacity: 1;
z-index: 400;
}
90% {
opacity: 0;
z-index: -1;
}
to {
opacity: 0;
z-index: -1;
}
}
@keyframes dialog-show2 {
from {
opacity: 0;
z-index: -1;
}
10% {
z-index: 400;
}
to {
opacity: 1;
z-index: 400;
}
}
.tooltip-text {
display: none;
position: absolute;