diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js
index 35d2492c..380cade5 100644
--- a/client/demo/dist/index.js
+++ b/client/demo/dist/index.js
@@ -158,7 +158,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 */   \"useSpeakerSetting\": () => (/* binding */ useSpeakerSetting)\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 _components_101_HeaderButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/101_HeaderButton */ \"./src/components/101_HeaderButton.tsx\");\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 useSpeakerSetting = function useSpeakerSetting() {\n  var appState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)();\n  var accodionButton = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var accodionButtonProps = {\n      stateControlCheckbox: appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox,\n      tooltip: \"Open/Close\",\n      onIcon: [\"fas\", \"caret-up\"],\n      offIcon: [\"fas\", \"caret-up\"],\n      animation: _components_101_HeaderButton__WEBPACK_IMPORTED_MODULE_3__.AnimationTypes.spinner,\n      tooltipClass: \"tooltip-right\"\n    };\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_101_HeaderButton__WEBPACK_IMPORTED_MODULE_3__.HeaderButton, accodionButtonProps);\n  }, []);\n  var calcDefaultF0Factor = function calcDefaultF0Factor(srcId, dstId) {\n    var _appState$clientSetti, _appState$clientSetti2;\n    var src = (_appState$clientSetti = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti === void 0 ? void 0 : _appState$clientSetti.find(function (x) {\n      return x.sid == srcId;\n    });\n    var dst = (_appState$clientSetti2 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti2 === void 0 ? void 0 : _appState$clientSetti2.find(function (x) {\n      return x.sid == dstId;\n    });\n    var recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0;\n    return recommendedF0Factor;\n  };\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {\n    var recF0 = calcDefaultF0Factor(appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId);\n    appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n      f0Factor: recF0\n    }));\n  }, [appState.clientSetting.clientSetting.correspondences]);\n  var srcIdRow = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var _appState$clientSetti3, _appState$clientSetti4;\n    var selected = (_appState$clientSetti3 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti3 === void 0 ? void 0 : _appState$clientSetti3.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.srcId;\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-row split-3-2-1-4 left-padding-1 guided\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-title left-padding-1\"\n    }, \"Source Speaker Id\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-select-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n      className: \"body-select\",\n      value: appState.serverSetting.serverSetting.srcId,\n      onChange: function onChange(e) {\n        var recF0 = calcDefaultF0Factor(Number(e.target.value), appState.serverSetting.serverSetting.dstId);\n        appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n          srcId: Number(e.target.value),\n          f0Factor: recF0\n        }));\n      }\n    }, (_appState$clientSetti4 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti4 === void 0 ? void 0 : _appState$clientSetti4.map(function (x) {\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n        key: x.sid,\n        value: x.sid\n      }, x.dirname, \"(\", x.sid, \")\");\n    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, \"F0: \", (selected === null || selected === void 0 ? void 0 : selected.correspondence.toFixed(1)) || \"\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }));\n  }, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings]);\n  var dstIdRow = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var _appState$clientSetti5, _appState$clientSetti6;\n    var selected = (_appState$clientSetti5 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti5 === void 0 ? void 0 : _appState$clientSetti5.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.dstId;\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-row split-3-2-1-4 left-padding-1 guided\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-title left-padding-1\"\n    }, \"Destination Speaker Id\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-select-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n      className: \"body-select\",\n      value: appState.serverSetting.serverSetting.dstId,\n      onChange: function onChange(e) {\n        var recF0 = calcDefaultF0Factor(appState.serverSetting.serverSetting.srcId, Number(e.target.value));\n        appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n          dstId: Number(e.target.value),\n          f0Factor: recF0\n        }));\n      }\n    }, // appState.clientSetting.setting.speakers.map(x => {\n    //     return <option key={x.id} value={x.id}>{x.name}({x.id})</option>\n    // })\n    (_appState$clientSetti6 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti6 === void 0 ? void 0 : _appState$clientSetti6.map(function (x) {\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n        key: x.sid,\n        value: x.sid\n      }, x.dirname, \"(\", x.sid, \")\");\n    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, \"F0: \", (selected === null || selected === void 0 ? void 0 : selected.correspondence.toFixed(1)) || \"\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }));\n  }, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings]);\n\n  // const editSpeakerIdMappingRow = useMemo(() => {\n  //     const onSetSpeakerMappingClicked = async () => {\n  //         const targetId = editSpeakerTargetId\n  //         const targetName = editSpeakerTargetName\n  //         const targetSpeaker = appState.clientSetting.setting.speakers.find(x => { return x.id == targetId })\n  //         if (targetSpeaker) {\n  //             if (targetName.length == 0) { // Delete\n  //                 const newSpeakers = appState.clientSetting.setting.speakers.filter(x => { return x.id != targetId })\n  //                 appState.clientSetting.setSpeakers(newSpeakers)\n  //             } else { // Update\n  //                 targetSpeaker.name = targetName\n  //                 appState.clientSetting.setSpeakers([...appState.clientSetting.setting.speakers])\n  //             }\n  //         } else {\n  //             if (targetName.length == 0) { // Noop\n  //             } else {// add\n  //                 appState.clientSetting.setting.speakers.push({\n  //                     id: targetId,\n  //                     name: targetName\n  //                 })\n  //                 appState.clientSetting.setSpeakers([...appState.clientSetting.setting.speakers])\n  //             }\n  //         }\n  //     }\n  //     return (\n  //         <div className=\"body-row split-3-1-2-4 left-padding-1 guided\">\n  //             <div className=\"body-item-title left-padding-1\">Edit Speaker Mapping</div>\n  //             <div className=\"body-input-container\">\n  //                 <input type=\"number\" min={1} max={256} step={1} value={editSpeakerTargetId} onChange={(e) => {\n  //                     const id = Number(e.target.value)\n  //                     setEditSpeakerTargetId(id)\n  //                     setEditSpeakerTargetName(appState.clientSetting.setting.speakers.find(x => { return x.id == id })?.name || \"\")\n  //                 }} />\n  //             </div>\n  //             <div className=\"body-input-container\">\n  //                 <input type=\"text\" value={editSpeakerTargetName} onChange={(e) => {\n  //                     setEditSpeakerTargetName(e.target.value)\n  //                 }} />\n  //             </div>\n  //             <div className=\"body-button-container\">\n  //                 <div className=\"body-button\" onClick={onSetSpeakerMappingClicked}>set</div>\n  //             </div>\n  //         </div>\n  //     )\n  // }, [appState.clientSetting.setting.speakers, editSpeakerTargetId, editSpeakerTargetName])\n\n  var f0FactorRow = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var _appState$clientSetti7, _appState$clientSetti8;\n    var src = (_appState$clientSetti7 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti7 === void 0 ? void 0 : _appState$clientSetti7.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.srcId;\n    });\n    var dst = (_appState$clientSetti8 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti8 === void 0 ? void 0 : _appState$clientSetti8.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.dstId;\n    });\n    var recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0;\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-row split-3-2-1-4 left-padding-1 guided\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-title left-padding-1\"\n    }, \"F0 Factor\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-input-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"range\",\n      className: \"body-item-input-slider\",\n      min: \"0.1\",\n      max: \"5.0\",\n      step: \"0.1\",\n      value: appState.serverSetting.serverSetting.f0Factor,\n      onChange: function onChange(e) {\n        appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n          f0Factor: Number(e.target.value)\n        }));\n      }\n    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"body-item-input-slider-val\"\n    }, appState.serverSetting.serverSetting.f0Factor.toFixed(1))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }, \"recommend: \", recommendedF0Factor.toFixed(1)));\n  }, [appState.serverSetting.serverSetting.f0Factor, appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings]);\n  var speakerSetting = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"partition\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"partition-header\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"caret\"\n    }, accodionButton), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"title\",\n      onClick: function onClick() {\n        appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox.updateState(!appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox.checked());\n      }\n    }, \"Speaker Setting\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"partition-content\"\n    }, srcIdRow, dstIdRow, f0FactorRow)));\n  }, [srcIdRow, dstIdRow, f0FactorRow]);\n  return {\n    speakerSetting: speakerSetting\n  };\n};\n\n//# sourceURL=webpack://demo/./src/105_speaker_setting.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSpeakerSetting\": () => (/* binding */ useSpeakerSetting)\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 _components_101_HeaderButton__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/101_HeaderButton */ \"./src/components/101_HeaderButton.tsx\");\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 useSpeakerSetting = function useSpeakerSetting() {\n  var appState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)();\n  var accodionButton = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var accodionButtonProps = {\n      stateControlCheckbox: appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox,\n      tooltip: \"Open/Close\",\n      onIcon: [\"fas\", \"caret-up\"],\n      offIcon: [\"fas\", \"caret-up\"],\n      animation: _components_101_HeaderButton__WEBPACK_IMPORTED_MODULE_3__.AnimationTypes.spinner,\n      tooltipClass: \"tooltip-right\"\n    };\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_components_101_HeaderButton__WEBPACK_IMPORTED_MODULE_3__.HeaderButton, accodionButtonProps);\n  }, []);\n  var calcDefaultF0Factor = function calcDefaultF0Factor(srcId, dstId) {\n    var _appState$clientSetti, _appState$clientSetti2;\n    var src = (_appState$clientSetti = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti === void 0 ? void 0 : _appState$clientSetti.find(function (x) {\n      return x.sid == srcId;\n    });\n    var dst = (_appState$clientSetti2 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti2 === void 0 ? void 0 : _appState$clientSetti2.find(function (x) {\n      return x.sid == dstId;\n    });\n    console.log(\"calcDefaultF0Factor\", srcId, dstId, src, dst);\n    var recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0;\n    return recommendedF0Factor;\n  };\n  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {\n    var recF0 = calcDefaultF0Factor(appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId);\n    appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n      f0Factor: recF0\n    }));\n  }, [appState.clientSetting.clientSetting.correspondences]);\n  var srcIdRow = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var _appState$clientSetti3, _appState$clientSetti4;\n    var selected = (_appState$clientSetti3 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti3 === void 0 ? void 0 : _appState$clientSetti3.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.srcId;\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-row split-3-2-1-4 left-padding-1 guided\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-title left-padding-1\"\n    }, \"Source Speaker Id\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-select-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n      className: \"body-select\",\n      value: appState.serverSetting.serverSetting.srcId,\n      onChange: function onChange(e) {\n        var recF0 = calcDefaultF0Factor(Number(e.target.value), appState.serverSetting.serverSetting.dstId);\n        appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n          srcId: Number(e.target.value),\n          f0Factor: recF0\n        }));\n      }\n    }, (_appState$clientSetti4 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti4 === void 0 ? void 0 : _appState$clientSetti4.map(function (x) {\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n        key: x.sid,\n        value: x.sid\n      }, x.dirname, \"(\", x.sid, \")\");\n    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, \"F0: \", (selected === null || selected === void 0 ? void 0 : selected.correspondence.toFixed(1)) || \"\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }));\n  }, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings]);\n  var dstIdRow = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var _appState$clientSetti5, _appState$clientSetti6;\n    var selected = (_appState$clientSetti5 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti5 === void 0 ? void 0 : _appState$clientSetti5.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.dstId;\n    });\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-row split-3-2-1-4 left-padding-1 guided\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-title left-padding-1\"\n    }, \"Destination Speaker Id\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-select-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"select\", {\n      className: \"body-select\",\n      value: appState.serverSetting.serverSetting.dstId,\n      onChange: function onChange(e) {\n        var recF0 = calcDefaultF0Factor(appState.serverSetting.serverSetting.srcId, Number(e.target.value));\n        appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n          dstId: Number(e.target.value),\n          f0Factor: recF0\n        }));\n      }\n    }, // appState.clientSetting.setting.speakers.map(x => {\n    //     return <option key={x.id} value={x.id}>{x.name}({x.id})</option>\n    // })\n    (_appState$clientSetti6 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti6 === void 0 ? void 0 : _appState$clientSetti6.map(function (x) {\n      return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"option\", {\n        key: x.sid,\n        value: x.sid\n      }, x.dirname, \"(\", x.sid, \")\");\n    }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", null, \"F0: \", (selected === null || selected === void 0 ? void 0 : selected.correspondence.toFixed(1)) || \"\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }));\n  }, [appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings]);\n\n  // const editSpeakerIdMappingRow = useMemo(() => {\n  //     const onSetSpeakerMappingClicked = async () => {\n  //         const targetId = editSpeakerTargetId\n  //         const targetName = editSpeakerTargetName\n  //         const targetSpeaker = appState.clientSetting.setting.speakers.find(x => { return x.id == targetId })\n  //         if (targetSpeaker) {\n  //             if (targetName.length == 0) { // Delete\n  //                 const newSpeakers = appState.clientSetting.setting.speakers.filter(x => { return x.id != targetId })\n  //                 appState.clientSetting.setSpeakers(newSpeakers)\n  //             } else { // Update\n  //                 targetSpeaker.name = targetName\n  //                 appState.clientSetting.setSpeakers([...appState.clientSetting.setting.speakers])\n  //             }\n  //         } else {\n  //             if (targetName.length == 0) { // Noop\n  //             } else {// add\n  //                 appState.clientSetting.setting.speakers.push({\n  //                     id: targetId,\n  //                     name: targetName\n  //                 })\n  //                 appState.clientSetting.setSpeakers([...appState.clientSetting.setting.speakers])\n  //             }\n  //         }\n  //     }\n  //     return (\n  //         <div className=\"body-row split-3-1-2-4 left-padding-1 guided\">\n  //             <div className=\"body-item-title left-padding-1\">Edit Speaker Mapping</div>\n  //             <div className=\"body-input-container\">\n  //                 <input type=\"number\" min={1} max={256} step={1} value={editSpeakerTargetId} onChange={(e) => {\n  //                     const id = Number(e.target.value)\n  //                     setEditSpeakerTargetId(id)\n  //                     setEditSpeakerTargetName(appState.clientSetting.setting.speakers.find(x => { return x.id == id })?.name || \"\")\n  //                 }} />\n  //             </div>\n  //             <div className=\"body-input-container\">\n  //                 <input type=\"text\" value={editSpeakerTargetName} onChange={(e) => {\n  //                     setEditSpeakerTargetName(e.target.value)\n  //                 }} />\n  //             </div>\n  //             <div className=\"body-button-container\">\n  //                 <div className=\"body-button\" onClick={onSetSpeakerMappingClicked}>set</div>\n  //             </div>\n  //         </div>\n  //     )\n  // }, [appState.clientSetting.setting.speakers, editSpeakerTargetId, editSpeakerTargetName])\n\n  var f0FactorRow = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    var _appState$clientSetti7, _appState$clientSetti8;\n    var src = (_appState$clientSetti7 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti7 === void 0 ? void 0 : _appState$clientSetti7.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.srcId;\n    });\n    var dst = (_appState$clientSetti8 = appState.clientSetting.clientSetting.correspondences) === null || _appState$clientSetti8 === void 0 ? void 0 : _appState$clientSetti8.find(function (x) {\n      return x.sid == appState.serverSetting.serverSetting.dstId;\n    });\n    var recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0;\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-row split-3-2-1-4 left-padding-1 guided\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-title left-padding-1\"\n    }, \"F0 Factor\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-input-container\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"input\", {\n      type: \"range\",\n      className: \"body-item-input-slider\",\n      min: \"0.1\",\n      max: \"5.0\",\n      step: \"0.1\",\n      value: appState.serverSetting.serverSetting.f0Factor,\n      onChange: function onChange(e) {\n        appState.serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, appState.serverSetting.serverSetting), {}, {\n          f0Factor: Number(e.target.value)\n        }));\n      }\n    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"body-item-input-slider-val\"\n    }, appState.serverSetting.serverSetting.f0Factor.toFixed(1))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"body-item-text\"\n    }, \"recommend: \", recommendedF0Factor.toFixed(1)));\n  }, [appState.serverSetting.serverSetting.f0Factor, appState.serverSetting.serverSetting.srcId, appState.serverSetting.serverSetting.dstId, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings]);\n  var speakerSetting = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function () {\n    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), null, appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox.trigger, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"partition\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"partition-header\"\n    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"caret\"\n    }, accodionButton), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"span\", {\n      className: \"title\",\n      onClick: function onClick() {\n        appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox.updateState(!appState.frontendManagerState.stateControls.openSpeakerSettingCheckbox.checked());\n      }\n    }, \"Speaker Setting\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().createElement(\"div\", {\n      className: \"partition-content\"\n    }, srcIdRow, dstIdRow, f0FactorRow)));\n  }, [srcIdRow, dstIdRow, f0FactorRow]);\n  return {\n    speakerSetting: speakerSetting\n  };\n};\n\n//# sourceURL=webpack://demo/./src/105_speaker_setting.tsx?");
 
 /***/ }),
 
diff --git a/client/demo/src/105_speaker_setting.tsx b/client/demo/src/105_speaker_setting.tsx
index 9d6ac3bb..106e795a 100644
--- a/client/demo/src/105_speaker_setting.tsx
+++ b/client/demo/src/105_speaker_setting.tsx
@@ -24,6 +24,7 @@ export const useSpeakerSetting = () => {
         const dst = appState.clientSetting.clientSetting.correspondences?.find(x => {
             return x.sid == dstId
         })
+        console.log("calcDefaultF0Factor", srcId, dstId, src, dst)
         const recommendedF0Factor = dst && src ? dst.correspondence / src.correspondence : 0
         return recommendedF0Factor
     }
diff --git a/server/voice_changer/VoiceChanger.py b/server/voice_changer/VoiceChanger.py
index 2ef093f7..dd60f55e 100755
--- a/server/voice_changer/VoiceChanger.py
+++ b/server/voice_changer/VoiceChanger.py
@@ -87,8 +87,8 @@ class MockStream:
 @dataclass
 class VocieChangerSettings():
     gpu: int = 0
-    srcId: int = 107
-    dstId: int = 100
+    srcId: int = 0
+    dstId: int = 101
 
     inputSampleRate: int = 48000  # 48000 or 24000