add directml notice

2025-02-02 16:23:58 +03:00 · 2023-05-31 19:05:34 +09:00 · 2023-05-31 19:05:34 +09:00 · 7e971e2cb7
commit 7e971e2cb7
parent 9818f6ec42
16 changed files with 219 additions and 1737 deletions
--- a/client/demo/dist/assets/gui_settings/edition.txt
+++ b/client/demo/dist/assets/gui_settings/edition.txt
@ -1 +0,0 @@
-+
--- a/client/demo/dist/index.html
+++ b/client/demo/dist/index.html
@ -1,10 +1 @@
-<!DOCTYPE html>
-<html style="width: 100%; height: 100%; overflow: hidden">
-    <head>
-        <meta charset="utf-8" />
-        <title>Voice Changer Client Demo</title>
-    <script defer src="index.js"></script></head>
-    <body style="width: 100%; height: 100%; margin: 0px">
-        <div id="app" style="width: 100%; height: 100%"></div>
-    </body>
-</html>
+<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html>
--- a/client/demo/dist/index.js
+++ b/client/demo/dist/index.js
--- a/client/demo/dist/index.js.LICENSE.txt
+++ b/client/demo/dist/index.js.LICENSE.txt
@ -0,0 +1,31 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
--- a/client/demo/public/assets/gui_settings/edition.txt
+++ b/client/demo/public/assets/gui_settings/edition.txt
@ -1 +0,0 @@
-+
--- a/client/demo/src/components/demo/001_GuiStateProvider.tsx
+++ b/client/demo/src/components/demo/001_GuiStateProvider.tsx
@ -14,6 +14,7 @@ export const OpenLabCheckbox = "open-lab-checkbox"

 export const OpenLicenseDialogCheckbox = "open-license-dialog-checkbox"
 export const OpenWaitingDialogCheckbox = "open-waiting-dialog-checkbox"
+export const OpenStartingNoticeDialogCheckbox = "open-starting-notice-dialog-checkbox"

 type Props = {
    children: ReactNode;
@ -31,6 +32,7 @@ export type StateControls = {

    showLicenseCheckbox: StateControlCheckbox
    showWaitingCheckbox: StateControlCheckbox
+    showStartingNoticeCheckbox: StateControlCheckbox

 }

@ -71,7 +73,7 @@ export const useGuiState = (): GuiStateAndMethod => {
 };

 export const GuiStateProvider = ({ children }: Props) => {
-    const { clientType } = useAppRoot()
+    const { clientType, appGuiSettingState } = useAppRoot()
    const [isConverting, setIsConverting] = useState<boolean>(false)
    const [isAnalyzing, setIsAnalyzing] = useState<boolean>(false)
    const [modelSlotNum, setModelSlotNum] = useState<number>(0)
@ -148,6 +150,7 @@ export const GuiStateProvider = ({ children }: Props) => {

    const showLicenseCheckbox = useStateControlCheckbox(OpenLicenseDialogCheckbox);
    const showWaitingCheckbox = useStateControlCheckbox(OpenWaitingDialogCheckbox);
+    const showStartingNoticeCheckbox = useStateControlCheckbox(OpenStartingNoticeDialogCheckbox);

    useEffect(() => {
        openServerControlCheckbox.updateState(true)
@ -163,8 +166,25 @@ export const GuiStateProvider = ({ children }: Props) => {
        showLicenseCheckbox.updateState(false)
        showWaitingCheckbox.updateState(false)

+
+        showStartingNoticeCheckbox.updateState(false)
    }, [])

+    useEffect(() => {
+        const show = () => {
+            // const lang = window.navigator.language
+            // const edition = appGuiSettingState.edition
+            // console.log("appGuiSettingState.edition", appGuiSettingState.edition, lang)
+            // if ((edition == "onnxdirectML-cuda" || edition == "") && lang == "ja") {
+            //     return
+            // }
+
+            document.getElementById("dialog")?.classList.add("dialog-container-show")
+            showStartingNoticeCheckbox.updateState(true)
+        }
+        setTimeout(show)
+    }, [appGuiSettingState.edition])
+

    useEffect(() => {
        setModelSlotNum(0)
@ -183,7 +203,8 @@ export const GuiStateProvider = ({ children }: Props) => {
            openLabCheckbox,

            showLicenseCheckbox,
-            showWaitingCheckbox
+            showWaitingCheckbox,
+            showStartingNoticeCheckbox
        },
        isConverting,
        setIsConverting,
--- a/client/demo/src/components/demo/010_Demo.tsx
+++ b/client/demo/src/components/demo/010_Demo.tsx
@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { GuiStateProvider } from "./001_GuiStateProvider";
 import { Dialogs } from "./900_Dialogs";
 import { TitleArea } from "./100_TitleArea";
@ -12,7 +12,6 @@ import { AdvancedSetting } from "./800_AdvancedSetting";
 import { Lab } from "./a00_Lab";

 export const Demo = () => {
-
    return (
        <GuiStateProvider>
            <div className="main-body">
--- a/client/demo/src/components/demo/900_Dialogs.tsx
+++ b/client/demo/src/components/demo/900_Dialogs.tsx
@ -2,6 +2,7 @@ import React from "react";
 import { useGuiState } from "./001_GuiStateProvider";
 import { LicenseDialog } from "./901_LicenseDialog";
 import { WaitingDialog } from "./902_WaitingDialog";
+import { StartingNoticeDialog } from "./903_StartingNoticeDialog";

 export const Dialogs = () => {
    const guiState = useGuiState()
@ -9,11 +10,14 @@ export const Dialogs = () => {
        <div>
            {guiState.stateControls.showLicenseCheckbox.trigger}
            {guiState.stateControls.showWaitingCheckbox.trigger}
+            {guiState.stateControls.showStartingNoticeCheckbox.trigger}
            <div className="dialog-container" id="dialog">
                {guiState.stateControls.showLicenseCheckbox.trigger}
                <LicenseDialog></LicenseDialog>
                {guiState.stateControls.showWaitingCheckbox.trigger}
                <WaitingDialog></WaitingDialog>
+                {guiState.stateControls.showStartingNoticeCheckbox.trigger}
+                <StartingNoticeDialog></StartingNoticeDialog>
            </div>

        </div>
--- a/client/demo/src/components/demo/902_WaitingDialog.tsx
+++ b/client/demo/src/components/demo/902_WaitingDialog.tsx
@ -1,21 +1,21 @@
 import React, { useMemo } from "react";
-import { useGuiState } from "./001_GuiStateProvider";
+// import { useGuiState } from "./001_GuiStateProvider";


 export const WaitingDialog = () => {
-    const guiState = useGuiState()
+    // const guiState = useGuiState()

    const dialog = useMemo(() => {
-        const closeButtonRow = (
-            <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={() => { guiState.stateControls.showWaitingCheckbox.updateState(false) }} >close</div>
-                </div>
-                <div className="body-item-text"></div>
-            </div>
-        )
+        // const closeButtonRow = (
+        //     <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={() => { guiState.stateControls.showWaitingCheckbox.updateState(false) }} >close</div>
+        //         </div>
+        //         <div className="body-item-text"></div>
+        //     </div>
+        // )
        const content = (
            <div className="body-row split-3-4-3 left-padding-1">
                <div className="body-item-text">
--- a/client/demo/src/components/demo/903_StartingNoticeDialog.tsx
+++ b/client/demo/src/components/demo/903_StartingNoticeDialog.tsx
@ -0,0 +1,97 @@
+import React, { useMemo } from "react";
+import { useGuiState } from "./001_GuiStateProvider";
+import { getMessage } from "./messages/MessageBuilder";
+import { isDesktopApp } from "../../const";
+import { useAppRoot } from "../../001_provider/001_AppRootProvider";
+
+
+export const StartingNoticeDialog = () => {
+    const guiState = useGuiState()
+    const { appGuiSettingState } = useAppRoot()
+
+    const coffeeLink = useMemo(() => {
+        return isDesktopApp() ?
+            (
+                // @ts-ignore
+                <span className="link tooltip" onClick={() => { window.electronAPI.openBrowser("https://www.buymeacoffee.com/wokad") }}>
+                    <img className="donate-img" src="./assets/buymeacoffee.png" /> donate
+                    <div className="tooltip-text tooltip-text-100px">donate(寄付)</div>
+                </span>
+            )
+            :
+            (
+                <a className="link tooltip" href="https://www.buymeacoffee.com/wokad" target="_blank" rel="noopener noreferrer">
+                    <img className="donate-img" src="./assets/buymeacoffee.png" /> Donate
+                    <div className="tooltip-text tooltip-text-100px">
+                        donate(寄付)
+                    </div>
+                </a>
+            )
+    }, [])
+
+
+
+
+    const dialog = useMemo(() => {
+        const closeButtonRow = (
+            <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={() => { guiState.stateControls.showStartingNoticeCheckbox.updateState(false) }} >start</div>
+                </div>
+                <div className="body-item-text"></div>
+            </div>
+        )
+
+        const donationMessage = (
+            <div className="dialog-content-part">
+                <div>
+                    {getMessage("donate_1")}
+                </div>
+                <div>
+                    {coffeeLink}
+                </div>
+            </div>
+        )
+
+        const directMLMessage = (
+            <div className="dialog-content-part">
+                <div>
+                    {getMessage("notice_1")}
+                </div>
+                <div className="left-padding-1">
+                    {getMessage("notice_2")}
+                </div>
+            </div>
+        )
+        const clickToStartMessage = (
+            <div className="dialog-content-part">
+                <div>
+                    {getMessage("click_to_start_1")}
+                </div>
+            </div>
+        )
+        const lang = window.navigator.language
+        const edition = appGuiSettingState.edition
+        const content = (
+            <div className="body-row">
+                {lang != "ja" || edition == "onnxdirectML-cuda" ? donationMessage : <></>}
+                {lang != "ja" || edition == "onnxdirectML-cuda" ? directMLMessage : <></>}
+                {clickToStartMessage}
+            </div>
+        )
+
+        return (
+            <div className="dialog-frame">
+                <div className="dialog-title">Message</div>
+                <div className="dialog-content">
+                    {content}
+                    {closeButtonRow}
+                </div>
+            </div>
+        );
+    }, [appGuiSettingState.edition]);
+    return dialog;
+
+};
--- a/client/demo/src/components/demo/components/101_Title.tsx
+++ b/client/demo/src/components/demo/components/101_Title.tsx
@ -127,7 +127,7 @@ export const Title = (props: TitleProps) => {
                            {manualLink}
                            {toolLink}
                            {coffeeLink}
-                            {licenseButton}
+                            {/* {licenseButton} */}
                        </span>
                    </div>
                </>
@ -146,7 +146,7 @@ export const Title = (props: TitleProps) => {
                        {manualLink}
                        {toolLink}
                        {coffeeLink}
-                        {licenseButton}
+                        {/* {licenseButton} */}
                    </span>
                    <span className="belongings">
                    </span>
--- a/client/demo/src/components/demo/components/204_ModelSwitchRow.tsx
+++ b/client/demo/src/components/demo/components/204_ModelSwitchRow.tsx
@ -42,6 +42,8 @@ export const ModelSwitchRow = (_props: ModelSwitchRowProps) => {
                    return "org_v2"
                } else if (x.modelType == "pyTorchWebUI" || x.modelType == "pyTorchWebUINono") {
                    return "webui"
+                } else if (x.modelType == "onnxRVC" || x.modelType == "onnxRVCNono") {
+                    return "onnx"
                } else {
                    return "unknown"
                }
--- a/client/demo/src/components/demo/messages/MessageBuilder.tsx
+++ b/client/demo/src/components/demo/messages/MessageBuilder.tsx
@ -0,0 +1,37 @@
+
+const messages: {
+    [id: string]: {
+        [lang: string]: string
+    }
+} = {
+    "notice_1": {
+        "en": "DirectML version is an experimental version. There are the known issues as follows.",
+        "ja": "directML版は実験的バージョンです。以下の既知の問題があります。",
+    },
+    "notice_2": {
+        "en": "(1) When some settings are changed, conversion process becomes slow even when using GPU. If this occurs, reset the GPU value to -1 and then back to 0.",
+        "ja": "(1) 一部の設定変更を行うとgpuを使用していても変換処理が遅くなることが発生します。もしこの現象が発生したらGPUの値を-1にしてから再度0に戻してください。",
+    },
+    "donate_1": {
+        "en": "This software is supported by donations. Thank you for your support!",
+        "ja": "開発者にコーヒーをご馳走してあげよう。この黄色いアイコンから。",
+    },
+    "click_to_start_1": {
+        "en": "Click to start",
+        "ja": "スタートボタンを押してください。",
+    }
+
+}
+
+export const getMessage = (id: string) => {
+    let lang = window.navigator.language
+    if (lang != "ja") {
+        lang = "en"
+    }
+
+    if (!messages[id]) {
+        return "undefined message."
+    }
+
+    return messages[id][lang]
+}
--- a/client/demo/src/css/App.css
+++ b/client/demo/src/css/App.css
@ -717,6 +717,10 @@ body {
                font-size: 3rem;
                text-align: center;
            }
+            .dialog-content-part {
+                margin-top: 1rem;
+                margin-bottom: 1rem;
+            }
        }
    }
 }
--- a/client/lib/package-lock.json
+++ b/client/lib/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "@dannadori/voice-changer-client-js",
-  "version": "1.0.135",
+  "version": "1.0.136",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@dannadori/voice-changer-client-js",
-      "version": "1.0.135",
+      "version": "1.0.136",
      "license": "ISC",
      "dependencies": {
        "@types/readable-stream": "^2.3.15",
--- a/client/lib/package.json
+++ b/client/lib/package.json
@ -1,6 +1,6 @@
 {
  "name": "@dannadori/voice-changer-client-js",
-  "version": "1.0.135",
+  "version": "1.0.136",
  "description": "",
  "main": "dist/index.js",
  "directories": {