From 022fda0aa626e247d2f257a0745ece5f9ef36001 Mon Sep 17 00:00:00 2001 From: w-okada Date: Mon, 17 Jul 2023 08:20:41 +0900 Subject: [PATCH] WIP: diffusion svc model slot info --- client/demo/dist/index.js | 4 +- .../src/components/demo/904-1_MainScreen.tsx | 303 ++++++++++-------- .../demo/904_ModelSlotManagerDialog.tsx | 98 +++--- client/lib/src/const.ts | 2 + 4 files changed, 215 insertions(+), 192 deletions(-) diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index 2d71a580..05e0c277 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -169,7 +169,7 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MainScreen: () => (/* binding */ MainScreen)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/utils */ \"./src/utils/utils.ts\");\n\n\n\n\n\n\n\n\nvar MainScreen = function MainScreen(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"change_icon\", {\n \"ja\": \"アイコン変更\",\n \"en\": \"chage icon\"\n });\n messageBuilderState.setMessage(__filename, \"rename\", {\n \"ja\": \"リネーム\",\n \"en\": \"rename\"\n });\n messageBuilderState.setMessage(__filename, \"download\", {\n \"ja\": \"ダウンロード\",\n \"en\": \"download\"\n });\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n \"ja\": \"利用規約\",\n \"en\": \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"sample\", {\n \"ja\": \"サンプル\",\n \"en\": \"DL sample\"\n });\n messageBuilderState.setMessage(__filename, \"upload\", {\n \"ja\": \"アップロード\",\n \"en\": \"upload\"\n });\n messageBuilderState.setMessage(__filename, \"edit\", {\n \"ja\": \"編集\",\n \"en\": \"edit\"\n });\n messageBuilderState.setMessage(__filename, \"close\", {\n \"ja\": \"閉じる\",\n \"en\": \"close\"\n });\n }, []);\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n if (props.screen != \"Main\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n if (!serverSetting.serverSetting.modelSlots) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n var iconAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee(index) {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context.next = 2;\n break;\n }\n return _context.abrupt(\"return\");\n case 2:\n _context.next = 4;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__.fileSelector)(\"\");\n case 4:\n file = _context.sent;\n if (!((0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.checkExtention)(file.name, [\"png\", \"jpg\", \"jpeg\", \"gif\"]) == false)) {\n _context.next = 8;\n break;\n }\n alert(\"\\u30B5\\u30E0\\u30CD\\u30A4\\u30EB\\u306E\\u62E1\\u5F35\\u5B50\\u306F\\\".png\\\", \\\".jpg\\\", \\\".jpeg\\\", \\\".gif\\\"\\u3067\\u3042\\u308B\\u5FC5\\u8981\\u304C\\u3042\\u308A\\u307E\\u3059\\u3002\");\n return _context.abrupt(\"return\");\n case 8:\n _context.next = 10;\n return serverSetting.uploadAssets(index, \"iconFile\", file);\n case 10:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function iconAction(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n var nameValueAction = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee2(index) {\n var p, text;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context2.next = 2;\n break;\n }\n return _context2.abrupt(\"return\");\n case 2:\n // Open Text Input Dialog\n p = new Promise(function (resolve) {\n guiState.setTextInputResolve({\n resolve: resolve\n });\n });\n guiState.stateControls.showTextInputCheckbox.updateState(true);\n _context2.next = 6;\n return p;\n case 6:\n text = _context2.sent;\n if (!(text.length > 0)) {\n _context2.next = 11;\n break;\n }\n console.log(\"input text:\", text);\n _context2.next = 11;\n return serverSetting.updateModelInfo(index, \"name\", text);\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function nameValueAction(_x2) {\n return _ref2.apply(this, arguments);\n };\n }();\n var fileValueAction = function fileValueAction(url) {\n if (url.length == 0) {\n return;\n }\n var link = document.createElement(\"a\");\n link.href = \"./\" + url;\n link.download = url.replace(/^.*[\\\\\\/]/, '');\n link.click();\n link.remove();\n };\n var closeButtonRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-row split-3-4-3 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container body-button-container-space-around\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: function onClick() {\n props.close();\n }\n }, messageBuilderState.getMessage(__filename, \"close\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }));\n var slotRow = serverSetting.serverSetting.modelSlots.map(function (x, index) {\n // モデルのアイコン\n var generateIconArea = function generateIconArea(slotIndex, iconUrl, tooltip) {\n var realIconUrl = iconUrl.length > 0 ? iconUrl : \"/assets/icons/noimage.png\";\n var iconDivClass = tooltip ? \"tooltip\" : \"\";\n var iconClass = tooltip ? \"model-slot-icon-pointable\" : \"model-slot-icon\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: iconDivClass\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"img\", {\n src: realIconUrl,\n className: iconClass,\n onClick: function onClick() {\n iconAction(slotIndex);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin tooltip-text-lower\"\n }, messageBuilderState.getMessage(__filename, \"change_icon\")));\n };\n\n // モデルの名前\n var generateNameRow = function generateNameRow(slotIndex, name, termsOfUseUrl) {\n var nameValueClass = name.length > 0 ? \"model-slot-detail-row-value-pointable tooltip\" : \"model-slot-detail-row-value\";\n var displayName = name.length > 0 ? name : \"blank\";\n var termOfUseUrlLink = termsOfUseUrl.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"a\", {\n href: termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"body-item-text-small\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"[\", slotIndex, \"]\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: nameValueClass,\n onClick: function onClick() {\n nameValueAction(slotIndex);\n }\n }, displayName, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"rename\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }, termOfUseUrlLink));\n };\n\n // モデルを構成するファイル\n var generateFileRow = function generateFileRow(title, filePath) {\n var fileValueClass = filePath.length > 0 ? \"model-slot-detail-row-value-download tooltip\" : \"model-slot-detail-row-value\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: \"\".concat(title),\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, title, \":\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: fileValueClass,\n onClick: function onClick() {\n fileValueAction(filePath);\n }\n }, (0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.trimfileName)(filePath, 20), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"download\"))));\n };\n\n // その他情報欄\n var generateInfoRow = function generateInfoRow(info) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"info: \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, info), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }));\n };\n var iconArea = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var nameRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var fileRows = [];\n var infoRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n if (x.voiceChangerType == \"RVC\") {\n var slotInfo = x;\n iconArea = generateIconArea(index, slotInfo.iconFile, true);\n nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"model\", slotInfo.modelFile));\n fileRows.push(generateFileRow(\"index\", slotInfo.indexFile));\n infoRow = generateInfoRow(\"\".concat(slotInfo.f0 ? \"f0\" : \"nof0\", \", \").concat(slotInfo.samplingRate, \", \").concat(slotInfo.embChannels, \", \").concat(slotInfo.modelType, \", \").concat(slotInfo.defaultTune, \", \").concat(slotInfo.defaultIndexRatio, \", \").concat(slotInfo.defaultProtect));\n } else if (x.voiceChangerType == \"MMVCv13\") {\n var _slotInfo = x;\n iconArea = generateIconArea(index, _slotInfo.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo.name, _slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo.modelFile));\n infoRow = generateInfoRow(\"\");\n } else if (x.voiceChangerType == \"MMVCv15\") {\n var _slotInfo2 = x;\n iconArea = generateIconArea(index, _slotInfo2.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo2.name, _slotInfo2.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo2.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo2.modelFile));\n infoRow = generateInfoRow(\"f0factor:\".concat(_slotInfo2.f0Factor));\n } else if (x.voiceChangerType == \"so-vits-svc-40\") {\n var _slotInfo3 = x;\n iconArea = generateIconArea(index, _slotInfo3.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo3.name, _slotInfo3.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo3.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo3.modelFile));\n fileRows.push(generateFileRow(\"cluster\", _slotInfo3.clusterFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo3.defaultTune, \",cluster:\").concat(_slotInfo3.defaultClusterInferRatio, \",noise:\").concat(_slotInfo3.noiseScale));\n } else if (x.voiceChangerType == \"DDSP-SVC\") {\n var _slotInfo4 = x;\n iconArea = generateIconArea(index, _slotInfo4.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo4.name, _slotInfo4.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo4.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo4.modelFile));\n fileRows.push(generateFileRow(\"diff conf\", _slotInfo4.diffConfigFile));\n fileRows.push(generateFileRow(\"diff model\", _slotInfo4.diffModelFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo4.defaultTune, \",acc:\").concat(_slotInfo4.acc, \",ks:\").concat(_slotInfo4.kstep, \", diff:\").concat(_slotInfo4.diffusion, \",enh:\").concat(_slotInfo4.enhancer));\n } else {\n iconArea = generateIconArea(index, \"/assets/icons/blank.png\", false);\n nameRow = generateNameRow(index, \"\", \"\");\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: index,\n className: \"model-slot\"\n }, iconArea, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail\"\n }, nameRow, fileRows, infoRow), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openFileUploader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"upload\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openSampleDownloader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"sample\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openEditor(index);\n }\n }, messageBuilderState.getMessage(__filename, \"edit\"))));\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"Model Slot Configuration\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-fixed-size-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-container\"\n }, slotRow), closeButtonRow));\n }, [props.screen, serverSetting.serverSetting]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-1_MainScreen.tsx?"); +eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ MainScreen: () => (/* binding */ MainScreen)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/useMessageBuilder */ \"./src/hooks/useMessageBuilder.ts\");\n/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils/utils */ \"./src/utils/utils.ts\");\n\n\n\n\n\n\n\n\nvar MainScreen = function MainScreen(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.useAppState)(),\n serverSetting = _useAppState.serverSetting;\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_3__.useGuiState)();\n var messageBuilderState = (0,_hooks_useMessageBuilder__WEBPACK_IMPORTED_MODULE_6__.useMessageBuilder)();\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n messageBuilderState.setMessage(__filename, \"change_icon\", {\n ja: \"アイコン変更\",\n en: \"chage icon\"\n });\n messageBuilderState.setMessage(__filename, \"rename\", {\n ja: \"リネーム\",\n en: \"rename\"\n });\n messageBuilderState.setMessage(__filename, \"download\", {\n ja: \"ダウンロード\",\n en: \"download\"\n });\n messageBuilderState.setMessage(__filename, \"terms_of_use\", {\n ja: \"利用規約\",\n en: \"terms of use\"\n });\n messageBuilderState.setMessage(__filename, \"sample\", {\n ja: \"サンプル\",\n en: \"DL sample\"\n });\n messageBuilderState.setMessage(__filename, \"upload\", {\n ja: \"アップロード\",\n en: \"upload\"\n });\n messageBuilderState.setMessage(__filename, \"edit\", {\n ja: \"編集\",\n en: \"edit\"\n });\n messageBuilderState.setMessage(__filename, \"close\", {\n ja: \"閉じる\",\n en: \"close\"\n });\n }, []);\n var screen = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n if (props.screen != \"Main\") {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n if (!serverSetting.serverSetting.modelSlots) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n }\n var iconAction = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee(index) {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context.next = 2;\n break;\n }\n return _context.abrupt(\"return\");\n case 2:\n _context.next = 4;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_5__.fileSelector)(\"\");\n case 4:\n file = _context.sent;\n if (!((0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.checkExtention)(file.name, [\"png\", \"jpg\", \"jpeg\", \"gif\"]) == false)) {\n _context.next = 8;\n break;\n }\n alert(\"\\u30B5\\u30E0\\u30CD\\u30A4\\u30EB\\u306E\\u62E1\\u5F35\\u5B50\\u306F\\\".png\\\", \\\".jpg\\\", \\\".jpeg\\\", \\\".gif\\\"\\u3067\\u3042\\u308B\\u5FC5\\u8981\\u304C\\u3042\\u308A\\u307E\\u3059\\u3002\");\n return _context.abrupt(\"return\");\n case 8:\n _context.next = 10;\n return serverSetting.uploadAssets(index, \"iconFile\", file);\n case 10:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function iconAction(_x) {\n return _ref.apply(this, arguments);\n };\n }();\n var nameValueAction = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee2(index) {\n var p, text;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n if (!(!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0)) {\n _context2.next = 2;\n break;\n }\n return _context2.abrupt(\"return\");\n case 2:\n // Open Text Input Dialog\n p = new Promise(function (resolve) {\n guiState.setTextInputResolve({\n resolve: resolve\n });\n });\n guiState.stateControls.showTextInputCheckbox.updateState(true);\n _context2.next = 6;\n return p;\n case 6:\n text = _context2.sent;\n if (!(text.length > 0)) {\n _context2.next = 11;\n break;\n }\n console.log(\"input text:\", text);\n _context2.next = 11;\n return serverSetting.updateModelInfo(index, \"name\", text);\n case 11:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function nameValueAction(_x2) {\n return _ref2.apply(this, arguments);\n };\n }();\n var fileValueAction = function fileValueAction(url) {\n if (url.length == 0) {\n return;\n }\n var link = document.createElement(\"a\");\n link.href = \"./\" + url;\n link.download = url.replace(/^.*[\\\\\\/]/, \"\");\n link.click();\n link.remove();\n };\n var closeButtonRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-row split-3-4-3 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button-container body-button-container-space-around\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: function onClick() {\n props.close();\n }\n }, messageBuilderState.getMessage(__filename, \"close\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"body-item-text\"\n }));\n var slotRow = serverSetting.serverSetting.modelSlots.map(function (x, index) {\n // モデルのアイコン\n var generateIconArea = function generateIconArea(slotIndex, iconUrl, tooltip) {\n var realIconUrl = iconUrl.length > 0 ? iconUrl : \"/assets/icons/noimage.png\";\n var iconDivClass = tooltip ? \"tooltip\" : \"\";\n var iconClass = tooltip ? \"model-slot-icon-pointable\" : \"model-slot-icon\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: iconDivClass\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"img\", {\n src: realIconUrl,\n className: iconClass,\n onClick: function onClick() {\n iconAction(slotIndex);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin tooltip-text-lower\"\n }, messageBuilderState.getMessage(__filename, \"change_icon\")));\n };\n\n // モデルの名前\n var generateNameRow = function generateNameRow(slotIndex, name, termsOfUseUrl) {\n var nameValueClass = name.length > 0 ? \"model-slot-detail-row-value-pointable tooltip\" : \"model-slot-detail-row-value\";\n var displayName = name.length > 0 ? name : \"blank\";\n var termOfUseUrlLink = termsOfUseUrl.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"a\", {\n href: termsOfUseUrl,\n target: \"_blank\",\n rel: \"noopener noreferrer\",\n className: \"body-item-text-small\"\n }, \"[\", messageBuilderState.getMessage(__filename, \"terms_of_use\"), \"]\") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"[\", slotIndex, \"]\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: nameValueClass,\n onClick: function onClick() {\n nameValueAction(slotIndex);\n }\n }, displayName, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"rename\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }, termOfUseUrlLink));\n };\n\n // モデルを構成するファイル\n var generateFileRow = function generateFileRow(title, filePath) {\n var fileValueClass = filePath.length > 0 ? \"model-slot-detail-row-value-download tooltip\" : \"model-slot-detail-row-value\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: \"\".concat(title),\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, title, \":\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: fileValueClass,\n onClick: function onClick() {\n fileValueAction(filePath);\n }\n }, (0,_utils_utils__WEBPACK_IMPORTED_MODULE_7__.trimfileName)(filePath, 20), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"tooltip-text tooltip-text-thin\"\n }, messageBuilderState.getMessage(__filename, \"download\"))));\n };\n\n // その他情報欄\n var generateInfoRow = function generateInfoRow(info) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-label\"\n }, \"info: \"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail-row-value\"\n }, info), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"\"\n }));\n };\n var iconArea = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var nameRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n var fileRows = [];\n var infoRow = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement((react__WEBPACK_IMPORTED_MODULE_2___default().Fragment), null);\n if (x.voiceChangerType == \"RVC\") {\n var slotInfo = x;\n iconArea = generateIconArea(index, slotInfo.iconFile, true);\n nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"model\", slotInfo.modelFile));\n fileRows.push(generateFileRow(\"index\", slotInfo.indexFile));\n infoRow = generateInfoRow(\"\".concat(slotInfo.f0 ? \"f0\" : \"nof0\", \", \").concat(slotInfo.samplingRate, \", \").concat(slotInfo.embChannels, \", \").concat(slotInfo.modelType, \", \").concat(slotInfo.defaultTune, \", \").concat(slotInfo.defaultIndexRatio, \", \").concat(slotInfo.defaultProtect));\n } else if (x.voiceChangerType == \"MMVCv13\") {\n var _slotInfo = x;\n iconArea = generateIconArea(index, _slotInfo.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo.name, _slotInfo.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo.modelFile));\n infoRow = generateInfoRow(\"\");\n } else if (x.voiceChangerType == \"MMVCv15\") {\n var _slotInfo2 = x;\n iconArea = generateIconArea(index, _slotInfo2.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo2.name, _slotInfo2.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo2.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo2.modelFile));\n infoRow = generateInfoRow(\"f0factor:\".concat(_slotInfo2.f0Factor));\n } else if (x.voiceChangerType == \"so-vits-svc-40\") {\n var _slotInfo3 = x;\n iconArea = generateIconArea(index, _slotInfo3.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo3.name, _slotInfo3.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo3.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo3.modelFile));\n fileRows.push(generateFileRow(\"cluster\", _slotInfo3.clusterFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo3.defaultTune, \",cluster:\").concat(_slotInfo3.defaultClusterInferRatio, \",noise:\").concat(_slotInfo3.noiseScale));\n } else if (x.voiceChangerType == \"DDSP-SVC\") {\n var _slotInfo4 = x;\n iconArea = generateIconArea(index, _slotInfo4.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo4.name, _slotInfo4.termsOfUseUrl);\n fileRows.push(generateFileRow(\"config\", _slotInfo4.configFile));\n fileRows.push(generateFileRow(\"model\", _slotInfo4.modelFile));\n fileRows.push(generateFileRow(\"diff conf\", _slotInfo4.diffConfigFile));\n fileRows.push(generateFileRow(\"diff model\", _slotInfo4.diffModelFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo4.defaultTune, \",acc:\").concat(_slotInfo4.acc, \",ks:\").concat(_slotInfo4.kstep, \", diff:\").concat(_slotInfo4.diffusion, \",enh:\").concat(_slotInfo4.enhancer));\n } else if (x.voiceChangerType == \"Diffusion-SVC\") {\n var _slotInfo5 = x;\n iconArea = generateIconArea(index, _slotInfo5.iconFile, true);\n nameRow = generateNameRow(index, _slotInfo5.name, _slotInfo5.termsOfUseUrl);\n fileRows.push(generateFileRow(\"model\", _slotInfo5.modelFile));\n infoRow = generateInfoRow(\"tune:\".concat(_slotInfo5.defaultTune, \",ks(max):\").concat(_slotInfo5.kStepMax, \",ks:\").concat(_slotInfo5.defaultKstep, \", sp:\").concat(_slotInfo5.defaultSpeedup, \", l:\").concat(_slotInfo5.nLayers, \",\").concat(_slotInfo5.nnLayers, \",\"));\n } else {\n iconArea = generateIconArea(index, \"/assets/icons/blank.png\", false);\n nameRow = generateNameRow(index, \"\", \"\");\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n key: index,\n className: \"model-slot\"\n }, iconArea, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-detail\"\n }, nameRow, fileRows, infoRow), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openFileUploader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"upload\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openSampleDownloader(index);\n }\n }, messageBuilderState.getMessage(__filename, \"sample\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-button\",\n onClick: function onClick() {\n props.openEditor(index);\n }\n }, messageBuilderState.getMessage(__filename, \"edit\"))));\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-title\"\n }, \"Model Slot Configuration\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"dialog-fixed-size-content\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2___default().createElement(\"div\", {\n className: \"model-slot-container\"\n }, slotRow), closeButtonRow));\n }, [props.screen, serverSetting.serverSetting]);\n return screen;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904-1_MainScreen.tsx?"); /***/ }), @@ -213,7 +213,7 @@ eval("var __filename = \"/index.js\";\n__webpack_require__.r(__webpack_exports__ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModelSlotManagerDialog: () => (/* binding */ ModelSlotManagerDialog),\n/* harmony export */ ModelSlotManagerDialogScreen: () => (/* binding */ ModelSlotManagerDialogScreen),\n/* harmony export */ ModelSlotSettingMode: () => (/* binding */ ModelSlotSettingMode)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./904-1_MainScreen */ \"./src/components/demo/904-1_MainScreen.tsx\");\n/* harmony import */ var _904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./904-2_SampleDownloader */ \"./src/components/demo/904-2_SampleDownloader.tsx\");\n/* harmony import */ var _904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./904-3_FileUploader */ \"./src/components/demo/904-3_FileUploader.tsx\");\n/* harmony import */ var _904_4_Editor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./904-4_Editor */ \"./src/components/demo/904-4_Editor.tsx\");\n\n\n\n\n\n\n\nvar ModelSlotSettingMode = {\n \"localFile\": \"localFile\",\n \"fromNet\": \"fromNet\"\n};\nvar ModelSlotManagerDialogScreen = {\n \"Main\": \"Main\",\n \"SampleDownloader\": \"SampleDownloader\",\n \"FileUploader\": \"FileUploader\",\n \"Editor\": \"Editor\"\n};\nvar ModelSlotManagerDialog = function ModelSlotManagerDialog() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__.useGuiState)();\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(\"Main\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState, 2),\n screen = _useState2[0],\n setScreen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState3, 2),\n targetIndex = _useState4[0],\n setTargetIndex = _useState4[1];\n var dialog = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n var close = function close() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(false);\n };\n var openSampleDownloader = function openSampleDownloader(index) {\n setTargetIndex(index);\n setScreen(\"SampleDownloader\");\n };\n var openFileUploader = function openFileUploader(index) {\n setTargetIndex(index);\n setScreen(\"FileUploader\");\n };\n var openEditor = function openEditor(index) {\n setTargetIndex(index);\n setScreen(\"Editor\");\n };\n var backToSlotManager = function backToSlotManager() {\n setScreen(\"Main\");\n };\n var mainScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__.MainScreen, {\n screen: screen,\n close: close,\n openSampleDownloader: openSampleDownloader,\n openFileUploader: openFileUploader,\n openEditor: openEditor\n });\n var sampleDownloaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__.SampleDownloaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n var fileUploaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__.FileUploaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n var editorScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_4_Editor__WEBPACK_IMPORTED_MODULE_6__.EditorScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, mainScreen, sampleDownloaderScreen, fileUploaderScreen, editorScreen);\n }, [screen, targetIndex]);\n return dialog;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904_ModelSlotManagerDialog.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ModelSlotManagerDialog: () => (/* binding */ ModelSlotManagerDialog),\n/* harmony export */ ModelSlotManagerDialogScreen: () => (/* binding */ ModelSlotManagerDialogScreen),\n/* harmony export */ ModelSlotSettingMode: () => (/* binding */ ModelSlotSettingMode)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./904-1_MainScreen */ \"./src/components/demo/904-1_MainScreen.tsx\");\n/* harmony import */ var _904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./904-2_SampleDownloader */ \"./src/components/demo/904-2_SampleDownloader.tsx\");\n/* harmony import */ var _904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./904-3_FileUploader */ \"./src/components/demo/904-3_FileUploader.tsx\");\n/* harmony import */ var _904_4_Editor__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./904-4_Editor */ \"./src/components/demo/904-4_Editor.tsx\");\n\n\n\n\n\n\n\nvar ModelSlotSettingMode = {\n localFile: \"localFile\",\n fromNet: \"fromNet\"\n};\nvar ModelSlotManagerDialogScreen = {\n Main: \"Main\",\n SampleDownloader: \"SampleDownloader\",\n FileUploader: \"FileUploader\",\n Editor: \"Editor\"\n};\nvar ModelSlotManagerDialog = function ModelSlotManagerDialog() {\n var guiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_2__.useGuiState)();\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(\"Main\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState, 2),\n screen = _useState2[0],\n setScreen = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(_useState3, 2),\n targetIndex = _useState4[0],\n setTargetIndex = _useState4[1];\n var dialog = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n var close = function close() {\n guiState.stateControls.showModelSlotManagerCheckbox.updateState(false);\n };\n var openSampleDownloader = function openSampleDownloader(index) {\n setTargetIndex(index);\n setScreen(\"SampleDownloader\");\n };\n var openFileUploader = function openFileUploader(index) {\n setTargetIndex(index);\n setScreen(\"FileUploader\");\n };\n var openEditor = function openEditor(index) {\n setTargetIndex(index);\n setScreen(\"Editor\");\n };\n var backToSlotManager = function backToSlotManager() {\n setScreen(\"Main\");\n };\n var mainScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_1_MainScreen__WEBPACK_IMPORTED_MODULE_3__.MainScreen, {\n screen: screen,\n close: close,\n openSampleDownloader: openSampleDownloader,\n openFileUploader: openFileUploader,\n openEditor: openEditor\n });\n var sampleDownloaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_2_SampleDownloader__WEBPACK_IMPORTED_MODULE_4__.SampleDownloaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n var fileUploaderScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_3_FileUploader__WEBPACK_IMPORTED_MODULE_5__.FileUploaderScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n var editorScreen = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_904_4_Editor__WEBPACK_IMPORTED_MODULE_6__.EditorScreen, {\n screen: screen,\n targetIndex: targetIndex,\n close: close,\n backToSlotManager: backToSlotManager\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n className: \"dialog-frame\"\n }, mainScreen, sampleDownloaderScreen, fileUploaderScreen, editorScreen);\n }, [screen, targetIndex]);\n return dialog;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/904_ModelSlotManagerDialog.tsx?"); /***/ }), diff --git a/client/demo/src/components/demo/904-1_MainScreen.tsx b/client/demo/src/components/demo/904-1_MainScreen.tsx index eb0accb3..82620cea 100644 --- a/client/demo/src/components/demo/904-1_MainScreen.tsx +++ b/client/demo/src/components/demo/904-1_MainScreen.tsx @@ -1,156 +1,169 @@ import React, { useMemo } from "react"; import { useGuiState } from "./001_GuiStateProvider"; import { useAppState } from "../../001_provider/001_AppStateProvider"; -import { DDSPSVCModelSlot, MMVCv13ModelSlot, MMVCv15ModelSlot, RVCModelSlot, SoVitsSvc40ModelSlot, fileSelector } from "@dannadori/voice-changer-client-js"; +import { DDSPSVCModelSlot, DiffusionSVCModelSlot, MMVCv13ModelSlot, MMVCv15ModelSlot, RVCModelSlot, SoVitsSvc40ModelSlot, fileSelector } from "@dannadori/voice-changer-client-js"; import { useMessageBuilder } from "../../hooks/useMessageBuilder"; import { ModelSlotManagerDialogScreen } from "./904_ModelSlotManagerDialog"; import { checkExtention, trimfileName } from "../../utils/utils"; export type MainScreenProps = { - screen: ModelSlotManagerDialogScreen - close: () => void - openSampleDownloader: (slotIndex: number) => void - openFileUploader: (slotIndex: number) => void - openEditor: (slotIndex: number) => void -} - + screen: ModelSlotManagerDialogScreen; + close: () => void; + openSampleDownloader: (slotIndex: number) => void; + openFileUploader: (slotIndex: number) => void; + openEditor: (slotIndex: number) => void; +}; export const MainScreen = (props: MainScreenProps) => { - const { serverSetting } = useAppState() - const guiState = useGuiState() - const messageBuilderState = useMessageBuilder() + const { serverSetting } = useAppState(); + const guiState = useGuiState(); + const messageBuilderState = useMessageBuilder(); useMemo(() => { - messageBuilderState.setMessage(__filename, "change_icon", { "ja": "アイコン変更", "en": "chage icon" }) - messageBuilderState.setMessage(__filename, "rename", { "ja": "リネーム", "en": "rename" }) - messageBuilderState.setMessage(__filename, "download", { "ja": "ダウンロード", "en": "download" }) - messageBuilderState.setMessage(__filename, "terms_of_use", { "ja": "利用規約", "en": "terms of use" }) - messageBuilderState.setMessage(__filename, "sample", { "ja": "サンプル", "en": "DL sample" }) - messageBuilderState.setMessage(__filename, "upload", { "ja": "アップロード", "en": "upload" }) - messageBuilderState.setMessage(__filename, "edit", { "ja": "編集", "en": "edit" }) - messageBuilderState.setMessage(__filename, "close", { "ja": "閉じる", "en": "close" }) - }, []) - + messageBuilderState.setMessage(__filename, "change_icon", { ja: "アイコン変更", en: "chage icon" }); + messageBuilderState.setMessage(__filename, "rename", { ja: "リネーム", en: "rename" }); + messageBuilderState.setMessage(__filename, "download", { ja: "ダウンロード", en: "download" }); + messageBuilderState.setMessage(__filename, "terms_of_use", { ja: "利用規約", en: "terms of use" }); + messageBuilderState.setMessage(__filename, "sample", { ja: "サンプル", en: "DL sample" }); + messageBuilderState.setMessage(__filename, "upload", { ja: "アップロード", en: "upload" }); + messageBuilderState.setMessage(__filename, "edit", { ja: "編集", en: "edit" }); + messageBuilderState.setMessage(__filename, "close", { ja: "閉じる", en: "close" }); + }, []); const screen = useMemo(() => { if (props.screen != "Main") { - return <> + return <>; } if (!serverSetting.serverSetting.modelSlots) { - return <> + return <>; } - const iconAction = async (index: number) => { if (!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0) { - return + return; } - const file = await fileSelector("") + const file = await fileSelector(""); if (checkExtention(file.name, ["png", "jpg", "jpeg", "gif"]) == false) { - alert(`サムネイルの拡張子は".png", ".jpg", ".jpeg", ".gif"である必要があります。`) - return + alert(`サムネイルの拡張子は".png", ".jpg", ".jpeg", ".gif"である必要があります。`); + return; } - await serverSetting.uploadAssets(index, "iconFile", file) - } + await serverSetting.uploadAssets(index, "iconFile", file); + }; const nameValueAction = async (index: number) => { if (!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0) { - return + return; } // Open Text Input Dialog const p = new Promise((resolve) => { - guiState.setTextInputResolve({ resolve: resolve }) - }) - guiState.stateControls.showTextInputCheckbox.updateState(true) + guiState.setTextInputResolve({ resolve: resolve }); + }); + guiState.stateControls.showTextInputCheckbox.updateState(true); const text = await p; // Send to Server if (text.length > 0) { - console.log("input text:", text) - await serverSetting.updateModelInfo(index, "name", text) + console.log("input text:", text); + await serverSetting.updateModelInfo(index, "name", text); } - } + }; const fileValueAction = (url: string) => { if (url.length == 0) { - return + return; } - const link = document.createElement("a") - link.href = "./" + url - link.download = url.replace(/^.*[\\\/]/, '') - link.click() - link.remove() - } - - - + const link = document.createElement("a"); + link.href = "./" + url; + link.download = url.replace(/^.*[\\\/]/, ""); + link.click(); + link.remove(); + }; const closeButtonRow = (
-
-
+
-
{ props.close() }} > +
{ + props.close(); + }} + > {messageBuilderState.getMessage(__filename, "close")}
- ) - - + ); const slotRow = serverSetting.serverSetting.modelSlots.map((x, index) => { // モデルのアイコン const generateIconArea = (slotIndex: number, iconUrl: string, tooltip: boolean) => { - const realIconUrl = iconUrl.length > 0 ? iconUrl : "/assets/icons/noimage.png" - const iconDivClass = tooltip ? "tooltip" : "" - const iconClass = tooltip ? "model-slot-icon-pointable" : "model-slot-icon" + const realIconUrl = iconUrl.length > 0 ? iconUrl : "/assets/icons/noimage.png"; + const iconDivClass = tooltip ? "tooltip" : ""; + const iconClass = tooltip ? "model-slot-icon-pointable" : "model-slot-icon"; return (
- { iconAction(slotIndex) }} /> -
- {messageBuilderState.getMessage(__filename, "change_icon")} -
+ { + iconAction(slotIndex); + }} + /> +
{messageBuilderState.getMessage(__filename, "change_icon")}
- ) - } + ); + }; // モデルの名前 const generateNameRow = (slotIndex: number, name: string, termsOfUseUrl: string) => { - const nameValueClass = name.length > 0 ? "model-slot-detail-row-value-pointable tooltip" : "model-slot-detail-row-value" - const displayName = name.length > 0 ? name : "blank" - const termOfUseUrlLink = termsOfUseUrl.length > 0 ? [{messageBuilderState.getMessage(__filename, "terms_of_use")}] : <> + const nameValueClass = name.length > 0 ? "model-slot-detail-row-value-pointable tooltip" : "model-slot-detail-row-value"; + const displayName = name.length > 0 ? name : "blank"; + const termOfUseUrlLink = + termsOfUseUrl.length > 0 ? ( + + [{messageBuilderState.getMessage(__filename, "terms_of_use")}] + + ) : ( + <> + ); return (
[{slotIndex}]
-
{ nameValueAction(slotIndex) }}> +
{ + nameValueAction(slotIndex); + }} + > {displayName} -
- {messageBuilderState.getMessage(__filename, "rename")} -
+
{messageBuilderState.getMessage(__filename, "rename")}
{termOfUseUrlLink}
- ) - } + ); + }; // モデルを構成するファイル const generateFileRow = (title: string, filePath: string) => { - const fileValueClass = filePath.length > 0 ? "model-slot-detail-row-value-download tooltip" : "model-slot-detail-row-value" + const fileValueClass = filePath.length > 0 ? "model-slot-detail-row-value-download tooltip" : "model-slot-detail-row-value"; return (
{title}:
-
{ fileValueAction(filePath) }}> +
{ + fileValueAction(filePath); + }} + > {trimfileName(filePath, 20)} -
- {messageBuilderState.getMessage(__filename, "download")} -
+
{messageBuilderState.getMessage(__filename, "download")}
- ) - } + ); + }; // その他情報欄 const generateInfoRow = (info: string) => { @@ -160,55 +173,60 @@ export const MainScreen = (props: MainScreenProps) => {
{info}
- ) - } + ); + }; - let iconArea = <> - let nameRow = <> - const fileRows = [] - let infoRow = <> + let iconArea = <>; + let nameRow = <>; + const fileRows = []; + let infoRow = <>; if (x.voiceChangerType == "RVC") { - const slotInfo = x as RVCModelSlot - iconArea = generateIconArea(index, slotInfo.iconFile, true) - nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) - fileRows.push(generateFileRow("model", slotInfo.modelFile)) - fileRows.push(generateFileRow("index", slotInfo.indexFile)) - infoRow = generateInfoRow(`${slotInfo.f0 ? "f0" : "nof0"}, ${slotInfo.samplingRate}, ${slotInfo.embChannels}, ${slotInfo.modelType}, ${slotInfo.defaultTune}, ${slotInfo.defaultIndexRatio}, ${slotInfo.defaultProtect}`) + const slotInfo = x as RVCModelSlot; + iconArea = generateIconArea(index, slotInfo.iconFile, true); + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl); + fileRows.push(generateFileRow("model", slotInfo.modelFile)); + fileRows.push(generateFileRow("index", slotInfo.indexFile)); + infoRow = generateInfoRow(`${slotInfo.f0 ? "f0" : "nof0"}, ${slotInfo.samplingRate}, ${slotInfo.embChannels}, ${slotInfo.modelType}, ${slotInfo.defaultTune}, ${slotInfo.defaultIndexRatio}, ${slotInfo.defaultProtect}`); } else if (x.voiceChangerType == "MMVCv13") { - const slotInfo = x as MMVCv13ModelSlot - iconArea = generateIconArea(index, slotInfo.iconFile, true) - nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) - fileRows.push(generateFileRow("config", slotInfo.configFile)) - fileRows.push(generateFileRow("model", slotInfo.modelFile)) - infoRow = generateInfoRow(``) + const slotInfo = x as MMVCv13ModelSlot; + iconArea = generateIconArea(index, slotInfo.iconFile, true); + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl); + fileRows.push(generateFileRow("config", slotInfo.configFile)); + fileRows.push(generateFileRow("model", slotInfo.modelFile)); + infoRow = generateInfoRow(``); } else if (x.voiceChangerType == "MMVCv15") { - const slotInfo = x as MMVCv15ModelSlot - iconArea = generateIconArea(index, slotInfo.iconFile, true) - nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) - fileRows.push(generateFileRow("config", slotInfo.configFile)) - fileRows.push(generateFileRow("model", slotInfo.modelFile)) - infoRow = generateInfoRow((`f0factor:${slotInfo.f0Factor}`)) + const slotInfo = x as MMVCv15ModelSlot; + iconArea = generateIconArea(index, slotInfo.iconFile, true); + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl); + fileRows.push(generateFileRow("config", slotInfo.configFile)); + fileRows.push(generateFileRow("model", slotInfo.modelFile)); + infoRow = generateInfoRow(`f0factor:${slotInfo.f0Factor}`); } else if (x.voiceChangerType == "so-vits-svc-40") { - const slotInfo = x as SoVitsSvc40ModelSlot - iconArea = generateIconArea(index, slotInfo.iconFile, true) - nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) - fileRows.push(generateFileRow("config", slotInfo.configFile)) - fileRows.push(generateFileRow("model", slotInfo.modelFile)) - fileRows.push(generateFileRow("cluster", slotInfo.clusterFile)) - infoRow = generateInfoRow((`tune:${slotInfo.defaultTune},cluster:${slotInfo.defaultClusterInferRatio},noise:${slotInfo.noiseScale}`)) + const slotInfo = x as SoVitsSvc40ModelSlot; + iconArea = generateIconArea(index, slotInfo.iconFile, true); + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl); + fileRows.push(generateFileRow("config", slotInfo.configFile)); + fileRows.push(generateFileRow("model", slotInfo.modelFile)); + fileRows.push(generateFileRow("cluster", slotInfo.clusterFile)); + infoRow = generateInfoRow(`tune:${slotInfo.defaultTune},cluster:${slotInfo.defaultClusterInferRatio},noise:${slotInfo.noiseScale}`); } else if (x.voiceChangerType == "DDSP-SVC") { - const slotInfo = x as DDSPSVCModelSlot - iconArea = generateIconArea(index, slotInfo.iconFile, true) - nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl) - fileRows.push(generateFileRow("config", slotInfo.configFile)) - fileRows.push(generateFileRow("model", slotInfo.modelFile)) - fileRows.push(generateFileRow("diff conf", slotInfo.diffConfigFile)) - fileRows.push(generateFileRow("diff model", slotInfo.diffModelFile)) - infoRow = generateInfoRow((`tune:${slotInfo.defaultTune},acc:${slotInfo.acc},ks:${slotInfo.kstep}, diff:${slotInfo.diffusion},enh:${slotInfo.enhancer}`)) + const slotInfo = x as DDSPSVCModelSlot; + iconArea = generateIconArea(index, slotInfo.iconFile, true); + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl); + fileRows.push(generateFileRow("config", slotInfo.configFile)); + fileRows.push(generateFileRow("model", slotInfo.modelFile)); + fileRows.push(generateFileRow("diff conf", slotInfo.diffConfigFile)); + fileRows.push(generateFileRow("diff model", slotInfo.diffModelFile)); + infoRow = generateInfoRow(`tune:${slotInfo.defaultTune},acc:${slotInfo.acc},ks:${slotInfo.kstep}, diff:${slotInfo.diffusion},enh:${slotInfo.enhancer}`); + } else if (x.voiceChangerType == "Diffusion-SVC") { + const slotInfo = x as DiffusionSVCModelSlot; + iconArea = generateIconArea(index, slotInfo.iconFile, true); + nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl); + fileRows.push(generateFileRow("model", slotInfo.modelFile)); + infoRow = generateInfoRow(`tune:${slotInfo.defaultTune},ks(max):${slotInfo.kStepMax},ks:${slotInfo.defaultKstep}, sp:${slotInfo.defaultSpeedup}, l:${slotInfo.nLayers},${slotInfo.nnLayers},`); } else { - iconArea = generateIconArea(index, "/assets/icons/blank.png", false) - nameRow = generateNameRow(index, "", "") - + iconArea = generateIconArea(index, "/assets/icons/blank.png", false); + nameRow = generateNameRow(index, "", ""); } return (
@@ -219,26 +237,45 @@ export const MainScreen = (props: MainScreenProps) => { {infoRow}
-
{ props.openFileUploader(index) }} >{messageBuilderState.getMessage(__filename, "upload")}
-
{ props.openSampleDownloader(index) }} >{messageBuilderState.getMessage(__filename, "sample")}
-
{ props.openEditor(index) }} >{messageBuilderState.getMessage(__filename, "edit")}
+
{ + props.openFileUploader(index); + }} + > + {messageBuilderState.getMessage(__filename, "upload")} +
+
{ + props.openSampleDownloader(index); + }} + > + {messageBuilderState.getMessage(__filename, "sample")} +
+
{ + props.openEditor(index); + }} + > + {messageBuilderState.getMessage(__filename, "edit")} +
-
- ) - }) +
+ ); + }); return (
Model Slot Configuration
-
- {slotRow} -
+
{slotRow}
{closeButtonRow}
- ) - }, [props.screen, serverSetting.serverSetting]) + ); + }, [props.screen, serverSetting.serverSetting]); - return screen -} + return screen; +}; diff --git a/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx b/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx index 4ffdc33d..77ae3db3 100644 --- a/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx +++ b/client/demo/src/components/demo/904_ModelSlotManagerDialog.tsx @@ -6,68 +6,54 @@ import { FileUploaderScreen } from "./904-3_FileUploader"; import { EditorScreen } from "./904-4_Editor"; export type uploadData = { - slot: number - model: File | null - index: File | null -} + slot: number; + model: File | null; + index: File | null; +}; export const ModelSlotSettingMode = { - "localFile": "localFile", - "fromNet": "fromNet" -} as const -export type ModelSlotSettingMode = typeof ModelSlotSettingMode[keyof typeof ModelSlotSettingMode] + localFile: "localFile", + fromNet: "fromNet", +} as const; +export type ModelSlotSettingMode = (typeof ModelSlotSettingMode)[keyof typeof ModelSlotSettingMode]; export const ModelSlotManagerDialogScreen = { - "Main": "Main", - "SampleDownloader": "SampleDownloader", - "FileUploader": "FileUploader", - "Editor": "Editor" -} as const -export type ModelSlotManagerDialogScreen = typeof ModelSlotManagerDialogScreen[keyof typeof ModelSlotManagerDialogScreen] + Main: "Main", + SampleDownloader: "SampleDownloader", + FileUploader: "FileUploader", + Editor: "Editor", +} as const; +export type ModelSlotManagerDialogScreen = (typeof ModelSlotManagerDialogScreen)[keyof typeof ModelSlotManagerDialogScreen]; export const ModelSlotManagerDialog = () => { - const guiState = useGuiState() - const [screen, setScreen] = useState("Main") - const [targetIndex, setTargetIndex] = useState(0) - + const guiState = useGuiState(); + const [screen, setScreen] = useState("Main"); + const [targetIndex, setTargetIndex] = useState(0); const dialog = useMemo(() => { - const close = () => { guiState.stateControls.showModelSlotManagerCheckbox.updateState(false) } - const openSampleDownloader = (index: number) => { setTargetIndex(index); setScreen("SampleDownloader") } - const openFileUploader = (index: number) => { setTargetIndex(index); setScreen("FileUploader") } - const openEditor = (index: number) => { setTargetIndex(index); setScreen("Editor") } + const close = () => { + guiState.stateControls.showModelSlotManagerCheckbox.updateState(false); + }; + const openSampleDownloader = (index: number) => { + setTargetIndex(index); + setScreen("SampleDownloader"); + }; + const openFileUploader = (index: number) => { + setTargetIndex(index); + setScreen("FileUploader"); + }; + const openEditor = (index: number) => { + setTargetIndex(index); + setScreen("Editor"); + }; - const backToSlotManager = () => { setScreen("Main") } - const mainScreen = ( - - ) - const sampleDownloaderScreen = ( - - ) - const fileUploaderScreen = ( - - ) - const editorScreen = ( - - ) + const backToSlotManager = () => { + setScreen("Main"); + }; + const mainScreen = ; + const sampleDownloaderScreen = ; + const fileUploaderScreen = ; + const editorScreen = ; return (
{mainScreen} @@ -75,10 +61,8 @@ export const ModelSlotManagerDialog = () => { {fileUploaderScreen} {editorScreen}
- ) - }, [screen, targetIndex]) - + ); + }, [screen, targetIndex]); return dialog; - }; diff --git a/client/lib/src/const.ts b/client/lib/src/const.ts index 470aca02..61eec07d 100644 --- a/client/lib/src/const.ts +++ b/client/lib/src/const.ts @@ -276,6 +276,8 @@ export type DiffusionSVCModelSlot = ModelSlot & { defaultKstep : number defaultSpeedup: number kStepMax: number + nLayers: number + nnLayers: number speakers: { [key: number]: string } }