diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index 8c2b4273..de6291c4 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -48,7 +48,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 */ \"useServerSettingArea\": () => (/* binding */ useServerSettingArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__ = __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_4___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\nvar useServerSettingArea = function useServerSettingArea(props) {\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_5__.useState)(false),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n showPyTorch = _useState2[0],\n setShowPyTorch = _useState2[1];\n var uploadeModelRow = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n var _props$clientState$se, _props$clientState$se2, _props$clientState$se3, _props$clientState$se4, _props$clientState$se5, _props$clientState$se6, _props$clientState$se7, _props$clientState$se8, _props$clientState$se9;\n var onPyTorchFileLoadClicked = /*#__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 var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.fileSelector)(\"\");\n case 2:\n file = _context.sent;\n if (!(file.name.endsWith(\".pth\") == false)) {\n _context.next = 6;\n break;\n }\n alert(\"モデルファイルの拡張子はpthである必要があります。\");\n return _context.abrupt(\"return\");\n case 6:\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n pyTorchModel: {\n file: file\n }\n }));\n case 7:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onPyTorchFileLoadClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onPyTorchFileClearClicked = function onPyTorchFileClearClicked() {\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n pyTorchModel: null\n }));\n };\n var onConfigFileLoadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.fileSelector)(\"\");\n case 2:\n file = _context2.sent;\n if (!(file.name.endsWith(\".json\") == false)) {\n _context2.next = 6;\n break;\n }\n alert(\"モデルファイルの拡張子はjsonである必要があります。\");\n return _context2.abrupt(\"return\");\n case 6:\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n configFile: {\n file: file\n }\n }));\n case 7:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onConfigFileLoadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var onConfigFileClearClicked = function onConfigFileClearClicked() {\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n configFile: null\n }));\n };\n var onOnnxFileLoadClicked = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.fileSelector)(\"\");\n case 2:\n file = _context3.sent;\n if (!(file.name.endsWith(\".onnx\") == false)) {\n _context3.next = 6;\n break;\n }\n alert(\"モデルファイルの拡張子はonnxである必要があります。\");\n return _context3.abrupt(\"return\");\n case 6:\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n onnxModel: {\n file: file\n }\n }));\n case 7:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function onOnnxFileLoadClicked() {\n return _ref3.apply(this, arguments);\n };\n }();\n var onOnnxFileClearClicked = function onOnnxFileClearClicked() {\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n onnxModel: null\n }));\n };\n var onModelUploadClicked = /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n props.clientState.serverSetting.loadModel();\n case 1:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function onModelUploadClicked() {\n return _ref4.apply(this, arguments);\n };\n }();\n var uploadButtonClassName = props.clientState.serverSetting.isUploading ? \"body-button-disabled\" : \"body-button\";\n var uploadButtonAction = props.clientState.serverSetting.isUploading ? function () {} : onModelUploadClicked;\n var uploadButtonLabel = props.clientState.serverSetting.isUploading ? \"wait...\" : \"upload\";\n var configFilenameText = ((_props$clientState$se = props.clientState.serverSetting.fileUploadSetting.configFile) === null || _props$clientState$se === void 0 ? void 0 : _props$clientState$se.filename) || ((_props$clientState$se2 = props.clientState.serverSetting.fileUploadSetting.configFile) === null || _props$clientState$se2 === void 0 ? void 0 : (_props$clientState$se3 = _props$clientState$se2.file) === null || _props$clientState$se3 === void 0 ? void 0 : _props$clientState$se3.name) || \"\";\n var onnxModelFilenameText = ((_props$clientState$se4 = props.clientState.serverSetting.fileUploadSetting.onnxModel) === null || _props$clientState$se4 === void 0 ? void 0 : _props$clientState$se4.filename) || ((_props$clientState$se5 = props.clientState.serverSetting.fileUploadSetting.onnxModel) === null || _props$clientState$se5 === void 0 ? void 0 : (_props$clientState$se6 = _props$clientState$se5.file) === null || _props$clientState$se6 === void 0 ? void 0 : _props$clientState$se6.name) || \"\";\n var pyTorchFilenameText = ((_props$clientState$se7 = props.clientState.serverSetting.fileUploadSetting.pyTorchModel) === null || _props$clientState$se7 === void 0 ? void 0 : _props$clientState$se7.filename) || ((_props$clientState$se8 = props.clientState.serverSetting.fileUploadSetting.pyTorchModel) === null || _props$clientState$se8 === void 0 ? void 0 : (_props$clientState$se9 = _props$clientState$se8.file) === null || _props$clientState$se9 === void 0 ? void 0 : _props$clientState$se9.name) || \"\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement((react__WEBPACK_IMPORTED_MODULE_5___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Model Uploader\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"input\", {\n type: \"checkbox\",\n checked: showPyTorch,\n onChange: function onChange(e) {\n setShowPyTorch(e.target.checked);\n }\n }), \" enable PyTorch\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"Config(.json)\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, configFilenameText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onConfigFileLoadClicked\n }, \"select\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onConfigFileClearClicked\n }, \"clear\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"Onnx(.onnx)\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, onnxModelFilenameText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onOnnxFileLoadClicked\n }, \"select\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onOnnxFileClearClicked\n }, \"clear\"))), showPyTorch ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"PyTorch(.pth)\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, pyTorchFilenameText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onPyTorchFileLoadClicked\n }, \"select\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onPyTorchFileClearClicked\n }, \"clear\"))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement((react__WEBPACK_IMPORTED_MODULE_5___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, props.clientState.serverSetting.isUploading ? \"uploading.... \".concat(props.clientState.serverSetting.uploadProgress, \"%\") : \"\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: uploadButtonClassName,\n onClick: uploadButtonAction\n }, uploadButtonLabel))));\n }, [props.clientState.serverSetting.fileUploadSetting, props.clientState.serverSetting.loadModel, props.clientState.serverSetting.isUploading, props.clientState.serverSetting.uploadProgress, showPyTorch]);\n var frameworkRow = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n var onFrameworkChanged = /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n props.clientState.serverSetting.setFramework(val);\n case 1:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function onFrameworkChanged(_x) {\n return _ref5.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Framework\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-select-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"select\", {\n className: \"body-select\",\n value: props.clientState.serverSetting.setting.framework,\n onChange: function onChange(e) {\n onFrameworkChanged(e.target.value);\n }\n }, Object.values(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.Framework).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n }))));\n }, [props.clientState.serverSetting.setting.framework, props.clientState.serverSetting.setFramework]);\n var onnxExecutionProviderRow = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n if (props.clientState.serverSetting.setting.framework != \"ONNX\") {\n return;\n }\n var onOnnxExecutionProviderChanged = /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n props.clientState.serverSetting.setOnnxExecutionProvider(val);\n case 1:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function onOnnxExecutionProviderChanged(_x2) {\n return _ref6.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"OnnxExecutionProvider\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-select-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"select\", {\n className: \"body-select\",\n value: props.clientState.serverSetting.setting.onnxExecutionProvider,\n onChange: function onChange(e) {\n onOnnxExecutionProviderChanged(e.target.value);\n }\n }, Object.values(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.OnnxExecutionProvider).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n }))));\n }, [props.clientState.serverSetting.setting.framework, props.clientState.serverSetting.setting.onnxExecutionProvider, props.clientState.serverSetting.setOnnxExecutionProvider]);\n var serverSetting = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement((react__WEBPACK_IMPORTED_MODULE_5___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-sub-section-title\"\n }, \"Server Setting\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-select-container\"\n })), uploadeModelRow, frameworkRow, onnxExecutionProviderRow);\n }, [uploadeModelRow, frameworkRow, onnxExecutionProviderRow]);\n return {\n serverSetting: serverSetting\n };\n};\n\n//# sourceURL=webpack://demo/./src/101_server_setting.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"useServerSettingArea\": () => (/* binding */ useServerSettingArea)\n/* harmony export */ });\n/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__ = __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_4___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_5__);\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\nvar useServerSettingArea = function useServerSettingArea(props) {\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_5__.useState)(true),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n showPyTorch = _useState2[0],\n setShowPyTorch = _useState2[1];\n var uploadeModelRow = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n var _props$clientState$se, _props$clientState$se2, _props$clientState$se3, _props$clientState$se4, _props$clientState$se5, _props$clientState$se6, _props$clientState$se7, _props$clientState$se8, _props$clientState$se9;\n var onPyTorchFileLoadClicked = /*#__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 var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _context.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.fileSelector)(\"\");\n case 2:\n file = _context.sent;\n if (!(file.name.endsWith(\".pth\") == false)) {\n _context.next = 6;\n break;\n }\n alert(\"モデルファイルの拡張子はpthである必要があります。\");\n return _context.abrupt(\"return\");\n case 6:\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n pyTorchModel: {\n file: file\n }\n }));\n case 7:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onPyTorchFileLoadClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var onPyTorchFileClearClicked = function onPyTorchFileClearClicked() {\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n pyTorchModel: null\n }));\n };\n var onConfigFileLoadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.fileSelector)(\"\");\n case 2:\n file = _context2.sent;\n if (!(file.name.endsWith(\".json\") == false)) {\n _context2.next = 6;\n break;\n }\n alert(\"モデルファイルの拡張子はjsonである必要があります。\");\n return _context2.abrupt(\"return\");\n case 6:\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n configFile: {\n file: file\n }\n }));\n case 7:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onConfigFileLoadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var onConfigFileClearClicked = function onConfigFileClearClicked() {\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n configFile: null\n }));\n };\n var onOnnxFileLoadClicked = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n var file;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.fileSelector)(\"\");\n case 2:\n file = _context3.sent;\n if (!(file.name.endsWith(\".onnx\") == false)) {\n _context3.next = 6;\n break;\n }\n alert(\"モデルファイルの拡張子はonnxである必要があります。\");\n return _context3.abrupt(\"return\");\n case 6:\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n onnxModel: {\n file: file\n }\n }));\n case 7:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function onOnnxFileLoadClicked() {\n return _ref3.apply(this, arguments);\n };\n }();\n var onOnnxFileClearClicked = function onOnnxFileClearClicked() {\n props.clientState.serverSetting.setFileUploadSetting(_objectSpread(_objectSpread({}, props.clientState.serverSetting.fileUploadSetting), {}, {\n onnxModel: null\n }));\n };\n var onModelUploadClicked = /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n props.clientState.serverSetting.loadModel();\n case 1:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function onModelUploadClicked() {\n return _ref4.apply(this, arguments);\n };\n }();\n var uploadButtonClassName = props.clientState.serverSetting.isUploading ? \"body-button-disabled\" : \"body-button\";\n var uploadButtonAction = props.clientState.serverSetting.isUploading ? function () {} : onModelUploadClicked;\n var uploadButtonLabel = props.clientState.serverSetting.isUploading ? \"wait...\" : \"upload\";\n var configFilenameText = ((_props$clientState$se = props.clientState.serverSetting.fileUploadSetting.configFile) === null || _props$clientState$se === void 0 ? void 0 : _props$clientState$se.filename) || ((_props$clientState$se2 = props.clientState.serverSetting.fileUploadSetting.configFile) === null || _props$clientState$se2 === void 0 ? void 0 : (_props$clientState$se3 = _props$clientState$se2.file) === null || _props$clientState$se3 === void 0 ? void 0 : _props$clientState$se3.name) || \"\";\n var onnxModelFilenameText = ((_props$clientState$se4 = props.clientState.serverSetting.fileUploadSetting.onnxModel) === null || _props$clientState$se4 === void 0 ? void 0 : _props$clientState$se4.filename) || ((_props$clientState$se5 = props.clientState.serverSetting.fileUploadSetting.onnxModel) === null || _props$clientState$se5 === void 0 ? void 0 : (_props$clientState$se6 = _props$clientState$se5.file) === null || _props$clientState$se6 === void 0 ? void 0 : _props$clientState$se6.name) || \"\";\n var pyTorchFilenameText = ((_props$clientState$se7 = props.clientState.serverSetting.fileUploadSetting.pyTorchModel) === null || _props$clientState$se7 === void 0 ? void 0 : _props$clientState$se7.filename) || ((_props$clientState$se8 = props.clientState.serverSetting.fileUploadSetting.pyTorchModel) === null || _props$clientState$se8 === void 0 ? void 0 : (_props$clientState$se9 = _props$clientState$se8.file) === null || _props$clientState$se9 === void 0 ? void 0 : _props$clientState$se9.name) || \"\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement((react__WEBPACK_IMPORTED_MODULE_5___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Model Uploader\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"input\", {\n type: \"checkbox\",\n checked: showPyTorch,\n onChange: function onChange(e) {\n setShowPyTorch(e.target.checked);\n }\n }), \" enable PyTorch\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"Config(.json)\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, configFilenameText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onConfigFileLoadClicked\n }, \"select\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onConfigFileClearClicked\n }, \"clear\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"Onnx(.onnx)\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, onnxModelFilenameText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onOnnxFileLoadClicked\n }, \"select\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onOnnxFileClearClicked\n }, \"clear\"))), showPyTorch ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"PyTorch(.pth)\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", null, pyTorchFilenameText)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button\",\n onClick: onPyTorchFileLoadClicked\n }, \"select\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button left-margin-1\",\n onClick: onPyTorchFileClearClicked\n }, \"clear\"))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement((react__WEBPACK_IMPORTED_MODULE_5___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-text\"\n }, props.clientState.serverSetting.isUploading ? \"uploading.... \".concat(props.clientState.serverSetting.uploadProgress, \"%\") : \"\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: uploadButtonClassName,\n onClick: uploadButtonAction\n }, uploadButtonLabel))));\n }, [props.clientState.serverSetting.fileUploadSetting, props.clientState.serverSetting.loadModel, props.clientState.serverSetting.isUploading, props.clientState.serverSetting.uploadProgress, showPyTorch]);\n var frameworkRow = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n var onFrameworkChanged = /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n props.clientState.serverSetting.setFramework(val);\n case 1:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function onFrameworkChanged(_x) {\n return _ref5.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1 guided\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-1\"\n }, \"Framework\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-select-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"select\", {\n className: \"body-select\",\n value: props.clientState.serverSetting.setting.framework,\n onChange: function onChange(e) {\n onFrameworkChanged(e.target.value);\n }\n }, Object.values(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.Framework).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n }))));\n }, [props.clientState.serverSetting.setting.framework, props.clientState.serverSetting.setFramework]);\n var onnxExecutionProviderRow = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n if (props.clientState.serverSetting.setting.framework != \"ONNX\") {\n return;\n }\n var onOnnxExecutionProviderChanged = /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6(val) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n props.clientState.serverSetting.setOnnxExecutionProvider(val);\n case 1:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function onOnnxExecutionProviderChanged(_x2) {\n return _ref6.apply(this, arguments);\n };\n }();\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-item-title left-padding-2\"\n }, \"OnnxExecutionProvider\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-select-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"select\", {\n className: \"body-select\",\n value: props.clientState.serverSetting.setting.onnxExecutionProvider,\n onChange: function onChange(e) {\n onOnnxExecutionProviderChanged(e.target.value);\n }\n }, Object.values(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_4__.OnnxExecutionProvider).map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n }))));\n }, [props.clientState.serverSetting.setting.framework, props.clientState.serverSetting.setting.onnxExecutionProvider, props.clientState.serverSetting.setOnnxExecutionProvider]);\n var serverSetting = (0,react__WEBPACK_IMPORTED_MODULE_5__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement((react__WEBPACK_IMPORTED_MODULE_5___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-row split-3-7 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-sub-section-title\"\n }, \"Server Setting\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_5___default().createElement(\"div\", {\n className: \"body-select-container\"\n })), uploadeModelRow, frameworkRow, onnxExecutionProviderRow);\n }, [uploadeModelRow, frameworkRow, onnxExecutionProviderRow]);\n return {\n serverSetting: serverSetting\n };\n};\n\n//# sourceURL=webpack://demo/./src/101_server_setting.tsx?"); /***/ }), diff --git a/client/demo/src/101_server_setting.tsx b/client/demo/src/101_server_setting.tsx index bcd50c96..8abedef2 100644 --- a/client/demo/src/101_server_setting.tsx +++ b/client/demo/src/101_server_setting.tsx @@ -12,7 +12,7 @@ export type ServerSettingState = { } export const useServerSettingArea = (props: UseServerSettingProps): ServerSettingState => { - const [showPyTorch, setShowPyTorch] = useState(false) + const [showPyTorch, setShowPyTorch] = useState(true) const uploadeModelRow = useMemo(() => { const onPyTorchFileLoadClicked = async () => { const file = await fileSelector("")