From 7b50b9f0f3a6b0ba80d52bf335a1fb6521f249fb Mon Sep 17 00:00:00 2001
From: w-okada <you@example.com>
Date: Thu, 29 Jun 2023 03:50:38 +0900
Subject: [PATCH] dml gpu switch
---
client/demo/dist/index.js | 2 +-
.../demo/components2/102-2_ConvertArea.tsx | 173 +++++++++++-------
2 files changed, 105 insertions(+), 70 deletions(-)
diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js
index f4631f72..850c5ed0 100644
--- a/client/demo/dist/index.js
+++ b/client/demo/dist/index.js
@@ -400,7 +400,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ConvertArea: () => (/* binding */ ConvertArea)\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_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\nvar ConvertArea = function ConvertArea(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n setWorkletNodeSetting = _useAppState.setWorkletNodeSetting,\n trancateBuffer = _useAppState.trancateBuffer;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var edition = appGuiSettingState.edition;\n var convertArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var nums;\n if (!props.inputChunkNums) {\n nums = [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048];\n } else {\n nums = props.inputChunkNums;\n }\n var gpusEntry = (0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(serverSetting.serverSetting.gpus);\n gpusEntry.push({\n id: -1,\n name: \"cpu\",\n memory: 0\n });\n var gpuSelect = edition.indexOf(\"onnxdirectML-cuda\") >= 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU(dml):\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n 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 serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: serverSetting.serverSetting.gpu == 0 ? -1 : 0\n }));\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n })),\n className: \"config-sub-area-button \"\n }, serverSetting.serverSetting.gpu == 0 ? \"on\" : \"off\")))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.gpu,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: Number(e.target.value)\n }));\n }\n }, gpusEntry.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.id,\n value: x.id\n }, x.name, x.name == \"cpu\" ? \"\" : \"(\".concat((x.memory / 1024 / 1024 / 1024).toFixed(0), \"GB)\"), \" \");\n }))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"CHUNK:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: setting.workletNodeSetting.inputChunkNum,\n onChange: function onChange(e) {\n setWorkletNodeSetting(_objectSpread(_objectSpread({}, setting.workletNodeSetting), {}, {\n inputChunkNum: Number(e.target.value)\n }));\n trancateBuffer();\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverReadChunkSize: Number(e.target.value)\n }));\n }\n }, nums.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x, \" (\", (x * 128 * 1000 / 48000).toFixed(1), \" ms, \", x * 128, \")\");\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"EXTRA:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.extraConvertSize,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n extraConvertSize: Number(e.target.value)\n }));\n trancateBuffer();\n }\n }, [1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n })))), gpuSelect);\n }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setWorkletNodeSetting, edition]);\n return convertArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-2_ConvertArea.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ConvertArea: () => (/* binding */ ConvertArea)\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_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ \"./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\nvar ConvertArea = function ConvertArea(props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n setWorkletNodeSetting = _useAppState.setWorkletNodeSetting,\n trancateBuffer = _useAppState.trancateBuffer;\n var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_6__.useAppRoot)(),\n appGuiSettingState = _useAppRoot.appGuiSettingState;\n var edition = appGuiSettingState.edition;\n var convertArea = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var nums;\n if (!props.inputChunkNums) {\n nums = [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048];\n } else {\n nums = props.inputChunkNums;\n }\n var gpusEntry = (0,_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(serverSetting.serverSetting.gpus);\n gpusEntry.push({\n id: -1,\n name: \"cpu\",\n memory: 0\n });\n var onClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var offClassName = serverSetting.serverSetting.gpu == 0 ? \"config-sub-area-button\" : \"config-sub-area-button-active\";\n var gpuSelect = edition.indexOf(\"onnxdirectML-cuda\") >= 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU(dml):\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee() {\n 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 serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: 0\n }));\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n })),\n className: onClassName\n }, \"on\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: /*#__PURE__*/(0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: -1\n }));\n case 2:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n })),\n className: offClassName\n }, \"off\")))) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"GPU:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.gpu,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n gpu: Number(e.target.value)\n }));\n }\n }, gpusEntry.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.id,\n value: x.id\n }, x.name, x.name == \"cpu\" ? \"\" : \"(\".concat((x.memory / 1024 / 1024 / 1024).toFixed(0), \"GB)\"), \" \");\n }))));\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"CHUNK:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: setting.workletNodeSetting.inputChunkNum,\n onChange: function onChange(e) {\n setWorkletNodeSetting(_objectSpread(_objectSpread({}, setting.workletNodeSetting), {}, {\n inputChunkNum: Number(e.target.value)\n }));\n trancateBuffer();\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverReadChunkSize: Number(e.target.value)\n }));\n }\n }, nums.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x, \" (\", (x * 128 * 1000 / 48000).toFixed(1), \" ms, \", x * 128, \")\");\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"EXTRA:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: serverSetting.serverSetting.extraConvertSize,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n extraConvertSize: Number(e.target.value)\n }));\n trancateBuffer();\n }\n }, [1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x,\n value: x\n }, x);\n })))), gpuSelect);\n }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setWorkletNodeSetting, edition]);\n return convertArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-2_ConvertArea.tsx?");
/***/ }),
diff --git a/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx b/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx
index a9d69fc5..78a05dd8 100644
--- a/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx
+++ b/client/demo/src/components/demo/components2/102-2_ConvertArea.tsx
@@ -1,101 +1,136 @@
-import React, { useMemo } from "react"
-import { useAppState } from "../../../001_provider/001_AppStateProvider"
-import { useAppRoot } from "../../../001_provider/001_AppRootProvider"
+import React, { useMemo } from "react";
+import { useAppState } from "../../../001_provider/001_AppStateProvider";
+import { useAppRoot } from "../../../001_provider/001_AppRootProvider";
export type ConvertProps = {
- inputChunkNums: number[]
-}
-
+ inputChunkNums: number[];
+};
export const ConvertArea = (props: ConvertProps) => {
- const { setting, serverSetting, setWorkletNodeSetting, trancateBuffer } = useAppState()
- const { appGuiSettingState } = useAppRoot()
- const edition = appGuiSettingState.edition
+ const { setting, serverSetting, setWorkletNodeSetting, trancateBuffer } = useAppState();
+ const { appGuiSettingState } = useAppRoot();
+ const edition = appGuiSettingState.edition;
const convertArea = useMemo(() => {
- let nums: number[]
+ let nums: number[];
if (!props.inputChunkNums) {
- nums = [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048]
+ nums = [8, 16, 24, 32, 40, 48, 64, 80, 96, 112, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024, 2048];
} else {
- nums = props.inputChunkNums
+ nums = props.inputChunkNums;
}
- const gpusEntry = [...serverSetting.serverSetting.gpus]
+ const gpusEntry = [...serverSetting.serverSetting.gpus];
gpusEntry.push({
id: -1,
name: "cpu",
- memory: 0
- })
- const gpuSelect = edition.indexOf("onnxdirectML-cuda") >= 0 ? (
- <div className="config-sub-area-control">
- <div className="config-sub-area-control-title">GPU(dml):</div>
- <div className="config-sub-area-control-field">
- <div className="config-sub-area-buttons left-padding-1">
- <div onClick={
- async () => {
- await serverSetting.updateServerSettings({
- ...serverSetting.serverSetting, gpu: serverSetting.serverSetting.gpu == 0 ? -1 : 0
- })
- }} className="config-sub-area-button ">{serverSetting.serverSetting.gpu == 0 ? "on" : "off"}</div>
+ memory: 0,
+ });
+
+ const onClassName = serverSetting.serverSetting.gpu == 0 ? "config-sub-area-button-active" : "config-sub-area-button";
+ const offClassName = serverSetting.serverSetting.gpu == 0 ? "config-sub-area-button" : "config-sub-area-button-active";
+
+ const gpuSelect =
+ edition.indexOf("onnxdirectML-cuda") >= 0 ? (
+ <div className="config-sub-area-control">
+ <div className="config-sub-area-control-title">GPU(dml):</div>
+ <div className="config-sub-area-control-field">
+ <div className="config-sub-area-buttons">
+ <div
+ onClick={async () => {
+ await serverSetting.updateServerSettings({
+ ...serverSetting.serverSetting,
+ gpu: 0,
+ });
+ }}
+ className={onClassName}
+ >
+ on
+ </div>
+ <div
+ onClick={async () => {
+ await serverSetting.updateServerSettings({
+ ...serverSetting.serverSetting,
+ gpu: -1,
+ });
+ }}
+ className={offClassName}
+ >
+ off
+ </div>
+ </div>
</div>
</div>
- </div >
-
- ) : (
- <div className="config-sub-area-control">
- <div className="config-sub-area-control-title">GPU:</div>
- <div className="config-sub-area-control-field">
- <select className="body-select" value={serverSetting.serverSetting.gpu} onChange={(e) => {
- serverSetting.updateServerSettings({ ...serverSetting.serverSetting, gpu: Number(e.target.value) })
- }}>
- {
- gpusEntry.map(x => {
- return <option key={x.id} value={x.id}>{x.name}{x.name == "cpu" ? "" : `(${(x.memory / 1024 / 1024 / 1024).toFixed(0)}GB)`} </option>
- })
- }
- </select>
+ ) : (
+ <div className="config-sub-area-control">
+ <div className="config-sub-area-control-title">GPU:</div>
+ <div className="config-sub-area-control-field">
+ <select
+ className="body-select"
+ value={serverSetting.serverSetting.gpu}
+ onChange={(e) => {
+ serverSetting.updateServerSettings({ ...serverSetting.serverSetting, gpu: Number(e.target.value) });
+ }}
+ >
+ {gpusEntry.map((x) => {
+ return (
+ <option key={x.id} value={x.id}>
+ {x.name}
+ {x.name == "cpu" ? "" : `(${(x.memory / 1024 / 1024 / 1024).toFixed(0)}GB)`}{" "}
+ </option>
+ );
+ })}
+ </select>
+ </div>
</div>
- </div>
-
- )
+ );
return (
<div className="config-sub-area">
<div className="config-sub-area-control">
<div className="config-sub-area-control-title">CHUNK:</div>
<div className="config-sub-area-control-field">
- <select className="body-select" value={setting.workletNodeSetting.inputChunkNum} onChange={(e) => {
- setWorkletNodeSetting({ ...setting.workletNodeSetting, inputChunkNum: Number(e.target.value) })
- trancateBuffer()
- serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverReadChunkSize: Number(e.target.value) })
- }}>
- {
- nums.map(x => {
- return <option key={x} value={x}>{x} ({(x * 128 * 1000 / 48000).toFixed(1)} ms, {x * 128})</option>
- })
- }
+ <select
+ className="body-select"
+ value={setting.workletNodeSetting.inputChunkNum}
+ onChange={(e) => {
+ setWorkletNodeSetting({ ...setting.workletNodeSetting, inputChunkNum: Number(e.target.value) });
+ trancateBuffer();
+ serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverReadChunkSize: Number(e.target.value) });
+ }}
+ >
+ {nums.map((x) => {
+ return (
+ <option key={x} value={x}>
+ {x} ({((x * 128 * 1000) / 48000).toFixed(1)} ms, {x * 128})
+ </option>
+ );
+ })}
</select>
-
</div>
</div>
<div className="config-sub-area-control">
<div className="config-sub-area-control-title">EXTRA:</div>
<div className="config-sub-area-control-field">
- <select className="body-select" value={serverSetting.serverSetting.extraConvertSize} onChange={(e) => {
- serverSetting.updateServerSettings({ ...serverSetting.serverSetting, extraConvertSize: Number(e.target.value) })
- trancateBuffer()
- }}>
- {
- [1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map(x => {
- return <option key={x} value={x}>{x}</option>
- })
- }
+ <select
+ className="body-select"
+ value={serverSetting.serverSetting.extraConvertSize}
+ onChange={(e) => {
+ serverSetting.updateServerSettings({ ...serverSetting.serverSetting, extraConvertSize: Number(e.target.value) });
+ trancateBuffer();
+ }}
+ >
+ {[1024 * 4, 1024 * 8, 1024 * 16, 1024 * 32, 1024 * 64, 1024 * 128].map((x) => {
+ return (
+ <option key={x} value={x}>
+ {x}
+ </option>
+ );
+ })}
</select>
</div>
</div>
{gpuSelect}
</div>
- )
- }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setWorkletNodeSetting, edition])
+ );
+ }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setWorkletNodeSetting, edition]);
-
- return convertArea
-}
\ No newline at end of file
+ return convertArea;
+};