diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js
index 96ea00f0..ada74318 100644
--- a/client/demo/dist/index.js
+++ b/client/demo/dist/index.js
@@ -444,7 +444,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 */   QualityArea: () => (/* binding */ QualityArea)\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 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_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\n\n\nvar QualityArea = function QualityArea(props) {\n  var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)(),\n    setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n    serverSetting = _useAppState.serverSetting,\n    setting = _useAppState.setting;\n  var qualityArea = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    if (!serverSetting.updateServerSettings || !setVoiceChangerClientSetting || !serverSetting.serverSetting || !setting) {\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n    }\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-title\"\n    }, \"NOISE:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-field\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-checkbox-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"checkbox\",\n      disabled: serverSetting.serverSetting.enableServerAudio != 0,\n      checked: setting.voiceChangerClientSetting.echoCancel,\n      onChange: function onChange(e) {\n        try {\n          setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n            echoCancel: e.target.checked\n          }));\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, \"Echo\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-checkbox-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"checkbox\",\n      disabled: serverSetting.serverSetting.enableServerAudio != 0,\n      checked: setting.voiceChangerClientSetting.noiseSuppression,\n      onChange: function onChange(e) {\n        try {\n          setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n            noiseSuppression: e.target.checked\n          }));\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, \"Sup1\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-checkbox-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"checkbox\",\n      disabled: serverSetting.serverSetting.enableServerAudio != 0,\n      checked: setting.voiceChangerClientSetting.noiseSuppression2,\n      onChange: function onChange(e) {\n        try {\n          setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n            noiseSuppression2: e.target.checked\n          }));\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }), \"  \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, \"Sup2\"))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-title\"\n    }, \"F0 Det.:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-field\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n      className: \"body-select\",\n      value: serverSetting.serverSetting.f0Detector,\n      onChange: function onChange(e) {\n        serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n          f0Detector: e.target.value\n        }));\n      }\n    }, Object.values(props.detectors).map(function (x) {\n      //@ts-ignore\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n        key: x,\n        value: x\n      }, x);\n    })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-title\"\n    }, \"S.Thresh.:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-field\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-slider-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"config-sub-area-slider-control-kind\"\n    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"config-sub-area-slider-control-slider\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"range\",\n      className: \"config-sub-area-slider-control-slider\",\n      min: \"0.00000\",\n      max: \"0.001\",\n      step: \"0.00001\",\n      value: serverSetting.serverSetting.silentThreshold || 0,\n      onChange: function onChange(e) {\n        serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n          silentThreshold: Number(e.target.value)\n        }));\n      }\n    })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"config-sub-area-slider-control-val\"\n    }, serverSetting.serverSetting.silentThreshold)))));\n  }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setVoiceChangerClientSetting]);\n  return qualityArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-1_QualityArea.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   QualityArea: () => (/* binding */ QualityArea)\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 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_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../001_provider/001_AppRootProvider */ \"./src/001_provider/001_AppRootProvider.tsx\");\n\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\n\n\n\nvar QualityArea = function QualityArea(props) {\n  var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)(),\n    setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n    serverSetting = _useAppState.serverSetting,\n    setting = _useAppState.setting;\n  var _useAppRoot = (0,_001_provider_001_AppRootProvider__WEBPACK_IMPORTED_MODULE_3__.useAppRoot)(),\n    appGuiSettingState = _useAppRoot.appGuiSettingState;\n  var edition = appGuiSettingState.edition;\n  var qualityArea = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    if (!serverSetting.updateServerSettings || !setVoiceChangerClientSetting || !serverSetting.serverSetting || !setting) {\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null);\n    }\n    var generateF0DetOptions = function generateF0DetOptions() {\n      if (edition.indexOf(\"onnxdirectML-cuda\") >= 0) {\n        var recommended = [\"crepe_tiny\", \"rmvpe_onnx\"];\n        return Object.values(props.detectors).map(function (x) {\n          if (recommended.includes(x)) {\n            return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n              key: x,\n              value: x\n            }, x);\n          } else {\n            return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n              key: x,\n              value: x,\n              disabled: true\n            }, x, \"(N/A)\");\n          }\n        });\n      } else {\n        return Object.values(props.detectors).map(function (x) {\n          return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n            key: x,\n            value: x\n          }, x);\n        });\n      }\n    };\n    var f0DetOptions = generateF0DetOptions();\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-title\"\n    }, \"NOISE:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-field\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-checkbox-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"checkbox\",\n      disabled: serverSetting.serverSetting.enableServerAudio != 0,\n      checked: setting.voiceChangerClientSetting.echoCancel,\n      onChange: function onChange(e) {\n        try {\n          setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n            echoCancel: e.target.checked\n          }));\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, \"Echo\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-checkbox-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"checkbox\",\n      disabled: serverSetting.serverSetting.enableServerAudio != 0,\n      checked: setting.voiceChangerClientSetting.noiseSuppression,\n      onChange: function onChange(e) {\n        try {\n          setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n            noiseSuppression: e.target.checked\n          }));\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, \"Sup1\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-noise-checkbox-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"checkbox\",\n      disabled: serverSetting.serverSetting.enableServerAudio != 0,\n      checked: setting.voiceChangerClientSetting.noiseSuppression2,\n      onChange: function onChange(e) {\n        try {\n          setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n            noiseSuppression2: e.target.checked\n          }));\n        } catch (e) {\n          console.error(e);\n        }\n      }\n    }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", null, \"Sup2\"))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-title\"\n    }, \"F0 Det.:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-field\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n      className: \"body-select\",\n      value: serverSetting.serverSetting.f0Detector,\n      onChange: function onChange(e) {\n        serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n          f0Detector: e.target.value\n        }));\n      }\n    }, f0DetOptions))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-title\"\n    }, \"S.Thresh.:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-control-field\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"config-sub-area-slider-control\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"config-sub-area-slider-control-kind\"\n    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"config-sub-area-slider-control-slider\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"range\",\n      className: \"config-sub-area-slider-control-slider\",\n      min: \"0.00000\",\n      max: \"0.001\",\n      step: \"0.00001\",\n      value: serverSetting.serverSetting.silentThreshold || 0,\n      onChange: function onChange(e) {\n        serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n          silentThreshold: Number(e.target.value)\n        }));\n      }\n    })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"config-sub-area-slider-control-val\"\n    }, serverSetting.serverSetting.silentThreshold)))));\n  }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setVoiceChangerClientSetting]);\n  return qualityArea;\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-1_QualityArea.tsx?");
 
 /***/ }),
 
