From c7e72e52dba55fb9ecac1196a95029c7e4bd7423 Mon Sep 17 00:00:00 2001 From: wataru Date: Wed, 21 Jun 2023 03:32:18 +0900 Subject: [PATCH] WIP: integrate vcs to new gui 2 --- client/demo/dist/index.js | 10 ++-- .../src/components/demo/904-1_MainScreen.tsx | 44 +++++++++++++++-- .../demo/904-2_SampleDownloader.tsx | 19 +++++-- .../components/demo/904-3_FileUploader.tsx | 24 +++++++-- .../components/demo/905_MergeLabDialog.tsx | 18 +++++-- client/demo/src/css/App.css | 35 ++++++++++--- client/lib/src/const.ts | 49 ++++++++++++++++++- 7 files changed, 166 insertions(+), 33 deletions(-) diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index 3d2075fe..253e40ee 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 }, []);\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 }, \"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 {\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 }, \"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 }, \"DL 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, \"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?"); /***/ }), @@ -323,7 +323,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 */ SampleDownloaderScreen: () => (/* binding */ SampleDownloaderScreen)\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\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 SampleDownloaderScreen = function SampleDownloaderScreen(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)(\"All\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n lang = _useState2[0],\n setLang = _useState2[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, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n }, []);\n\n /////////////////////////////////////////\n // Sample Downloader\n /////////////////////////////////////////\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (props.screen != \"SampleDownloader\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n if (!serverSetting.serverSetting.modelSlots) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var langs = serverSetting.serverSetting.sampleModels.reduce(function (prev, cur) {\n if (prev.includes(cur.lang) == false) {\n prev.push(cur.lang);\n }\n return prev;\n }, [\"All\"]);\n var langOptions = langs.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 onDownloadSampleClicked = /*#__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(id) {\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 serverSetting.fileUploadSettings[props.targetIndex] = _objectSpread(_objectSpread({}, _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.InitialFileUploadSetting), {}, {\n rvcModel: null,\n rvcIndex: null,\n sampleId: id,\n isSampleMode: true\n });\n _context.prev = 1;\n _context.next = 4;\n return serverSetting.loadModel(props.targetIndex);\n case 4:\n _context.next = 9;\n break;\n case 6:\n _context.prev = 6;\n _context.t0 = _context[\"catch\"](1);\n alert(_context.t0);\n case 9:\n props.backToSlotManager();\n // setMode(\"localFile\")\n case 10:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[1, 6]]);\n }));\n return function onDownloadSampleClicked(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n var options = serverSetting.serverSetting.sampleModels.filter(function (x) {\n return lang == \"All\" ? true : x.lang == lang;\n }).map(function (x, index) {\n var termOfUseUrlLink = x.termsOfUseUrl && x.termsOfUseUrl.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"a\", {\n href: x.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_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: index,\n className: \"model-slot\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n src: x.icon,\n className: \"model-slot-icon\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"name:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, x.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"\"\n }, termOfUseUrlLink)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"info: \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, x.modelType, \",\", x.f0 ? \"f0\" : \"nof0\", \",\", x.sampleRate), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"\"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n onDownloadSampleClicked(x.id);\n }\n }, \"download\")));\n });\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 }, \"Sample Downloader\"), /*#__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: \"model-slot-header\"\n }, \"Select Sample for Slot[\", props.targetIndex, \"] \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n onClick: function onClick() {\n props.backToSlotManager();\n },\n className: \"model-slot-header-button\"\n }, \"< (/* binding */ SampleDownloaderScreen)\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\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 SampleDownloaderScreen = function SampleDownloaderScreen(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)(\"All\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n lang = _useState2[0],\n setLang = _useState2[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\": \"Download Sample for\"\n });\n messageBuilderState.setMessage(__filename, \"lang\", {\n \"ja\": \"言語\",\n \"en\": \"Lang\"\n });\n messageBuilderState.setMessage(__filename, \"back\", {\n \"ja\": \"戻る\",\n \"en\": \"back\"\n });\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"download\", {\n \"ja\": \"ダウンロード\",\n \"en\": \"download\"\n });\n }, []);\n\n /////////////////////////////////////////\n // Sample Downloader\n /////////////////////////////////////////\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (props.screen != \"SampleDownloader\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n if (!serverSetting.serverSetting.modelSlots) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var langs = serverSetting.serverSetting.sampleModels.reduce(function (prev, cur) {\n if (prev.includes(cur.lang) == false) {\n prev.push(cur.lang);\n }\n return prev;\n }, [\"All\"]);\n var langOptions = langs.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 onDownloadSampleClicked = /*#__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(id) {\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 serverSetting.fileUploadSettings[props.targetIndex] = _objectSpread(_objectSpread({}, _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.InitialFileUploadSetting), {}, {\n rvcModel: null,\n rvcIndex: null,\n sampleId: id,\n isSampleMode: true\n });\n _context.prev = 1;\n _context.next = 4;\n return serverSetting.loadModel(props.targetIndex);\n case 4:\n _context.next = 9;\n break;\n case 6:\n _context.prev = 6;\n _context.t0 = _context[\"catch\"](1);\n alert(_context.t0);\n case 9:\n props.backToSlotManager();\n // setMode(\"localFile\")\n case 10:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[1, 6]]);\n }));\n return function onDownloadSampleClicked(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n var options = serverSetting.serverSetting.sampleModels.filter(function (x) {\n return lang == \"All\" ? true : x.lang == lang;\n }).map(function (x, index) {\n var termOfUseUrlLink = x.termsOfUseUrl && x.termsOfUseUrl.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"a\", {\n href: x.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_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: index,\n className: \"model-slot\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n src: x.icon,\n className: \"model-slot-icon\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"name:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, x.name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"\"\n }, termOfUseUrlLink)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"info: \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, x.modelType, \",\", x.f0 ? \"f0\" : \"nof0\", \",\", x.sampleRate), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"\"\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n onDownloadSampleClicked(x.id);\n }\n }, messageBuilderState.getMessage(__filename, \"download\"))));\n });\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 }, \"Sample Downloader\"), /*#__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: \"model-slot-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: \"model-slot-header-button\"\n }, \"<<\", messageBuilderState.getMessage(__filename, \"back\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", null, messageBuilderState.getMessage(__filename, \"lang\"), \":\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n value: lang,\n onChange: function onChange(e) {\n setLang(e.target.value);\n }\n }, langOptions)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"model-slot-container\"\n }, options)));\n }, [props.screen, props.targetIndex, lang, serverSetting.serverSetting]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-2_SampleDownloader.tsx?"); /***/ }), @@ -334,7 +334,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 */ 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, \"select\", {\n \"ja\": \"ファイル選択\",\n \"en\": \"select file\"\n });\n messageBuilderState.setMessage(__filename, \"upload\", {\n \"ja\": \"アップロード\",\n \"en\": \"upload\"\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 });\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 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 }, \"Upload Files for 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 }, \"< (/* 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 });\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?"); /***/ }), @@ -356,7 +356,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__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 */ MergeLabDialog: () => (/* binding */ MergeLabDialog)\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 _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\n\n\n\nvar MergeLabDialog = function MergeLabDialog() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__.useGuiState)();\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(\"\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState, 2),\n currentFilter = _useState2[0],\n setCurrentFilter = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState3, 2),\n mergeElements = _useState4[0],\n setMergeElements = _useState4[1];\n\n // スロットが変更されたときの初期化処理\n var newSlotChangeKey = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (!serverSetting.serverSetting.modelSlots) {\n return \"\";\n }\n return serverSetting.serverSetting.modelSlots.reduce(function (prev, cur) {\n return prev + \"_\" + cur.modelFile;\n }, \"\");\n }, [serverSetting.serverSetting.modelSlots]);\n var filterItems = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n return serverSetting.serverSetting.modelSlots.reduce(function (prev, cur) {\n var key = \"\".concat(cur.modelType, \",\").concat(cur.samplingRate, \",\").concat(cur.embChannels);\n var val = {\n type: cur.modelType,\n samplingRate: cur.samplingRate,\n embChannels: cur.embChannels\n };\n var existKeys = Object.keys(prev);\n if (!cur.modelFile || cur.modelFile.length == 0) {\n return prev;\n }\n if (cur.modelType == \"onnxRVC\" || cur.modelType == \"onnxRVCNono\") {\n return prev;\n }\n if (!existKeys.includes(key)) {\n prev[key] = val;\n }\n return prev;\n }, {});\n }, [newSlotChangeKey]);\n var models = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n return serverSetting.serverSetting.modelSlots.filter(function (x) {\n var filterVals = filterItems[currentFilter];\n if (!filterVals) {\n return false;\n }\n if (x.modelType == filterVals.type && x.samplingRate == filterVals.samplingRate && x.embChannels == filterVals.embChannels) {\n return true;\n } else {\n return false;\n }\n });\n }, [filterItems, currentFilter]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {\n if (Object.keys(filterItems).length > 0) {\n setCurrentFilter(Object.keys(filterItems)[0]);\n }\n }, [filterItems]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {\n var newMergeElements = models.map(function (x) {\n return {\n filename: x.modelFile,\n strength: 0\n };\n });\n setMergeElements(newMergeElements);\n }, [models]);\n var dialog = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n var closeButtonRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-row split-3-4-3 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-button-container body-button-container-space-around\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: function onClick() {\n guiState.stateControls.showMergeLabCheckbox.updateState(false);\n }\n }, \"close\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-item-text\"\n }));\n var filterOptions = Object.keys(filterItems).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n }).filter(function (x) {\n return x != null;\n });\n var onMergeElementsChanged = function onMergeElementsChanged(filename, strength) {\n var newMergeElements = mergeElements.map(function (x) {\n if (x.filename == filename) {\n return {\n filename: x.filename,\n strength: strength\n };\n } else {\n return x;\n }\n });\n setMergeElements(newMergeElements);\n };\n var onMergeClicked = function onMergeClicked() {\n serverSetting.mergeModel({\n command: \"mix\",\n defaultTune: 0,\n defaultIndexRatio: 1,\n defaultProtect: 0.5,\n files: mergeElements\n });\n };\n var modelList = mergeElements.map(function (x, index) {\n var _models$find;\n var name = ((_models$find = models.find(function (model) {\n return model.modelFile == x.filename;\n })) === null || _models$find === void 0 ? void 0 : _models$find.name) || \"\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n key: index,\n className: \"merge-lab-model-item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n type: \"range\",\n className: \"body-item-input-slider\",\n min: \"0\",\n max: \"100\",\n step: \"1\",\n value: x.strength,\n onChange: function onChange(e) {\n onMergeElementsChanged(x.filename, Number(e.target.value));\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"body-item-input-slider-val\"\n }, x.strength)));\n });\n var content = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-type-filter\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, \"Type:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n value: currentFilter,\n onChange: function onChange(e) {\n setCurrentFilter(e.target.value);\n }\n }, filterOptions))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-manipulator\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-model-list\"\n }, modelList), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-merge-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-merge-buttons-notice\"\n }, \"The merged model is stored in the final slot. If you assign this slot, it will be overwritten.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-merge-button\",\n onClick: onMergeClicked\n }, \"merge\"))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"MergeLab\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-content\"\n }, content, closeButtonRow));\n }, [newSlotChangeKey, currentFilter, mergeElements, models]);\n return dialog;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/905_MergeLabDialog.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MergeLabDialog: () => (/* binding */ MergeLabDialog)\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 _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\n\n\n\nvar MergeLabDialog = function MergeLabDialog() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__.useGuiState)();\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(\"\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState, 2),\n currentFilter = _useState2[0],\n setCurrentFilter = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState3, 2),\n mergeElements = _useState4[0],\n setMergeElements = _useState4[1];\n\n // スロットが変更されたときの初期化処理\n var newSlotChangeKey = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n if (!serverSetting.serverSetting.modelSlots) {\n return \"\";\n }\n return serverSetting.serverSetting.modelSlots.reduce(function (prev, cur) {\n return prev + \"_\" + cur.modelFile;\n }, \"\");\n }, [serverSetting.serverSetting.modelSlots]);\n var filterItems = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n return serverSetting.serverSetting.modelSlots.reduce(function (prev, cur) {\n if (cur.voiceChangerType != \"RVC\") {\n return prev;\n }\n var curRVC = cur;\n var key = \"\".concat(curRVC.modelType, \",\").concat(cur.samplingRate, \",\").concat(curRVC.embChannels);\n var val = {\n type: curRVC.modelType,\n samplingRate: cur.samplingRate,\n embChannels: curRVC.embChannels\n };\n var existKeys = Object.keys(prev);\n if (!cur.modelFile || cur.modelFile.length == 0) {\n return prev;\n }\n if (curRVC.modelType == \"onnxRVC\" || curRVC.modelType == \"onnxRVCNono\") {\n return prev;\n }\n if (!existKeys.includes(key)) {\n prev[key] = val;\n }\n return prev;\n }, {});\n }, [newSlotChangeKey]);\n var models = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n return serverSetting.serverSetting.modelSlots.filter(function (x) {\n if (x.voiceChangerType != \"RVC\") {\n return;\n }\n var xRVC = x;\n var filterVals = filterItems[currentFilter];\n if (!filterVals) {\n return false;\n }\n if (xRVC.modelType == filterVals.type && xRVC.samplingRate == filterVals.samplingRate && xRVC.embChannels == filterVals.embChannels) {\n return true;\n } else {\n return false;\n }\n });\n }, [filterItems, currentFilter]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {\n if (Object.keys(filterItems).length > 0) {\n setCurrentFilter(Object.keys(filterItems)[0]);\n }\n }, [filterItems]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {\n var newMergeElements = models.map(function (x) {\n return {\n filename: x.modelFile,\n strength: 0\n };\n });\n setMergeElements(newMergeElements);\n }, [models]);\n var dialog = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n var closeButtonRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-row split-3-4-3 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-button-container body-button-container-space-around\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: function onClick() {\n guiState.stateControls.showMergeLabCheckbox.updateState(false);\n }\n }, \"close\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"body-item-text\"\n }));\n var filterOptions = Object.keys(filterItems).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n }).filter(function (x) {\n return x != null;\n });\n var onMergeElementsChanged = function onMergeElementsChanged(filename, strength) {\n var newMergeElements = mergeElements.map(function (x) {\n if (x.filename == filename) {\n return {\n filename: x.filename,\n strength: strength\n };\n } else {\n return x;\n }\n });\n setMergeElements(newMergeElements);\n };\n var onMergeClicked = function onMergeClicked() {\n serverSetting.mergeModel({\n command: \"mix\",\n defaultTune: 0,\n defaultIndexRatio: 1,\n defaultProtect: 0.5,\n files: mergeElements\n });\n };\n var modelList = mergeElements.map(function (x, index) {\n var _models$find;\n var name = ((_models$find = models.find(function (model) {\n return model.modelFile == x.filename;\n })) === null || _models$find === void 0 ? void 0 : _models$find.name) || \"\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n key: index,\n className: \"merge-lab-model-item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n type: \"range\",\n className: \"body-item-input-slider\",\n min: \"0\",\n max: \"100\",\n step: \"1\",\n value: x.strength,\n onChange: function onChange(e) {\n onMergeElementsChanged(x.filename, Number(e.target.value));\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n className: \"body-item-input-slider-val\"\n }, x.strength)));\n });\n var content = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-type-filter\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, \"Type:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n value: currentFilter,\n onChange: function onChange(e) {\n setCurrentFilter(e.target.value);\n }\n }, filterOptions))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-manipulator\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-model-list\"\n }, modelList), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-merge-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-merge-buttons-notice\"\n }, \"The merged model is stored in the final slot. If you assign this slot, it will be overwritten.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"merge-lab-merge-button\",\n onClick: onMergeClicked\n }, \"merge\"))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"MergeLab\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-content\"\n }, content, closeButtonRow));\n }, [newSlotChangeKey, currentFilter, mergeElements, models]);\n return dialog;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/905_MergeLabDialog.tsx?"); /***/ }), @@ -1258,7 +1258,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 }\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;\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 }\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: 15%;\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: 60%;\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: 60%;\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: 60%;\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: 60%;\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 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: 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;\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, .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"); /***/ }), diff --git a/client/demo/src/components/demo/904-1_MainScreen.tsx b/client/demo/src/components/demo/904-1_MainScreen.tsx index 92436886..35ad5c7d 100644 --- a/client/demo/src/components/demo/904-1_MainScreen.tsx +++ b/client/demo/src/components/demo/904-1_MainScreen.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from "react"; import { useGuiState } from "./001_GuiStateProvider"; import { useAppState } from "../../001_provider/001_AppStateProvider"; -import { RVCModelSlot, fileSelector } from "@dannadori/voice-changer-client-js"; +import { DDSPSVCModelSlot, MMVCv13ModelSlot, MMVCv15ModelSlot, RVCModelSlot, SoVitsSvc40ModelSlot, fileSelector } from "@dannadori/voice-changer-client-js"; import { useMessageBuilder } from "../../hooks/useMessageBuilder"; import { ModelSlotManagerDialogScreen } from "./904_ModelSlotManagerDialog"; import { checkExtention, trimfileName } from "../../utils/utils"; @@ -23,6 +23,9 @@ export const MainScreen = (props: MainScreenProps) => { messageBuilderState.setMessage(__filename, "rename", { "ja": "リネーム", "en": "rename" }) messageBuilderState.setMessage(__filename, "download", { "ja": "ダウンロード", "en": "download" }) 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, "close", { "ja": "閉じる", "en": "close" }) }, []) @@ -85,7 +88,9 @@ export const MainScreen = (props: MainScreenProps) => {
-
{ props.close() }} >close
+
{ props.close() }} > + {messageBuilderState.getMessage(__filename, "close")} +
@@ -167,6 +172,37 @@ export const MainScreen = (props: MainScreenProps) => { fileRows.push(generateFileRow("model", slotInfo.modelFile)) fileRows.push(generateFileRow("index", slotInfo.indexFile)) infoRow = generateInfoRow(`${slotInfo.f0 ? "f0" : "nof0"}, ${slotInfo.samplingRate}, ${slotInfo.embChannels}, ${slotInfo.modelType}, ${slotInfo.defaultTune}, ${slotInfo.defaultIndexRatio}, ${slotInfo.defaultProtect}`) + } else if (x.voiceChangerType == "MMVCv13") { + const slotInfo = x as MMVCv13ModelSlot + iconArea = generateIconArea(index, slotInfo.iconFile, true) + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) + fileRows.push(generateFileRow("config", slotInfo.configFile)) + fileRows.push(generateFileRow("model", slotInfo.modelFile)) + infoRow = generateInfoRow(``) + } else if (x.voiceChangerType == "MMVCv15") { + const slotInfo = x as MMVCv15ModelSlot + iconArea = generateIconArea(index, slotInfo.iconFile, true) + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) + fileRows.push(generateFileRow("config", slotInfo.configFile)) + fileRows.push(generateFileRow("model", slotInfo.modelFile)) + infoRow = generateInfoRow((`f0factor:${slotInfo.f0Factor}`)) + } else if (x.voiceChangerType == "so-vits-svc-40") { + const slotInfo = x as SoVitsSvc40ModelSlot + iconArea = generateIconArea(index, slotInfo.iconFile, true) + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) + fileRows.push(generateFileRow("config", slotInfo.configFile)) + fileRows.push(generateFileRow("model", slotInfo.modelFile)) + fileRows.push(generateFileRow("cluster", slotInfo.clusterFile)) + infoRow = generateInfoRow((`tune:${slotInfo.defaultTune},cluster:${slotInfo.defaultClusterInferRatio},noise:${slotInfo.noiseScale}`)) + } else if (x.voiceChangerType == "DDSP-SVC") { + const slotInfo = x as DDSPSVCModelSlot + iconArea = generateIconArea(index, slotInfo.iconFile, true) + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) + fileRows.push(generateFileRow("config", slotInfo.configFile)) + fileRows.push(generateFileRow("model", slotInfo.modelFile)) + fileRows.push(generateFileRow("diff conf", slotInfo.diffConfigFile)) + fileRows.push(generateFileRow("diff model", slotInfo.diffModelFile)) + infoRow = generateInfoRow((`tune:${slotInfo.defaultTune},acc:${slotInfo.acc},ks:${slotInfo.kstep}, diff:${slotInfo.diffusion},enh:${slotInfo.enhancer}`)) } else { iconArea = generateIconArea(index, "/assets/icons/blank.png", false) nameRow = generateNameRow(index, "", "") @@ -181,8 +217,8 @@ export const MainScreen = (props: MainScreenProps) => { {infoRow}
-
{ props.openFileUploader(index) }} >upload
-
{ props.openSampleDownloader(index) }} >DL sample
+
{ props.openFileUploader(index) }} >{messageBuilderState.getMessage(__filename, "upload")}
+
{ props.openSampleDownloader(index) }} >{messageBuilderState.getMessage(__filename, "sample")}
) diff --git a/client/demo/src/components/demo/904-2_SampleDownloader.tsx b/client/demo/src/components/demo/904-2_SampleDownloader.tsx index 54b83f14..499c66c4 100644 --- a/client/demo/src/components/demo/904-2_SampleDownloader.tsx +++ b/client/demo/src/components/demo/904-2_SampleDownloader.tsx @@ -17,7 +17,11 @@ export const SampleDownloaderScreen = (props: SampleDownloaderScreenProps) => { const [lang, setLang] = useState("All") const messageBuilderState = useMessageBuilder() useMemo(() => { + messageBuilderState.setMessage(__filename, "header_message", { "ja": "サンプルをダウンロードしてください. 対象：", "en": "Download Sample for" }) + messageBuilderState.setMessage(__filename, "lang", { "ja": "言語", "en": "Lang" }) + messageBuilderState.setMessage(__filename, "back", { "ja": "戻る", "en": "back" }) messageBuilderState.setMessage(__filename, "terms_of_use", { "ja": "利用規約", "en": "terms of use" }) + messageBuilderState.setMessage(__filename, "download", { "ja": "ダウンロード", "en": "download" }) }, []) @@ -82,7 +86,9 @@ export const SampleDownloaderScreen = (props: SampleDownloaderScreenProps) => {
-
{ onDownloadSampleClicked(x.id) }}>download
+
{ onDownloadSampleClicked(x.id) }}> + {messageBuilderState.getMessage(__filename, "download")} +
) @@ -93,10 +99,13 @@ export const SampleDownloaderScreen = (props: SampleDownloaderScreenProps) => {
Sample Downloader
-
Select Sample for Slot[{props.targetIndex}] { - props.backToSlotManager() - }} className="model-slot-header-button"><<back
-
Lang: +
+ {messageBuilderState.getMessage(__filename, "header_message")} Slot[{props.targetIndex}] + { props.backToSlotManager() }} className="model-slot-header-button"> + <<{messageBuilderState.getMessage(__filename, "back")} + +
+
{messageBuilderState.getMessage(__filename, "lang")}: diff --git a/client/demo/src/components/demo/904-3_FileUploader.tsx b/client/demo/src/components/demo/904-3_FileUploader.tsx index a6f95608..4faa41a3 100644 --- a/client/demo/src/components/demo/904-3_FileUploader.tsx +++ b/client/demo/src/components/demo/904-3_FileUploader.tsx @@ -19,8 +19,11 @@ export const FileUploaderScreen = (props: FileUploaderScreenProps) => { const messageBuilderState = useMessageBuilder() useMemo(() => { + messageBuilderState.setMessage(__filename, "header_message", { "ja": "ファイルをアップロードしてください. 対象：", "en": "Upload Files for " }) + messageBuilderState.setMessage(__filename, "back", { "ja": "戻る", "en": "back" }) messageBuilderState.setMessage(__filename, "select", { "ja": "ファイル選択", "en": "select file" }) messageBuilderState.setMessage(__filename, "upload", { "ja": "アップロード", "en": "upload" }) + messageBuilderState.setMessage(__filename, "uploading", { "ja": "アップロード中", "en": "uploading" }) messageBuilderState.setMessage(__filename, "alert-model-ext", { "ja": "ファイルの拡張子は次のモノである必要があります。", "en": "extension of file should be the following." @@ -132,13 +135,20 @@ export const FileUploaderScreen = (props: FileUploaderScreenProps) => { } const fileRows = generateFileRowsByVCType(voiceChangerType) + // appState.serverSetting.uploadProgress == 0 ? `loading model...(wait about 20sec)` : `processing.... ${appState.serverSetting.uploadProgress.toFixed(1)}%` : "" + + const buttonLabel = serverSetting.uploadProgress == 0 ? + messageBuilderState.getMessage(__filename, "upload") : + messageBuilderState.getMessage(__filename, "uploading") + `(${serverSetting.uploadProgress.toFixed(1)}%)` return (
File Uploader
-
Upload Files for Slot[{props.targetIndex}] { - props.backToSlotManager() - }} className="file-uploader-header-button"><<back
+
+ {messageBuilderState.getMessage(__filename, "header_message")} Slot[{props.targetIndex}] + { + props.backToSlotManager() + }} className="file-uploader-header-button"><<{messageBuilderState.getMessage(__filename, "back")}
VoiceChangerType: