model name dialog

client/demo/src/components/demo/001_GuiStateProvider.tsx

@@ -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>;
 };

client/demo/src/components/demo/010_Demo.tsx

@@ -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>

client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx

@@ -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", "");
+                const p = new Promise<string>((resolve) => {
-                if (!name) {
+                    guiState.setTextInputResolve({ resolve: resolve })
-                    return
+                })
+
+                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) => {

client/demo/src/components/demo/910_Dialogs2.tsx

@@ -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
+}

client/demo/src/components/demo/911_TextInputDialog.tsx

@@ -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;
+
+};

client/demo/src/css/App.css

@@ -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;