diff --git a/client/demo/src/components/demo/components2/102-1_QualityArea.tsx b/client/demo/src/components/demo/components2/102-1_QualityArea.tsx
index d46dd110..96d26124 100644
--- a/client/demo/src/components/demo/components2/102-1_QualityArea.tsx
+++ b/client/demo/src/components/demo/components2/102-1_QualityArea.tsx
@@ -1,17 +1,52 @@
-import React, { useMemo } from "react"
-import { useAppState } from "../../../001_provider/001_AppStateProvider"
-import { F0Detector, } from "@dannadori/voice-changer-client-js"
+import React, { useMemo } from "react";
+import { useAppState } from "../../../001_provider/001_AppStateProvider";
+import { F0Detector } from "@dannadori/voice-changer-client-js";
+import { useAppRoot } from "../../../001_provider/001_AppRootProvider";
 
 export type QualityAreaProps = {
-    detectors: string[]
-}
+    detectors: string[];
+};
 
 export const QualityArea = (props: QualityAreaProps) => {
-    const { setVoiceChangerClientSetting, serverSetting, setting } = useAppState()
+    const { setVoiceChangerClientSetting, serverSetting, setting } = useAppState();
+    const { appGuiSettingState } = useAppRoot();
+    const edition = appGuiSettingState.edition;
+
     const qualityArea = useMemo(() => {
         if (!serverSetting.updateServerSettings || !setVoiceChangerClientSetting || !serverSetting.serverSetting || !setting) {
-            return <></>
+            return <></>;
         }
+
+        const generateF0DetOptions = () => {
+            if (edition.indexOf("onnxdirectML-cuda") >= 0) {
+                const recommended = ["crepe_tiny", "rmvpe_onnx"];
+                return Object.values(props.detectors).map((x) => {
+                    if (recommended.includes(x)) {
+                        return (
+                            <option key={x} value={x}>
+                                {x}
+                            </option>
+                        );
+                    } else {
+                        return (
+                            <option key={x} value={x} disabled>
+                                {x}(N/A)
+                            </option>
+                        );
+                    }
+                });
+            } else {
+                return Object.values(props.detectors).map((x) => {
+                    return (
+                        <option key={x} value={x}>
+                            {x}
+                        </option>
+                    );
+                });
+            }
+        };
+        const f0DetOptions = generateF0DetOptions();
+
         return (
             <div className="config-sub-area">
                 <div className="config-sub-area-control">
@@ -19,33 +54,49 @@ export const QualityArea = (props: QualityAreaProps) => {
                     <div className="config-sub-area-control-field">
                         <div className="config-sub-area-noise-container">
                             <div className="config-sub-area-noise-checkbox-container">
-                                <input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={setting.voiceChangerClientSetting.echoCancel} onChange={(e) => {
-                                    try {
-                                        setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, echoCancel: e.target.checked })
-                                    } catch (e) {
-                                        console.error(e)
-                                    }
-                                }} /> <span>Echo</span>
-
+                                <input
+                                    type="checkbox"
+                                    disabled={serverSetting.serverSetting.enableServerAudio != 0}
+                                    checked={setting.voiceChangerClientSetting.echoCancel}
+                                    onChange={(e) => {
+                                        try {
+                                            setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, echoCancel: e.target.checked });
+                                        } catch (e) {
+                                            console.error(e);
+                                        }
+                                    }}
+                                />{" "}
+                                <span>Echo</span>
                             </div>
                             <div className="config-sub-area-noise-checkbox-container">
-                                <input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={setting.voiceChangerClientSetting.noiseSuppression} onChange={(e) => {
-                                    try {
-                                        setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, noiseSuppression: e.target.checked })
-                                    } catch (e) {
-                                        console.error(e)
-                                    }
-                                }} /> <span>Sup1</span>
-
+                                <input
+                                    type="checkbox"
+                                    disabled={serverSetting.serverSetting.enableServerAudio != 0}
+                                    checked={setting.voiceChangerClientSetting.noiseSuppression}
+                                    onChange={(e) => {
+                                        try {
+                                            setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, noiseSuppression: e.target.checked });
+                                        } catch (e) {
+                                            console.error(e);
+                                        }
+                                    }}
+                                />{" "}
+                                <span>Sup1</span>
                             </div>
                             <div className="config-sub-area-noise-checkbox-container">
-                                <input type="checkbox" disabled={serverSetting.serverSetting.enableServerAudio != 0} checked={setting.voiceChangerClientSetting.noiseSuppression2} onChange={(e) => {
-                                    try {
-                                        setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, noiseSuppression2: e.target.checked })
-                                    } catch (e) {
-                                        console.error(e)
-                                    }
-                                }} />  <span>Sup2</span>
+                                <input
+                                    type="checkbox"
+                                    disabled={serverSetting.serverSetting.enableServerAudio != 0}
+                                    checked={setting.voiceChangerClientSetting.noiseSuppression2}
+                                    onChange={(e) => {
+                                        try {
+                                            setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, noiseSuppression2: e.target.checked });
+                                        } catch (e) {
+                                            console.error(e);
+                                        }
+                                    }}
+                                />{" "}
+                                <span>Sup2</span>
                             </div>
                         </div>
                     </div>
@@ -53,15 +104,14 @@ export const QualityArea = (props: QualityAreaProps) => {
                 <div className="config-sub-area-control">
                     <div className="config-sub-area-control-title">F0 Det.:</div>
                     <div className="config-sub-area-control-field">
-                        <select className="body-select" value={serverSetting.serverSetting.f0Detector} onChange={(e) => {
-                            serverSetting.updateServerSettings({ ...serverSetting.serverSetting, f0Detector: e.target.value as F0Detector })
-                        }}>
-                            {
-                                Object.values(props.detectors).map(x => {
-                                    //@ts-ignore
-                                    return <option key={x} value={x}>{x}</option>
-                                })
-                            }
+                        <select
+                            className="body-select"
+                            value={serverSetting.serverSetting.f0Detector}
+                            onChange={(e) => {
+                                serverSetting.updateServerSettings({ ...serverSetting.serverSetting, f0Detector: e.target.value as F0Detector });
+                            }}
+                        >
+                            {f0DetOptions}
                         </select>
                     </div>
                 </div>
@@ -71,19 +121,25 @@ export const QualityArea = (props: QualityAreaProps) => {
                         <div className="config-sub-area-slider-control">
                             <span className="config-sub-area-slider-control-kind"></span>
                             <span className="config-sub-area-slider-control-slider">
-                                <input type="range" className="config-sub-area-slider-control-slider" min="0.00000" max="0.001" step="0.00001" value={serverSetting.serverSetting.silentThreshold || 0} onChange={(e) => {
-                                    serverSetting.updateServerSettings({ ...serverSetting.serverSetting, silentThreshold: Number(e.target.value) })
-                                }}></input>
+                                <input
+                                    type="range"
+                                    className="config-sub-area-slider-control-slider"
+                                    min="0.00000"
+                                    max="0.001"
+                                    step="0.00001"
+                                    value={serverSetting.serverSetting.silentThreshold || 0}
+                                    onChange={(e) => {
+                                        serverSetting.updateServerSettings({ ...serverSetting.serverSetting, silentThreshold: Number(e.target.value) });
+                                    }}
+                                ></input>
                             </span>
                             <span className="config-sub-area-slider-control-val">{serverSetting.serverSetting.silentThreshold}</span>
                         </div>
                     </div>
                 </div>
-
             </div>
-        )
-    }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setVoiceChangerClientSetting])
+        );
+    }, [serverSetting.serverSetting, setting, serverSetting.updateServerSettings, setVoiceChangerClientSetting]);
 
-
-    return qualityArea
-}
\ No newline at end of file
+    return qualityArea;
+};