diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index 6ee81fb8..339960ae 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -400,7 +400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ServerOpertationRow\": () => (/* binding */ ServerOpertationRow)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n\n\n\n\n\nvar ServerOpertationRow = function ServerOpertationRow(props) {\n var appState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_4__.useGuiState)();\n var serverOpertationRow = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n var onnxExportButtonAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee() {\n var _document$getElementB;\n var res, a;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!guiState.isConverting) {\n _context.next = 3;\n break;\n }\n alert(\"cannot export onnx when voice conversion is enabled\");\n return _context.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 _context.next = 7;\n return appState.serverSetting.getOnnx();\n case 7:\n res = _context.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 _context.stop();\n }\n }, _callee);\n }));\n return function onnxExportButtonAction() {\n return _ref.apply(this, arguments);\n };\n }();\n var onDownloadClicked = function onDownloadClicked() {\n var slot = appState.serverSetting.serverSetting.modelSlotIndex;\n var model = appState.serverSetting.serverSetting.modelSlots[slot];\n var a = document.createElement(\"a\");\n a.href = model.modelFile;\n a.download = a.href.replace(/^.*[\\\\\\/]/, '');\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n guiState.stateControls.showWaitingCheckbox.updateState(false);\n };\n var onReloadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee2() {\n var info;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return appState.getInfo();\n case 2:\n info = _context2.sent;\n console.log(\"info\", info);\n case 4:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onReloadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var exportOnnx = appState.serverSetting.serverSetting.framework == \"PyTorch\" && props.showExportOnnx == true ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onnxExportButtonAction\n }, \"export onnx\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var download = props.showDownload ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: function onClick() {\n onDownloadClicked();\n }\n }, \"download\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var reload = props.showReload ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onReloadClicked\n }, \"reload\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Operation\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, exportOnnx, download, reload)));\n }, [appState.getInfo, appState.serverSetting.serverSetting]);\n return serverOpertationRow;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components/207_ServerOpertationRow.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ServerOpertationRow\": () => (/* binding */ ServerOpertationRow)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n\n\n\n\n\nvar ServerOpertationRow = function ServerOpertationRow(props) {\n var appState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_4__.useGuiState)();\n var serverOpertationRow = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n var onnxExportButtonAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee() {\n var _document$getElementB;\n var res, a;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!guiState.isConverting) {\n _context.next = 3;\n break;\n }\n alert(\"cannot export onnx when voice conversion is enabled\");\n return _context.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 _context.next = 7;\n return appState.serverSetting.getOnnx();\n case 7:\n res = _context.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 _context.stop();\n }\n }, _callee);\n }));\n return function onnxExportButtonAction() {\n return _ref.apply(this, arguments);\n };\n }();\n var onDownloadClicked = function onDownloadClicked() {\n var slot = appState.serverSetting.serverSetting.modelSlotIndex;\n var model = appState.serverSetting.serverSetting.modelSlots[slot];\n var a = document.createElement(\"a\");\n a.href = model.modelFile;\n a.download = a.href.replace(/^.*[\\\\\\/]/, '');\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n };\n var onReloadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee2() {\n var info;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return appState.getInfo();\n case 2:\n info = _context2.sent;\n console.log(\"info\", info);\n case 4:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onReloadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var exportOnnx = appState.serverSetting.serverSetting.framework == \"PyTorch\" && props.showExportOnnx == true ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onnxExportButtonAction\n }, \"export onnx\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var download = props.showDownload ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: function onClick() {\n onDownloadClicked();\n }\n }, \"download\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var reload = props.showReload ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onReloadClicked\n }, \"reload\")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Operation\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, exportOnnx, download, reload)));\n }, [appState.getInfo, appState.serverSetting.serverSetting]);\n return serverOpertationRow;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components/207_ServerOpertationRow.tsx?"); /***/ }), @@ -961,7 +961,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"MergeLabRow\": () => (/* binding */ MergeLabRow)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\n\n\n\n\nvar MergeLabRow = function MergeLabRow(_props) {\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)([]),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState, 2),\n mergeElements = _useState2[0],\n setMergeElements = _useState2[1];\n var appState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)();\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_3__.useState)(0),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(_useState3, 2),\n defaultTune = _useState4[0],\n setDefaultTune = _useState4[1];\n\n // スロットが変更されたときの初期化処理\n var newSlotChangeKey = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n console.log(\"appState.serverSetting.serverSetting.modelSlots\", appState.serverSetting.serverSetting.modelSlots);\n return appState.serverSetting.serverSetting.modelSlots.reduce(function (prev, cur) {\n return prev + \"_\" + cur.modelFile;\n }, \"\");\n }, [appState.serverSetting.serverSetting.modelSlots]);\n (0,react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(function () {\n // PyTorchモデルだけフィルタリング\n var models = appState.serverSetting.serverSetting.modelSlots.filter(function (x) {\n return x.modelFile && x.modelFile.endsWith(\"onnx\") == false;\n });\n if (models.length == 0) {\n setMergeElements([]);\n return;\n }\n\n // サンプリングレート、埋め込み次元数、モデルタイプが同一の場合のみ処理可能\n\n if (models.map(function (x) {\n return x.samplingRate;\n }).every(function (x, _i, arr) {\n return x == arr[0];\n }) && models.map(function (x) {\n return x.embChannels;\n }).every(function (x, _i, arr) {\n return x == arr[0];\n }) && models.map(function (x) {\n return x.modelType;\n }).every(function (x, _i, arr) {\n return x == arr[0];\n })) {\n var newMergeElements = models.map(function (x) {\n var elem = {\n filename: x.modelFile,\n strength: 100\n };\n return elem;\n });\n setMergeElements(newMergeElements);\n } else {\n console.log(\"not all model is same properties.\");\n setMergeElements([]);\n }\n }, [newSlotChangeKey]);\n var mergeLabRow = (0,react__WEBPACK_IMPORTED_MODULE_3__.useMemo)(function () {\n var onMergeClicked = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_2___default().mark(function _callee() {\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 appState.serverSetting.mergeModel({\n command: \"mix\",\n defaultTune: defaultTune,\n defaultIndexRatio: 1,\n files: mergeElements\n });\n case 1:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onMergeClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onMergeElementsChanged = function onMergeElementsChanged(filename, strength) {\n var newMergeElements = mergeElements.map(function (x) {\n if (x.filename != filename) return x;\n x.strength = strength;\n return x;\n });\n setMergeElements(newMergeElements);\n };\n var modelOptions = mergeElements.map(function (x, index) {\n var filename = \"\";\n if (x.filename.length > 0) {\n filename = x.filename.replace(/^.*[\\\\\\/]/, '');\n } else {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n key: index\n });\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n key: index,\n className: \"merge-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"merge-field-elem\"\n }, filename), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"merge-field-elem\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"input\", {\n type: \"range\",\n className: \"body-item-input-slider\",\n min: \"0\",\n max: \"100\",\n step: \"1\",\n value: x.strength,\n onChange: function onChange(e) {\n onMergeElementsChanged(x.filename, Number(e.target.value));\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"body-item-input-slider-val\"\n }, x.strength)));\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Model Merger\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"merge-field-container\"\n }, modelOptions.length == 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement((react__WEBPACK_IMPORTED_MODULE_3___default().Fragment), null, \"not PyTorch model or not same type\") : modelOptions, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"merge-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"merge-field-elem grey-bold\"\n }, \"Default Tune\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"merge-field-elem\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"input\", {\n type: \"range\",\n className: \"body-item-input-slider-2nd\",\n min: \"-50\",\n max: \"50\",\n step: \"1\",\n value: defaultTune,\n onChange: function onChange(e) {\n setDefaultTune(Number(e.target.value));\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"span\", {\n className: \"body-item-input-slider-val\"\n }, defaultTune)))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_3___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onMergeClicked\n }, \"merge\")));\n }, [mergeElements, appState.serverSetting.serverSetting, defaultTune]);\n return mergeLabRow;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components/a01_MergeLab.Row.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"MergeLabRow\": () => (/* binding */ MergeLabRow)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.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\n\n\n\n\n\nvar MergeLabRow = function MergeLabRow(_props) {\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)([]),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n mergeElements = _useState2[0],\n setMergeElements = _useState2[1];\n var appState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)();\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(0),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n defaultTune = _useState4[0],\n setDefaultTune = _useState4[1];\n console.log(\"mergeElements\", mergeElements);\n\n // スロットが変更されたときの初期化処理\n var newSlotChangeKey = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n console.log(\"appState.serverSetting.serverSetting.modelSlots\", appState.serverSetting.serverSetting.modelSlots);\n return appState.serverSetting.serverSetting.modelSlots.reduce(function (prev, cur) {\n return prev + \"_\" + cur.modelFile;\n }, \"\");\n }, [appState.serverSetting.serverSetting.modelSlots]);\n\n // マージ用データセットの初期化\n var clearMergeModelSetting = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n return function () {\n // PyTorchモデルだけフィルタリング\n var models = appState.serverSetting.serverSetting.modelSlots.filter(function (x) {\n return x.modelFile && x.modelFile.endsWith(\"onnx\") == false;\n });\n if (models.length == 0) {\n setMergeElements([]);\n return;\n }\n var newMergeElements = models.map(function (x) {\n var elem = {\n filename: x.modelFile,\n strength: 0\n };\n return elem;\n });\n setMergeElements(newMergeElements);\n };\n }, [appState.serverSetting.serverSetting.modelSlots]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n clearMergeModelSetting();\n }, [newSlotChangeKey]);\n var mergeLabRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var onMergeClicked = /*#__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 appState.serverSetting.mergeModel({\n command: \"mix\",\n defaultTune: defaultTune,\n defaultIndexRatio: 1,\n files: mergeElements\n });\n case 1:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onMergeClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onMergeElementsChanged = function onMergeElementsChanged(filename, strength) {\n console.log(\"targetelement\");\n var srcElements = mergeElements.filter(function (x) {\n return x.strength > 0;\n });\n var targetElement = mergeElements.find(function (x) {\n return x.filename == filename;\n });\n if (!targetElement) {\n console.warn(\"target model is not found\");\n return;\n }\n // 一つ目の対象モデル\n if (srcElements.length == 0) {\n targetElement.strength = strength;\n setMergeElements((0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(mergeElements));\n return;\n }\n\n //二つ目以降\n\n var srcSample = appState.serverSetting.serverSetting.modelSlots.find(function (x) {\n return x.modelFile == srcElements[0].filename;\n });\n var tgtSample = appState.serverSetting.serverSetting.modelSlots.find(function (x) {\n return x.modelFile == filename;\n });\n if (!srcSample || !tgtSample) {\n console.warn(\"target model is not found\", srcSample, tgtSample);\n return;\n }\n if (srcSample.samplingRate != tgtSample.samplingRate || srcSample.embChannels != tgtSample.embChannels || srcSample.modelType != tgtSample.modelType) {\n alert(\"current selected model is not same as the other selected.\");\n return;\n }\n targetElement.strength = strength;\n setMergeElements((0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(mergeElements));\n return;\n };\n var modelOptions = mergeElements.map(function (x, index) {\n var filename = \"\";\n if (x.filename.length > 0) {\n filename = x.filename.replace(/^.*[\\\\\\/]/, '');\n } else {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: index\n });\n }\n var modelInfo = appState.serverSetting.serverSetting.modelSlots.find(function (y) {\n return y.modelFile == x.filename;\n });\n if (!modelInfo) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: index\n });\n }\n var f0str = modelInfo.f0 == true ? \"f0\" : \"nof0\";\n var srstr = Math.floor(modelInfo.samplingRate / 1000) + \"K\";\n var embedstr = modelInfo.embChannels;\n var typestr = modelInfo.modelType == 0 ? \"org\" : \"webui\";\n var metadata = \"[\".concat(f0str, \",\").concat(srstr, \",\").concat(embedstr, \",\").concat(typestr, \"]\");\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n key: index,\n className: \"merge-field split-8-2\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"merge-field-elem\"\n }, metadata, \" \", filename), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"merge-field-elem\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n className: \"body-item-input-slider\",\n min: \"0\",\n max: \"100\",\n step: \"1\",\n value: x.strength,\n onChange: function onChange(e) {\n onMergeElementsChanged(x.filename, Number(e.target.value));\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"body-item-input-slider-val\"\n }, x.strength)));\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Model Merger\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"merge-field-container\"\n }, modelOptions, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"merge-field split-8-2\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"merge-field-elem grey-bold\"\n }, \"Default Tune\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"merge-field-elem\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"range\",\n className: \"body-item-input-slider-2nd\",\n min: \"-50\",\n max: \"50\",\n step: \"1\",\n value: defaultTune,\n onChange: function onChange(e) {\n setDefaultTune(Number(e.target.value));\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"span\", {\n className: \"body-item-input-slider-val\"\n }, defaultTune)))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onMergeClicked\n }, \"merge\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: clearMergeModelSetting\n }, \"clear\")));\n }, [mergeElements, appState.serverSetting.serverSetting, defaultTune]);\n return mergeLabRow;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components/a01_MergeLab.Row.tsx?"); /***/ }), @@ -1005,7 +1005,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 .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-6-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.split-6-4 > div:nth-child(1) {\\n left: 0px;\\n width: 60%;\\n }\\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 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 {\\n color: var(--company-color2);\\n width: 40rem;\\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 {\\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 {\\n width: 90%;\\n }\\n.dialog-container .dialog-frame .dialog-content .dialog-application-title {\\n font-family: \\\"Chicle\\\", cursive;\\n font-size: 3rem;\\n text-align: center;\\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.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\\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\\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 width: 100%;\\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\", \"\"]);\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 .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 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 {\\n color: var(--company-color2);\\n width: 40rem;\\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 {\\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 {\\n width: 90%;\\n }\\n.dialog-container .dialog-frame .dialog-content .dialog-application-title {\\n font-family: \\\"Chicle\\\", cursive;\\n font-size: 3rem;\\n text-align: center;\\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.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\\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\\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\", \"\"]);\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/components/207_ServerOpertationRow.tsx b/client/demo/src/components/demo/components/207_ServerOpertationRow.tsx index 46f50b13..a4f78fbe 100644 --- a/client/demo/src/components/demo/components/207_ServerOpertationRow.tsx +++ b/client/demo/src/components/demo/components/207_ServerOpertationRow.tsx @@ -44,7 +44,6 @@ export const ServerOpertationRow = (props: ServerOpertationRowProps) => { document.body.appendChild(a); a.click(); document.body.removeChild(a); - guiState.stateControls.showWaitingCheckbox.updateState(false) } const onReloadClicked = async () => { const info = await appState.getInfo() diff --git a/client/demo/src/components/demo/components/a01_MergeLab.Row.tsx b/client/demo/src/components/demo/components/a01_MergeLab.Row.tsx index 49d6b31f..39d1744c 100644 --- a/client/demo/src/components/demo/components/a01_MergeLab.Row.tsx +++ b/client/demo/src/components/demo/components/a01_MergeLab.Row.tsx @@ -12,6 +12,8 @@ export const MergeLabRow = (_props: MergeLabRowProps) => { const appState = useAppState() const [defaultTune, setDefaultTune] = useState(0) + console.log("mergeElements", mergeElements) + // スロットが変更されたときの初期化処理 const newSlotChangeKey = useMemo(() => { console.log("appState.serverSetting.serverSetting.modelSlots", appState.serverSetting.serverSetting.modelSlots) @@ -20,31 +22,27 @@ export const MergeLabRow = (_props: MergeLabRowProps) => { }, "") }, [appState.serverSetting.serverSetting.modelSlots]) - useEffect(() => { - // PyTorchモデルだけフィルタリング - const models = appState.serverSetting.serverSetting.modelSlots.filter(x => { return x.modelFile && x.modelFile.endsWith("onnx") == false }) - if (models.length == 0) { - setMergeElements([]) - return - } - // サンプリングレート、埋め込み次元数、モデルタイプが同一の場合のみ処理可能 - - if ( - models.map(x => { return x.samplingRate }).every((x, _i, arr) => x == arr[0]) && - models.map(x => { return x.embChannels }).every((x, _i, arr) => x == arr[0]) && - models.map(x => { return x.modelType }).every((x, _i, arr) => x == arr[0]) - ) { + // マージ用データセットの初期化 + const clearMergeModelSetting = useMemo(() => { + return () => { + // PyTorchモデルだけフィルタリング + const models = appState.serverSetting.serverSetting.modelSlots.filter(x => { return x.modelFile && x.modelFile.endsWith("onnx") == false }) + if (models.length == 0) { + setMergeElements([]) + return + } const newMergeElements = models.map((x) => { - const elem: MergeElement = { filename: x.modelFile, strength: 100 } + const elem: MergeElement = { filename: x.modelFile, strength: 0 } return elem }) setMergeElements(newMergeElements) - } else { - console.log("not all model is same properties.") - setMergeElements([]) } + }, [appState.serverSetting.serverSetting.modelSlots]) + + useEffect(() => { + clearMergeModelSetting() }, [newSlotChangeKey]) @@ -57,15 +55,44 @@ export const MergeLabRow = (_props: MergeLabRowProps) => { files: mergeElements }) } - const onMergeElementsChanged = (filename: string, strength: number) => { - const newMergeElements = mergeElements.map(x => { - if (x.filename != filename) return x - x.strength = strength - return x - }) - setMergeElements(newMergeElements) + const onMergeElementsChanged = (filename: string, strength: number) => { + console.log("targetelement") + const srcElements = mergeElements.filter(x => { return x.strength > 0 }) + const targetElement = mergeElements.find(x => { return x.filename == filename }) + if (!targetElement) { + console.warn("target model is not found") + return + } + // 一つ目の対象モデル + if (srcElements.length == 0) { + targetElement.strength = strength + setMergeElements([...mergeElements]) + return + } + + //二つ目以降 + + const srcSample = appState.serverSetting.serverSetting.modelSlots.find(x => { return x.modelFile == srcElements[0].filename }) + const tgtSample = appState.serverSetting.serverSetting.modelSlots.find(x => { return x.modelFile == filename }) + if (!srcSample || !tgtSample) { + console.warn("target model is not found", srcSample, tgtSample) + return + } + if ( + srcSample.samplingRate != tgtSample.samplingRate || + srcSample.embChannels != tgtSample.embChannels || + srcSample.modelType != tgtSample.modelType + ) { + alert("current selected model is not same as the other selected.") + return + } + + targetElement.strength = strength + setMergeElements([...mergeElements]) + return } + const modelOptions = mergeElements.map((x, index) => { let filename = "" if (x.filename.length > 0) { @@ -77,9 +104,25 @@ export const MergeLabRow = (_props: MergeLabRowProps) => { ) } + const modelInfo = appState.serverSetting.serverSetting.modelSlots.find(y => { return y.modelFile == x.filename }) + if (!modelInfo) { + return ( +
+
+ ) + } + + + const f0str = modelInfo.f0 == true ? "f0" : "nof0" + const srstr = Math.floor(modelInfo.samplingRate / 1000) + "K" + const embedstr = modelInfo.embChannels + const typestr = modelInfo.modelType == 0 ? "org" : "webui" + const metadata = `[${f0str},${srstr},${embedstr},${typestr}]` + + return ( -
-
{filename}
+
+
{metadata} {filename}
{ onMergeElementsChanged(x.filename, Number(e.target.value)) @@ -94,9 +137,9 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
Model Merger
- {modelOptions.length == 0 ? <>not PyTorch model or not same type : modelOptions} + {modelOptions} -
+
Default Tune
{ @@ -110,6 +153,7 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
merge
+
clear
) diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css index 974d25dc..6cfaba51 100644 --- a/client/demo/src/css/App.css +++ b/client/demo/src/css/App.css @@ -137,6 +137,20 @@ body { } /* ROW */ +.split-8-2 { + display: flex; + width: 100%; + justify-content: center; + margin: 1px 0px 1px 0px; + & > div:nth-child(1) { + left: 0px; + width: 80%; + } + & > div:nth-child(2) { + left: 80%; + width: 20%; + } +} .split-6-4 { display: flex; width: 100%; @@ -803,7 +817,6 @@ body { flex-direction: row; .merge-field-elem { padding-left: 5px; - width: 100%; } .red { color: #f00;