diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index 821340329..648f75ab7 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -290,7 +290,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 */ ModelSlotArea: () => (/* binding */ ModelSlotArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\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 ModelSlotArea = function ModelSlotArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n getInfo = _useAppState.getInfo;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_5__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"edit\", {\n \"ja\": \"編集\",\n \"en\": \"edit\"\n });\n }, []);\n var modelTiles = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (!serverSetting.serverSetting.modelSlots) {\n return [];\n }\n return serverSetting.serverSetting.modelSlots.map(function (x, index) {\n if (!x.modelFile || x.modelFile.length == 0) {\n return null;\n }\n var tileContainerClass = index == serverSetting.serverSetting.modelSlotIndex ? \"model-slot-tile-container-selected\" : \"model-slot-tile-container\";\n var name = x.name.length > 8 ? x.name.substring(0, 7) + \"...\" : x.name;\n var iconElem = x.iconFile.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"img\", {\n className: \"model-slot-tile-icon\",\n src: x.iconFile,\n alt: x.name\n }) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-no-entry\"\n }, \"no image\");\n var clickAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\n var dummyModelSlotIndex;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n dummyModelSlotIndex = Math.floor(Date.now() / 1000) * 1000 + index;\n _context.next = 3;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n modelSlotIndex: dummyModelSlotIndex\n }));\n case 3:\n setTimeout(function () {\n // quick hack\n getInfo();\n }, 1000 * 2);\n case 4:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function clickAction() {\n return _ref.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n key: index,\n className: tileContainerClass,\n onClick: clickAction\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-div\"\n }, iconElem), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-dscription\"\n }, name));\n }).filter(function (x) {\n return x != null;\n });\n }, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex]);\n var modelSlotArea = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n var onModelSlotEditClicked = function onModelSlotEditClicked() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(true);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-panel\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tiles-container\"\n }, modelTiles), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: onModelSlotEditClicked\n }, messageBuilderState.getMessage(__filename, \"edit\")))));\n }, [modelTiles]);\n return modelSlotArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/100_ModelSlotArea.tsx?"); +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModelSlotArea: () => (/* binding */ ModelSlotArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\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 ModelSlotArea = function ModelSlotArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n getInfo = _useAppState.getInfo;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_5__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"edit\", {\n \"ja\": \"編集\",\n \"en\": \"edit\"\n });\n }, []);\n var modelTiles = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n if (!serverSetting.serverSetting.modelSlots) {\n return [];\n }\n return serverSetting.serverSetting.modelSlots.map(function (x, index) {\n if (!x.modelFile || x.modelFile.length == 0) {\n return null;\n }\n var tileContainerClass = index == serverSetting.serverSetting.modelSlotIndex ? \"model-slot-tile-container-selected\" : \"model-slot-tile-container\";\n var name = x.name.length > 8 ? x.name.substring(0, 7) + \"...\" : x.name;\n var iconElem = x.iconFile.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"img\", {\n className: \"model-slot-tile-icon\",\n src: x.iconFile,\n alt: x.name\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-vctype\"\n }, x.voiceChangerType)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-no-entry\"\n }, \"no image\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-vctype\"\n }, x.voiceChangerType));\n var clickAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\n var dummyModelSlotIndex;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n dummyModelSlotIndex = Math.floor(Date.now() / 1000) * 1000 + index;\n _context.next = 3;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n modelSlotIndex: dummyModelSlotIndex\n }));\n case 3:\n setTimeout(function () {\n // quick hack\n getInfo();\n }, 1000 * 2);\n case 4:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function clickAction() {\n return _ref.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n key: index,\n className: tileContainerClass,\n onClick: clickAction\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-icon-div\"\n }, iconElem), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tile-dscription\"\n }, name));\n }).filter(function (x) {\n return x != null;\n });\n }, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex]);\n var modelSlotArea = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n var onModelSlotEditClicked = function onModelSlotEditClicked() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(true);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-panel\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-tiles-container\"\n }, modelTiles), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: onModelSlotEditClicked\n }, messageBuilderState.getMessage(__filename, \"edit\")))));\n }, [modelTiles]);\n return modelSlotArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/100_ModelSlotArea.tsx?"); /***/ }), @@ -367,7 +367,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CharacterArea: () => (/* binding */ CharacterArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _101_1_TuningArea__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./101-1_TuningArea */ \"./src/components/demo/components2/101-1_TuningArea.tsx\");\n/* harmony import */ var _101_2_IndexArea__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./101-2_IndexArea */ \"./src/components/demo/components2/101-2_IndexArea.tsx\");\n/* harmony import */ var _101_3_SpeakerArea__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./101-3_SpeakerArea */ \"./src/components/demo/components2/101-3_SpeakerArea.tsx\");\n/* harmony import */ var _101_4_F0FactorArea__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./101-4_F0FactorArea */ \"./src/components/demo/components2/101-4_F0FactorArea.tsx\");\n/* harmony import */ var _101_5_so_vits_svc40SettingArea__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./101-5_so-vits-svc40SettingArea */ \"./src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx\");\n/* harmony import */ var _101_6_ddsp_svc30SettingArea__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./101-6_ddsp-svc30SettingArea */ \"./src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\n\n\n\n\n\nvar CharacterArea = function CharacterArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n initializedRef = _useAppState.initializedRef,\n volume = _useAppState.volume,\n bufferingTime = _useAppState.bufferingTime,\n performance = _useAppState.performance,\n setting = _useAppState.setting,\n setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n start = _useAppState.start,\n stop = _useAppState.stop;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"export_to_onnx\", {\n \"ja\": \"onnx出力\",\n \"en\": \"export to onnx\"\n });\n messageBuilderState.setMessage(__filename, \"save_default\", {\n \"ja\": \"設定保存\",\n \"en\": \"save setting\"\n });\n messageBuilderState.setMessage(__filename, \"alert_onnx\", {\n \"ja\": \"ボイチェン中はonnx出力できません\",\n \"en\": \"cannot export onnx when voice conversion is enabled\"\n });\n }, []);\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var vol = document.getElementById(\"status-vol\");\n var buf = document.getElementById(\"status-buf\");\n var res = document.getElementById(\"status-res\");\n if (!vol || !buf || !res) {\n return;\n }\n vol.innerText = volume.toFixed(4);\n buf.innerText = bufferingTime.toString();\n res.innerText = performance.responseTime.toString();\n }, [volume, bufferingTime, performance]);\n var portrait = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var icon = selected.iconFile.length > 0 ? selected.iconFile : \"./assets/icons/human.png\";\n var selectedTermOfUseUrlLink = selected.termsOfUseUrl ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"a\", {\n href: selected.termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"portrait-area-terms-of-use-link\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"portrait\",\n src: icon,\n alt: selected.name\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-status\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"vol: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-vol\"\n }, \"0\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"buf: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-buf\"\n }, \"0\"), \" ms\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"res: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-res\"\n }, \"0\"), \" ms\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-terms-of-use\"\n }, selectedTermOfUseUrlLink)));\n }, [selected]);\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n startWithAudioContextCreate = _useState2[0],\n setStartWithAudioContextCreate = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (!startWithAudioContextCreate) {\n return;\n }\n guiState.setIsConverting(true);\n start();\n }, [startWithAudioContextCreate]);\n var startControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var onStartClicked = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context.next = 17;\n break;\n }\n if (initializedRef.current) {\n _context.next = 12;\n break;\n }\n case 2:\n if (false) {}\n _context.next = 5;\n return new Promise(function (resolve) {\n setTimeout(resolve, 500);\n });\n case 5:\n if (!initializedRef.current) {\n _context.next = 7;\n break;\n }\n return _context.abrupt(\"break\", 9);\n case 7:\n _context.next = 2;\n break;\n case 9:\n setStartWithAudioContextCreate(true);\n _context.next = 15;\n break;\n case 12:\n guiState.setIsConverting(true);\n _context.next = 15;\n return start();\n case 15:\n _context.next = 19;\n break;\n case 17:\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 1\n }));\n guiState.setIsConverting(true);\n case 19:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onStartClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onStopClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context2.next = 6;\n break;\n }\n guiState.setIsConverting(false);\n _context2.next = 4;\n return stop();\n case 4:\n _context2.next = 8;\n break;\n case 6:\n guiState.setIsConverting(false);\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 0\n }));\n case 8:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onStopClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var startClassName = guiState.isConverting ? \"character-area-control-button-active\" : \"character-area-control-button-stanby\";\n var stopClassName = guiState.isConverting ? \"character-area-control-button-stanby\" : \"character-area-control-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStopClicked,\n className: stopClassName\n }, \"stop\")));\n }, [guiState.isConverting, start, stop, serverSetting.serverSetting, serverSetting.updateServerSettings]);\n var gainControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain;\n var inputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n inputGain: val\n }));\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function (_x) {\n return _ref3.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function (_x2) {\n return _ref4.apply(this, arguments);\n };\n }();\n var currentOutputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.outputGain : serverSetting.serverSetting.serverOutputAudioGain;\n var outputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n _context5.next = 2;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n outputGain: val\n }));\n case 2:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function (_x3) {\n return _ref5.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n _context6.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function (_x4) {\n return _ref6.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"GAIN:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"in\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentInputGain,\n onChange: function onChange(e) {\n inputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentInputGain)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"out\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentOutputGain,\n onChange: function onChange(e) {\n outputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentOutputGain))));\n }, [serverSetting.serverSetting, setting, setVoiceChangerClientSetting, serverSetting.updateServerSettings]);\n var modelSlotControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onUpdateDefaultClicked = /*#__PURE__*/function () {\n var _ref7 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee7() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee7$(_context7) {\n while (1) switch (_context7.prev = _context7.next) {\n case 0:\n _context7.next = 2;\n return serverSetting.updateModelDefault();\n case 2:\n case \"end\":\n return _context7.stop();\n }\n }, _callee7);\n }));\n return function onUpdateDefaultClicked() {\n return _ref7.apply(this, arguments);\n };\n }();\n var onnxExportButtonAction = /*#__PURE__*/function () {\n var _ref8 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee8() {\n var _document$getElementB;\n var res, a;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee8$(_context8) {\n while (1) switch (_context8.prev = _context8.next) {\n case 0:\n if (!guiState.isConverting) {\n _context8.next = 3;\n break;\n }\n alert(messageBuilderState.getMessage(__filename, \"alert_onnx\"));\n return _context8.abrupt(\"return\");\n case 3:\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n guiState.stateControls.showWaitingCheckbox.updateState(true);\n _context8.next = 7;\n return serverSetting.getOnnx();\n case 7:\n res = _context8.sent;\n a = document.createElement(\"a\");\n a.href = res.path;\n a.download = res.filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n guiState.stateControls.showWaitingCheckbox.updateState(false);\n case 15:\n case \"end\":\n return _context8.stop();\n }\n }, _callee8);\n }));\n return function onnxExportButtonAction() {\n return _ref8.apply(this, arguments);\n };\n }();\n var exportOnnx = selected.voiceChangerType == \"RVC\" && selected.modelFile.endsWith(\"pth\") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onnxExportButtonAction\n }, messageBuilderState.getMessage(__filename, \"export_to_onnx\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onUpdateDefaultClicked\n }, messageBuilderState.getMessage(__filename, \"save_default\")), exportOnnx)));\n }, [selected, serverSetting.getOnnx, serverSetting.updateModelDefault]);\n var characterArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area\"\n }, portrait, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-area\"\n }, startControl, gainControl, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_1_TuningArea__WEBPACK_IMPORTED_MODULE_8__.TuningArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_2_IndexArea__WEBPACK_IMPORTED_MODULE_9__.IndexArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_3_SpeakerArea__WEBPACK_IMPORTED_MODULE_10__.SpeakerArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_4_F0FactorArea__WEBPACK_IMPORTED_MODULE_11__.F0FactorArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_5_so_vits_svc40SettingArea__WEBPACK_IMPORTED_MODULE_12__.SoVitsSVC40SettingArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_6_ddsp_svc30SettingArea__WEBPACK_IMPORTED_MODULE_13__.DDSPSVC30SettingArea, null), modelSlotControl));\n }, [portrait, startControl, gainControl, modelSlotControl]);\n return characterArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101_CharacterArea.tsx?"); +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CharacterArea: () => (/* binding */ CharacterArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _101_1_TuningArea__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./101-1_TuningArea */ \"./src/components/demo/components2/101-1_TuningArea.tsx\");\n/* harmony import */ var _101_2_IndexArea__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./101-2_IndexArea */ \"./src/components/demo/components2/101-2_IndexArea.tsx\");\n/* harmony import */ var _101_3_SpeakerArea__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./101-3_SpeakerArea */ \"./src/components/demo/components2/101-3_SpeakerArea.tsx\");\n/* harmony import */ var _101_4_F0FactorArea__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./101-4_F0FactorArea */ \"./src/components/demo/components2/101-4_F0FactorArea.tsx\");\n/* harmony import */ var _101_5_so_vits_svc40SettingArea__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./101-5_so-vits-svc40SettingArea */ \"./src/components/demo/components2/101-5_so-vits-svc40SettingArea.tsx\");\n/* harmony import */ var _101_6_ddsp_svc30SettingArea__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./101-6_ddsp-svc30SettingArea */ \"./src/components/demo/components2/101-6_ddsp-svc30SettingArea.tsx\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\n\n\n\n\n\nvar CharacterArea = function CharacterArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n serverSetting = _useAppState.serverSetting,\n initializedRef = _useAppState.initializedRef,\n volume = _useAppState.volume,\n bufferingTime = _useAppState.bufferingTime,\n performance = _useAppState.performance,\n setting = _useAppState.setting,\n setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n start = _useAppState.start,\n stop = _useAppState.stop;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_6__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_7__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"export_to_onnx\", {\n \"ja\": \"onnx出力\",\n \"en\": \"export to onnx\"\n });\n messageBuilderState.setMessage(__filename, \"save_default\", {\n \"ja\": \"設定保存\",\n \"en\": \"save setting\"\n });\n messageBuilderState.setMessage(__filename, \"alert_onnx\", {\n \"ja\": \"ボイチェン中はonnx出力できません\",\n \"en\": \"cannot export onnx when voice conversion is enabled\"\n });\n }, []);\n var selected = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.modelSlotIndex == undefined) {\n return;\n }\n return serverSetting.serverSetting.modelSlots[serverSetting.serverSetting.modelSlotIndex];\n }, [serverSetting.serverSetting.modelSlotIndex, serverSetting.serverSetting.modelSlots]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var vol = document.getElementById(\"status-vol\");\n var buf = document.getElementById(\"status-buf\");\n var res = document.getElementById(\"status-res\");\n if (!vol || !buf || !res) {\n return;\n }\n vol.innerText = volume.toFixed(4);\n buf.innerText = bufferingTime.toString();\n res.innerText = performance.responseTime.toString();\n }, [volume, bufferingTime, performance]);\n var portrait = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var icon = selected.iconFile.length > 0 ? selected.iconFile : \"./assets/icons/human.png\";\n var selectedTermOfUseUrlLink = selected.termsOfUseUrl ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"a\", {\n href: selected.termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"portrait-area-terms-of-use-link\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"portrait\",\n src: icon,\n alt: selected.name\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-status\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"portrait-area-status-vctype\"\n }, selected.voiceChangerType)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"vol: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-vol\"\n }, \"0\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"buf: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-buf\"\n }, \"0\"), \" ms\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"p\", null, \"res: \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n id: \"status-res\"\n }, \"0\"), \" ms\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"portrait-area-terms-of-use\"\n }, selectedTermOfUseUrlLink)));\n }, [selected]);\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n startWithAudioContextCreate = _useState2[0],\n setStartWithAudioContextCreate = _useState2[1];\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (!startWithAudioContextCreate) {\n return;\n }\n guiState.setIsConverting(true);\n start();\n }, [startWithAudioContextCreate]);\n var startControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var onStartClicked = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context.next = 17;\n break;\n }\n if (initializedRef.current) {\n _context.next = 12;\n break;\n }\n case 2:\n if (false) {}\n _context.next = 5;\n return new Promise(function (resolve) {\n setTimeout(resolve, 500);\n });\n case 5:\n if (!initializedRef.current) {\n _context.next = 7;\n break;\n }\n return _context.abrupt(\"break\", 9);\n case 7:\n _context.next = 2;\n break;\n case 9:\n setStartWithAudioContextCreate(true);\n _context.next = 15;\n break;\n case 12:\n guiState.setIsConverting(true);\n _context.next = 15;\n return start();\n case 15:\n _context.next = 19;\n break;\n case 17:\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 1\n }));\n guiState.setIsConverting(true);\n case 19:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onStartClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onStopClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(serverSetting.serverSetting.enableServerAudio == 0)) {\n _context2.next = 6;\n break;\n }\n guiState.setIsConverting(false);\n _context2.next = 4;\n return stop();\n case 4:\n _context2.next = 8;\n break;\n case 6:\n guiState.setIsConverting(false);\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverAudioStated: 0\n }));\n case 8:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onStopClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var startClassName = guiState.isConverting ? \"character-area-control-button-active\" : \"character-area-control-button-stanby\";\n var stopClassName = guiState.isConverting ? \"character-area-control-button-stanby\" : \"character-area-control-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onStopClicked,\n className: stopClassName\n }, \"stop\")));\n }, [guiState.isConverting, start, stop, serverSetting.serverSetting, serverSetting.updateServerSettings]);\n var gainControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var currentInputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.inputGain : serverSetting.serverSetting.serverInputAudioGain;\n var inputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n inputGain: val\n }));\n case 2:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function (_x) {\n return _ref3.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function (_x2) {\n return _ref4.apply(this, arguments);\n };\n }();\n var currentOutputGain = serverSetting.serverSetting.enableServerAudio == 0 ? setting.voiceChangerClientSetting.outputGain : serverSetting.serverSetting.serverOutputAudioGain;\n var outputValueUpdatedAction = serverSetting.serverSetting.enableServerAudio == 0 ? /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n _context5.next = 2;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n outputGain: val\n }));\n case 2:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function (_x3) {\n return _ref5.apply(this, arguments);\n };\n }() : /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n _context6.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputAudioGain: val\n }));\n case 2:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function (_x4) {\n return _ref6.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }, \"GAIN:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"in\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentInputGain,\n onChange: function onChange(e) {\n inputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentInputGain)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-slider-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-kind\"\n }, \"out\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-slider\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n min: \"0.1\",\n max: \"10.0\",\n step: \"0.1\",\n value: currentOutputGain,\n onChange: function onChange(e) {\n outputValueUpdatedAction(Number(e.target.value));\n }\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"character-area-slider-control-val\"\n }, currentOutputGain))));\n }, [serverSetting.serverSetting, setting, setVoiceChangerClientSetting, serverSetting.updateServerSettings]);\n var modelSlotControl = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (!selected) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onUpdateDefaultClicked = /*#__PURE__*/function () {\n var _ref7 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee7() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee7$(_context7) {\n while (1) switch (_context7.prev = _context7.next) {\n case 0:\n _context7.next = 2;\n return serverSetting.updateModelDefault();\n case 2:\n case \"end\":\n return _context7.stop();\n }\n }, _callee7);\n }));\n return function onUpdateDefaultClicked() {\n return _ref7.apply(this, arguments);\n };\n }();\n var onnxExportButtonAction = /*#__PURE__*/function () {\n var _ref8 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee8() {\n var _document$getElementB;\n var res, a;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee8$(_context8) {\n while (1) switch (_context8.prev = _context8.next) {\n case 0:\n if (!guiState.isConverting) {\n _context8.next = 3;\n break;\n }\n alert(messageBuilderState.getMessage(__filename, \"alert_onnx\"));\n return _context8.abrupt(\"return\");\n case 3:\n (_document$getElementB = document.getElementById(\"dialog\")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.classList.add(\"dialog-container-show\");\n guiState.stateControls.showWaitingCheckbox.updateState(true);\n _context8.next = 7;\n return serverSetting.getOnnx();\n case 7:\n res = _context8.sent;\n a = document.createElement(\"a\");\n a.href = res.path;\n a.download = res.filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n guiState.stateControls.showWaitingCheckbox.updateState(false);\n case 15:\n case \"end\":\n return _context8.stop();\n }\n }, _callee8);\n }));\n return function onnxExportButtonAction() {\n return _ref8.apply(this, arguments);\n };\n }();\n var exportOnnx = selected.voiceChangerType == \"RVC\" && selected.modelFile.endsWith(\"pth\") ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onnxExportButtonAction\n }, messageBuilderState.getMessage(__filename, \"export_to_onnx\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-title\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-button\",\n onClick: onUpdateDefaultClicked\n }, messageBuilderState.getMessage(__filename, \"save_default\")), exportOnnx)));\n }, [selected, serverSetting.getOnnx, serverSetting.updateModelDefault]);\n var characterArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area\"\n }, portrait, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"character-area-control-area\"\n }, startControl, gainControl, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_1_TuningArea__WEBPACK_IMPORTED_MODULE_8__.TuningArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_2_IndexArea__WEBPACK_IMPORTED_MODULE_9__.IndexArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_3_SpeakerArea__WEBPACK_IMPORTED_MODULE_10__.SpeakerArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_4_F0FactorArea__WEBPACK_IMPORTED_MODULE_11__.F0FactorArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_5_so_vits_svc40SettingArea__WEBPACK_IMPORTED_MODULE_12__.SoVitsSVC40SettingArea, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(_101_6_ddsp_svc30SettingArea__WEBPACK_IMPORTED_MODULE_13__.DDSPSVC30SettingArea, null), modelSlotControl));\n }, [portrait, startControl, gainControl, modelSlotControl]);\n return characterArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/101_CharacterArea.tsx?"); /***/ }), @@ -499,7 +499,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\n --text-color: #333;\n --company-color1: rgba(64, 119, 187, 1);\n --company-color2: rgba(29, 47, 78, 1);\n --company-color3: rgba(255, 255, 255, 1);\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\n --global-shadow-color: rgba(0, 0, 0, 0.4);\n\n --sidebar-transition-time: 0.2s;\n --sidebar-transition-time-quick: 0.1s;\n --sidebar-transition-animation: ease-in-out;\n\n --header-height: 1.5rem;\n --right-sidebar-width: 320px;\n\n --dialog-border-color: rgba(100, 100, 100, 1);\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\n --dialog-background-color: rgba(255, 255, 255, 1);\n --dialog-primary-color: rgba(19, 70, 209, 1);\n --dialog-active-color: rgba(40, 70, 209, 1);\n --dialog-input-border-color: rgba(200, 200, 200, 1);\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\n\n --body-video-seeker-height: 3rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n}\nhtml {\n font-size: 16px;\n}\nbody {\n height: 100%;\n width: 100%;\n overflow-y: scroll;\n overflow-x: hidden;\n color: var(--text-color);\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\n}\n#app {\n height: 100%;\n width: 100%;\n}\n.first-gesture {\n background: rgba(200, 0, 0, 0.2);\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n/* Main + Section Partition*/\n.main-body {\n height: 100%;\n width: 100%;\n padding: 2rem;\n font-family: \"Yusei Magic\", sans-serif;\n display: flex;\n flex-direction: column;\n font-size: 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n/* Title */\n.main-body .top-title .title {\n font-size: 3rem;\n }\n.main-body .top-title .top-title-version {\n margin-left: 2rem;\n font-size: 1.2rem;\n background: linear-gradient(transparent 60%, yellow 30%);\n }\n.main-body .top-title .top-title-version-number {\n margin-left: 0.3rem;\n font-size: 0.8rem;\n }\n.main-body .top-title .belongings {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n.main-body .top-title .belongings .link {\n margin-left: 1rem;\n font-weight: 700;\n text-decoration: underline;\n }\n/* Partition */\n.main-body .partition {\n width: 100%;\n }\n.main-body .partition .partition-header {\n font-weight: 700;\n color: rgb(71, 69, 69);\n display: flex;\n }\n.main-body .partition .partition-header .caret {\n width: 2rem;\n }\n.main-body .partition .partition-header .title {\n font-size: 1.1rem;\n }\n.main-body .partition .partition-header .belongings {\n font-weight: 400;\n font-size: 0.8rem;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n margin-left: 10px;\n }\n.main-body .partition .partition-header .belongings .belongings-checkbox {\n margin-bottom: 3px;\n }\n.main-body .partition .partition-content {\n position: static;\n overflow-y: hidden;\n }\n.main-body .partition .row-split {\n }\n.state-control-checkbox:checked + .partition .partition-content {\n max-height: 700px;\n background: rgba(255, 255, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n.state-control-checkbox + .partition .partition-content {\n max-height: 0px;\n background: rgba(233, 233, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n/* ROW */\n\n.split-8-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-8-2 > div:nth-child(1) {\n left: 0px;\n width: 80%;\n }\n\n.split-8-2 > div:nth-child(2) {\n left: 80%;\n width: 20%;\n }\n.split-6-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-6-4 > div:nth-child(1) {\n left: 0px;\n width: 60%;\n }\n.split-6-4 > div:nth-child(2) {\n left: 60%;\n width: 40%;\n }\n.split-5-5 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-5-5 > div:nth-child(1) {\n left: 0px;\n width: 50%;\n }\n.split-5-5 > div:nth-child(2) {\n left: 50%;\n width: 50%;\n }\n.split-4-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-6 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-6 > div:nth-child(2) {\n left: 40%;\n width: 60%;\n }\n.split-3-7 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-7 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-7 > div:nth-child(2) {\n left: 30%;\n width: 70%;\n }\n\n.split-2-8 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-2-8 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n\n.split-2-8 > div:nth-child(2) {\n left: 20%;\n width: 80%;\n }\n\n.split-1-8-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-1-8-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n\n.split-1-8-1 > div:nth-child(2) {\n left: 10%;\n width: 80%;\n }\n\n.split-1-8-1 > div:nth-child(3) {\n left: 90%;\n width: 10%;\n }\n.split-2-2-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-2-6 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(2) {\n left: 20%;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(3) {\n left: 40%;\n width: 60%;\n }\n.split-3-3-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-3-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(2) {\n left: 30%;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(3) {\n left: 60%;\n width: 40%;\n }\n\n.split-3-4-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-4-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-4-3 > div:nth-child(2) {\n left: 30%;\n width: 40%;\n }\n\n.split-3-4-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-2-5-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-5-3 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-5-3 > div:nth-child(2) {\n left: 20%;\n width: 50%;\n }\n.split-2-5-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-4-4-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-4-2 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(2) {\n left: 40%;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(3) {\n left: 80%;\n width: 20%;\n }\n.split-1-4-4-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-1-4-4-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n.split-1-4-4-1 > div:nth-child(2) {\n left: 10%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(3) {\n left: 50%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(4) {\n left: 90%;\n width: 10%;\n }\n\n.split-3-2-2-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-2-2-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-2-2-3 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(4) {\n left: 70%;\n width: 30%;\n }\n.split-3-2-3-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-3-2 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-3-2 > div:nth-child(3) {\n left: 50%;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(4) {\n left: 80%;\n width: 20%;\n }\n.split-3-1-2-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-2-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-2-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-2-4 > div:nth-child(3) {\n left: 40%;\n width: 20%;\n }\n.split-3-1-2-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-1-4 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-1-4 > div:nth-child(3) {\n left: 50%;\n width: 10%;\n }\n.split-3-2-1-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-2-2-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-2-2-1 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-2-2-1 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(4) {\n left: 70%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(5) {\n left: 90%;\n width: 10%;\n }\n.split-3-1-1-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-1-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-1-1-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(3) {\n left: 40%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(4) {\n left: 50%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(5) {\n left: 60%;\n width: 40%;\n }\n.w20 {\n width: 20%;\n}\n.bold {\n font-weight: 700;\n}\n.w40 {\n width: 40%;\n}\n\n.underline {\n border-bottom: 3px solid #333;\n}\n.left-padding-05 {\n padding-left: 0.5rem;\n}\n.left-padding-1 {\n padding-left: 1rem;\n}\n.left-padding-2 {\n padding-left: 2rem;\n}\n.left-margin-1 {\n margin-left: 1rem;\n}\n.left-margin-2 {\n margin-left: 2rem;\n}\n.highlight {\n background-color: rgba(200, 200, 255, 0.3);\n}\n.guided {\n /* background-color: rgba(9, 133, 67, 0.3); */\n background-color: rgba(159, 165, 162, 0.1);\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\n}\n\n.divider {\n height: 0.8rem;\n /* background-color: rgba(16, 210, 113, 0.1); */\n background-color: rgba(31, 42, 36, 0.1);\n}\n\n.body-section-title {\n font-size: 1.5rem;\n color: rgb(51, 49, 49);\n}\n.body-sub-section-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: rgb(3, 53, 12);\n}\n\n.body-item-title {\n color: rgb(51, 99, 49);\n display: flex;\n}\n.body-item-text {\n color: rgb(30, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.body-item-text .body-item-text-item {\n padding-left: 1rem;\n }\n.body-item-text-small {\n color: rgb(30, 30, 30);\n font-size: 0.7rem;\n}\n.body-item-text-em {\n color: rgb(250, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 700;\n}\n\n.body-input-container {\n display: flex;\n}\n.body-item-input {\n width: 60%;\n}\n.body-item-input-slider {\n width: 60%;\n}\n.body-item-input-slider-label {\n margin-right: 1rem;\n}\n.body-item-input-slider-val {\n margin-left: 1rem;\n}\n.body-item-input-slider-2nd {\n width: 60%;\n accent-color: #33f;\n}\n\n.body-button-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.body-button-container > div {\n margin-left: 5px;\n margin-right: 5px;\n padding-left: 20px;\n padding-right: 20px;\n }\n\n.body-button-container .body-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n }\n\n.body-button-container .body-button:hover {\n border: solid 1px #000;\n }\n\n.body-button-container .body-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n\n.body-button-container .body-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n\n.body-button-container .body-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n\n.body-button-container .body-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.body-button-container-space-around {\n justify-content: space-around;\n}\n\n.body-select {\n color: rgb(30, 30, 30);\n max-width: 100%;\n}\n\n.body-select-50 {\n color: rgb(30, 30, 30);\n max-width: 50%;\n height: 1.5rem;\n}\n.select-option-red {\n color: #f66;\n font-weight: 700;\n}\n\n.body-image-container,\n.body-wav-container {\n display: flex;\n width: 100%;\n}\n\n.body-image-container .body-image-container-title,\n .body-image-container .body-wav-container-title,\n .body-wav-container .body-image-container-title,\n .body-wav-container .body-wav-container-title {\n width: 20%;\n }\n\n.body-image-container .body-image-container-img,\n .body-image-container .body-wav-container-wav,\n .body-wav-container .body-image-container-img,\n .body-wav-container .body-wav-container-wav {\n width: 80%;\n }\n\n.donate-img {\n border-radius: 35px;\n height: 1.5rem;\n}\n\n/* Dialog */\n.dialog-container,\n.dialog-container2 {\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n display: none;\n}\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\n color: var(--company-color2);\n width: 40rem;\n max-height: 80vh;\n border: 2px solid var(--dialog-border-color);\n border-radius: 20px;\n flex-direction: column;\n align-items: center;\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\n background: var(--dialog-background-color);\n overflow: hidden;\n display: flex;\n }\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\n margin-top: 20px;\n background: var(--company-color2);\n color: #fff;\n width: 100%;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\n width: 90%;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\n font-family: \"Chicle\", cursive;\n font-size: 3rem;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\n display: flex;\n flex-direction: row;\n margin: 20px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\n width: 90%;\n max-height: 70vh;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\n font-weight: 700;\n margin: 5px 5px 5px 5px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\n font-weight: 400;\n font-size: 0.8rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 5px 1px 5px;\n margin-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\n max-height: 60vh;\n width: 100%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\n height: 5rem;\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\n width: 5rem;\n height: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\n width: 5rem;\n height: 5rem;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\n display: flex;\n flex-direction: column;\n font-size: 0.8rem;\n border-bottom: solid 1px #aaa;\n width: 80%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\n background-color: #eee;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\n background: #f7cfec80;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\n width: 20%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\n width: 55%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\n width: 55%;\n font-weight: 700;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\n width: 15%;\n height: 90%;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\n display: flex;\n flex-direction: column;\n border-bottom: solid 1px #a00;\n width: 20%;\n font-size: 0.8rem;\n padding: 4px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\n font-size: 1rem;\n padding-left: 0.5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\n font-size: 0.9rem;\n padding-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\n display: flex;\n flex-direction: row;\n margin: 0.2rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\n width: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\n width: 20rem;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\n display: flex;\n flex-direction: row;\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n justify-content: center;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\n /* width: 12rem; */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 10px 1px 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row {\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title {\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers {\n display: flex;\n flex-direction: row;\n margin: 0px 0px 0px 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\n margin: 0px 0px 0px 0.5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons {\n margin: 0px 0px 0px 0.5rem;\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button {\n margin: 0px 0.5rem 0px 0.5rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 0px 10px 0px 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover {\n border: solid 1px #000;\n }\n.dialog-container-show {\n display: flex;\n}\n\n.state-control-checkbox:checked ~ .dialog-container {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n}\n\n@keyframes dialog-hide {\n from {\n opacity: 1;\n z-index: 200;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 200;\n }\n to {\n opacity: 1;\n z-index: 200;\n }\n}\n\n.state-control-checkbox:checked ~ .dialog-container2 {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container2 {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n/* .state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n} */\n\n@keyframes dialog-hide2 {\n from {\n opacity: 1;\n z-index: 400;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show2 {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 400;\n }\n to {\n opacity: 1;\n z-index: 400;\n }\n}\n\n.tooltip-text {\n display: none;\n position: absolute;\n padding: 4px;\n font-size: 0.7rem;\n line-height: 2rem;\n color: #ddd;\n border-radius: 5px;\n background: #444;\n /* width: 100px; */\n}\n.tooltip-text-100px {\n width: 100px;\n}\n.tooltip-text-thin {\n line-height: 1rem;\n}\n.tooltip-text-right {\n line-height: 1rem;\n}\n.tooltip-text:before {\n content: \"\";\n position: absolute;\n top: -1.4rem;\n border: 12px solid transparent;\n border-top: 16px solid #444;\n margin-left: 0rem;\n transform: rotateZ(180deg);\n}\n.tooltip:hover .tooltip-text {\n display: inline-block;\n top: 30px;\n left: 0px;\n}\n.tooltip:hover .tooltip-text-lower {\n display: inline-block;\n top: 60px;\n left: 0px;\n}\n\n.tooltip {\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n\n/* ################## */\n.merge-field-container {\n display: flex;\n flex-direction: column;\n}\n.merge-field-container .merge-field {\n display: flex;\n flex-direction: row;\n }\n.merge-field-container .merge-field .merge-field-elem {\n padding-left: 5px;\n }\n.merge-field-container .merge-field .red {\n color: #f00;\n }\n.merge-field-container .merge-field .purple {\n color: #33f;\n }\n.merge-field-container .merge-field .grey-bold {\n color: #555;\n font-weight: 800;\n }\n.model-slot-area {\n display: inline-block;\n background: var(--company-color2);\n border-radius: 10px;\n padding: 20px;\n}\n.model-slot-area .model-slot-panel {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\n display: flex;\n flex-direction: row;\n gap: 2px;\n flex-wrap: wrap;\n /* width: calc(30rem + 40px + 10px); */\n }\n.model-slot-area .model-slot-panel .model-slot-buttons {\n display: flex;\n flex-direction: column-reverse;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #333;\n cursor: pointer;\n padding: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\n border: solid 2px #faa;\n }\n.model-slot-tile-container,\n.model-slot-tile-container-selected {\n width: 6rem;\n height: 6rem;\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.model-slot-tile-container-selected {\n background: #43030c;\n}\n.model-slot-tile-container:hover {\n background: #43030c;\n}\n\n.model-slot-tile-icon-div {\n width: 5rem;\n height: 5rem;\n padding-top: 4px;\n}\n.model-slot-tile-icon {\n width: 5rem;\n height: 5rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n}\n.model-slot-tile-icon-no-entry {\n color: gray;\n}\n.model-slot-tile-dscription {\n font-size: 0.7rem;\n font-weight: 700;\n color: navajowhite;\n padding-top: 4px;\n}\n\n.character-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.character-area .portrait-area {\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container {\n position: relative;\n width: 20rem;\n height: 20rem;\n }\n\n.character-area .portrait-area .portrait-container .portrait {\n width: 20rem;\n height: 20rem;\n -o-object-fit: contain;\n object-fit: contain;\n border-radius: 10px;\n position: absolute;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-status {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n left: 5px;\n top: 5px;\n border-radius: 2px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n right: 5px;\n bottom: 5px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\n color: white;\n }\n\n.character-area .character-area-control-area {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control {\n display: flex;\n gap: 3px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\n width: 5rem;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\n width: 5rem;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\n width: 4rem;\n font-weight: 700;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\n /* width: 20rem; */\n display: flex;\n flex-direction: column;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\n width: 2rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\n width: 10rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\n width: 3rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\n border: solid 2px #faa;\n }\n\n/* audio::-webkit-media-controls-play-button,\naudio::-webkit-media-controls-panel {\n background-color: #ff0;\n height: 1rem;\n}\naudio::-webkit-media-controls-enclosure {\n max-height: 1rem;\n}\naudio::-webkit-media-controls {\n justify-content: start;\n}\naudio::-webkit-media-controls-overlay-enclosure{\n height: 1rem;\n} */\n\n.config-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.config-area .config-sub-area {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n\n.config-area .config-sub-area .config-sub-area-control {\n display: flex;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\n width: 5rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\n width: 20rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\n width: 15rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\n display: flex;\n gap: 10px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\n display: flex;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\n width: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\n width: 10rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\n width: 3rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\n border: solid 2px #999;\n color: white;\n background: #666;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\n border: solid 2px #faa;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\n border: solid 2px #999;\n color: white;\n background: #844;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\n max-width: 30%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\n max-width: 70%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\n height: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\n height: 1rem;\n width: 15rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\n height: 1rem;\n width: 1rem;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\n border: solid 1px #333;\n background: #fff;\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\n font-size: 0.8rem;\n border: solid 1px #333;\n border-radius: 5px;\n background: #ada;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.headerArea {\n display: flex;\n flex-direction: column;\n}\n\n.headerArea .title1 {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: flex-end;\n }\n\n.headerArea .title1 .title {\n font-size: 1.8rem;\n font-weight: 700;\n color: #333;\n text-shadow: 0 0 2px #333;\n }\n\n.headerArea .title1 .title-version {\n font-size: 0.9rem;\n }\n\n.headerArea .title1 .title-version-number {\n font-size: 0.7rem;\n }\n\n.headerArea .icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n }\n\n.headerArea .icons .belongings {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.headerArea .icons .belongings .belongings-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n top: -2px;\n }\n\n.headerArea .icons .belongings .belongings-button:hover {\n border: solid 2px #cc6;\n }\n\n.advanced-setting-container {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin: 10px;\n}\n\n.advanced-setting-container .advanced-setting-container-row {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\n width: 7rem;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\n width: 15rem;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\n display: flex;\n flex-direction: row;\n gap: 5px;\n width: 10rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\n color: #333;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\n }\n\n.merge-lab-container {\n display: flex;\n flex-direction: column;\n margin: 10px;\n gap: 10px;\n}\n\n.merge-lab-container .merge-lab-type-filter {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\n width: 70%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\n display: flex;\n flex-direction: column-reverse;\n width: 30%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\n border: solid 2px #ddd;\n color: black;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #eee;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n text-align: center;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\n border: solid 2px #aaa;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\n font-size: 0.7rem;\n font-weight: 700;\n color: #333;\n text-align: center;\n }\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/101_RotatedButton.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!../../node_modules/postcss-loader/dist/cjs.js!./Error.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./src/css/Error.css\");\n// Imports\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_2_use_1_node_modules_postcss_loader_dist_cjs_js_Error_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:root {\n --text-color: #333;\n --company-color1: rgba(64, 119, 187, 1);\n --company-color2: rgba(29, 47, 78, 1);\n --company-color3: rgba(255, 255, 255, 1);\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\n --global-shadow-color: rgba(0, 0, 0, 0.4);\n\n --sidebar-transition-time: 0.2s;\n --sidebar-transition-time-quick: 0.1s;\n --sidebar-transition-animation: ease-in-out;\n\n --header-height: 1.5rem;\n --right-sidebar-width: 320px;\n\n --dialog-border-color: rgba(100, 100, 100, 1);\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\n --dialog-background-color: rgba(255, 255, 255, 1);\n --dialog-primary-color: rgba(19, 70, 209, 1);\n --dialog-active-color: rgba(40, 70, 209, 1);\n --dialog-input-border-color: rgba(200, 200, 200, 1);\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\n\n --body-video-seeker-height: 3rem;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: \"Poppins\", sans-serif;\n}\nhtml {\n font-size: 16px;\n}\nbody {\n height: 100%;\n width: 100%;\n overflow-y: scroll;\n overflow-x: hidden;\n color: var(--text-color);\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 90%, var(--company-color1) 90% 95%, var(--company-color2) 95% 100%);\n}\n#app {\n height: 100%;\n width: 100%;\n}\n.first-gesture {\n background: rgba(200, 0, 0, 0.2);\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n/* Main + Section Partition*/\n.main-body {\n height: 100%;\n width: 100%;\n padding: 2rem;\n font-family: \"Yusei Magic\", sans-serif;\n display: flex;\n flex-direction: column;\n font-size: 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n/* Title */\n.main-body .top-title .title {\n font-size: 3rem;\n }\n.main-body .top-title .top-title-version {\n margin-left: 2rem;\n font-size: 1.2rem;\n background: linear-gradient(transparent 60%, yellow 30%);\n }\n.main-body .top-title .top-title-version-number {\n margin-left: 0.3rem;\n font-size: 0.8rem;\n }\n.main-body .top-title .belongings {\n margin-left: 1rem;\n margin-right: 1rem;\n }\n.main-body .top-title .belongings .link {\n margin-left: 1rem;\n font-weight: 700;\n text-decoration: underline;\n }\n/* Partition */\n.main-body .partition {\n width: 100%;\n }\n.main-body .partition .partition-header {\n font-weight: 700;\n color: rgb(71, 69, 69);\n display: flex;\n }\n.main-body .partition .partition-header .caret {\n width: 2rem;\n }\n.main-body .partition .partition-header .title {\n font-size: 1.1rem;\n }\n.main-body .partition .partition-header .belongings {\n font-weight: 400;\n font-size: 0.8rem;\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n margin-left: 10px;\n }\n.main-body .partition .partition-header .belongings .belongings-checkbox {\n margin-bottom: 3px;\n }\n.main-body .partition .partition-content {\n position: static;\n overflow-y: hidden;\n }\n.main-body .partition .row-split {\n }\n.state-control-checkbox:checked + .partition .partition-content {\n max-height: 700px;\n background: rgba(255, 255, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n.state-control-checkbox + .partition .partition-content {\n max-height: 0px;\n background: rgba(233, 233, 255, 0.3);\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\n}\n/* ROW */\n\n.split-8-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-8-2 > div:nth-child(1) {\n left: 0px;\n width: 80%;\n }\n\n.split-8-2 > div:nth-child(2) {\n left: 80%;\n width: 20%;\n }\n.split-6-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-6-4 > div:nth-child(1) {\n left: 0px;\n width: 60%;\n }\n.split-6-4 > div:nth-child(2) {\n left: 60%;\n width: 40%;\n }\n.split-5-5 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-5-5 > div:nth-child(1) {\n left: 0px;\n width: 50%;\n }\n.split-5-5 > div:nth-child(2) {\n left: 50%;\n width: 50%;\n }\n.split-4-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-6 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-6 > div:nth-child(2) {\n left: 40%;\n width: 60%;\n }\n.split-3-7 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-7 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-7 > div:nth-child(2) {\n left: 30%;\n width: 70%;\n }\n\n.split-2-8 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-2-8 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n\n.split-2-8 > div:nth-child(2) {\n left: 20%;\n width: 80%;\n }\n\n.split-1-8-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-1-8-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n\n.split-1-8-1 > div:nth-child(2) {\n left: 10%;\n width: 80%;\n }\n\n.split-1-8-1 > div:nth-child(3) {\n left: 90%;\n width: 10%;\n }\n.split-2-2-6 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-2-6 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(2) {\n left: 20%;\n width: 20%;\n }\n.split-2-2-6 > div:nth-child(3) {\n left: 40%;\n width: 60%;\n }\n.split-3-3-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-3-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(2) {\n left: 30%;\n width: 30%;\n }\n.split-3-3-4 > div:nth-child(3) {\n left: 60%;\n width: 40%;\n }\n\n.split-3-4-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-4-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-4-3 > div:nth-child(2) {\n left: 30%;\n width: 40%;\n }\n\n.split-3-4-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-2-5-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-2-5-3 > div:nth-child(1) {\n left: 0px;\n width: 20%;\n }\n.split-2-5-3 > div:nth-child(2) {\n left: 20%;\n width: 50%;\n }\n.split-2-5-3 > div:nth-child(3) {\n left: 70%;\n width: 30%;\n }\n.split-4-4-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-4-4-2 > div:nth-child(1) {\n left: 0px;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(2) {\n left: 40%;\n width: 40%;\n }\n.split-4-4-2 > div:nth-child(3) {\n left: 80%;\n width: 20%;\n }\n.split-1-4-4-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-1-4-4-1 > div:nth-child(1) {\n left: 0px;\n width: 10%;\n }\n.split-1-4-4-1 > div:nth-child(2) {\n left: 10%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(3) {\n left: 50%;\n width: 40%;\n }\n.split-1-4-4-1 > div:nth-child(4) {\n left: 90%;\n width: 10%;\n }\n\n.split-3-2-2-3 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n\n.split-3-2-2-3 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n\n.split-3-2-2-3 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n\n.split-3-2-2-3 > div:nth-child(4) {\n left: 70%;\n width: 30%;\n }\n.split-3-2-3-2 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-3-2 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-3-2 > div:nth-child(3) {\n left: 50%;\n width: 30%;\n }\n.split-3-2-3-2 > div:nth-child(4) {\n left: 80%;\n width: 20%;\n }\n.split-3-1-2-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-2-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-2-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-2-4 > div:nth-child(3) {\n left: 40%;\n width: 20%;\n }\n.split-3-1-2-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-1-4 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-1-4 > div:nth-child(3) {\n left: 50%;\n width: 10%;\n }\n.split-3-2-1-4 > div:nth-child(4) {\n left: 60%;\n width: 40%;\n }\n.split-3-2-2-2-1 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-2-2-2-1 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-2-2-2-1 > div:nth-child(2) {\n left: 30%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(3) {\n left: 50%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(4) {\n left: 70%;\n width: 20%;\n }\n.split-3-2-2-2-1 > div:nth-child(5) {\n left: 90%;\n width: 10%;\n }\n.split-3-1-1-1-4 {\n display: flex;\n width: 100%;\n justify-content: center;\n margin: 1px 0px 1px 0px;\n}\n.split-3-1-1-1-4 > div:nth-child(1) {\n left: 0px;\n width: 30%;\n }\n.split-3-1-1-1-4 > div:nth-child(2) {\n left: 30%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(3) {\n left: 40%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(4) {\n left: 50%;\n width: 10%;\n }\n.split-3-1-1-1-4 > div:nth-child(5) {\n left: 60%;\n width: 40%;\n }\n.w20 {\n width: 20%;\n}\n.bold {\n font-weight: 700;\n}\n.w40 {\n width: 40%;\n}\n\n.underline {\n border-bottom: 3px solid #333;\n}\n.left-padding-05 {\n padding-left: 0.5rem;\n}\n.left-padding-1 {\n padding-left: 1rem;\n}\n.left-padding-2 {\n padding-left: 2rem;\n}\n.left-margin-1 {\n margin-left: 1rem;\n}\n.left-margin-2 {\n margin-left: 2rem;\n}\n.highlight {\n background-color: rgba(200, 200, 255, 0.3);\n}\n.guided {\n /* background-color: rgba(9, 133, 67, 0.3); */\n background-color: rgba(159, 165, 162, 0.1);\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\n}\n\n.divider {\n height: 0.8rem;\n /* background-color: rgba(16, 210, 113, 0.1); */\n background-color: rgba(31, 42, 36, 0.1);\n}\n\n.body-section-title {\n font-size: 1.5rem;\n color: rgb(51, 49, 49);\n}\n.body-sub-section-title {\n font-size: 1.1rem;\n font-weight: 700;\n color: rgb(3, 53, 12);\n}\n\n.body-item-title {\n color: rgb(51, 99, 49);\n display: flex;\n}\n.body-item-text {\n color: rgb(30, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.body-item-text .body-item-text-item {\n padding-left: 1rem;\n }\n.body-item-text-small {\n color: rgb(30, 30, 30);\n font-size: 0.7rem;\n}\n.body-item-text-em {\n color: rgb(250, 30, 30);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 700;\n}\n\n.body-input-container {\n display: flex;\n}\n.body-item-input {\n width: 60%;\n}\n.body-item-input-slider {\n width: 60%;\n}\n.body-item-input-slider-label {\n margin-right: 1rem;\n}\n.body-item-input-slider-val {\n margin-left: 1rem;\n}\n.body-item-input-slider-2nd {\n width: 60%;\n accent-color: #33f;\n}\n\n.body-button-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.body-button-container > div {\n margin-left: 5px;\n margin-right: 5px;\n padding-left: 20px;\n padding-right: 20px;\n }\n\n.body-button-container .body-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n }\n\n.body-button-container .body-button:hover {\n border: solid 1px #000;\n }\n\n.body-button-container .body-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n\n.body-button-container .body-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n\n.body-button-container .body-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n\n.body-button-container .body-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.body-button-container-space-around {\n justify-content: space-around;\n}\n\n.body-select {\n color: rgb(30, 30, 30);\n max-width: 100%;\n}\n\n.body-select-50 {\n color: rgb(30, 30, 30);\n max-width: 50%;\n height: 1.5rem;\n}\n.select-option-red {\n color: #f66;\n font-weight: 700;\n}\n\n.body-image-container,\n.body-wav-container {\n display: flex;\n width: 100%;\n}\n\n.body-image-container .body-image-container-title,\n .body-image-container .body-wav-container-title,\n .body-wav-container .body-image-container-title,\n .body-wav-container .body-wav-container-title {\n width: 20%;\n }\n\n.body-image-container .body-image-container-img,\n .body-image-container .body-wav-container-wav,\n .body-wav-container .body-image-container-img,\n .body-wav-container .body-wav-container-wav {\n width: 80%;\n }\n\n.donate-img {\n border-radius: 35px;\n height: 1.5rem;\n}\n\n/* Dialog */\n.dialog-container,\n.dialog-container2 {\n justify-content: center;\n align-items: center;\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n display: none;\n}\n.dialog-container .dialog-frame, .dialog-container2 .dialog-frame {\n color: var(--company-color2);\n width: 40rem;\n max-height: 80vh;\n border: 2px solid var(--dialog-border-color);\n border-radius: 20px;\n flex-direction: column;\n align-items: center;\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\n background: var(--dialog-background-color);\n overflow: hidden;\n display: flex;\n }\n.dialog-container .dialog-frame .dialog-title, .dialog-container2 .dialog-frame .dialog-title {\n margin-top: 20px;\n background: var(--company-color2);\n color: #fff;\n width: 100%;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content, .dialog-container2 .dialog-frame .dialog-content {\n width: 90%;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-application-title, .dialog-container2 .dialog-frame .dialog-content .dialog-application-title {\n font-family: \"Chicle\", cursive;\n font-size: 3rem;\n text-align: center;\n }\n.dialog-container .dialog-frame .dialog-content .dialog-content-part, .dialog-container2 .dialog-frame .dialog-content .dialog-content-part {\n margin-top: 1rem;\n margin-bottom: 1rem;\n }\n.dialog-container .dialog-frame .dialog-content .input-text-container, .dialog-container2 .dialog-frame .dialog-content .input-text-container {\n display: flex;\n flex-direction: row;\n margin: 20px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content, .dialog-container2 .dialog-frame .dialog-fixed-size-content {\n width: 90%;\n max-height: 70vh;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header {\n font-weight: 700;\n margin: 5px 5px 5px 5px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button {\n font-weight: 400;\n font-size: 0.8rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 5px 1px 5px;\n margin-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-header .file-uploader-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .model-slot-header-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-header .file-uploader-header-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container {\n max-height: 60vh;\n width: 100%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot {\n height: 5rem;\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon {\n width: 5rem;\n height: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-icon-pointable {\n width: 5rem;\n height: 5rem;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail {\n display: flex;\n flex-direction: column;\n font-size: 0.8rem;\n border-bottom: solid 1px #aaa;\n width: 80%;\n overflow-y: scroll;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-track {\n background-color: #eee;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail::-webkit-scrollbar-thumb {\n background: #f7cfec80;\n border-radius: 3px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row {\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-label {\n width: 20%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value {\n width: 55%;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-download {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-pointable {\n width: 55%;\n white-space: nowrap;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-value-edit {\n width: 55%;\n font-weight: 700;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-detail .model-slot-detail-row .model-slot-detail-row-button {\n width: 15%;\n height: 90%;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-buttons {\n display: flex;\n flex-direction: column;\n border-bottom: solid 1px #a00;\n width: 20%;\n font-size: 0.8rem;\n padding: 4px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-disabled {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n vertical-align: middle;\n background: #ddd;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-active {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .model-slot-container .model-slot .model-slot-button-stanby:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-title,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-voice-changer-select,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-title {\n font-size: 1rem;\n padding-left: 0.5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container {\n font-size: 0.9rem;\n padding-left: 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row {\n display: flex;\n flex-direction: row;\n margin: 0.2rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-label {\n width: 5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-value {\n width: 20rem;\n color: #f00;\n white-space: nowrap;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-container .file-uploader-file-select-row .file-uploader-file-select-row-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container {\n display: flex;\n flex-direction: row;\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n justify-content: center;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button {\n /* width: 12rem; */\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 1px 10px 1px 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .file-uploader-file-select-upload-button-container .file-uploader-file-select-upload-button:hover {\n border: solid 1px #000;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row {\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-title {\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers {\n display: flex;\n flex-direction: row;\n margin: 0px 0px 0px 1rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-id-label,\n .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-name-label {\n margin: 0px 0px 0px 0.5rem;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons {\n margin: 0px 0px 0px 0.5rem;\n display: flex;\n flex-direction: row;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button {\n margin: 0px 0.5rem 0px 0.5rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: solid 1px #999;\n border-radius: 2px;\n cursor: pointer;\n vertical-align: middle;\n text-align: center;\n padding: 0px 10px 0px 10px;\n }\n.dialog-container .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover, .dialog-container2 .dialog-frame .dialog-fixed-size-content .edit-model-slot-row .edit-model-slot-speakers .edit-model-slot-speakers-buttons .edit-model-slot-speakers-button:hover {\n border: solid 1px #000;\n }\n.dialog-container-show {\n display: flex;\n}\n\n.state-control-checkbox:checked ~ .dialog-container {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n}\n\n@keyframes dialog-hide {\n from {\n opacity: 1;\n z-index: 200;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 200;\n }\n to {\n opacity: 1;\n z-index: 200;\n }\n}\n\n.state-control-checkbox:checked ~ .dialog-container2 {\n background: rgba(200, 200, 200, 0.4);\n animation-name: dialog-show2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n.state-control-checkbox ~ .dialog-container2 {\n background: rgba(100, 100, 100, 0.4);\n animation-name: dialog-hide2;\n animation-duration: 0.4s;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-direction: normal;\n}\n/* .state-control-checkbox:checked + .dialog-frame {\n display: flex;\n}\n.state-control-checkbox + .dialog-frame {\n display: none;\n} */\n\n@keyframes dialog-hide2 {\n from {\n opacity: 1;\n z-index: 400;\n }\n 90% {\n opacity: 0;\n z-index: -1;\n }\n to {\n opacity: 0;\n z-index: -1;\n }\n}\n\n@keyframes dialog-show2 {\n from {\n opacity: 0;\n z-index: -1;\n }\n 10% {\n z-index: 400;\n }\n to {\n opacity: 1;\n z-index: 400;\n }\n}\n\n.tooltip-text {\n display: none;\n position: absolute;\n padding: 4px;\n font-size: 0.7rem;\n line-height: 2rem;\n color: #ddd;\n border-radius: 5px;\n background: #444;\n /* width: 100px; */\n}\n.tooltip-text-100px {\n width: 100px;\n}\n.tooltip-text-thin {\n line-height: 1rem;\n}\n.tooltip-text-right {\n line-height: 1rem;\n}\n.tooltip-text:before {\n content: \"\";\n position: absolute;\n top: -1.4rem;\n border: 12px solid transparent;\n border-top: 16px solid #444;\n margin-left: 0rem;\n transform: rotateZ(180deg);\n}\n.tooltip:hover .tooltip-text {\n display: inline-block;\n top: 30px;\n left: 0px;\n}\n.tooltip:hover .tooltip-text-lower {\n display: inline-block;\n top: 60px;\n left: 0px;\n}\n\n.tooltip {\n position: relative;\n cursor: pointer;\n display: inline-block;\n}\n\n/* ################## */\n.merge-field-container {\n display: flex;\n flex-direction: column;\n}\n.merge-field-container .merge-field {\n display: flex;\n flex-direction: row;\n }\n.merge-field-container .merge-field .merge-field-elem {\n padding-left: 5px;\n }\n.merge-field-container .merge-field .red {\n color: #f00;\n }\n.merge-field-container .merge-field .purple {\n color: #33f;\n }\n.merge-field-container .merge-field .grey-bold {\n color: #555;\n font-weight: 800;\n }\n.model-slot-area {\n display: inline-block;\n background: var(--company-color2);\n border-radius: 10px;\n padding: 20px;\n}\n.model-slot-area .model-slot-panel {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-tiles-container {\n display: flex;\n flex-direction: row;\n gap: 2px;\n flex-wrap: wrap;\n /* width: calc(30rem + 40px + 10px); */\n }\n.model-slot-area .model-slot-panel .model-slot-buttons {\n display: flex;\n flex-direction: column-reverse;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #333;\n cursor: pointer;\n padding: 5px;\n }\n.model-slot-area .model-slot-panel .model-slot-buttons .model-slot-button:hover {\n border: solid 2px #faa;\n }\n.model-slot-tile-container,\n.model-slot-tile-container-selected {\n width: 6rem;\n height: 6rem;\n border-radius: 2px;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.model-slot-tile-container-selected {\n background: #43030c;\n}\n.model-slot-tile-container:hover {\n background: #43030c;\n}\n\n.model-slot-tile-icon-div {\n width: 5rem;\n height: 5rem;\n padding-top: 4px;\n position: relative;\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 position: absolute;\n}\n.model-slot-tile-vctype {\n position: absolute;\n font-size: 0.6rem;\n font-weight: 800;\n top: 5px;\n left: 2px;\n background: RGBA(10, 200, 100, 0.6);\n border-radius: 5px;\n padding: 0px 2px 0px 2px;\n}\n.model-slot-tile-icon-no-entry {\n color: gray;\n position: absolute;\n top: 2rem;\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 padding: 0px 0px 0px 3px;\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-status .portrait-area-status-vctype {\n font-weight: 800;\n color: #866;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use {\n width: 5rem;\n background: rgba(100, 100, 100, 0.5);\n color: white;\n position: absolute;\n paddig: 2px;\n font-size: 0.7rem;\n right: 5px;\n bottom: 5px;\n }\n\n.character-area .portrait-area .portrait-container .portrait-area-terms-of-use .portrait-area-terms-of-use-link {\n color: white;\n }\n\n.character-area .character-area-control-area {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control {\n display: flex;\n gap: 3px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons {\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-active {\n width: 5rem;\n border: solid 1px #333;\n border-radius: 2px;\n background: #ada;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby {\n width: 5rem;\n border: solid 1px #999;\n border-radius: 2px;\n background: #aba;\n cursor: pointer;\n font-weight: 700;\n text-align: center;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-buttons .character-area-control-button-stanby:hover {\n border: solid 1px #000;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-title {\n width: 4rem;\n font-weight: 700;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field {\n /* width: 20rem; */\n display: flex;\n flex-direction: column;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-kind {\n width: 2rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-slider {\n width: 10rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-slider-control .character-area-slider-control-val {\n width: 3rem;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 2px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n }\n\n.character-area .character-area-control-area .character-area-control .character-area-control-field .character-area-buttons .character-area-button:hover {\n border: solid 2px #faa;\n }\n\n/* audio::-webkit-media-controls-play-button,\naudio::-webkit-media-controls-panel {\n background-color: #ff0;\n height: 1rem;\n}\naudio::-webkit-media-controls-enclosure {\n max-height: 1rem;\n}\naudio::-webkit-media-controls {\n justify-content: start;\n}\naudio::-webkit-media-controls-overlay-enclosure{\n height: 1rem;\n} */\n\n.config-area {\n display: flex;\n gap: 5px;\n padding: 20px;\n}\n\n.config-area .config-sub-area {\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n\n.config-area .config-sub-area .config-sub-area-control {\n display: flex;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title {\n width: 5rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-title-long {\n width: 20rem;\n font-weight: 700;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field {\n width: 15rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container {\n display: flex;\n gap: 10px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-noise-container .config-sub-area-noise-checkbox-container {\n display: flex;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-kind {\n width: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-slider {\n width: 10rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-slider-control .config-sub-area-slider-control-val {\n width: 3rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button {\n border: solid 2px #999;\n color: white;\n background: #666;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button:hover {\n border: solid 2px #faa;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-buttons .config-sub-area-button-active {\n border: solid 2px #999;\n color: white;\n background: #844;\n\n cursor: pointer;\n\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io {\n display: flex;\n flex-direction: row;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-filter {\n max-width: 30%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-auido-io .config-sub-area-control-field-auido-io-select {\n max-width: 70%;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container {\n height: 1rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-audio-container .config-sub-area-control-field-wav-file-audio {\n height: 1rem;\n width: 15rem;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-folder {\n height: 1rem;\n width: 1rem;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button {\n border: solid 1px #333;\n background: #fff;\n font-size: 0.8rem;\n border-radius: 5px;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.config-area .config-sub-area .config-sub-area-control .config-sub-area-control-field .config-sub-area-control-field-wav-file .config-sub-area-control-field-wav-file-echoback-button-active {\n font-size: 0.8rem;\n border: solid 1px #333;\n border-radius: 5px;\n background: #ada;\n height: 1.2rem;\n padding-left: 2px;\n padding-right: 2px;\n cursor: pointer;\n }\n\n.headerArea {\n display: flex;\n flex-direction: column;\n}\n\n.headerArea .title1 {\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: flex-end;\n }\n\n.headerArea .title1 .title {\n font-size: 1.8rem;\n font-weight: 700;\n color: #333;\n text-shadow: 0 0 2px #333;\n }\n\n.headerArea .title1 .title-version {\n font-size: 0.9rem;\n }\n\n.headerArea .title1 .title-version-number {\n font-size: 0.7rem;\n }\n\n.headerArea .icons {\n display: flex;\n flex-direction: row;\n gap: 20px;\n }\n\n.headerArea .icons .belongings {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.headerArea .icons .belongings .belongings-button {\n border: solid 2px #999;\n color: white;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #666;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n top: -2px;\n }\n\n.headerArea .icons .belongings .belongings-button:hover {\n border: solid 2px #cc6;\n }\n\n.advanced-setting-container {\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin: 10px;\n}\n\n.advanced-setting-container .advanced-setting-container-row {\n display: flex;\n flex-direction: row;\n gap: 5px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-title {\n width: 7rem;\n font-weight: 700;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field {\n width: 15rem;\n font-size: 0.9rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container {\n display: flex;\n flex-direction: row;\n gap: 5px;\n width: 10rem;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div {\n display: flex;\n flex-direction: row;\n gap: 3px;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(1) {\n color: #333;\n }\n\n.advanced-setting-container .advanced-setting-container-row .advanced-setting-container-row-field .advanced-setting-container-row-field-crossfade-container > div > div:nth-child(2) {\n }\n\n.merge-lab-container {\n display: flex;\n flex-direction: column;\n margin: 10px;\n gap: 10px;\n}\n\n.merge-lab-container .merge-lab-type-filter {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-type-filter > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list {\n width: 70%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item {\n display: flex;\n flex-direction: row;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(1) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-model-list .merge-lab-model-item > div:nth-child(2) {\n width: 50%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons {\n display: flex;\n flex-direction: column-reverse;\n width: 30%;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button {\n border: solid 2px #ddd;\n color: black;\n font-size: 0.8rem;\n border-radius: 5px;\n background: #eee;\n cursor: pointer;\n padding: 5px;\n height: 1.7rem;\n text-align: center;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-button:hover {\n border: solid 2px #aaa;\n }\n\n.merge-lab-container .merge-lab-manipulator .merge-lab-merge-buttons .merge-lab-merge-buttons-notice {\n font-size: 0.7rem;\n font-weight: 700;\n color: #333;\n text-align: center;\n }\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), diff --git a/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx b/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx index 41b29ecbb..c253ac958 100644 --- a/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx +++ b/client/demo/src/components/demo/components2/100_ModelSlotArea.tsx @@ -28,8 +28,15 @@ export const ModelSlotArea = (_props: ModelSlotAreaProps) => { const tileContainerClass = index == serverSetting.serverSetting.modelSlotIndex ? "model-slot-tile-container-selected" : "model-slot-tile-container" const name = x.name.length > 8 ? x.name.substring(0, 7) + "..." : x.name const iconElem = x.iconFile.length > 0 ? - {x.name} : -
no image
+ <> + {x.name} +
{x.voiceChangerType}
+ + : + <> +
no image
+
{x.voiceChangerType}
+ const clickAction = async () => { const dummyModelSlotIndex = (Math.floor(Date.now() / 1000)) * 1000 + index diff --git a/client/demo/src/components/demo/components2/101_CharacterArea.tsx b/client/demo/src/components/demo/components2/101_CharacterArea.tsx index 2bfe6a300..91a538ab5 100644 --- a/client/demo/src/components/demo/components2/101_CharacterArea.tsx +++ b/client/demo/src/components/demo/components2/101_CharacterArea.tsx @@ -61,6 +61,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
{selected.name}
+

{selected.voiceChangerType}

vol: 0

buf: 0 ms

res: 0 ms

diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css index 56841f1ff..73957f488 100644 --- a/client/demo/src/css/App.css +++ b/client/demo/src/css/App.css @@ -1191,15 +1191,29 @@ body { width: 5rem; height: 5rem; padding-top: 4px; + position: relative; } .model-slot-tile-icon { width: 5rem; height: 5rem; object-fit: contain; border-radius: 10px; + position: absolute; +} +.model-slot-tile-vctype { + position: absolute; + font-size: 0.6rem; + font-weight: 800; + top: 5px; + left: 2px; + background: RGBA(10, 200, 100, 0.6); + border-radius: 5px; + padding: 0px 2px 0px 2px; } .model-slot-tile-icon-no-entry { color: gray; + position: absolute; + top: 2rem; } .model-slot-tile-dscription { font-size: 0.7rem; @@ -1231,11 +1245,15 @@ body { background: rgba(100, 100, 100, 0.5); color: white; position: absolute; - paddig: 2px; + padding: 0px 0px 0px 3px; font-size: 0.7rem; left: 5px; top: 5px; border-radius: 2px; + .portrait-area-status-vctype { + font-weight: 800; + color: #866; + } } .portrait-area-terms-of-use { width: 5rem;