From 4b212bd442f2186601f57dee70d09e574aebb7f9 Mon Sep 17 00:00:00 2001 From: wataru Date: Fri, 23 Jun 2023 14:00:40 +0900 Subject: [PATCH] WIP: integrate vcs to new gui 4 --- client/demo/dist/index.js | 87 +++++++++++++- .../src/components/demo/904-1_MainScreen.tsx | 3 + .../components/demo/904-3_FileUploader.tsx | 4 +- .../demo/src/components/demo/904-4_Editor.tsx | 108 +++++++++++++++++ .../demo/904_ModelSlotManagerDialog.tsx | 18 ++- .../demo/components2/101-1_TuningArea.tsx | 55 +++++++++ .../demo/components2/101-2_IndexArea.tsx | 56 +++++++++ .../demo/components2/101-3_SpeakerArea.tsx | 113 ++++++++++++++++++ .../demo/components2/101-4_F0FactorArea.tsx | 53 ++++++++ .../101-5_so-vits-svc40SettingArea.tsx | 81 +++++++++++++ .../101-6_ddsp-svc30SettingArea.tsx | 81 +++++++++++++ .../demo/components2/101_CharacterArea.tsx | 72 +++-------- client/demo/src/css/App.css | 39 +++++- client/lib/src/const.ts | 5 + server/data/ModelSlot.py | 8 +- server/voice_changer/DDSP_SVC/SvcDDSP.py | 1 - .../DDSP_SVC/models/ddsp/vocoder.py | 10 +- .../DDSP_SVC/models/diffusion/unit2mel.py | 8 +- .../DDSP_SVC/models/diffusion/vocoder.py | 4 +- server/voice_changer/ModelSlotManager.py | 6 +- 20 files changed, 729 insertions(+), 83 deletions(-) create mode 100644 client/demo/src/components/demo/904-4_Editor.tsx create mode 100644 client/demo/src/components/demo/components2/101-1_TuningArea.tsx create mode 100644 client/demo/src/components/demo/components2/101-2_IndexArea.tsx create mode 100644 client/demo/src/components/demo/components2/101-3_SpeakerArea.tsx create mode 100644 client/demo/src/components/demo/components2/101-4_F0FactorArea.tsx create mode 100644 client/demo/src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx create mode 100644 client/demo/src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index b05d24ac..6ca3a495 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -312,7 +312,7 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MainScreen: () => (/* binding */ MainScreen)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/utils */ \"./src/utils/utils.ts\");\n\n\n\n\n\n\n\n\nvar MainScreen = function MainScreen(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"change_icon\", {\n \"ja\": \"アイコン変更\",\n \"en\": \"chage icon\"\n });\n messageBuilderState.setMessage(__filename, \"rename\", {\n \"ja\": \"リネーム\",\n \"en\": \"rename\"\n });\n messageBuilderState.setMessage(__filename, \"download\", {\n \"ja\": \"ダウンロード\",\n \"en\": \"download\"\n });\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"sample\", {\n \"ja\": \"サンプル\",\n \"en\": \"DL sample\"\n });\n messageBuilderState.setMessage(__filename, \"upload\", {\n \"ja\": \"アップロード\",\n \"en\": \"upload\"\n });\n messageBuilderState.setMessage(__filename, \"close\", {\n \"ja\": \"閉じる\",\n \"en\": \"close\"\n });\n }, []);\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n if (props.screen != \"Main\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n if (!serverSetting.serverSetting.modelSlots) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n var iconAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee(index) {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context.next = 2;\n break;\n }\n return _context.abrupt(\"return\");\n case 2:\n _context.next = 4;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__.fileSelector)(\"\");\n case 4:\n file = _context.sent;\n if (!((0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.checkExtention)(file.name, [\"png\", \"jpg\", \"jpeg\", \"gif\"]) == false)) {\n _context.next = 8;\n break;\n }\n alert(\"\\u30B5\\u30E0\\u30CD\\u30A4\\u30EB\\u306E\\u62E1\\u5F35\\u5B50\\u306F\\\".png\\\", \\\".jpg\\\", \\\".jpeg\\\", \\\".gif\\\"\\u3067\\u3042\\u308B\\u5FC5\\u8981\\u304C\\u3042\\u308A\\u307E\\u3059\\u3002\");\n return _context.abrupt(\"return\");\n case 8:\n _context.next = 10;\n return serverSetting.uploadAssets(index, \"iconFile\", file);\n case 10:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function iconAction(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n var nameValueAction = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee2(index) {\n var p, text;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context2.next = 2;\n break;\n }\n return _context2.abrupt(\"return\");\n case 2:\n // Open Text Input Dialog\n p = new Promise(function (resolve) {\n guiState.setTextInputResolve({\n resolve: resolve\n });\n });\n guiState.stateControls.showTextInputCheckbox.updateState(true);\n _context2.next = 6;\n return p;\n case 6:\n text = _context2.sent;\n if (!(text.length > 0)) {\n _context2.next = 11;\n break;\n }\n console.log(\"input text:\", text);\n _context2.next = 11;\n return serverSetting.updateModelInfo(index, \"name\", text);\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function nameValueAction(_x2) {\n return _ref2.apply(this, arguments);\n };\n }();\n var fileValueAction = function fileValueAction(url) {\n if (url.length == 0) {\n return;\n }\n var link = document.createElement(\"a\");\n link.href = \"./\" + url;\n link.download = url.replace(/^.*[\\\\\\/]/, '');\n link.click();\n link.remove();\n };\n var closeButtonRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-row split-3-4-3 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container body-button-container-space-around\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: function onClick() {\n props.close();\n }\n }, messageBuilderState.getMessage(__filename, \"close\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }));\n var slotRow = serverSetting.serverSetting.modelSlots.map(function (x, index) {\n // モデルのアイコン\n var generateIconArea = function generateIconArea(slotIndex, iconUrl, tooltip) {\n var realIconUrl = iconUrl.length > 0 ? iconUrl : \"/assets/icons/noimage.png\";\n var iconDivClass = tooltip ? \"tooltip\" : \"\";\n var iconClass = tooltip ? \"model-slot-icon-pointable\" : \"model-slot-icon\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: iconDivClass\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"img\", {\n src: realIconUrl,\n className: iconClass,\n onClick: function onClick() {\n iconAction(slotIndex);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin tooltip-text-lower\"\n }, messageBuilderState.getMessage(__filename, \"change_icon\")));\n };\n\n // モデルの名前\n var generateNameRow = function generateNameRow(slotIndex, name, termsOfUseUrl) {\n var nameValueClass = name.length > 0 ? \"model-slot-detail-row-value-pointable tooltip\" : \"model-slot-detail-row-value\";\n var displayName = name.length > 0 ? name : \"blank\";\n var termOfUseUrlLink = termsOfUseUrl.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"a\", {\n href: termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"body-item-text-small\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"[\", slotIndex, \"]\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: nameValueClass,\n onClick: function onClick() {\n nameValueAction(slotIndex);\n }\n }, displayName, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"rename\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }, termOfUseUrlLink));\n };\n\n // モデルを構成するファイル\n var generateFileRow = function generateFileRow(title, filePath) {\n var fileValueClass = filePath.length > 0 ? \"model-slot-detail-row-value-download tooltip\" : \"model-slot-detail-row-value\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: \"\".concat(title),\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, title, \":\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: fileValueClass,\n onClick: function onClick() {\n fileValueAction(filePath);\n }\n }, (0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.trimfileName)(filePath, 20), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"download\"))));\n };\n\n // その他情報欄\n var generateInfoRow = function generateInfoRow(info) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"info: \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, info), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }));\n };\n var iconArea = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var nameRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var fileRows = [];\n var infoRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n if (x.voiceChangerType == \"RVC\") {\n var slotInfo = x;\n iconArea = generateIconArea(index, slotInfo.iconFile, true);\n nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"model\", slotInfo.modelFile));\n fileRows.push(generateFileRow(\"index\", slotInfo.indexFile));\n infoRow = generateInfoRow(\"\".concat(slotInfo.f0 ? \"f0\" : \"nof0\", \", \").concat(slotInfo.samplingRate, \", \").concat(slotInfo.embChannels, \", \").concat(slotInfo.modelType, \", \").concat(slotInfo.defaultTune, \", \").concat(slotInfo.defaultIndexRatio, \", \").concat(slotInfo.defaultProtect));\n } else if (x.voiceChangerType == \"MMVCv13\") {\n var _slotInfo = x;\n iconArea = generateIconArea(index, _slotInfo.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo.name, _slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo.modelFile));\n infoRow = generateInfoRow(\"\");\n } else if (x.voiceChangerType == \"MMVCv15\") {\n var _slotInfo2 = x;\n iconArea = generateIconArea(index, _slotInfo2.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo2.name, _slotInfo2.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo2.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo2.modelFile));\n infoRow = generateInfoRow(\"f0factor:\".concat(_slotInfo2.f0Factor));\n } else if (x.voiceChangerType == \"so-vits-svc-40\") {\n var _slotInfo3 = x;\n iconArea = generateIconArea(index, _slotInfo3.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo3.name, _slotInfo3.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo3.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo3.modelFile));\n fileRows.push(generateFileRow(\"cluster\", _slotInfo3.clusterFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo3.defaultTune, \",cluster:\").concat(_slotInfo3.defaultClusterInferRatio, \",noise:\").concat(_slotInfo3.noiseScale));\n } else if (x.voiceChangerType == \"DDSP-SVC\") {\n var _slotInfo4 = x;\n iconArea = generateIconArea(index, _slotInfo4.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo4.name, _slotInfo4.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo4.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo4.modelFile));\n fileRows.push(generateFileRow(\"diff conf\", _slotInfo4.diffConfigFile));\n fileRows.push(generateFileRow(\"diff model\", _slotInfo4.diffModelFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo4.defaultTune, \",acc:\").concat(_slotInfo4.acc, \",ks:\").concat(_slotInfo4.kstep, \", diff:\").concat(_slotInfo4.diffusion, \",enh:\").concat(_slotInfo4.enhancer));\n } else {\n iconArea = generateIconArea(index, \"/assets/icons/blank.png\", false);\n nameRow = generateNameRow(index, \"\", \"\");\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: index,\n className: \"model-slot\"\n }, iconArea, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail\"\n }, nameRow, fileRows, infoRow), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openFileUploader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"upload\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openSampleDownloader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"sample\"))));\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"Model Slot Configuration\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-fixed-size-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-container\"\n }, slotRow), closeButtonRow));\n }, [props.screen, serverSetting.serverSetting]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-1_MainScreen.tsx?"); +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MainScreen: () => (/* binding */ MainScreen)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/utils */ \"./src/utils/utils.ts\");\n\n\n\n\n\n\n\n\nvar MainScreen = function MainScreen(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"change_icon\", {\n \"ja\": \"アイコン変更\",\n \"en\": \"chage icon\"\n });\n messageBuilderState.setMessage(__filename, \"rename\", {\n \"ja\": \"リネーム\",\n \"en\": \"rename\"\n });\n messageBuilderState.setMessage(__filename, \"download\", {\n \"ja\": \"ダウンロード\",\n \"en\": \"download\"\n });\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"sample\", {\n \"ja\": \"サンプル\",\n \"en\": \"DL sample\"\n });\n messageBuilderState.setMessage(__filename, \"upload\", {\n \"ja\": \"アップロード\",\n \"en\": \"upload\"\n });\n messageBuilderState.setMessage(__filename, \"edit\", {\n \"ja\": \"編集\",\n \"en\": \"edit\"\n });\n messageBuilderState.setMessage(__filename, \"close\", {\n \"ja\": \"閉じる\",\n \"en\": \"close\"\n });\n }, []);\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n if (props.screen != \"Main\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n if (!serverSetting.serverSetting.modelSlots) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n var iconAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee(index) {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context.next = 2;\n break;\n }\n return _context.abrupt(\"return\");\n case 2:\n _context.next = 4;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__.fileSelector)(\"\");\n case 4:\n file = _context.sent;\n if (!((0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.checkExtention)(file.name, [\"png\", \"jpg\", \"jpeg\", \"gif\"]) == false)) {\n _context.next = 8;\n break;\n }\n alert(\"\\u30B5\\u30E0\\u30CD\\u30A4\\u30EB\\u306E\\u62E1\\u5F35\\u5B50\\u306F\\\".png\\\", \\\".jpg\\\", \\\".jpeg\\\", \\\".gif\\\"\\u3067\\u3042\\u308B\\u5FC5\\u8981\\u304C\\u3042\\u308A\\u307E\\u3059\\u3002\");\n return _context.abrupt(\"return\");\n case 8:\n _context.next = 10;\n return serverSetting.uploadAssets(index, \"iconFile\", file);\n case 10:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function iconAction(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n var nameValueAction = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee2(index) {\n var p, text;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context2.next = 2;\n break;\n }\n return _context2.abrupt(\"return\");\n case 2:\n // Open Text Input Dialog\n p = new Promise(function (resolve) {\n guiState.setTextInputResolve({\n resolve: resolve\n });\n });\n guiState.stateControls.showTextInputCheckbox.updateState(true);\n _context2.next = 6;\n return p;\n case 6:\n text = _context2.sent;\n if (!(text.length > 0)) {\n _context2.next = 11;\n break;\n }\n console.log(\"input text:\", text);\n _context2.next = 11;\n return serverSetting.updateModelInfo(index, \"name\", text);\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function nameValueAction(_x2) {\n return _ref2.apply(this, arguments);\n };\n }();\n var fileValueAction = function fileValueAction(url) {\n if (url.length == 0) {\n return;\n }\n var link = document.createElement(\"a\");\n link.href = \"./\" + url;\n link.download = url.replace(/^.*[\\\\\\/]/, '');\n link.click();\n link.remove();\n };\n var closeButtonRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-row split-3-4-3 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container body-button-container-space-around\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: function onClick() {\n props.close();\n }\n }, messageBuilderState.getMessage(__filename, \"close\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }));\n var slotRow = serverSetting.serverSetting.modelSlots.map(function (x, index) {\n // モデルのアイコン\n var generateIconArea = function generateIconArea(slotIndex, iconUrl, tooltip) {\n var realIconUrl = iconUrl.length > 0 ? iconUrl : \"/assets/icons/noimage.png\";\n var iconDivClass = tooltip ? \"tooltip\" : \"\";\n var iconClass = tooltip ? \"model-slot-icon-pointable\" : \"model-slot-icon\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: iconDivClass\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"img\", {\n src: realIconUrl,\n className: iconClass,\n onClick: function onClick() {\n iconAction(slotIndex);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin tooltip-text-lower\"\n }, messageBuilderState.getMessage(__filename, \"change_icon\")));\n };\n\n // モデルの名前\n var generateNameRow = function generateNameRow(slotIndex, name, termsOfUseUrl) {\n var nameValueClass = name.length > 0 ? \"model-slot-detail-row-value-pointable tooltip\" : \"model-slot-detail-row-value\";\n var displayName = name.length > 0 ? name : \"blank\";\n var termOfUseUrlLink = termsOfUseUrl.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"a\", {\n href: termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"body-item-text-small\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"[\", slotIndex, \"]\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: nameValueClass,\n onClick: function onClick() {\n nameValueAction(slotIndex);\n }\n }, displayName, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"rename\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }, termOfUseUrlLink));\n };\n\n // モデルを構成するファイル\n var generateFileRow = function generateFileRow(title, filePath) {\n var fileValueClass = filePath.length > 0 ? \"model-slot-detail-row-value-download tooltip\" : \"model-slot-detail-row-value\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: \"\".concat(title),\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, title, \":\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: fileValueClass,\n onClick: function onClick() {\n fileValueAction(filePath);\n }\n }, (0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.trimfileName)(filePath, 20), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"download\"))));\n };\n\n // その他情報欄\n var generateInfoRow = function generateInfoRow(info) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"info: \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, info), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }));\n };\n var iconArea = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var nameRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var fileRows = [];\n var infoRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n if (x.voiceChangerType == \"RVC\") {\n var slotInfo = x;\n iconArea = generateIconArea(index, slotInfo.iconFile, true);\n nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"model\", slotInfo.modelFile));\n fileRows.push(generateFileRow(\"index\", slotInfo.indexFile));\n infoRow = generateInfoRow(\"\".concat(slotInfo.f0 ? \"f0\" : \"nof0\", \", \").concat(slotInfo.samplingRate, \", \").concat(slotInfo.embChannels, \", \").concat(slotInfo.modelType, \", \").concat(slotInfo.defaultTune, \", \").concat(slotInfo.defaultIndexRatio, \", \").concat(slotInfo.defaultProtect));\n } else if (x.voiceChangerType == \"MMVCv13\") {\n var _slotInfo = x;\n iconArea = generateIconArea(index, _slotInfo.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo.name, _slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo.modelFile));\n infoRow = generateInfoRow(\"\");\n } else if (x.voiceChangerType == \"MMVCv15\") {\n var _slotInfo2 = x;\n iconArea = generateIconArea(index, _slotInfo2.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo2.name, _slotInfo2.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo2.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo2.modelFile));\n infoRow = generateInfoRow(\"f0factor:\".concat(_slotInfo2.f0Factor));\n } else if (x.voiceChangerType == \"so-vits-svc-40\") {\n var _slotInfo3 = x;\n iconArea = generateIconArea(index, _slotInfo3.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo3.name, _slotInfo3.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo3.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo3.modelFile));\n fileRows.push(generateFileRow(\"cluster\", _slotInfo3.clusterFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo3.defaultTune, \",cluster:\").concat(_slotInfo3.defaultClusterInferRatio, \",noise:\").concat(_slotInfo3.noiseScale));\n } else if (x.voiceChangerType == \"DDSP-SVC\") {\n var _slotInfo4 = x;\n iconArea = generateIconArea(index, _slotInfo4.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo4.name, _slotInfo4.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo4.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo4.modelFile));\n fileRows.push(generateFileRow(\"diff conf\", _slotInfo4.diffConfigFile));\n fileRows.push(generateFileRow(\"diff model\", _slotInfo4.diffModelFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo4.defaultTune, \",acc:\").concat(_slotInfo4.acc, \",ks:\").concat(_slotInfo4.kstep, \", diff:\").concat(_slotInfo4.diffusion, \",enh:\").concat(_slotInfo4.enhancer));\n } else {\n iconArea = generateIconArea(index, \"/assets/icons/blank.png\", false);\n nameRow = generateNameRow(index, \"\", \"\");\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: index,\n className: \"model-slot\"\n }, iconArea, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail\"\n }, nameRow, fileRows, infoRow), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openFileUploader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"upload\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openSampleDownloader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"sample\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openEditor(index);\n }\n }, messageBuilderState.getMessage(__filename, \"edit\"))));\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"Model Slot Configuration\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-fixed-size-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-container\"\n }, slotRow), closeButtonRow));\n }, [props.screen, serverSetting.serverSetting]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-1_MainScreen.tsx?"); /***/ }), @@ -334,7 +334,18 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ FileUploaderScreen: () => (/* binding */ FileUploaderScreen)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/utils */ \"./src/utils/utils.ts\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\nvar FileUploaderScreen = function FileUploaderScreen(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"RVC\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n voiceChangerType = _useState2[0],\n setVoiceChangerType = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n uploadSetting = _useState4[0],\n setUploadSetting = _useState4[1];\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"header_message\", {\n \"ja\": \"ファイルをアップロードしてください. 対象：\",\n \"en\": \"Upload Files for \"\n });\n messageBuilderState.setMessage(__filename, \"back\", {\n \"ja\": \"戻る\",\n \"en\": \"back\"\n });\n messageBuilderState.setMessage(__filename, \"select\", {\n \"ja\": \"ファイル選択\",\n \"en\": \"select file\"\n });\n messageBuilderState.setMessage(__filename, \"upload\", {\n \"ja\": \"アップロード\",\n \"en\": \"upload\"\n });\n messageBuilderState.setMessage(__filename, \"uploading\", {\n \"ja\": \"アップロード中\",\n \"en\": \"uploading\"\n });\n messageBuilderState.setMessage(__filename, \"alert-model-ext\", {\n \"ja\": \"ファイルの拡張子は次のモノである必要があります。\",\n \"en\": \"extension of file should be the following.\"\n });\n messageBuilderState.setMessage(__filename, \"alert-model-file\", {\n \"ja\": \"ファイルが選択されていません\",\n \"en\": \"file is not selected.\"\n });\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n setUploadSetting({\n voiceChangerType: voiceChangerType,\n slot: props.targetIndex,\n isSampleMode: false,\n sampleId: null,\n files: [],\n params: {}\n });\n }, [props.targetIndex, voiceChangerType]);\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (props.screen != \"FileUploader\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var vcTypeOptions = Object.values(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.VoiceChangerType).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n });\n var checkModelSetting = function checkModelSetting(setting) {\n if (setting.voiceChangerType == \"RVC\") {\n var enough = !!setting.files.find(function (x) {\n return x.kind == \"rvcModel\";\n });\n return enough;\n } else if (setting.voiceChangerType == \"MMVCv13\") {\n var _enough = !!setting.files.find(function (x) {\n return x.kind == \"mmvcv13Model\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"mmvcv13Config\";\n });\n return _enough;\n } else if (setting.voiceChangerType == \"MMVCv15\") {\n var _enough2 = !!setting.files.find(function (x) {\n return x.kind == \"mmvcv15Model\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"mmvcv15Config\";\n });\n return _enough2;\n } else if (setting.voiceChangerType == \"so-vits-svc-40\") {\n var _enough3 = !!setting.files.find(function (x) {\n return x.kind == \"soVitsSvc40Config\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"soVitsSvc40Model\";\n });\n return _enough3;\n } else if (setting.voiceChangerType == \"DDSP-SVC\") {\n var _enough4 = !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcModel\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcModelConfig\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcDiffusion\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcDiffusionConfig\";\n });\n return _enough4;\n }\n return false;\n };\n var generateFileRow = function generateFileRow(setting, title, kind, ext) {\n var dir = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : \"\";\n var selectedFile = setting.files.find(function (x) {\n return x.kind == kind;\n });\n var selectedFilename = (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.file.name) || \"\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: \"\".concat(title),\n className: \"file-uploader-file-select-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-row-label\"\n }, title, \":\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-row-value\"\n }, (0,_utils_utils__WEBPACK_IMPORTED_MODULE_8__.trimfileName)(selectedFilename, 30)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-row-button\",\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n var file, alertMessage;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.fileSelector)(\"\");\n case 2:\n file = _context.sent;\n if (!((0,_utils_utils__WEBPACK_IMPORTED_MODULE_8__.checkExtention)(file.name, ext) == false)) {\n _context.next = 7;\n break;\n }\n alertMessage = \"\".concat(messageBuilderState.getMessage(__filename, \"alert-model-ext\"), \" \").concat(ext);\n alert(alertMessage);\n return _context.abrupt(\"return\");\n case 7:\n if (selectedFile) {\n selectedFile.file = file;\n } else {\n setting.files.push({\n kind: kind,\n file: file,\n dir: dir\n });\n }\n setUploadSetting(_objectSpread({}, setting));\n case 9:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }))\n }, messageBuilderState.getMessage(__filename, \"select\")));\n };\n var generateFileRowsByVCType = function generateFileRowsByVCType(vcType) {\n var rows = [];\n if (vcType == \"RVC\") {\n rows.push(generateFileRow(uploadSetting, \"Model\", \"rvcModel\", [\"pth\", \"onnx\"]));\n rows.push(generateFileRow(uploadSetting, \"Index\", \"rvcIndex\", [\"index\", \"bin\"]));\n } else if (vcType == \"MMVCv13\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"mmvcv13Config\", [\"json\"]));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"mmvcv13Model\", [\"pth\", \"onnx\"]));\n } else if (vcType == \"MMVCv15\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"mmvcv15Config\", [\"json\"]));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"mmvcv15Model\", [\"pth\", \"onnx\"]));\n } else if (vcType == \"so-vits-svc-40\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"soVitsSvc40Config\", [\"json\"]));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"soVitsSvc40Model\", [\"pth\"]));\n rows.push(generateFileRow(uploadSetting, \"Cluster\", \"soVitsSvc40Cluster\", [\"pth\", \"pt\"]));\n } else if (vcType == \"DDSP-SVC\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"ddspSvcModelConfig\", [\"yaml\"], \"model/\"));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"ddspSvcModel\", [\"pth\", \"pt\"], \"model/\"));\n rows.push(generateFileRow(uploadSetting, \"Config(diff)\", \"ddspSvcDiffusionConfig\", [\"yaml\"], \"diff/\"));\n rows.push(generateFileRow(uploadSetting, \"Model(diff)\", \"ddspSvcDiffusion\", [\"pth\", \"pt\"], \"diff/\"));\n }\n return rows;\n };\n var fileRows = generateFileRowsByVCType(voiceChangerType);\n\n // appState.serverSetting.uploadProgress == 0 ? `loading model...(wait about 20sec)` : `processing.... ${appState.serverSetting.uploadProgress.toFixed(1)}%` : \"\"\n\n var buttonLabel = serverSetting.uploadProgress == 0 ? messageBuilderState.getMessage(__filename, \"upload\") : messageBuilderState.getMessage(__filename, \"uploading\") + \"(\".concat(serverSetting.uploadProgress.toFixed(1), \"%)\");\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"File Uploader\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-fixed-size-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-header\"\n }, messageBuilderState.getMessage(__filename, \"header_message\"), \" Slot[\", props.targetIndex, \"]\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n onClick: function onClick() {\n props.backToSlotManager();\n },\n className: \"file-uploader-header-button\"\n }, \"<<\", messageBuilderState.getMessage(__filename, \"back\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-voice-changer-select\"\n }, \"VoiceChangerType:\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n value: voiceChangerType,\n onChange: function onChange(e) {\n setVoiceChangerType(e.target.value);\n }\n }, vcTypeOptions)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-container\"\n }, fileRows), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-upload-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-upload-button\",\n onClick: function onClick() {\n if (!uploadSetting) {\n return;\n }\n if (serverSetting.uploadProgress != 0) {\n return;\n }\n if (checkModelSetting(uploadSetting)) {\n serverSetting.uploadModel(uploadSetting);\n } else {\n var errorMessage = messageBuilderState.getMessage(__filename, \"alert-model-file\");\n alert(errorMessage);\n }\n }\n }, buttonLabel))));\n }, [props.screen, props.targetIndex, voiceChangerType, uploadSetting, serverSetting.uploadModel, serverSetting.uploadProgress]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-3_FileUploader.tsx?"); +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ FileUploaderScreen: () => (/* binding */ FileUploaderScreen)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils/utils */ \"./src/utils/utils.ts\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\nvar FileUploaderScreen = function FileUploaderScreen(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"RVC\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n voiceChangerType = _useState2[0],\n setVoiceChangerType = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n uploadSetting = _useState4[0],\n setUploadSetting = _useState4[1];\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"header_message\", {\n \"ja\": \"ファイルをアップロードしてください. 対象：\",\n \"en\": \"Upload Files for \"\n });\n messageBuilderState.setMessage(__filename, \"back\", {\n \"ja\": \"戻る\",\n \"en\": \"back\"\n });\n messageBuilderState.setMessage(__filename, \"select\", {\n \"ja\": \"ファイル選択\",\n \"en\": \"select file\"\n });\n messageBuilderState.setMessage(__filename, \"upload\", {\n \"ja\": \"アップロード\",\n \"en\": \"upload\"\n });\n messageBuilderState.setMessage(__filename, \"uploading\", {\n \"ja\": \"アップロード中\",\n \"en\": \"uploading\"\n });\n messageBuilderState.setMessage(__filename, \"alert-model-ext\", {\n \"ja\": \"ファイルの拡張子は次のモノである必要があります。\",\n \"en\": \"extension of file should be the following.\"\n });\n messageBuilderState.setMessage(__filename, \"alert-model-file\", {\n \"ja\": \"ファイルが選択されていません\",\n \"en\": \"file is not selected.\"\n });\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n setUploadSetting({\n voiceChangerType: voiceChangerType,\n slot: props.targetIndex,\n isSampleMode: false,\n sampleId: null,\n files: [],\n params: {}\n });\n }, [props.targetIndex, voiceChangerType]);\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (props.screen != \"FileUploader\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var vcTypeOptions = Object.values(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.VoiceChangerType).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n });\n var checkModelSetting = function checkModelSetting(setting) {\n if (setting.voiceChangerType == \"RVC\") {\n var enough = !!setting.files.find(function (x) {\n return x.kind == \"rvcModel\";\n });\n return enough;\n } else if (setting.voiceChangerType == \"MMVCv13\") {\n var _enough = !!setting.files.find(function (x) {\n return x.kind == \"mmvcv13Model\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"mmvcv13Config\";\n });\n return _enough;\n } else if (setting.voiceChangerType == \"MMVCv15\") {\n var _enough2 = !!setting.files.find(function (x) {\n return x.kind == \"mmvcv15Model\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"mmvcv15Config\";\n });\n return _enough2;\n } else if (setting.voiceChangerType == \"so-vits-svc-40\") {\n var _enough3 = !!setting.files.find(function (x) {\n return x.kind == \"soVitsSvc40Config\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"soVitsSvc40Model\";\n });\n return _enough3;\n } else if (setting.voiceChangerType == \"DDSP-SVC\") {\n var _enough4 = !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcModel\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcModelConfig\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcDiffusion\";\n }) && !!setting.files.find(function (x) {\n return x.kind == \"ddspSvcDiffusionConfig\";\n });\n return _enough4;\n }\n return false;\n };\n var generateFileRow = function generateFileRow(setting, title, kind, ext) {\n var dir = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : \"\";\n var selectedFile = setting.files.find(function (x) {\n return x.kind == kind;\n });\n var selectedFilename = (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.file.name) || \"\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: \"\".concat(title),\n className: \"file-uploader-file-select-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-row-label\"\n }, title, \":\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-row-value\"\n }, (0,_utils_utils__WEBPACK_IMPORTED_MODULE_8__.trimfileName)(selectedFilename, 30)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-row-button\",\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n var file, alertMessage;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.fileSelector)(\"\");\n case 2:\n file = _context.sent;\n if (!((0,_utils_utils__WEBPACK_IMPORTED_MODULE_8__.checkExtention)(file.name, ext) == false)) {\n _context.next = 7;\n break;\n }\n alertMessage = \"\".concat(messageBuilderState.getMessage(__filename, \"alert-model-ext\"), \" \").concat(ext);\n alert(alertMessage);\n return _context.abrupt(\"return\");\n case 7:\n if (selectedFile) {\n selectedFile.file = file;\n } else {\n setting.files.push({\n kind: kind,\n file: file,\n dir: dir\n });\n }\n setUploadSetting(_objectSpread({}, setting));\n case 9:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }))\n }, messageBuilderState.getMessage(__filename, \"select\")));\n };\n var generateFileRowsByVCType = function generateFileRowsByVCType(vcType) {\n var rows = [];\n if (vcType == \"RVC\") {\n rows.push(generateFileRow(uploadSetting, \"Model\", \"rvcModel\", [\"pth\", \"onnx\"]));\n rows.push(generateFileRow(uploadSetting, \"Index\", \"rvcIndex\", [\"index\", \"bin\"]));\n } else if (vcType == \"MMVCv13\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"mmvcv13Config\", [\"json\"]));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"mmvcv13Model\", [\"pth\", \"onnx\"]));\n } else if (vcType == \"MMVCv15\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"mmvcv15Config\", [\"json\"]));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"mmvcv15Model\", [\"pth\", \"onnx\"]));\n } else if (vcType == \"so-vits-svc-40\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"soVitsSvc40Config\", [\"json\"]));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"soVitsSvc40Model\", [\"pth\"]));\n rows.push(generateFileRow(uploadSetting, \"Cluster\", \"soVitsSvc40Cluster\", [\"pth\", \"pt\"]));\n } else if (vcType == \"DDSP-SVC\") {\n rows.push(generateFileRow(uploadSetting, \"Config\", \"ddspSvcModelConfig\", [\"yaml\"], \"model/\"));\n rows.push(generateFileRow(uploadSetting, \"Model\", \"ddspSvcModel\", [\"pth\", \"pt\"], \"model/\"));\n rows.push(generateFileRow(uploadSetting, \"Config(diff)\", \"ddspSvcDiffusionConfig\", [\"yaml\"], \"diff/\"));\n rows.push(generateFileRow(uploadSetting, \"Model(diff)\", \"ddspSvcDiffusion\", [\"pth\", \"pt\"], \"diff/\"));\n }\n return rows;\n };\n var fileRows = generateFileRowsByVCType(voiceChangerType);\n\n // appState.serverSetting.uploadProgress == 0 ? `loading model...(wait about 20sec)` : `processing.... ${appState.serverSetting.uploadProgress.toFixed(1)}%` : \"\"\n\n var buttonLabel = serverSetting.uploadProgress == 0 ? messageBuilderState.getMessage(__filename, \"upload\") : messageBuilderState.getMessage(__filename, \"uploading\") + \"(\".concat(serverSetting.uploadProgress.toFixed(1), \"%)\");\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"File Uploader\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-fixed-size-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-header\"\n }, messageBuilderState.getMessage(__filename, \"header_message\"), \" Slot[\", props.targetIndex, \"]\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n onClick: function onClick() {\n props.backToSlotManager();\n },\n className: \"file-uploader-header-button\"\n }, \"<<\", messageBuilderState.getMessage(__filename, \"back\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-voice-changer-select\"\n }, \"VoiceChangerType:\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n value: voiceChangerType,\n onChange: function onChange(e) {\n setVoiceChangerType(e.target.value);\n }\n }, vcTypeOptions)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-container\"\n }, fileRows), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-upload-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-file-select-upload-button\",\n onClick: function onClick() {\n if (!uploadSetting) {\n return;\n }\n if (serverSetting.uploadProgress != 0) {\n return;\n }\n if (checkModelSetting(uploadSetting)) {\n serverSetting.uploadModel(uploadSetting).then(function () {\n props.backToSlotManager();\n });\n } else {\n var errorMessage = messageBuilderState.getMessage(__filename, \"alert-model-file\");\n alert(errorMessage);\n }\n }\n }, buttonLabel))));\n }, [props.screen, props.targetIndex, voiceChangerType, uploadSetting, serverSetting.uploadModel, serverSetting.uploadProgress]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-3_FileUploader.tsx?"); + +/***/ }), + +/***/ "./src/components/demo/904-4_Editor.tsx": +/*!**********************************************!*\ + !*** ./src/components/demo/904-4_Editor.tsx ***! + \**********************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ EditorScreen: () => (/* binding */ EditorScreen)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n\n\n\n\n\n\n\nvar EditorScreen = function EditorScreen(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(0),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n targetId = _useState2[0],\n setTargetId = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n targetName = _useState4[0],\n setTargetName = _useState4[1];\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"header_message\", {\n \"ja\": \"詳細設定: \",\n \"en\": \"Edit \"\n });\n messageBuilderState.setMessage(__filename, \"edit_speaker\", {\n \"ja\": \"話者登録\",\n \"en\": \"Speaker ID\"\n });\n messageBuilderState.setMessage(__filename, \"back\", {\n \"ja\": \"戻る\",\n \"en\": \"back\"\n });\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var targetSlot = serverSetting.serverSetting.modelSlots[props.targetIndex];\n if (!targetSlot) {\n return;\n }\n var currentName = !!targetSlot.speakers[targetId] ? targetSlot.speakers[targetId] : \"\";\n setTargetName(currentName);\n }, [targetId]);\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (props.screen != \"Editor\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var targetSlot = serverSetting.serverSetting.modelSlots[props.targetIndex];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"Model Slot Editor\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"dialog-fixed-size-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"file-uploader-header\"\n }, messageBuilderState.getMessage(__filename, \"header_message\"), \" Slot[\", props.targetIndex, \"]\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n onClick: function onClick() {\n props.backToSlotManager();\n },\n className: \"file-uploader-header-button\"\n }, \"<<\", messageBuilderState.getMessage(__filename, \"back\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-title\"\n }, messageBuilderState.getMessage(__filename, \"edit_speaker\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers-id-label\"\n }, \"ID:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers-id-select\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n name: \"\",\n id: \"\",\n value: targetId,\n onChange: function onChange(e) {\n setTargetId(Number(e.target.value));\n }\n }, (0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(Array(127).keys()).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers-name-label\"\n }, \"Name:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers-name-input\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n id: \"edit-model-slot-speakers-name-input\",\n value: targetName,\n onChange: function onChange(e) {\n setTargetName(e.target.value);\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers-button\",\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n var inputElem;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n inputElem = document.getElementById(\"edit-model-slot-speakers-name-input\");\n targetSlot.speakers[targetId] = inputElem.value;\n _context.next = 4;\n return serverSetting.updateModelInfo(props.targetIndex, \"speakers\", JSON.stringify(targetSlot.speakers));\n case 4:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }))\n }, \"set\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-speakers-button\",\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n delete targetSlot.speakers[targetId];\n _context2.next = 3;\n return serverSetting.updateModelInfo(props.targetIndex, \"speakers\", JSON.stringify(targetSlot.speakers));\n case 3:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }))\n }, \"del\")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"edit-model-slot-row\"\n })));\n }, [props.screen, props.targetIndex, targetId, targetName]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-4_Editor.tsx?"); /***/ }), @@ -345,7 +356,7 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModelSlotManagerDialog: () => (/* binding */ ModelSlotManagerDialog),\n/* harmony export */ ModelSlotManagerDialogScreen: () => (/* binding */ ModelSlotManagerDialogScreen),\n/* harmony export */ ModelSlotSettingMode: () => (/* binding */ ModelSlotSettingMode)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./904-1_MainScreen */ \"./src/components/demo/904-1_MainScreen.tsx\");\n/* harmony import */ var _904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./904-2_SampleDownloader */ \"./src/components/demo/904-2_SampleDownloader.tsx\");\n/* harmony import */ var _904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./904-3_FileUploader */ \"./src/components/demo/904-3_FileUploader.tsx\");\n\n\n\n\n\n\nvar ModelSlotSettingMode = {\n \"localFile\": \"localFile\",\n \"fromNet\": \"fromNet\"\n};\nvar ModelSlotManagerDialogScreen = {\n \"Main\": \"Main\",\n \"SampleDownloader\": \"SampleDownloader\",\n \"FileUploader\": \"FileUploader\"\n};\nvar ModelSlotManagerDialog = function ModelSlotManagerDialog() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__.useGuiState)();\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(\"Main\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState, 2),\n screen = _useState2[0],\n setScreen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState3, 2),\n targetIndex = _useState4[0],\n setTargetIndex = _useState4[1];\n var dialog = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n var close = function close() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(false);\n };\n var openSampleDownloader = function openSampleDownloader(index) {\n setTargetIndex(index);\n setScreen(\"SampleDownloader\");\n };\n var openFileUploader = function openFileUploader(index) {\n setTargetIndex(index);\n setScreen(\"FileUploader\");\n };\n var backToSlotManager = function backToSlotManager() {\n setScreen(\"Main\");\n };\n var mainScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__.MainScreen, {\n screen: screen,\n close: close,\n openSampleDownloader: openSampleDownloader,\n openFileUploader: openFileUploader\n });\n var sampleDownloaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__.SampleDownloaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n var fileUploaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__.FileUploaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, mainScreen, sampleDownloaderScreen, fileUploaderScreen);\n }, [screen, targetIndex]);\n return dialog;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904_ModelSlotManagerDialog.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModelSlotManagerDialog: () => (/* binding */ ModelSlotManagerDialog),\n/* harmony export */ ModelSlotManagerDialogScreen: () => (/* binding */ ModelSlotManagerDialogScreen),\n/* harmony export */ ModelSlotSettingMode: () => (/* binding */ ModelSlotSettingMode)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./904-1_MainScreen */ \"./src/components/demo/904-1_MainScreen.tsx\");\n/* harmony import */ var _904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./904-2_SampleDownloader */ \"./src/components/demo/904-2_SampleDownloader.tsx\");\n/* harmony import */ var _904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./904-3_FileUploader */ \"./src/components/demo/904-3_FileUploader.tsx\");\n/* harmony import */ var _904_4_Editor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./904-4_Editor */ \"./src/components/demo/904-4_Editor.tsx\");\n\n\n\n\n\n\n\nvar ModelSlotSettingMode = {\n \"localFile\": \"localFile\",\n \"fromNet\": \"fromNet\"\n};\nvar ModelSlotManagerDialogScreen = {\n \"Main\": \"Main\",\n \"SampleDownloader\": \"SampleDownloader\",\n \"FileUploader\": \"FileUploader\",\n \"Editor\": \"Editor\"\n};\nvar ModelSlotManagerDialog = function ModelSlotManagerDialog() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__.useGuiState)();\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(\"Main\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState, 2),\n screen = _useState2[0],\n setScreen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState3, 2),\n targetIndex = _useState4[0],\n setTargetIndex = _useState4[1];\n var dialog = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n var close = function close() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(false);\n };\n var openSampleDownloader = function openSampleDownloader(index) {\n setTargetIndex(index);\n setScreen(\"SampleDownloader\");\n };\n var openFileUploader = function openFileUploader(index) {\n setTargetIndex(index);\n setScreen(\"FileUploader\");\n };\n var openEditor = function openEditor(index) {\n setTargetIndex(index);\n setScreen(\"Editor\");\n };\n var backToSlotManager = function backToSlotManager() {\n setScreen(\"Main\");\n };\n var mainScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__.MainScreen, {\n screen: screen,\n close: close,\n openSampleDownloader: openSampleDownloader,\n openFileUploader: openFileUploader,\n openEditor: openEditor\n });\n var sampleDownloaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__.SampleDownloaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n var fileUploaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__.FileUploaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n var editorScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_4_Editor__WEBPACK_IMPORTED_MODULE_6__.EditorScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, mainScreen, sampleDownloaderScreen, fileUploaderScreen, editorScreen);\n }, [screen, targetIndex]);\n return dialog;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904_ModelSlotManagerDialog.tsx?"); /***/ }), @@ -1119,6 +1130,72 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ }), +/***/ "./src/components/demo/components2/101-1_TuningArea.tsx": +/*!**************************************************************!*\ + !*** ./src/components/demo/components2/101-1_TuningArea.tsx ***! + \**************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TuningArea: () => (/* binding */ TuningArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\nvar TuningArea = function TuningArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n var tuningArea = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null);\n }\n if (selected.voiceChangerType == \"MMVCv13\" || selected.voiceChangerType == \"MMVCv15\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null);\n }\n var currentTuning = serverSetting.serverSetting.tran;\n var tranValueUpdatedAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n tran: val\n }));\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function tranValueUpdatedAction(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"TUNE:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"input\", {\n type: \"range\",\n min: \"-50\",\n max: \"50\",\n step: \"1\",\n value: currentTuning,\n onChange: function onChange(e) {\n tranValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentTuning))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);\n return tuningArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101-1_TuningArea.tsx?"); + +/***/ }), + +/***/ "./src/components/demo/components2/101-2_IndexArea.tsx": +/*!*************************************************************!*\ + !*** ./src/components/demo/components2/101-2_IndexArea.tsx ***! + \*************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ IndexArea: () => (/* binding */ IndexArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\nvar IndexArea = function IndexArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n var indexArea = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null);\n }\n if (selected.voiceChangerType != \"RVC\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null);\n }\n var currentIndexRatio = serverSetting.serverSetting.indexRatio;\n var indexRatioValueUpdatedAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n indexRatio: val\n }));\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function indexRatioValueUpdatedAction(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"INDEX:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"input\", {\n type: \"range\",\n min: \"0\",\n max: \"1\",\n step: \"0.1\",\n value: currentIndexRatio,\n onChange: function onChange(e) {\n indexRatioValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentIndexRatio))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);\n return indexArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101-2_IndexArea.tsx?"); + +/***/ }), + +/***/ "./src/components/demo/components2/101-3_SpeakerArea.tsx": +/*!***************************************************************!*\ + !*** ./src/components/demo/components2/101-3_SpeakerArea.tsx ***! + \***************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SpeakerArea: () => (/* binding */ SpeakerArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\nvar SpeakerArea = function SpeakerArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n var srcArea = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null);\n }\n if (selected.voiceChangerType != \"MMVCv13\" && selected.voiceChangerType != \"MMVCv15\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null);\n }\n var options = Object.keys(selected.speakers).map(function (key) {\n var val = selected.speakers[Number(key)];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"option\", {\n key: key,\n value: key\n }, val, \"[\", key, \"]\");\n });\n var srcSpeakerValueUpdatedAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n srcId: val\n }));\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function srcSpeakerValueUpdatedAction(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"Voice:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"src\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"select\", {\n value: serverSetting.serverSetting.srcId,\n onChange: function onChange(e) {\n srcSpeakerValueUpdatedAction(Number(e.target.value));\n }\n }, options)))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);\n var dstArea = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null);\n }\n var options = Object.keys(selected.speakers).map(function (key) {\n var val = selected.speakers[Number(key)];\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"option\", {\n key: key,\n value: key\n }, val, \"[\", key, \"]\");\n });\n var srcSpeakerValueUpdatedAction = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee2(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n dstId: val\n }));\n case 2:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function srcSpeakerValueUpdatedAction(_x2) {\n return _ref2.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, selected.voiceChangerType == \"DDSP-SVC\" || selected.voiceChangerType == \"so-vits-svc-40\" || selected.voiceChangerType == \"RVC\" ? \"Voice:\" : \"\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, selected.voiceChangerType == \"MMVCv13\" || selected.voiceChangerType == \"MMVCv15\" ? \"dst\" : \"\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"select\", {\n value: serverSetting.serverSetting.dstId,\n onChange: function onChange(e) {\n srcSpeakerValueUpdatedAction(Number(e.target.value));\n }\n }, options)))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null, srcArea, dstArea);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101-3_SpeakerArea.tsx?"); + +/***/ }), + +/***/ "./src/components/demo/components2/101-4_F0FactorArea.tsx": +/*!****************************************************************!*\ + !*** ./src/components/demo/components2/101-4_F0FactorArea.tsx ***! + \****************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ F0FactorArea: () => (/* binding */ F0FactorArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\nvar F0FactorArea = function F0FactorArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n var f0FactorArea = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n }\n if (selected.voiceChangerType != \"MMVCv15\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"F0Factor:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.01\",\n max: \"5.00\",\n step: \"0.01\",\n value: serverSetting.serverSetting.f0Factor,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n f0Factor: Number(e.target.value)\n }));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, serverSetting.serverSetting.f0Factor))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);\n return f0FactorArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101-4_F0FactorArea.tsx?"); + +/***/ }), + +/***/ "./src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx": +/*!****************************************************************************!*\ + !*** ./src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx ***! + \****************************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ SoVitsSVC40SettingArea: () => (/* binding */ SoVitsSVC40SettingArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\nvar SoVitsSVC40SettingArea = function SoVitsSVC40SettingArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n var settingArea = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n }\n if (selected.voiceChangerType != \"so-vits-svc-40\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n }\n var cluster = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"Cluster:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n type: \"range\",\n min: \"0\",\n max: \"1.0\",\n step: \"0.1\",\n value: serverSetting.serverSetting.clusterInferRatio,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n clusterInferRatio: Number(e.target.value)\n }));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, serverSetting.serverSetting.clusterInferRatio))));\n var noise = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"Noise:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n type: \"range\",\n min: \"0\",\n max: \"1.0\",\n step: \"0.1\",\n value: serverSetting.serverSetting.noiseScale,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n noiseScale: Number(e.target.value)\n }));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, serverSetting.serverSetting.noiseScale))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, cluster, noise);\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);\n return settingArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx?"); + +/***/ }), + +/***/ "./src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx": +/*!*************************************************************************!*\ + !*** ./src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx ***! + \*************************************************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DDSPSVC30SettingArea: () => (/* binding */ DDSPSVC30SettingArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\nvar DDSPSVC30SettingArea = function DDSPSVC30SettingArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n var settingArea = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n }\n if (selected.voiceChangerType != \"DDSP-SVC\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n }\n var acc = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"ACC:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n type: \"range\",\n min: \"1\",\n max: \"20\",\n step: \"1\",\n value: serverSetting.serverSetting.diffAcc,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n diffAcc: Number(e.target.value)\n }));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, serverSetting.serverSetting.diffAcc))));\n var kstep = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"Kstep:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n type: \"range\",\n min: \"21\",\n max: \"300\",\n step: \"1\",\n value: serverSetting.serverSetting.kStep,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n kStep: Number(e.target.value)\n }));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, serverSetting.serverSetting.kStep))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, acc, kstep);\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]);\n return settingArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx?"); + +/***/ }), + /***/ "./src/components/demo/components2/101_CharacterArea.tsx": /*!***************************************************************!*\ !*** ./src/components/demo/components2/101_CharacterArea.tsx ***! @@ -1126,7 +1203,7 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CharacterArea: () => (/* binding */ CharacterArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\nvar CharacterArea = function CharacterArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n clientSetting = _useAppState.clientSetting,\n initializedRef = _useAppState.initializedRef,\n volume = _useAppState.volume,\n bufferingTime = _useAppState.bufferingTime,\n performance = _useAppState.performance;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"export_to_onnx\", {\n \"ja\": \"onnx出力\",\n \"en\": \"export to onnx\"\n });\n messageBuilderState.setMessage(__filename, \"save_default\", {\n \"ja\": \"設定保存\",\n \"en\": \"save setting\"\n });\n messageBuilderState.setMessage(__filename, \"alert_onnx\", {\n \"ja\": \"ボイチェン中はonnx出力できません\",\n \"en\": \"cannot export onnx when voice conversion is enabled\"\n });\n }, []);\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var vol = document.getElementById(\"status-vol\");\n var buf = document.getElementById(\"status-buf\");\n var res = document.getElementById(\"status-res\");\n if (!vol || !buf || !res) {\n return;\n }\n vol.innerText = volume.toFixed(4);\n buf.innerText = bufferingTime.toString();\n res.innerText = performance.responseTime.toString();\n }, [volume, bufferingTime, performance]);\n var portrait = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var icon = selected.iconFile.length > 0 ? selected.iconFile : \"./assets/icons/human.png\";\n var selectedTermOfUseUrlLink = selected.termsOfUseUrl ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"a\", {\n href: selected.termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"portrait-area-terms-of-use-link\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"portrait\",\n src: icon,\n alt: selected.name\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-status\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"vol: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-vol\"\n }, \"0\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"buf: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-buf\"\n }, \"0\"), \" ms\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"res: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-res\"\n }, \"0\"), \" ms\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-terms-of-use\"\n }, selectedTermOfUseUrlLink)));\n }, [selected]);\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n startWithAudioContextCreate = _useState2[0],\n setStartWithAudioContextCreate = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (!startWithAudioContextCreate) {\n return;\n }\n guiState.setIsConverting(true);\n clientSetting.start();\n }, [startWithAudioContextCreate]);\n var startControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var onStartClicked = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context.next = 17;\n break;\n }\n if (initializedRef.current) {\n _context.next = 12;\n break;\n }\n case 2:\n if (false) {}\n _context.next = 5;\n return new Promise(function (resolve) {\n setTimeout(resolve, 500);\n });\n case 5:\n if (!initializedRef.current) {\n _context.next = 7;\n break;\n }\n return _context.abrupt(\"break\", 9);\n case 7:\n _context.next = 2;\n break;\n case 9:\n setStartWithAudioContextCreate(true);\n _context.next = 15;\n break;\n case 12:\n guiState.setIsConverting(true);\n _context.next = 15;\n return clientSetting.start();\n case 15:\n _context.next = 19;\n break;\n case 17:\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 1\n }));\n guiState.setIsConverting(true);\n case 19:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onStartClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onStopClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context2.next = 6;\n break;\n }\n guiState.setIsConverting(false);\n _context2.next = 4;\n return clientSetting.stop();\n case 4:\n _context2.next = 8;\n break;\n case 6:\n guiState.setIsConverting(false);\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 0\n }));\n case 8:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onStopClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var startClassName = guiState.isConverting ? \"character-area-control-button-active\" : \"character-area-control-button-stanby\";\n var stopClassName = guiState.isConverting ? \"character-area-control-button-stanby\" : \"character-area-control-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStopClicked,\n className: stopClassName\n }, \"stop\")));\n }, [guiState.isConverting, clientSetting.start, clientSetting.stop, serverSetting.serverSetting, serverSetting.updateServerSettings]);\n var gainControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? clientSetting.clientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain;\n var inputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return clientSetting.updateClientSetting(_objectSpread(_objectSpread({}, clientSetting.clientSetting), {}, {\n inputGain: val\n }));\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function (_x) {\n return _ref3.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function (_x2) {\n return _ref4.apply(this, arguments);\n };\n }();\n var currentOutputGain = serverSetting.serverSetting.enableServerAudio == 0 ? clientSetting.clientSetting.outputGain : serverSetting.serverSetting.serverOutputAudioGain;\n var outputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n _context5.next = 2;\n return clientSetting.updateClientSetting(_objectSpread(_objectSpread({}, clientSetting.clientSetting), {}, {\n outputGain: val\n }));\n case 2:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function (_x3) {\n return _ref5.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n _context6.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function (_x4) {\n return _ref6.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"GAIN:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"in\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentInputGain,\n onChange: function onChange(e) {\n inputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentInputGain)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"out\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentOutputGain,\n onChange: function onChange(e) {\n outputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentOutputGain))));\n }, [serverSetting.serverSetting, clientSetting.clientSetting, clientSetting.updateClientSetting, serverSetting.updateServerSettings]);\n var tuningCotrol = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var currentTuning = serverSetting.serverSetting.tran;\n var tranValueUpdatedAction = /*#__PURE__*/function () {\n var _ref7 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee7(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee7$(_context7) {\n while (1) switch (_context7.prev = _context7.next) {\n case 0:\n _context7.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n tran: val\n }));\n case 2:\n case \"end\":\n return _context7.stop();\n }\n }, _callee7);\n }));\n return function tranValueUpdatedAction(_x5) {\n return _ref7.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"TUNE:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"-50\",\n max: \"50\",\n step: \"1\",\n value: currentTuning,\n onChange: function onChange(e) {\n tranValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentTuning))));\n }, [serverSetting.serverSetting, clientSetting.updateClientSetting]);\n var indexCotrol = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var currentIndexRatio = serverSetting.serverSetting.indexRatio;\n var indexRatioValueUpdatedAction = /*#__PURE__*/function () {\n var _ref8 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee8(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee8$(_context8) {\n while (1) switch (_context8.prev = _context8.next) {\n case 0:\n _context8.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n indexRatio: val\n }));\n case 2:\n case \"end\":\n return _context8.stop();\n }\n }, _callee8);\n }));\n return function indexRatioValueUpdatedAction(_x6) {\n return _ref8.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"INDEX:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0\",\n max: \"1\",\n step: \"0.1\",\n value: currentIndexRatio,\n onChange: function onChange(e) {\n indexRatioValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentIndexRatio))));\n }, [serverSetting.serverSetting, clientSetting.updateClientSetting]);\n var modelSlotControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onUpdateDefaultClicked = /*#__PURE__*/function () {\n var _ref9 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee9() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee9$(_context9) {\n while (1) switch (_context9.prev = _context9.next) {\n case 0:\n _context9.next = 2;\n return serverSetting.updateModelDefault();\n case 2:\n case \"end\":\n return _context9.stop();\n }\n }, _callee9);\n }));\n return function onUpdateDefaultClicked() {\n return _ref9.apply(this, arguments);\n };\n }();\n var onnxExportButtonAction = /*#__PURE__*/function () {\n var _ref10 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee10() {\n var _document$getElementB;\n var res, a;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee10$(_context10) {\n while (1) switch (_context10.prev = _context10.next) {\n case 0:\n if (!guiState.isConverting) {\n _context10.next = 3;\n break;\n }\n alert(messageBuilderState.getMessage(__filename, \"alert_onnx\"));\n return _context10.abrupt(\"return\");\n case 3:\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n guiState.stateControls.showWaitingCheckbox.updateState(true);\n _context10.next = 7;\n return serverSetting.getOnnx();\n case 7:\n res = _context10.sent;\n a = document.createElement(\"a\");\n a.href = res.path;\n a.download = res.filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n guiState.stateControls.showWaitingCheckbox.updateState(false);\n case 15:\n case \"end\":\n return _context10.stop();\n }\n }, _callee10);\n }));\n return function onnxExportButtonAction() {\n return _ref10.apply(this, arguments);\n };\n }();\n var exportOnnx = selected.modelFile.endsWith(\"pth\") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onnxExportButtonAction\n }, messageBuilderState.getMessage(__filename, \"export_to_onnx\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onUpdateDefaultClicked\n }, messageBuilderState.getMessage(__filename, \"save_default\")), exportOnnx)));\n }, [selected, serverSetting.getOnnx, serverSetting.updateModelDefault]);\n var characterArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area\"\n }, portrait, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-area\"\n }, startControl, gainControl, tuningCotrol, indexCotrol, modelSlotControl));\n }, [portrait, startControl, gainControl, tuningCotrol, modelSlotControl]);\n return characterArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101_CharacterArea.tsx?"); +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CharacterArea: () => (/* binding */ CharacterArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _101_1_TuningArea__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./101-1_TuningArea */ \"./src/components/demo/components2/101-1_TuningArea.tsx\");\n/* harmony import */ var _101_2_IndexArea__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./101-2_IndexArea */ \"./src/components/demo/components2/101-2_IndexArea.tsx\");\n/* harmony import */ var _101_3_SpeakerArea__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./101-3_SpeakerArea */ \"./src/components/demo/components2/101-3_SpeakerArea.tsx\");\n/* harmony import */ var _101_4_F0FactorArea__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./101-4_F0FactorArea */ \"./src/components/demo/components2/101-4_F0FactorArea.tsx\");\n/* harmony import */ var _101_5_so_vits_svc40SettingArea__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./101-5_so-vits-svc40SettingArea */ \"./src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx\");\n/* harmony import */ var _101_6_ddsp_svc30SettingArea__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./101-6_ddsp-svc30SettingArea */ \"./src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\n\n\n\n\n\nvar CharacterArea = function CharacterArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n clientSetting = _useAppState.clientSetting,\n initializedRef = _useAppState.initializedRef,\n volume = _useAppState.volume,\n bufferingTime = _useAppState.bufferingTime,\n performance = _useAppState.performance;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"export_to_onnx\", {\n \"ja\": \"onnx出力\",\n \"en\": \"export to onnx\"\n });\n messageBuilderState.setMessage(__filename, \"save_default\", {\n \"ja\": \"設定保存\",\n \"en\": \"save setting\"\n });\n messageBuilderState.setMessage(__filename, \"alert_onnx\", {\n \"ja\": \"ボイチェン中はonnx出力できません\",\n \"en\": \"cannot export onnx when voice conversion is enabled\"\n });\n }, []);\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var vol = document.getElementById(\"status-vol\");\n var buf = document.getElementById(\"status-buf\");\n var res = document.getElementById(\"status-res\");\n if (!vol || !buf || !res) {\n return;\n }\n vol.innerText = volume.toFixed(4);\n buf.innerText = bufferingTime.toString();\n res.innerText = performance.responseTime.toString();\n }, [volume, bufferingTime, performance]);\n var portrait = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var icon = selected.iconFile.length > 0 ? selected.iconFile : \"./assets/icons/human.png\";\n var selectedTermOfUseUrlLink = selected.termsOfUseUrl ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"a\", {\n href: selected.termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"portrait-area-terms-of-use-link\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"portrait\",\n src: icon,\n alt: selected.name\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-status\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"vol: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-vol\"\n }, \"0\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"buf: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-buf\"\n }, \"0\"), \" ms\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"res: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-res\"\n }, \"0\"), \" ms\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-terms-of-use\"\n }, selectedTermOfUseUrlLink)));\n }, [selected]);\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n startWithAudioContextCreate = _useState2[0],\n setStartWithAudioContextCreate = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (!startWithAudioContextCreate) {\n return;\n }\n guiState.setIsConverting(true);\n clientSetting.start();\n }, [startWithAudioContextCreate]);\n var startControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var onStartClicked = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context.next = 17;\n break;\n }\n if (initializedRef.current) {\n _context.next = 12;\n break;\n }\n case 2:\n if (false) {}\n _context.next = 5;\n return new Promise(function (resolve) {\n setTimeout(resolve, 500);\n });\n case 5:\n if (!initializedRef.current) {\n _context.next = 7;\n break;\n }\n return _context.abrupt(\"break\", 9);\n case 7:\n _context.next = 2;\n break;\n case 9:\n setStartWithAudioContextCreate(true);\n _context.next = 15;\n break;\n case 12:\n guiState.setIsConverting(true);\n _context.next = 15;\n return clientSetting.start();\n case 15:\n _context.next = 19;\n break;\n case 17:\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 1\n }));\n guiState.setIsConverting(true);\n case 19:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onStartClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onStopClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context2.next = 6;\n break;\n }\n guiState.setIsConverting(false);\n _context2.next = 4;\n return clientSetting.stop();\n case 4:\n _context2.next = 8;\n break;\n case 6:\n guiState.setIsConverting(false);\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 0\n }));\n case 8:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onStopClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var startClassName = guiState.isConverting ? \"character-area-control-button-active\" : \"character-area-control-button-stanby\";\n var stopClassName = guiState.isConverting ? \"character-area-control-button-stanby\" : \"character-area-control-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStopClicked,\n className: stopClassName\n }, \"stop\")));\n }, [guiState.isConverting, clientSetting.start, clientSetting.stop, serverSetting.serverSetting, serverSetting.updateServerSettings]);\n var gainControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? clientSetting.clientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain;\n var inputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return clientSetting.updateClientSetting(_objectSpread(_objectSpread({}, clientSetting.clientSetting), {}, {\n inputGain: val\n }));\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function (_x) {\n return _ref3.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function (_x2) {\n return _ref4.apply(this, arguments);\n };\n }();\n var currentOutputGain = serverSetting.serverSetting.enableServerAudio == 0 ? clientSetting.clientSetting.outputGain : serverSetting.serverSetting.serverOutputAudioGain;\n var outputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n _context5.next = 2;\n return clientSetting.updateClientSetting(_objectSpread(_objectSpread({}, clientSetting.clientSetting), {}, {\n outputGain: val\n }));\n case 2:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function (_x3) {\n return _ref5.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n _context6.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function (_x4) {\n return _ref6.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"GAIN:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"in\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentInputGain,\n onChange: function onChange(e) {\n inputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentInputGain)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"out\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentOutputGain,\n onChange: function onChange(e) {\n outputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentOutputGain))));\n }, [serverSetting.serverSetting, clientSetting.clientSetting, clientSetting.updateClientSetting, serverSetting.updateServerSettings]);\n var modelSlotControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onUpdateDefaultClicked = /*#__PURE__*/function () {\n var _ref7 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee7() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee7$(_context7) {\n while (1) switch (_context7.prev = _context7.next) {\n case 0:\n _context7.next = 2;\n return serverSetting.updateModelDefault();\n case 2:\n case \"end\":\n return _context7.stop();\n }\n }, _callee7);\n }));\n return function onUpdateDefaultClicked() {\n return _ref7.apply(this, arguments);\n };\n }();\n var onnxExportButtonAction = /*#__PURE__*/function () {\n var _ref8 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee8() {\n var _document$getElementB;\n var res, a;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee8$(_context8) {\n while (1) switch (_context8.prev = _context8.next) {\n case 0:\n if (!guiState.isConverting) {\n _context8.next = 3;\n break;\n }\n alert(messageBuilderState.getMessage(__filename, \"alert_onnx\"));\n return _context8.abrupt(\"return\");\n case 3:\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n guiState.stateControls.showWaitingCheckbox.updateState(true);\n _context8.next = 7;\n return serverSetting.getOnnx();\n case 7:\n res = _context8.sent;\n a = document.createElement(\"a\");\n a.href = res.path;\n a.download = res.filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n guiState.stateControls.showWaitingCheckbox.updateState(false);\n case 15:\n case \"end\":\n return _context8.stop();\n }\n }, _callee8);\n }));\n return function onnxExportButtonAction() {\n return _ref8.apply(this, arguments);\n };\n }();\n var exportOnnx = selected.voiceChangerType == \"RVC\" && selected.modelFile.endsWith(\"pth\") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onnxExportButtonAction\n }, messageBuilderState.getMessage(__filename, \"export_to_onnx\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onUpdateDefaultClicked\n }, messageBuilderState.getMessage(__filename, \"save_default\")), exportOnnx)));\n }, [selected, serverSetting.getOnnx, serverSetting.updateModelDefault]);\n var characterArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area\"\n }, portrait, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-area\"\n }, startControl, gainControl, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_1_TuningArea__WEBPACK_IMPORTED_MODULE_8__.TuningArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_2_IndexArea__WEBPACK_IMPORTED_MODULE_9__.IndexArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_3_SpeakerArea__WEBPACK_IMPORTED_MODULE_10__.SpeakerArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_4_F0FactorArea__WEBPACK_IMPORTED_MODULE_11__.F0FactorArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_5_so_vits_svc40SettingArea__WEBPACK_IMPORTED_MODULE_12__.SoVitsSVC40SettingArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_6_ddsp_svc30SettingArea__WEBPACK_IMPORTED_MODULE_13__.DDSPSVC30SettingArea, null), modelSlotControl));\n }, [portrait, startControl, gainControl, modelSlotControl]);\n return characterArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101_CharacterArea.tsx?"); /***/ }), @@ -1258,7 +1335,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\n --text-color: #333;\n --company-color1: rgba(64, 119, 187, 1);\n --company-color2: rgba(29, 47, 78, 1);\n --company-color3: rgba(255, 255, 255, 1);\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\n --global-shadow-color: rgba(0, 0, 0, 0.4);\n\n --sidebar-transition-time: 0.2s;\n --sidebar-transition-time-quick: 0.1s;\n --sidebar-transition-animation: ease-in-out;\n\n --header-height: 1.5rem;\n --right-sidebar-width: 320px;\n\n --dialog-border-color: rgba(100, 100, 100, 1);\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\n --dialog-background-color: rgba(255, 255, 255, 1);\n --dialog-primary-color: rgba(19, 70, 209, 1);\n --dialog-active-color: rgba(40, 70, 209, 1);\n --dialog-input-border-color: rgba(200, 200, 200, 1);\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\n\n --body-video-seeker-height: 3rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n}\nhtml {\n font-size: 16px;\n}\nbody {\n height: 100%;\n width: 100%;\n overflow-y: scroll;\n overflow-x: hidden;\n color: var(--text-color);\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\n}\n#app {\n height: 100%;\n width: 100%;\n}\n.first-gesture {\n background: rgba(200, 0, 0, 0.2);\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n/* Main + Section Partition*/\n.main-body {\n height: 100%;\n width: 100%;\n padding: 2rem;\n font-family: \"Yusei Magic\", sans-serif;\n display: flex;\n flex-direction: column;\n font-size: 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n/* Title */\n.main-body .top-title .title {\n font-size: 3rem;\n }\n.main-body .top-title .top-title-version {\n margin-left: 2rem;\n font-size: 1.2rem;\n background: linear-gradient(transparent 60%, yellow 30%);\n }\n.main-body .top-title .top-title-version-number {\n margin-left: 0.3rem;\n font-size: 0.8rem;\n }\n.main-body .top-title .belongings {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n.main-body .top-title .belongings .link {\n margin-left: 1rem;\n font-weight: 700;\n text-decoration: underline;\n }\n/* Partition */\n.main-body .partition {\n width: 100%;\n }\n.main-body .partition .partition-header {\n font-weight: 700;\n color: rgb(71, 69, 69);\n display: flex;\n }\n.main-body .partition .partition-header .caret {\n width: 2rem;\n }\n.main-body .partition .partition-header .title {\n font-size: 1.1rem;\n }\n.main-body .partition .partition-header .belongings {\n font-weight: 400;\n font-size: 0.8rem;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n margin-left: 10px;\n }\n.main-body .partition .partition-header .belongings .belongings-checkbox {\n margin-bottom: 3px;\n }\n.main-body .partition .partition-content {\n position: static;\n overflow-y: hidden;\n }\n.main-body .partition .row-split {\n }\n.state-control-checkbox:checked + .partition .partition-content {\n max-height: 700px;\n background: rgba(255, 255, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n.state-control-checkbox + .partition .partition-content {\n max-height: 0px;\n background: rgba(233, 233, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n/* ROW */\n\n.split-8-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-8-2 > div:nth-child(1) {\n left: 0px;\n width: 80%;\n }\n\n.split-8-2 > div:nth-child(2) {\n left: 80%;\n width: 20%;\n }\n.split-6-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-6-4 > div:nth-child(1) {\n left: 0px;\n width: 60%;\n }\n.split-6-4 > div:nth-child(2) {\n left: 60%;\n width: 40%;\n }\n.split-5-5 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-5-5 > div:nth-child(1) {\n left: 0px;\n width: 50%;\n }\n.split-5-5 > div:nth-child(2) {\n left: 50%;\n width: 50%;\n }\n.split-4-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-6 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-6 > div:nth-child(2) {\n left: 40%;\n width: 60%;\n }\n.split-3-7 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-7 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-7 > div:nth-child(2) {\n left: 30%;\n width: 70%;\n }\n\n.split-2-8 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-2-8 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n\n.split-2-8 > div:nth-child(2) {\n left: 20%;\n width: 80%;\n }\n\n.split-1-8-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-1-8-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n\n.split-1-8-1 > div:nth-child(2) {\n left: 10%;\n width: 80%;\n }\n\n.split-1-8-1 > div:nth-child(3) {\n left: 90%;\n width: 10%;\n }\n.split-2-2-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-2-6 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(2) {\n left: 20%;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(3) {\n left: 40%;\n width: 60%;\n }\n.split-3-3-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-3-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(2) {\n left: 30%;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(3) {\n left: 60%;\n width: 40%;\n }\n\n.split-3-4-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-4-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-4-3 > div:nth-child(2) {\n left: 30%;\n width: 40%;\n }\n\n.split-3-4-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-2-5-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-5-3 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-5-3 > div:nth-child(2) {\n left: 20%;\n width: 50%;\n }\n.split-2-5-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-4-4-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-4-2 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(2) {\n left: 40%;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(3) {\n left: 80%;\n width: 20%;\n }\n.split-1-4-4-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-1-4-4-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n.split-1-4-4-1 > div:nth-child(2) {\n left: 10%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(3) {\n left: 50%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(4) {\n left: 90%;\n width: 10%;\n }\n\n.split-3-2-2-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-2-2-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-2-2-3 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(4) {\n left: 70%;\n width: 30%;\n }\n.split-3-2-3-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-3-2 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-3-2 > div:nth-child(3) {\n left: 50%;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(4) {\n left: 80%;\n width: 20%;\n }\n.split-3-1-2-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-2-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-2-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-2-4 > div:nth-child(3) {\n left: 40%;\n width: 20%;\n }\n.split-3-1-2-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-1-4 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-1-4 > div:nth-child(3) {\n left: 50%;\n width: 10%;\n }\n.split-3-2-1-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-2-2-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-2-2-1 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-2-2-1 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(4) {\n left: 70%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(5) {\n left: 90%;\n width: 10%;\n }\n.split-3-1-1-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-1-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-1-1-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(3) {\n left: 40%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(4) {\n left: 50%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(5) {\n left: 60%;\n width: 40%;\n }\n.w20 {\n width: 20%;\n}\n.bold {\n font-weight: 700;\n}\n.w40 {\n width: 40%;\n}\n\n.underline {\n border-bottom: 3px solid #333;\n}\n.left-padding-05 {\n padding-left: 0.5rem;\n}\n.left-padding-1 {\n padding-left: 1rem;\n}\n.left-padding-2 {\n padding-left: 2rem;\n}\n.left-margin-1 {\n margin-left: 1rem;\n}\n.left-margin-2 {\n margin-left: 2rem;\n}\n.highlight {\n background-color: rgba(200, 200, 255, 0.3);\n}\n.guided {\n /* background-color: rgba(9, 133, 67, 0.3); */\n background-color: rgba(159, 165, 162, 0.1);\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\n}\n\n.divider {\n height: 0.8rem;\n /* background-color: rgba(16, 210, 113, 0.1); */\n background-color: rgba(31, 42, 36, 0.1);\n}\n\n.body-section-title {\n font-size: 1.5rem;\n color: rgb(51, 49, 49);\n}\n.body-sub-section-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: rgb(3, 53, 12);\n}\n\n.body-item-title {\n color: rgb(51, 99, 49);\n display: flex;\n}\n.body-item-text {\n color: rgb(30, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.body-item-text .body-item-text-item {\n padding-left: 1rem;\n }\n.body-item-text-small {\n color: rgb(30, 30, 30);\n font-size: 0.7rem;\n}\n.body-item-text-em {\n color: rgb(250, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 700;\n}\n\n.body-input-container {\n display: flex;\n}\n.body-item-input {\n width: 60%;\n}\n.body-item-input-slider {\n width: 60%;\n}\n.body-item-input-slider-label {\n margin-right: 1rem;\n}\n.body-item-input-slider-val {\n margin-left: 1rem;\n}\n.body-item-input-slider-2nd {\n width: 60%;\n accent-color: #33f;\n}\n\n.body-button-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.body-button-container > div {\n margin-left: 5px;\n margin-right: 5px;\n padding-left: 20px;\n padding-right: 20px;\n }\n\n.body-button-container .body-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n }\n\n.body-button-container .body-button:hover {\n border: solid 1px #000;\n }\n\n.body-button-container .body-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n\n.body-button-container .body-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n\n.body-button-container .body-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n\n.body-button-container .body-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.body-button-container-space-around {\n justify-content: space-around;\n}\n\n.body-select {\n color: rgb(30, 30, 30);\n max-width: 100%;\n}\n\n.body-select-50 {\n color: rgb(30, 30, 30);\n max-width: 50%;\n height: 1.5rem;\n}\n.select-option-red {\n color: #f66;\n font-weight: 700;\n}\n\n.body-image-container,\n.body-wav-container {\n display: flex;\n width: 100%;\n}\n\n.body-image-container .body-image-container-title,\n .body-image-container .body-wav-container-title,\n .body-wav-container .body-image-container-title,\n .body-wav-container .body-wav-container-title {\n width: 20%;\n }\n\n.body-image-container .body-image-container-img,\n .body-image-container .body-wav-container-wav,\n .body-wav-container .body-image-container-img,\n .body-wav-container .body-wav-container-wav {\n width: 80%;\n }\n\n.donate-img {\n border-radius: 35px;\n height: 1.5rem;\n}\n\n/* Dialog */\n.dialog-container,\n.dialog-container2 {\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n display: none;\n}\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\n color: var(--company-color2);\n width: 40rem;\n max-height: 80vh;\n border: 2px solid var(--dialog-border-color);\n border-radius: 20px;\n flex-direction: column;\n align-items: center;\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\n background: var(--dialog-background-color);\n overflow: hidden;\n display: flex;\n }\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\n margin-top: 20px;\n background: var(--company-color2);\n color: #fff;\n width: 100%;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\n width: 90%;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\n font-family: \"Chicle\", cursive;\n font-size: 3rem;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\n display: flex;\n flex-direction: row;\n margin: 20px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\n width: 90%;\n max-height: 70vh;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\n font-weight: 700;\n margin: 5px 5px 5px 5px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\n font-weight: 400;\n font-size: 0.8rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 5px 1px 5px;\n margin-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\n max-height: 60vh;\n width: 100%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\n height: 5rem;\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\n width: 5rem;\n height: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\n width: 5rem;\n height: 5rem;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\n display: flex;\n flex-direction: column;\n font-size: 0.8rem;\n border-bottom: solid 1px #aaa;\n width: 80%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\n background-color: #eee;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\n background: #f7cfec80;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\n width: 20%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\n width: 55%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\n width: 55%;\n font-weight: 700;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\n width: 15%;\n height: 90%;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\n display: flex;\n flex-direction: column;\n border-bottom: solid 1px #a00;\n width: 20%;\n font-size: 0.8rem;\n padding: 4px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select {\n font-size: 1rem;\n padding-left: 0.5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\n font-size: 0.9rem;\n padding-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\n display: flex;\n flex-direction: row;\n margin: 0.2rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\n width: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\n width: 20rem;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\n display: flex;\n flex-direction: row;\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n justify-content: center;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\n /* width: 12rem; */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 10px 1px 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\n border: solid 1px #000;\n }\n.dialog-container-show {\n display: flex;\n}\n\n.state-control-checkbox:checked ~ .dialog-container {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n}\n\n@keyframes dialog-hide {\n from {\n opacity: 1;\n z-index: 200;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 200;\n }\n to {\n opacity: 1;\n z-index: 200;\n }\n}\n\n.state-control-checkbox:checked ~ .dialog-container2 {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container2 {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n/* .state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n} */\n\n@keyframes dialog-hide2 {\n from {\n opacity: 1;\n z-index: 400;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show2 {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 400;\n }\n to {\n opacity: 1;\n z-index: 400;\n }\n}\n\n.tooltip-text {\n display: none;\n position: absolute;\n padding: 4px;\n font-size: 0.7rem;\n line-height: 2rem;\n color: #ddd;\n border-radius: 5px;\n background: #444;\n /* width: 100px; */\n}\n.tooltip-text-100px {\n width: 100px;\n}\n.tooltip-text-thin {\n line-height: 1rem;\n}\n.tooltip-text-right {\n line-height: 1rem;\n}\n.tooltip-text:before {\n content: \"\";\n position: absolute;\n top: -1.4rem;\n border: 12px solid transparent;\n border-top: 16px solid #444;\n margin-left: 0rem;\n transform: rotateZ(180deg);\n}\n.tooltip:hover .tooltip-text {\n display: inline-block;\n top: 30px;\n left: 0px;\n}\n.tooltip:hover .tooltip-text-lower {\n display: inline-block;\n top: 60px;\n left: 0px;\n}\n\n.tooltip {\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n\n/* ################## */\n.merge-field-container {\n display: flex;\n flex-direction: column;\n}\n.merge-field-container .merge-field {\n display: flex;\n flex-direction: row;\n }\n.merge-field-container .merge-field .merge-field-elem {\n padding-left: 5px;\n }\n.merge-field-container .merge-field .red {\n color: #f00;\n }\n.merge-field-container .merge-field .purple {\n color: #33f;\n }\n.merge-field-container .merge-field .grey-bold {\n color: #555;\n font-weight: 800;\n }\n.model-slot-area {\n display: inline-block;\n background: var(--company-color2);\n border-radius: 10px;\n padding: 20px;\n}\n.model-slot-area .model-slot-panel {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\n display: flex;\n flex-direction: row;\n gap: 2px;\n flex-wrap: wrap;\n /* width: calc(30rem + 40px + 10px); */\n }\n.model-slot-area .model-slot-panel .model-slot-buttons {\n display: flex;\n flex-direction: column-reverse;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #333;\n cursor: pointer;\n padding: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\n border: solid 2px #faa;\n }\n.model-slot-tile-container,\n.model-slot-tile-container-selected {\n width: 6rem;\n height: 6rem;\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.model-slot-tile-container-selected {\n background: #43030c;\n}\n.model-slot-tile-container:hover {\n background: #43030c;\n}\n\n.model-slot-tile-icon-div {\n width: 5rem;\n height: 5rem;\n padding-top: 4px;\n}\n.model-slot-tile-icon {\n width: 5rem;\n height: 5rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n}\n.model-slot-tile-icon-no-entry {\n color: gray;\n}\n.model-slot-tile-dscription {\n font-size: 0.7rem;\n font-weight: 700;\n color: navajowhite;\n padding-top: 4px;\n}\n\n.character-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.character-area .portrait-area {\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container {\n position: relative;\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container .portrait {\n width: 20rem;\n height: 20rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n position: absolute;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-status {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n left: 5px;\n top: 5px;\n border-radius: 2px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n right: 5px;\n bottom: 5px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\n color: white;\n }\n\n.character-area .character-area-control-area {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control {\n display: flex;\n gap: 3px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\n width: 5rem;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\n width: 5rem;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\n width: 3rem;\n font-weight: 700;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\n /* width: 20rem; */\n display: flex;\n flex-direction: column;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\n width: 2rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\n width: 10rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\n width: 3rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\n border: solid 2px #faa;\n }\n\n/* audio::-webkit-media-controls-play-button,\naudio::-webkit-media-controls-panel {\n background-color: #ff0;\n height: 1rem;\n}\naudio::-webkit-media-controls-enclosure {\n max-height: 1rem;\n}\naudio::-webkit-media-controls {\n justify-content: start;\n}\naudio::-webkit-media-controls-overlay-enclosure{\n height: 1rem;\n} */\n\n.config-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.config-area .config-sub-area {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n\n.config-area .config-sub-area .config-sub-area-control {\n display: flex;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\n width: 5rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\n width: 20rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\n width: 15rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\n display: flex;\n gap: 10px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\n display: flex;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\n width: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\n width: 10rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\n width: 3rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\n border: solid 2px #999;\n color: white;\n background: #666;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\n border: solid 2px #faa;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\n border: solid 2px #999;\n color: white;\n background: #844;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\n max-width: 30%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\n max-width: 70%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\n height: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\n height: 1rem;\n width: 15rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\n height: 1rem;\n width: 1rem;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\n border: solid 1px #333;\n background: #fff;\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\n font-size: 0.8rem;\n border: solid 1px #333;\n border-radius: 5px;\n background: #ada;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.headerArea {\n display: flex;\n flex-direction: column;\n}\n\n.headerArea .title1 {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: flex-end;\n }\n\n.headerArea .title1 .title {\n font-size: 1.8rem;\n font-weight: 700;\n color: #333;\n text-shadow: 0 0 2px #333;\n }\n\n.headerArea .title1 .title-version {\n font-size: 0.9rem;\n }\n\n.headerArea .title1 .title-version-number {\n font-size: 0.7rem;\n }\n\n.headerArea .icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n }\n\n.headerArea .icons .belongings {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.headerArea .icons .belongings .belongings-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n top: -2px;\n }\n\n.headerArea .icons .belongings .belongings-button:hover {\n border: solid 2px #cc6;\n }\n\n.advanced-setting-container {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin: 10px;\n}\n\n.advanced-setting-container .advanced-setting-container-row {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\n width: 7rem;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\n width: 15rem;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\n display: flex;\n flex-direction: row;\n gap: 5px;\n width: 10rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\n color: #333;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\n }\n\n.merge-lab-container {\n display: flex;\n flex-direction: column;\n margin: 10px;\n gap: 10px;\n}\n\n.merge-lab-container .merge-lab-type-filter {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\n width: 70%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\n display: flex;\n flex-direction: column-reverse;\n width: 30%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\n border: solid 2px #ddd;\n color: black;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #eee;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n text-align: center;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\n border: solid 2px #aaa;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\n font-size: 0.7rem;\n font-weight: 700;\n color: #333;\n text-align: center;\n }\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\n --text-color: #333;\n --company-color1: rgba(64, 119, 187, 1);\n --company-color2: rgba(29, 47, 78, 1);\n --company-color3: rgba(255, 255, 255, 1);\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\n --global-shadow-color: rgba(0, 0, 0, 0.4);\n\n --sidebar-transition-time: 0.2s;\n --sidebar-transition-time-quick: 0.1s;\n --sidebar-transition-animation: ease-in-out;\n\n --header-height: 1.5rem;\n --right-sidebar-width: 320px;\n\n --dialog-border-color: rgba(100, 100, 100, 1);\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\n --dialog-background-color: rgba(255, 255, 255, 1);\n --dialog-primary-color: rgba(19, 70, 209, 1);\n --dialog-active-color: rgba(40, 70, 209, 1);\n --dialog-input-border-color: rgba(200, 200, 200, 1);\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\n\n --body-video-seeker-height: 3rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n}\nhtml {\n font-size: 16px;\n}\nbody {\n height: 100%;\n width: 100%;\n overflow-y: scroll;\n overflow-x: hidden;\n color: var(--text-color);\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\n}\n#app {\n height: 100%;\n width: 100%;\n}\n.first-gesture {\n background: rgba(200, 0, 0, 0.2);\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n/* Main + Section Partition*/\n.main-body {\n height: 100%;\n width: 100%;\n padding: 2rem;\n font-family: \"Yusei Magic\", sans-serif;\n display: flex;\n flex-direction: column;\n font-size: 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n/* Title */\n.main-body .top-title .title {\n font-size: 3rem;\n }\n.main-body .top-title .top-title-version {\n margin-left: 2rem;\n font-size: 1.2rem;\n background: linear-gradient(transparent 60%, yellow 30%);\n }\n.main-body .top-title .top-title-version-number {\n margin-left: 0.3rem;\n font-size: 0.8rem;\n }\n.main-body .top-title .belongings {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n.main-body .top-title .belongings .link {\n margin-left: 1rem;\n font-weight: 700;\n text-decoration: underline;\n }\n/* Partition */\n.main-body .partition {\n width: 100%;\n }\n.main-body .partition .partition-header {\n font-weight: 700;\n color: rgb(71, 69, 69);\n display: flex;\n }\n.main-body .partition .partition-header .caret {\n width: 2rem;\n }\n.main-body .partition .partition-header .title {\n font-size: 1.1rem;\n }\n.main-body .partition .partition-header .belongings {\n font-weight: 400;\n font-size: 0.8rem;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n margin-left: 10px;\n }\n.main-body .partition .partition-header .belongings .belongings-checkbox {\n margin-bottom: 3px;\n }\n.main-body .partition .partition-content {\n position: static;\n overflow-y: hidden;\n }\n.main-body .partition .row-split {\n }\n.state-control-checkbox:checked + .partition .partition-content {\n max-height: 700px;\n background: rgba(255, 255, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n.state-control-checkbox + .partition .partition-content {\n max-height: 0px;\n background: rgba(233, 233, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n/* ROW */\n\n.split-8-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-8-2 > div:nth-child(1) {\n left: 0px;\n width: 80%;\n }\n\n.split-8-2 > div:nth-child(2) {\n left: 80%;\n width: 20%;\n }\n.split-6-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-6-4 > div:nth-child(1) {\n left: 0px;\n width: 60%;\n }\n.split-6-4 > div:nth-child(2) {\n left: 60%;\n width: 40%;\n }\n.split-5-5 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-5-5 > div:nth-child(1) {\n left: 0px;\n width: 50%;\n }\n.split-5-5 > div:nth-child(2) {\n left: 50%;\n width: 50%;\n }\n.split-4-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-6 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-6 > div:nth-child(2) {\n left: 40%;\n width: 60%;\n }\n.split-3-7 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-7 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-7 > div:nth-child(2) {\n left: 30%;\n width: 70%;\n }\n\n.split-2-8 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-2-8 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n\n.split-2-8 > div:nth-child(2) {\n left: 20%;\n width: 80%;\n }\n\n.split-1-8-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-1-8-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n\n.split-1-8-1 > div:nth-child(2) {\n left: 10%;\n width: 80%;\n }\n\n.split-1-8-1 > div:nth-child(3) {\n left: 90%;\n width: 10%;\n }\n.split-2-2-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-2-6 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(2) {\n left: 20%;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(3) {\n left: 40%;\n width: 60%;\n }\n.split-3-3-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-3-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(2) {\n left: 30%;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(3) {\n left: 60%;\n width: 40%;\n }\n\n.split-3-4-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-4-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-4-3 > div:nth-child(2) {\n left: 30%;\n width: 40%;\n }\n\n.split-3-4-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-2-5-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-5-3 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-5-3 > div:nth-child(2) {\n left: 20%;\n width: 50%;\n }\n.split-2-5-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-4-4-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-4-2 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(2) {\n left: 40%;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(3) {\n left: 80%;\n width: 20%;\n }\n.split-1-4-4-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-1-4-4-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n.split-1-4-4-1 > div:nth-child(2) {\n left: 10%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(3) {\n left: 50%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(4) {\n left: 90%;\n width: 10%;\n }\n\n.split-3-2-2-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-2-2-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-2-2-3 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(4) {\n left: 70%;\n width: 30%;\n }\n.split-3-2-3-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-3-2 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-3-2 > div:nth-child(3) {\n left: 50%;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(4) {\n left: 80%;\n width: 20%;\n }\n.split-3-1-2-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-2-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-2-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-2-4 > div:nth-child(3) {\n left: 40%;\n width: 20%;\n }\n.split-3-1-2-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-1-4 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-1-4 > div:nth-child(3) {\n left: 50%;\n width: 10%;\n }\n.split-3-2-1-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-2-2-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-2-2-1 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-2-2-1 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(4) {\n left: 70%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(5) {\n left: 90%;\n width: 10%;\n }\n.split-3-1-1-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-1-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-1-1-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(3) {\n left: 40%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(4) {\n left: 50%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(5) {\n left: 60%;\n width: 40%;\n }\n.w20 {\n width: 20%;\n}\n.bold {\n font-weight: 700;\n}\n.w40 {\n width: 40%;\n}\n\n.underline {\n border-bottom: 3px solid #333;\n}\n.left-padding-05 {\n padding-left: 0.5rem;\n}\n.left-padding-1 {\n padding-left: 1rem;\n}\n.left-padding-2 {\n padding-left: 2rem;\n}\n.left-margin-1 {\n margin-left: 1rem;\n}\n.left-margin-2 {\n margin-left: 2rem;\n}\n.highlight {\n background-color: rgba(200, 200, 255, 0.3);\n}\n.guided {\n /* background-color: rgba(9, 133, 67, 0.3); */\n background-color: rgba(159, 165, 162, 0.1);\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\n}\n\n.divider {\n height: 0.8rem;\n /* background-color: rgba(16, 210, 113, 0.1); */\n background-color: rgba(31, 42, 36, 0.1);\n}\n\n.body-section-title {\n font-size: 1.5rem;\n color: rgb(51, 49, 49);\n}\n.body-sub-section-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: rgb(3, 53, 12);\n}\n\n.body-item-title {\n color: rgb(51, 99, 49);\n display: flex;\n}\n.body-item-text {\n color: rgb(30, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.body-item-text .body-item-text-item {\n padding-left: 1rem;\n }\n.body-item-text-small {\n color: rgb(30, 30, 30);\n font-size: 0.7rem;\n}\n.body-item-text-em {\n color: rgb(250, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 700;\n}\n\n.body-input-container {\n display: flex;\n}\n.body-item-input {\n width: 60%;\n}\n.body-item-input-slider {\n width: 60%;\n}\n.body-item-input-slider-label {\n margin-right: 1rem;\n}\n.body-item-input-slider-val {\n margin-left: 1rem;\n}\n.body-item-input-slider-2nd {\n width: 60%;\n accent-color: #33f;\n}\n\n.body-button-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.body-button-container > div {\n margin-left: 5px;\n margin-right: 5px;\n padding-left: 20px;\n padding-right: 20px;\n }\n\n.body-button-container .body-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n }\n\n.body-button-container .body-button:hover {\n border: solid 1px #000;\n }\n\n.body-button-container .body-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n\n.body-button-container .body-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n\n.body-button-container .body-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n\n.body-button-container .body-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.body-button-container-space-around {\n justify-content: space-around;\n}\n\n.body-select {\n color: rgb(30, 30, 30);\n max-width: 100%;\n}\n\n.body-select-50 {\n color: rgb(30, 30, 30);\n max-width: 50%;\n height: 1.5rem;\n}\n.select-option-red {\n color: #f66;\n font-weight: 700;\n}\n\n.body-image-container,\n.body-wav-container {\n display: flex;\n width: 100%;\n}\n\n.body-image-container .body-image-container-title,\n .body-image-container .body-wav-container-title,\n .body-wav-container .body-image-container-title,\n .body-wav-container .body-wav-container-title {\n width: 20%;\n }\n\n.body-image-container .body-image-container-img,\n .body-image-container .body-wav-container-wav,\n .body-wav-container .body-image-container-img,\n .body-wav-container .body-wav-container-wav {\n width: 80%;\n }\n\n.donate-img {\n border-radius: 35px;\n height: 1.5rem;\n}\n\n/* Dialog */\n.dialog-container,\n.dialog-container2 {\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n display: none;\n}\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\n color: var(--company-color2);\n width: 40rem;\n max-height: 80vh;\n border: 2px solid var(--dialog-border-color);\n border-radius: 20px;\n flex-direction: column;\n align-items: center;\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\n background: var(--dialog-background-color);\n overflow: hidden;\n display: flex;\n }\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\n margin-top: 20px;\n background: var(--company-color2);\n color: #fff;\n width: 100%;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\n width: 90%;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\n font-family: \"Chicle\", cursive;\n font-size: 3rem;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\n display: flex;\n flex-direction: row;\n margin: 20px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\n width: 90%;\n max-height: 70vh;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\n font-weight: 700;\n margin: 5px 5px 5px 5px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\n font-weight: 400;\n font-size: 0.8rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 5px 1px 5px;\n margin-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\n max-height: 60vh;\n width: 100%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\n height: 5rem;\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\n width: 5rem;\n height: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\n width: 5rem;\n height: 5rem;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\n display: flex;\n flex-direction: column;\n font-size: 0.8rem;\n border-bottom: solid 1px #aaa;\n width: 80%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\n background-color: #eee;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\n background: #f7cfec80;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\n width: 20%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\n width: 55%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\n width: 55%;\n font-weight: 700;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\n width: 15%;\n height: 90%;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\n display: flex;\n flex-direction: column;\n border-bottom: solid 1px #a00;\n width: 20%;\n font-size: 0.8rem;\n padding: 4px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\n font-size: 1rem;\n padding-left: 0.5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\n font-size: 0.9rem;\n padding-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\n display: flex;\n flex-direction: row;\n margin: 0.2rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\n width: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\n width: 20rem;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\n display: flex;\n flex-direction: row;\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n justify-content: center;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\n /* width: 12rem; */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 10px 1px 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row {\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title {\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers {\n display: flex;\n flex-direction: row;\n margin: 0px 0px 0px 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\n margin: 0px 0px 0px 0.5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons {\n margin: 0px 0px 0px 0.5rem;\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button {\n margin: 0px 0.5rem 0px 0.5rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 0px 10px 0px 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover {\n border: solid 1px #000;\n }\n.dialog-container-show {\n display: flex;\n}\n\n.state-control-checkbox:checked ~ .dialog-container {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n}\n\n@keyframes dialog-hide {\n from {\n opacity: 1;\n z-index: 200;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 200;\n }\n to {\n opacity: 1;\n z-index: 200;\n }\n}\n\n.state-control-checkbox:checked ~ .dialog-container2 {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container2 {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n/* .state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n} */\n\n@keyframes dialog-hide2 {\n from {\n opacity: 1;\n z-index: 400;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show2 {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 400;\n }\n to {\n opacity: 1;\n z-index: 400;\n }\n}\n\n.tooltip-text {\n display: none;\n position: absolute;\n padding: 4px;\n font-size: 0.7rem;\n line-height: 2rem;\n color: #ddd;\n border-radius: 5px;\n background: #444;\n /* width: 100px; */\n}\n.tooltip-text-100px {\n width: 100px;\n}\n.tooltip-text-thin {\n line-height: 1rem;\n}\n.tooltip-text-right {\n line-height: 1rem;\n}\n.tooltip-text:before {\n content: \"\";\n position: absolute;\n top: -1.4rem;\n border: 12px solid transparent;\n border-top: 16px solid #444;\n margin-left: 0rem;\n transform: rotateZ(180deg);\n}\n.tooltip:hover .tooltip-text {\n display: inline-block;\n top: 30px;\n left: 0px;\n}\n.tooltip:hover .tooltip-text-lower {\n display: inline-block;\n top: 60px;\n left: 0px;\n}\n\n.tooltip {\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n\n/* ################## */\n.merge-field-container {\n display: flex;\n flex-direction: column;\n}\n.merge-field-container .merge-field {\n display: flex;\n flex-direction: row;\n }\n.merge-field-container .merge-field .merge-field-elem {\n padding-left: 5px;\n }\n.merge-field-container .merge-field .red {\n color: #f00;\n }\n.merge-field-container .merge-field .purple {\n color: #33f;\n }\n.merge-field-container .merge-field .grey-bold {\n color: #555;\n font-weight: 800;\n }\n.model-slot-area {\n display: inline-block;\n background: var(--company-color2);\n border-radius: 10px;\n padding: 20px;\n}\n.model-slot-area .model-slot-panel {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\n display: flex;\n flex-direction: row;\n gap: 2px;\n flex-wrap: wrap;\n /* width: calc(30rem + 40px + 10px); */\n }\n.model-slot-area .model-slot-panel .model-slot-buttons {\n display: flex;\n flex-direction: column-reverse;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #333;\n cursor: pointer;\n padding: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\n border: solid 2px #faa;\n }\n.model-slot-tile-container,\n.model-slot-tile-container-selected {\n width: 6rem;\n height: 6rem;\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.model-slot-tile-container-selected {\n background: #43030c;\n}\n.model-slot-tile-container:hover {\n background: #43030c;\n}\n\n.model-slot-tile-icon-div {\n width: 5rem;\n height: 5rem;\n padding-top: 4px;\n}\n.model-slot-tile-icon {\n width: 5rem;\n height: 5rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n}\n.model-slot-tile-icon-no-entry {\n color: gray;\n}\n.model-slot-tile-dscription {\n font-size: 0.7rem;\n font-weight: 700;\n color: navajowhite;\n padding-top: 4px;\n}\n\n.character-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.character-area .portrait-area {\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container {\n position: relative;\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container .portrait {\n width: 20rem;\n height: 20rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n position: absolute;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-status {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n left: 5px;\n top: 5px;\n border-radius: 2px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n right: 5px;\n bottom: 5px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\n color: white;\n }\n\n.character-area .character-area-control-area {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control {\n display: flex;\n gap: 3px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\n width: 5rem;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\n width: 5rem;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\n width: 4rem;\n font-weight: 700;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\n /* width: 20rem; */\n display: flex;\n flex-direction: column;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\n width: 2rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\n width: 10rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\n width: 3rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\n border: solid 2px #faa;\n }\n\n/* audio::-webkit-media-controls-play-button,\naudio::-webkit-media-controls-panel {\n background-color: #ff0;\n height: 1rem;\n}\naudio::-webkit-media-controls-enclosure {\n max-height: 1rem;\n}\naudio::-webkit-media-controls {\n justify-content: start;\n}\naudio::-webkit-media-controls-overlay-enclosure{\n height: 1rem;\n} */\n\n.config-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.config-area .config-sub-area {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n\n.config-area .config-sub-area .config-sub-area-control {\n display: flex;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\n width: 5rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\n width: 20rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\n width: 15rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\n display: flex;\n gap: 10px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\n display: flex;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\n width: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\n width: 10rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\n width: 3rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\n border: solid 2px #999;\n color: white;\n background: #666;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\n border: solid 2px #faa;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\n border: solid 2px #999;\n color: white;\n background: #844;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\n max-width: 30%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\n max-width: 70%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\n height: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\n height: 1rem;\n width: 15rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\n height: 1rem;\n width: 1rem;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\n border: solid 1px #333;\n background: #fff;\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\n font-size: 0.8rem;\n border: solid 1px #333;\n border-radius: 5px;\n background: #ada;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.headerArea {\n display: flex;\n flex-direction: column;\n}\n\n.headerArea .title1 {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: flex-end;\n }\n\n.headerArea .title1 .title {\n font-size: 1.8rem;\n font-weight: 700;\n color: #333;\n text-shadow: 0 0 2px #333;\n }\n\n.headerArea .title1 .title-version {\n font-size: 0.9rem;\n }\n\n.headerArea .title1 .title-version-number {\n font-size: 0.7rem;\n }\n\n.headerArea .icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n }\n\n.headerArea .icons .belongings {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.headerArea .icons .belongings .belongings-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n top: -2px;\n }\n\n.headerArea .icons .belongings .belongings-button:hover {\n border: solid 2px #cc6;\n }\n\n.advanced-setting-container {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin: 10px;\n}\n\n.advanced-setting-container .advanced-setting-container-row {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\n width: 7rem;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\n width: 15rem;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\n display: flex;\n flex-direction: row;\n gap: 5px;\n width: 10rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\n color: #333;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\n }\n\n.merge-lab-container {\n display: flex;\n flex-direction: column;\n margin: 10px;\n gap: 10px;\n}\n\n.merge-lab-container .merge-lab-type-filter {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\n width: 70%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\n display: flex;\n flex-direction: column-reverse;\n width: 30%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\n border: solid 2px #ddd;\n color: black;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #eee;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n text-align: center;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\n border: solid 2px #aaa;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\n font-size: 0.7rem;\n font-weight: 700;\n color: #333;\n text-align: center;\n }\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), diff --git a/client/demo/src/components/demo/904-1_MainScreen.tsx b/client/demo/src/components/demo/904-1_MainScreen.tsx index 35ad5c7d..eb0accb3 100644 --- a/client/demo/src/components/demo/904-1_MainScreen.tsx +++ b/client/demo/src/components/demo/904-1_MainScreen.tsx @@ -11,6 +11,7 @@ export type MainScreenProps = { close: () => void openSampleDownloader: (slotIndex: number) => void openFileUploader: (slotIndex: number) => void + openEditor: (slotIndex: number) => void } @@ -25,6 +26,7 @@ export const MainScreen = (props: MainScreenProps) => { messageBuilderState.setMessage(__filename, "terms_of_use", { "ja": "利用規約", "en": "terms of use" }) messageBuilderState.setMessage(__filename, "sample", { "ja": "サンプル", "en": "DL sample" }) messageBuilderState.setMessage(__filename, "upload", { "ja": "アップロード", "en": "upload" }) + messageBuilderState.setMessage(__filename, "edit", { "ja": "編集", "en": "edit" }) messageBuilderState.setMessage(__filename, "close", { "ja": "閉じる", "en": "close" }) }, []) @@ -219,6 +221,7 @@ export const MainScreen = (props: MainScreenProps) => {
{ props.openFileUploader(index) }} >{messageBuilderState.getMessage(__filename, "upload")}
{ props.openSampleDownloader(index) }} >{messageBuilderState.getMessage(__filename, "sample")}
+
{ props.openEditor(index) }} >{messageBuilderState.getMessage(__filename, "edit")}
) diff --git a/client/demo/src/components/demo/904-3_FileUploader.tsx b/client/demo/src/components/demo/904-3_FileUploader.tsx index 7ed3505b..a0da4d4b 100644 --- a/client/demo/src/components/demo/904-3_FileUploader.tsx +++ b/client/demo/src/components/demo/904-3_FileUploader.tsx @@ -170,7 +170,9 @@ export const FileUploaderScreen = (props: FileUploaderScreenProps) => { return } if (checkModelSetting(uploadSetting)) { - serverSetting.uploadModel(uploadSetting) + serverSetting.uploadModel(uploadSetting).then(() => { + props.backToSlotManager() + }) } else { const errorMessage = messageBuilderState.getMessage(__filename, "alert-model-file") alert(errorMessage) diff --git a/client/demo/src/components/demo/904-4_Editor.tsx b/client/demo/src/components/demo/904-4_Editor.tsx new file mode 100644 index 00000000..bcee3950 --- /dev/null +++ b/client/demo/src/components/demo/904-4_Editor.tsx @@ -0,0 +1,108 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useAppState } from "../../001_provider/001_AppStateProvider"; +import { useMessageBuilder } from "../../hooks/useMessageBuilder"; +import { ModelSlotManagerDialogScreen } from "./904_ModelSlotManagerDialog"; + +export type EditorScreenProps = { + screen: ModelSlotManagerDialogScreen + targetIndex: number + close: () => void + backToSlotManager: () => void +} + +export const EditorScreen = (props: EditorScreenProps) => { + const { serverSetting } = useAppState() + const messageBuilderState = useMessageBuilder() + const [targetId, setTargetId] = useState(0) + const [targetName, setTargetName] = useState() + + useMemo(() => { + messageBuilderState.setMessage(__filename, "header_message", { "ja": "詳細設定: ", "en": "Edit " }) + messageBuilderState.setMessage(__filename, "edit_speaker", { "ja": "話者登録", "en": "Speaker ID" }) + messageBuilderState.setMessage(__filename, "back", { "ja": "戻る", "en": "back" }) + }, []) + + useEffect(() => { + const targetSlot = serverSetting.serverSetting.modelSlots[props.targetIndex] + + if (!targetSlot) { + return + } + const currentName = !!targetSlot.speakers[targetId] ? targetSlot.speakers[targetId] : "" + setTargetName(currentName) + + }, [targetId]) + + const screen = useMemo(() => { + if (props.screen != "Editor") { + return <> + } + const targetSlot = serverSetting.serverSetting.modelSlots[props.targetIndex] + + + + + return ( +
+
Model Slot Editor
+
+
+ {messageBuilderState.getMessage(__filename, "header_message")} Slot[{props.targetIndex}] + { + props.backToSlotManager() + }} className="file-uploader-header-button"><<{messageBuilderState.getMessage(__filename, "back")}
+
+
+ {messageBuilderState.getMessage(__filename, "edit_speaker")} +
+
+
+ ID: +
+
+ +
+
+ Name: +
+
+ { setTargetName(e.target.value) }} /> +
+
+
{ + const inputElem = document.getElementById("edit-model-slot-speakers-name-input") as HTMLInputElement + targetSlot.speakers[targetId] = inputElem.value + await serverSetting.updateModelInfo(props.targetIndex, "speakers", JSON.stringify(targetSlot.speakers)) + } + }>set
+
{ + delete targetSlot.speakers[targetId] + await serverSetting.updateModelInfo(props.targetIndex, "speakers", JSON.stringify(targetSlot.speakers)) + } + }>del
+
+
+
+
+ +
+
+
+ ) + + }, [ + props.screen, + props.targetIndex, + targetId, + targetName + ]) + + + + return screen; + +}; diff --git a/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx b/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx index 8ba8b64d..4ffdc33d 100644 --- a/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx +++ b/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx @@ -3,6 +3,7 @@ import { useGuiState } from "./001_GuiStateProvider"; import { MainScreen } from "./904-1_MainScreen"; import { SampleDownloaderScreen } from "./904-2_SampleDownloader"; import { FileUploaderScreen } from "./904-3_FileUploader"; +import { EditorScreen } from "./904-4_Editor"; export type uploadData = { slot: number @@ -19,7 +20,8 @@ export type ModelSlotSettingMode = typeof ModelSlotSettingMode[keyof typeof Mode export const ModelSlotManagerDialogScreen = { "Main": "Main", "SampleDownloader": "SampleDownloader", - "FileUploader": "FileUploader" + "FileUploader": "FileUploader", + "Editor": "Editor" } as const export type ModelSlotManagerDialogScreen = typeof ModelSlotManagerDialogScreen[keyof typeof ModelSlotManagerDialogScreen] @@ -33,13 +35,17 @@ export const ModelSlotManagerDialog = () => { const close = () => { guiState.stateControls.showModelSlotManagerCheckbox.updateState(false) } const openSampleDownloader = (index: number) => { setTargetIndex(index); setScreen("SampleDownloader") } const openFileUploader = (index: number) => { setTargetIndex(index); setScreen("FileUploader") } + const openEditor = (index: number) => { setTargetIndex(index); setScreen("Editor") } + const backToSlotManager = () => { setScreen("Main") } const mainScreen = ( + openFileUploader={openFileUploader} + openEditor={openEditor} + /> ) const sampleDownloaderScreen = ( { close={close} backToSlotManager={backToSlotManager} /> ) + const editorScreen = ( + + ) return (
{mainScreen} {sampleDownloaderScreen} {fileUploaderScreen} + {editorScreen}
) }, [screen, targetIndex]) diff --git a/client/demo/src/components/demo/components2/101-1_TuningArea.tsx b/client/demo/src/components/demo/components2/101-1_TuningArea.tsx new file mode 100644 index 00000000..f3c20785 --- /dev/null +++ b/client/demo/src/components/demo/components2/101-1_TuningArea.tsx @@ -0,0 +1,55 @@ +import React, { useMemo } from "react" +import { useAppState } from "../../../001_provider/001_AppStateProvider" + +export type TuningAreaProps = { +} + + +export const TuningArea = (_props: TuningAreaProps) => { + const { serverSetting } = useAppState() + + const selected = useMemo(() => { + if (serverSetting.serverSetting.modelSlotIndex == undefined) { + return + } + return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex] + }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]) + + + const tuningArea = useMemo(() => { + if (!selected) { + return <> + } + if (selected.voiceChangerType == "MMVCv13" || selected.voiceChangerType == "MMVCv15") { + return <> + } + + const currentTuning = serverSetting.serverSetting.tran + const tranValueUpdatedAction = async (val: number) => { + await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, tran: val }) + } + + return ( +
+
+ TUNE: +
+
+
+ + + { + tranValueUpdatedAction(Number(e.target.value)) + }}> + + {currentTuning} +
+ +
+
+ ) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]) + + + return tuningArea +} \ No newline at end of file diff --git a/client/demo/src/components/demo/components2/101-2_IndexArea.tsx b/client/demo/src/components/demo/components2/101-2_IndexArea.tsx new file mode 100644 index 00000000..a6deccdb --- /dev/null +++ b/client/demo/src/components/demo/components2/101-2_IndexArea.tsx @@ -0,0 +1,56 @@ +import React, { useMemo } from "react" +import { useAppState } from "../../../001_provider/001_AppStateProvider" + +export type IndexAreaProps = { +} + + +export const IndexArea = (_props: IndexAreaProps) => { + const { serverSetting } = useAppState() + + const selected = useMemo(() => { + if (serverSetting.serverSetting.modelSlotIndex == undefined) { + return + } + return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex] + }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]) + + + const indexArea = useMemo(() => { + if (!selected) { + return <> + } + if (selected.voiceChangerType != "RVC") { + return <> + } + + const currentIndexRatio = serverSetting.serverSetting.indexRatio + const indexRatioValueUpdatedAction = async (val: number) => { + await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, indexRatio: val }) + } + + return ( +
+
+ INDEX: +
+
+
+ + + { + indexRatioValueUpdatedAction(Number(e.target.value)) + }}> + + {currentIndexRatio} +
+ +
+
+ ) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]) + + + + return indexArea +} \ No newline at end of file diff --git a/client/demo/src/components/demo/components2/101-3_SpeakerArea.tsx b/client/demo/src/components/demo/components2/101-3_SpeakerArea.tsx new file mode 100644 index 00000000..19c3f8c9 --- /dev/null +++ b/client/demo/src/components/demo/components2/101-3_SpeakerArea.tsx @@ -0,0 +1,113 @@ +import React, { useMemo } from "react" +import { useAppState } from "../../../001_provider/001_AppStateProvider" + +export type SpeakerAreaProps = { +} + + +export const SpeakerArea = (_props: SpeakerAreaProps) => { + const { serverSetting } = useAppState() + + const selected = useMemo(() => { + if (serverSetting.serverSetting.modelSlotIndex == undefined) { + return + } + return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex] + }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]) + + + + const srcArea = useMemo(() => { + if (!selected) { + return <> + } + + if (selected.voiceChangerType != "MMVCv13" && selected.voiceChangerType != "MMVCv15") { + return <> + } + const options = Object.keys(selected.speakers).map(key => { + const val = selected.speakers[Number(key)] + return ( + + ) + }) + + const srcSpeakerValueUpdatedAction = async (val: number) => { + await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, srcId: val }) + } + + return ( +
+
+ Voice: +
+
+
+ src + + + +
+ +
+
+ ) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]) + + + const dstArea = useMemo(() => { + if (!selected) { + return <> + } + + const options = Object.keys(selected.speakers).map(key => { + const val = selected.speakers[Number(key)] + return ( + + ) + }) + + const srcSpeakerValueUpdatedAction = async (val: number) => { + await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, dstId: val }) + } + + return ( +
+
+ { + selected.voiceChangerType == "DDSP-SVC" || + selected.voiceChangerType == "so-vits-svc-40" || + selected.voiceChangerType == "RVC" ? "Voice:" : "" + } +
+
+
+ + { + selected.voiceChangerType == "MMVCv13" || + selected.voiceChangerType == "MMVCv15" ? "dst" : "" + } + + + + + +
+ +
+
+ ) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]) + + + return ( + <> + {srcArea} + {dstArea} + + ) +} \ No newline at end of file diff --git a/client/demo/src/components/demo/components2/101-4_F0FactorArea.tsx b/client/demo/src/components/demo/components2/101-4_F0FactorArea.tsx new file mode 100644 index 00000000..ec8125a5 --- /dev/null +++ b/client/demo/src/components/demo/components2/101-4_F0FactorArea.tsx @@ -0,0 +1,53 @@ +import React, { useMemo } from "react" +import { useAppState } from "../../../001_provider/001_AppStateProvider" + +export type SpeakerAreaProps = { +} + + +export const F0FactorArea = (_props: SpeakerAreaProps) => { + const { serverSetting } = useAppState() + + const selected = useMemo(() => { + if (serverSetting.serverSetting.modelSlotIndex == undefined) { + return + } + return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex] + }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]) + + + + const f0FactorArea = useMemo(() => { + if (!selected) { + return <> + } + + if (selected.voiceChangerType != "MMVCv15") { + return <> + } + + + return ( +
+
+ F0Factor: +
+
+
+ + + { + serverSetting.updateServerSettings({ ...serverSetting.serverSetting, f0Factor: Number(e.target.value) }) + }}> + + {serverSetting.serverSetting.f0Factor} +
+ +
+
+ ) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]) + + + return f0FactorArea +} \ No newline at end of file diff --git a/client/demo/src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx b/client/demo/src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx new file mode 100644 index 00000000..1aab7e41 --- /dev/null +++ b/client/demo/src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx @@ -0,0 +1,81 @@ +import React, { useMemo } from "react" +import { useAppState } from "../../../001_provider/001_AppStateProvider" + +export type SoVitsSVC40SettingAreaProps = { +} + + +export const SoVitsSVC40SettingArea = (_props: SoVitsSVC40SettingAreaProps) => { + const { serverSetting } = useAppState() + + const selected = useMemo(() => { + if (serverSetting.serverSetting.modelSlotIndex == undefined) { + return + } + return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex] + }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]) + + + + const settingArea = useMemo(() => { + if (!selected) { + return <> + } + + if (selected.voiceChangerType != "so-vits-svc-40") { + return <> + } + + const cluster = ( +
+
+ Cluster: +
+
+
+ + + { + serverSetting.updateServerSettings({ ...serverSetting.serverSetting, clusterInferRatio: Number(e.target.value) }) + }}> + + {serverSetting.serverSetting.clusterInferRatio} +
+ +
+
+ ) + + + const noise = ( +
+
+ Noise: +
+
+
+ + + { + serverSetting.updateServerSettings({ ...serverSetting.serverSetting, noiseScale: Number(e.target.value) }) + }}> + + {serverSetting.serverSetting.noiseScale} +
+ +
+
+ ) + + + return ( + <> + {cluster} + {noise} + + ) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]) + + + return settingArea +} \ No newline at end of file diff --git a/client/demo/src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx b/client/demo/src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx new file mode 100644 index 00000000..d6ab9495 --- /dev/null +++ b/client/demo/src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx @@ -0,0 +1,81 @@ +import React, { useMemo } from "react" +import { useAppState } from "../../../001_provider/001_AppStateProvider" + +export type DDSPSVC30SettingAreaProps = { +} + + +export const DDSPSVC30SettingArea = (_props: DDSPSVC30SettingAreaProps) => { + const { serverSetting } = useAppState() + + const selected = useMemo(() => { + if (serverSetting.serverSetting.modelSlotIndex == undefined) { + return + } + return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex] + }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]) + + + + const settingArea = useMemo(() => { + if (!selected) { + return <> + } + + if (selected.voiceChangerType != "DDSP-SVC") { + return <> + } + + const acc = ( +
+
+ ACC: +
+
+
+ + + { + serverSetting.updateServerSettings({ ...serverSetting.serverSetting, diffAcc: Number(e.target.value) }) + }}> + + {serverSetting.serverSetting.diffAcc} +
+ +
+
+ ) + + + const kstep = ( +
+
+ Kstep: +
+
+
+ + + { + serverSetting.updateServerSettings({ ...serverSetting.serverSetting, kStep: Number(e.target.value) }) + }}> + + {serverSetting.serverSetting.kStep} +
+ +
+
+ ) + + + return ( + <> + {acc} + {kstep} + + ) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, selected]) + + + return settingArea +} \ No newline at end of file diff --git a/client/demo/src/components/demo/components2/101_CharacterArea.tsx b/client/demo/src/components/demo/components2/101_CharacterArea.tsx index 9d955706..06bd003a 100644 --- a/client/demo/src/components/demo/components2/101_CharacterArea.tsx +++ b/client/demo/src/components/demo/components2/101_CharacterArea.tsx @@ -3,6 +3,12 @@ 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" +import { SpeakerArea } from "./101-3_SpeakerArea" +import { F0FactorArea } from "./101-4_F0FactorArea" +import { SoVitsSVC40SettingArea } from "./101-5_so-vits-svc40SettingArea" +import { DDSPSVC30SettingArea } from "./101-6_ddsp-svc30SettingArea" export type CharacterAreaProps = { } @@ -178,60 +184,6 @@ export const CharacterArea = (_props: CharacterAreaProps) => { ) }, [serverSetting.serverSetting, clientSetting.clientSetting, clientSetting.updateClientSetting, serverSetting.updateServerSettings]) - const tuningCotrol = useMemo(() => { - const currentTuning = serverSetting.serverSetting.tran - const tranValueUpdatedAction = async (val: number) => { - await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, tran: val }) - } - - return ( -
-
- TUNE: -
-
-
- - - { - tranValueUpdatedAction(Number(e.target.value)) - }}> - - {currentTuning} -
- -
-
- ) - }, [serverSetting.serverSetting, clientSetting.updateClientSetting]) - - - const indexCotrol = useMemo(() => { - const currentIndexRatio = serverSetting.serverSetting.indexRatio - const indexRatioValueUpdatedAction = async (val: number) => { - await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, indexRatio: val }) - } - - return ( -
-
- INDEX: -
-
-
- - - { - indexRatioValueUpdatedAction(Number(e.target.value)) - }}> - - {currentIndexRatio} -
- -
-
- ) - }, [serverSetting.serverSetting, clientSetting.updateClientSetting]) const modelSlotControl = useMemo(() => { @@ -261,7 +213,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => { } - const exportOnnx = selected.modelFile.endsWith("pth") ? ( + const exportOnnx = selected.voiceChangerType == "RVC" && selected.modelFile.endsWith("pth") ? (
{messageBuilderState.getMessage(__filename, "export_to_onnx")}
) : <> return ( @@ -286,13 +238,17 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
{startControl} {gainControl} - {tuningCotrol} - {indexCotrol} + + + + + + {modelSlotControl}
) - }, [portrait, startControl, gainControl, tuningCotrol, modelSlotControl]) + }, [portrait, startControl, gainControl, modelSlotControl]) return characterArea } \ No newline at end of file diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css index bf4eddef..56841f1f 100644 --- a/client/demo/src/css/App.css +++ b/client/demo/src/css/App.css @@ -870,7 +870,8 @@ body { } } - .file-uploader-voice-changer-select { + .file-uploader-voice-changer-select, + .edit-model-slot-title { font-size: 1rem; padding-left: 0.5rem; } @@ -923,6 +924,39 @@ body { } } } + .edit-model-slot-row { + display: flex; + flex-direction: row; + .edit-model-slot-title { + } + .edit-model-slot-speakers { + display: flex; + flex-direction: row; + margin: 0px 0px 0px 1rem; + .edit-model-slot-speakers-id-label, + .edit-model-slot-speakers-name-label { + margin: 0px 0px 0px 0.5rem; + } + .edit-model-slot-speakers-buttons { + margin: 0px 0px 0px 0.5rem; + display: flex; + flex-direction: row; + .edit-model-slot-speakers-button { + margin: 0px 0.5rem 0px 0.5rem; + user-select: none; + border: solid 1px #999; + border-radius: 2px; + cursor: pointer; + vertical-align: middle; + text-align: center; + padding: 0px 10px 0px 10px; + &:hover { + border: solid 1px #000; + } + } + } + } + } } } } @@ -1250,8 +1284,9 @@ body { } } } + .character-area-control-title { - width: 3rem; + width: 4rem; font-weight: 700; } .character-area-control-field { diff --git a/client/lib/src/const.ts b/client/lib/src/const.ts index dfbd1571..7a93b275 100644 --- a/client/lib/src/const.ts +++ b/client/lib/src/const.ts @@ -217,6 +217,7 @@ type ModelSlot = { credit: string, termsOfUseUrl: string, iconFile: string + speakers: { [key: number]: string } } export type RVCModelSlot = ModelSlot & { @@ -240,6 +241,7 @@ export type MMVCv13ModelSlot = ModelSlot & { dstId: number samplingRate: number + speakers: { [key: number]: string } } export type MMVCv15ModelSlot = ModelSlot & { @@ -249,6 +251,7 @@ export type MMVCv15ModelSlot = ModelSlot & { dstId: number f0Factor: number samplingRate: number + } export type SoVitsSvc40ModelSlot = ModelSlot & { @@ -262,6 +265,7 @@ export type SoVitsSvc40ModelSlot = ModelSlot & { defaultTune: number defaultClusterInferRatio: number noiseScale: number + speakers: { [key: number]: string } } export type DDSPSVCModelSlot = ModelSlot & { @@ -278,6 +282,7 @@ export type DDSPSVCModelSlot = ModelSlot & { diffusion: boolean acc: number kstep: number + speakers: { [key: number]: string } } export type ModelSlotUnion = RVCModelSlot | MMVCv13ModelSlot | MMVCv15ModelSlot | SoVitsSvc40ModelSlot | DDSPSVCModelSlot diff --git a/server/data/ModelSlot.py b/server/data/ModelSlot.py index 5ed0b0c8..b667f0d8 100644 --- a/server/data/ModelSlot.py +++ b/server/data/ModelSlot.py @@ -1,7 +1,7 @@ from typing import TypeAlias, Union from const import MAX_SLOT_NUM, EnumInferenceTypes, EnumEmbedderTypes, VoiceChangerType -from dataclasses import dataclass, asdict +from dataclasses import dataclass, asdict, field import os import json @@ -15,6 +15,7 @@ class ModelSlot: credit: str = "" termsOfUseUrl: str = "" iconFile: str = "" + speakers: dict = field(default_factory=lambda: {}) @dataclass @@ -36,6 +37,7 @@ class RVCModelSlot(ModelSlot): embedder: str = EnumEmbedderTypes.hubert.value sampleId: str = "" + speakers: dict = field(default_factory=lambda: {0: "target"}) @dataclass @@ -47,6 +49,7 @@ class MMVCv13ModelSlot(ModelSlot): dstId: int = 100 isONNX: bool = False samplingRate: int = 24000 + speakers: dict = field(default_factory=lambda: {107: "user", 100: "zundamon", 101: "sora", 102: "methane", 103: "tsumugi"}) @dataclass @@ -59,6 +62,7 @@ class MMVCv15ModelSlot(ModelSlot): f0Factor: float = 1.0 isONNX: bool = False samplingRate: int = 24000 + speakers: dict = field(default_factory=lambda: {0: "user", 101: "zundamon", 102: "sora", 103: "methane", 104: "tsumugi"}) @dataclass @@ -75,6 +79,7 @@ class SoVitsSvc40ModelSlot(ModelSlot): defaultTune: int = 0 defaultClusterInferRatio: float = 0.0 noiseScale: float = 0.0 + speakers: dict = field(default_factory=lambda: {1: "user"}) @dataclass @@ -93,6 +98,7 @@ class DDSPSVCModelSlot(ModelSlot): diffusion: bool = True acc: int = 20 kstep: int = 100 + speakers: dict = field(default_factory=lambda: {1: "user"}) ModelSlots: TypeAlias = Union[ModelSlot, RVCModelSlot, MMVCv13ModelSlot, MMVCv15ModelSlot, SoVitsSvc40ModelSlot, DDSPSVCModelSlot] diff --git a/server/voice_changer/DDSP_SVC/SvcDDSP.py b/server/voice_changer/DDSP_SVC/SvcDDSP.py index e9e982b4..f6999d65 100644 --- a/server/voice_changer/DDSP_SVC/SvcDDSP.py +++ b/server/voice_changer/DDSP_SVC/SvcDDSP.py @@ -119,7 +119,6 @@ class SvcDDSP: audio_t = torch.from_numpy(audio).float().unsqueeze(0).to(self.device) # extract f0 - print("pitch_extractor_type", pitch_extractor_type) pitch_extractor = F0_Extractor(pitch_extractor_type, sample_rate, hop_size, float(f0_min), float(f0_max)) f0 = pitch_extractor.extract(audio, uv_interp=True, device=self.device, silence_front=silence_front) f0 = torch.from_numpy(f0).float().to(self.device).unsqueeze(-1).unsqueeze(0) diff --git a/server/voice_changer/DDSP_SVC/models/ddsp/vocoder.py b/server/voice_changer/DDSP_SVC/models/ddsp/vocoder.py index ffa3db0c..68448b63 100644 --- a/server/voice_changer/DDSP_SVC/models/ddsp/vocoder.py +++ b/server/voice_changer/DDSP_SVC/models/ddsp/vocoder.py @@ -1,6 +1,6 @@ import os import numpy as np -import yaml +import yaml # type: ignore import torch import torch.nn.functional as F import pyworld as pw @@ -72,7 +72,7 @@ class F0_Extractor: f0 = np.pad(f0, (start_frame, 0)) else: - raise ValueError(f" [x] Unknown f0 extractor: {f0_extractor}") + raise ValueError(f" [x] Unknown f0 extractor: {f0_extractor}") # NOQA # type: ignore # interpolate the unvoiced f0 if uv_interp: @@ -410,12 +410,12 @@ class Audio2HubertLarge1024L24: class DotDict(dict): - def __getattr__(*args): + def __getattr__(*args): # type: ignore val = dict.get(*args) return DotDict(val) if type(val) is dict else val - __setattr__ = dict.__setitem__ - __delattr__ = dict.__delitem__ + __setattr__ = dict.__setitem__ # type: ignore + __delattr__ = dict.__delitem__ # type: ignore def load_model(model_path, device="cpu"): diff --git a/server/voice_changer/DDSP_SVC/models/diffusion/unit2mel.py b/server/voice_changer/DDSP_SVC/models/diffusion/unit2mel.py index ea0c2598..c898a06b 100644 --- a/server/voice_changer/DDSP_SVC/models/diffusion/unit2mel.py +++ b/server/voice_changer/DDSP_SVC/models/diffusion/unit2mel.py @@ -1,5 +1,5 @@ import os -import yaml +import yaml # type: ignore import torch import torch.nn as nn import numpy as np @@ -9,12 +9,12 @@ from .vocoder import Vocoder class DotDict(dict): - def __getattr__(*args): + def __getattr__(*args): # type: ignore val = dict.get(*args) return DotDict(val) if type(val) is dict else val - __setattr__ = dict.__setitem__ - __delattr__ = dict.__delitem__ + __setattr__ = dict.__setitem__ # type: ignore + __delattr__ = dict.__delitem__ # type: ignore def load_model_vocoder(model_path, device="cpu"): diff --git a/server/voice_changer/DDSP_SVC/models/diffusion/vocoder.py b/server/voice_changer/DDSP_SVC/models/diffusion/vocoder.py index 7a53099f..c1b403d1 100644 --- a/server/voice_changer/DDSP_SVC/models/diffusion/vocoder.py +++ b/server/voice_changer/DDSP_SVC/models/diffusion/vocoder.py @@ -1,7 +1,7 @@ import torch from torchaudio.transforms import Resample -from ..nsf_hifigan.nvSTFT import STFT -from ..nsf_hifigan.models import load_model, load_config +from ..nsf_hifigan.nvSTFT import STFT # type: ignore +from ..nsf_hifigan.models import load_model, load_config # type: ignore class Vocoder: diff --git a/server/voice_changer/ModelSlotManager.py b/server/voice_changer/ModelSlotManager.py index b6bfbe05..f589ce10 100644 --- a/server/voice_changer/ModelSlotManager.py +++ b/server/voice_changer/ModelSlotManager.py @@ -40,11 +40,13 @@ class ModelSlotManager: print("[Voice Changer] UPDATE MODEL INFO", newData) newDataDict = json.loads(newData) slotInfo = self._load_model_slot(newDataDict["slot"]) - setattr(slotInfo, newDataDict["key"], newDataDict["val"]) + if newDataDict["key"] == "speakers": + setattr(slotInfo, newDataDict["key"], json.loads(newDataDict["val"])) + else: + setattr(slotInfo, newDataDict["key"], newDataDict["val"]) self._save_model_slot(newDataDict["slot"], slotInfo) def store_model_assets(self, params: str): - print("[Voice Changer] UPLOAD ASSETS", params) paramsDict = json.loads(params) uploadPath = os.path.join(UPLOAD_DIR, paramsDict["file"]) storeDir = os.path.join(self.model_dir, str(paramsDict["slot"]))