From e4c5ce27e11fd0c50217743bbaf769f2b9e8afbd Mon Sep 17 00:00:00 2001 From: wataru Date: Thu, 3 Nov 2022 04:05:42 +0900 Subject: [PATCH] update --- demo/MMVCServerSIO.py | 46 +++++- demo/mods/VoiceChanger.py | 37 +++-- demo/mods/Whisper.py | 36 +++++ frontend/dist/assets/setting.json | 41 ++++- frontend/dist/assets/setting_mmvc.json | 41 ++++- frontend/dist/index.js | 202 ++++++++++++++++++++----- trainer/Dockerfile | 2 +- 7 files changed, 329 insertions(+), 76 deletions(-) create mode 100755 demo/mods/Whisper.py diff --git a/demo/MMVCServerSIO.py b/demo/MMVCServerSIO.py index 3efa4623..04f4b86d 100755 --- a/demo/MMVCServerSIO.py +++ b/demo/MMVCServerSIO.py @@ -22,6 +22,7 @@ import numpy as np from mods.ssl import create_self_signed_cert from mods.VoiceChanger import VoiceChanger +from mods.Whisper import Whisper class UvicornSuppressFilter(logging.Filter): def filter(self, record): @@ -40,6 +41,7 @@ class VoiceModel(BaseModel): srcId: int dstId: int timestamp: int + prefixChunkSize: int buffer: str @@ -52,8 +54,23 @@ class MyCustomNamespace(socketio.AsyncNamespace): self.voiceChanger.destroy() self.voiceChanger = VoiceChanger(config, model) - def changeVoice(self, gpu, srcId, dstId, timestamp, unpackedData): - return self.voiceChanger.on_request(gpu, srcId, dstId, timestamp, unpackedData) + def loadWhisperModel(self, model): + self.whisper = Whisper() + self.whisper.loadModel("tiny") + print("load") + + def changeVoice(self, gpu, srcId, dstId, timestamp, prefixChunkSize, unpackedData): + if hasattr(self, 'whisper') == True: + self.whisper.addData(unpackedData) + + return self.voiceChanger.on_request(gpu, srcId, dstId, timestamp, prefixChunkSize, unpackedData) + + def transcribe(self): + if hasattr(self, 'whisper') == True: + self.whisper.transcribe(0) + else: + print("whisper not found") + def on_connect(self, sid, environ): # print('[{}] connet sid : {}'.format(datetime.now().strftime('%Y-%m-%d %H:%M:%S') , sid)) @@ -65,10 +82,11 @@ class MyCustomNamespace(socketio.AsyncNamespace): srcId = int(msg[1]) dstId = int(msg[2]) timestamp = int(msg[3]) - data = msg[4] + prefixChunkSize = int(msg[4]) + data = msg[5] # print(srcId, dstId, timestamp) unpackedData = np.array(struct.unpack('<%sh'%(len(data) // struct.calcsize(' unpackedData.shape[0]: + # prevLastFragment = self.prev_audio[-unpackedData.shape[0]:] + # curSecondLastFragment = audio1[-unpackedData.shape[0]*2:-unpackedData.shape[0]] + # print("prev, cur", prevLastFragment.shape, curSecondLastFragment.shape) + # self.prev_audio = audio1 + # print("self.prev_audio", self.prev_audio.shape) + + audio1 = audio1[-unpackedData.shape[0]*2:] + + except Exception as e: print("VC PROCESSING!!!! EXCEPTION!!!", e) print(traceback.format_exc()) diff --git a/demo/mods/Whisper.py b/demo/mods/Whisper.py new file mode 100755 index 00000000..da4c7c42 --- /dev/null +++ b/demo/mods/Whisper.py @@ -0,0 +1,36 @@ +import whisper +import numpy as np +import torchaudio +from scipy.io.wavfile import write + +_MODELS = { + "tiny": "/whisper/tiny.pt", + "base": "/whisper/base.pt", + "small": "/whisper/small.pt", + "medium": "/whisper/medium.pt", +} + + +class Whisper(): + def __init__(self): + self.storedSizeFromTry = 0 + + def loadModel(self, model): + # self.model = whisper.load_model(_MODELS[model], device="cpu") + self.model = whisper.load_model(_MODELS[model]) + self.data = np.zeros(1).astype(np.float) + + def addData(self, unpackedData): + self.data = np.concatenate([self.data, unpackedData], 0) + + def transcribe(self, audio): + received_data_file = "received_data.wav" + write(received_data_file, 24000, self.data.astype(np.int16)) + source, sr = torchaudio.load(received_data_file) + target = torchaudio.functional.resample(source, 24000, 16000) + result = self.model.transcribe(received_data_file) + print("WHISPER1:::", result["text"]) + print("WHISPER2:::", result["segments"]) + self.data = np.zeros(1).astype(np.float) + return result["text"] + diff --git a/frontend/dist/assets/setting.json b/frontend/dist/assets/setting.json index 1da57d9a..967e98fc 100755 --- a/frontend/dist/assets/setting.json +++ b/frontend/dist/assets/setting.json @@ -6,21 +6,44 @@ "buffer_size": 1024, "prefix_chunk_size": 24, "chunk_size": 24, - "speaker_ids": [100, 107, 101, 102, 103], - "speaker_names": ["ずんだもん", "user", "そら", "めたん", "つむぎ"], + "speakers": [ + { + "id": 100, + "name": "ずんだもん" + }, + { + "id": 107, + "name": "user" + }, + { + "id": 101, + "name": "そら" + }, + { + "id": 102, + "name": "めたん" + }, + { + "id": 103, + "name": "つむぎ" + } + ], "src_id": 107, "dst_id": 100, "vf_enable": true, "voice_changer_mode": "realtime", "gpu": 0, "available_gpus": [-1, 0, 1, 2, 3, 4], + "screen": { + "enable_screen": true, + "backgournd_image_url": "./assets/images/bg_natural_sougen.jpg" + }, "avatar": { - "enable_avatar": true, - "motion_capture_face": true, - "motion_capture_upperbody": true, - "lip_overwrite_with_voice": true, + "enable_avatar": false, + "motion_capture_face": false, + "motion_capture_upperbody": false, + "lip_overwrite_with_voice": false, "avatar_url": "./assets/vrm/zundamon/zundamon.vrm", - "backgournd_image_url": "./assets/images/bg_natural_sougen.jpg", "background_color": "#0000dd", "chroma_key": "#0000dd", "avatar_canvas_size": [1280, 720], @@ -34,5 +57,9 @@ "cross_fade_offset_rate": 0.3, "cross_fade_end_rate": 0.6, "cross_fade_type": 2 + }, + "transcribe": { + "lang": "日本語(ja-JP)", + "expire_time": 5 } } diff --git a/frontend/dist/assets/setting_mmvc.json b/frontend/dist/assets/setting_mmvc.json index 1da57d9a..967e98fc 100755 --- a/frontend/dist/assets/setting_mmvc.json +++ b/frontend/dist/assets/setting_mmvc.json @@ -6,21 +6,44 @@ "buffer_size": 1024, "prefix_chunk_size": 24, "chunk_size": 24, - "speaker_ids": [100, 107, 101, 102, 103], - "speaker_names": ["ずんだもん", "user", "そら", "めたん", "つむぎ"], + "speakers": [ + { + "id": 100, + "name": "ずんだもん" + }, + { + "id": 107, + "name": "user" + }, + { + "id": 101, + "name": "そら" + }, + { + "id": 102, + "name": "めたん" + }, + { + "id": 103, + "name": "つむぎ" + } + ], "src_id": 107, "dst_id": 100, "vf_enable": true, "voice_changer_mode": "realtime", "gpu": 0, "available_gpus": [-1, 0, 1, 2, 3, 4], + "screen": { + "enable_screen": true, + "backgournd_image_url": "./assets/images/bg_natural_sougen.jpg" + }, "avatar": { - "enable_avatar": true, - "motion_capture_face": true, - "motion_capture_upperbody": true, - "lip_overwrite_with_voice": true, + "enable_avatar": false, + "motion_capture_face": false, + "motion_capture_upperbody": false, + "lip_overwrite_with_voice": false, "avatar_url": "./assets/vrm/zundamon/zundamon.vrm", - "backgournd_image_url": "./assets/images/bg_natural_sougen.jpg", "background_color": "#0000dd", "chroma_key": "#0000dd", "avatar_canvas_size": [1280, 720], @@ -34,5 +57,9 @@ "cross_fade_offset_rate": 0.3, "cross_fade_end_rate": 0.6, "cross_fade_type": 2 + }, + "transcribe": { + "lang": "日本語(ja-JP)", + "expire_time": 5 } } diff --git a/frontend/dist/index.js b/frontend/dist/index.js index 8f16e86e..8562e5fc 100755 --- a/frontend/dist/index.js +++ b/frontend/dist/index.js @@ -2907,7 +2907,18 @@ eval("/*!\n * The buffer module from node.js, for the browser.\n *\n * @author /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_010_Frame_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./010_Frame.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/010_Frame.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_020_Header_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./020_Header.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/020_Header.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_030_Body_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./030_Body.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/030_Body.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_040_RightSidebar_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./040_RightSidebar.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/040_RightSidebar.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/101_RotatedButton.css\");\n// Imports\n\n\n\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_010_Frame_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_020_Header_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_030_Body_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_040_RightSidebar_css__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \":root {\\n --text-color: #333;\\n --company-color1: rgba(64, 119, 187, 1);\\n --company-color2: rgba(29, 47, 78, 1);\\n --company-color3: rgba(255, 255, 255, 1);\\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\\n --global-shadow-color: rgba(0, 0, 0, 0.4);\\n\\n --sidebar-transition-time: 0.3s;\\n --sidebar-transition-animation: ease-in-out;\\n\\n --header-height: 1.5rem;\\n --right-sidebar-width: 320px;\\n\\n --dialog-border-color: rgba(100, 100, 100, 1);\\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\\n --dialog-background-color: rgba(255, 255, 255, 1);\\n --dialog-primary-color: rgba(19, 70, 209, 1);\\n --dialog-active-color: rgba(40, 70, 209, 1);\\n --dialog-input-border-color: rgba(200, 200, 200, 1);\\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n font-family: \\\"Poppins\\\", sans-serif;\\n}\\nhtml {\\n font-size: 16px;\\n}\\nbody {\\n height: 100%;\\n width: 100%;\\n color: var(--text-color);\\n background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%);\\n}\\n\\n.application-container {\\n position: relative;\\n height: 100vh;\\n width: 100%;\\n overflow: hidden;\\n list-style-type: none;\\n}\\n\\n.state-control-checkbox {\\n display: none;\\n}\\n\\n.video-for-recorder-container {\\n position: absolute;\\n left: -1000px;\\n width: 30px;\\n height: 30px;\\n}\\n\\n/* */\\n/* */\\n/* */\\n/* start button */\\n.front-container {\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n margin-top: 30px;\\n}\\n.front-title {\\n font-size: 4rem;\\n font-weight: 100;\\n}\\n.front-description {\\n font-size: 0.9rem;\\n text-align: center;\\n}\\n.front-description-img {\\n height: 2rem;\\n}\\n.front-description-strong {\\n color: #f66;\\n font-size: 0.9rem;\\n font-weight: 600;\\n}\\n.front-start-button {\\n font-size: 4rem;\\n border: 3px solid #333;\\n background: #eef;\\n width: 500px;\\n padding: 15px;\\n cursor: pointer;\\n text-align: center;\\n margin: 100px 0 0 0 auto;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n.front-note {\\n font-size: 1rem;\\n}\\n.front-attention {\\n font-size: 0.8rem;\\n color: #f55;\\n font-weight: 600;\\n}\\n.front-disclaimer {\\n font-size: 0.8rem;\\n}\\n\\n.voice-loader-audio-player {\\n height: 50px;\\n width: 100%;\\n margin: 5px 5% 5px 5%;\\n background: #444;\\n /* box-shadow: 0 0 20px 0 #000a; */\\n\\n font-family: arial;\\n color: white;\\n font-size: 0.75em;\\n overflow: hidden;\\n\\n display: grid;\\n grid-template-rows: 10px auto;\\n}\\n.voice-loader-audio-player-timeline {\\n background: white;\\n width: 100%;\\n position: relative;\\n cursor: pointer;\\n box-shadow: 0 2px 10px 0 #0008;\\n}\\n.voice-loader-audio-player-progress {\\n background: coral;\\n width: 0%;\\n height: 100%;\\n transition: 0.25s;\\n}\\n.voice-loader-audio-player-controls {\\n display: flex;\\n justify-content: space-between;\\n align-items: stretch;\\n padding: 0 20px;\\n font-weight: 100;\\n}\\n.voice-loader-audio-player-controls > * {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n }\\n.voice-loader-audio-player-controls .toggle-play.play {\\n cursor: pointer;\\n position: relative;\\n left: 0;\\n height: 0;\\n width: 0;\\n border: 7px solid #0000;\\n border-left: 13px solid white;\\n }\\n.voice-loader-audio-player-controls .toggle-play.play:hover {\\n transform: scale(1.1);\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause {\\n height: 15px;\\n width: 20px;\\n cursor: pointer;\\n position: relative;\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause:before {\\n position: absolute;\\n top: 0;\\n left: 0px;\\n background: white;\\n content: \\\"\\\";\\n height: 15px;\\n width: 3px;\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause:after {\\n position: absolute;\\n top: 0;\\n right: 8px;\\n background: white;\\n content: \\\"\\\";\\n height: 15px;\\n width: 3px;\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause:hover {\\n transform: scale(1.1);\\n }\\n.voice-loader-audio-player-time {\\n display: flex;\\n widht: 200px;\\n}\\n.voice-loader-audio-player-time > * {\\n padding: 2px;\\n }\\n\\n.voice-loader-audio-player-volume-container {\\n cursor: pointer;\\n\\n position: relative;\\n z-index: 2;\\n}\\n\\n.voice-loader-audio-player-volume-container .voice-loader-audio-player-volume-slider {\\n position: absolute;\\n left: -3px;\\n top: 15px;\\n z-index: -1;\\n width: 0;\\n height: 15px;\\n background: white;\\n box-shadow: 0 0 20px #000a;\\n transition: 0.25s;\\n }\\n\\n.voice-loader-audio-player-volume-container .voice-loader-audio-player-volume-slider .voice-loader-audio-player-volume-percentage {\\n background: coral;\\n height: 100%;\\n width: 75%;\\n }\\n\\n.voice-loader-audio-player-volume-container:hover .voice-loader-audio-player-volume-slider {\\n left: -123px;\\n width: 120px;\\n }\\n.voice-loader-audio-player-volume-button {\\n height: 26px;\\n display: flex;\\n align-items: center;\\n}\\n.voice-loader-audio-player-volume-button .volume {\\n transform: scale(0.7);\\n }\\n.voice-loader-audio-player-button {\\n cursor: pointer;\\n}\\n.voice-loader-audio-player-button:hover {\\n font-weight: 600;\\n }\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/001_App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_002_Front_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./002_Front.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/002_Front.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_010_Frame_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./010_Frame.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/010_Frame.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_020_Header_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./020_Header.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/020_Header.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_030_Body_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./030_Body.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/030_Body.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_040_RightSidebar_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./040_RightSidebar.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/040_RightSidebar.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_090_Dialog_css__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./090_Dialog.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/090_Dialog.css\");\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./101_RotatedButton.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/101_RotatedButton.css\");\n// Imports\n\n\n\n\n\n\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_002_Front_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_010_Frame_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_020_Header_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_030_Body_css__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_040_RightSidebar_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_090_Dialog_css__WEBPACK_IMPORTED_MODULE_7__[\"default\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_101_RotatedButton_css__WEBPACK_IMPORTED_MODULE_8__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \":root {\\n --text-color: #333;\\n --company-color1: rgba(64, 119, 187, 1);\\n --company-color2: rgba(29, 47, 78, 1);\\n --company-color3: rgba(255, 255, 255, 1);\\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\\n --global-shadow-color: rgba(0, 0, 0, 0.4);\\n\\n --sidebar-transition-time: 0.3s;\\n --sidebar-transition-animation: ease-in-out;\\n\\n --header-height: 1.5rem;\\n --right-sidebar-width: 320px;\\n\\n --dialog-border-color: rgba(100, 100, 100, 1);\\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\\n --dialog-background-color: rgba(255, 255, 255, 1);\\n --dialog-primary-color: rgba(19, 70, 209, 1);\\n --dialog-active-color: rgba(40, 70, 209, 1);\\n --dialog-input-border-color: rgba(200, 200, 200, 1);\\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n font-family: \\\"Poppins\\\", sans-serif;\\n}\\nhtml {\\n font-size: 16px;\\n}\\nbody {\\n height: 100%;\\n width: 100%;\\n color: var(--text-color);\\n background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%);\\n}\\n\\n.application-container {\\n position: relative;\\n height: 100vh;\\n width: 100%;\\n overflow: hidden;\\n list-style-type: none;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/001_App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/002_Front.css": +/*!***********************************************************************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/002_Front.css ***! + \***********************************************************************************************************************************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".front-container {\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n margin-top: 30px;\\n}\\n.front-title {\\n font-size: 4rem;\\n font-weight: 100;\\n}\\n.front-description {\\n font-size: 0.9rem;\\n text-align: center;\\n}\\n.front-description-img {\\n height: 2rem;\\n width: 50%;\\n height: 50%;\\n border: 3px solid;\\n}\\n.front-description-strong {\\n color: #f66;\\n font-size: 0.9rem;\\n font-weight: 600;\\n}\\n.front-start-button {\\n font-size: 4rem;\\n border: 3px solid #333;\\n background: #eef;\\n width: 500px;\\n padding: 15px;\\n cursor: pointer;\\n text-align: center;\\n margin: 100px 0 0 0 auto;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n.front-note {\\n font-size: 1rem;\\n}\\n.front-attention {\\n font-size: 0.8rem;\\n color: #f55;\\n font-weight: 600;\\n}\\n.front-disclaimer {\\n font-size: 0.8rem;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/002_Front.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), @@ -2929,7 +2940,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* Header */\\n.header {\\n height: 100%;\\n width: 100vw;\\n background: #ffe;\\n display: flex;\\n justify-content: space-between;\\n}\\n.header-application-title-container {\\n display: flex;\\n}\\n.header-application-title-logo {\\n width: var(--header-height);\\n height: var(--header-height);\\n padding: 2px 2px 2px 2px;\\n margin: 0px 2px 0px 5px;\\n}\\n.header-application-title-text {\\n font-weight: 600;\\n margin: 0px 2px 0px 2px;\\n}\\n\\n.header-device-selector-container {\\n margin: 0 10px 0 0;\\n display: flex;\\n}\\n.header-device-selector-text {\\n margin: 0px 2px 0px 10px;\\n}\\n/* .device-selector-option {\\n font-size: 1rem;\\n}\\n.device-selector-select {\\n max-width: 10rem;\\n font-size: 0.7rem;\\n} */\\n\\n.header-button-container {\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/020_Header.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* Header */\\n.header {\\n height: 100%;\\n width: 100vw;\\n background: #ffe;\\n display: flex;\\n justify-content: space-between;\\n}\\n.header-application-title-container {\\n display: flex;\\n}\\n.header-application-title-container .header-application-title-logo {\\n width: var(--header-height);\\n height: var(--header-height);\\n padding: 2px 2px 2px 2px;\\n margin: 0px 2px 0px 5px;\\n }\\n.header-application-title-container .header-application-title-text {\\n font-weight: 600;\\n margin: 0px 2px 0px 2px;\\n }\\n\\n.header-button-container {\\n display: flex;\\n}\\n\\n.header-button-spacer {\\n width: 1rem;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/020_Header.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), @@ -2940,7 +2951,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".body-content {\\n background: var(--company-color1);\\n width: 100%;\\n height: 100%;\\n}\\n.body {\\n background: var(--company-color1);\\n width: 100%;\\n height: 100%;\\n}\\n.body-main-video-for-avatar {\\n position: absolute;\\n left: -100px;\\n width: 1%;\\n height: 1%;\\n}\\n.body-main-canvas-for-avatar {\\n position: absolute;\\n left: -100px;\\n width: 1%;\\n height: 1%;\\n}\\n.body-main-canvas {\\n width: 100%;\\n height: 100%;\\n -o-object-fit: contain;\\n object-fit: contain;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/030_Body.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".body-content {\\n background: var(--company-color1);\\n width: 100%;\\n height: 100%;\\n}\\n.body {\\n background: var(--company-color1);\\n width: 100%;\\n height: 100%;\\n}\\n.body-main-video-for-avatar {\\n position: absolute;\\n left: -100px;\\n width: 1%;\\n height: 1%;\\n}\\n.body-main-canvas-for-avatar {\\n position: absolute;\\n left: -100px;\\n width: 1%;\\n height: 1%;\\n}\\n.body-main-canvas {\\n width: 100%;\\n height: 100%;\\n -o-object-fit: contain;\\n object-fit: contain;\\n}\\n.body-main-script {\\n position: absolute;\\n width: 80%;\\n bottom: 10%;\\n left: 10%;\\n font-size: 2rem;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/030_Body.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), @@ -2951,7 +2962,29 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".right-sidebar {\\n}\\n/* Partition */\\n.sidebar-partition {\\n position: static;\\n display: flex;\\n flex-direction: column;\\n width: 100%;\\n color: rgba(255, 255, 255, 1);\\n background: rgba(0, 0, 0, 0);\\n z-index: 10;\\n overflow: hidden;\\n}\\n.state-control-checkbox:checked + .sidebar-partition .sidebar-content {\\n max-height: 800px;\\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\\n}\\n.state-control-checkbox + .sidebar-partition .sidebar-content {\\n max-height: 0px;\\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\\n}\\n\\n/* Header */\\n.sidebar-header {\\n position: static;\\n width: 100%;\\n height: var(--header-height);\\n font-size: 1.1rem;\\n background: rgba(10, 10, 10, 0.5);\\n display: flex;\\n justify-content: space-between;\\n}\\n.sidebar-header .sidebar-header-title {\\n padding-left: 1rem;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n }\\n.sidebar-header .sidebar-header-caret {\\n align-items: right;\\n }\\n/* Content */\\n.sidebar-content {\\n padding: 0px 5px 0px 5px;\\n position: static;\\n width: 100%;\\n height: auto;\\n /* height: calc(100% - var(--header-height)); */\\n background: rgba(200, 0, 0, 1);\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n.sidebar-content-row {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n}\\n.sidebar-content-row .sidebar-content-row-label {\\n left: 0px;\\n width: 30%;\\n }\\n.sidebar-content-row .sidebar-content-row-label-long {\\n left: 0px;\\n width: 50%;\\n }\\n.sidebar-content-row .sidebar-content-row-label-whole {\\n left: 0px;\\n width: 100%;\\n }\\n.sidebar-content-row .sidebar-content-row-select {\\n left: 30%;\\n width: 70%;\\n }\\n.sidebar-content-row .sidebar-content-row-text {\\n left: 30%;\\n width: 70%;\\n }\\n.sidebar-content-row .sidebar-content-row-spacer {\\n width: 90%;\\n height: 3px;\\n margin-top: 5px;\\n margin-bottom: 5px;\\n background: #ddd;\\n box-shadow: 1px 1px 2px 2px #000;\\n }\\n.sidebar-content-row .sidebar-content-row-buttons {\\n left: 30%;\\n width: 70%;\\n display: flex;\\n justify-content: flex-end;\\n }\\n\\n.device-selector-option {\\n font-size: 1rem;\\n}\\n.device-selector-select {\\n max-width: 90%;\\n min-width: 50%;\\n font-size: 0.7rem;\\n}\\n.sidebar-content-row-select-option {\\n font-size: 1rem;\\n}\\n.sidebar-content-row-select-select {\\n max-width: 90%;\\n min-width: 50%;\\n font-size: 0.7rem;\\n}\\n.sidebar-content-row-input {\\n width: 100%;\\n font-size: 0.7rem;\\n}\\n.sidebar-content-row-button-container {\\n /* margin: 5px 0px 2px 0px; */\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n}\\n\\n.sidebar-content-row-button,\\n.sidebar-content-row-button-activated,\\n.sidebar-content-row-button-stanby {\\n padding: 0px 5px 0px 5px;\\n margin: 0px 5px 0px 5px;\\n border-radius: 2px;\\n border: 1px solid #446;\\n cursor: pointer;\\n /* width: 30%; */\\n text-align: center;\\n font-weight: 100;\\n}\\n.sidebar-content-row-button-activated {\\n /* width: 50%; */\\n background: #2e4;\\n color: #000;\\n}\\n.sidebar-content-row-button-activated:hover {\\n /* background: #4f5; */\\n font-weight: 600;\\n}\\n.sidebar-content-row-button,\\n.sidebar-content-row-button-stanby {\\n background: #555;\\n}\\n.sidebar-content-row-button:hover,\\n.sidebar-content-row-button-stanby:hover {\\n /* background: #666; */\\n font-weight: 400;\\n}\\n\\n.sidebar-content-row-status-text {\\n font-size: 1rem;\\n display: flex;\\n align-items: flex-end;\\n width: 50%;\\n}\\n\\n.output-audio-visializer {\\n margin: 5%;\\n width: 40%;\\n height: 50px;\\n}\\n.output-audio-visializer-canvas {\\n width: 100%;\\n height: 100%;\\n}\\n.avatar-controller-video-setting-container {\\n display: flex;\\n}\\n.avatar-controller-video {\\n width: 50%;\\n margin: 10px 0 10px 0;\\n transform: scaleX(-1);\\n}\\n.avatar-controller-video-setting-items-container {\\n display: flex;\\n flex-direction: column;\\n width: 50%;\\n margin-left: 5px;\\n}\\n.avatar-controller-video-setting-item-row {\\n display: flex;\\n flex-direction: row;\\n}\\n.avatar-controller-video-setting-item-checkbox {\\n margin-left: 5px;\\n margin-right: 5px;\\n}\\n.avatar-controller-video-setting-item-label {\\n width: 80%;\\n}\\n.avatar-controller-avatar-area {\\n width: 100%;\\n display: flex;\\n flex-direction: column;\\n -o-object-fit: contain;\\n object-fit: contain;\\n padding: 10px;\\n}\\n.avatar-controller-background-video {\\n width: 1px;\\n height: 1px;\\n position: absolute;\\n left: -100px;\\n}\\n.avatar-center-position-canvas {\\n width: 100%;\\n margin: 5px;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/040_RightSidebar.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_041_VoiceLoaderAudioPlayer_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../../../node_modules/postcss-loader/dist/cjs.js!./041_VoiceLoaderAudioPlayer.css */ \"./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/041_VoiceLoaderAudioPlayer.css\");\n// Imports\n\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_postcss_loader_dist_cjs_js_041_VoiceLoaderAudioPlayer_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".right-sidebar {\\n}\\n/* Partition */\\n.sidebar-partition {\\n position: static;\\n display: flex;\\n flex-direction: column;\\n width: 100%;\\n color: rgba(255, 255, 255, 1);\\n background: rgba(0, 0, 0, 0);\\n z-index: 10;\\n overflow: hidden;\\n}\\n.state-control-checkbox:checked + .sidebar-partition .sidebar-content {\\n max-height: 800px;\\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\\n}\\n.state-control-checkbox + .sidebar-partition .sidebar-content {\\n max-height: 0px;\\n transition: all var(--sidebar-transition-time) var(--sidebar-transition-animation);\\n}\\n\\n/* Header */\\n.sidebar-header {\\n position: static;\\n width: 100%;\\n height: var(--header-height);\\n font-size: 1.1rem;\\n background: rgba(10, 10, 10, 0.5);\\n display: flex;\\n justify-content: space-between;\\n}\\n.sidebar-header .sidebar-header-title {\\n padding-left: 1rem;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n }\\n.sidebar-header .sidebar-header-caret {\\n align-items: right;\\n }\\n/* Content */\\n.sidebar-content {\\n padding: 0px 5px 0px 5px;\\n position: static;\\n width: 100%;\\n height: auto;\\n /* height: calc(100% - var(--header-height)); */\\n background: rgba(200, 0, 0, 1);\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n\\n/***** 行分割 *****/\\n.sidebar-content-row-1 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n/***** 行分割(x2) *****/\\n.sidebar-content-row-3-7 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.sidebar-content-row-3-7 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.sidebar-content-row-3-7 > div:nth-child(2) {\\n left: 30%;\\n width: 70%;\\n }\\n\\n.sidebar-content-row-5-5 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.sidebar-content-row-5-5 > div:nth-child(1) {\\n left: 0px;\\n width: 50%;\\n }\\n\\n.sidebar-content-row-5-5 > div:nth-child(2) {\\n left: 50%;\\n width: 50%;\\n }\\n\\n.sidebar-content-row-7-3 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.sidebar-content-row-7-3 > div:nth-child(1) {\\n left: 0px;\\n width: 70%;\\n }\\n\\n.sidebar-content-row-7-3 > div:nth-child(2) {\\n left: 70%;\\n width: 30%;\\n }\\n/***** 行分割(x3) *****/\\n.sidebar-content-row-3-5-2 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.sidebar-content-row-3-5-2 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.sidebar-content-row-3-5-2 > div:nth-child(2) {\\n left: 30%;\\n width: 50%;\\n }\\n.sidebar-content-row-3-5-2 > div:nth-child(3) {\\n left: 80%;\\n width: 20%;\\n }\\n.sidebar-content-row-4-3-3 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.sidebar-content-row-4-3-3 > div:nth-child(1) {\\n left: 0px;\\n width: 40%;\\n }\\n.sidebar-content-row-4-3-3 > div:nth-child(2) {\\n left: 40%;\\n width: 30%;\\n }\\n.sidebar-content-row-4-3-3 > div:nth-child(3) {\\n left: 70%;\\n width: 30%;\\n }\\n\\n/***** Divider *****/\\n.sidebar-content-row-dividing {\\n height: 5px;\\n width: 80%;\\n background: #ffffff88;\\n margin: 10px 0px 10px 0px;\\n border-radius: 5px;\\n}\\n\\n/***** Padding *****/\\n.pad-left-03 {\\n padding-left: 0.3rem;\\n}\\n.pad-left-1 {\\n padding-left: 1rem;\\n}\\n.pad-left-3 {\\n padding-left: 3rem;\\n}\\n.stick-to-right {\\n text-align: right;\\n}\\n.stick-to-left {\\n text-align: left;\\n}\\n.row-space-holder-2 {\\n height: 2rem;\\n}\\n.no-wrap {\\n white-space: nowrap;\\n overflow: hidden;\\n text-overflow: ellipsis;\\n}\\n\\n/**** 行中身 ****/\\n/* Label */\\n.sidebar-content-row-label {\\n width: 100%;\\n}\\n.sidebar-content-row-label-small {\\n font-size: 0.75rem;\\n}\\n\\n/* Button */\\n.sidebar-content-row-button,\\n.sidebar-content-row-button-activated,\\n.sidebar-content-row-button-stanby {\\n padding: 0px 5px 0px 5px;\\n margin: 0px 5px 0px 5px;\\n border-radius: 2px;\\n border: 1px solid #446;\\n cursor: pointer;\\n /* width: 30%; */\\n text-align: center;\\n font-weight: 100;\\n}\\n.sidebar-content-row-button-activated {\\n /* width: 50%; */\\n background: #bbd;\\n color: #000;\\n}\\n.sidebar-content-row-button-activated:hover {\\n /* background: #4f5; */\\n font-weight: 600;\\n}\\n.sidebar-content-row-button,\\n.sidebar-content-row-button-stanby {\\n background: #555;\\n}\\n.sidebar-content-row-button:hover,\\n.sidebar-content-row-button-stanby:hover {\\n /* background: #666; */\\n font-weight: 400;\\n}\\n\\n/* Select */\\n.sidebar-content-row-select {\\n}\\n.sidebar-content-row-select-option {\\n font-size: 1rem;\\n}\\n.sidebar-content-row-select-select {\\n max-width: 90%;\\n min-width: 30%;\\n font-size: 0.7rem;\\n}\\n\\n/* Device Select */\\n.device-selector-option {\\n font-size: 1rem;\\n}\\n.device-selector-select {\\n max-width: 90%;\\n min-width: 50%;\\n font-size: 0.7rem;\\n}\\n\\n/* input */\\n.sidebar-content-row-input {\\n}\\n\\n.sidebar-content-row-input-input {\\n max-width: 90%;\\n min-width: 30%;\\n font-size: 0.7rem;\\n}\\n.sidebar-content-row-input-input-full {\\n width: 90%;\\n font-size: 0.7rem;\\n}\\n\\n.sidebar-content-row-input-checkbox {\\n max-width: 90%;\\n min-width: 30%;\\n font-size: 0.7rem;\\n}\\n\\n/* Visualizer */\\n.output-audio-visializer {\\n margin: 5%;\\n width: 40%;\\n height: 50px;\\n}\\n.output-audio-visializer-canvas {\\n width: 100%;\\n height: 100%;\\n}\\n\\n/* Misc */\\n.sidebar-content-row-container {\\n width: 100%;\\n height: 100px;\\n}\\n.avatar-controller-video {\\n width: 100%;\\n height: 100%;\\n -o-object-fit: contain;\\n object-fit: contain;\\n transform: scaleX(-1);\\n padding: 10px;\\n}\\n\\n.avatar-controller-avatar-area {\\n width: 100%;\\n height: 100%;\\n display: flex;\\n padding: 10px;\\n}\\n.avatar-controller-background-video {\\n width: 1px;\\n height: 1px;\\n position: absolute;\\n left: -100px;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/040_RightSidebar.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/041_VoiceLoaderAudioPlayer.css": +/*!****************************************************************************************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/041_VoiceLoaderAudioPlayer.css ***! + \****************************************************************************************************************************************************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".voice-loader-audio-player {\\n height: 50px;\\n width: 100%;\\n margin: 5px 5% 5px 5%;\\n background: #444;\\n /* box-shadow: 0 0 20px 0 #000a; */\\n\\n font-family: arial;\\n color: white;\\n font-size: 0.75em;\\n overflow: hidden;\\n\\n display: grid;\\n grid-template-rows: 10px auto;\\n}\\n.voice-loader-audio-player-timeline {\\n background: white;\\n width: 100%;\\n position: relative;\\n cursor: pointer;\\n box-shadow: 0 2px 10px 0 #0008;\\n}\\n.voice-loader-audio-player-progress {\\n background: coral;\\n width: 0%;\\n height: 100%;\\n transition: 0.25s;\\n}\\n.voice-loader-audio-player-controls {\\n display: flex;\\n justify-content: space-between;\\n align-items: stretch;\\n padding: 0 20px;\\n font-weight: 100;\\n}\\n.voice-loader-audio-player-controls > * {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n }\\n.voice-loader-audio-player-controls .toggle-play.play {\\n cursor: pointer;\\n position: relative;\\n left: 0;\\n height: 0;\\n width: 0;\\n border: 7px solid #0000;\\n border-left: 13px solid white;\\n }\\n.voice-loader-audio-player-controls .toggle-play.play:hover {\\n transform: scale(1.1);\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause {\\n height: 15px;\\n width: 20px;\\n cursor: pointer;\\n position: relative;\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause:before {\\n position: absolute;\\n top: 0;\\n left: 0px;\\n background: white;\\n content: \\\"\\\";\\n height: 15px;\\n width: 3px;\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause:after {\\n position: absolute;\\n top: 0;\\n right: 8px;\\n background: white;\\n content: \\\"\\\";\\n height: 15px;\\n width: 3px;\\n }\\n.voice-loader-audio-player-controls .toggle-play.pause:hover {\\n transform: scale(1.1);\\n }\\n.voice-loader-audio-player-time {\\n display: flex;\\n widht: 200px;\\n}\\n.voice-loader-audio-player-time > * {\\n padding: 2px;\\n }\\n\\n.voice-loader-audio-player-volume-container {\\n cursor: pointer;\\n\\n position: relative;\\n z-index: 2;\\n}\\n\\n.voice-loader-audio-player-volume-container .voice-loader-audio-player-volume-slider {\\n position: absolute;\\n left: -3px;\\n top: 15px;\\n z-index: -1;\\n width: 0;\\n height: 15px;\\n background: white;\\n box-shadow: 0 0 20px #000a;\\n transition: 0.25s;\\n }\\n\\n.voice-loader-audio-player-volume-container .voice-loader-audio-player-volume-slider .voice-loader-audio-player-volume-percentage {\\n background: coral;\\n height: 100%;\\n width: 75%;\\n }\\n\\n.voice-loader-audio-player-volume-container:hover .voice-loader-audio-player-volume-slider {\\n left: -123px;\\n width: 120px;\\n }\\n.voice-loader-audio-player-volume-button {\\n height: 26px;\\n display: flex;\\n align-items: center;\\n}\\n.voice-loader-audio-player-volume-button .volume {\\n transform: scale(0.7);\\n }\\n.voice-loader-audio-player-button {\\n cursor: pointer;\\n}\\n.voice-loader-audio-player-button:hover {\\n font-weight: 600;\\n }\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/041_VoiceLoaderAudioPlayer.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); + +/***/ }), + +/***/ "./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/090_Dialog.css": +/*!************************************************************************************************************************************************************************!*\ + !*** ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./frontend/src/100_components/001_css/090_Dialog.css ***! + \************************************************************************************************************************************************************************/ +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"/* (1) Dialog コンテナと表示・非表示 */\\n.dialog-container {\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n position: absolute;\\n top: 0px;\\n left: 0px;\\n width: 100vw;\\n height: 100vh;\\n}\\n\\n.state-control-checkbox:checked ~ .dialog-container {\\n background: rgba(200, 200, 200, 0.4);\\n -webkit-animation-name: dialog-show;\\n animation-name: dialog-show;\\n -webkit-animation-duration: 0.4s;\\n animation-duration: 0.4s;\\n -webkit-animation-iteration-count: 1;\\n animation-iteration-count: 1;\\n -webkit-animation-fill-mode: forwards;\\n animation-fill-mode: forwards;\\n -webkit-animation-direction: normal;\\n animation-direction: normal;\\n}\\n.state-control-checkbox ~ .dialog-container {\\n background: rgba(100, 100, 100, 0.4);\\n -webkit-animation-name: dialog-hide;\\n animation-name: dialog-hide;\\n -webkit-animation-duration: 0.4s;\\n animation-duration: 0.4s;\\n -webkit-animation-iteration-count: 1;\\n animation-iteration-count: 1;\\n -webkit-animation-fill-mode: forwards;\\n animation-fill-mode: forwards;\\n -webkit-animation-direction: normal;\\n animation-direction: normal;\\n}\\n\\n@-webkit-keyframes dialog-hide {\\n from {\\n opacity: 1;\\n z-index: 200;\\n }\\n 90% {\\n opacity: 0;\\n z-index: -1;\\n }\\n to {\\n opacity: 0;\\n z-index: -1;\\n /* display: none; */\\n }\\n}\\n\\n@keyframes dialog-hide {\\n from {\\n opacity: 1;\\n z-index: 200;\\n }\\n 90% {\\n opacity: 0;\\n z-index: -1;\\n }\\n to {\\n opacity: 0;\\n z-index: -1;\\n /* display: none; */\\n }\\n}\\n\\n@-webkit-keyframes dialog-show {\\n from {\\n opacity: 0;\\n z-index: -1;\\n }\\n 10% {\\n display: flex;\\n z-index: 200;\\n }\\n to {\\n opacity: 1;\\n z-index: 200;\\n }\\n}\\n\\n@keyframes dialog-show {\\n from {\\n opacity: 0;\\n z-index: -1;\\n }\\n 10% {\\n display: flex;\\n z-index: 200;\\n }\\n to {\\n opacity: 1;\\n z-index: 200;\\n }\\n}\\n\\n/* (2) Dialog の枠 */\\n.dialog-frame {\\n color: #000;\\n width: 40rem;\\n border: 2px solid var(--dialog-border-color);\\n border-radius: 20px;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n box-shadow: 5px 5px 5px var(--dialog-shadow-color);\\n background: var(--dialog-background-color);\\n overflow: hidden;\\n}\\n\\n/* (2) Dialog の中身 */\\n/****** (a) title */\\n.dialog-title {\\n margin-top: 20px;\\n background: var(--company-color2);\\n color: #fff;\\n width: 100%;\\n font-size: 1.5rem;\\n text-align: center;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n/****** (b) content */\\n.dialog-content {\\n width: 90%;\\n}\\n/***** 行分割 *****/\\n.dialog-content-row-1 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.dialog-content-row-3-7 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.dialog-content-row-3-7 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n\\n.dialog-content-row-3-7 > div:nth-child(2) {\\n left: 30%;\\n width: 70%;\\n }\\n\\n.dialog-content-row-7-3 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.dialog-content-row-7-3 > div:nth-child(1) {\\n left: 0px;\\n width: 70%;\\n }\\n\\n.dialog-content-row-7-3 > div:nth-child(2) {\\n left: 70%;\\n width: 30%;\\n }\\n\\n.dialog-content-row-4-4-2 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.dialog-content-row-4-4-2 > div:nth-child(1) {\\n left: 0px;\\n width: 40%;\\n }\\n\\n.dialog-content-row-4-4-2 > div:nth-child(2) {\\n left: 40%;\\n width: 40%;\\n }\\n\\n.dialog-content-row-4-4-2 > div:nth-child(3) {\\n left: 80%;\\n width: 20%;\\n }\\n\\n.dialog-content-row-2-2-2-2-2 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.dialog-content-row-2-2-2-2-2 > div:nth-child(1) {\\n left: 0px;\\n width: 20%;\\n }\\n\\n.dialog-content-row-2-2-2-2-2 > div:nth-child(2) {\\n left: 20%;\\n width: 20%;\\n }\\n\\n.dialog-content-row-2-2-2-2-2 > div:nth-child(3) {\\n left: 40%;\\n width: 20%;\\n }\\n\\n.dialog-content-row-2-2-2-2-2 > div:nth-child(4) {\\n left: 60%;\\n width: 20%;\\n }\\n\\n.dialog-content-row-2-2-2-2-2 > div:nth-child(5) {\\n left: 80%;\\n width: 20%;\\n }\\n\\n/***** Divider *****/\\n.dialog-content-row-dividing {\\n height: 2px;\\n width: 100%;\\n background: #aaaaaa88;\\n margin: 10px 0px 10px 0px;\\n border-radius: 5px;\\n}\\n.dialog-content-row-spacer {\\n height: 0.5rem;\\n}\\n\\n/* label */\\n.dialog-content-row-label {\\n width: 100%;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n\\n/* input */\\n.dialog-content-row-input {\\n width: 100%;\\n}\\n\\n.dialog-content-row-input-input {\\n max-width: 90%;\\n min-width: 30%;\\n font-size: 0.7rem;\\n}\\n\\n/* Button */\\n.dialog-content-row-button {\\n padding: 0px 5px 0px 5px;\\n margin: 0px 5px 0px 5px;\\n border-radius: 2px;\\n border: 1px solid #446;\\n cursor: pointer;\\n /* width: 30%; */\\n text-align: center;\\n font-weight: 100;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/001_css/090_Dialog.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B3%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js"); /***/ }), @@ -3456,6 +3489,16 @@ eval("\n\nfunction checkDCE() {\n /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */\n /***/ }), +/***/ "./node_modules/react-error-boundary/dist/react-error-boundary.umd.js": +/*!****************************************************************************!*\ + !*** ./node_modules/react-error-boundary/dist/react-error-boundary.umd.js ***! + \****************************************************************************/ +/***/ (function(__unused_webpack_module, exports, __webpack_require__) { + +eval("(function (global, factory) {\n true ? factory(exports, __webpack_require__(/*! react */ \"./node_modules/react/index.js\")) :\n 0;\n})(this, (function (exports, React) { 'use strict';\n\n function _interopNamespace(e) {\n if (e && e.__esModule) return e;\n var n = Object.create(null);\n if (e) {\n Object.keys(e).forEach(function (k) {\n if (k !== 'default') {\n var d = Object.getOwnPropertyDescriptor(e, k);\n Object.defineProperty(n, k, d.get ? d : {\n enumerable: true,\n get: function () { return e[k]; }\n });\n }\n });\n }\n n[\"default\"] = e;\n return Object.freeze(n);\n }\n\n var React__namespace = /*#__PURE__*/_interopNamespace(React);\n\n function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n }\n\n function _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n _setPrototypeOf(subClass, superClass);\n }\n\n var changedArray = function changedArray(a, b) {\n if (a === void 0) {\n a = [];\n }\n\n if (b === void 0) {\n b = [];\n }\n\n return a.length !== b.length || a.some(function (item, index) {\n return !Object.is(item, b[index]);\n });\n };\n\n var initialState = {\n error: null\n };\n\n var ErrorBoundary = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(ErrorBoundary, _React$Component);\n\n function ErrorBoundary() {\n var _this;\n\n for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {\n _args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;\n _this.state = initialState;\n\n _this.resetErrorBoundary = function () {\n var _this$props;\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n _this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);\n\n _this.reset();\n };\n\n return _this;\n }\n\n ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {\n return {\n error: error\n };\n };\n\n var _proto = ErrorBoundary.prototype;\n\n _proto.reset = function reset() {\n this.setState(initialState);\n };\n\n _proto.componentDidCatch = function componentDidCatch(error, info) {\n var _this$props$onError, _this$props2;\n\n (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {\n var error = this.state.error;\n var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error\n // happens to *also* be in the resetKeys array, we'd end up resetting\n // the error boundary immediately. This would likely trigger a second\n // error to be thrown.\n // So we make sure that we don't check the resetKeys on the first call\n // of cDU after the error is set\n\n if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {\n var _this$props$onResetKe, _this$props3;\n\n (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);\n this.reset();\n }\n };\n\n _proto.render = function render() {\n var error = this.state.error;\n var _this$props4 = this.props,\n fallbackRender = _this$props4.fallbackRender,\n FallbackComponent = _this$props4.FallbackComponent,\n fallback = _this$props4.fallback;\n\n if (error !== null) {\n var _props = {\n error: error,\n resetErrorBoundary: this.resetErrorBoundary\n };\n\n if ( /*#__PURE__*/React__namespace.isValidElement(fallback)) {\n return fallback;\n } else if (typeof fallbackRender === 'function') {\n return fallbackRender(_props);\n } else if (FallbackComponent) {\n return /*#__PURE__*/React__namespace.createElement(FallbackComponent, _props);\n } else {\n throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');\n }\n }\n\n return this.props.children;\n };\n\n return ErrorBoundary;\n }(React__namespace.Component);\n\n function withErrorBoundary(Component, errorBoundaryProps) {\n var Wrapped = function Wrapped(props) {\n return /*#__PURE__*/React__namespace.createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React__namespace.createElement(Component, props));\n }; // Format for display in DevTools\n\n\n var name = Component.displayName || Component.name || 'Unknown';\n Wrapped.displayName = \"withErrorBoundary(\" + name + \")\";\n return Wrapped;\n }\n\n function useErrorHandler(givenError) {\n var _React$useState = React__namespace.useState(null),\n error = _React$useState[0],\n setError = _React$useState[1];\n\n if (givenError != null) throw givenError;\n if (error != null) throw error;\n return setError;\n }\n /*\n eslint\n @typescript-eslint/sort-type-union-intersection-members: \"off\",\n @typescript-eslint/no-throw-literal: \"off\",\n @typescript-eslint/prefer-nullish-coalescing: \"off\"\n */\n\n exports.ErrorBoundary = ErrorBoundary;\n exports.useErrorHandler = useErrorHandler;\n exports.withErrorBoundary = withErrorBoundary;\n\n Object.defineProperty(exports, '__esModule', { value: true });\n\n}));\n//# sourceMappingURL=react-error-boundary.umd.js.map\n\n\n//# sourceURL=webpack://voice-changer-internal/./node_modules/react-error-boundary/dist/react-error-boundary.umd.js?"); + +/***/ }), + /***/ "./node_modules/react-is/cjs/react-is.development.js": /*!***********************************************************!*\ !*** ./node_modules/react-is/cjs/react-is.development.js ***! @@ -3891,7 +3934,7 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem /***/ ((__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 */ \"MajarModeTypes\": () => (/* binding */ MajarModeTypes),\n/* harmony export */ \"Resolutions\": () => (/* binding */ Resolutions),\n/* harmony export */ \"VoiceChangerMode\": () => (/* binding */ VoiceChangerMode),\n/* harmony export */ \"fetchApplicationSetting\": () => (/* binding */ fetchApplicationSetting)\n/* harmony export */ });\nconst MajarModeTypes = {\n \"docker\": \"docker\",\n \"colab\": \"colab\",\n};\nconst VoiceChangerMode = {\n \"realtime\": \"realtime\",\n \"near-realtime\": \"near-realtime\",\n};\nconst Resolutions = {\n \"small\": JSON.stringify([640, 400]),\n \"HD\": JSON.stringify([1280, 720]),\n \"FHD\": JSON.stringify([1920, 1080])\n};\nconst fetchApplicationSetting = async () => {\n const url = `./assets/setting.json`;\n const res = await fetch(url, {\n method: \"GET\"\n });\n const setting = await res.json();\n return setting;\n};\n// const base642ab = (base64: string) => {\n// const str = window.atob(base64);\n// const len = str.length;\n// const bytes = new Uint16Array(len);\n// for (let i = 0; i < len; i++) {\n// bytes[i] = str.charCodeAt(i);\n// }\n// return bytes.buffer;\n// }\n// const ab2base64 = (ab: ArrayBuffer) => {\n// const str = String.fromCharCode.apply(null, new Uint16Array(ab))\n// // Buffer.from(str, 'base64') andbuf.toString('base64')\n// return\n// }\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"InitialApplicationSetting\": () => (/* binding */ InitialApplicationSetting),\n/* harmony export */ \"MajarModeTypes\": () => (/* binding */ MajarModeTypes),\n/* harmony export */ \"Resolutions\": () => (/* binding */ Resolutions),\n/* harmony export */ \"VoiceChangerMode\": () => (/* binding */ VoiceChangerMode),\n/* harmony export */ \"fetchApplicationSetting\": () => (/* binding */ fetchApplicationSetting)\n/* harmony export */ });\nconst MajarModeTypes = {\n \"docker\": \"docker\",\n \"colab\": \"colab\",\n};\nconst VoiceChangerMode = {\n \"realtime\": \"realtime\",\n \"near-realtime\": \"near-realtime\",\n};\nconst Resolutions = {\n \"small\": JSON.stringify([640, 400]),\n \"HD\": JSON.stringify([1280, 720]),\n \"FHD\": JSON.stringify([1920, 1080])\n};\nconst InitialApplicationSetting = __webpack_require__(/*! ../../public/assets/setting.json */ \"./frontend/public/assets/setting.json\");\nconst fetchApplicationSetting = async () => {\n const url = `./assets/setting.json`;\n const res = await fetch(url, {\n method: \"GET\"\n });\n const setting = await res.json();\n return setting;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts?"); /***/ }), @@ -3913,7 +3956,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 */ \"fetchTextResource\": () => (/* binding */ fetchTextResource),\n/* harmony export */ \"postVoice\": () => (/* binding */ postVoice),\n/* harmony export */ \"uploadModelPropsResumable\": () => (/* binding */ uploadModelPropsResumable)\n/* harmony export */ });\n/* provided dependency */ var Buffer = __webpack_require__(/*! buffer */ \"./node_modules/buffer/index.js\")[\"Buffer\"];\n// import Resumable from 'resumablejs'\n// import { file } from \"jszip\";\nconst fetchTextResource = async (url) => {\n const res = await fetch(url, {\n method: \"GET\"\n });\n const text = res.text();\n return text;\n};\nconst postVoice = async (url, gpu, srcId, dstId, timestamp, buffer) => {\n const obj = {\n gpu, srcId, dstId, timestamp, buffer: Buffer.from(buffer).toString('base64')\n };\n const body = JSON.stringify(obj);\n const res = await fetch(`${url}`, {\n method: \"POST\",\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: body\n });\n const receivedJson = await res.json();\n const changedVoiceBase64 = receivedJson[\"changedVoiceBase64\"];\n const buf = Buffer.from(changedVoiceBase64, \"base64\");\n const ab = new ArrayBuffer(buf.length);\n // console.log(\"RECIV\", buf.length)\n const view = new Uint8Array(ab);\n for (let i = 0; i < buf.length; ++i) {\n view[i] = buf[i];\n }\n return ab;\n};\nconst uploadModelPropsResumable = async (modelFile, configFile, onprogress) => {\n const size = 1024 * 1024;\n // const size = modelFile.size / 10;\n const fileChunks = [];\n let index = 0; // index値\n for (let cur = 0; cur < modelFile.size; cur += size) {\n fileChunks.push({\n hash: index++,\n chunk: modelFile.slice(cur, cur + size),\n });\n }\n const chunkNum = fileChunks.length;\n console.log(\"FILE_CHUNKS:\", chunkNum, fileChunks);\n while (true) {\n const promises = [];\n for (let i = 0; i < 10; i++) {\n const chunk = fileChunks.shift();\n if (!chunk) {\n break;\n }\n const p = new Promise((resolve) => {\n const formData = new FormData();\n formData.append(\"file\", chunk.chunk);\n formData.append(\"filename\", `${modelFile.name}_${chunk.hash}`);\n const request = new Request('/upload_file', {\n method: 'POST',\n body: formData,\n });\n fetch(request).then(async (response) => {\n console.log(await response.text());\n resolve();\n });\n });\n promises.push(p);\n }\n await Promise.all(promises);\n if (fileChunks.length == 0) {\n break;\n }\n onprogress(Math.floor(((chunkNum - fileChunks.length) / (chunkNum + 1)) * 100), false);\n }\n console.log(\"model uploaded\");\n const configP = new Promise((resolve) => {\n const formData = new FormData();\n formData.append(\"file\", configFile);\n formData.append(\"filename\", configFile.name);\n const request = new Request('/upload_file', {\n method: 'POST',\n body: formData,\n });\n fetch(request).then(async (response) => {\n console.log(await response.text());\n resolve();\n });\n });\n await configP;\n console.log(\"config uploaded\");\n const loadP = new Promise((resolve) => {\n const formData = new FormData();\n formData.append(\"modelFilename\", modelFile.name);\n formData.append(\"modelFilenameChunkNum\", \"\" + chunkNum);\n formData.append(\"configFilename\", configFile.name);\n const request = new Request('/load_model', {\n method: 'POST',\n body: formData,\n });\n fetch(request).then(async (response) => {\n console.log(await response.text());\n resolve();\n });\n });\n await loadP;\n onprogress(100, true);\n console.log(\"model loaded\");\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/001_clients_and_managers/002_ResourceLoader.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"fetchTextResource\": () => (/* binding */ fetchTextResource),\n/* harmony export */ \"getTranscribe\": () => (/* binding */ getTranscribe),\n/* harmony export */ \"postVoice\": () => (/* binding */ postVoice),\n/* harmony export */ \"uploadModelPropsResumable\": () => (/* binding */ uploadModelPropsResumable)\n/* harmony export */ });\n/* provided dependency */ var Buffer = __webpack_require__(/*! buffer */ \"./node_modules/buffer/index.js\")[\"Buffer\"];\n// import Resumable from 'resumablejs'\n// import { file } from \"jszip\";\nconst fetchTextResource = async (url) => {\n const res = await fetch(url, {\n method: \"GET\"\n });\n const text = res.text();\n return text;\n};\nconst postVoice = async (url, gpu, srcId, dstId, timestamp, prefixChunkSize, buffer) => {\n const obj = {\n gpu, srcId, dstId, timestamp, prefixChunkSize, buffer: Buffer.from(buffer).toString('base64')\n };\n const body = JSON.stringify(obj);\n const res = await fetch(`${url}`, {\n method: \"POST\",\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: body\n });\n const receivedJson = await res.json();\n const changedVoiceBase64 = receivedJson[\"changedVoiceBase64\"];\n const buf = Buffer.from(changedVoiceBase64, \"base64\");\n const ab = new ArrayBuffer(buf.length);\n // console.log(\"RECIV\", buf.length)\n const view = new Uint8Array(ab);\n for (let i = 0; i < buf.length; ++i) {\n view[i] = buf[i];\n }\n return ab;\n};\nconst getTranscribe = async () => {\n fetch(\"/transcribe\").then(async (response) => {\n console.log(await response.text());\n });\n};\nconst uploadModelPropsResumable = async (modelFile, configFile, onprogress) => {\n onprogress(0, false);\n const size = 1024 * 1024;\n // const size = modelFile.size / 10;\n const fileChunks = [];\n let index = 0; // index値\n for (let cur = 0; cur < modelFile.size; cur += size) {\n fileChunks.push({\n hash: index++,\n chunk: modelFile.slice(cur, cur + size),\n });\n }\n const chunkNum = fileChunks.length;\n console.log(\"FILE_CHUNKS:\", chunkNum, fileChunks);\n while (true) {\n const promises = [];\n for (let i = 0; i < 10; i++) {\n const chunk = fileChunks.shift();\n if (!chunk) {\n break;\n }\n const p = new Promise((resolve) => {\n const formData = new FormData();\n formData.append(\"file\", chunk.chunk);\n formData.append(\"filename\", `${modelFile.name}_${chunk.hash}`);\n const request = new Request('/upload_file', {\n method: 'POST',\n body: formData,\n });\n fetch(request).then(async (response) => {\n console.log(await response.text());\n resolve();\n });\n });\n promises.push(p);\n }\n await Promise.all(promises);\n if (fileChunks.length == 0) {\n break;\n }\n onprogress(Math.floor(((chunkNum - fileChunks.length) / (chunkNum + 1)) * 100), false);\n }\n console.log(\"model uploaded\");\n const configP = new Promise((resolve) => {\n const formData = new FormData();\n formData.append(\"file\", configFile);\n formData.append(\"filename\", configFile.name);\n const request = new Request('/upload_file', {\n method: 'POST',\n body: formData,\n });\n fetch(request).then(async (response) => {\n console.log(await response.text());\n resolve();\n });\n });\n await configP;\n console.log(\"config uploaded\");\n const loadP = new Promise((resolve) => {\n const formData = new FormData();\n formData.append(\"modelFilename\", modelFile.name);\n formData.append(\"modelFilenameChunkNum\", \"\" + chunkNum);\n formData.append(\"configFilename\", configFile.name);\n const request = new Request('/load_model', {\n method: 'POST',\n body: formData,\n });\n fetch(request).then(async (response) => {\n console.log(await response.text());\n resolve();\n });\n });\n await loadP;\n onprogress(100, true);\n console.log(\"model loaded\");\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/001_clients_and_managers/002_ResourceLoader.ts?"); /***/ }), @@ -3924,7 +3967,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 */ \"useApplicationSettingManager\": () => (/* binding */ useApplicationSettingManager)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../001_clients_and_managers/000_ApplicationSettingLoader */ \"./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts\");\n\n\nconst useApplicationSettingManager = () => {\n const [applicationSetting, setApplicationSetting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n const [indexedDb, setIndexedDb] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n /** (1) Initialize Setting */\n /** (1-1) Load from localstorage */\n const loadApplicationSetting = async () => {\n const applicationSetting = await (0,_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.fetchApplicationSetting)();\n console.log(applicationSetting);\n if (localStorage.majar_mode) {\n applicationSetting.majar_mode = localStorage.majar_mode;\n }\n if (localStorage.voice_changer_mode) {\n applicationSetting.voice_changer_mode = localStorage.voice_changer_mode;\n }\n if (localStorage.gpu) {\n applicationSetting.gpu = localStorage.gpu;\n }\n if (localStorage.src_id) {\n applicationSetting.src_id = localStorage.src_id;\n }\n if (localStorage.dst_id) {\n applicationSetting.dst_id = localStorage.dst_id;\n }\n if (localStorage.prefix_chunk_size) {\n applicationSetting.prefix_chunk_size = Number(localStorage.prefix_chunk_size);\n }\n if (localStorage.chunk_size) {\n applicationSetting.chunk_size = Number(localStorage.chunk_size);\n }\n if (localStorage.avatar_enable_avatar) {\n applicationSetting.avatar.enable_avatar = localStorage.avatar_enable_avatar === \"true\";\n }\n if (localStorage.avatar_motion_capture_face) {\n applicationSetting.avatar.motion_capture_face = localStorage.avatar_motion_capture_face === \"true\";\n }\n if (localStorage.avatar_motion_capture_upperbody) {\n applicationSetting.avatar.motion_capture_upperbody = localStorage.avatar_motion_capture_upperbody === \"true\";\n }\n if (localStorage.avatar_lip_overwrite_with_voice) {\n applicationSetting.avatar.lip_overwrite_with_voice = localStorage.avatar_lip_overwrite_with_voice === \"true\";\n }\n if (localStorage.avatar_background_color) {\n applicationSetting.avatar.background_color = localStorage.avatar_background_color;\n }\n if (localStorage.avatar_chroma_key) {\n applicationSetting.avatar.chroma_key = localStorage.avatar_chroma_key;\n }\n if (localStorage.avatar_avatar_canvas_size) {\n applicationSetting.avatar.avatar_canvas_size = JSON.parse(localStorage.avatar_avatar_canvas_size);\n }\n if (localStorage.avatar_avatar_screen_size) {\n applicationSetting.avatar.screen_canvas_size = JSON.parse(localStorage.avatar_avatar_screen_size);\n }\n if (localStorage.advance_avatar_draw_skip_rate) {\n applicationSetting.advance.avatar_draw_skip_rate = Number(localStorage.advance_avatar_draw_skip_rate);\n }\n if (localStorage.advance_screen_draw_skip_rate) {\n applicationSetting.advance.screen_draw_skip_rate = Number(localStorage.advance_screen_draw_skip_rate);\n }\n if (localStorage.advance_visualizer_draw_skip_rate) {\n applicationSetting.advance.visualizer_draw_skip_rate = Number(localStorage.advance_visualizer_draw_skip_rate);\n }\n if (localStorage.advance_cross_fade_lower_value) {\n applicationSetting.advance.cross_fade_lower_value = Number(localStorage.advance_cross_fade_lower_value);\n }\n if (localStorage.advance_cross_fade_offset_rate) {\n applicationSetting.advance.cross_fade_offset_rate = Number(localStorage.advance_cross_fade_offset_rate);\n }\n if (localStorage.advance_cross_fade_end_rate) {\n applicationSetting.advance.cross_fade_end_rate = Number(localStorage.advance_cross_fade_end_rate);\n }\n if (localStorage.advance_cross_fade_type) {\n applicationSetting.advance.cross_fade_type = Number(localStorage.advance_cross_fade_type);\n }\n if (localStorage.voice_changer_server_url) {\n applicationSetting.voice_changer_server_url = localStorage.voice_changer_server_url;\n }\n setApplicationSetting({ ...applicationSetting });\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadApplicationSetting();\n }, []);\n /** (1-2) Load from indexedDb */\n const [indexedDbLoaded, setIndexedDbLoaded] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!indexedDb || !applicationSetting) {\n return;\n }\n if (indexedDbLoaded) {\n return;\n }\n const loadIndexDb = async () => {\n const avatarUrl = await indexedDb.getItem(\"avatar.avatar_url\");\n if (avatarUrl) {\n applicationSetting.avatar.avatar_url = avatarUrl;\n }\n const backgroundImageURL = await indexedDb.getItem(\"avatar.backgournd_image_url\");\n if (backgroundImageURL) {\n applicationSetting.avatar.backgournd_image_url = backgroundImageURL;\n }\n setIndexedDbLoaded(true);\n setApplicationSetting({ ...applicationSetting });\n };\n loadIndexDb();\n }, [applicationSetting, indexedDb, indexedDbLoaded]);\n /** (2) Setter */\n /** (2-1) VoiceChanger */\n const setMajarMode = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.majar_mode = val;\n localStorage.majar_mode = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setVoiceChangerMode = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.voice_changer_mode = val;\n localStorage.voice_changer_mode = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setGpu = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.gpu = val;\n localStorage.gpu = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setSrcSpeakerId = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.src_id = val;\n localStorage.src_id = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setDstSpeakerId = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.dst_id = val;\n localStorage.dst_id = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setPrefixChunkSize = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.prefix_chunk_size = val;\n localStorage.prefix_chunk_size = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setChunkSize = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.chunk_size = val;\n localStorage.chunk_size = val;\n setApplicationSetting({ ...applicationSetting });\n };\n /** (2-2) Avatar */\n const setEnableAvatar = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.enable_avatar = val;\n localStorage.avatar_enable_avatar = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setMotionCaptureFaceEnabled = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.motion_capture_face = val;\n localStorage.avatar_motion_capture_face = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setMotionCaptureUpperBodyEnabled = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.motion_capture_upperbody = val;\n localStorage.avatar_motion_capture_upperbody = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setLipOverwriteWithVoiceEnabled = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.lip_overwrite_with_voice = val;\n localStorage.avatar_lip_overwrite_with_voice = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setAvatarUrl = (url) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.avatar_url = url;\n if (indexedDb) {\n indexedDb.setItem(\"avatar.avatar_url\", url);\n }\n setApplicationSetting({ ...applicationSetting });\n };\n const setBackgroundImageURL = (url) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.backgournd_image_url = url;\n if (indexedDb) {\n indexedDb.setItem(\"avatar.backgournd_image_url\", url);\n }\n setApplicationSetting({ ...applicationSetting });\n };\n const setBackgroundColor = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.background_color = val;\n localStorage.avatar_background_color = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setChromaKey = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.chroma_key = val;\n localStorage.avatar_chroma_key = val;\n setApplicationSetting({ ...applicationSetting });\n };\n /** (2-3) Performance */\n const setAvatarCanvasSize = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.avatar_canvas_size = val;\n localStorage.avatar_avatar_canvas_size = JSON.stringify(val);\n setApplicationSetting({ ...applicationSetting });\n };\n const setScreenCanvasSize = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.avatar.screen_canvas_size = val;\n localStorage.avatar_avatar_screen_size = JSON.stringify(val);\n setApplicationSetting({ ...applicationSetting });\n };\n const setAvatarDrawSkipRate = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.advance.avatar_draw_skip_rate = val;\n localStorage.advance_avatar_draw_skip_rate = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setScreenDrawSkipRate = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.advance.screen_draw_skip_rate = val;\n localStorage.advance_screen_draw_skip_rate = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setVisualizerDrawSkipRate = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.advance.visualizer_draw_skip_rate = val;\n localStorage.advance_visualizer_draw_skip_rate = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setCrossFadeLowerValue = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.advance.cross_fade_lower_value = val;\n localStorage.advance_cross_fade_lower_value = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setCrossFadeOffsetRate = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.advance.cross_fade_offset_rate = val;\n localStorage.advance_cross_fade_offset_rate = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setCrossFadeEndRate = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.advance.cross_fade_end_rate = val;\n localStorage.advance_cross_fade_end_rate = val;\n setApplicationSetting({ ...applicationSetting });\n };\n const setCrossFadeType = (val) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.advance.cross_fade_type = val;\n localStorage.advance_cross_fade_type = val;\n setApplicationSetting({ ...applicationSetting });\n };\n /** (2-4) server */\n const setVoiceChangerServerUrl = (url) => {\n if (!applicationSetting) {\n return;\n }\n applicationSetting.voice_changer_server_url = url;\n localStorage.voice_changer_server_url = url;\n setApplicationSetting({ ...applicationSetting });\n };\n return {\n applicationSetting,\n loadApplicationSetting,\n setMajarMode,\n setVoiceChangerMode,\n setGpu,\n setSrcSpeakerId,\n setDstSpeakerId,\n setPrefixChunkSize,\n setChunkSize,\n setEnableAvatar,\n setMotionCaptureFaceEnabled,\n setMotionCaptureUpperBodyEnabled,\n setLipOverwriteWithVoiceEnabled,\n setAvatarUrl,\n setBackgroundImageURL,\n setBackgroundColor,\n setChromaKey,\n setAvatarCanvasSize,\n setScreenCanvasSize,\n setAvatarDrawSkipRate,\n setScreenDrawSkipRate,\n setVisualizerDrawSkipRate,\n setCrossFadeLowerValue,\n setCrossFadeOffsetRate,\n setCrossFadeEndRate,\n setCrossFadeType,\n setVoiceChangerServerUrl,\n setIndexedDb\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/000_useApplicationSettingManager.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"useApplicationSettingManager\": () => (/* binding */ useApplicationSettingManager)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../001_clients_and_managers/000_ApplicationSettingLoader */ \"./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts\");\n\n\nconst useApplicationSettingManager = () => {\n const applicationSettingRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.InitialApplicationSetting);\n const [applicationSetting, setApplicationSetting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(applicationSettingRef.current);\n const [indexedDb, setIndexedDb] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(); // ApplicationSettingProviderからsetされる。\n const [indexedDbLoaded, setIndexedDbLoaded] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n /** (1) Initialize Setting */\n /** (1-1) Load from localstorage */\n const loadApplicationSetting = async () => {\n if (localStorage.applicationSetting) {\n applicationSettingRef.current = JSON.parse(localStorage.applicationSetting);\n console.log(\"Application setting is loaded from local\", applicationSettingRef.current);\n setApplicationSetting({ ...applicationSettingRef.current });\n }\n else {\n applicationSettingRef.current = await (0,_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.fetchApplicationSetting)();\n console.log(\"Application setting is loaded from server\", applicationSettingRef.current);\n setApplicationSetting({ ...applicationSettingRef.current });\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n loadApplicationSetting();\n }, []);\n /** (1-2) Load from indexedDb */\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n // indexedDbとappliationSettingが初期化されるまで実行しない。\n // indexedDbはApplicationSettingProviderからsetされる\n if (!indexedDb || !applicationSetting) {\n return;\n }\n // indexedDbがloadされてない場合だけ実行する。\n if (indexedDbLoaded) {\n return;\n }\n const loadIndexDb = async () => {\n const avatarUrl = await indexedDb.getItem(\"avatar.avatar_url\");\n if (avatarUrl) {\n applicationSettingRef.current.avatar.avatar_url = avatarUrl;\n }\n const backgroundImageURL = await indexedDb.getItem(\"screen.backgournd_image_url\");\n if (backgroundImageURL) {\n applicationSettingRef.current.screen.backgournd_image_url = backgroundImageURL;\n }\n setIndexedDbLoaded(true);\n setApplicationSetting({ ...applicationSettingRef.current });\n };\n loadIndexDb();\n }, [applicationSetting, indexedDb, indexedDbLoaded]);\n /** (2) Clear Setting */\n const clearSetting = async () => {\n localStorage.clear();\n await indexedDb.clearAll();\n await loadApplicationSetting();\n setIndexedDbLoaded(false);\n };\n /** (3) Setter */\n /** (3-1) Common */\n const updateApplicationSetting = () => {\n localStorage.applicationSetting = JSON.stringify(applicationSettingRef.current);\n setApplicationSetting({ ...applicationSettingRef.current });\n };\n /** (3-2) VoiceChanger */\n const setMajarMode = (val) => {\n applicationSettingRef.current.majar_mode = val;\n updateApplicationSetting();\n };\n const setVoiceChangerMode = (val) => {\n applicationSettingRef.current.voice_changer_mode = val;\n updateApplicationSetting();\n };\n const setGpu = (val) => {\n applicationSettingRef.current.gpu = val;\n updateApplicationSetting();\n };\n const setSrcSpeakerId = (val) => {\n applicationSettingRef.current.src_id = val;\n updateApplicationSetting();\n };\n const setDstSpeakerId = (val) => {\n applicationSettingRef.current.dst_id = val;\n updateApplicationSetting();\n };\n const setPrefixChunkSize = (val) => {\n applicationSettingRef.current.prefix_chunk_size = val;\n updateApplicationSetting();\n };\n const setChunkSize = (val) => {\n applicationSettingRef.current.chunk_size = val;\n updateApplicationSetting();\n };\n const updateSpeakerMapping = (speakers) => {\n applicationSettingRef.current.speakers = speakers;\n updateApplicationSetting();\n };\n /** (3-3..) Screen */\n const setScreenEnable = (val) => {\n applicationSettingRef.current.screen.enable_screen = val;\n updateApplicationSetting();\n };\n const setBackgroundImageURL = (url) => {\n applicationSettingRef.current.screen.backgournd_image_url = url;\n if (indexedDb) {\n indexedDb.setItem(\"screen.backgournd_image_url\", url);\n }\n updateApplicationSetting();\n };\n /** (3-3) Avatar */\n const setEnableAvatar = (val) => {\n applicationSettingRef.current.avatar.enable_avatar = val;\n updateApplicationSetting();\n };\n const setMotionCaptureFaceEnabled = (val) => {\n applicationSettingRef.current.avatar.motion_capture_face = val;\n updateApplicationSetting();\n };\n const setMotionCaptureUpperBodyEnabled = (val) => {\n applicationSettingRef.current.avatar.motion_capture_upperbody = val;\n updateApplicationSetting();\n };\n const setLipOverwriteWithVoiceEnabled = (val) => {\n applicationSettingRef.current.avatar.lip_overwrite_with_voice = val;\n updateApplicationSetting();\n };\n const setAvatarUrl = (url) => {\n applicationSettingRef.current.avatar.avatar_url = \"\";\n if (indexedDb) {\n indexedDb.setItem(\"avatar.avatar_url\", url);\n }\n updateApplicationSetting();\n };\n const setBackgroundColor = (val) => {\n applicationSettingRef.current.avatar.background_color = val;\n updateApplicationSetting();\n };\n const setChromaKey = (val) => {\n applicationSettingRef.current.avatar.chroma_key = val;\n updateApplicationSetting();\n };\n /** (3-4) Performance */\n const setAvatarCanvasSize = (val) => {\n applicationSettingRef.current.avatar.avatar_canvas_size = val;\n updateApplicationSetting();\n };\n const setScreenCanvasSize = (val) => {\n applicationSettingRef.current.avatar.screen_canvas_size = val;\n updateApplicationSetting();\n };\n const setAvatarDrawSkipRate = (val) => {\n applicationSettingRef.current.advance.avatar_draw_skip_rate = val;\n updateApplicationSetting();\n };\n const setScreenDrawSkipRate = (val) => {\n applicationSettingRef.current.advance.screen_draw_skip_rate = val;\n updateApplicationSetting();\n };\n const setVisualizerDrawSkipRate = (val) => {\n applicationSettingRef.current.advance.visualizer_draw_skip_rate = val;\n updateApplicationSetting();\n };\n const setCrossFadeLowerValue = (val) => {\n applicationSettingRef.current.advance.cross_fade_lower_value = val;\n updateApplicationSetting();\n };\n const setCrossFadeOffsetRate = (val) => {\n applicationSettingRef.current.advance.cross_fade_offset_rate = val;\n updateApplicationSetting();\n };\n const setCrossFadeEndRate = (val) => {\n applicationSettingRef.current.advance.cross_fade_end_rate = val;\n updateApplicationSetting();\n };\n const setCrossFadeType = (val) => {\n applicationSettingRef.current.advance.cross_fade_type = val;\n updateApplicationSetting();\n };\n /** (3-5) server */\n const setVoiceChangerServerUrl = (url) => {\n applicationSettingRef.current.voice_changer_server_url = url;\n updateApplicationSetting();\n };\n /** (3-6) transcribe */\n const setTranscribeLang = (lang) => {\n applicationSettingRef.current.transcribe.lang = lang;\n updateApplicationSetting();\n };\n const setTranscribeWordExpireTime = (time) => {\n applicationSettingRef.current.transcribe.expire_time = time;\n updateApplicationSetting();\n };\n return {\n applicationSetting,\n loadApplicationSetting,\n clearSetting,\n setMajarMode,\n setVoiceChangerMode,\n setGpu,\n setSrcSpeakerId,\n setDstSpeakerId,\n setPrefixChunkSize,\n setChunkSize,\n updateSpeakerMapping,\n setScreenEnable,\n setBackgroundImageURL,\n setEnableAvatar,\n setMotionCaptureFaceEnabled,\n setMotionCaptureUpperBodyEnabled,\n setLipOverwriteWithVoiceEnabled,\n setAvatarUrl,\n setBackgroundColor,\n setChromaKey,\n setAvatarCanvasSize,\n setScreenCanvasSize,\n setAvatarDrawSkipRate,\n setScreenDrawSkipRate,\n setVisualizerDrawSkipRate,\n setCrossFadeLowerValue,\n setCrossFadeOffsetRate,\n setCrossFadeEndRate,\n setCrossFadeType,\n setVoiceChangerServerUrl,\n setTranscribeLang,\n setTranscribeWordExpireTime,\n setIndexedDb\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/000_useApplicationSettingManager.ts?"); /***/ }), @@ -3935,7 +3978,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 */ \"useIndexedDB\": () => (/* binding */ useIndexedDB)\n/* harmony export */ });\n/* harmony import */ var localforage__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! localforage */ \"./node_modules/localforage/dist/localforage.js\");\n/* harmony import */ var localforage__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(localforage__WEBPACK_IMPORTED_MODULE_0__);\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\n\nconst useIndexedDB = () => {\n localforage__WEBPACK_IMPORTED_MODULE_0___default().config({\n driver: (localforage__WEBPACK_IMPORTED_MODULE_0___default().INDEXEDDB),\n name: 'app',\n version: 1.0,\n storeName: 'appStorage',\n description: 'appStorage'\n });\n const setItem = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n return async (key, value) => {\n await localforage__WEBPACK_IMPORTED_MODULE_0___default().setItem(key, value);\n };\n }, []);\n const getItem = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n return async (key) => {\n return await localforage__WEBPACK_IMPORTED_MODULE_0___default().getItem(key);\n };\n }, []);\n return {\n dummy: \"\",\n setItem,\n getItem\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/001_useIndexedDB.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"useIndexedDB\": () => (/* binding */ useIndexedDB)\n/* harmony export */ });\n/* harmony import */ var localforage__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! localforage */ \"./node_modules/localforage/dist/localforage.js\");\n/* harmony import */ var localforage__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(localforage__WEBPACK_IMPORTED_MODULE_0__);\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\n\nconst useIndexedDB = () => {\n localforage__WEBPACK_IMPORTED_MODULE_0___default().config({\n driver: (localforage__WEBPACK_IMPORTED_MODULE_0___default().INDEXEDDB),\n name: 'app',\n version: 1.0,\n storeName: 'appStorage',\n description: 'appStorage'\n });\n const setItem = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n return async (key, value) => {\n await localforage__WEBPACK_IMPORTED_MODULE_0___default().setItem(key, value);\n };\n }, []);\n const getItem = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n return async (key) => {\n return await localforage__WEBPACK_IMPORTED_MODULE_0___default().getItem(key);\n };\n }, []);\n const clearAll = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n return async () => {\n await localforage__WEBPACK_IMPORTED_MODULE_0___default().clear();\n };\n }, []);\n return {\n dummy: \"\",\n setItem,\n getItem,\n clearAll\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/001_useIndexedDB.ts?"); /***/ }), @@ -3961,6 +4004,28 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ }), +/***/ "./frontend/src/002_hooks/020-1_VoicePlayerWorkletNode.ts": +/*!****************************************************************!*\ + !*** ./frontend/src/002_hooks/020-1_VoicePlayerWorkletNode.ts ***! + \****************************************************************/ +/***/ ((__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 */ \"VoicePlayerWorkletNode\": () => (/* binding */ VoicePlayerWorkletNode)\n/* harmony export */ });\nclass VoicePlayerWorkletNode extends AudioWorkletNode {\n constructor(context) {\n super(context, \"voice-player-worklet-processor\");\n this.port.onmessage = this.handleMessage_.bind(this);\n console.log(\"[Node:constructor] created.\");\n }\n handleMessage_(event) {\n console.log(`[Node:handleMessage_] ` + `${event.data.message} (${event.data.contextTimestamp})`);\n }\n postReceivedVoice = (data) => {\n this.port.postMessage({\n data: data,\n }, [data]);\n };\n notifyChangeProps = (props) => {\n this.port.postMessage(props);\n };\n}\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/020-1_VoicePlayerWorkletNode.ts?"); + +/***/ }), + +/***/ "./frontend/src/002_hooks/020-2_AudioStreamer.ts": +/*!*******************************************************!*\ + !*** ./frontend/src/002_hooks/020-2_AudioStreamer.ts ***! + \*******************************************************/ +/***/ ((__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 */ \"AudioStreamer\": () => (/* binding */ AudioStreamer)\n/* harmony export */ });\n/* harmony import */ var socket_io_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! socket.io-client */ \"./node_modules/socket.io-client/build/esm/index.js\");\n/* harmony import */ var readable_stream__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! readable-stream */ \"./node_modules/readable-stream/lib/ours/browser.js\");\n/* harmony import */ var readable_stream__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(readable_stream__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _001_clients_and_managers_002_ResourceLoader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../001_clients_and_managers/002_ResourceLoader */ \"./frontend/src/001_clients_and_managers/002_ResourceLoader.ts\");\n\n\n\nclass AudioStreamer extends readable_stream__WEBPACK_IMPORTED_MODULE_1__.Duplex {\n views = [];\n socket;\n srcId = 107;\n dstId = 100;\n gpu = 0;\n prefixChunkSize = 64;\n chunkSize = 64;\n majarMode = \"docker\";\n voiceChangerMode = \"realtime\";\n performanceListener;\n dataCallback;\n requestWindow = [];\n serverUrl = \"\";\n transcribeTimingMonitor = 0;\n constructor(appSetting, callback, listener, options) {\n super(options);\n this.dataCallback = callback;\n this.performanceListener = listener;\n this.serverUrl = appSetting.voice_changer_server_url;\n this.majarMode = appSetting.majar_mode;\n this.setVoiceChangerServerURL();\n }\n setVoiceChangerServerURL = () => {\n console.log(\"New Connect Server:\", this.serverUrl);\n if (this.socket) {\n this.socket.close();\n }\n if (this.majarMode === \"docker\") {\n this.socket = (0,socket_io_client__WEBPACK_IMPORTED_MODULE_0__.io)(this.serverUrl);\n this.socket.on('connect', () => console.log('connect'));\n this.socket.on('response', (response) => {\n const cur = Date.now();\n const responseTime = cur - response[0];\n this.dataCallback(this.voiceChangerMode, response[1]);\n this.performanceListener.notifyResponseTime(responseTime);\n });\n }\n };\n setServerUrl = (serverUrl) => {\n this.serverUrl = serverUrl;\n this.setVoiceChangerServerURL();\n };\n setMajarMode = (val) => {\n this.majarMode = val;\n this.setVoiceChangerServerURL();\n };\n setSrcId = (id) => {\n this.srcId = id;\n };\n setDstId = (id) => {\n this.dstId = id;\n };\n setGpu = (id) => {\n this.gpu = id;\n };\n setPrefixChunkSize = (size) => {\n this.prefixChunkSize = size;\n };\n setChunkSize = (size) => {\n this.chunkSize = size;\n };\n setVoiceChangerMode = (val) => {\n this.voiceChangerMode = val;\n };\n sendBuffer = async (newBuffer) => {\n const timestamp = Date.now();\n // console.log(\"REQUEST_MESSAGE:\", [this.gpu, this.srcId, this.dstId, timestamp, newBuffer.buffer])\n // console.log(\"SERVER_URL\", this.serverUrl, this.majarMode)\n const prefixSize = this.voiceChangerMode === \"realtime\" ? this.prefixChunkSize : 0;\n if (this.majarMode === \"docker\") {\n this.socket.emit('request_message', [this.gpu, this.srcId, this.dstId, timestamp, prefixSize, newBuffer.buffer]);\n }\n else {\n const res = await (0,_001_clients_and_managers_002_ResourceLoader__WEBPACK_IMPORTED_MODULE_2__.postVoice)(this.serverUrl, this.gpu, this.srcId, this.dstId, timestamp, prefixSize, newBuffer.buffer);\n this.dataCallback(this.voiceChangerMode, res);\n this.performanceListener.notifyResponseTime(Date.now() - timestamp);\n }\n };\n _write = (chunk, _encoding, callback) => {\n const buffer = chunk.getChannelData(0);\n // console.log(\"SAMPLERATE:\", chunk.sampleRate, chunk.numberOfChannels, chunk.length, buffer)\n if (this.voiceChangerMode === \"realtime\") {\n this._write_realtime(buffer);\n }\n else {\n this._write_record(buffer);\n }\n callback();\n };\n bufferStart = 0;\n deltaCount = 0;\n _write_realtime = (buffer) => {\n //// 1024個のデータ（48Khz）が入ってくる。\n // buffer(for48Khz)x16bit * chunksize / 2(for24Khz)\n //// 1024個のデータを間引いて512個にする。（24Khz）\n const arrayBuffer = new ArrayBuffer((buffer.length / 2) * 2);\n const dataView = new DataView(arrayBuffer);\n for (var i = 0; i < buffer.length; i++) {\n if (i % 2 == 0) {\n let s = Math.max(-1, Math.min(1, buffer[i]));\n s = s < 0 ? s * 0x8000 : s * 0x7FFF;\n // ２分の１個目で２バイトずつ進むので((i/2)*2)\n dataView.setInt16((i / 2) * 2, s, true);\n }\n }\n //// 512個を一つのかたまりとしてリクエストバッファに追加\n this.requestWindow.push(arrayBuffer);\n //// リクエストバッファの中身が、リクエスト送信数と違う場合は処理終了。\n if (this.requestWindow.length < this.chunkSize) {\n return;\n }\n // リクエスト用の入れ物を作成\n const windowByteLength = this.requestWindow.reduce((prev, cur) => {\n return prev + cur.byteLength;\n }, 0);\n const newBuffer = new Uint8Array(windowByteLength);\n // リクエストのデータをセット\n this.requestWindow.reduce((prev, cur) => {\n newBuffer.set(new Uint8Array(cur), prev);\n return prev + cur.byteLength;\n }, 0);\n this.sendBuffer(newBuffer);\n this.requestWindow = [];\n this.performanceListener.notifySendBufferingTime(Date.now() - this.bufferStart);\n this.bufferStart = Date.now();\n };\n recordBuffer = [];\n isRecording = false;\n _write_record = (buffer) => {\n if (!this.isRecording) {\n return;\n }\n // buffer(for48Khz)x16bit * chunksize / 2(for24Khz)\n const sendBuffer = new ArrayBuffer(buffer.length * 2 / 2);\n const sendDataView = new DataView(sendBuffer);\n for (var i = 0; i < buffer.length; i++) {\n if (i % 2 == 0) {\n let s = Math.max(-1, Math.min(1, buffer[i]));\n s = s < 0 ? s * 0x8000 : s * 0x7FFF;\n sendDataView.setInt16(i, s, true);\n // if (i % 3000 === 0) {\n // console.log(\"buffer_converting\", s, buffer[i])\n // }\n }\n }\n this.recordBuffer.push(sendBuffer);\n };\n sendRecordedData = () => {\n const length = this.recordBuffer.reduce((prev, cur) => {\n return prev + cur.byteLength;\n }, 0);\n const newBuffer = new Uint8Array(length);\n this.recordBuffer.reduce((prev, cur) => {\n newBuffer.set(new Uint8Array(cur), prev);\n return prev + cur.byteLength;\n }, 0);\n this.sendBuffer(newBuffer);\n };\n clearRecordedData = () => {\n this.recordBuffer = [];\n };\n startRecord = () => {\n this.isRecording = true;\n };\n stopRecord = () => {\n this.isRecording = false;\n };\n}\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/020-2_AudioStreamer.ts?"); + +/***/ }), + /***/ "./frontend/src/002_hooks/020_useVoiceChangerController.ts": /*!*****************************************************************!*\ !*** ./frontend/src/002_hooks/020_useVoiceChangerController.ts ***! @@ -3968,7 +4033,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 */ \"useVoiceChangerController\": () => (/* binding */ useVoiceChangerController)\n/* harmony export */ });\n/* harmony import */ var readable_stream__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! readable-stream */ \"./node_modules/readable-stream/lib/ours/browser.js\");\n/* harmony import */ var readable_stream__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(readable_stream__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var socket_io_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! socket.io-client */ \"./node_modules/socket.io-client/build/esm/index.js\");\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\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 amazon_chime_sdk_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! amazon-chime-sdk-js */ \"./node_modules/amazon-chime-sdk-js/build/index.js\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var microphone_stream__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! microphone-stream */ \"./node_modules/microphone-stream/dist/microphone-stream.js\");\n/* harmony import */ var microphone_stream__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(microphone_stream__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _001_clients_and_managers_002_ResourceLoader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../001_clients_and_managers/002_ResourceLoader */ \"./frontend/src/001_clients_and_managers/002_ResourceLoader.ts\");\n\n\n\n\n\n\n\n\n\nclass VoicePlayerWorkletNode extends AudioWorkletNode {\n constructor(context) {\n super(context, \"voice-player-worklet-processor\");\n this.port.onmessage = this.handleMessage_.bind(this);\n console.log(\"[Node:constructor] created.\");\n }\n handleMessage_(event) {\n console.log(`[Node:handleMessage_] ` + `${event.data.message} (${event.data.contextTimestamp})`);\n }\n postReceivedVoice = (data) => {\n this.port.postMessage({\n data: data,\n }, [data]);\n };\n notifyChangeProps = (props) => {\n this.port.postMessage(props);\n };\n}\nclass AudioStreamer extends readable_stream__WEBPACK_IMPORTED_MODULE_0__.Duplex {\n views = [];\n socket;\n srcId = 107;\n dstId = 100;\n gpu = 0;\n prefixChunkSize = 64;\n chunkSize = 64;\n majarMode = \"docker\";\n voiceChangerMode = \"realtime\";\n performanceListener;\n dataCallback;\n requestWindow = [];\n serverUrl = \"\";\n constructor(appSetting, callback, listener, options) {\n super(options);\n this.dataCallback = callback;\n this.performanceListener = listener;\n this.serverUrl = appSetting.voice_changer_server_url;\n this.majarMode = appSetting.majar_mode;\n this.setVoiceChangerServerURL();\n }\n setVoiceChangerServerURL = () => {\n console.log(\"New Connect Server:\", this.serverUrl);\n if (this.socket) {\n this.socket.close();\n }\n if (this.majarMode === \"docker\") {\n this.socket = (0,socket_io_client__WEBPACK_IMPORTED_MODULE_1__.io)(this.serverUrl);\n this.socket.on('connect', () => console.log('connect'));\n this.socket.on('response', (response) => {\n const cur = Date.now();\n const responseTime = cur - response[0];\n this.dataCallback(this.voiceChangerMode, response[1]);\n this.performanceListener.notifyResponseTime(responseTime);\n });\n }\n };\n setServerUrl = (serverUrl) => {\n this.serverUrl = serverUrl;\n this.setVoiceChangerServerURL();\n };\n setMajarMode = (val) => {\n this.majarMode = val;\n this.setVoiceChangerServerURL();\n };\n setSrcId = (id) => {\n this.srcId = id;\n };\n setDstId = (id) => {\n this.dstId = id;\n };\n setGpu = (id) => {\n this.gpu = id;\n };\n setPrefixChunkSize = (size) => {\n this.prefixChunkSize = size;\n };\n setChunkSize = (size) => {\n this.chunkSize = size;\n };\n setVoiceChangerMode = (val) => {\n this.voiceChangerMode = val;\n };\n sendBuffer = async (newBuffer) => {\n const timestamp = Date.now();\n // console.log(\"REQUEST_MESSAGE:\", [this.gpu, this.srcId, this.dstId, timestamp, newBuffer.buffer])\n // console.log(\"SERVER_URL\", this.serverUrl, this.majarMode)\n if (this.majarMode === \"docker\") {\n this.socket.emit('request_message', [this.gpu, this.srcId, this.dstId, timestamp, newBuffer.buffer]);\n }\n else {\n const res = await (0,_001_clients_and_managers_002_ResourceLoader__WEBPACK_IMPORTED_MODULE_8__.postVoice)(this.serverUrl, this.gpu, this.srcId, this.dstId, timestamp, newBuffer.buffer);\n this.dataCallback(this.voiceChangerMode, res);\n this.performanceListener.notifyResponseTime(Date.now() - timestamp);\n }\n };\n _write = (chunk, _encoding, callback) => {\n const buffer = chunk.getChannelData(0);\n // console.log(\"SAMPLERATE:\", chunk.sampleRate, chunk.numberOfChannels, chunk.length, buffer)\n if (this.voiceChangerMode === \"realtime\") {\n this._write_realtime(buffer);\n }\n else {\n this._write_record(buffer);\n }\n callback();\n };\n bufferStart = 0;\n deltaCount = 0;\n _write_realtime = (buffer) => {\n //// 1024個のデータ（48Khz）が入ってくる。\n // buffer(for48Khz)x16bit * chunksize / 2(for24Khz)\n //// 1024個のデータを間引いて512個にする。（24Khz）\n const arrayBuffer = new ArrayBuffer((buffer.length / 2) * 2);\n const dataView = new DataView(arrayBuffer);\n for (var i = 0; i < buffer.length; i++) {\n if (i % 2 == 0) {\n let s = Math.max(-1, Math.min(1, buffer[i]));\n s = s < 0 ? s * 0x8000 : s * 0x7FFF;\n // ２分の１個目で２バイトずつ進むので((i/2)*2)\n dataView.setInt16((i / 2) * 2, s, true);\n }\n }\n //// 512個を一つのかたまりとしてリクエストバッファに追加\n this.requestWindow.push(arrayBuffer);\n //// 塊の数をカウントアップ\n this.deltaCount = (this.deltaCount + 1) % this.chunkSize;\n //// リクエスト送信の塊の個数は、prefix_chunkとchunkの合計\n const requestWindowSize = this.prefixChunkSize + this.chunkSize;\n //// リクエストバッファの中身が多すぎる場合は削除\n while (this.requestWindow.length > requestWindowSize) {\n this.requestWindow.shift();\n }\n //// リクエストバッファの中身が、リクエスト送信数と違う場合は処理終了。\n if (this.requestWindow.length != requestWindowSize) {\n return;\n }\n //// リクエストバッファの中身が、リクエスト送信数と同じだが、塊の個数が0になっていない場合は処理終了。\n if (this.deltaCount !== 0) {\n return;\n }\n //// ここまで到達した場合は送信処理データサイズは(512 x (prefix_chunkとchunkの合計))個 (int16)\n //// byteLengthはこれの2倍。\n const windowByteLength = this.requestWindow.reduce((prev, cur) => {\n return prev + cur.byteLength;\n }, 0);\n const newBuffer = new Uint8Array(windowByteLength);\n // console.log(\"SendData\", windowByteLength)\n this.requestWindow.reduce((prev, cur) => {\n newBuffer.set(new Uint8Array(cur), prev);\n return prev + cur.byteLength;\n }, 0);\n this.sendBuffer(newBuffer);\n this.performanceListener.notifySendBufferingTime(Date.now() - this.bufferStart);\n this.bufferStart = Date.now();\n };\n recordBuffer = [];\n isRecording = false;\n _write_record = (buffer) => {\n if (!this.isRecording) {\n return;\n }\n // buffer(for48Khz)x16bit * chunksize / 2(for24Khz)\n const sendBuffer = new ArrayBuffer(buffer.length * 2 / 2);\n const sendDataView = new DataView(sendBuffer);\n for (var i = 0; i < buffer.length; i++) {\n if (i % 2 == 0) {\n let s = Math.max(-1, Math.min(1, buffer[i]));\n s = s < 0 ? s * 0x8000 : s * 0x7FFF;\n sendDataView.setInt16(i, s, true);\n // if (i % 3000 === 0) {\n // console.log(\"buffer_converting\", s, buffer[i])\n // }\n }\n }\n this.recordBuffer.push(sendBuffer);\n };\n sendRecordedData = () => {\n const length = this.recordBuffer.reduce((prev, cur) => {\n return prev + cur.byteLength;\n }, 0);\n const newBuffer = new Uint8Array(length);\n this.recordBuffer.reduce((prev, cur) => {\n newBuffer.set(new Uint8Array(cur), prev);\n return prev + cur.byteLength;\n }, 0);\n this.sendBuffer(newBuffer);\n };\n clearRecordedData = () => {\n this.recordBuffer = [];\n };\n startRecord = () => {\n this.isRecording = true;\n };\n stopRecord = () => {\n this.isRecording = false;\n };\n}\nconst useVoiceChangerController = () => {\n const { deviceManagerState, applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_3__.useAppSetting)();\n const appSettings = applicationSettingState.applicationSetting;\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppRootState)();\n const [voiceChangeEnabled, setVoiceChangeEnabled] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false);\n const [isRecording, setIsRecording] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false);\n const [voiceFocusDeviceTransformer, setVoiceFocusDeviceTransformer] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)();\n const [voiceFocusTransformDevice, setVoiceFocusTransformDevice] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(null);\n const outputNode = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamDestination();\n }, []);\n const sourceNodeFromOutput = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamSource(outputNode.stream);\n }, []);\n const outputNodeForMicStream = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamDestination();\n }, []);\n const sourceNodeFromForMicStream = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamSource(outputNodeForMicStream.stream);\n }, []);\n const destinationNodeForVoiceLoader = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamDestination();\n }, []);\n const voicePlayerNode = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n const voicePlayerNode = new VoicePlayerWorkletNode(audioRootState.audioContext);\n voicePlayerNode.connect(outputNode);\n return voicePlayerNode;\n }, []);\n const [modelProps, setModelProps] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)({\n modelFile: null,\n configFile: null\n });\n const [modelUploadProgress, setModelUploadProgress] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(100);\n const [modelUploadEnd, setModelUploadEnd] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(true);\n const sendModelProps = () => {\n console.log(\"send model prop1\");\n if (modelProps.modelFile && modelProps.configFile) {\n // uploadModelProps(modelProps.modelFile, modelProps.configFile, (progress: number, end: boolean) => {\n // setModelUploadProgress(progress)\n // setModelUploadEnd(end)\n // })\n console.log(\"send model prop2\");\n (0,_001_clients_and_managers_002_ResourceLoader__WEBPACK_IMPORTED_MODULE_8__.uploadModelPropsResumable)(modelProps.modelFile, modelProps.configFile, (progress, end) => {\n setModelUploadProgress(progress);\n setModelUploadEnd(end);\n });\n }\n console.log(\"send model prop3\");\n };\n const [micMediaStream, setMicMediaStream] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)();\n const responseTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)([]);\n const [responseTime, setResponseTime] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(0);\n const bufferingTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)([]);\n const [bufferingTime, setBufferingTime] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(0);\n const reloadingTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)([]);\n const [reloadingTime, setReloadingTime] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(0);\n const triggerWaitingTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)([]);\n const [triggerWaitingTime, setTriggerWaitingTime] = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(0);\n const calcAverage = (vals) => {\n while (vals.length > 10) {\n vals.shift();\n }\n const avr = vals.reduce((prev, cur) => {\n return prev + cur;\n }, 0) / vals.length;\n return Math.floor(avr);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n /// WAVE SURFERはマイク入力をプレイバックできないようだ。普通にAudioElementを使おう。\n const audioElement = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_6__.AudioOutputElementId);\n console.log(\"AUDIO_ELENT\", audioElement);\n audioElement.srcObject = outputNode.stream;\n audioElement.play();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n const audioElement = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_6__.AudioOutputElementId);\n // @ts-ignore\n audioElement.setSinkId(deviceManagerState.audioOutputDeviceId);\n }, [deviceManagerState.audioOutputDeviceId]);\n const changedVoiceBufferRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)([]);\n const chunkSizeRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)(24);\n // const filter = useMemo(() => {\n // const b = new BiquadFilterNode(audioRootState.audioContext, { type: \"highpass\", frequency: 5000, Q: 5 })\n // b.connect(outputNode)\n // return b\n // }, [])\n const outputVFRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n const outputVFNodeRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n const loadOutputVF = async () => {\n const ms = new MediaStream();\n outputVFRef.current = await amazon_chime_sdk_js__WEBPACK_IMPORTED_MODULE_5__.VoiceFocusDeviceTransformer.create({ variant: 'c20' });\n const currentDevice = await outputVFRef.current.createTransformDevice(ms);\n outputVFNodeRef.current = await currentDevice.createAudioNode(audioRootState.audioContext);\n outputVFNodeRef.current.end.connect(outputNode);\n };\n loadOutputVF();\n }, []);\n const toGoF32DataRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n const toGoF32DataResolveRef = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n const startChangedVoiceProviderLooper = async () => {\n const micBufferSize = appSettings.buffer_size;\n // let flag = true\n let prevF32Data = null;\n let triggerWaiting = 0;\n let reloading = 0;\n while (true) {\n const micChunkBufferSize = chunkSizeRef.current * micBufferSize / 2; // sample rateで割る\n if (changedVoiceBufferRef.current.length == 0) {\n const p = new Promise((resolve) => {\n setTimeout(() => { resolve(); }, 200);\n });\n await p;\n continue;\n }\n else {\n // console.log(\"LENGTH:::\", changedVoiceBufferRef.current.length)\n if (changedVoiceBufferRef.current.length > 5) {\n while (changedVoiceBufferRef.current.length > 1) {\n changedVoiceBufferRef.current.shift();\n }\n }\n const num = changedVoiceBufferRef.current.length;\n let tmpBufferSize = 0;\n for (let i = 0; i < num; i++) {\n tmpBufferSize += changedVoiceBufferRef.current[i].length / 2;\n }\n let index = 0;\n const tmpf32Data = new Float32Array(tmpBufferSize);\n for (let i = 0; i < num; i++) {\n let currentF32Data = changedVoiceBufferRef.current.shift();\n if (prevF32Data && prevF32Data.length == currentF32Data.length) {\n if (prevF32Data.some(x => { isNaN(x); })) {\n console.log(\"chunk size changed. adjusting...(nan)\");\n continue;\n }\n if (prevF32Data.length != micChunkBufferSize * 2) {\n console.log(\"chunk size changed. adjusting...(len)\", prevF32Data.length, micChunkBufferSize * 2);\n continue;\n }\n for (let j = 0; j < micChunkBufferSize; j++) {\n const overlap = 1024;\n const currentStrength = Math.min((j / overlap), 1);\n // const currentStrength = 1\n const prevData = prevF32Data[micChunkBufferSize * 1 + j] * (1 - currentStrength);\n const currentData = currentF32Data[micChunkBufferSize * 0 + j] * currentStrength;\n tmpf32Data[index] = prevData + currentData;\n index++;\n }\n }\n prevF32Data = currentF32Data;\n }\n toGoF32DataRef.current = tmpf32Data;\n const p = new Promise(resolve => {\n toGoF32DataResolveRef.current = resolve;\n });\n reloadingTimesRef.current.push(Date.now() - reloading);\n const reloadingAvr = calcAverage(reloadingTimesRef.current);\n setReloadingTime(reloadingAvr);\n triggerWaiting = Date.now();\n await p;\n triggerWaitingTimesRef.current.push(Date.now() - triggerWaiting);\n const triggerAvr = calcAverage(triggerWaitingTimesRef.current);\n setTriggerWaitingTime(triggerAvr);\n reloading = Date.now();\n toGoF32DataRef.current = undefined;\n }\n // if (flag) {\n // const p2 = new Promise(resolve => {\n // setTimeout(resolve, 1000 * 1)\n // })\n // await p2\n // flag = false\n // }\n }\n };\n const startChangedVoiceConsumerLooper = async () => {\n while (true) {\n const f32Data = toGoF32DataRef.current;\n if (!f32Data) {\n const p = new Promise((resolve) => {\n setTimeout(() => { resolve(); }, 200);\n });\n await p;\n continue;\n }\n toGoF32DataResolveRef.current();\n const p = new Promise((resolve) => {\n const source = audioRootState.audioContext.createBufferSource();\n const buffer = audioRootState.audioContext.createBuffer(1, f32Data.length, 24000);\n buffer.getChannelData(0).set(f32Data);\n source.onended = () => {\n resolve();\n };\n source.buffer = buffer;\n // source.connect(outputVFNodeRef.current?.start!)\n source.connect(outputNode);\n // source.connect(filter)\n source.start();\n });\n await p;\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n startChangedVoiceProviderLooper();\n startChangedVoiceConsumerLooper();\n }, []);\n const audioStreamer = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n return new AudioStreamer(appSettings, (voiceChangerMode, data) => {\n if (voiceChangerMode === \"realtime\") {\n voicePlayerNode.postReceivedVoice(data);\n return;\n }\n console.log(\"near realtime mode\");\n const i16Data = new Int16Array(data);\n const f32Data = new Float32Array(i16Data.length);\n // https://stackoverflow.com/questions/35234551/javascript-converting-from-int16-to-float32\n i16Data.forEach((x, i) => {\n const float = (x >= 0x8000) ? -(0x10000 - x) / 0x8000 : x / 0x7FFF;\n f32Data[i] = float;\n });\n const source = audioRootState.audioContext.createBufferSource();\n const buffer = audioRootState.audioContext.createBuffer(1, f32Data.length, 24000);\n buffer.getChannelData(0).set(f32Data);\n source.buffer = buffer;\n source.start();\n source.connect(outputNode);\n }, {\n notifyResponseTime: (time) => {\n responseTimesRef.current.push(time);\n const avr = calcAverage(responseTimesRef.current);\n setResponseTime(avr);\n },\n notifySendBufferingTime: (time) => {\n bufferingTimesRef.current.push(time);\n const avr = calcAverage(bufferingTimesRef.current);\n setBufferingTime(avr);\n },\n }, { objectMode: true, });\n }, []);\n const micStream = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => {\n const s = new (microphone_stream__WEBPACK_IMPORTED_MODULE_7___default())({\n objectMode: true,\n bufferSize: appSettings.buffer_size,\n context: audioRootState.audioContext\n });\n s.pipe(audioStreamer);\n s.setStream(destinationNodeForVoiceLoader.stream); // (★１)\n return s;\n }, []);\n const useVoiceLoaderMediaStream = async () => {\n // micStreamに複数のストリームを追加することができることが分かったため、\n // ストリームは予め登録しておく(★１)。ここでは、recorderのステータスを併せるのみ。\n if (appSettings.voice_changer_mode === \"realtime\") {\n startRealtimeConvert();\n }\n else {\n startRecord();\n }\n };\n const setNewAudioInputDevice = async (deviceId) => {\n console.log(\"setNewAudioInputDevice\", deviceId);\n let vf = voiceFocusDeviceTransformer;\n if (!vf) {\n vf = await amazon_chime_sdk_js__WEBPACK_IMPORTED_MODULE_5__.VoiceFocusDeviceTransformer.create({ variant: 'c20' });\n setVoiceFocusDeviceTransformer(vf);\n }\n if (micMediaStream) {\n micMediaStream.getTracks().forEach(x => {\n x.stop();\n });\n }\n if (deviceId === \"none\") {\n return;\n }\n const constraints = {\n audio: {\n deviceId: deviceId,\n sampleRate: appSettings.sample_rate,\n // sampleSize: 16,\n channelCount: 1,\n echoCancellation: true,\n noiseSuppression: true,\n },\n video: false,\n };\n console.log(\"constraints::\", constraints);\n const newMicMediaStream = await navigator.mediaDevices.getUserMedia(constraints);\n console.log(\"new MediaStream\", newMicMediaStream);\n if (appSettings.vf_enable) {\n let currentDevice = voiceFocusTransformDevice;\n if (!currentDevice) {\n currentDevice = (await vf.createTransformDevice(newMicMediaStream)) || null;\n setVoiceFocusTransformDevice(currentDevice);\n }\n else {\n currentDevice.chooseNewInnerDevice(newMicMediaStream);\n }\n const nodeToVF = audioRootState.audioContext.createMediaStreamSource(newMicMediaStream);\n const voiceFocusNode = await currentDevice.createAudioNode(audioRootState.audioContext);\n nodeToVF.connect(voiceFocusNode.start);\n voiceFocusNode.end.connect(outputNodeForMicStream);\n // const ms = new MediaStream()\n // outputNodeForMicStream.stream.getAudioTracks().forEach(x => { ms.addTrack(x) })\n // destinationNodeForVoiceLoader.stream.getAudioTracks().forEach(x => { ms.addTrack(x) })\n // micStream.setStream(ms)\n // const merger = audioRootState.audioContext.createChannelMerger(2);\n // outputNodeForMicStream.connect(merger, 0)\n // destinationNodeForVoiceLoader.connect(merger, 0)\n // const dest = audioRootState.audioContext.createMediaStreamDestination()\n // merger.connect(dest)\n // micStream.setStream(dest.stream)\n micStream.setStream(outputNodeForMicStream.stream);\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n }\n else {\n micStream.setStream(newMicMediaStream);\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n }\n setMicMediaStream(newMicMediaStream);\n };\n const startRealtimeConvert = () => {\n micStream.playRecording();\n setVoiceChangeEnabled(true);\n };\n const pauseRealtimeConvert = () => {\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setSrcId(appSettings.src_id);\n }, [appSettings.src_id]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setDstId(appSettings.dst_id);\n }, [appSettings.dst_id]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setVoiceChangerMode(appSettings.voice_changer_mode);\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n audioStreamer.stopRecord();\n setIsRecording(false);\n }, [appSettings.voice_changer_mode]);\n const startRecord = () => {\n audioStreamer.clearRecordedData();\n micStream.playRecording();\n audioStreamer.startRecord();\n setIsRecording(true);\n };\n const stopRecord = () => {\n audioStreamer.stopRecord();\n setIsRecording(false);\n };\n const sendRecordedData = () => {\n audioStreamer.sendRecordedData();\n audioStreamer.clearRecordedData();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setServerUrl(appSettings.voice_changer_server_url);\n }, [appSettings.voice_changer_server_url]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setMajarMode(appSettings.majar_mode);\n }, [appSettings.majar_mode]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setGpu(appSettings.gpu);\n }, [appSettings.gpu]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setPrefixChunkSize(appSettings.prefix_chunk_size);\n chunkSizeRef.current = appSettings.chunk_size;\n }, [appSettings.prefix_chunk_size]);\n ///// For Worklet\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n audioStreamer.setChunkSize(appSettings.chunk_size);\n chunkSizeRef.current = appSettings.chunk_size;\n }, [appSettings.chunk_size]);\n ///// For Worklet\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => {\n voicePlayerNode.notifyChangeProps({\n deltaSize: appSettings.chunk_size,\n crossFadeOffsetRate: appSettings.advance.cross_fade_offset_rate,\n crossFadeEndRate: appSettings.advance.cross_fade_end_rate,\n crossFadeLowerValue: appSettings.advance.cross_fade_lower_value,\n crossFadeType: appSettings.advance.cross_fade_type\n });\n }, [appSettings.advance.cross_fade_offset_rate, appSettings.advance.cross_fade_end_rate, appSettings.advance.cross_fade_lower_value, appSettings.chunk_size, appSettings.advance.cross_fade_type]);\n return {\n voiceChangeEnabled,\n isRecording,\n sourceNodeFromForMicStream,\n sourceNodeFromOutput,\n destinationNodeForVoiceLoader,\n responseTime,\n bufferingTime,\n reloadingTime,\n triggerWaitingTime,\n modelProps,\n modelUploadProgress,\n modelUploadEnd,\n setNewAudioInputDevice,\n useVoiceLoaderMediaStream,\n startRealtimeConvert,\n pauseRealtimeConvert,\n startRecord,\n stopRecord,\n sendRecordedData,\n setModelProps,\n sendModelProps,\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/020_useVoiceChangerController.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"useVoiceChangerController\": () => (/* binding */ useVoiceChangerController)\n/* harmony export */ });\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var amazon_chime_sdk_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! amazon-chime-sdk-js */ \"./node_modules/amazon-chime-sdk-js/build/index.js\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var microphone_stream__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! microphone-stream */ \"./node_modules/microphone-stream/dist/microphone-stream.js\");\n/* harmony import */ var microphone_stream__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(microphone_stream__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _001_clients_and_managers_002_ResourceLoader__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../001_clients_and_managers/002_ResourceLoader */ \"./frontend/src/001_clients_and_managers/002_ResourceLoader.ts\");\n/* harmony import */ var _020_1_VoicePlayerWorkletNode__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./020-1_VoicePlayerWorkletNode */ \"./frontend/src/002_hooks/020-1_VoicePlayerWorkletNode.ts\");\n/* harmony import */ var _020_2_AudioStreamer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./020-2_AudioStreamer */ \"./frontend/src/002_hooks/020-2_AudioStreamer.ts\");\n\n\n\n\n\n\n\n\n\nconst useVoiceChangerController = () => {\n const { deviceManagerState, applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const appSettings = applicationSettingState.applicationSetting;\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_0__.useAppRootState)();\n const [voiceChangeEnabled, setVoiceChangeEnabled] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(false);\n const [isRecording, setIsRecording] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(false);\n const [voiceFocusDeviceTransformer, setVoiceFocusDeviceTransformer] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)();\n const [voiceFocusTransformDevice, setVoiceFocusTransformDevice] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(null);\n const outputNode = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamDestination();\n }, []);\n const sourceNodeFromOutput = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamSource(outputNode.stream);\n }, []);\n const outputNodeForMicStream = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamDestination();\n }, []);\n const sourceNodeFromForMicStream = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamSource(outputNodeForMicStream.stream);\n }, []);\n const destinationNodeForVoiceLoader = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n return audioRootState.audioContext.createMediaStreamDestination();\n }, []);\n const voicePlayerNode = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n const voicePlayerNode = new _020_1_VoicePlayerWorkletNode__WEBPACK_IMPORTED_MODULE_7__.VoicePlayerWorkletNode(audioRootState.audioContext);\n voicePlayerNode.connect(outputNode);\n return voicePlayerNode;\n }, []);\n const [modelProps, setModelProps] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)({\n modelFile: null,\n configFile: null\n });\n const [modelUploadProgress, setModelUploadProgress] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(100);\n const [modelUploadEnd, setModelUploadEnd] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(true);\n const sendModelProps = () => {\n if (modelProps.modelFile && modelProps.configFile) {\n // uploadModelProps(modelProps.modelFile, modelProps.configFile, (progress: number, end: boolean) => {\n // setModelUploadProgress(progress)\n // setModelUploadEnd(end)\n // })\n (0,_001_clients_and_managers_002_ResourceLoader__WEBPACK_IMPORTED_MODULE_6__.uploadModelPropsResumable)(modelProps.modelFile, modelProps.configFile, (progress, end) => {\n setModelUploadProgress(progress);\n setModelUploadEnd(end);\n });\n }\n console.log(\"send model prop3\");\n };\n const [micMediaStream, setMicMediaStream] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)();\n const responseTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)([]);\n const [responseTime, setResponseTime] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(0);\n const bufferingTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)([]);\n const [bufferingTime, setBufferingTime] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(0);\n const reloadingTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)([]);\n const [reloadingTime, setReloadingTime] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(0);\n const triggerWaitingTimesRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)([]);\n const [triggerWaitingTime, setTriggerWaitingTime] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(0);\n const calcAverage = (vals) => {\n while (vals.length > 10) {\n vals.shift();\n }\n const avr = vals.reduce((prev, cur) => {\n return prev + cur;\n }, 0) / vals.length;\n return Math.floor(avr);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n /// WAVE SURFERはマイク入力をプレイバックできないようだ。普通にAudioElementを使おう。\n const audioElement = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_4__.AudioOutputElementId);\n console.log(\"AUDIO_ELENT\", audioElement);\n audioElement.srcObject = outputNode.stream;\n audioElement.play();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n const audioElement = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_4__.AudioOutputElementId);\n // @ts-ignore\n audioElement.setSinkId(deviceManagerState.audioOutputDeviceId);\n }, [deviceManagerState.audioOutputDeviceId]);\n const changedVoiceBufferRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)([]);\n const chunkSizeRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)(24);\n const outputVFRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();\n const outputVFNodeRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n const loadOutputVF = async () => {\n const ms = new MediaStream();\n outputVFRef.current = await amazon_chime_sdk_js__WEBPACK_IMPORTED_MODULE_3__.VoiceFocusDeviceTransformer.create({ variant: 'c20' });\n const currentDevice = await outputVFRef.current.createTransformDevice(ms);\n outputVFNodeRef.current = await currentDevice.createAudioNode(audioRootState.audioContext);\n outputVFNodeRef.current.end.connect(outputNode);\n };\n loadOutputVF();\n }, []);\n const toGoF32DataRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();\n const toGoF32DataResolveRef = (0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)();\n const startChangedVoiceProviderLooper = async () => {\n const micBufferSize = appSettings.buffer_size;\n // let flag = true\n let prevF32Data = null;\n let triggerWaiting = 0;\n let reloading = 0;\n while (true) {\n const micChunkBufferSize = chunkSizeRef.current * micBufferSize / 2; // sample rateで割る\n if (changedVoiceBufferRef.current.length == 0) {\n const p = new Promise((resolve) => {\n setTimeout(() => { resolve(); }, 200);\n });\n await p;\n continue;\n }\n else {\n // console.log(\"LENGTH:::\", changedVoiceBufferRef.current.length)\n if (changedVoiceBufferRef.current.length > 5) {\n while (changedVoiceBufferRef.current.length > 1) {\n changedVoiceBufferRef.current.shift();\n }\n }\n const num = changedVoiceBufferRef.current.length;\n let tmpBufferSize = 0;\n for (let i = 0; i < num; i++) {\n tmpBufferSize += changedVoiceBufferRef.current[i].length / 2;\n }\n let index = 0;\n const tmpf32Data = new Float32Array(tmpBufferSize);\n for (let i = 0; i < num; i++) {\n let currentF32Data = changedVoiceBufferRef.current.shift();\n if (prevF32Data && prevF32Data.length == currentF32Data.length) {\n if (prevF32Data.some(x => { isNaN(x); })) {\n console.log(\"chunk size changed. adjusting...(nan)\");\n continue;\n }\n if (prevF32Data.length != micChunkBufferSize * 2) {\n console.log(\"chunk size changed. adjusting...(len)\", prevF32Data.length, micChunkBufferSize * 2);\n continue;\n }\n for (let j = 0; j < micChunkBufferSize; j++) {\n const overlap = 1024;\n const currentStrength = Math.min((j / overlap), 1);\n // const currentStrength = 1\n const prevData = prevF32Data[micChunkBufferSize * 1 + j] * (1 - currentStrength);\n const currentData = currentF32Data[micChunkBufferSize * 0 + j] * currentStrength;\n tmpf32Data[index] = prevData + currentData;\n index++;\n }\n }\n prevF32Data = currentF32Data;\n }\n toGoF32DataRef.current = tmpf32Data;\n const p = new Promise(resolve => {\n toGoF32DataResolveRef.current = resolve;\n });\n reloadingTimesRef.current.push(Date.now() - reloading);\n const reloadingAvr = calcAverage(reloadingTimesRef.current);\n setReloadingTime(reloadingAvr);\n triggerWaiting = Date.now();\n await p;\n triggerWaitingTimesRef.current.push(Date.now() - triggerWaiting);\n const triggerAvr = calcAverage(triggerWaitingTimesRef.current);\n setTriggerWaitingTime(triggerAvr);\n reloading = Date.now();\n toGoF32DataRef.current = undefined;\n }\n // if (flag) {\n // const p2 = new Promise(resolve => {\n // setTimeout(resolve, 1000 * 1)\n // })\n // await p2\n // flag = false\n // }\n }\n };\n const startChangedVoiceConsumerLooper = async () => {\n while (true) {\n const f32Data = toGoF32DataRef.current;\n if (!f32Data) {\n const p = new Promise((resolve) => {\n setTimeout(() => { resolve(); }, 200);\n });\n await p;\n continue;\n }\n toGoF32DataResolveRef.current();\n const p = new Promise((resolve) => {\n const source = audioRootState.audioContext.createBufferSource();\n const buffer = audioRootState.audioContext.createBuffer(1, f32Data.length, 24000);\n buffer.getChannelData(0).set(f32Data);\n source.onended = () => {\n resolve();\n };\n source.buffer = buffer;\n // source.connect(outputVFNodeRef.current?.start!)\n source.connect(outputNode);\n // source.connect(filter)\n source.start();\n });\n await p;\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n startChangedVoiceProviderLooper();\n startChangedVoiceConsumerLooper();\n }, []);\n const audioStreamer = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n return new _020_2_AudioStreamer__WEBPACK_IMPORTED_MODULE_8__.AudioStreamer(appSettings, (voiceChangerMode, data) => {\n if (voiceChangerMode === \"realtime\") {\n voicePlayerNode.postReceivedVoice(data);\n return;\n }\n console.log(\"near realtime mode\");\n const i16Data = new Int16Array(data);\n const f32Data = new Float32Array(i16Data.length);\n // https://stackoverflow.com/questions/35234551/javascript-converting-from-int16-to-float32\n i16Data.forEach((x, i) => {\n const float = (x >= 0x8000) ? -(0x10000 - x) / 0x8000 : x / 0x7FFF;\n f32Data[i] = float;\n });\n const source = audioRootState.audioContext.createBufferSource();\n const buffer = audioRootState.audioContext.createBuffer(1, f32Data.length, 24000);\n buffer.getChannelData(0).set(f32Data);\n source.buffer = buffer;\n source.start();\n source.connect(outputNode);\n }, {\n notifyResponseTime: (time) => {\n responseTimesRef.current.push(time);\n const avr = calcAverage(responseTimesRef.current);\n setResponseTime(avr);\n },\n notifySendBufferingTime: (time) => {\n bufferingTimesRef.current.push(time);\n const avr = calcAverage(bufferingTimesRef.current);\n setBufferingTime(avr);\n },\n }, { objectMode: true, });\n }, []);\n const micStream = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(() => {\n const s = new (microphone_stream__WEBPACK_IMPORTED_MODULE_5___default())({\n objectMode: true,\n bufferSize: appSettings.buffer_size,\n context: audioRootState.audioContext\n });\n s.pipe(audioStreamer);\n s.setStream(destinationNodeForVoiceLoader.stream); // (★１)\n return s;\n }, []);\n const useVoiceLoaderMediaStream = async () => {\n // micStreamに複数のストリームを追加することができることが分かったため、\n // ストリームは予め登録しておく(★１)。ここでは、recorderのステータスを併せるのみ。\n if (appSettings.voice_changer_mode === \"realtime\") {\n startRealtimeConvert();\n }\n else {\n startRecord();\n }\n };\n const setNewAudioInputDevice = async (deviceId) => {\n console.log(\"setNewAudioInputDevice\", deviceId);\n let vf = voiceFocusDeviceTransformer;\n if (!vf) {\n vf = await amazon_chime_sdk_js__WEBPACK_IMPORTED_MODULE_3__.VoiceFocusDeviceTransformer.create({ variant: 'c20' });\n setVoiceFocusDeviceTransformer(vf);\n }\n if (micMediaStream) {\n micMediaStream.getTracks().forEach(x => {\n x.stop();\n });\n }\n if (deviceId === \"none\") {\n return;\n }\n const constraints = {\n audio: {\n deviceId: deviceId,\n sampleRate: appSettings.sample_rate,\n // sampleSize: 16,\n channelCount: 1,\n echoCancellation: true,\n noiseSuppression: true,\n },\n video: false,\n };\n console.log(\"constraints::\", constraints);\n const newMicMediaStream = await navigator.mediaDevices.getUserMedia(constraints);\n console.log(\"new MediaStream\", newMicMediaStream);\n if (appSettings.vf_enable) {\n let currentDevice = voiceFocusTransformDevice;\n if (!currentDevice) {\n currentDevice = (await vf.createTransformDevice(newMicMediaStream)) || null;\n setVoiceFocusTransformDevice(currentDevice);\n }\n else {\n currentDevice.chooseNewInnerDevice(newMicMediaStream);\n }\n const nodeToVF = audioRootState.audioContext.createMediaStreamSource(newMicMediaStream);\n const voiceFocusNode = await currentDevice.createAudioNode(audioRootState.audioContext);\n nodeToVF.connect(voiceFocusNode.start);\n voiceFocusNode.end.connect(outputNodeForMicStream);\n micStream.setStream(outputNodeForMicStream.stream);\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n }\n else {\n micStream.setStream(newMicMediaStream);\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n }\n setMicMediaStream(newMicMediaStream);\n };\n const startRealtimeConvert = () => {\n micStream.playRecording();\n setVoiceChangeEnabled(true);\n };\n const pauseRealtimeConvert = () => {\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setSrcId(appSettings.src_id);\n }, [appSettings.src_id]);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setDstId(appSettings.dst_id);\n }, [appSettings.dst_id]);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setVoiceChangerMode(appSettings.voice_changer_mode);\n micStream.pauseRecording();\n setVoiceChangeEnabled(false);\n audioStreamer.stopRecord();\n setIsRecording(false);\n }, [appSettings.voice_changer_mode]);\n const startRecord = () => {\n audioStreamer.clearRecordedData();\n micStream.playRecording();\n audioStreamer.startRecord();\n setIsRecording(true);\n };\n const stopRecord = () => {\n audioStreamer.stopRecord();\n setIsRecording(false);\n };\n const sendRecordedData = () => {\n audioStreamer.sendRecordedData();\n audioStreamer.clearRecordedData();\n };\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setServerUrl(appSettings.voice_changer_server_url);\n }, [appSettings.voice_changer_server_url]);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setMajarMode(appSettings.majar_mode);\n }, [appSettings.majar_mode]);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setGpu(appSettings.gpu);\n }, [appSettings.gpu]);\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setPrefixChunkSize(appSettings.prefix_chunk_size);\n chunkSizeRef.current = appSettings.chunk_size;\n }, [appSettings.prefix_chunk_size]);\n ///// For Worklet\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n audioStreamer.setChunkSize(appSettings.chunk_size);\n chunkSizeRef.current = appSettings.chunk_size;\n }, [appSettings.chunk_size]);\n ///// For Worklet\n (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {\n voicePlayerNode.notifyChangeProps({\n deltaSize: appSettings.chunk_size,\n crossFadeOffsetRate: appSettings.advance.cross_fade_offset_rate,\n crossFadeEndRate: appSettings.advance.cross_fade_end_rate,\n crossFadeLowerValue: appSettings.advance.cross_fade_lower_value,\n crossFadeType: appSettings.advance.cross_fade_type\n });\n }, [appSettings.advance.cross_fade_offset_rate, appSettings.advance.cross_fade_end_rate, appSettings.advance.cross_fade_lower_value, appSettings.chunk_size, appSettings.advance.cross_fade_type]);\n return {\n voiceChangeEnabled,\n isRecording,\n sourceNodeFromForMicStream,\n sourceNodeFromOutput,\n destinationNodeForVoiceLoader,\n responseTime,\n bufferingTime,\n reloadingTime,\n triggerWaitingTime,\n modelProps,\n modelUploadProgress,\n modelUploadEnd,\n setNewAudioInputDevice,\n useVoiceLoaderMediaStream,\n startRealtimeConvert,\n pauseRealtimeConvert,\n startRecord,\n stopRecord,\n sendRecordedData,\n setModelProps,\n sendModelProps,\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/020_useVoiceChangerController.ts?"); /***/ }), @@ -3979,7 +4044,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 */ \"useThree\": () => (/* binding */ useThree)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var _pixiv_three_vrm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @pixiv/three-vrm */ \"./node_modules/@pixiv/three-vrm/lib/three-vrm.module.min.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 three_examples_jsm_controls_OrbitControls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! three/examples/jsm/controls/OrbitControls */ \"./node_modules/three/examples/jsm/controls/OrbitControls.js\");\n/* harmony import */ var three_examples_jsm_loaders_GLTFLoader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! three/examples/jsm/loaders/GLTFLoader */ \"./node_modules/three/examples/jsm/loaders/GLTFLoader.js\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\n\n\n\nconst useThree = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_4__.useAppSetting)();\n const [vrmPath, setVrmPath] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null);\n const [parentDiv, setParentDiv] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)();\n const canvasWidth = applicationSettingState.applicationSetting.avatar.avatar_canvas_size[0];\n const canvasHeight = applicationSettingState.applicationSetting.avatar.avatar_canvas_size[1];\n //// (1) シーン設定\n const scene = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n const scene = new three__WEBPACK_IMPORTED_MODULE_5__.Scene();\n // scene.add(new THREE.AxesHelper(5));\n // scene.add(new THREE.GridHelper(10, 10));\n scene.background = new three__WEBPACK_IMPORTED_MODULE_5__.Color(0x404040);\n return scene;\n }, []);\n //// (2)カメラの生成\n const camera = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n const camera = new three__WEBPACK_IMPORTED_MODULE_5__.PerspectiveCamera(45, canvasWidth / canvasHeight, 0.1, 10);\n camera.position.set(0, 1.0, -0.9);\n return camera;\n }, []);\n //// (3)レンダラーの生成\n const renderer = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n const renderer = new three__WEBPACK_IMPORTED_MODULE_5__.WebGLRenderer();\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(canvasWidth, canvasHeight);\n renderer.setClearColor(0x7fbfff, 1.0);\n return renderer;\n }, []);\n //// (4) Loader\n const loader = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n return new three_examples_jsm_loaders_GLTFLoader__WEBPACK_IMPORTED_MODULE_3__.GLTFLoader();\n }, []);\n //// (5) light設定\n const light = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n const light = new three__WEBPACK_IMPORTED_MODULE_5__.DirectionalLight(0xffffff);\n light.position.set(-1, 1, -1).normalize();\n scene.add(light);\n return light;\n }, []);\n //// (6) Orbit Control\n const controls = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n const controls = new three_examples_jsm_controls_OrbitControls__WEBPACK_IMPORTED_MODULE_2__.OrbitControls(camera, renderer.domElement);\n controls.target.x = 0;\n controls.target.y = 1.0;\n controls.target.x = 0;\n controls.update();\n return controls;\n }, []);\n const [character, setCharacter] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null);\n // const setParentDiv = (parent: HTMLDivElement) => {\n // parent.appendChild(renderer.domElement);\n // renderer.domElement.style.width = \"\";\n // renderer.domElement.style.height = \"\";\n // renderer.domElement.style.objectFit = \"contain\";\n // }\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!parentDiv) {\n return;\n }\n parentDiv.innerHTML = \"\";\n parentDiv.appendChild(renderer.domElement);\n renderer.domElement.style.width = \"\";\n renderer.domElement.style.height = \"\";\n renderer.domElement.style.objectFit = \"contain\";\n }, [parentDiv, renderer]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (camera) {\n camera.aspect = canvasWidth / canvasHeight;\n }\n if (renderer) {\n renderer.setSize(canvasWidth, canvasHeight);\n renderer.domElement.style.width = \"\";\n renderer.domElement.style.height = \"\";\n renderer.domElement.style.objectFit = \"contain\";\n }\n }, [canvasWidth, canvasHeight]);\n const loadAvatar = async (url) => {\n // 既存avatarの取り除き。\n if (character) {\n scene.remove(character.scene);\n }\n // アバター読み込み\n const p = new Promise((resolve, _reject) => {\n loader.load(url, async (gltf) => {\n const vrm = await _pixiv_three_vrm__WEBPACK_IMPORTED_MODULE_0__.VRM.from(gltf);\n resolve(vrm);\n });\n });\n const vrm = await p;\n scene.add(vrm.scene);\n setVrmPath(url);\n setCharacter(vrm);\n return vrm;\n };\n const resetAvatar = () => {\n if (vrmPath) {\n loadAvatar(vrmPath);\n }\n };\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!applicationSettingState.applicationSetting?.avatar.avatar_url) {\n return;\n }\n loadAvatar(applicationSettingState.applicationSetting?.avatar.avatar_url);\n }, [applicationSettingState.applicationSetting?.avatar.avatar_url]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n const bgColor = applicationSettingState.applicationSetting?.avatar.background_color || \"#000000\";\n const cRed = parseInt(bgColor[1] + bgColor[2], 16);\n const cGreen = parseInt(bgColor[3] + bgColor[4], 16);\n const cBlue = parseInt(bgColor[5] + bgColor[6], 16);\n scene.background = new three__WEBPACK_IMPORTED_MODULE_5__.Color(cRed / 255, cGreen / 255, cBlue / 255);\n }, [applicationSettingState.applicationSetting?.avatar.background_color]);\n return {\n scene,\n camera,\n renderer,\n loader,\n light,\n controls,\n character,\n setParentDiv,\n resetAvatar,\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/021_useThree.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ThreeController\": () => (/* binding */ ThreeController),\n/* harmony export */ \"useThree\": () => (/* binding */ useThree)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n/* harmony import */ var _pixiv_three_vrm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @pixiv/three-vrm */ \"./node_modules/@pixiv/three-vrm/lib/three-vrm.module.min.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 three_examples_jsm_controls_OrbitControls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! three/examples/jsm/controls/OrbitControls */ \"./node_modules/three/examples/jsm/controls/OrbitControls.js\");\n/* harmony import */ var three_examples_jsm_loaders_GLTFLoader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! three/examples/jsm/loaders/GLTFLoader */ \"./node_modules/three/examples/jsm/loaders/GLTFLoader.js\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\n\n\n\nclass ThreeController {\n scene;\n camera;\n renderer;\n loader;\n light;\n controls;\n parentDiv;\n character;\n vrmPath = \"\";\n constructor(canvasWidth, canvasHeight) {\n this.scene = new three__WEBPACK_IMPORTED_MODULE_5__.Scene();\n // this.scene.add(new THREE.AxesHelper(5));\n // this.scene.add(new THREE.GridHelper(10, 10));\n this.scene.background = new three__WEBPACK_IMPORTED_MODULE_5__.Color(0x404040);\n this.camera = new three__WEBPACK_IMPORTED_MODULE_5__.PerspectiveCamera(45, canvasWidth / canvasHeight, 0.1, 10);\n this.camera.position.set(0, 1.0, -0.9);\n this.renderer = new three__WEBPACK_IMPORTED_MODULE_5__.WebGLRenderer();\n this.renderer.setPixelRatio(window.devicePixelRatio);\n this.renderer.setSize(canvasWidth, canvasHeight);\n this.renderer.setClearColor(0x7fbfff, 1.0);\n this.loader = new three_examples_jsm_loaders_GLTFLoader__WEBPACK_IMPORTED_MODULE_3__.GLTFLoader();\n this.light = new three__WEBPACK_IMPORTED_MODULE_5__.DirectionalLight(0xffffff);\n this.light.position.set(-1, 1, -1).normalize();\n this.scene.add(this.light);\n this.controls = new three_examples_jsm_controls_OrbitControls__WEBPACK_IMPORTED_MODULE_2__.OrbitControls(this.camera, this.renderer.domElement);\n this.controls.target.x = 0;\n this.controls.target.y = 1.0;\n this.controls.target.x = 0;\n this.controls.update();\n }\n setParentDiv = (parentDiv) => {\n if (this.parentDiv) {\n this.parentDiv.removeChild(this.renderer.domElement);\n }\n this.parentDiv = parentDiv;\n this.parentDiv.innerHTML = \"\";\n this.parentDiv.appendChild(this.renderer.domElement);\n this.renderer.domElement.style.width = \"\";\n this.renderer.domElement.style.height = \"\";\n this.renderer.domElement.style.objectFit = \"contain\";\n };\n changeCanvasSize = (canvasWidth, canvasHeight) => {\n this.camera.aspect = canvasWidth / canvasHeight;\n this.renderer.setSize(canvasWidth, canvasHeight);\n this.renderer.domElement.style.width = \"\";\n this.renderer.domElement.style.height = \"\";\n this.renderer.domElement.style.objectFit = \"contain\";\n };\n loadAvatar = async (url) => {\n // 既存avatarの取り除き。\n if (this.character) {\n this.scene.remove(this.character.scene);\n this.character.dispose();\n }\n // アバター読み込み\n const p = new Promise((resolve, _reject) => {\n this.loader.load(url, async (gltf) => {\n const character = await _pixiv_three_vrm__WEBPACK_IMPORTED_MODULE_0__.VRM.from(gltf);\n resolve(character);\n });\n });\n this.character = await p;\n this.scene.add(this.character.scene);\n this.vrmPath = url;\n };\n resetAvatar = async () => {\n await this.loadAvatar(this.vrmPath);\n };\n setBackgroundColor = (bgColor) => {\n const cRed = parseInt(bgColor[1] + bgColor[2], 16);\n const cGreen = parseInt(bgColor[3] + bgColor[4], 16);\n const cBlue = parseInt(bgColor[5] + bgColor[6], 16);\n this.scene.background = new three__WEBPACK_IMPORTED_MODULE_5__.Color(cRed / 255, cGreen / 255, cBlue / 255);\n };\n update = () => {\n this.controls.update();\n this.character?.springBoneManager?.springBoneGroupList.forEach((element) => {\n element.forEach((node) => {\n node.update(2);\n });\n });\n this.character?.springBoneManager?.lateUpdate(10);\n this.renderer.render(this.scene, this.camera);\n };\n}\nconst useThree = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_4__.useAppSetting)();\n const canvasWidth = applicationSettingState.applicationSetting.avatar.avatar_canvas_size[0];\n const canvasHeight = applicationSettingState.applicationSetting.avatar.avatar_canvas_size[1];\n //// !!! useMemoで、条件に応じて１回だけ初期化する方法が思いつかなかったのでuseState, useEffectでやる。\n //// !!! useMemoの中でインスタンスを再生成（destroyして、生成）も考えたが、useMemoの中で自己参照ができないのでdestroyができず、それもできなかった。今のところ、１回初期化はuseEffectでやらざるを得ないという結論。\n const threeControllerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();\n const [threeController, setThreeController] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(threeControllerRef.current);\n const [_threeControllerUpdate, setThreeControllerUpdate] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return;\n }\n if (threeControllerRef.current)\n return; // 初期化済み\n threeControllerRef.current = new ThreeController(canvasWidth, canvasHeight);\n const bgColor = applicationSettingState.applicationSetting?.avatar.background_color || \"#000000\";\n threeControllerRef.current.setBackgroundColor(bgColor);\n setThreeController(threeControllerRef.current);\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar]);\n const setParentDiv = (parentDiv) => {\n if (!threeControllerRef.current)\n return;\n threeControllerRef.current.setParentDiv(parentDiv);\n setThreeControllerUpdate(new Date().getTime());\n };\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!threeControllerRef.current)\n return;\n threeControllerRef.current.changeCanvasSize(canvasWidth, canvasHeight);\n setThreeControllerUpdate(new Date().getTime());\n }, [canvasWidth, canvasHeight]);\n // const loadAvatar = async (url: string) => {\n // if (!threeControllerRef.current) return\n // threeControllerRef.current.loadAvatar(url)\n // }\n const resetAvatar = async () => {\n if (!threeControllerRef.current)\n return;\n await threeControllerRef.current.resetAvatar();\n setThreeControllerUpdate(new Date().getTime());\n };\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!threeControllerRef.current)\n return;\n const loadAvatar = async () => {\n threeControllerRef.current?.loadAvatar(applicationSettingState.applicationSetting.avatar.avatar_url);\n setThreeControllerUpdate(new Date().getTime());\n };\n loadAvatar();\n }, [applicationSettingState.applicationSetting.avatar.avatar_url, applicationSettingState.applicationSetting.avatar.enable_avatar]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!threeControllerRef.current)\n return;\n const bgColor = applicationSettingState.applicationSetting?.avatar.background_color || \"#000000\";\n threeControllerRef.current.setBackgroundColor(bgColor);\n setThreeControllerUpdate(new Date().getTime());\n }, [applicationSettingState.applicationSetting?.avatar.background_color]);\n const update = () => {\n threeControllerRef.current?.update();\n };\n return {\n threeController,\n setParentDiv,\n resetAvatar,\n update,\n };\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/021_useThree.ts?"); /***/ }), @@ -3990,7 +4055,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 */ \"useMotionCapture\": () => (/* binding */ useMotionCapture)\n/* harmony export */ });\n/* harmony import */ var _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @dannadori/mediapipe-avatar-js */ \"./node_modules/@dannadori/mediapipe-avatar-js/dist/index.js\");\n/* harmony import */ var _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__);\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 _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\n\nconst useMotionCapture = (props) => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const [isInitialized, setIsInitialzed] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n const [smaWinSize, setSmaWinSize] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(1);\n const detector = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n const d = new _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__.MotionDetector();\n return d;\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n const initlizeMotionDetector = async () => {\n await detector.initialize();\n await detector.setEnableFullbodyCapture(false);\n await detector.initializeManagers();\n // detector.setMovingAverageWindow(smaWinSize)\n };\n initlizeMotionDetector();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n detector.setMovingAverageWindow(smaWinSize);\n }, [smaWinSize]);\n const avatar = (0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n const avatar = new _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__.MediapipeAvator();\n avatar.enableUpperBody = true;\n return avatar;\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!props.vrm) {\n return;\n }\n avatar.initialize(props.vrm, props.scene);\n // avatar.enableHands = false;\n // avatar.enableLegs = false;\n avatar.enableUpperBody = true;\n setIsInitialzed(true);\n }, [props.vrm, props.scene]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n const enable = applicationSettingState.applicationSetting?.avatar.motion_capture_upperbody || false;\n detector.setEnableFullbodyCapture(enable);\n }, [applicationSettingState.applicationSetting?.avatar.motion_capture_upperbody]);\n const retVal = {\n detector,\n avatar,\n isInitialized,\n smaWinSize,\n setSmaWinSize\n };\n return retVal;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/022_useMotionCapture.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"useMotionCapture\": () => (/* binding */ useMotionCapture)\n/* harmony export */ });\n/* harmony import */ var _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @dannadori/mediapipe-avatar-js */ \"./node_modules/@dannadori/mediapipe-avatar-js/dist/index.js\");\n/* harmony import */ var _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__);\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 _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\n\nclass MotionCaptureController {\n detector;\n avatar;\n avatarInitialized = false;\n syncLip = false;\n // private captureFace: boolean = false\n // private captureUpperBody: boolean = false\n prevdB = 0;\n constructor() {\n this.detector = new _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__.MotionDetector();\n this.avatar = new _dannadori_mediapipe_avatar_js__WEBPACK_IMPORTED_MODULE_0__.MediapipeAvator();\n this.avatar.enableUpperBody = true;\n this.initlizeMotionDetector();\n }\n initlizeMotionDetector = async () => {\n await this.detector.initialize();\n await this.detector.setEnableFullbodyCapture(false);\n await this.detector.initializeManagers();\n // this.detector.setMovingAverageWindow(smaWinSize)\n };\n setMovingAverageWindow = (smaWinSize) => {\n this.detector.setMovingAverageWindow(smaWinSize);\n };\n initializeAvatar = async (character, scene) => {\n this.avatar.initialize(character, scene);\n // this.avatar.enableHands = false;\n // this.avatar.enableLegs = false;\n this.avatar.enableUpperBody = true;\n this.avatarInitialized = true;\n };\n setMotionCaptureMode = (_captureFace, captureUpperBody, syncLip) => {\n // this.captureFace = captureFace\n // this.captureUpperBody = captureUpperBody\n this.syncLip = syncLip;\n this.detector.setEnableFullbodyCapture(captureUpperBody);\n };\n predictPose = async (snap) => {\n return await this.detector.predict(snap);\n };\n updatePose = (_poses, faceRig, leftHandRig, rightHandRig, poseRig, vcMaxdB) => {\n // console.log(vcMaxdBRef.current);\n if (faceRig && this.syncLip) {\n faceRig.mouth.shape.A = 0;\n faceRig.mouth.shape.I = 0;\n faceRig.mouth.shape.U = 0;\n faceRig.mouth.shape.E = 0;\n faceRig.mouth.shape.O = 0;\n const diff = vcMaxdB - this.prevdB;\n this.prevdB = vcMaxdB;\n if (vcMaxdB > 40) {\n if (diff > 20) {\n faceRig.mouth.shape.A = 1;\n }\n else if (diff > 10) {\n faceRig.mouth.shape.A = 0.5;\n }\n else if (diff > 0) {\n faceRig.mouth.shape.I = 0.6;\n }\n else if (diff > -10) {\n faceRig.mouth.shape.U = 0.5;\n }\n else if (diff > -20) {\n faceRig.mouth.shape.O = 0.2;\n }\n }\n // if (vcMaxdBRef.current > 120) {\n // faceRig.mouth.shape.A = 1;\n // } else if (vcMaxdBRef.current > 115) {\n // faceRig.mouth.shape.A = 0.5;\n // } else if (vcMaxdBRef.current > 110) {\n // faceRig.mouth.shape.I = 0.6;\n // } else if (vcMaxdBRef.current > 100) {\n // faceRig.mouth.shape.U = 0.5;\n // } else if (vcMaxdBRef.current > 50) {\n // faceRig.mouth.shape.O = 0.2;\n // }\n }\n if (this.avatarInitialized) {\n this.avatar.isTargetVisible = false;\n this.avatar.updatePose(faceRig, poseRig, leftHandRig, rightHandRig);\n }\n };\n}\nconst useMotionCapture = (props) => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const avatarSetting = applicationSettingState.applicationSetting.avatar;\n const [smaWinSize, setSmaWinSize] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(1);\n const motionCaptureControllerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();\n const [motionCaptureController, setMotionCaptureController] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(motionCaptureControllerRef.current);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!avatarSetting.enable_avatar)\n return;\n if (motionCaptureControllerRef.current)\n return;\n motionCaptureControllerRef.current = new MotionCaptureController();\n setMotionCaptureController(motionCaptureControllerRef.current);\n }, [avatarSetting.enable_avatar]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!motionCaptureController)\n return;\n motionCaptureController.setMovingAverageWindow(smaWinSize);\n }, [motionCaptureController, smaWinSize]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!props.threeController)\n return;\n if (!props.threeController.scene)\n return;\n if (!props.threeController.character)\n return;\n if (!motionCaptureController)\n return;\n motionCaptureController.initializeAvatar(props.threeController.character, props.threeController.scene);\n }, [props.threeController?.character, props.threeController?.scene, avatarSetting.enable_avatar, motionCaptureController]);\n (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n if (!motionCaptureController)\n return;\n motionCaptureController.setMotionCaptureMode(avatarSetting.motion_capture_face, avatarSetting.motion_capture_upperbody, avatarSetting.lip_overwrite_with_voice);\n }, [avatarSetting.motion_capture_face, avatarSetting.motion_capture_upperbody, avatarSetting.lip_overwrite_with_voice, avatarSetting.enable_avatar, motionCaptureController]);\n const predictPose = async (snap) => {\n return await motionCaptureControllerRef.current?.predictPose(snap);\n };\n const updatePose = (poses, faceRig, leftHandRig, rightHandRig, poseRig, vcMaxdB) => {\n return motionCaptureControllerRef.current?.updatePose(poses, faceRig, leftHandRig, rightHandRig, poseRig, vcMaxdB);\n };\n const retVal = {\n smaWinSize,\n setSmaWinSize,\n predictPose,\n updatePose\n };\n return retVal;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/022_useMotionCapture.ts?"); /***/ }), @@ -4001,7 +4066,18 @@ 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 */ \"useFrontendManager\": () => (/* binding */ useFrontendManager)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _100_components_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../100_components/003_hooks/useStateControlCheckbox */ \"./frontend/src/100_components/003_hooks/useStateControlCheckbox.tsx\");\n\n\nconst useFrontendManager = () => {\n const [isShareDisplay, setIsShareDisplay] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n // (1) Controller Switch\n const openRightSidebarCheckbox = (0,_100_components_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"open-right-sidebar-checkbox\");\n const returnValue = {\n stateControls: {\n // (1) Controller Switch\n openRightSidebarCheckbox,\n },\n isShareDisplay,\n setIsShareDisplay\n };\n return returnValue;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/100_useFrontendManager.ts?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"useFrontendManager\": () => (/* binding */ useFrontendManager)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _100_components_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../100_components/003_hooks/useStateControlCheckbox */ \"./frontend/src/100_components/003_hooks/useStateControlCheckbox.tsx\");\n\n\nconst useFrontendManager = () => {\n const [isShareDisplay, setIsShareDisplay] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n // (1) Controller Switch\n const openRightSidebarCheckbox = (0,_100_components_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"open-right-sidebar-checkbox\");\n // (2) Dialog\n const speakerSettingDialogCheckbox = (0,_100_components_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"speaker-setting-dialog-checkbox\");\n const returnValue = {\n stateControls: {\n // (1) Controller Switch\n openRightSidebarCheckbox,\n // (2) Dialog\n speakerSettingDialogCheckbox,\n },\n isShareDisplay,\n setIsShareDisplay\n };\n return returnValue;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/100_useFrontendManager.ts?"); + +/***/ }), + +/***/ "./frontend/src/002_hooks/101_useSpeechRecognition.ts": +/*!************************************************************!*\ + !*** ./frontend/src/002_hooks/101_useSpeechRecognition.ts ***! + \************************************************************/ +/***/ ((__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 */ \"RecordingState\": () => (/* binding */ RecordingState),\n/* harmony export */ \"SpeechRecognitionLanguages\": () => (/* binding */ SpeechRecognitionLanguages),\n/* harmony export */ \"useSpeechRecognition\": () => (/* binding */ useSpeechRecognition)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\nconst RecordingState = {\n STOP: \"STOP\",\n LISTENING: \"LISTENING\",\n SPEAKING: \"SPEAKING\",\n};\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nconst SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;\nconst ExpireTime = 1000 * 5; // 5sec\nconst useSpeechRecognition = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const [languageKey, _setLanguageKey] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(applicationSettingState.applicationSetting.transcribe.lang);\n const setLanguageKey = (lang) => {\n applicationSettingState.setTranscribeLang(lang);\n _setLanguageKey(lang);\n };\n const [recordingState, setRecordingState] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"STOP\");\n const recognitionWordRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const [recognitionWord, setRecognitionWord] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(recognitionWordRef.current);\n const isEnableRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n const [isEnable, setIsEnable] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(isEnableRef.current);\n const resolverRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const recognition = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const recognition = new SpeechRecognition();\n recognition.interimResults = true;\n recognition.onresult = (event) => {\n setRecordingState(\"SPEAKING\");\n // console.log(\"res;\", event.results[0][0].transcript, event.results);\n const recognitionWord = {\n word: event.results[0][0].transcript,\n // @ts-ignore\n isFinal: event.results[0].isFinal,\n time: new Date().getTime()\n };\n recognitionWordRef.current = recognitionWord;\n setRecognitionWord(recognitionWordRef.current);\n // 一定時間同じものが登録されていたら削除\n setTimeout(() => {\n if (recognitionWordRef.current === recognitionWord) {\n setRecognitionWord(null);\n }\n }, ExpireTime);\n };\n recognition.onstart = (_event) => {\n setRecordingState(\"LISTENING\");\n };\n // recognition.onaudioend = (event: any) => {\n // // console.log(\"onaudioend:\", event);\n // };\n // recognition.onaudiostart = (event: any) => {\n // // console.log(\"onaudiostart:\", event);\n // };\n recognition.onend = (_event) => {\n // console.log(\"onend:\", event);\n if (resolverRef.current) {\n resolverRef.current(recognitionWordRef.current);\n resolverRef.current = null;\n setRecordingState(\"STOP\");\n }\n else {\n setRecordingState(\"STOP\");\n recognition.start();\n }\n };\n // recognition.onerror = (event: any) => {\n // // console.log(\"onerror:\", event);\n // };\n // recognition.onnomatch = (event: any) => {\n // // console.log(\"onnomatch:\", event);\n // };\n // recognition.onsoundend = (event: any) => {\n // // console.log(\"onsoundend:\", event);\n // };\n // recognition.onsoundstart = (event: any) => {\n // // console.log(\"onsoundstart:\", event);\n // };\n // recognition.onspeechend = (event: any) => {\n // // console.log(\"onspeechend:\", event);\n // };\n // recognition.onspeechstart = (event: any) => {\n // // console.log(\"onspeechstart:\", event);\n // };\n return recognition;\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (languageKey === \"default\") {\n console.log(`default language ${navigator.language}`);\n recognition.lang = navigator.language;\n }\n else {\n recognition.lang = SpeechRecognitionLanguages[languageKey];\n }\n }, [languageKey]);\n const recognitionStartSync = async () => {\n const words = await new Promise((resolve) => {\n resolverRef.current = resolve;\n recognition.start();\n });\n return words;\n };\n const recognitionStart = () => {\n isEnableRef.current = true;\n recognition.start();\n setIsEnable(isEnableRef.current);\n };\n const recognitionStop = () => {\n isEnableRef.current = false;\n setIsEnable(isEnableRef.current);\n };\n return {\n languageKey,\n recordingState,\n recognitionWord,\n isEnable,\n recognitionStartSync,\n setLanguageKey,\n recognitionStart,\n recognitionStop\n };\n};\nconst SpeechRecognitionLanguages = {\n \"Afrikaans(af-ZA)\": \"af-ZA\",\n \"አማርኛ(am-ET)\": \"am-ET\",\n \"Azərbaycanca(az-AZ)\": \"az-AZ\",\n \"বাংলা বাংলাদেশ(bn-BD)\": \"bn-BD\",\n \"বাংলা ভারত(bn-IN)\": \"bn-IN\",\n \"Bahasa Indonesia(id-ID)\": \"id-ID\",\n \"Bahasa Melayu(ms-MY)\": \"ms-MY\",\n \"Català(ca-ES)\": \"ca-ES\",\n \"Čeština(cs-CZ)\": \"cs-CZ\",\n \"Dansk(da-DK)\": \"da-DK\",\n \"Deutsch(de-DE)\": \"de-DE\",\n \"English Australia(en-AU)\": \"en-AU\",\n \"English Canada(en-CA)\": \"en-CA\",\n \"English India(en-IN)\": \"en-IN\",\n \"English Kenya(en-KE)\": \"en-KE\",\n \"English Tanzania(en-TZ)\": \"en-TZ\",\n \"English Ghana(en-GH)\": \"en-GH\",\n \"English New Zealand(en-NZ)\": \"en-NZ\",\n \"English Nigeria(en-NG)\": \"en-NG\",\n \"English South Africa(en-ZA)\": \"en-ZA\",\n \"English Philippines(en-PH)\": \"en-PH\",\n \"English United Kingdom(en-GB)\": \"en-GB\",\n \"English United States(en-US)\": \"en-US\",\n \"Español Argentina(es-AR)\": \"es-AR\",\n \"Español Bolivia(es-BO)\": \"es-BO\",\n \"Español Chile(es-CL)\": \"es-CL\",\n \"Español Colombia(es-CO)\": \"es-CO\",\n \"Español Costa Rica(es-CR)\": \"es-CR\",\n \"Español Ecuador(es-EC)\": \"es-EC\",\n \"Español El Salvador(es-SV)\": \"es-SV\",\n \"Español España(es-ES)\": \"es-ES\",\n \"Español Estados Unidos(es-US)\": \"es-US\",\n \"Español Guatemala(es-GT)\": \"es-GT\",\n \"Español Honduras(es-HN)\": \"es-HN\",\n \"Español México(es-MX)\": \"es-MX\",\n \"Español Nicaragua(es-NI)\": \"es-NI\",\n \"Español Panamá(es-PA)\": \"es-PA\",\n \"Español Paraguay(es-PY)\": \"es-PY\",\n \"Español Perú(es-PE)\": \"es-PE\",\n \"Español Puerto Rico(es-PR)\": \"es-PR\",\n \"Español República Dominicana(es-DO)\": \"es-DO\",\n \"Español Uruguay(es-UY)\": \"es-UY\",\n \"Español Venezuela(es-VE)\": \"es-VE\",\n \"Euskara(eu-ES)\": \"eu-ES\",\n \"Filipino(fil-PH)\": \"fil-PH\",\n \"Français(fr-FR)\": \"fr-FR\",\n \"Basa Jawa(jv-ID)\": \"jv-ID\",\n \"Galego(gl-ES)\": \"gl-ES\",\n \"ગુજરાતી(gu-IN)\": \"gu-IN\",\n \"Hrvatski(hr-HR)\": \"hr-HR\",\n \"IsiZulu(zu-ZA)\": \"zu-ZA\",\n \"Íslenska(is-IS)\": \"is-IS\",\n \"Italiano Italia(it-IT)\": \"it-IT\",\n \"Italiano Svizzera(it-CH)\": \"it-CH\",\n \"ಕನ್ನಡ(kn-IN)\": \"kn-IN\",\n \"ភាសាខ្មែរ(km-KH)\": \"km-KH\",\n \"Latviešu(lv-LV)\": \"lv-LV\",\n \"Lietuvių(lt-LT)\": \"lt-LT\",\n \"മലയാളം(ml-IN)\": \"ml-IN\",\n \"मराठी(mr-IN)\": \"mr-IN\",\n \"Magyar(hu-HU)\": \"hu-HU\",\n \"ລາວ(lo-LA)\": \"lo-LA\",\n \"Nederlands(nl-NL)\": \"nl-NL\",\n \"नेपाली भाषा(ne-NP)\": \"ne-NP\",\n \"Norsk bokmål(nb-NO)\": \"nb-NO\",\n \"Polski(pl-PL)\": \"pl-PL\",\n \"Português Brasil(pt-BR)\": \"pt-BR\",\n \"Português Portugal(pt-PT)\": \"pt-PT\",\n \"Română(ro-RO)\": \"ro-RO\",\n \"සිංහල(si-LK)\": \"si-LK\",\n \"Slovenščina(sl-SI)\": \"sl-SI\",\n \"Basa Sunda(su-ID)\": \"su-ID\",\n \"Slovenčina(sk-SK)\": \"sk-SK\",\n \"Suomi(fi-FI)\": \"fi-FI\",\n \"Svenska(sv-SE)\": \"sv-SE\",\n \"Kiswahili Tanzania(sw-TZ)\": \"sw-TZ\",\n \"Kiswahili Kenya(sw-KE)\": \"sw-KE\",\n \"ქართული(ka-GE)\": \"ka-GE\",\n \"Հայերեն(hy-AM)\": \"hy-AM\",\n \"தமிழ் இந்தியா(ta-IN)\": \"ta-IN\",\n \"தமிழ் சிங்கப்பூர்(ta-SG)\": \"ta-SG\",\n \"தமிழ் இலங்கை(ta-LK)\": \"ta-LK\",\n \"தமிழ் மலேசியா(ta-MY)\": \"ta-MY\",\n \"తెలుగు(te-IN)\": \"te-IN\",\n \"Tiếng Việt(vi-VN)\": \"vi-VN\",\n \"Türkçe(tr-TR)\": \"tr-TR\",\n \"اُردُو پاکستان(ur-PK)\": \"ur-PK\",\n \"اُردُو بھارت(ur-IN)\": \"ur-IN\",\n \"Ελληνικά(el-GR)\": \"el-GR\",\n \"български(bg-BG)\": \"bg-BG\",\n \"Pусский(ru-RU)\": \"ru-RU\",\n \"Српски(sr-RS)\": \"sr-RS\",\n \"Українська(uk-UA)\": \"uk-UA\",\n \"한국어(ko-KR)\": \"ko-KR\",\n \"中文 普通话 (中国大陆)(cmn-Hans-CN)\": \"cmn-Hans-CN\",\n \"中文 普通话 (香港)(cmn-Hans-HK)\": \"cmn-Hans-HK\",\n \"中文 中文 (台灣)(cmn-Hant-TW)\": \"cmn-Hant-TW\",\n \"中文 粵語 (香港)(yue-Hant-HK)\": \"yue-Hant-HK\",\n \"日本語(ja-JP)\": \"ja-JP\",\n \"हिन्दी(hi-IN)\": \"hi-IN\",\n \"ภาษาไทย(th-TH)\": \"th-TH\",\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/002_hooks/101_useSpeechRecognition.ts?"); /***/ }), @@ -4034,7 +4110,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 */ \"AppStateProvider\": () => (/* binding */ AppStateProvider),\n/* harmony export */ \"useAppState\": () => (/* binding */ useAppState)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _002_hooks_020_useVoiceChangerController__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../002_hooks/020_useVoiceChangerController */ \"./frontend/src/002_hooks/020_useVoiceChangerController.ts\");\n/* harmony import */ var _002_hooks_021_useThree__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../002_hooks/021_useThree */ \"./frontend/src/002_hooks/021_useThree.ts\");\n/* harmony import */ var _002_hooks_022_useMotionCapture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../002_hooks/022_useMotionCapture */ \"./frontend/src/002_hooks/022_useMotionCapture.ts\");\n/* harmony import */ var _002_hooks_100_useFrontendManager__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../002_hooks/100_useFrontendManager */ \"./frontend/src/002_hooks/100_useFrontendManager.ts\");\n/* harmony import */ var _001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\n\n\n\nconst AppStateContext = react__WEBPACK_IMPORTED_MODULE_0___default().createContext(null);\nconst useAppState = () => {\n const state = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(AppStateContext);\n if (!state) {\n throw new Error(\"useAppState must be used within AppStateProvider\");\n }\n return state;\n};\nconst AppStateProvider = ({ children }) => {\n const { deviceManagerState } = (0,_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_5__.useAppSetting)();\n const voiceChangerControllerState = (0,_002_hooks_020_useVoiceChangerController__WEBPACK_IMPORTED_MODULE_1__.useVoiceChangerController)();\n const frontendManagerState = (0,_002_hooks_100_useFrontendManager__WEBPACK_IMPORTED_MODULE_4__.useFrontendManager)();\n const threeState = (0,_002_hooks_021_useThree__WEBPACK_IMPORTED_MODULE_2__.useThree)();\n const motionCaptureState = (0,_002_hooks_022_useMotionCapture__WEBPACK_IMPORTED_MODULE_3__.useMotionCapture)({\n vrm: threeState.character,\n scene: threeState.scene,\n });\n const microphoneMaxdBRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n const vcMaxdBRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n // if (!deviceManagerState.audioInputDeviceId) {\n // console.log(\"audioInput device is not initialized\");\n // return;\n // }\n if (deviceManagerState.audioInputDevices.length === 0) {\n console.log(\"audioInput device list is not initialized\");\n return;\n }\n voiceChangerControllerState.setNewAudioInputDevice(deviceManagerState.audioInputDeviceId || \"none\");\n }, [deviceManagerState.audioInputDeviceId, deviceManagerState.audioInputDevices]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { }, []);\n const providerValue = {\n voiceChangerControllerState,\n frontendManagerState,\n threeState,\n motionCaptureState,\n microphoneMaxdBRef,\n vcMaxdBRef,\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AppStateContext.Provider, { value: providerValue }, children);\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/003_provider/003_AppStateProvider.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AppStateProvider\": () => (/* binding */ AppStateProvider),\n/* harmony export */ \"useAppState\": () => (/* binding */ useAppState)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _002_hooks_020_useVoiceChangerController__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../002_hooks/020_useVoiceChangerController */ \"./frontend/src/002_hooks/020_useVoiceChangerController.ts\");\n/* harmony import */ var _002_hooks_021_useThree__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../002_hooks/021_useThree */ \"./frontend/src/002_hooks/021_useThree.ts\");\n/* harmony import */ var _002_hooks_022_useMotionCapture__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../002_hooks/022_useMotionCapture */ \"./frontend/src/002_hooks/022_useMotionCapture.ts\");\n/* harmony import */ var _002_hooks_100_useFrontendManager__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../002_hooks/100_useFrontendManager */ \"./frontend/src/002_hooks/100_useFrontendManager.ts\");\n/* harmony import */ var _002_hooks_101_useSpeechRecognition__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../002_hooks/101_useSpeechRecognition */ \"./frontend/src/002_hooks/101_useSpeechRecognition.ts\");\n/* harmony import */ var _001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\n\n\n\n\nconst AppStateContext = react__WEBPACK_IMPORTED_MODULE_0___default().createContext(null);\nconst useAppState = () => {\n const state = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(AppStateContext);\n if (!state) {\n throw new Error(\"useAppState must be used within AppStateProvider\");\n }\n return state;\n};\nconst AppStateProvider = ({ children }) => {\n const { deviceManagerState } = (0,_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_6__.useAppSetting)();\n const voiceChangerControllerState = (0,_002_hooks_020_useVoiceChangerController__WEBPACK_IMPORTED_MODULE_1__.useVoiceChangerController)();\n const frontendManagerState = (0,_002_hooks_100_useFrontendManager__WEBPACK_IMPORTED_MODULE_4__.useFrontendManager)();\n const threeState = (0,_002_hooks_021_useThree__WEBPACK_IMPORTED_MODULE_2__.useThree)();\n const motionCaptureState = (0,_002_hooks_022_useMotionCapture__WEBPACK_IMPORTED_MODULE_3__.useMotionCapture)({\n threeController: threeState.threeController\n });\n const speechRecognitionState = (0,_002_hooks_101_useSpeechRecognition__WEBPACK_IMPORTED_MODULE_5__.useSpeechRecognition)();\n const microphoneMaxdBRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n const vcMaxdBRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (deviceManagerState.audioInputDevices.length === 0) {\n console.log(\"audioInput device list is not initialized\");\n return;\n }\n voiceChangerControllerState.setNewAudioInputDevice(deviceManagerState.audioInputDeviceId || \"none\");\n }, [deviceManagerState.audioInputDeviceId, deviceManagerState.audioInputDevices]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { }, []);\n const providerValue = {\n voiceChangerControllerState,\n frontendManagerState,\n threeState,\n motionCaptureState,\n speechRecognitionState,\n microphoneMaxdBRef,\n vcMaxdBRef,\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AppStateContext.Provider, { value: providerValue }, children);\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/003_provider/003_AppStateProvider.tsx?"); /***/ }), @@ -4045,7 +4121,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 */ \"Header\": () => (/* binding */ Header)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _102_01_RightSidebarButton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./102_01_RightSidebarButton */ \"./frontend/src/100_components/002_parts/102_01_RightSidebarButton.tsx\");\n\n\nconst Header = () => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-application-title-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", { src: \"./assets/icons/flect.png\", className: \"header-application-title-logo\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-application-title-text\" }, \"Realtime Voice Changer\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-button-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_01_RightSidebarButton__WEBPACK_IMPORTED_MODULE_1__.RightSidebarButton, null))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/100_Header.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Header\": () => (/* binding */ Header)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _102_01_RightSidebarButton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./102_01_RightSidebarButton */ \"./frontend/src/100_components/002_parts/102_01_RightSidebarButton.tsx\");\n\n\nconst Header = () => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-application-title-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", { src: \"./assets/icons/flect.png\", className: \"header-application-title-logo\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-application-title-text\" }, \"Realtime Voice Changer\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-button-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", { className: \"header-button-link\", href: \"https://github.com/w-okada/voice-changer\", target: \"_blank\", rel: \"noopener noreferrer\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", { src: \"./assets/icons/github.svg\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-button-spacer\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_01_RightSidebarButton__WEBPACK_IMPORTED_MODULE_1__.RightSidebarButton, null))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/100_Header.tsx?"); /***/ }), @@ -4089,7 +4165,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 */ \"Body\": () => (/* binding */ Body)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n\n\n\n\nconst Body = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { threeState, frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)();\n const LoopIDRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n const updateCounterRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n let renderRequestId;\n LoopIDRef.current = performance.now();\n // let localLoopID = LoopIDRef.current;\n const mainCanvasForAvatar = document.getElementById(\"body-main-canvas-for-avatar\");\n const ctxForAvatar = mainCanvasForAvatar.getContext(\"2d\");\n const videoElemForAvatar = document.getElementById(\"body-main-video-for-avatar\");\n const mainCanvas = document.getElementById(\"body-main-canvas\");\n const ctx = mainCanvas.getContext(\"2d\");\n const videoElemForBackground = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_3__.AvatarBackgroundVideoElementId);\n const avatarTmpCanvas = document.createElement(\"canvas\");\n avatarTmpCanvas.width = mainCanvasForAvatar.width;\n avatarTmpCanvas.height = mainCanvasForAvatar.height;\n const tmpCtx = avatarTmpCanvas.getContext(\"2d\");\n // 背景画像作成\n const backgroundImage = new Image();\n if (applicationSettingState.applicationSetting?.avatar.backgournd_image_url && applicationSettingState.applicationSetting?.avatar.backgournd_image_url.length > 0) {\n backgroundImage.src = applicationSettingState.applicationSetting?.avatar.backgournd_image_url;\n }\n // クロマキー10進数算出\n const chromakey = applicationSettingState.applicationSetting?.avatar.chroma_key || \"#000000\";\n const cRed = parseInt(chromakey[1] + chromakey[2], 16);\n const cGreen = parseInt(chromakey[3] + chromakey[4], 16);\n const cBlue = parseInt(chromakey[5] + chromakey[6], 16);\n // console.log(\"CHROM\", cRed, cGreen, cBlue);\n const draw = () => {\n updateCounterRef.current++;\n if (updateCounterRef.current % applicationSettingState.applicationSetting.advance.screen_draw_skip_rate !== 0) {\n renderRequestId = requestAnimationFrame(draw);\n return;\n }\n updateCounterRef.current = 0;\n // (1) アバター前景作成\n // アバタービデオをキャンバスに描画⇒イメージデータを取得してクロマキー処理\n // ⇒前景用Canvas作成\n ctxForAvatar.drawImage(videoElemForAvatar, 0, 0, mainCanvasForAvatar.width, mainCanvasForAvatar.height);\n const avatarImageData = ctxForAvatar.getImageData(0, 0, mainCanvasForAvatar.width, mainCanvasForAvatar.height);\n for (let i = 0; i < avatarImageData.data.length; i += 4) {\n if (avatarImageData.data[i + 0] == cRed && avatarImageData.data[i + 1] == cGreen && avatarImageData.data[i + 2] == cBlue) {\n avatarImageData.data[i + 3] = 0;\n }\n else {\n avatarImageData.data[i + 3] = 255;\n }\n }\n tmpCtx.putImageData(avatarImageData, 0, 0);\n // (2) 画像初期化\n ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);\n // (2) 背景描画\n if (frontendManagerState.isShareDisplay) {\n if (videoElemForBackground.played) {\n ctx.drawImage(videoElemForBackground, 0, 0, mainCanvas.width, mainCanvas.height);\n }\n }\n else if (applicationSettingState.applicationSetting?.avatar.backgournd_image_url) {\n ctx.drawImage(backgroundImage, 0, 0, mainCanvas.width, mainCanvas.height);\n }\n // (2) 前景描画\n // const avatarWidth = applicationSettingState.applicationSetting!.avatar.avatar_scale * avatarTmpCanvas.width;\n // const avatarHeight = applicationSettingState.applicationSetting!.avatar.avatar_scale * avatarTmpCanvas.height;\n // const centerX = applicationSettingState.applicationSetting!.avatar.avatar_center_position[0] * avatarTmpCanvas.width;\n // const centerY = applicationSettingState.applicationSetting!.avatar.avatar_center_position[1] * avatarTmpCanvas.height;\n // const startX = centerX - avatarWidth / 2;\n // const startY = centerY - avatarHeight / 2;\n ctx.drawImage(avatarTmpCanvas, 0, 0, mainCanvas.width, mainCanvas.height);\n renderRequestId = requestAnimationFrame(draw);\n // console.log(\"loopId:\", localLoopID, LoopIDRef.current);\n };\n if (applicationSettingState.applicationSetting?.avatar.enable_avatar) {\n draw();\n }\n return () => {\n console.log(\"CANCEL\", renderRequestId);\n cancelAnimationFrame(renderRequestId);\n };\n }, [\n frontendManagerState.isShareDisplay,\n applicationSettingState.applicationSetting?.avatar.backgournd_image_url,\n applicationSettingState.applicationSetting?.avatar.chroma_key,\n applicationSettingState.applicationSetting?.avatar.avatar_canvas_size,\n applicationSettingState.applicationSetting?.avatar.screen_canvas_size,\n applicationSettingState.applicationSetting?.avatar.enable_avatar,\n ]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const videoElem = document.getElementById(\"body-main-video-for-avatar\");\n const ms = threeState.renderer.domElement.captureStream();\n videoElem.srcObject = ms;\n videoElem.play();\n }, []);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"body-content\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"body\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"video\", { id: \"body-main-video-for-avatar\", controls: true, className: \"body-main-video-for-avatar\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", { width: applicationSettingState.applicationSetting?.avatar.avatar_canvas_size[0], height: applicationSettingState.applicationSetting?.avatar.avatar_canvas_size[1], id: \"body-main-canvas-for-avatar\", className: \"body-main-canvas-for-avatar\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", { width: applicationSettingState.applicationSetting?.avatar.screen_canvas_size[0], height: applicationSettingState.applicationSetting?.avatar.screen_canvas_size[1], id: \"body-main-canvas\", className: \"body-main-canvas\" }))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/200_Body.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Body\": () => (/* binding */ Body)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n\n\n\n\nconst Body = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { threeState, frontendManagerState, speechRecognitionState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)();\n const LoopIDRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n const scriptRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n scriptRef.current = speechRecognitionState.recognitionWord;\n const updateCounterRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n let renderRequestId;\n LoopIDRef.current = performance.now();\n // let localLoopID = LoopIDRef.current;\n const mainCanvasForAvatar = document.getElementById(\"body-main-canvas-for-avatar\");\n const ctxForAvatar = mainCanvasForAvatar.getContext(\"2d\");\n const videoElemForAvatar = document.getElementById(\"body-main-video-for-avatar\");\n const mainCanvas = document.getElementById(\"body-main-canvas\");\n const ctx = mainCanvas.getContext(\"2d\");\n const videoElemForBackground = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_3__.AvatarBackgroundVideoElementId);\n const avatarTmpCanvas = document.createElement(\"canvas\");\n avatarTmpCanvas.width = mainCanvasForAvatar.width;\n avatarTmpCanvas.height = mainCanvasForAvatar.height;\n const tmpCtx = avatarTmpCanvas.getContext(\"2d\");\n // 背景画像作成\n const backgroundImage = new Image();\n if (applicationSettingState.applicationSetting.screen.backgournd_image_url.length > 0) {\n backgroundImage.src = applicationSettingState.applicationSetting?.screen.backgournd_image_url;\n }\n // クロマキー10進数算出\n const chromakey = applicationSettingState.applicationSetting?.avatar.chroma_key || \"#000000\";\n const cRed = parseInt(chromakey[1] + chromakey[2], 16);\n const cGreen = parseInt(chromakey[3] + chromakey[4], 16);\n const cBlue = parseInt(chromakey[5] + chromakey[6], 16);\n // console.log(\"CHROM\", cRed, cGreen, cBlue);\n const draw = () => {\n updateCounterRef.current++;\n if (updateCounterRef.current % applicationSettingState.applicationSetting.advance.screen_draw_skip_rate !== 0) {\n renderRequestId = requestAnimationFrame(draw);\n return;\n }\n updateCounterRef.current = 0;\n // (1) アバター前景作成\n // アバタービデオをキャンバスに描画⇒イメージデータを取得してクロマキー処理\n // ⇒前景用Canvas作成\n if (applicationSettingState.applicationSetting.avatar.enable_avatar) {\n ctxForAvatar.drawImage(videoElemForAvatar, 0, 0, mainCanvasForAvatar.width, mainCanvasForAvatar.height);\n const avatarImageData = ctxForAvatar.getImageData(0, 0, mainCanvasForAvatar.width, mainCanvasForAvatar.height);\n for (let i = 0; i < avatarImageData.data.length; i += 4) {\n if (avatarImageData.data[i + 0] == cRed && avatarImageData.data[i + 1] == cGreen && avatarImageData.data[i + 2] == cBlue) {\n avatarImageData.data[i + 3] = 0;\n }\n else {\n avatarImageData.data[i + 3] = 255;\n }\n }\n tmpCtx.putImageData(avatarImageData, 0, 0);\n }\n // (2) 画像初期化\n ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);\n // (2) 背景描画\n if (applicationSettingState.applicationSetting.screen.enable_screen) {\n if (frontendManagerState.isShareDisplay) {\n if (videoElemForBackground.played) {\n ctx.drawImage(videoElemForBackground, 0, 0, mainCanvas.width, mainCanvas.height);\n }\n }\n else if (applicationSettingState.applicationSetting?.screen.backgournd_image_url) {\n ctx.drawImage(backgroundImage, 0, 0, mainCanvas.width, mainCanvas.height);\n }\n }\n // (2) 前景描画\n if (applicationSettingState.applicationSetting.avatar.enable_avatar) {\n ctx.drawImage(avatarTmpCanvas, 0, 0, mainCanvas.width, mainCanvas.height);\n }\n // // (3) スクリプト\n // if (scriptRef.current) {\n // ctx.fillText(scriptRef.current.word, 100, 100);\n // }\n renderRequestId = requestAnimationFrame(draw);\n // console.log(\"loopId:\", localLoopID, LoopIDRef.current);\n };\n if (applicationSettingState.applicationSetting.screen.enable_screen || applicationSettingState.applicationSetting.avatar.enable_avatar) {\n draw();\n }\n return () => {\n console.log(\"CANCEL\", renderRequestId);\n cancelAnimationFrame(renderRequestId);\n };\n }, [\n frontendManagerState.isShareDisplay,\n applicationSettingState.applicationSetting.screen.backgournd_image_url,\n applicationSettingState.applicationSetting.screen.enable_screen,\n applicationSettingState.applicationSetting.avatar.chroma_key,\n applicationSettingState.applicationSetting.avatar.avatar_canvas_size,\n applicationSettingState.applicationSetting.avatar.screen_canvas_size,\n applicationSettingState.applicationSetting.avatar.enable_avatar,\n ]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!threeState.threeController) {\n return;\n }\n const videoElem = document.getElementById(\"body-main-video-for-avatar\");\n const ms = threeState.threeController.renderer.domElement.captureStream();\n videoElem.srcObject = ms;\n videoElem.play();\n }, [threeState.threeController]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"body-content\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"body\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"video\", { id: \"body-main-video-for-avatar\", controls: true, className: \"body-main-video-for-avatar\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", { width: applicationSettingState.applicationSetting?.avatar.avatar_canvas_size[0], height: applicationSettingState.applicationSetting?.avatar.avatar_canvas_size[1], id: \"body-main-canvas-for-avatar\", className: \"body-main-canvas-for-avatar\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", { width: applicationSettingState.applicationSetting?.avatar.screen_canvas_size[0], height: applicationSettingState.applicationSetting?.avatar.screen_canvas_size[1], id: \"body-main-canvas\", className: \"body-main-canvas\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"body-main-script\" }, scriptRef.current?.word || \"\"))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/200_Body.tsx?"); /***/ }), @@ -4100,7 +4176,18 @@ 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 */ \"RightSidebar\": () => (/* binding */ RightSidebar)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../003_hooks/useStateControlCheckbox */ \"./frontend/src/100_components/003_hooks/useStateControlCheckbox.tsx\");\n/* harmony import */ var _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./102_00_HeaderButton */ \"./frontend/src/100_components/002_parts/102_00_HeaderButton.tsx\");\n/* harmony import */ var _301_VoiceChangerControllerContent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./301_VoiceChangerControllerContent */ \"./frontend/src/100_components/002_parts/301_VoiceChangerControllerContent.tsx\");\n/* harmony import */ var _304_AvatarController__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./304_AvatarController */ \"./frontend/src/100_components/002_parts/304_AvatarController.tsx\");\n/* harmony import */ var _306_AdvancedSettingContent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./306_AdvancedSettingContent */ \"./frontend/src/100_components/002_parts/306_AdvancedSettingContent.tsx\");\n\n\n\n\n\n\nconst RightSidebar = () => {\n const sidebarAccordionVoiceChangerCheckBox = (0,_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"sidebar-accordion-voice-changer\");\n // const sidebarAccordionVoiceLoaderCheckBox = useStateControlCheckbox(\"sidebar-accordion-voice-loader\");\n const sidebarAccordionAvatarControllerCheckBox = (0,_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"sidebar-accordion-avatar-controller\");\n const sidebarAccordionAdvancedSettingCheckBox = (0,_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"sidebar-accordion-advanced-setting\");\n const accodionButtonForVoiceChanger = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const accodionButtonForVoiceChangerProps = {\n stateControlCheckbox: sidebarAccordionVoiceChangerCheckBox,\n tooltip: \"Open/Close\",\n onIcon: [\"fas\", \"caret-up\"],\n offIcon: [\"fas\", \"caret-up\"],\n animation: _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.AnimationTypes.spinner,\n tooltipClass: \"tooltip-right\",\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.HeaderButton, { ...accodionButtonForVoiceChangerProps });\n }, []);\n // const accodionButtonForVoiceLoader = useMemo(() => {\n // const accodionButtonForVoiceLoaderProps: HeaderButtonProps = {\n // stateControlCheckbox: sidebarAccordionVoiceLoaderCheckBox,\n // tooltip: \"Open/Close\",\n // onIcon: [\"fas\", \"caret-up\"],\n // offIcon: [\"fas\", \"caret-up\"],\n // animation: AnimationTypes.spinner,\n // tooltipClass: \"tooltip-right\",\n // };\n // return ;\n // }, []);\n const accodionButtonForAvatarController = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const accodionButtonForAvatarControllerProps = {\n stateControlCheckbox: sidebarAccordionAvatarControllerCheckBox,\n tooltip: \"Open/Close\",\n onIcon: [\"fas\", \"caret-up\"],\n offIcon: [\"fas\", \"caret-up\"],\n animation: _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.AnimationTypes.spinner,\n tooltipClass: \"tooltip-right\",\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.HeaderButton, { ...accodionButtonForAvatarControllerProps });\n }, []);\n const accodionButtonForAdvancedSetting = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const accodionButtonForAdvancedSettingProps = {\n stateControlCheckbox: sidebarAccordionAdvancedSettingCheckBox,\n tooltip: \"Open/Close\",\n onIcon: [\"fas\", \"caret-up\"],\n offIcon: [\"fas\", \"caret-up\"],\n animation: _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.AnimationTypes.spinner,\n tooltipClass: \"tooltip-right\",\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.HeaderButton, { ...accodionButtonForAdvancedSettingProps });\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n sidebarAccordionVoiceChangerCheckBox.updateState(true);\n sidebarAccordionAvatarControllerCheckBox.updateState(true);\n // sidebarAccordionAdvancedSettingCheckBox.updateState(true);\n }, []);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"right-sidebar\" },\n sidebarAccordionVoiceChangerCheckBox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-partition\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-title\" }, \"Voice Changer\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-caret\" },\n \" \",\n accodionButtonForVoiceChanger)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_301_VoiceChangerControllerContent__WEBPACK_IMPORTED_MODULE_3__.VoiceChangerControllerContent, null)),\n sidebarAccordionAvatarControllerCheckBox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-partition\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-title\" }, \"Avatar Controller\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-caret\" },\n \" \",\n accodionButtonForAvatarController)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_304_AvatarController__WEBPACK_IMPORTED_MODULE_4__.AvatarControllerContent, null)),\n sidebarAccordionAdvancedSettingCheckBox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-partition\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-title\" }, \"Advanced Setting\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-caret\" },\n \" \",\n accodionButtonForAdvancedSetting)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_306_AdvancedSettingContent__WEBPACK_IMPORTED_MODULE_5__.AdvancedSetting, null)))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/300_RightSidebar.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"RightSidebar\": () => (/* binding */ RightSidebar)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../003_hooks/useStateControlCheckbox */ \"./frontend/src/100_components/003_hooks/useStateControlCheckbox.tsx\");\n/* harmony import */ var _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./102_00_HeaderButton */ \"./frontend/src/100_components/002_parts/102_00_HeaderButton.tsx\");\n/* harmony import */ var _301_VoiceChangerControllerContent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./301_VoiceChangerControllerContent */ \"./frontend/src/100_components/002_parts/301_VoiceChangerControllerContent.tsx\");\n/* harmony import */ var _302_ScreenSettingContent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./302_ScreenSettingContent */ \"./frontend/src/100_components/002_parts/302_ScreenSettingContent.tsx\");\n/* harmony import */ var _303_AvatarController__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./303_AvatarController */ \"./frontend/src/100_components/002_parts/303_AvatarController.tsx\");\n/* harmony import */ var _310_AdvancedSettingContent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./310_AdvancedSettingContent */ \"./frontend/src/100_components/002_parts/310_AdvancedSettingContent.tsx\");\n\n\n\n\n\n\n\nconst RightSidebar = () => {\n const sidebarAccordionVoiceChangerCheckBox = (0,_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"sidebar-accordion-voice-changer\");\n const sidebarAccordionScreenSettingCheckBox = (0,_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"sidebar-accordion-screen-setting\");\n // const sidebarAccordionVoiceLoaderCheckBox = useStateControlCheckbox(\"sidebar-accordion-voice-loader\");\n const sidebarAccordionAvatarControllerCheckBox = (0,_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"sidebar-accordion-avatar-controller\");\n const sidebarAccordionAdvancedSettingCheckBox = (0,_003_hooks_useStateControlCheckbox__WEBPACK_IMPORTED_MODULE_1__.useStateControlCheckbox)(\"sidebar-accordion-advanced-setting\");\n const accodionButtonForVoiceChanger = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const accodionButtonForVoiceChangerProps = {\n stateControlCheckbox: sidebarAccordionVoiceChangerCheckBox,\n tooltip: \"Open/Close\",\n onIcon: [\"fas\", \"caret-up\"],\n offIcon: [\"fas\", \"caret-up\"],\n animation: _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.AnimationTypes.spinner,\n tooltipClass: \"tooltip-right\",\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.HeaderButton, { ...accodionButtonForVoiceChangerProps });\n }, []);\n const accodionButtonForScreenSetting = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const accodionButtonForScreenSettingProps = {\n stateControlCheckbox: sidebarAccordionScreenSettingCheckBox,\n tooltip: \"Open/Close\",\n onIcon: [\"fas\", \"caret-up\"],\n offIcon: [\"fas\", \"caret-up\"],\n animation: _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.AnimationTypes.spinner,\n tooltipClass: \"tooltip-right\",\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.HeaderButton, { ...accodionButtonForScreenSettingProps });\n }, []);\n // const accodionButtonForVoiceLoader = useMemo(() => {\n // const accodionButtonForVoiceLoaderProps: HeaderButtonProps = {\n // stateControlCheckbox: sidebarAccordionVoiceLoaderCheckBox,\n // tooltip: \"Open/Close\",\n // onIcon: [\"fas\", \"caret-up\"],\n // offIcon: [\"fas\", \"caret-up\"],\n // animation: AnimationTypes.spinner,\n // tooltipClass: \"tooltip-right\",\n // };\n // return ;\n // }, []);\n const accodionButtonForAvatarController = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const accodionButtonForAvatarControllerProps = {\n stateControlCheckbox: sidebarAccordionAvatarControllerCheckBox,\n tooltip: \"Open/Close\",\n onIcon: [\"fas\", \"caret-up\"],\n offIcon: [\"fas\", \"caret-up\"],\n animation: _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.AnimationTypes.spinner,\n tooltipClass: \"tooltip-right\",\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.HeaderButton, { ...accodionButtonForAvatarControllerProps });\n }, []);\n const accodionButtonForAdvancedSetting = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const accodionButtonForAdvancedSettingProps = {\n stateControlCheckbox: sidebarAccordionAdvancedSettingCheckBox,\n tooltip: \"Open/Close\",\n onIcon: [\"fas\", \"caret-up\"],\n offIcon: [\"fas\", \"caret-up\"],\n animation: _102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.AnimationTypes.spinner,\n tooltipClass: \"tooltip-right\",\n };\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_102_00_HeaderButton__WEBPACK_IMPORTED_MODULE_2__.HeaderButton, { ...accodionButtonForAdvancedSettingProps });\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n sidebarAccordionVoiceChangerCheckBox.updateState(true);\n sidebarAccordionScreenSettingCheckBox.updateState(true);\n sidebarAccordionAvatarControllerCheckBox.updateState(false);\n sidebarAccordionAdvancedSettingCheckBox.updateState(true);\n }, []);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"right-sidebar\" },\n sidebarAccordionVoiceChangerCheckBox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-partition\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-title\" }, \"Voice Changer\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-caret\" },\n \" \",\n accodionButtonForVoiceChanger)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_301_VoiceChangerControllerContent__WEBPACK_IMPORTED_MODULE_3__.VoiceChangerControllerContent, null)),\n sidebarAccordionScreenSettingCheckBox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-partition\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-title\" }, \"Screen Setting\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-caret\" },\n \" \",\n accodionButtonForScreenSetting)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_302_ScreenSettingContent__WEBPACK_IMPORTED_MODULE_4__.ScreenSettingContent, null)),\n sidebarAccordionAvatarControllerCheckBox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-partition\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-title\" }, \"Avatar Controller\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-caret\" },\n \" \",\n accodionButtonForAvatarController)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_303_AvatarController__WEBPACK_IMPORTED_MODULE_5__.AvatarControllerContent, null)),\n sidebarAccordionAdvancedSettingCheckBox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-partition\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-title\" }, \"Advanced Setting\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-header-caret\" },\n \" \",\n accodionButtonForAdvancedSetting)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_310_AdvancedSettingContent__WEBPACK_IMPORTED_MODULE_6__.AdvancedSetting, null)))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/300_RightSidebar.tsx?"); + +/***/ }), + +/***/ "./frontend/src/100_components/002_parts/301-1_AudioVisualizer.tsx": +/*!*************************************************************************!*\ + !*** ./frontend/src/100_components/002_parts/301-1_AudioVisualizer.tsx ***! + \*************************************************************************/ +/***/ ((__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 */ \"AudioVisualizer\": () => (/* binding */ AudioVisualizer),\n/* harmony export */ \"AudioVisualizerInputTypes\": () => (/* binding */ AudioVisualizerInputTypes)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n\n\n\n\n// import { AudioOutputElementId } from \"../../const\";\nconst AudioVisualizerInputTypes = {\n microphone: \"microphone\",\n voice_changer: \"voice_changer\",\n};\nconst AudioVisualizer = (props) => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppRootState)();\n const { voiceChangerControllerState, microphoneMaxdBRef, vcMaxdBRef } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n const LoopIDRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n const updateCounterRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n let renderRequestId;\n LoopIDRef.current = performance.now();\n // let localLoopID = LoopIDRef.current;\n const analyser = audioRootState.audioContext.createAnalyser();\n const canvas = document.getElementById(`output-audio-visializer-canvas-${props.inputType}`);\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n const ctx = canvas.getContext(\"2d\");\n if (props.inputType === \"microphone\") {\n voiceChangerControllerState.sourceNodeFromForMicStream.connect(analyser);\n }\n else {\n voiceChangerControllerState.sourceNodeFromOutput.connect(analyser);\n }\n analyser.fftSize = 256;\n const bufferLength = analyser.frequencyBinCount;\n const dataArray = new Uint8Array(bufferLength);\n const WIDTH = canvas.width;\n const HEIGHT = canvas.height;\n const barWidth = (WIDTH / bufferLength) * 2.5;\n let barHeight;\n let x = 0;\n function renderFrame() {\n renderRequestId = requestAnimationFrame(renderFrame);\n updateCounterRef.current++;\n if (updateCounterRef.current % applicationSettingState.applicationSetting.advance.visualizer_draw_skip_rate !== 0) {\n return;\n }\n updateCounterRef.current = 0;\n x = 0;\n analyser.getByteFrequencyData(dataArray);\n const maxdB = Math.max(...Array.from(dataArray.slice(4)));\n if (props.inputType === \"microphone\") {\n microphoneMaxdBRef.current = maxdB;\n }\n else {\n vcMaxdBRef.current = maxdB;\n }\n ctx.fillStyle = \"#000\";\n ctx.fillRect(0, 0, WIDTH, HEIGHT);\n for (let i = 0; i < bufferLength; i++) {\n barHeight = dataArray[i] * 4;\n const r = barHeight + 25 * (i / bufferLength);\n const g = 250 * (i / bufferLength);\n const b = 50;\n ctx.fillStyle = \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);\n x += barWidth + 1;\n }\n // console.log(\"loopId:\", localLoopID, LoopIDRef.current);\n }\n renderFrame();\n return () => {\n console.log(\"CANCEL\", renderRequestId);\n cancelAnimationFrame(renderRequestId);\n };\n }, [applicationSettingState.applicationSetting?.advance.visualizer_draw_skip_rate]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"output-audio-visializer\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", { id: `output-audio-visializer-canvas-${props.inputType}`, className: \"output-audio-visializer-canvas\" })));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/301-1_AudioVisualizer.tsx?"); /***/ }), @@ -4111,62 +4198,84 @@ 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 */ \"VoiceChangerControllerContent\": () => (/* binding */ VoiceChangerControllerContent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../001_clients_and_managers/000_ApplicationSettingLoader */ \"./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _101_DeviceSelector__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./101_DeviceSelector */ \"./frontend/src/100_components/002_parts/101_DeviceSelector.tsx\");\n/* harmony import */ var _302_AudioVisualizer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./302_AudioVisualizer */ \"./frontend/src/100_components/002_parts/302_AudioVisualizer.tsx\");\n/* harmony import */ var _303_VoiceLoaderControllerContent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./303_VoiceLoaderControllerContent */ \"./frontend/src/100_components/002_parts/303_VoiceLoaderControllerContent.tsx\");\n\n\n\n\n\n\n\n\nconst VoiceChangerControllerContent = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const { voiceChangerControllerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n const voiceChangerServerUrlInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const serverChangeClicked = () => {\n const input = document.getElementById(\"voice-changer-server-url-input\");\n console.log(input.value);\n applicationSettingState.setVoiceChangerServerUrl(input.value);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Server:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"text\", value: applicationSettingState.applicationSetting?.voice_changer_server_url, id: \"voice-changer-server-url-input\", className: \"sidebar-content-row-input\", onChange: serverChangeClicked })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: serverChangeClicked }, \"Go\")));\n }, [applicationSettingState.applicationSetting?.voice_changer_server_url, applicationSettingState.setVoiceChangerServerUrl]);\n const modelInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const onLoadModelClicked = () => {\n const fileChooser = document.createElement(\"input\");\n fileChooser.type = \"file\";\n fileChooser.onchange = (ev) => {\n if ((ev.currentTarget instanceof HTMLInputElement) == false) {\n console.log(\"not input\");\n return;\n }\n const target = ev.currentTarget;\n console.log(\"Filename: \" + target.files[0].name);\n console.log(\"Type: \" + target.files[0].type);\n console.log(\"Size: \" + target.files[0].size + \" bytes\");\n voiceChangerControllerState.setModelProps({ ...voiceChangerControllerState.modelProps, modelFile: target.files[0] });\n };\n fileChooser.click();\n };\n const onLoadConfigClicked = () => {\n const fileChooser = document.createElement(\"input\");\n fileChooser.type = \"file\";\n fileChooser.onchange = (ev) => {\n if ((ev.currentTarget instanceof HTMLInputElement) == false) {\n console.log(\"not input\");\n return;\n }\n const target = ev.currentTarget;\n console.log(\"Filename: \" + target.files[0].name);\n console.log(\"Type: \" + target.files[0].type);\n console.log(\"Size: \" + target.files[0].size + \" bytes\");\n voiceChangerControllerState.setModelProps({ ...voiceChangerControllerState.modelProps, configFile: target.files[0] });\n };\n fileChooser.click();\n };\n const onSendClicked = () => {\n voiceChangerControllerState.sendModelProps();\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Model:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, voiceChangerControllerState.modelProps.modelFile?.name || \"default\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: onLoadModelClicked }, \"select\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Config:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, voiceChangerControllerState.modelProps.configFile?.name || \"default\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: onLoadConfigClicked }, \"select\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: onSendClicked }, \"send\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-text\" }, voiceChangerControllerState.modelUploadEnd ? \"\" : voiceChangerControllerState.modelUploadProgress + \"%\"))));\n }, [voiceChangerControllerState.modelProps, voiceChangerControllerState.setModelProps, voiceChangerControllerState.modelUploadProgress, voiceChangerControllerState.modelUploadEnd]);\n const audioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Mic:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_101_DeviceSelector__WEBPACK_IMPORTED_MODULE_5__.DeviceSelector, { deviceType: \"audioinput\" }))));\n }, []);\n const audioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Speaker:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_101_DeviceSelector__WEBPACK_IMPORTED_MODULE_5__.DeviceSelector, { deviceType: \"audiooutput\" }))));\n }, []);\n const modeSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.VoiceChangerMode).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: x }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.voice_changer_mode, onChange: (e) => {\n applicationSettingState.setVoiceChangerMode(e.target.value);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return select;\n }, [applicationSettingState.applicationSetting?.voice_changer_mode, applicationSettingState.setVoiceChangerMode]);\n const srcSpekerSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const sid = applicationSettingState.applicationSetting.speaker_ids;\n const sname = applicationSettingState.applicationSetting.speaker_names;\n const options = sid.map((id, index) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: id, value: id }, sname[index]));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.src_id, onChange: (e) => {\n applicationSettingState.setSrcSpeakerId(Number(e.target.value));\n }, className: \"sidebar-content-row-select-select\" }, options));\n return select;\n }, [applicationSettingState.applicationSetting?.src_id, applicationSettingState.setSrcSpeakerId]);\n const dstSpekerSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const sid = applicationSettingState.applicationSetting.speaker_ids;\n const sname = applicationSettingState.applicationSetting.speaker_names;\n const options = sid.map((id, index) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: id, value: id }, sname[index]));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.dst_id, onChange: (e) => {\n applicationSettingState.setDstSpeakerId(Number(e.target.value));\n }, className: \"sidebar-content-row-select-select\" }, options));\n return select;\n }, [applicationSettingState.applicationSetting?.dst_id, applicationSettingState.setDstSpeakerId]);\n const gpuSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const gpus = applicationSettingState.applicationSetting.available_gpus;\n const options = gpus.map((id) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: id, value: id }, id));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.gpu, onChange: (e) => {\n applicationSettingState.setGpu(Number(e.target.value));\n }, className: \"sidebar-content-row-select-select\" }, options));\n return select;\n }, [applicationSettingState.applicationSetting?.gpu, applicationSettingState.setGpu]);\n const gpuRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"GPU ID\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, gpuSelect)));\n }, [applicationSettingState.applicationSetting?.gpu, gpuSelect]);\n const prefixChunkSizeSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.prefix_chunk_size, max: 240, min: 6, step: 1, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n let prefixChunkSize = Number(e.target.value);\n if (prefixChunkSize < applicationSettingState.applicationSetting.chunk_size) {\n // applicationSettingState.setChunkSize(prefixChunkSize); // プレフィックスはデルタサイズ以下にはできない。\n e.target.value = String(applicationSettingState.applicationSetting.chunk_size);\n return;\n }\n applicationSettingState.setPrefixChunkSize(prefixChunkSize);\n } }));\n return select;\n }, [applicationSettingState.applicationSetting?.prefix_chunk_size, applicationSettingState.applicationSetting?.chunk_size, applicationSettingState.setPrefixChunkSize]);\n const prefixChunkRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Pref Size:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, prefixChunkSizeSelect)));\n }, [applicationSettingState.applicationSetting?.voice_changer_mode, prefixChunkSizeSelect]);\n const chunkSizeSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.chunk_size, max: 240, min: 1, step: 1, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n let chunkSize = Number(e.target.value);\n // if (chunkSize % 6 !== 0) {\n // chunkSize = Math.ceil(chunkSize / 6) * 6;\n // }\n if (applicationSettingState.applicationSetting.prefix_chunk_size < chunkSize) {\n // applicationSettingState.setPrefixChunkSize(chunkSize); // プレフィックスはデルタサイズ以下にはできない。\n e.target.value = String(applicationSettingState.applicationSetting.prefix_chunk_size);\n return;\n }\n applicationSettingState.setChunkSize(chunkSize);\n } }));\n return select;\n }, [applicationSettingState.applicationSetting?.chunk_size, applicationSettingState.applicationSetting?.prefix_chunk_size, applicationSettingState.setChunkSize]);\n const chunkRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Chunk Size:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, chunkSizeSelect)));\n }, [applicationSettingState.applicationSetting?.voice_changer_mode, chunkSizeSelect]);\n const realtimePlayButtonRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const label = voiceChangerControllerState.voiceChangeEnabled ? \"stop\" : \"start\";\n const status = voiceChangerControllerState.voiceChangeEnabled ? \"converting...\" : \"stanby...\";\n const className = voiceChangerControllerState.voiceChangeEnabled ? \"sidebar-content-row-button-activated\" : \"sidebar-content-row-button-stanby\";\n const onClicked = voiceChangerControllerState.voiceChangeEnabled\n ? () => {\n voiceChangerControllerState.pauseRealtimeConvert();\n }\n : () => {\n voiceChangerControllerState.startRealtimeConvert();\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: className, onClick: onClicked }, label),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-status-text\", onClick: onClicked }, status))));\n }, [applicationSettingState.applicationSetting?.voice_changer_mode, voiceChangerControllerState.voiceChangeEnabled]);\n const recordingButtonRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"near-realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const label = voiceChangerControllerState.isRecording ? \"stop\" : \"start\";\n const status = voiceChangerControllerState.isRecording ? \"recording...\" : \"stanby...\";\n const className = voiceChangerControllerState.isRecording ? \"sidebar-content-row-button-activated\" : \"sidebar-content-row-button-stanby\";\n const onClicked = voiceChangerControllerState.isRecording\n ? () => {\n voiceChangerControllerState.stopRecord();\n voiceChangerControllerState.sendRecordedData();\n }\n : () => {\n voiceChangerControllerState.startRecord();\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: className, onClick: onClicked }, label),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-status-text\", onClick: onClicked }, status))));\n }, [applicationSettingState.applicationSetting?.voice_changer_mode, voiceChangerControllerState.isRecording]);\n const performanceRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const row = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Buffe Time:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-text\" },\n voiceChangerControllerState.bufferingTime,\n \" ms\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Res Time:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-text\" },\n voiceChangerControllerState.responseTime,\n \" ms\"))));\n return row;\n }, [voiceChangerControllerState.responseTime, voiceChangerControllerState.bufferingTime]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" },\n voiceChangerServerUrlInput,\n modelInput,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-spacer\" })),\n audioInputRow,\n audioOutputRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Mode:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, modeSelect)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Src Voice:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, srcSpekerSelect)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Dst Voice:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, dstSpekerSelect)),\n gpuRow,\n prefixChunkRow,\n chunkRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-spacer\" })),\n realtimePlayButtonRow,\n recordingButtonRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_302_AudioVisualizer__WEBPACK_IMPORTED_MODULE_6__.AudioVisualizer, { inputType: \"microphone\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_302_AudioVisualizer__WEBPACK_IMPORTED_MODULE_6__.AudioVisualizer, { inputType: \"voice_changer\" })),\n performanceRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-spacer\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_303_VoiceLoaderControllerContent__WEBPACK_IMPORTED_MODULE_7__.AudioPlayer, { elementId: _const__WEBPACK_IMPORTED_MODULE_4__.VoiceLoaderAudioElementId1 })));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/301_VoiceChangerControllerContent.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"VoiceChangerControllerContent\": () => (/* binding */ VoiceChangerControllerContent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../001_clients_and_managers/000_ApplicationSettingLoader */ \"./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _101_DeviceSelector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./101_DeviceSelector */ \"./frontend/src/100_components/002_parts/101_DeviceSelector.tsx\");\n/* harmony import */ var _301_1_AudioVisualizer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./301-1_AudioVisualizer */ \"./frontend/src/100_components/002_parts/301-1_AudioVisualizer.tsx\");\n\n\n\n\n\n\nconst VoiceChangerControllerContent = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const { voiceChangerControllerState, frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n // const voiceChangerServerUrlInput = useMemo(() => {\n // const serverChangeClicked = () => {\n // const input = document.getElementById(\"voice-changer-server-url-input\") as HTMLInputElement;\n // console.log(input.value);\n // applicationSettingState.setVoiceChangerServerUrl(input.value);\n // };\n // return (\n //
\n //
Server:
\n //
\n // \n //
\n //
\n // Go\n //
\n //
\n // );\n // }, [applicationSettingState.applicationSetting?.voice_changer_server_url, applicationSettingState.setVoiceChangerServerUrl]);\n const modelInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const onLoadModelClicked = () => {\n const fileChooser = document.createElement(\"input\");\n fileChooser.type = \"file\";\n fileChooser.onchange = (ev) => {\n if ((ev.currentTarget instanceof HTMLInputElement) == false) {\n console.log(\"not input\");\n return;\n }\n const target = ev.currentTarget;\n console.log(\"Filename: \" + target.files[0].name);\n console.log(\"Type: \" + target.files[0].type);\n console.log(\"Size: \" + target.files[0].size + \" bytes\");\n voiceChangerControllerState.setModelProps({ ...voiceChangerControllerState.modelProps, modelFile: target.files[0] });\n };\n fileChooser.click();\n };\n const onLoadConfigClicked = () => {\n const fileChooser = document.createElement(\"input\");\n fileChooser.type = \"file\";\n fileChooser.onchange = (ev) => {\n if ((ev.currentTarget instanceof HTMLInputElement) == false) {\n console.log(\"not input\");\n return;\n }\n const target = ev.currentTarget;\n console.log(\"Filename: \" + target.files[0].name);\n console.log(\"Type: \" + target.files[0].type);\n console.log(\"Size: \" + target.files[0].size + \" bytes\");\n voiceChangerControllerState.setModelProps({ ...voiceChangerControllerState.modelProps, configFile: target.files[0] });\n };\n fileChooser.click();\n };\n const onSendClicked = () => {\n voiceChangerControllerState.sendModelProps();\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-5-2\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Model:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, voiceChangerControllerState.modelProps.modelFile?.name || \"default\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: onLoadModelClicked }, \"select\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-5-2\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Config:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, voiceChangerControllerState.modelProps.configFile?.name || \"default\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: onLoadConfigClicked }, \"select\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-4-3-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, voiceChangerControllerState.modelUploadEnd ? \"\" : voiceChangerControllerState.modelUploadProgress + \"%\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: onSendClicked }, \"send\"))));\n }, [voiceChangerControllerState.modelProps, voiceChangerControllerState.modelUploadProgress, voiceChangerControllerState.modelUploadEnd]);\n const audioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Mic:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_101_DeviceSelector__WEBPACK_IMPORTED_MODULE_4__.DeviceSelector, { deviceType: \"audioinput\" }))));\n }, []);\n const audioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Speaker:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_101_DeviceSelector__WEBPACK_IMPORTED_MODULE_4__.DeviceSelector, { deviceType: \"audiooutput\" }))));\n }, []);\n const modeSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.VoiceChangerMode).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: x }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.voice_changer_mode, onChange: (e) => {\n applicationSettingState.setVoiceChangerMode(e.target.value);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Mode:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.voice_changer_mode]);\n const speakerSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const srcOptions = applicationSettingState.applicationSetting.speakers.map((s) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: s.id, value: s.id },\n s.name,\n \"(\",\n s.id,\n \")\"));\n });\n const srcSelect = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting.src_id, onChange: (e) => {\n applicationSettingState.setSrcSpeakerId(Number(e.target.value));\n }, className: \"sidebar-content-row-select-select\" }, srcOptions));\n const dstOptions = applicationSettingState.applicationSetting.speakers.map((s) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: s.id, value: s.id },\n s.name,\n \"(\",\n s.id,\n \")\"));\n });\n const dstSelect = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting.dst_id, onChange: (e) => {\n applicationSettingState.setDstSpeakerId(Number(e.target.value));\n }, className: \"sidebar-content-row-select-select\" }, dstOptions));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Src Voice:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, srcSelect)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Dst Voice:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, dstSelect)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label stick-to-right\" }, \"edit voice mapping\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: () => {\n frontendManagerState.stateControls.speakerSettingDialogCheckbox.updateState(true);\n } }, \"edit\"))));\n }, [\n applicationSettingState.applicationSetting.src_id,\n applicationSettingState.applicationSetting.dst_id,\n applicationSettingState.applicationSetting.speakers\n ]);\n const gpuRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const gpus = applicationSettingState.applicationSetting.available_gpus;\n const options = gpus.map((id) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: id, value: id }, id));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.gpu, onChange: (e) => {\n applicationSettingState.setGpu(Number(e.target.value));\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"GPU ID\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.gpu]);\n const prefixChunkRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const input = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.prefix_chunk_size, max: 240, min: 6, step: 1, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n let prefixChunkSize = Number(e.target.value);\n if (prefixChunkSize < applicationSettingState.applicationSetting.chunk_size) {\n // applicationSettingState.setChunkSize(prefixChunkSize); // プレフィックスはデルタサイズ以下にはできない。\n e.target.value = String(applicationSettingState.applicationSetting.chunk_size);\n return;\n }\n applicationSettingState.setPrefixChunkSize(prefixChunkSize);\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Pref Size:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, input)));\n }, [applicationSettingState.applicationSetting.voice_changer_mode,\n applicationSettingState.applicationSetting.prefix_chunk_size,\n applicationSettingState.applicationSetting.chunk_size]);\n const chunkRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const input = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.chunk_size, max: 240, min: 1, step: 1, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n let chunkSize = Number(e.target.value);\n // if (chunkSize % 6 !== 0) {\n // chunkSize = Math.ceil(chunkSize / 6) * 6;\n // }\n if (applicationSettingState.applicationSetting.prefix_chunk_size < chunkSize) {\n // applicationSettingState.setPrefixChunkSize(chunkSize); // プレフィックスはデルタサイズ以下にはできない。\n e.target.value = String(applicationSettingState.applicationSetting.prefix_chunk_size);\n return;\n }\n applicationSettingState.setChunkSize(chunkSize);\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Chunk Size:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, input)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-1\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-small\" }, \"(buffring about 20ms/1chunk)\"))));\n }, [applicationSettingState.applicationSetting.voice_changer_mode, applicationSettingState.applicationSetting.prefix_chunk_size,\n applicationSettingState.applicationSetting.chunk_size]);\n const realtimePlayButtonRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const label = voiceChangerControllerState.voiceChangeEnabled ? \"stop\" : \"start\";\n const status = voiceChangerControllerState.voiceChangeEnabled ? \"converting...\" : \"stanby...\";\n const className = voiceChangerControllerState.voiceChangeEnabled ? \"sidebar-content-row-button-activated\" : \"sidebar-content-row-button-stanby\";\n const onClicked = voiceChangerControllerState.voiceChangeEnabled\n ? () => {\n voiceChangerControllerState.pauseRealtimeConvert();\n }\n : () => {\n voiceChangerControllerState.startRealtimeConvert();\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-4-3-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, status),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: className, onClick: onClicked }, label)));\n }, [applicationSettingState.applicationSetting.voice_changer_mode, voiceChangerControllerState.voiceChangeEnabled]);\n const recordingButtonRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (applicationSettingState.applicationSetting?.voice_changer_mode !== \"near-realtime\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const label = voiceChangerControllerState.isRecording ? \"stop\" : \"start\";\n const status = voiceChangerControllerState.isRecording ? \"recording...\" : \"stanby...\";\n const className = voiceChangerControllerState.isRecording ? \"sidebar-content-row-button-activated\" : \"sidebar-content-row-button-stanby\";\n const onClicked = voiceChangerControllerState.isRecording\n ? () => {\n voiceChangerControllerState.stopRecord();\n voiceChangerControllerState.sendRecordedData();\n }\n : () => {\n voiceChangerControllerState.startRecord();\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-4-3-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, status),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: className, onClick: onClicked }, label)));\n }, [applicationSettingState.applicationSetting.voice_changer_mode, voiceChangerControllerState.isRecording]);\n const performanceRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const row = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-1\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_301_1_AudioVisualizer__WEBPACK_IMPORTED_MODULE_5__.AudioVisualizer, { inputType: \"microphone\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_301_1_AudioVisualizer__WEBPACK_IMPORTED_MODULE_5__.AudioVisualizer, { inputType: \"voice_changer\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-5-5\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label pad-left-3\" }, \"Buffe Time:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" },\n voiceChangerControllerState.bufferingTime,\n \" ms\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-5-5\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label pad-left-3\" }, \"Res Time:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" },\n voiceChangerControllerState.responseTime,\n \" ms\"))));\n return row;\n }, [voiceChangerControllerState.responseTime, voiceChangerControllerState.bufferingTime]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" },\n modelInput,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-1\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-dividing\" })),\n audioInputRow,\n audioOutputRow,\n modeSelectRow,\n speakerSelectRow,\n gpuRow,\n prefixChunkRow,\n chunkRow,\n realtimePlayButtonRow,\n recordingButtonRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-1\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-dividing\" })),\n performanceRow));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/301_VoiceChangerControllerContent.tsx?"); /***/ }), -/***/ "./frontend/src/100_components/002_parts/302_AudioVisualizer.tsx": -/*!***********************************************************************!*\ - !*** ./frontend/src/100_components/002_parts/302_AudioVisualizer.tsx ***! - \***********************************************************************/ +/***/ "./frontend/src/100_components/002_parts/302_ScreenSettingContent.tsx": +/*!****************************************************************************!*\ + !*** ./frontend/src/100_components/002_parts/302_ScreenSettingContent.tsx ***! + \****************************************************************************/ /***/ ((__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 */ \"AudioVisualizer\": () => (/* binding */ AudioVisualizer),\n/* harmony export */ \"AudioVisualizerInputTypes\": () => (/* binding */ AudioVisualizerInputTypes)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n\n\n\n\n// import { AudioOutputElementId } from \"../../const\";\nconst AudioVisualizerInputTypes = {\n microphone: \"microphone\",\n voice_changer: \"voice_changer\",\n};\nconst AudioVisualizer = (props) => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppRootState)();\n const { voiceChangerControllerState, microphoneMaxdBRef, vcMaxdBRef } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n const LoopIDRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n const updateCounterRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n let renderRequestId;\n LoopIDRef.current = performance.now();\n // let localLoopID = LoopIDRef.current;\n const analyser = audioRootState.audioContext.createAnalyser();\n const canvas = document.getElementById(`output-audio-visializer-canvas-${props.inputType}`);\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n const ctx = canvas.getContext(\"2d\");\n if (props.inputType === \"microphone\") {\n voiceChangerControllerState.sourceNodeFromForMicStream.connect(analyser);\n }\n else {\n voiceChangerControllerState.sourceNodeFromOutput.connect(analyser);\n }\n analyser.fftSize = 256;\n const bufferLength = analyser.frequencyBinCount;\n const dataArray = new Uint8Array(bufferLength);\n const WIDTH = canvas.width;\n const HEIGHT = canvas.height;\n const barWidth = (WIDTH / bufferLength) * 2.5;\n let barHeight;\n let x = 0;\n function renderFrame() {\n renderRequestId = requestAnimationFrame(renderFrame);\n updateCounterRef.current++;\n if (updateCounterRef.current % applicationSettingState.applicationSetting.advance.visualizer_draw_skip_rate !== 0) {\n return;\n }\n updateCounterRef.current = 0;\n x = 0;\n analyser.getByteFrequencyData(dataArray);\n const maxdB = Math.max(...Array.from(dataArray.slice(4)));\n if (props.inputType === \"microphone\") {\n microphoneMaxdBRef.current = maxdB;\n }\n else {\n vcMaxdBRef.current = maxdB;\n }\n ctx.fillStyle = \"#000\";\n ctx.fillRect(0, 0, WIDTH, HEIGHT);\n for (let i = 0; i < bufferLength; i++) {\n barHeight = dataArray[i] * 4;\n const r = barHeight + 25 * (i / bufferLength);\n const g = 250 * (i / bufferLength);\n const b = 50;\n ctx.fillStyle = \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);\n x += barWidth + 1;\n }\n // console.log(\"loopId:\", localLoopID, LoopIDRef.current);\n }\n renderFrame();\n return () => {\n console.log(\"CANCEL\", renderRequestId);\n cancelAnimationFrame(renderRequestId);\n };\n }, [applicationSettingState.applicationSetting?.advance.visualizer_draw_skip_rate]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"output-audio-visializer\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"canvas\", { id: `output-audio-visializer-canvas-${props.inputType}`, className: \"output-audio-visializer-canvas\" })));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/302_AudioVisualizer.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"ScreenSettingContent\": () => (/* binding */ ScreenSettingContent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _002_hooks_101_useSpeechRecognition__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../002_hooks/101_useSpeechRecognition */ \"./frontend/src/002_hooks/101_useSpeechRecognition.ts\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../003_hooks/useFileInput */ \"./frontend/src/100_components/003_hooks/useFileInput.tsx\");\n\n\n\n\n\n\nconst BackgroundType = {\n image: \"image\",\n window: \"window\"\n};\nconst ScreenSettingContent = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const { speechRecognitionState, frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n const [backgroundType, setBackgroundType] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"image\");\n const fileInputState = (0,_003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_5__.useFileInput)();\n const [backgroundMediaStream, setBackgroundMediaStream] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n const screenEnablerRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const input = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting.screen.enable_screen, className: \"sidebar-content-row-input-checkbox\", onChange: (e) => {\n console.log(\"Clicked \", e.target.checked);\n applicationSettingState.setScreenEnable(e.target.checked);\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Screen Enable:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, input)));\n }, [applicationSettingState.applicationSetting.screen.enable_screen]);\n const backgroundRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.screen.enable_screen) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const loadFile = async () => {\n const url = await fileInputState.click(\"image.*\");\n applicationSettingState.setBackgroundImageURL(url);\n frontendManagerState.setIsShareDisplay(false);\n };\n const captureWindow = async () => {\n const videoElem = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_4__.AvatarBackgroundVideoElementId);\n const ms = await navigator.mediaDevices.getDisplayMedia({\n video: true,\n // audio: true,\n });\n videoElem.srcObject = ms;\n videoElem.play();\n frontendManagerState.setIsShareDisplay(true);\n setBackgroundMediaStream(ms);\n };\n const releaseWindow = async () => {\n backgroundMediaStream?.getTracks().forEach((x) => x.stop());\n frontendManagerState.setIsShareDisplay(false);\n };\n const options = Object.keys(BackgroundType).map(x => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: x }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: backgroundType, onChange: (e) => {\n setBackgroundType(e.target.value);\n }, className: \"sidebar-content-row-select-select\" }, options));\n let buttonClassName;\n let buttonLabel;\n let buttonAction;\n if (backgroundType === \"image\") {\n buttonClassName = \"sidebar-content-row-button\";\n buttonLabel = \"image\";\n buttonAction = loadFile;\n }\n else if (frontendManagerState.isShareDisplay === true) {\n buttonClassName = \"sidebar-content-row-button-activated\";\n buttonLabel = \"window\";\n buttonAction = releaseWindow;\n }\n else {\n buttonClassName = \"sidebar-content-row-button-stanby\";\n buttonLabel = \"window\";\n buttonAction = captureWindow;\n }\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-4-3-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"ScreenType:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, select),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: buttonClassName, onClick: buttonAction }, buttonLabel)));\n }, [applicationSettingState.applicationSetting.screen.enable_screen, backgroundType, frontendManagerState.isShareDisplay]);\n const transcribeLanguageRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.screen.enable_screen) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const startTranscribe = () => {\n speechRecognitionState.recognitionStart();\n };\n const stopTranscribe = () => {\n speechRecognitionState.recognitionStop();\n };\n const options = Object.keys(_002_hooks_101_useSpeechRecognition__WEBPACK_IMPORTED_MODULE_1__.SpeechRecognitionLanguages).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: x }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting.transcribe.lang, onChange: (e) => {\n speechRecognitionState.setLanguageKey(e.target.value);\n }, className: \"sidebar-content-row-select-select\" }, options));\n let buttonClassName;\n let buttonLabel;\n let buttonAction;\n if (speechRecognitionState.isEnable) {\n buttonClassName = \"sidebar-content-row-button-activated\";\n buttonLabel = \"stop\";\n buttonAction = stopTranscribe;\n }\n else {\n buttonClassName = \"sidebar-content-row-button-stanby\";\n buttonLabel = \"start\";\n buttonAction = startTranscribe;\n }\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-4-3-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Transcribe:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, select),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: buttonClassName, onClick: buttonAction }, buttonLabel)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-1\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label row-space-holder-2 stick-to-left no-wrap\" }, speechRecognitionState.recognitionWord?.word))));\n }, [applicationSettingState.applicationSetting.screen.enable_screen, speechRecognitionState.languageKey, speechRecognitionState.recognitionWord, speechRecognitionState.recognitionWord?.word, speechRecognitionState.isEnable]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" },\n screenEnablerRow,\n backgroundRow,\n transcribeLanguageRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"video\", { id: _const__WEBPACK_IMPORTED_MODULE_4__.AvatarBackgroundVideoElementId, className: \"avatar-controller-background-video\" })));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/302_ScreenSettingContent.tsx?"); /***/ }), -/***/ "./frontend/src/100_components/002_parts/303_VoiceLoaderControllerContent.tsx": -/*!************************************************************************************!*\ - !*** ./frontend/src/100_components/002_parts/303_VoiceLoaderControllerContent.tsx ***! - \************************************************************************************/ +/***/ "./frontend/src/100_components/002_parts/303-1_AvatarArea.tsx": +/*!********************************************************************!*\ + !*** ./frontend/src/100_components/002_parts/303-1_AvatarArea.tsx ***! + \********************************************************************/ /***/ ((__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 */ \"AudioPlayer\": () => (/* binding */ AudioPlayer),\n/* harmony export */ \"VoiceLoaderControllerContent\": () => (/* binding */ VoiceLoaderControllerContent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../003_hooks/useFileInput */ \"./frontend/src/100_components/003_hooks/useFileInput.tsx\");\n\n\n\n\n\n\nconst AudioPlayer = (props) => {\n const { indexedDBState, deviceManagerState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppRootState)();\n const { voiceChangerControllerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n const fileInputState = (0,_003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_5__.useFileInput)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const initilize = async () => {\n const url = (await indexedDBState.getItem(`${props.elementId}-voice-url`)) || \"\";\n const recorderAudioElement = document.getElementById(props.elementId);\n recorderAudioElement.src = url;\n };\n initilize();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const recorderAudioElement = document.getElementById(props.elementId);\n const source = audioRootState.audioContext.createMediaElementSource(recorderAudioElement);\n source.connect(voiceChangerControllerState.destinationNodeForVoiceLoader);\n recorderAudioElement.ontimeupdate = () => {\n const progressBar = document.getElementById(`${props.elementId}-progress`);\n progressBar.style.width = (recorderAudioElement.currentTime / recorderAudioElement.duration) * 100 + \"%\";\n const currentTime = document.getElementById(`${props.elementId}-current`);\n currentTime.textContent = (0,_const__WEBPACK_IMPORTED_MODULE_4__.getTimeCodeFromNum)(recorderAudioElement.currentTime);\n };\n recorderAudioElement.onloadedmetadata = () => {\n const timeString = (0,_const__WEBPACK_IMPORTED_MODULE_4__.getTimeCodeFromNum)(recorderAudioElement.duration);\n const lengthDiv = document.getElementById(`${props.elementId}-length`);\n lengthDiv.textContent = timeString;\n recorderAudioElement.volume = 0.7;\n };\n // const volumeSliderDiv = document.getElementById(`${props.elementId}-volume-slider`) as HTMLDivElement;\n // volumeSliderDiv.onclick = (e) => {\n // const sliderWidth = window.getComputedStyle(volumeSliderDiv).width;\n // const newVolume = e.offsetX / parseInt(sliderWidth);\n // recorderAudioElement.volume = newVolume;\n // const volumePercentageDiv = document.getElementById(`${props.elementId}-volume-percentage`) as HTMLDivElement;\n // volumePercentageDiv.style.width = newVolume * 100 + \"%\";\n // };\n // const volumeButton = document.getElementById(`${props.elementId}-volume-button`) as HTMLDivElement;\n // volumeButton.onclick = () => {\n // const volumeElement = document.getElementById(`${props.elementId}-volume`) as HTMLDivElement;\n // if (recorderAudioElement.muted) {\n // volumeElement.classList.remove(\"icono-volumeMedium\");\n // volumeElement.classList.add(\"icono-volumeMute\");\n // } else {\n // volumeElement.classList.add(\"icono-volumeMedium\");\n // volumeElement.classList.remove(\"icono-volumeMute\");\n // }\n // };\n }, []);\n const recorderRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const loadFile = async () => {\n const url = await fileInputState.click(\"audio.*\");\n const recorderAudioElement = document.getElementById(props.elementId);\n recorderAudioElement.src = url;\n await indexedDBState.setItem(`${props.elementId}-voice-url`, url);\n };\n const play = () => {\n const recorderAudioElement = document.getElementById(props.elementId);\n const toggle = document.getElementById(\"voice-loader-audio-player-toggle-play\");\n if (recorderAudioElement.paused) {\n recorderAudioElement.onended = () => {\n toggle.textContent = \"play\";\n recorderAudioElement.currentTime = 0;\n };\n voiceChangerControllerState.useVoiceLoaderMediaStream();\n recorderAudioElement.play();\n toggle.textContent = \"stop\";\n }\n else {\n recorderAudioElement.pause();\n toggle.textContent = \"play\";\n }\n };\n const seek = (e) => {\n const recorderAudioElement = document.getElementById(props.elementId);\n const timelineDiv = document.getElementById(`${props.elementId}-timeline`);\n const timelineWidth = window.getComputedStyle(timelineDiv).width;\n const timeToSeek = (e.offsetX / parseInt(timelineWidth)) * recorderAudioElement.duration;\n recorderAudioElement.currentTime = timeToSeek;\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"audio\", { id: props.elementId, hidden: true }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-timeline\", onClick: (e) => {\n seek(e.nativeEvent);\n }, id: `${props.elementId}-timeline` },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-progress\", id: `${props.elementId}-progress` })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-controls\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-button\", onClick: loadFile }, \"Load\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-button\", id: \"voice-loader-audio-player-toggle-play\", onClick: play }, \"Play\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-time\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { id: `${props.elementId}-current` }, \"0:00\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, \"/\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { id: `${props.elementId}-length` }))))));\n }, [deviceManagerState.audioInputDeviceId, voiceChangerControllerState.useVoiceLoaderMediaStream]);\n return recorderRow;\n};\nconst VoiceLoaderControllerContent = () => {\n const player1 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AudioPlayer, { elementId: _const__WEBPACK_IMPORTED_MODULE_4__.VoiceLoaderAudioElementId1 });\n }, []);\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" }, player1);\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/303_VoiceLoaderControllerContent.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AvatarArea\": () => (/* binding */ AvatarArea)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n\n\n\n\nlet GlobalLoopID = 0;\nconst AvatarArea = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const { threeState, motionCaptureState, vcMaxdBRef } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__.useAppState)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const avatarArea = document.getElementById(\"avatar-controller-avatar-area\");\n threeState.setParentDiv(avatarArea);\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar, threeState.threeController]);\n const captureFace = applicationSettingState.applicationSetting?.avatar.motion_capture_face || false;\n const captureUpperBody = applicationSettingState.applicationSetting?.avatar.motion_capture_upperbody || false;\n const enableAvatar = applicationSettingState.applicationSetting?.avatar.enable_avatar || false;\n const updateCounterRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n console.log(\"Renderer Initialized\");\n let renderRequestId;\n const LOOP_ID = performance.now();\n GlobalLoopID = LOOP_ID;\n const snap = document.createElement(\"canvas\");\n const snapCtx = snap.getContext(\"2d\");\n const input = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_3__.AvatarVideoElementId);\n snap.width = 300;\n snap.height = 300;\n //// レンダリングループ\n const render = async () => {\n updateCounterRef.current++;\n if (updateCounterRef.current % applicationSettingState.applicationSetting.advance.avatar_draw_skip_rate != 0) {\n renderRequestId = requestAnimationFrame(render);\n return;\n }\n updateCounterRef.current = 0;\n if (!captureFace && !captureUpperBody) {\n renderRequestId = requestAnimationFrame(render);\n return;\n }\n snapCtx.drawImage(input, 0, 0, snap.width, snap.height);\n try {\n if (snap.width > 0 && snap.height > 0) {\n const pose = await motionCaptureState.predictPose(snap);\n if (pose) {\n const { poses, faceRig, leftHandRig, rightHandRig, poseRig } = pose;\n motionCaptureState.updatePose(poses, faceRig, leftHandRig, rightHandRig, poseRig, vcMaxdBRef.current);\n }\n }\n }\n catch (error) {\n console.log(error);\n }\n threeState.update();\n if (GlobalLoopID === LOOP_ID) {\n renderRequestId = requestAnimationFrame(render);\n }\n };\n if (enableAvatar) {\n render();\n }\n return () => {\n console.log(\"CANCEL\", renderRequestId);\n cancelAnimationFrame(renderRequestId);\n };\n }, [threeState.threeController, captureFace, captureUpperBody, enableAvatar]);\n const avatarCanvasAreaRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { id: \"avatar-controller-avatar-area\", className: \"avatar-controller-avatar-area\" }));\n }, []);\n return avatarCanvasAreaRow;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/303-1_AvatarArea.tsx?"); /***/ }), -/***/ "./frontend/src/100_components/002_parts/304_AvatarController.tsx": +/***/ "./frontend/src/100_components/002_parts/303_AvatarController.tsx": /*!************************************************************************!*\ - !*** ./frontend/src/100_components/002_parts/304_AvatarController.tsx ***! + !*** ./frontend/src/100_components/002_parts/303_AvatarController.tsx ***! \************************************************************************/ /***/ ((__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 */ \"AvatarControllerContent\": () => (/* binding */ AvatarControllerContent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../003_hooks/useFileInput */ \"./frontend/src/100_components/003_hooks/useFileInput.tsx\");\n/* harmony import */ var _101_DeviceSelector__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./101_DeviceSelector */ \"./frontend/src/100_components/002_parts/101_DeviceSelector.tsx\");\n/* harmony import */ var _305_AvatarArea__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./305_AvatarArea */ \"./frontend/src/100_components/002_parts/305_AvatarArea.tsx\");\n\n\n\n\n\n\n\nconst AvatarControllerContent = () => {\n const { deviceManagerState, applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)();\n const [backgroundMediaStream, setBackgroundMediaStream] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n const fileInputState = (0,_003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_4__.useFileInput)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const videoElement = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_3__.AvatarVideoElementId);\n if (!deviceManagerState.videoInputDeviceId || deviceManagerState.videoInputDeviceId == \"none\") {\n videoElement.src = \"\";\n videoElement.srcObject = null;\n return;\n }\n navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId: deviceManagerState.videoInputDeviceId } }).then((ms) => {\n videoElement.srcObject = ms;\n videoElement.play();\n });\n }, [deviceManagerState.videoInputDeviceId]);\n const cameraSelectorRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Camera:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_101_DeviceSelector__WEBPACK_IMPORTED_MODULE_5__.DeviceSelector, { deviceType: \"videoinput\" }))));\n }, []);\n const videoRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting) {\n return;\n }\n const updateEnableAvatar = (val) => {\n applicationSettingState.setEnableAvatar(val);\n };\n const updateMotionCaptureFace = (val) => {\n applicationSettingState.setMotionCaptureFaceEnabled(val);\n };\n const updateMotionCaptureUpperBody = (val) => {\n applicationSettingState.setMotionCaptureUpperBodyEnabled(val);\n };\n const updateLipSync = (val) => {\n applicationSettingState.setLipOverwriteWithVoiceEnabled(val);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"video\", { className: \"avatar-controller-video\", id: `${_const__WEBPACK_IMPORTED_MODULE_3__.AvatarVideoElementId}` }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-items-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-label\" }, \"capture\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-checkbox\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-checkbox\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting?.avatar.enable_avatar, onChange: (e) => {\n updateEnableAvatar(e.target.checked);\n } })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-label\" }, \"avatar enable\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-checkbox\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting?.avatar.motion_capture_face, onChange: (e) => {\n updateMotionCaptureFace(e.target.checked);\n } })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-label\" }, \"face\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-checkbox\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting?.avatar.motion_capture_upperbody, onChange: (e) => {\n updateMotionCaptureUpperBody(e.target.checked);\n } })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-label\" }, \"upperbody\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-checkbox\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting?.avatar.lip_overwrite_with_voice, onChange: (e) => {\n updateLipSync(e.target.checked);\n } })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"avatar-controller-video-setting-item-label\" }, \"lip sync\"))))));\n }, [applicationSettingState.setMotionCaptureFaceEnabled, applicationSettingState.setMotionCaptureUpperBodyEnabled, applicationSettingState.setLipOverwriteWithVoiceEnabled]);\n const loadAvatarVRMRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const loadFile = async () => {\n const url = await fileInputState.click(\".*\");\n applicationSettingState.setAvatarUrl(url);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Load Avatar:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-buttons\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: loadFile }, \"vrm\"))));\n }, [applicationSettingState.setAvatarUrl]);\n const loadBackground = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const loadFile = async () => {\n const url = await fileInputState.click(\"image.*\");\n applicationSettingState.setBackgroundImageURL(url);\n frontendManagerState.setIsShareDisplay(false);\n };\n const captureWindow = async () => {\n const videoElem = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_3__.AvatarBackgroundVideoElementId);\n const ms = await navigator.mediaDevices.getDisplayMedia({\n video: true,\n // audio: true,\n });\n videoElem.srcObject = ms;\n videoElem.play();\n frontendManagerState.setIsShareDisplay(true);\n setBackgroundMediaStream(ms);\n };\n const releaseWindow = async () => {\n backgroundMediaStream?.getTracks().forEach((x) => x.stop());\n frontendManagerState.setIsShareDisplay(false);\n };\n const windowButtonClassName = frontendManagerState.isShareDisplay ? \"sidebar-content-row-button-activated\" : \"sidebar-content-row-button-stanby\";\n const windowButtonClicked = frontendManagerState.isShareDisplay ? releaseWindow : captureWindow;\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Background:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-buttons\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: loadFile }, \"image\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: windowButtonClassName, onClick: windowButtonClicked }, \"window\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"video\", { id: _const__WEBPACK_IMPORTED_MODULE_3__.AvatarBackgroundVideoElementId, className: \"avatar-controller-background-video\" })));\n }, [frontendManagerState.isShareDisplay, applicationSettingState.setBackgroundImageURL]);\n const backgroundColorRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const setBackground = async (value) => {\n applicationSettingState.setBackgroundColor(value);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Background:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-buttons\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"color\", value: applicationSettingState.applicationSetting?.avatar.background_color, onInput: (e) => {\n setBackground(e.currentTarget.value);\n } }))));\n }, [applicationSettingState.setBackgroundColor]);\n const chromaKeyRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const setChromaKey = async (value) => {\n applicationSettingState.setChromaKey(value);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"ChromaKey:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-buttons\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"color\", value: applicationSettingState.applicationSetting?.avatar.chroma_key, onInput: (e) => {\n setChromaKey(e.currentTarget.value);\n } }))));\n }, [applicationSettingState.setChromaKey]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" },\n cameraSelectorRow,\n videoRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_305_AvatarArea__WEBPACK_IMPORTED_MODULE_6__.AvatarArea, null),\n loadAvatarVRMRow,\n loadBackground,\n backgroundColorRow,\n chromaKeyRow));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/304_AvatarController.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AvatarControllerContent\": () => (/* binding */ AvatarControllerContent)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../003_hooks/useFileInput */ \"./frontend/src/100_components/003_hooks/useFileInput.tsx\");\n/* harmony import */ var _101_DeviceSelector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./101_DeviceSelector */ \"./frontend/src/100_components/002_parts/101_DeviceSelector.tsx\");\n/* harmony import */ var _303_1_AvatarArea__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./303-1_AvatarArea */ \"./frontend/src/100_components/002_parts/303-1_AvatarArea.tsx\");\n\n\n\n\n\n\nconst AvatarControllerContent = () => {\n const { deviceManagerState, applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const fileInputState = (0,_003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_3__.useFileInput)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return;\n }\n const videoElement = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_2__.AvatarVideoElementId);\n if (!videoElement) {\n return;\n }\n if (!deviceManagerState.videoInputDeviceId || deviceManagerState.videoInputDeviceId == \"none\") {\n videoElement.src = \"\";\n videoElement.srcObject = null;\n return;\n }\n navigator.mediaDevices.getUserMedia({ audio: false, video: { deviceId: deviceManagerState.videoInputDeviceId } }).then((ms) => {\n videoElement.srcObject = ms;\n videoElement.play();\n });\n }, [deviceManagerState.videoInputDeviceId, applicationSettingState.applicationSetting.avatar.enable_avatar]);\n const avatarEnablerRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const input = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting.avatar.enable_avatar, className: \"sidebar-content-row-input-checkbox\", onChange: (e) => {\n applicationSettingState.setEnableAvatar(e.target.checked);\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Avatar Enable:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, input)));\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar]);\n const cameraSelectorRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-3-7\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Camera:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_101_DeviceSelector__WEBPACK_IMPORTED_MODULE_4__.DeviceSelector, { deviceType: \"videoinput\" }))));\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar]);\n const video2AvatarRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-5-5\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"video\", { className: \"avatar-controller-video\", id: `${_const__WEBPACK_IMPORTED_MODULE_2__.AvatarVideoElementId}` })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_303_1_AvatarArea__WEBPACK_IMPORTED_MODULE_5__.AvatarArea, null))));\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar]);\n const loadAvatarVRMRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const loadFile = async () => {\n const url = await fileInputState.click(\".*\");\n applicationSettingState.setAvatarUrl(url);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Load Avatar:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: loadFile }, \"vrm\")));\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar]);\n const captureSettingRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const faceInput = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting.avatar.motion_capture_face, className: \"sidebar-content-row-input-checkbox\", onChange: (e) => {\n applicationSettingState.setMotionCaptureFaceEnabled(e.target.checked);\n } }));\n const upperBodyInput = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting.avatar.motion_capture_upperbody, className: \"sidebar-content-row-input-checkbox\", onChange: (e) => {\n applicationSettingState.setMotionCaptureUpperBodyEnabled(e.target.checked);\n } }));\n const lipSyncInput = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"checkbox\", checked: applicationSettingState.applicationSetting.avatar.lip_overwrite_with_voice, className: \"sidebar-content-row-input-checkbox\", onChange: (e) => {\n applicationSettingState.setLipOverwriteWithVoiceEnabled(e.target.checked);\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Capture Face:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, faceInput)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Capture Body:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, upperBodyInput)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Lip Sync:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, lipSyncInput))));\n }, [\n applicationSettingState.applicationSetting.avatar.enable_avatar,\n applicationSettingState.applicationSetting.avatar.motion_capture_face,\n applicationSettingState.applicationSetting.avatar.motion_capture_upperbody,\n applicationSettingState.applicationSetting.avatar.lip_overwrite_with_voice\n ]);\n const backgroundColorRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const setBackground = async (value) => {\n applicationSettingState.setBackgroundColor(value);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Background:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"color\", value: applicationSettingState.applicationSetting?.avatar.background_color, onInput: (e) => {\n setBackground(e.currentTarget.value);\n } }))));\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar]);\n const chromaKeyRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n if (!applicationSettingState.applicationSetting.avatar.enable_avatar) {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null);\n }\n const setChromaKey = async (value) => {\n applicationSettingState.setChromaKey(value);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"ChromaKey:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"color\", value: applicationSettingState.applicationSetting?.avatar.chroma_key, onInput: (e) => {\n setChromaKey(e.currentTarget.value);\n } }))));\n }, [applicationSettingState.applicationSetting.avatar.enable_avatar]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" },\n avatarEnablerRow,\n cameraSelectorRow,\n loadAvatarVRMRow,\n video2AvatarRow,\n captureSettingRow,\n backgroundColorRow,\n chromaKeyRow));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/303_AvatarController.tsx?"); /***/ }), -/***/ "./frontend/src/100_components/002_parts/305_AvatarArea.tsx": -/*!******************************************************************!*\ - !*** ./frontend/src/100_components/002_parts/305_AvatarArea.tsx ***! - \******************************************************************/ +/***/ "./frontend/src/100_components/002_parts/310-1_VoiceLoaderControllerContent.tsx": +/*!**************************************************************************************!*\ + !*** ./frontend/src/100_components/002_parts/310-1_VoiceLoaderControllerContent.tsx ***! + \**************************************************************************************/ /***/ ((__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 */ \"AvatarArea\": () => (/* binding */ AvatarArea)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n\n\n\n\nlet GlobalLoopID = 0;\nconst AvatarArea = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const { threeState, motionCaptureState, vcMaxdBRef } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__.useAppState)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const avatarArea = document.getElementById(\"avatar-controller-avatar-area\");\n threeState.setParentDiv(avatarArea);\n }, []);\n const captureFace = applicationSettingState.applicationSetting?.avatar.motion_capture_face || false;\n const captureUpperBody = applicationSettingState.applicationSetting?.avatar.motion_capture_upperbody || false;\n const syncLip = applicationSettingState.applicationSetting?.avatar.lip_overwrite_with_voice || false;\n const enableAvatar = applicationSettingState.applicationSetting?.avatar.enable_avatar || false;\n const prevdBRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n const updateCounterRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n console.log(\"Renderer Initialized\");\n let renderRequestId;\n const LOOP_ID = performance.now();\n GlobalLoopID = LOOP_ID;\n const snap = document.createElement(\"canvas\");\n const snapCtx = snap.getContext(\"2d\");\n const input = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_3__.AvatarVideoElementId);\n snap.width = 300;\n snap.height = 300;\n /// アバターのポーズ更新の内部関数\n const updatePose = (_poses, faceRig, leftHandRig, rightHandRig, poseRig) => {\n // console.log(vcMaxdBRef.current);\n if (faceRig && syncLip) {\n faceRig.mouth.shape.A = 0;\n faceRig.mouth.shape.I = 0;\n faceRig.mouth.shape.U = 0;\n faceRig.mouth.shape.E = 0;\n faceRig.mouth.shape.O = 0;\n const diff = vcMaxdBRef.current - prevdBRef.current;\n prevdBRef.current = vcMaxdBRef.current;\n if (vcMaxdBRef.current > 40) {\n if (diff > 20) {\n faceRig.mouth.shape.A = 1;\n }\n else if (diff > 10) {\n faceRig.mouth.shape.A = 0.5;\n }\n else if (diff > 0) {\n faceRig.mouth.shape.I = 0.6;\n }\n else if (diff > -10) {\n faceRig.mouth.shape.U = 0.5;\n }\n else if (diff > -20) {\n faceRig.mouth.shape.O = 0.2;\n }\n }\n // if (vcMaxdBRef.current > 120) {\n // faceRig.mouth.shape.A = 1;\n // } else if (vcMaxdBRef.current > 115) {\n // faceRig.mouth.shape.A = 0.5;\n // } else if (vcMaxdBRef.current > 110) {\n // faceRig.mouth.shape.I = 0.6;\n // } else if (vcMaxdBRef.current > 100) {\n // faceRig.mouth.shape.U = 0.5;\n // } else if (vcMaxdBRef.current > 50) {\n // faceRig.mouth.shape.O = 0.2;\n // }\n }\n if (motionCaptureState.isInitialized) {\n motionCaptureState.avatar.isTargetVisible = false;\n motionCaptureState.avatar.updatePose(faceRig, poseRig, leftHandRig, rightHandRig);\n }\n };\n //// レンダリングループ\n const render = async () => {\n updateCounterRef.current++;\n if (updateCounterRef.current % applicationSettingState.applicationSetting.advance.avatar_draw_skip_rate != 0) {\n renderRequestId = requestAnimationFrame(render);\n return;\n }\n updateCounterRef.current = 0;\n if (captureFace || captureUpperBody) {\n snapCtx.drawImage(input, 0, 0, snap.width, snap.height);\n try {\n if (snap.width > 0 && snap.height > 0) {\n const { poses, faceRig, leftHandRig, rightHandRig, poseRig } = await motionCaptureState.detector.predict(snap);\n updatePose(poses, faceRig, leftHandRig, rightHandRig, poseRig);\n }\n }\n catch (error) {\n console.log(error);\n }\n }\n else {\n // if (motionFramesForPlay.current.length > 0) {\n // const frame = JSON.parse(JSON.stringify(motionFramesForPlay.current.shift()));\n // updatePose(frame.poses, frame.faceRig, frame.leftHandRig, frame.rightHandRig, frame.poseRig);\n // //// Motion Replayの場合は、フレーム間のインターバル分のウェイトをかける。\n // if (motionFramesForPlay.current.length > 0) {\n // const interval = motionFramesForPlay.current[0].interval;\n // await new Promise((resolve) => {\n // setTimeout(resolve, interval);\n // });\n // }\n // } else {\n // //// フレームがなくなった場合、次のデフォルト動作を積み込む。\n // if (motionPlayerState.motions.length > 0) {\n // motionFramesForPlay.current = [...motionPlayerState.motions[0].motion];\n // }\n // }\n }\n threeState.controls.update();\n threeState.character?.springBoneManager?.springBoneGroupList.forEach((element) => {\n element.forEach((node) => {\n node.update(2);\n });\n });\n threeState.character?.springBoneManager?.lateUpdate(10);\n threeState.renderer?.render(threeState.scene, threeState.camera);\n if (GlobalLoopID === LOOP_ID) {\n renderRequestId = requestAnimationFrame(render);\n }\n };\n if (enableAvatar) {\n render();\n }\n return () => {\n console.log(\"CANCEL\", renderRequestId);\n cancelAnimationFrame(renderRequestId);\n };\n }, [threeState.controls, threeState.character, threeState.renderer, threeState.scene, threeState.camera, captureFace, captureUpperBody, syncLip, enableAvatar]);\n const avatarCanvasAreaRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { id: \"avatar-controller-avatar-area\", className: \"avatar-controller-avatar-area\" })));\n }, []);\n return avatarCanvasAreaRow;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/305_AvatarArea.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AudioPlayer\": () => (/* binding */ AudioPlayer)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../003_hooks/useFileInput */ \"./frontend/src/100_components/003_hooks/useFileInput.tsx\");\n\n\n\n\n\n\nconst AudioPlayer = (props) => {\n const { indexedDBState, deviceManagerState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppRootState)();\n const { voiceChangerControllerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppState)();\n const fileInputState = (0,_003_hooks_useFileInput__WEBPACK_IMPORTED_MODULE_5__.useFileInput)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const initilize = async () => {\n const url = (await indexedDBState.getItem(`${props.elementId}-voice-url`)) || \"\";\n const recorderAudioElement = document.getElementById(props.elementId);\n recorderAudioElement.src = url;\n };\n initilize();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const recorderAudioElement = document.getElementById(props.elementId);\n const source = audioRootState.audioContext.createMediaElementSource(recorderAudioElement);\n source.connect(voiceChangerControllerState.destinationNodeForVoiceLoader);\n recorderAudioElement.ontimeupdate = () => {\n const progressBar = document.getElementById(`${props.elementId}-progress`);\n progressBar.style.width = (recorderAudioElement.currentTime / recorderAudioElement.duration) * 100 + \"%\";\n const currentTime = document.getElementById(`${props.elementId}-current`);\n currentTime.textContent = (0,_const__WEBPACK_IMPORTED_MODULE_4__.getTimeCodeFromNum)(recorderAudioElement.currentTime);\n };\n recorderAudioElement.onloadedmetadata = () => {\n const timeString = (0,_const__WEBPACK_IMPORTED_MODULE_4__.getTimeCodeFromNum)(recorderAudioElement.duration);\n const lengthDiv = document.getElementById(`${props.elementId}-length`);\n lengthDiv.textContent = timeString;\n recorderAudioElement.volume = 0.7;\n };\n // const volumeSliderDiv = document.getElementById(`${props.elementId}-volume-slider`) as HTMLDivElement;\n // volumeSliderDiv.onclick = (e) => {\n // const sliderWidth = window.getComputedStyle(volumeSliderDiv).width;\n // const newVolume = e.offsetX / parseInt(sliderWidth);\n // recorderAudioElement.volume = newVolume;\n // const volumePercentageDiv = document.getElementById(`${props.elementId}-volume-percentage`) as HTMLDivElement;\n // volumePercentageDiv.style.width = newVolume * 100 + \"%\";\n // };\n // const volumeButton = document.getElementById(`${props.elementId}-volume-button`) as HTMLDivElement;\n // volumeButton.onclick = () => {\n // const volumeElement = document.getElementById(`${props.elementId}-volume`) as HTMLDivElement;\n // if (recorderAudioElement.muted) {\n // volumeElement.classList.remove(\"icono-volumeMedium\");\n // volumeElement.classList.add(\"icono-volumeMute\");\n // } else {\n // volumeElement.classList.add(\"icono-volumeMedium\");\n // volumeElement.classList.remove(\"icono-volumeMute\");\n // }\n // };\n }, []);\n const recorderRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const loadFile = async () => {\n const url = await fileInputState.click(\"audio.*\");\n const recorderAudioElement = document.getElementById(props.elementId);\n recorderAudioElement.src = url;\n await indexedDBState.setItem(`${props.elementId}-voice-url`, url);\n };\n const play = () => {\n const recorderAudioElement = document.getElementById(props.elementId);\n const toggle = document.getElementById(\"voice-loader-audio-player-toggle-play\");\n if (recorderAudioElement.paused) {\n recorderAudioElement.onended = () => {\n toggle.textContent = \"play\";\n recorderAudioElement.currentTime = 0;\n };\n voiceChangerControllerState.useVoiceLoaderMediaStream();\n recorderAudioElement.play();\n toggle.textContent = \"stop\";\n }\n else {\n recorderAudioElement.pause();\n toggle.textContent = \"play\";\n }\n };\n const seek = (e) => {\n const recorderAudioElement = document.getElementById(props.elementId);\n const timelineDiv = document.getElementById(`${props.elementId}-timeline`);\n const timelineWidth = window.getComputedStyle(timelineDiv).width;\n const timeToSeek = (e.offsetX / parseInt(timelineWidth)) * recorderAudioElement.duration;\n recorderAudioElement.currentTime = timeToSeek;\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"audio\", { id: props.elementId, hidden: true }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-timeline\", onClick: (e) => {\n seek(e.nativeEvent);\n }, id: `${props.elementId}-timeline` },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-progress\", id: `${props.elementId}-progress` })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-controls\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-button\", onClick: loadFile }, \"Load\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-button\", id: \"voice-loader-audio-player-toggle-play\", onClick: play }, \"Play\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"voice-loader-audio-player-time\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { id: `${props.elementId}-current` }, \"0:00\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null, \"/\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { id: `${props.elementId}-length` }))))));\n }, [deviceManagerState.audioInputDeviceId, voiceChangerControllerState.useVoiceLoaderMediaStream]);\n return recorderRow;\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/310-1_VoiceLoaderControllerContent.tsx?"); /***/ }), -/***/ "./frontend/src/100_components/002_parts/306_AdvancedSettingContent.tsx": +/***/ "./frontend/src/100_components/002_parts/310_AdvancedSettingContent.tsx": /*!******************************************************************************!*\ - !*** ./frontend/src/100_components/002_parts/306_AdvancedSettingContent.tsx ***! + !*** ./frontend/src/100_components/002_parts/310_AdvancedSettingContent.tsx ***! \******************************************************************************/ /***/ ((__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 */ \"AdvancedSetting\": () => (/* binding */ AdvancedSetting)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../001_clients_and_managers/000_ApplicationSettingLoader */ \"./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\nconst AdvancedSetting = () => {\n const { applicationSettingState, deviceManagerState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const avatarDrawSkipRateSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.avatar_draw_skip_rate, max: 24, min: 0, step: 1, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n applicationSettingState.setAvatarDrawSkipRate(Number(e.target.value));\n } }));\n return select;\n }, [applicationSettingState.applicationSetting?.advance.avatar_draw_skip_rate, applicationSettingState.setAvatarDrawSkipRate]);\n const avatarDrawSkipRateRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"avatar skip:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, avatarDrawSkipRateSelect)));\n }, [applicationSettingState.applicationSetting?.advance.avatar_draw_skip_rate, avatarDrawSkipRateSelect]);\n const screenDrawSkipRateSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.screen_draw_skip_rate, max: 24, min: 0, step: 1, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n applicationSettingState.setScreenDrawSkipRate(Number(e.target.value));\n } }));\n return select;\n }, [applicationSettingState.applicationSetting?.advance.screen_draw_skip_rate, applicationSettingState.setScreenDrawSkipRate]);\n const screenDrawSkipRateRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"screen skip:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, screenDrawSkipRateSelect)));\n }, [applicationSettingState.applicationSetting?.advance.screen_draw_skip_rate, screenDrawSkipRateSelect]);\n const visualizerDrawSkipRateSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.visualizer_draw_skip_rate, max: 24, min: 0, step: 1, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n applicationSettingState.setVisualizerDrawSkipRate(Number(e.target.value));\n } }));\n return select;\n }, [applicationSettingState.applicationSetting?.advance.visualizer_draw_skip_rate, applicationSettingState.setVisualizerDrawSkipRate]);\n const visualizerDrawSkipRateRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"visualizer skip:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, visualizerDrawSkipRateSelect)));\n }, [applicationSettingState.applicationSetting?.advance.visualizer_draw_skip_rate, visualizerDrawSkipRateSelect]);\n const avatarCanvasResolutionSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions[x] }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: JSON.stringify(applicationSettingState.applicationSetting.avatar.avatar_canvas_size), onChange: (e) => {\n const val = JSON.parse(e.target.value);\n applicationSettingState.setAvatarCanvasSize(val);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Avatar Res.:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.avatar.avatar_canvas_size, applicationSettingState.setAvatarCanvasSize]);\n const screenCanvasResolutionSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions[x] }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: JSON.stringify(applicationSettingState.applicationSetting.avatar.screen_canvas_size), onChange: (e) => {\n const val = JSON.parse(e.target.value);\n applicationSettingState.setScreenCanvasSize(val);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Screen Res.:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.avatar.screen_canvas_size, applicationSettingState.setScreenCanvasSize]);\n const crossFadeLowerValueSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.cross_fade_lower_value, max: 0.3, min: 0, step: 0.01, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n applicationSettingState.setCrossFadeLowerValue(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"CrossFade Lower:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_lower_value, applicationSettingState.setCrossFadeLowerValue]);\n const crossFadeOffsetRateSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.cross_fade_offset_rate, max: 0.99, min: 0, step: 0.01, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n applicationSettingState.setCrossFadeOffsetRate(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"CrossFade Offset:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_offset_rate, applicationSettingState.setCrossFadeOffsetRate]);\n const crossFadeEndRateSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.cross_fade_end_rate, max: 0.99, min: 0, step: 0.01, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n applicationSettingState.setCrossFadeEndRate(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"CrossFade End:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_end_rate, applicationSettingState.setCrossFadeEndRate]);\n const crossFadeTypeSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.cross_fade_type, max: 2, min: 1, step: 1, className: \"sidebar-content-row-select-select\", onChange: (e) => {\n applicationSettingState.setCrossFadeType(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"CrossFade type\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_type, applicationSettingState.setCrossFadeType]);\n const majarModeSelect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.MajarModeTypes).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: x }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.majar_mode, onChange: (e) => {\n applicationSettingState.setMajarMode(e.target.value);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Server Mode\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting?.majar_mode, applicationSettingState.setMajarMode]);\n const clearSettingButton = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const clearSetting = async () => {\n localStorage.clear();\n await applicationSettingState.loadApplicationSetting();\n deviceManagerState.setAudioInputDeviceId(\"none\");\n deviceManagerState.setAudioOutputDeviceId(\"none\");\n deviceManagerState.setVideoInputDeviceId(\"none\");\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label-long\" }, \"Clear Setting:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-buttons\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: clearSetting }, \"clear\"))));\n }, [applicationSettingState.setAvatarUrl]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" },\n avatarDrawSkipRateRow,\n screenDrawSkipRateRow,\n visualizerDrawSkipRateRow,\n avatarCanvasResolutionSelect,\n screenCanvasResolutionSelect,\n crossFadeLowerValueSelect,\n crossFadeOffsetRateSelect,\n crossFadeEndRateSelect,\n crossFadeTypeSelect,\n majarModeSelect,\n clearSettingButton));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/306_AdvancedSettingContent.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AdvancedSetting\": () => (/* binding */ AdvancedSetting)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../001_clients_and_managers/000_ApplicationSettingLoader */ \"./frontend/src/001_clients_and_managers/000_ApplicationSettingLoader.ts\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _310_1_VoiceLoaderControllerContent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./310-1_VoiceLoaderControllerContent */ \"./frontend/src/100_components/002_parts/310-1_VoiceLoaderControllerContent.tsx\");\n\n\n\n\n\nconst AdvancedSetting = () => {\n const { applicationSettingState, deviceManagerState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const avatarDrawSkipRateRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const input = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.advance.avatar_draw_skip_rate, max: 24, min: 0, step: 1, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n applicationSettingState.setAvatarDrawSkipRate(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"avatar skip:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, input)));\n }, [applicationSettingState.applicationSetting.advance.avatar_draw_skip_rate]);\n const screenDrawSkipRateRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const input = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.advance.screen_draw_skip_rate, max: 24, min: 0, step: 1, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n applicationSettingState.setScreenDrawSkipRate(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"screen skip:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, input)));\n }, [applicationSettingState.applicationSetting.advance.screen_draw_skip_rate]);\n const visualizerDrawSkipRateRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const input = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.advance.visualizer_draw_skip_rate, max: 24, min: 0, step: 1, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n applicationSettingState.setVisualizerDrawSkipRate(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"visualizer skip:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, input)));\n }, [applicationSettingState.applicationSetting.advance.visualizer_draw_skip_rate]);\n const avatarCanvasResolutionSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions[x] }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: JSON.stringify(applicationSettingState.applicationSetting.avatar.avatar_canvas_size), onChange: (e) => {\n const val = JSON.parse(e.target.value);\n applicationSettingState.setAvatarCanvasSize(val);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Avatar Res.:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, select)));\n }, [applicationSettingState.applicationSetting.avatar.avatar_canvas_size]);\n const screenCanvasResolutionSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: _001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.Resolutions[x] }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: JSON.stringify(applicationSettingState.applicationSetting.avatar.screen_canvas_size), onChange: (e) => {\n const val = JSON.parse(e.target.value);\n applicationSettingState.setScreenCanvasSize(val);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Screen Res.:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, select)));\n }, [applicationSettingState.applicationSetting.avatar.screen_canvas_size]);\n const crossFadeLowerValueSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.advance.cross_fade_lower_value, max: 0.3, min: 0, step: 0.01, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n applicationSettingState.setCrossFadeLowerValue(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"CrossFade Lower:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_lower_value]);\n const crossFadeOffsetRateSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.advance.cross_fade_offset_rate, max: 0.99, min: 0, step: 0.01, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n applicationSettingState.setCrossFadeOffsetRate(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"CrossFade Offset:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_offset_rate]);\n const crossFadeEndRateSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting.advance.cross_fade_end_rate, max: 0.99, min: 0, step: 0.01, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n applicationSettingState.setCrossFadeEndRate(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"CrossFade End:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_end_rate]);\n const crossFadeTypeSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", value: applicationSettingState.applicationSetting?.advance.cross_fade_type, max: 2, min: 1, step: 1, className: \"sidebar-content-row-input-input\", onChange: (e) => {\n applicationSettingState.setCrossFadeType(Number(e.target.value));\n } }));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"CrossFade type\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-input\" }, select)));\n }, [applicationSettingState.applicationSetting.advance.cross_fade_type]);\n const majarModeSelectRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const options = Object.keys(_001_clients_and_managers_000_ApplicationSettingLoader__WEBPACK_IMPORTED_MODULE_1__.MajarModeTypes).map((x) => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"option\", { className: \"sidebar-content-row-select-option\", key: x, value: x }, x));\n });\n const select = (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"select\", { value: applicationSettingState.applicationSetting?.majar_mode, onChange: (e) => {\n applicationSettingState.setMajarMode(e.target.value);\n }, className: \"sidebar-content-row-select-select\" }, options));\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Server Mode\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-select\" }, select)));\n }, [applicationSettingState.applicationSetting?.majar_mode, applicationSettingState.setMajarMode]);\n const clearSettingButtonRow = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n const clearSetting = async () => {\n await applicationSettingState.clearSetting();\n deviceManagerState.setAudioInputDeviceId(\"none\");\n deviceManagerState.setAudioOutputDeviceId(\"none\");\n deviceManagerState.setVideoInputDeviceId(\"none\");\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-7-3\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-label\" }, \"Clear Setting:\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content-row-button\", onClick: clearSetting }, \"clear\")));\n }, [applicationSettingState.setAvatarUrl]);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"sidebar-content\" },\n avatarDrawSkipRateRow,\n screenDrawSkipRateRow,\n visualizerDrawSkipRateRow,\n avatarCanvasResolutionSelectRow,\n screenCanvasResolutionSelectRow,\n crossFadeLowerValueSelectRow,\n crossFadeOffsetRateSelectRow,\n crossFadeEndRateSelectRow,\n crossFadeTypeSelectRow,\n majarModeSelectRow,\n clearSettingButtonRow,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_310_1_VoiceLoaderControllerContent__WEBPACK_IMPORTED_MODULE_4__.AudioPlayer, { elementId: _const__WEBPACK_IMPORTED_MODULE_3__.VoiceLoaderAudioElementId1 })));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/310_AdvancedSettingContent.tsx?"); + +/***/ }), + +/***/ "./frontend/src/100_components/002_parts/900_Dialog.tsx": +/*!**************************************************************!*\ + !*** ./frontend/src/100_components/002_parts/900_Dialog.tsx ***! + \**************************************************************/ +/***/ ((__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 */ \"Dialog\": () => (/* binding */ Dialog)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _901_SpeakerSettingDialog__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./901_SpeakerSettingDialog */ \"./frontend/src/100_components/002_parts/901_SpeakerSettingDialog.tsx\");\n\n\n\nconst Dialog = () => {\n const { frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__.useAppState)();\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", null,\n frontendManagerState.stateControls.speakerSettingDialogCheckbox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-container\" },\n frontendManagerState.stateControls.speakerSettingDialogCheckbox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_901_SpeakerSettingDialog__WEBPACK_IMPORTED_MODULE_2__.SpeakerSettingDialog, null))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/900_Dialog.tsx?"); + +/***/ }), + +/***/ "./frontend/src/100_components/002_parts/901_SpeakerSettingDialog.tsx": +/*!****************************************************************************!*\ + !*** ./frontend/src/100_components/002_parts/901_SpeakerSettingDialog.tsx ***! + \****************************************************************************/ +/***/ ((__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 */ \"SpeakerSettingDialog\": () => (/* binding */ SpeakerSettingDialog)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n\n\n\nconst SpeakerSettingDialog = (_props) => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_1__.useAppSetting)();\n const { frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_2__.useAppState)();\n const [sid, setSid] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(100);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const name = document.getElementById(\"dialog-voice-setting-name\");\n const existSpeaker = applicationSettingState.applicationSetting.speakers.find(x => {\n return x.id === sid;\n });\n if (existSpeaker) {\n name.value = existSpeaker.name;\n }\n else {\n name.value = \"\";\n }\n }, [sid]);\n const updateMapping = () => {\n const sid = document.getElementById(\"dialog-voice-setting-id\");\n const name = document.getElementById(\"dialog-voice-setting-name\");\n const existSpeaker = applicationSettingState.applicationSetting.speakers.filter(x => {\n return x.id !== Number(sid.value);\n });\n if (name.value.length != 0) {\n existSpeaker.push({\n id: Number(sid.value),\n name: name.value\n });\n }\n applicationSettingState.updateSpeakerMapping(existSpeaker);\n };\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-frame\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-title\" }, \"Voice Setting\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-spacer\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-1\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-label\" }, \"Voice Id - Name mapping\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-spacer\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-4-4-2\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-label\" }, \"ID\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-label\" }, \"Name\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-label\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-4-4-2\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-input\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { type: \"number\", max: 200, min: 1, step: 1, value: sid, className: \"dialog-content-row-input-input\", onChange: (e) => {\n setSid(Number(e.target.value));\n }, id: \"dialog-voice-setting-id\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-input\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"input\", { className: \"dialog-content-row-input-input\", id: \"dialog-voice-setting-name\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-button\", onClick: () => {\n updateMapping();\n } }, \"update\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-spacer\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-dividing\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-2-2-2-2-2\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-label\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-button\", onClick: () => {\n frontendManagerState.stateControls.speakerSettingDialogCheckbox.updateState(false);\n } }, \"close\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-label\" })),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-spacer\" }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"dialog-content-row-spacer\" }))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/002_parts/901_SpeakerSettingDialog.tsx?"); /***/ }), @@ -4199,7 +4308,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 */ \"Frame\": () => (/* binding */ Frame)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _002_parts_100_Header__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./002_parts/100_Header */ \"./frontend/src/100_components/002_parts/100_Header.tsx\");\n/* harmony import */ var _002_parts_200_Body__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./002_parts/200_Body */ \"./frontend/src/100_components/002_parts/200_Body.tsx\");\n/* harmony import */ var _002_parts_300_RightSidebar__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./002_parts/300_RightSidebar */ \"./frontend/src/100_components/002_parts/300_RightSidebar.tsx\");\n\n\n\n\n\n\nconst Frame = () => {\n const { frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__.useAppState)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n frontendManagerState.stateControls.openRightSidebarCheckbox.updateState(true);\n }, []);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"audio\", { src: \"\", id: _const__WEBPACK_IMPORTED_MODULE_2__.AudioOutputElementId }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_002_parts_100_Header__WEBPACK_IMPORTED_MODULE_3__.Header, null)),\n frontendManagerState.stateControls.openRightSidebarCheckbox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"body-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_002_parts_200_Body__WEBPACK_IMPORTED_MODULE_4__.Body, null)),\n frontendManagerState.stateControls.openRightSidebarCheckbox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"right-sidebar-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_002_parts_300_RightSidebar__WEBPACK_IMPORTED_MODULE_5__.RightSidebar, null))));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/100_Frame.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Frame\": () => (/* binding */ Frame)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../const */ \"./frontend/src/const.ts\");\n/* harmony import */ var _002_parts_100_Header__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./002_parts/100_Header */ \"./frontend/src/100_components/002_parts/100_Header.tsx\");\n/* harmony import */ var _002_parts_200_Body__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./002_parts/200_Body */ \"./frontend/src/100_components/002_parts/200_Body.tsx\");\n/* harmony import */ var _002_parts_300_RightSidebar__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./002_parts/300_RightSidebar */ \"./frontend/src/100_components/002_parts/300_RightSidebar.tsx\");\n/* harmony import */ var _002_parts_900_Dialog__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./002_parts/900_Dialog */ \"./frontend/src/100_components/002_parts/900_Dialog.tsx\");\n\n\n\n\n\n\n\nconst Frame = () => {\n const { frontendManagerState } = (0,_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_1__.useAppState)();\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n frontendManagerState.stateControls.openRightSidebarCheckbox.updateState(true);\n }, []);\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"audio\", { src: \"\", id: _const__WEBPACK_IMPORTED_MODULE_2__.AudioOutputElementId }),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"header-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_002_parts_100_Header__WEBPACK_IMPORTED_MODULE_3__.Header, null)),\n frontendManagerState.stateControls.openRightSidebarCheckbox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"body-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_002_parts_200_Body__WEBPACK_IMPORTED_MODULE_4__.Body, null)),\n frontendManagerState.stateControls.openRightSidebarCheckbox.trigger,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"right-sidebar-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_002_parts_300_RightSidebar__WEBPACK_IMPORTED_MODULE_5__.RightSidebar, null)),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_002_parts_900_Dialog__WEBPACK_IMPORTED_MODULE_6__.Dialog, null)));\n};\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/100_components/100_Frame.tsx?"); /***/ }), @@ -4210,7 +4319,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 */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _100_components_001_css_001_App_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./100_components/001_css/001_App.css */ \"./frontend/src/100_components/001_css/001_App.css\");\n/* harmony import */ var _100_components_100_Frame__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./100_components/100_Frame */ \"./frontend/src/100_components/100_Frame.tsx\");\n/* harmony import */ var _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @fortawesome/fontawesome-svg-core */ \"./node_modules/@fortawesome/fontawesome-svg-core/index.es.js\");\n/* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ \"./node_modules/@fortawesome/free-solid-svg-icons/index.es.js\");\n/* harmony import */ var _fortawesome_free_regular_svg_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/free-regular-svg-icons */ \"./node_modules/@fortawesome/free-regular-svg-icons/index.es.js\");\n/* harmony import */ var _fortawesome_free_brands_svg_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @fortawesome/free-brands-svg-icons */ \"./node_modules/@fortawesome/free-brands-svg-icons/index.es.js\");\n\n\n\n\n\n\n\n_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_3__.library.add(_fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__.fas, _fortawesome_free_regular_svg_icons__WEBPACK_IMPORTED_MODULE_5__.far, _fortawesome_free_brands_svg_icons__WEBPACK_IMPORTED_MODULE_6__.fab);\nconst App = () => {\n const frame = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_100_components_100_Frame__WEBPACK_IMPORTED_MODULE_2__.Frame, null);\n }, []);\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"application-container\" }, frame);\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/App.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _100_components_001_css_001_App_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./100_components/001_css/001_App.css */ \"./frontend/src/100_components/001_css/001_App.css\");\n/* harmony import */ var _100_components_100_Frame__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./100_components/100_Frame */ \"./frontend/src/100_components/100_Frame.tsx\");\n/* harmony import */ var _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @fortawesome/fontawesome-svg-core */ \"./node_modules/@fortawesome/fontawesome-svg-core/index.es.js\");\n/* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ \"./node_modules/@fortawesome/free-solid-svg-icons/index.es.js\");\n/* harmony import */ var _fortawesome_free_regular_svg_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/free-regular-svg-icons */ \"./node_modules/@fortawesome/free-regular-svg-icons/index.es.js\");\n/* harmony import */ var _fortawesome_free_brands_svg_icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @fortawesome/free-brands-svg-icons */ \"./node_modules/@fortawesome/free-brands-svg-icons/index.es.js\");\n/* harmony import */ var react_error_boundary__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-error-boundary */ \"./node_modules/react-error-boundary/dist/react-error-boundary.umd.js\");\n/* harmony import */ var react_error_boundary__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react_error_boundary__WEBPACK_IMPORTED_MODULE_8__);\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n\n\n\n\n\n\n\n_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_3__.library.add(_fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__.fas, _fortawesome_free_regular_svg_icons__WEBPACK_IMPORTED_MODULE_5__.far, _fortawesome_free_brands_svg_icons__WEBPACK_IMPORTED_MODULE_6__.fab);\n\n\nconst MyFallbackComponent = () => {\n console.log(\"FALLBACK\");\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { role: \"alert\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null, \"Something went wrong: clear setting and reloading...\")));\n};\nconst App = () => {\n const { applicationSettingState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_7__.useAppSetting)();\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_error_boundary__WEBPACK_IMPORTED_MODULE_8__.ErrorBoundary, { FallbackComponent: MyFallbackComponent, onError: (error, errorInfo) => {\n console.log(error, errorInfo);\n applicationSettingState.clearSetting();\n // location.reload()\n }, onReset: () => {\n console.log(\"RESET!\");\n applicationSettingState.clearSetting();\n } },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"application-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_100_components_100_Frame__WEBPACK_IMPORTED_MODULE_2__.Frame, null))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (App);\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/App.tsx?"); /***/ }), @@ -4232,7 +4341,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 import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./App */ \"./frontend/src/App.tsx\");\n\n\n\n\n\n\n// const moduleScript = `\n// class WhiteNoiseProcessor extends AudioWorkletProcessor {\n// process (inputs, outputs, parameters) {\n// const output = outputs[0]\n// output.forEach(channel => {\n// for (let i = 0; i < channel.length; i++) {\n// channel[i] = Math.random() * 1.0 - 0.5\n// }\n// })\n// return true\n// }\n// }\n// registerProcessor('white-noise-processor', WhiteNoiseProcessor);\n// `;\n// //@ts-ignore\n// import workerjs from \"raw-loader!../wasm/dist/index.js\";\n// class MessengerWorkletNode extends AudioWorkletNode {\n// private counter_ = 0;\n// constructor(context: AudioContext) {\n// super(context, \"wasm-worklet-processor\");\n// this.counter_ = 0;\n// this.port.onmessage = this.handleMessage_.bind(this);\n// console.log(\"[Node:constructor] created.\");\n// }\n// handleMessage_(event: any) {\n// console.log(`[Node:handleMessage_] ` + `${event.data.message} (${event.data.contextTimestamp})`);\n// if (this.counter_++ === 10) {\n// this.port.postMessage({\n// message: \"10 messages received!\",\n// contextTimestamp: this.context.currentTime,\n// });\n// this.counter_ = 0;\n// }\n// }\n// }\nconst AppStateProviderWrapper = () => {\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppRootState)();\n if (audioRootState.isModuleLoaded) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.AppStateProvider, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_App__WEBPACK_IMPORTED_MODULE_5__[\"default\"], null)));\n }\n else {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, \"loading...\");\n }\n};\nconst NormalFrontPageDescription = () => {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"front-description\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"\\u3053\\u306E\\u30A2\\u30D7\\u30EA\\u306F\\u30EA\\u30A2\\u30EB\\u30BF\\u30A4\\u30E0\\u30DC\\u30A4\\u30B9\\u30C1\\u30A7\\u30F3\\u30B8\\u30E3\\u30FC\",\n \" \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"https://github.com/isletennos/MMVC_Trainer\", target: \"_blank\" }, \"MMVC\"),\n \"\\u306E\\u30D5\\u30ED\\u30F3\\u30C8\\u30A8\\u30F3\\u30C9\\u30A2\\u30D7\\u30EA\\u3067\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"\\u30BD\\u30FC\\u30B9\\u30B3\\u30FC\\u30C9\\u3001\\u4F7F\\u7528\\u65B9\\u6CD5\\u306F\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"https://github.com/w-okada/voice-changer\" }, \"\\u3053\\u3061\\u3089\\u3002\")),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", { className: \"front-description-strong\" }, \"\\u4F7F\\u3063\\u3066\\u307F\\u3066\\u30B3\\u30FC\\u30D2\\u30FC\\u304F\\u3089\\u3044\\u306A\\u3089\\u3054\\u3061\\u305D\\u3046\\u3057\\u3066\\u3082\\u3044\\u3044\\u304B\\u306A\\u3068\\u3044\\u3046\\u4EBA\\u306F\\u3053\\u3061\\u3089\\u304B\\u3089\\u3054\\u652F\\u63F4\\u304A\\u9858\\u3044\\u3057\\u307E\\u3059\\u3002 \"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"https://www.buymeacoffee.com/wokad\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { className: \"front-description-img\", src: \"./coffee.png\" }))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", null))));\n};\nconst ColabFrontFrontPageDescription = () => {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"front-description\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"\\u3053\\u306E\\u30A2\\u30D7\\u30EA\\u306F\\u30EA\\u30A2\\u30EB\\u30BF\\u30A4\\u30E0\\u30DC\\u30A4\\u30B9\\u30C1\\u30A7\\u30F3\\u30B8\\u30E3\\u30FC\",\n \" \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"https://github.com/isletennos/MMVC_Trainer\", target: \"_blank\" }, \"MMVC\"),\n \"\\u306E\\u30D5\\u30ED\\u30F3\\u30C8\\u30A8\\u30F3\\u30C9\\u30A2\\u30D7\\u30EA\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"span\", { className: \"front-description-strong\" }, \"\\uFF08\\u30C7\\u30E2\\u7248\\uFF09\"),\n \"\\u3067\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"\\u3053\\u306E\\u30C7\\u30E2\\u7248\\u306F\\u3001\\u30D0\\u30C3\\u30AF\\u30A8\\u30F3\\u30C9\\u3092Colab\\u4E0A\\u3067\\u52D5\\u304B\\u3057\\u3066\\u3044\\u308B\\u3053\\u3068\\u3092\\u60F3\\u5B9A\\u3057\\u3066\\u3044\\u307E\\u3059\\u3002 \"),\n \" \",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"Colab\\u306E\\u5236\\u7D04\\u306B\\u3088\\u308A\\u3001\\u6B63\\u5F0F\\u7248\\u3088\\u308A\\u6027\\u80FD\\u9762\\u3084\\u6A5F\\u80FD\\u9762\\u3067\\u5236\\u9650\\u304C\\u304B\\u304B\\u3063\\u3066\\u3044\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"\\u6B63\\u5F0F\\u7248\\u306F\\u30ED\\u30FC\\u30AB\\u30EBPC\\u4E0A\\u306EDocker\\u3092\\u52D5\\u304B\\u3059\\u69CB\\u6210\\u3068\\u306A\\u3063\\u3066\\u3044\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null, \"\\u3053\\u306E\\u305F\\u3081\\u591A\\u304F\\u306E\\u5834\\u5408\\u3001\\u3088\\u308A\\u5C11\\u306A\\u3044\\u30BF\\u30A4\\u30E0\\u30E9\\u30B0\\u3067\\u6ED1\\u3089\\u304B\\u306A\\u30DC\\u30A4\\u30B9\\u30C1\\u30A7\\u30F3\\u30B8\\u30E3\\u3092\\u884C\\u3046\\u3053\\u3068\\u304C\\u3067\\u304D\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n \"\\u662F\\u975E\\u304A\\u8A66\\u3057\\u304F\\u3060\\u3055\\u3044\\u3002\\u4F7F\\u7528\\u65B9\\u6CD5\\u306F\",\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"https://github.com/w-okada/voice-changer/wiki\" }, \"\\u3053\\u3061\\u3089\"),\n \"\\u306B\\u8A18\\u8F09\\u3057\\u3066\\u3042\\u308A\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", { className: \"front-description-strong\" }, \"\\u4F7F\\u3063\\u3066\\u307F\\u3066\\u30B3\\u30FC\\u30D2\\u30FC\\u304F\\u3089\\u3044\\u306A\\u3089\\u3054\\u3061\\u305D\\u3046\\u3057\\u3066\\u3082\\u3044\\u3044\\u304B\\u306A\\u3068\\u3044\\u3046\\u4EBA\\u306F\\u3053\\u3061\\u3089\\u304B\\u3089\\u3054\\u652F\\u63F4\\u304A\\u9858\\u3044\\u3057\\u307E\\u3059\\u3002 \"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"p\", null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", { href: \"https://www.buymeacoffee.com/wokad\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"img\", { className: \"front-description-img\", src: \"./coffee.png\" }))),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"a\", null))));\n};\nconst AppRootStateProviderWrapper = () => {\n const { applicationSettingState, deviceManagerState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const [firstTach, setFirstTouch] = react__WEBPACK_IMPORTED_MODULE_0__.useState(false);\n const frontPageDescription = react__WEBPACK_IMPORTED_MODULE_0__.useMemo(() => {\n if (applicationSettingState.applicationSetting?.majar_mode === \"docker\") {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(NormalFrontPageDescription, null);\n }\n else {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(ColabFrontFrontPageDescription, null);\n }\n }, []);\n if (!applicationSettingState.applicationSetting || !firstTach) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"front-container\" },\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"front-title\" }, \"Realtime Voice Changer Frontend\"),\n frontPageDescription,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"front-start-button\", onClick: () => {\n setFirstTouch(true);\n } }, \"Click to start\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"front-note\" }, \"\\u78BA\\u8A8D\\u52D5\\u4F5C\\u74B0\\u5883:Windows 11 + Chrome\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"front-disclaimer\" }, \"\\u514D\\u8CAC\\uFF1A\\u672C\\u30BD\\u30D5\\u30C8\\u30A6\\u30A7\\u30A2\\u306E\\u4F7F\\u7528\\u307E\\u305F\\u306F\\u4F7F\\u7528\\u4E0D\\u80FD\\u306B\\u3088\\u308A\\u751F\\u3058\\u305F\\u3044\\u304B\\u306A\\u308B\\u76F4\\u63A5\\u640D\\u5BB3\\u30FB\\u9593\\u63A5\\u640D\\u5BB3\\u30FB\\u6CE2\\u53CA\\u7684\\u640D\\u5BB3\\u30FB\\u7D50\\u679C\\u7684\\u640D\\u5BB3 \\u307E\\u305F\\u306F\\u7279\\u5225\\u640D\\u5BB3\\u306B\\u3064\\u3044\\u3066\\u3082\\u3001\\u4E00\\u5207\\u8CAC\\u4EFB\\u3092\\u8CA0\\u3044\\u307E\\u305B\\u3093\\u3002\")));\n }\n else if (deviceManagerState.audioInputDevices.length === 0) {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"div\", { className: \"start-button\" }, \"Loading Devices...\")));\n }\n else {\n return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_3__.AppRootStateProvider, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(AppStateProviderWrapper, null)));\n }\n};\nconst container = document.getElementById(\"app\");\nconst root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(container);\nroot.render(react__WEBPACK_IMPORTED_MODULE_0__.createElement(_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.AppSettingProvider, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(AppRootStateProviderWrapper, null)));\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/index.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./003_provider/001_AppSettingProvider */ \"./frontend/src/003_provider/001_AppSettingProvider.tsx\");\n/* harmony import */ var _003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./003_provider/002_AppRootStateProvider */ \"./frontend/src/003_provider/002_AppRootStateProvider.tsx\");\n/* harmony import */ var _003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./003_provider/003_AppStateProvider */ \"./frontend/src/003_provider/003_AppStateProvider.tsx\");\n/* harmony import */ var _App__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./App */ \"./frontend/src/App.tsx\");\n\n\n\n\n\n\nconst DEBUG = true;\nconst AppStateProviderWrapper = () => {\n const { audioRootState } = (0,_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_3__.useAppRootState)();\n if (audioRootState.isModuleLoaded) {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_003_provider_003_AppStateProvider__WEBPACK_IMPORTED_MODULE_4__.AppStateProvider, null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_App__WEBPACK_IMPORTED_MODULE_5__[\"default\"], null)));\n }\n else {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, \"loading...\");\n }\n};\nconst NormalFrontPageDescription = () => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"front-description\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null,\n \"\\u3053\\u306E\\u30A2\\u30D7\\u30EA\\u306F\\u30EA\\u30A2\\u30EB\\u30BF\\u30A4\\u30E0\\u30DC\\u30A4\\u30B9\\u30C1\\u30A7\\u30F3\\u30B8\\u30E3\\u30FC\",\n \" \",\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", { href: \"https://github.com/isletennos/MMVC_Trainer\", target: \"_blank\" }, \"MMVC\"),\n \"\\u306E\\u30D5\\u30ED\\u30F3\\u30C8\\u30A8\\u30F3\\u30C9\\u30A2\\u30D7\\u30EA\\u3067\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null,\n \"\\u30BD\\u30FC\\u30B9\\u30B3\\u30FC\\u30C9\\u3001\\u4F7F\\u7528\\u65B9\\u6CD5\\u306F\",\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", { href: \"https://github.com/w-okada/voice-changer\" }, \"\\u3053\\u3061\\u3089\\u3002\")),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", { className: \"front-description-strong\" }, \"\\u4F7F\\u3063\\u3066\\u307F\\u3066\\u30B3\\u30FC\\u30D2\\u30FC\\u304F\\u3089\\u3044\\u306A\\u3089\\u3054\\u3061\\u305D\\u3046\\u3057\\u3066\\u3082\\u3044\\u3044\\u304B\\u306A\\u3068\\u3044\\u3046\\u4EBA\\u306F\\u3053\\u3061\\u3089\\u304B\\u3089\\u3054\\u652F\\u63F4\\u304A\\u9858\\u3044\\u3057\\u307E\\u3059\\u3002 \"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", { href: \"https://www.buymeacoffee.com/wokad\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", { className: \"front-description-img\", src: \"./coffee.png\" }))),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", null))));\n};\nconst ColabFrontFrontPageDescription = () => {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"front-description\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null,\n \"\\u3053\\u306E\\u30A2\\u30D7\\u30EA\\u306F\\u30EA\\u30A2\\u30EB\\u30BF\\u30A4\\u30E0\\u30DC\\u30A4\\u30B9\\u30C1\\u30A7\\u30F3\\u30B8\\u30E3\\u30FC\",\n \" \",\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", { href: \"https://github.com/isletennos/MMVC_Trainer\", target: \"_blank\" }, \"MMVC\"),\n \"\\u306E\\u30D5\\u30ED\\u30F3\\u30C8\\u30A8\\u30F3\\u30C9\\u30A2\\u30D7\\u30EA\",\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", { className: \"front-description-strong\" }, \"\\uFF08\\u30C7\\u30E2\\u7248\\uFF09\"),\n \"\\u3067\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null, \"\\u3053\\u306E\\u30C7\\u30E2\\u7248\\u306F\\u3001\\u30D0\\u30C3\\u30AF\\u30A8\\u30F3\\u30C9\\u3092Colab\\u4E0A\\u3067\\u52D5\\u304B\\u3057\\u3066\\u3044\\u308B\\u3053\\u3068\\u3092\\u60F3\\u5B9A\\u3057\\u3066\\u3044\\u307E\\u3059\\u3002 \"),\n \" \",\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null, \"Colab\\u306E\\u5236\\u7D04\\u306B\\u3088\\u308A\\u3001\\u6B63\\u5F0F\\u7248\\u3088\\u308A\\u6027\\u80FD\\u9762\\u3084\\u6A5F\\u80FD\\u9762\\u3067\\u5236\\u9650\\u304C\\u304B\\u304B\\u3063\\u3066\\u3044\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null, \"\\u6B63\\u5F0F\\u7248\\u306F\\u30ED\\u30FC\\u30AB\\u30EBPC\\u4E0A\\u306EDocker\\u3092\\u52D5\\u304B\\u3059\\u69CB\\u6210\\u3068\\u306A\\u3063\\u3066\\u3044\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null, \"\\u3053\\u306E\\u305F\\u3081\\u591A\\u304F\\u306E\\u5834\\u5408\\u3001\\u3088\\u308A\\u5C11\\u306A\\u3044\\u30BF\\u30A4\\u30E0\\u30E9\\u30B0\\u3067\\u6ED1\\u3089\\u304B\\u306A\\u30DC\\u30A4\\u30B9\\u30C1\\u30A7\\u30F3\\u30B8\\u30E3\\u3092\\u884C\\u3046\\u3053\\u3068\\u304C\\u3067\\u304D\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null,\n \"\\u662F\\u975E\\u304A\\u8A66\\u3057\\u304F\\u3060\\u3055\\u3044\\u3002\\u4F7F\\u7528\\u65B9\\u6CD5\\u306F\",\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", { href: \"https://github.com/w-okada/voice-changer/wiki\" }, \"\\u3053\\u3061\\u3089\"),\n \"\\u306B\\u8A18\\u8F09\\u3057\\u3066\\u3042\\u308A\\u307E\\u3059\\u3002\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", { className: \"front-description-strong\" }, \"\\u4F7F\\u3063\\u3066\\u307F\\u3066\\u30B3\\u30FC\\u30D2\\u30FC\\u304F\\u3089\\u3044\\u306A\\u3089\\u3054\\u3061\\u305D\\u3046\\u3057\\u3066\\u3082\\u3044\\u3044\\u304B\\u306A\\u3068\\u3044\\u3046\\u4EBA\\u306F\\u3053\\u3061\\u3089\\u304B\\u3089\\u3054\\u652F\\u63F4\\u304A\\u9858\\u3044\\u3057\\u307E\\u3059\\u3002 \"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"p\", null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", { href: \"https://www.buymeacoffee.com/wokad\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", { className: \"front-description-img\", src: \"./coffee.png\" }))),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"a\", null))));\n};\nconst AppRootStateProviderWrapper = () => {\n const { applicationSettingState, deviceManagerState } = (0,_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.useAppSetting)();\n const [firstTach, setFirstTouch] = react__WEBPACK_IMPORTED_MODULE_0___default().useState(false);\n // useEffect(() => {\n // if (DEBUG) {\n // setFirstTouch(true);\n // }\n // }, [])\n const frontPageDescription = react__WEBPACK_IMPORTED_MODULE_0___default().useMemo(() => {\n if (applicationSettingState.applicationSetting?.majar_mode === \"docker\") {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(NormalFrontPageDescription, null);\n }\n else {\n return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ColabFrontFrontPageDescription, null);\n }\n }, []);\n if (!applicationSettingState.applicationSetting || !firstTach) {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"front-container\" },\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"front-title\" }, \"Realtime Voice Changer Frontend\"),\n frontPageDescription,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"front-start-button\", onClick: () => {\n setFirstTouch(true);\n } }, \"Click to start\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"front-note\" }, \"\\u78BA\\u8A8D\\u52D5\\u4F5C\\u74B0\\u5883:Windows 11 + Chrome\"),\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"front-disclaimer\" }, \"\\u514D\\u8CAC\\uFF1A\\u672C\\u30BD\\u30D5\\u30C8\\u30A6\\u30A7\\u30A2\\u306E\\u4F7F\\u7528\\u307E\\u305F\\u306F\\u4F7F\\u7528\\u4E0D\\u80FD\\u306B\\u3088\\u308A\\u751F\\u3058\\u305F\\u3044\\u304B\\u306A\\u308B\\u76F4\\u63A5\\u640D\\u5BB3\\u30FB\\u9593\\u63A5\\u640D\\u5BB3\\u30FB\\u6CE2\\u53CA\\u7684\\u640D\\u5BB3\\u30FB\\u7D50\\u679C\\u7684\\u640D\\u5BB3 \\u307E\\u305F\\u306F\\u7279\\u5225\\u640D\\u5BB3\\u306B\\u3064\\u3044\\u3066\\u3082\\u3001\\u4E00\\u5207\\u8CAC\\u4EFB\\u3092\\u8CA0\\u3044\\u307E\\u305B\\u3093\\u3002\")));\n }\n else if (deviceManagerState.audioInputDevices.length === 0 && !DEBUG) {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", { className: \"start-button\" }, \"Loading Devices...\")));\n }\n else {\n return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_003_provider_002_AppRootStateProvider__WEBPACK_IMPORTED_MODULE_3__.AppRootStateProvider, null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AppStateProviderWrapper, null)));\n }\n};\nconst container = document.getElementById(\"app\");\nconst root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_1__.createRoot)(container);\nroot.render(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_003_provider_001_AppSettingProvider__WEBPACK_IMPORTED_MODULE_2__.AppSettingProvider, null,\n react__WEBPACK_IMPORTED_MODULE_0___default().createElement(AppRootStateProviderWrapper, null)));\n\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/src/index.tsx?"); /***/ }), @@ -4684,6 +4793,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac "use strict"; eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"GLTFLoader\": () => (/* binding */ GLTFLoader)\n/* harmony export */ });\n/* harmony import */ var three__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! three */ \"./node_modules/three/build/three.module.js\");\n\n\nclass GLTFLoader extends three__WEBPACK_IMPORTED_MODULE_0__.Loader {\n\n\tconstructor( manager ) {\n\n\t\tsuper( manager );\n\n\t\tthis.dracoLoader = null;\n\t\tthis.ktx2Loader = null;\n\t\tthis.meshoptDecoder = null;\n\n\t\tthis.pluginCallbacks = [];\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFMaterialsClearcoatExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFTextureBasisUExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFTextureWebPExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFMaterialsSheenExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFMaterialsTransmissionExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFMaterialsVolumeExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFMaterialsIorExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFMaterialsSpecularExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFLightsExtension( parser );\n\n\t\t} );\n\n\t\tthis.register( function ( parser ) {\n\n\t\t\treturn new GLTFMeshoptCompression( parser );\n\n\t\t} );\n\n\t}\n\n\tload( url, onLoad, onProgress, onError ) {\n\n\t\tconst scope = this;\n\n\t\tlet resourcePath;\n\n\t\tif ( this.resourcePath !== '' ) {\n\n\t\t\tresourcePath = this.resourcePath;\n\n\t\t} else if ( this.path !== '' ) {\n\n\t\t\tresourcePath = this.path;\n\n\t\t} else {\n\n\t\t\tresourcePath = three__WEBPACK_IMPORTED_MODULE_0__.LoaderUtils.extractUrlBase( url );\n\n\t\t}\n\n\t\t// Tells the LoadingManager to track an extra item, which resolves after\n\t\t// the model is fully loaded. This means the count of items loaded will\n\t\t// be incorrect, but ensures manager.onLoad() does not fire early.\n\t\tthis.manager.itemStart( url );\n\n\t\tconst _onError = function ( e ) {\n\n\t\t\tif ( onError ) {\n\n\t\t\t\tonError( e );\n\n\t\t\t} else {\n\n\t\t\t\tconsole.error( e );\n\n\t\t\t}\n\n\t\t\tscope.manager.itemError( url );\n\t\t\tscope.manager.itemEnd( url );\n\n\t\t};\n\n\t\tconst loader = new three__WEBPACK_IMPORTED_MODULE_0__.FileLoader( this.manager );\n\n\t\tloader.setPath( this.path );\n\t\tloader.setResponseType( 'arraybuffer' );\n\t\tloader.setRequestHeader( this.requestHeader );\n\t\tloader.setWithCredentials( this.withCredentials );\n\n\t\tloader.load( url, function ( data ) {\n\n\t\t\ttry {\n\n\t\t\t\tscope.parse( data, resourcePath, function ( gltf ) {\n\n\t\t\t\t\tonLoad( gltf );\n\n\t\t\t\t\tscope.manager.itemEnd( url );\n\n\t\t\t\t}, _onError );\n\n\t\t\t} catch ( e ) {\n\n\t\t\t\t_onError( e );\n\n\t\t\t}\n\n\t\t}, onProgress, _onError );\n\n\t}\n\n\tsetDRACOLoader( dracoLoader ) {\n\n\t\tthis.dracoLoader = dracoLoader;\n\t\treturn this;\n\n\t}\n\n\tsetDDSLoader() {\n\n\t\tthrow new Error(\n\n\t\t\t'THREE.GLTFLoader: \"MSFT_texture_dds\" no longer supported. Please update to \"KHR_texture_basisu\".'\n\n\t\t);\n\n\t}\n\n\tsetKTX2Loader( ktx2Loader ) {\n\n\t\tthis.ktx2Loader = ktx2Loader;\n\t\treturn this;\n\n\t}\n\n\tsetMeshoptDecoder( meshoptDecoder ) {\n\n\t\tthis.meshoptDecoder = meshoptDecoder;\n\t\treturn this;\n\n\t}\n\n\tregister( callback ) {\n\n\t\tif ( this.pluginCallbacks.indexOf( callback ) === - 1 ) {\n\n\t\t\tthis.pluginCallbacks.push( callback );\n\n\t\t}\n\n\t\treturn this;\n\n\t}\n\n\tunregister( callback ) {\n\n\t\tif ( this.pluginCallbacks.indexOf( callback ) !== - 1 ) {\n\n\t\t\tthis.pluginCallbacks.splice( this.pluginCallbacks.indexOf( callback ), 1 );\n\n\t\t}\n\n\t\treturn this;\n\n\t}\n\n\tparse( data, path, onLoad, onError ) {\n\n\t\tlet content;\n\t\tconst extensions = {};\n\t\tconst plugins = {};\n\n\t\tif ( typeof data === 'string' ) {\n\n\t\t\tcontent = data;\n\n\t\t} else {\n\n\t\t\tconst magic = three__WEBPACK_IMPORTED_MODULE_0__.LoaderUtils.decodeText( new Uint8Array( data, 0, 4 ) );\n\n\t\t\tif ( magic === BINARY_EXTENSION_HEADER_MAGIC ) {\n\n\t\t\t\ttry {\n\n\t\t\t\t\textensions[ EXTENSIONS.KHR_BINARY_GLTF ] = new GLTFBinaryExtension( data );\n\n\t\t\t\t} catch ( error ) {\n\n\t\t\t\t\tif ( onError ) onError( error );\n\t\t\t\t\treturn;\n\n\t\t\t\t}\n\n\t\t\t\tcontent = extensions[ EXTENSIONS.KHR_BINARY_GLTF ].content;\n\n\t\t\t} else {\n\n\t\t\t\tcontent = three__WEBPACK_IMPORTED_MODULE_0__.LoaderUtils.decodeText( new Uint8Array( data ) );\n\n\t\t\t}\n\n\t\t}\n\n\t\tconst json = JSON.parse( content );\n\n\t\tif ( json.asset === undefined || json.asset.version[ 0 ] < 2 ) {\n\n\t\t\tif ( onError ) onError( new Error( 'THREE.GLTFLoader: Unsupported asset. glTF versions >=2.0 are supported.' ) );\n\t\t\treturn;\n\n\t\t}\n\n\t\tconst parser = new GLTFParser( json, {\n\n\t\t\tpath: path || this.resourcePath || '',\n\t\t\tcrossOrigin: this.crossOrigin,\n\t\t\trequestHeader: this.requestHeader,\n\t\t\tmanager: this.manager,\n\t\t\tktx2Loader: this.ktx2Loader,\n\t\t\tmeshoptDecoder: this.meshoptDecoder\n\n\t\t} );\n\n\t\tparser.fileLoader.setRequestHeader( this.requestHeader );\n\n\t\tfor ( let i = 0; i < this.pluginCallbacks.length; i ++ ) {\n\n\t\t\tconst plugin = this.pluginCallbacks[ i ]( parser );\n\t\t\tplugins[ plugin.name ] = plugin;\n\n\t\t\t// Workaround to avoid determining as unknown extension\n\t\t\t// in addUnknownExtensionsToUserData().\n\t\t\t// Remove this workaround if we move all the existing\n\t\t\t// extension handlers to plugin system\n\t\t\textensions[ plugin.name ] = true;\n\n\t\t}\n\n\t\tif ( json.extensionsUsed ) {\n\n\t\t\tfor ( let i = 0; i < json.extensionsUsed.length; ++ i ) {\n\n\t\t\t\tconst extensionName = json.extensionsUsed[ i ];\n\t\t\t\tconst extensionsRequired = json.extensionsRequired || [];\n\n\t\t\t\tswitch ( extensionName ) {\n\n\t\t\t\t\tcase EXTENSIONS.KHR_MATERIALS_UNLIT:\n\t\t\t\t\t\textensions[ extensionName ] = new GLTFMaterialsUnlitExtension();\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS:\n\t\t\t\t\t\textensions[ extensionName ] = new GLTFMaterialsPbrSpecularGlossinessExtension();\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase EXTENSIONS.KHR_DRACO_MESH_COMPRESSION:\n\t\t\t\t\t\textensions[ extensionName ] = new GLTFDracoMeshCompressionExtension( json, this.dracoLoader );\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase EXTENSIONS.KHR_TEXTURE_TRANSFORM:\n\t\t\t\t\t\textensions[ extensionName ] = new GLTFTextureTransformExtension();\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase EXTENSIONS.KHR_MESH_QUANTIZATION:\n\t\t\t\t\t\textensions[ extensionName ] = new GLTFMeshQuantizationExtension();\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tdefault:\n\n\t\t\t\t\t\tif ( extensionsRequired.indexOf( extensionName ) >= 0 && plugins[ extensionName ] === undefined ) {\n\n\t\t\t\t\t\t\tconsole.warn( 'THREE.GLTFLoader: Unknown extension \"' + extensionName + '\".' );\n\n\t\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t\tparser.setExtensions( extensions );\n\t\tparser.setPlugins( plugins );\n\t\tparser.parse( onLoad, onError );\n\n\t}\n\n\tparseAsync( data, path ) {\n\n\t\tconst scope = this;\n\n\t\treturn new Promise( function ( resolve, reject ) {\n\n\t\t\tscope.parse( data, path, resolve, reject );\n\n\t\t} );\n\n\t}\n\n}\n\n/* GLTFREGISTRY */\n\nfunction GLTFRegistry() {\n\n\tlet objects = {};\n\n\treturn\t{\n\n\t\tget: function ( key ) {\n\n\t\t\treturn objects[ key ];\n\n\t\t},\n\n\t\tadd: function ( key, object ) {\n\n\t\t\tobjects[ key ] = object;\n\n\t\t},\n\n\t\tremove: function ( key ) {\n\n\t\t\tdelete objects[ key ];\n\n\t\t},\n\n\t\tremoveAll: function () {\n\n\t\t\tobjects = {};\n\n\t\t}\n\n\t};\n\n}\n\n/*********************************/\n/********** EXTENSIONS ***********/\n/*********************************/\n\nconst EXTENSIONS = {\n\tKHR_BINARY_GLTF: 'KHR_binary_glTF',\n\tKHR_DRACO_MESH_COMPRESSION: 'KHR_draco_mesh_compression',\n\tKHR_LIGHTS_PUNCTUAL: 'KHR_lights_punctual',\n\tKHR_MATERIALS_CLEARCOAT: 'KHR_materials_clearcoat',\n\tKHR_MATERIALS_IOR: 'KHR_materials_ior',\n\tKHR_MATERIALS_PBR_SPECULAR_GLOSSINESS: 'KHR_materials_pbrSpecularGlossiness',\n\tKHR_MATERIALS_SHEEN: 'KHR_materials_sheen',\n\tKHR_MATERIALS_SPECULAR: 'KHR_materials_specular',\n\tKHR_MATERIALS_TRANSMISSION: 'KHR_materials_transmission',\n\tKHR_MATERIALS_UNLIT: 'KHR_materials_unlit',\n\tKHR_MATERIALS_VOLUME: 'KHR_materials_volume',\n\tKHR_TEXTURE_BASISU: 'KHR_texture_basisu',\n\tKHR_TEXTURE_TRANSFORM: 'KHR_texture_transform',\n\tKHR_MESH_QUANTIZATION: 'KHR_mesh_quantization',\n\tEXT_TEXTURE_WEBP: 'EXT_texture_webp',\n\tEXT_MESHOPT_COMPRESSION: 'EXT_meshopt_compression'\n};\n\n/**\n * Punctual Lights Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_lights_punctual\n */\nclass GLTFLightsExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_LIGHTS_PUNCTUAL;\n\n\t\t// Object3D instance caches\n\t\tthis.cache = { refs: {}, uses: {} };\n\n\t}\n\n\t_markDefs() {\n\n\t\tconst parser = this.parser;\n\t\tconst nodeDefs = this.parser.json.nodes || [];\n\n\t\tfor ( let nodeIndex = 0, nodeLength = nodeDefs.length; nodeIndex < nodeLength; nodeIndex ++ ) {\n\n\t\t\tconst nodeDef = nodeDefs[ nodeIndex ];\n\n\t\t\tif ( nodeDef.extensions\n\t\t\t\t\t&& nodeDef.extensions[ this.name ]\n\t\t\t\t\t&& nodeDef.extensions[ this.name ].light !== undefined ) {\n\n\t\t\t\tparser._addNodeRef( this.cache, nodeDef.extensions[ this.name ].light );\n\n\t\t\t}\n\n\t\t}\n\n\t}\n\n\t_loadLight( lightIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst cacheKey = 'light:' + lightIndex;\n\t\tlet dependency = parser.cache.get( cacheKey );\n\n\t\tif ( dependency ) return dependency;\n\n\t\tconst json = parser.json;\n\t\tconst extensions = ( json.extensions && json.extensions[ this.name ] ) || {};\n\t\tconst lightDefs = extensions.lights || [];\n\t\tconst lightDef = lightDefs[ lightIndex ];\n\t\tlet lightNode;\n\n\t\tconst color = new three__WEBPACK_IMPORTED_MODULE_0__.Color( 0xffffff );\n\n\t\tif ( lightDef.color !== undefined ) color.fromArray( lightDef.color );\n\n\t\tconst range = lightDef.range !== undefined ? lightDef.range : 0;\n\n\t\tswitch ( lightDef.type ) {\n\n\t\t\tcase 'directional':\n\t\t\t\tlightNode = new three__WEBPACK_IMPORTED_MODULE_0__.DirectionalLight( color );\n\t\t\t\tlightNode.target.position.set( 0, 0, - 1 );\n\t\t\t\tlightNode.add( lightNode.target );\n\t\t\t\tbreak;\n\n\t\t\tcase 'point':\n\t\t\t\tlightNode = new three__WEBPACK_IMPORTED_MODULE_0__.PointLight( color );\n\t\t\t\tlightNode.distance = range;\n\t\t\t\tbreak;\n\n\t\t\tcase 'spot':\n\t\t\t\tlightNode = new three__WEBPACK_IMPORTED_MODULE_0__.SpotLight( color );\n\t\t\t\tlightNode.distance = range;\n\t\t\t\t// Handle spotlight properties.\n\t\t\t\tlightDef.spot = lightDef.spot || {};\n\t\t\t\tlightDef.spot.innerConeAngle = lightDef.spot.innerConeAngle !== undefined ? lightDef.spot.innerConeAngle : 0;\n\t\t\t\tlightDef.spot.outerConeAngle = lightDef.spot.outerConeAngle !== undefined ? lightDef.spot.outerConeAngle : Math.PI / 4.0;\n\t\t\t\tlightNode.angle = lightDef.spot.outerConeAngle;\n\t\t\t\tlightNode.penumbra = 1.0 - lightDef.spot.innerConeAngle / lightDef.spot.outerConeAngle;\n\t\t\t\tlightNode.target.position.set( 0, 0, - 1 );\n\t\t\t\tlightNode.add( lightNode.target );\n\t\t\t\tbreak;\n\n\t\t\tdefault:\n\t\t\t\tthrow new Error( 'THREE.GLTFLoader: Unexpected light type: ' + lightDef.type );\n\n\t\t}\n\n\t\t// Some lights (e.g. spot) default to a position other than the origin. Reset the position\n\t\t// here, because node-level parsing will only override position if explicitly specified.\n\t\tlightNode.position.set( 0, 0, 0 );\n\n\t\tlightNode.decay = 2;\n\n\t\tif ( lightDef.intensity !== undefined ) lightNode.intensity = lightDef.intensity;\n\n\t\tlightNode.name = parser.createUniqueName( lightDef.name || ( 'light_' + lightIndex ) );\n\n\t\tdependency = Promise.resolve( lightNode );\n\n\t\tparser.cache.add( cacheKey, dependency );\n\n\t\treturn dependency;\n\n\t}\n\n\tcreateNodeAttachment( nodeIndex ) {\n\n\t\tconst self = this;\n\t\tconst parser = this.parser;\n\t\tconst json = parser.json;\n\t\tconst nodeDef = json.nodes[ nodeIndex ];\n\t\tconst lightDef = ( nodeDef.extensions && nodeDef.extensions[ this.name ] ) || {};\n\t\tconst lightIndex = lightDef.light;\n\n\t\tif ( lightIndex === undefined ) return null;\n\n\t\treturn this._loadLight( lightIndex ).then( function ( light ) {\n\n\t\t\treturn parser._getNodeRef( self.cache, lightIndex, light );\n\n\t\t} );\n\n\t}\n\n}\n\n/**\n * Unlit Materials Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit\n */\nclass GLTFMaterialsUnlitExtension {\n\n\tconstructor() {\n\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_UNLIT;\n\n\t}\n\n\tgetMaterialType() {\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshBasicMaterial;\n\n\t}\n\n\textendParams( materialParams, materialDef, parser ) {\n\n\t\tconst pending = [];\n\n\t\tmaterialParams.color = new three__WEBPACK_IMPORTED_MODULE_0__.Color( 1.0, 1.0, 1.0 );\n\t\tmaterialParams.opacity = 1.0;\n\n\t\tconst metallicRoughness = materialDef.pbrMetallicRoughness;\n\n\t\tif ( metallicRoughness ) {\n\n\t\t\tif ( Array.isArray( metallicRoughness.baseColorFactor ) ) {\n\n\t\t\t\tconst array = metallicRoughness.baseColorFactor;\n\n\t\t\t\tmaterialParams.color.fromArray( array );\n\t\t\t\tmaterialParams.opacity = array[ 3 ];\n\n\t\t\t}\n\n\t\t\tif ( metallicRoughness.baseColorTexture !== undefined ) {\n\n\t\t\t\tpending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n}\n\n/**\n * Clearcoat Materials Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_clearcoat\n */\nclass GLTFMaterialsClearcoatExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_CLEARCOAT;\n\n\t}\n\n\tgetMaterialType( materialIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshPhysicalMaterial;\n\n\t}\n\n\textendMaterialParams( materialIndex, materialParams ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {\n\n\t\t\treturn Promise.resolve();\n\n\t\t}\n\n\t\tconst pending = [];\n\n\t\tconst extension = materialDef.extensions[ this.name ];\n\n\t\tif ( extension.clearcoatFactor !== undefined ) {\n\n\t\t\tmaterialParams.clearcoat = extension.clearcoatFactor;\n\n\t\t}\n\n\t\tif ( extension.clearcoatTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'clearcoatMap', extension.clearcoatTexture ) );\n\n\t\t}\n\n\t\tif ( extension.clearcoatRoughnessFactor !== undefined ) {\n\n\t\t\tmaterialParams.clearcoatRoughness = extension.clearcoatRoughnessFactor;\n\n\t\t}\n\n\t\tif ( extension.clearcoatRoughnessTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'clearcoatRoughnessMap', extension.clearcoatRoughnessTexture ) );\n\n\t\t}\n\n\t\tif ( extension.clearcoatNormalTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'clearcoatNormalMap', extension.clearcoatNormalTexture ) );\n\n\t\t\tif ( extension.clearcoatNormalTexture.scale !== undefined ) {\n\n\t\t\t\tconst scale = extension.clearcoatNormalTexture.scale;\n\n\t\t\t\tmaterialParams.clearcoatNormalScale = new three__WEBPACK_IMPORTED_MODULE_0__.Vector2( scale, scale );\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n}\n\n/**\n * Sheen Materials Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_sheen\n */\nclass GLTFMaterialsSheenExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_SHEEN;\n\n\t}\n\n\tgetMaterialType( materialIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshPhysicalMaterial;\n\n\t}\n\n\textendMaterialParams( materialIndex, materialParams ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {\n\n\t\t\treturn Promise.resolve();\n\n\t\t}\n\n\t\tconst pending = [];\n\n\t\tmaterialParams.sheenColor = new three__WEBPACK_IMPORTED_MODULE_0__.Color( 0, 0, 0 );\n\t\tmaterialParams.sheenRoughness = 0;\n\t\tmaterialParams.sheen = 1;\n\n\t\tconst extension = materialDef.extensions[ this.name ];\n\n\t\tif ( extension.sheenColorFactor !== undefined ) {\n\n\t\t\tmaterialParams.sheenColor.fromArray( extension.sheenColorFactor );\n\n\t\t}\n\n\t\tif ( extension.sheenRoughnessFactor !== undefined ) {\n\n\t\t\tmaterialParams.sheenRoughness = extension.sheenRoughnessFactor;\n\n\t\t}\n\n\t\tif ( extension.sheenColorTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'sheenColorMap', extension.sheenColorTexture ) );\n\n\t\t}\n\n\t\tif ( extension.sheenRoughnessTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'sheenRoughnessMap', extension.sheenRoughnessTexture ) );\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n}\n\n/**\n * Transmission Materials Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission\n * Draft: https://github.com/KhronosGroup/glTF/pull/1698\n */\nclass GLTFMaterialsTransmissionExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_TRANSMISSION;\n\n\t}\n\n\tgetMaterialType( materialIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshPhysicalMaterial;\n\n\t}\n\n\textendMaterialParams( materialIndex, materialParams ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {\n\n\t\t\treturn Promise.resolve();\n\n\t\t}\n\n\t\tconst pending = [];\n\n\t\tconst extension = materialDef.extensions[ this.name ];\n\n\t\tif ( extension.transmissionFactor !== undefined ) {\n\n\t\t\tmaterialParams.transmission = extension.transmissionFactor;\n\n\t\t}\n\n\t\tif ( extension.transmissionTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'transmissionMap', extension.transmissionTexture ) );\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n}\n\n/**\n * Materials Volume Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_volume\n */\nclass GLTFMaterialsVolumeExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_VOLUME;\n\n\t}\n\n\tgetMaterialType( materialIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshPhysicalMaterial;\n\n\t}\n\n\textendMaterialParams( materialIndex, materialParams ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {\n\n\t\t\treturn Promise.resolve();\n\n\t\t}\n\n\t\tconst pending = [];\n\n\t\tconst extension = materialDef.extensions[ this.name ];\n\n\t\tmaterialParams.thickness = extension.thicknessFactor !== undefined ? extension.thicknessFactor : 0;\n\n\t\tif ( extension.thicknessTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'thicknessMap', extension.thicknessTexture ) );\n\n\t\t}\n\n\t\tmaterialParams.attenuationDistance = extension.attenuationDistance || 0;\n\n\t\tconst colorArray = extension.attenuationColor || [ 1, 1, 1 ];\n\t\tmaterialParams.attenuationColor = new three__WEBPACK_IMPORTED_MODULE_0__.Color( colorArray[ 0 ], colorArray[ 1 ], colorArray[ 2 ] );\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n}\n\n/**\n * Materials ior Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_ior\n */\nclass GLTFMaterialsIorExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_IOR;\n\n\t}\n\n\tgetMaterialType( materialIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshPhysicalMaterial;\n\n\t}\n\n\textendMaterialParams( materialIndex, materialParams ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {\n\n\t\t\treturn Promise.resolve();\n\n\t\t}\n\n\t\tconst extension = materialDef.extensions[ this.name ];\n\n\t\tmaterialParams.ior = extension.ior !== undefined ? extension.ior : 1.5;\n\n\t\treturn Promise.resolve();\n\n\t}\n\n}\n\n/**\n * Materials specular Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_specular\n */\nclass GLTFMaterialsSpecularExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_SPECULAR;\n\n\t}\n\n\tgetMaterialType( materialIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshPhysicalMaterial;\n\n\t}\n\n\textendMaterialParams( materialIndex, materialParams ) {\n\n\t\tconst parser = this.parser;\n\t\tconst materialDef = parser.json.materials[ materialIndex ];\n\n\t\tif ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {\n\n\t\t\treturn Promise.resolve();\n\n\t\t}\n\n\t\tconst pending = [];\n\n\t\tconst extension = materialDef.extensions[ this.name ];\n\n\t\tmaterialParams.specularIntensity = extension.specularFactor !== undefined ? extension.specularFactor : 1.0;\n\n\t\tif ( extension.specularTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'specularIntensityMap', extension.specularTexture ) );\n\n\t\t}\n\n\t\tconst colorArray = extension.specularColorFactor || [ 1, 1, 1 ];\n\t\tmaterialParams.specularColor = new three__WEBPACK_IMPORTED_MODULE_0__.Color( colorArray[ 0 ], colorArray[ 1 ], colorArray[ 2 ] );\n\n\t\tif ( extension.specularColorTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'specularColorMap', extension.specularColorTexture ).then( function ( texture ) {\n\n\t\t\t\ttexture.encoding = three__WEBPACK_IMPORTED_MODULE_0__.sRGBEncoding;\n\n\t\t\t} ) );\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n}\n\n/**\n * BasisU Texture Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_basisu\n */\nclass GLTFTextureBasisUExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.KHR_TEXTURE_BASISU;\n\n\t}\n\n\tloadTexture( textureIndex ) {\n\n\t\tconst parser = this.parser;\n\t\tconst json = parser.json;\n\n\t\tconst textureDef = json.textures[ textureIndex ];\n\n\t\tif ( ! textureDef.extensions || ! textureDef.extensions[ this.name ] ) {\n\n\t\t\treturn null;\n\n\t\t}\n\n\t\tconst extension = textureDef.extensions[ this.name ];\n\t\tconst source = json.images[ extension.source ];\n\t\tconst loader = parser.options.ktx2Loader;\n\n\t\tif ( ! loader ) {\n\n\t\t\tif ( json.extensionsRequired && json.extensionsRequired.indexOf( this.name ) >= 0 ) {\n\n\t\t\t\tthrow new Error( 'THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2 textures' );\n\n\t\t\t} else {\n\n\t\t\t\t// Assumes that the extension is optional and that a fallback texture is present\n\t\t\t\treturn null;\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn parser.loadTextureImage( textureIndex, source, loader );\n\n\t}\n\n}\n\n/**\n * WebP Texture Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_texture_webp\n */\nclass GLTFTextureWebPExtension {\n\n\tconstructor( parser ) {\n\n\t\tthis.parser = parser;\n\t\tthis.name = EXTENSIONS.EXT_TEXTURE_WEBP;\n\t\tthis.isSupported = null;\n\n\t}\n\n\tloadTexture( textureIndex ) {\n\n\t\tconst name = this.name;\n\t\tconst parser = this.parser;\n\t\tconst json = parser.json;\n\n\t\tconst textureDef = json.textures[ textureIndex ];\n\n\t\tif ( ! textureDef.extensions || ! textureDef.extensions[ name ] ) {\n\n\t\t\treturn null;\n\n\t\t}\n\n\t\tconst extension = textureDef.extensions[ name ];\n\t\tconst source = json.images[ extension.source ];\n\n\t\tlet loader = parser.textureLoader;\n\t\tif ( source.uri ) {\n\n\t\t\tconst handler = parser.options.manager.getHandler( source.uri );\n\t\t\tif ( handler !== null ) loader = handler;\n\n\t\t}\n\n\t\treturn this.detectSupport().then( function ( isSupported ) {\n\n\t\t\tif ( isSupported ) return parser.loadTextureImage( textureIndex, source, loader );\n\n\t\t\tif ( json.extensionsRequired && json.extensionsRequired.indexOf( name ) >= 0 ) {\n\n\t\t\t\tthrow new Error( 'THREE.GLTFLoader: WebP required by asset but unsupported.' );\n\n\t\t\t}\n\n\t\t\t// Fall back to PNG or JPEG.\n\t\t\treturn parser.loadTexture( textureIndex );\n\n\t\t} );\n\n\t}\n\n\tdetectSupport() {\n\n\t\tif ( ! this.isSupported ) {\n\n\t\t\tthis.isSupported = new Promise( function ( resolve ) {\n\n\t\t\t\tconst image = new Image();\n\n\t\t\t\t// Lossy test image. Support for lossy images doesn't guarantee support for all\n\t\t\t\t// WebP images, unfortunately.\n\t\t\t\timage.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';\n\n\t\t\t\timage.onload = image.onerror = function () {\n\n\t\t\t\t\tresolve( image.height === 1 );\n\n\t\t\t\t};\n\n\t\t\t} );\n\n\t\t}\n\n\t\treturn this.isSupported;\n\n\t}\n\n}\n\n/**\n * meshopt BufferView Compression Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_meshopt_compression\n */\nclass GLTFMeshoptCompression {\n\n\tconstructor( parser ) {\n\n\t\tthis.name = EXTENSIONS.EXT_MESHOPT_COMPRESSION;\n\t\tthis.parser = parser;\n\n\t}\n\n\tloadBufferView( index ) {\n\n\t\tconst json = this.parser.json;\n\t\tconst bufferView = json.bufferViews[ index ];\n\n\t\tif ( bufferView.extensions && bufferView.extensions[ this.name ] ) {\n\n\t\t\tconst extensionDef = bufferView.extensions[ this.name ];\n\n\t\t\tconst buffer = this.parser.getDependency( 'buffer', extensionDef.buffer );\n\t\t\tconst decoder = this.parser.options.meshoptDecoder;\n\n\t\t\tif ( ! decoder || ! decoder.supported ) {\n\n\t\t\t\tif ( json.extensionsRequired && json.extensionsRequired.indexOf( this.name ) >= 0 ) {\n\n\t\t\t\t\tthrow new Error( 'THREE.GLTFLoader: setMeshoptDecoder must be called before loading compressed files' );\n\n\t\t\t\t} else {\n\n\t\t\t\t\t// Assumes that the extension is optional and that fallback buffer data is present\n\t\t\t\t\treturn null;\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\treturn Promise.all( [ buffer, decoder.ready ] ).then( function ( res ) {\n\n\t\t\t\tconst byteOffset = extensionDef.byteOffset || 0;\n\t\t\t\tconst byteLength = extensionDef.byteLength || 0;\n\n\t\t\t\tconst count = extensionDef.count;\n\t\t\t\tconst stride = extensionDef.byteStride;\n\n\t\t\t\tconst result = new ArrayBuffer( count * stride );\n\t\t\t\tconst source = new Uint8Array( res[ 0 ], byteOffset, byteLength );\n\n\t\t\t\tdecoder.decodeGltfBuffer( new Uint8Array( result ), count, stride, source, extensionDef.mode, extensionDef.filter );\n\t\t\t\treturn result;\n\n\t\t\t} );\n\n\t\t} else {\n\n\t\t\treturn null;\n\n\t\t}\n\n\t}\n\n}\n\n/* BINARY EXTENSION */\nconst BINARY_EXTENSION_HEADER_MAGIC = 'glTF';\nconst BINARY_EXTENSION_HEADER_LENGTH = 12;\nconst BINARY_EXTENSION_CHUNK_TYPES = { JSON: 0x4E4F534A, BIN: 0x004E4942 };\n\nclass GLTFBinaryExtension {\n\n\tconstructor( data ) {\n\n\t\tthis.name = EXTENSIONS.KHR_BINARY_GLTF;\n\t\tthis.content = null;\n\t\tthis.body = null;\n\n\t\tconst headerView = new DataView( data, 0, BINARY_EXTENSION_HEADER_LENGTH );\n\n\t\tthis.header = {\n\t\t\tmagic: three__WEBPACK_IMPORTED_MODULE_0__.LoaderUtils.decodeText( new Uint8Array( data.slice( 0, 4 ) ) ),\n\t\t\tversion: headerView.getUint32( 4, true ),\n\t\t\tlength: headerView.getUint32( 8, true )\n\t\t};\n\n\t\tif ( this.header.magic !== BINARY_EXTENSION_HEADER_MAGIC ) {\n\n\t\t\tthrow new Error( 'THREE.GLTFLoader: Unsupported glTF-Binary header.' );\n\n\t\t} else if ( this.header.version < 2.0 ) {\n\n\t\t\tthrow new Error( 'THREE.GLTFLoader: Legacy binary file detected.' );\n\n\t\t}\n\n\t\tconst chunkContentsLength = this.header.length - BINARY_EXTENSION_HEADER_LENGTH;\n\t\tconst chunkView = new DataView( data, BINARY_EXTENSION_HEADER_LENGTH );\n\t\tlet chunkIndex = 0;\n\n\t\twhile ( chunkIndex < chunkContentsLength ) {\n\n\t\t\tconst chunkLength = chunkView.getUint32( chunkIndex, true );\n\t\t\tchunkIndex += 4;\n\n\t\t\tconst chunkType = chunkView.getUint32( chunkIndex, true );\n\t\t\tchunkIndex += 4;\n\n\t\t\tif ( chunkType === BINARY_EXTENSION_CHUNK_TYPES.JSON ) {\n\n\t\t\t\tconst contentArray = new Uint8Array( data, BINARY_EXTENSION_HEADER_LENGTH + chunkIndex, chunkLength );\n\t\t\t\tthis.content = three__WEBPACK_IMPORTED_MODULE_0__.LoaderUtils.decodeText( contentArray );\n\n\t\t\t} else if ( chunkType === BINARY_EXTENSION_CHUNK_TYPES.BIN ) {\n\n\t\t\t\tconst byteOffset = BINARY_EXTENSION_HEADER_LENGTH + chunkIndex;\n\t\t\t\tthis.body = data.slice( byteOffset, byteOffset + chunkLength );\n\n\t\t\t}\n\n\t\t\t// Clients must ignore chunks with unknown types.\n\n\t\t\tchunkIndex += chunkLength;\n\n\t\t}\n\n\t\tif ( this.content === null ) {\n\n\t\t\tthrow new Error( 'THREE.GLTFLoader: JSON content not found.' );\n\n\t\t}\n\n\t}\n\n}\n\n/**\n * DRACO Mesh Compression Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression\n */\nclass GLTFDracoMeshCompressionExtension {\n\n\tconstructor( json, dracoLoader ) {\n\n\t\tif ( ! dracoLoader ) {\n\n\t\t\tthrow new Error( 'THREE.GLTFLoader: No DRACOLoader instance provided.' );\n\n\t\t}\n\n\t\tthis.name = EXTENSIONS.KHR_DRACO_MESH_COMPRESSION;\n\t\tthis.json = json;\n\t\tthis.dracoLoader = dracoLoader;\n\t\tthis.dracoLoader.preload();\n\n\t}\n\n\tdecodePrimitive( primitive, parser ) {\n\n\t\tconst json = this.json;\n\t\tconst dracoLoader = this.dracoLoader;\n\t\tconst bufferViewIndex = primitive.extensions[ this.name ].bufferView;\n\t\tconst gltfAttributeMap = primitive.extensions[ this.name ].attributes;\n\t\tconst threeAttributeMap = {};\n\t\tconst attributeNormalizedMap = {};\n\t\tconst attributeTypeMap = {};\n\n\t\tfor ( const attributeName in gltfAttributeMap ) {\n\n\t\t\tconst threeAttributeName = ATTRIBUTES[ attributeName ] || attributeName.toLowerCase();\n\n\t\t\tthreeAttributeMap[ threeAttributeName ] = gltfAttributeMap[ attributeName ];\n\n\t\t}\n\n\t\tfor ( const attributeName in primitive.attributes ) {\n\n\t\t\tconst threeAttributeName = ATTRIBUTES[ attributeName ] || attributeName.toLowerCase();\n\n\t\t\tif ( gltfAttributeMap[ attributeName ] !== undefined ) {\n\n\t\t\t\tconst accessorDef = json.accessors[ primitive.attributes[ attributeName ] ];\n\t\t\t\tconst componentType = WEBGL_COMPONENT_TYPES[ accessorDef.componentType ];\n\n\t\t\t\tattributeTypeMap[ threeAttributeName ] = componentType;\n\t\t\t\tattributeNormalizedMap[ threeAttributeName ] = accessorDef.normalized === true;\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn parser.getDependency( 'bufferView', bufferViewIndex ).then( function ( bufferView ) {\n\n\t\t\treturn new Promise( function ( resolve ) {\n\n\t\t\t\tdracoLoader.decodeDracoFile( bufferView, function ( geometry ) {\n\n\t\t\t\t\tfor ( const attributeName in geometry.attributes ) {\n\n\t\t\t\t\t\tconst attribute = geometry.attributes[ attributeName ];\n\t\t\t\t\t\tconst normalized = attributeNormalizedMap[ attributeName ];\n\n\t\t\t\t\t\tif ( normalized !== undefined ) attribute.normalized = normalized;\n\n\t\t\t\t\t}\n\n\t\t\t\t\tresolve( geometry );\n\n\t\t\t\t}, threeAttributeMap, attributeTypeMap );\n\n\t\t\t} );\n\n\t\t} );\n\n\t}\n\n}\n\n/**\n * Texture Transform Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_transform\n */\nclass GLTFTextureTransformExtension {\n\n\tconstructor() {\n\n\t\tthis.name = EXTENSIONS.KHR_TEXTURE_TRANSFORM;\n\n\t}\n\n\textendTexture( texture, transform ) {\n\n\t\tif ( transform.texCoord !== undefined ) {\n\n\t\t\tconsole.warn( 'THREE.GLTFLoader: Custom UV sets in \"' + this.name + '\" extension not yet supported.' );\n\n\t\t}\n\n\t\tif ( transform.offset === undefined && transform.rotation === undefined && transform.scale === undefined ) {\n\n\t\t\t// See https://github.com/mrdoob/three.js/issues/21819.\n\t\t\treturn texture;\n\n\t\t}\n\n\t\ttexture = texture.clone();\n\n\t\tif ( transform.offset !== undefined ) {\n\n\t\t\ttexture.offset.fromArray( transform.offset );\n\n\t\t}\n\n\t\tif ( transform.rotation !== undefined ) {\n\n\t\t\ttexture.rotation = transform.rotation;\n\n\t\t}\n\n\t\tif ( transform.scale !== undefined ) {\n\n\t\t\ttexture.repeat.fromArray( transform.scale );\n\n\t\t}\n\n\t\ttexture.needsUpdate = true;\n\n\t\treturn texture;\n\n\t}\n\n}\n\n/**\n * Specular-Glossiness Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Archived/KHR_materials_pbrSpecularGlossiness\n */\n\n/**\n * A sub class of StandardMaterial with some of the functionality\n * changed via the `onBeforeCompile` callback\n * @pailhead\n */\nclass GLTFMeshStandardSGMaterial extends three__WEBPACK_IMPORTED_MODULE_0__.MeshStandardMaterial {\n\n\tconstructor( params ) {\n\n\t\tsuper();\n\n\t\tthis.isGLTFSpecularGlossinessMaterial = true;\n\n\t\t//various chunks that need replacing\n\t\tconst specularMapParsFragmentChunk = [\n\t\t\t'#ifdef USE_SPECULARMAP',\n\t\t\t'\tuniform sampler2D specularMap;',\n\t\t\t'#endif'\n\t\t].join( '\\n' );\n\n\t\tconst glossinessMapParsFragmentChunk = [\n\t\t\t'#ifdef USE_GLOSSINESSMAP',\n\t\t\t'\tuniform sampler2D glossinessMap;',\n\t\t\t'#endif'\n\t\t].join( '\\n' );\n\n\t\tconst specularMapFragmentChunk = [\n\t\t\t'vec3 specularFactor = specular;',\n\t\t\t'#ifdef USE_SPECULARMAP',\n\t\t\t'\tvec4 texelSpecular = texture2D( specularMap, vUv );',\n\t\t\t'\t// reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture',\n\t\t\t'\tspecularFactor *= texelSpecular.rgb;',\n\t\t\t'#endif'\n\t\t].join( '\\n' );\n\n\t\tconst glossinessMapFragmentChunk = [\n\t\t\t'float glossinessFactor = glossiness;',\n\t\t\t'#ifdef USE_GLOSSINESSMAP',\n\t\t\t'\tvec4 texelGlossiness = texture2D( glossinessMap, vUv );',\n\t\t\t'\t// reads channel A, compatible with a glTF Specular-Glossiness (RGBA) texture',\n\t\t\t'\tglossinessFactor *= texelGlossiness.a;',\n\t\t\t'#endif'\n\t\t].join( '\\n' );\n\n\t\tconst lightPhysicalFragmentChunk = [\n\t\t\t'PhysicalMaterial material;',\n\t\t\t'material.diffuseColor = diffuseColor.rgb * ( 1. - max( specularFactor.r, max( specularFactor.g, specularFactor.b ) ) );',\n\t\t\t'vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );',\n\t\t\t'float geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z );',\n\t\t\t'material.roughness = max( 1.0 - glossinessFactor, 0.0525 ); // 0.0525 corresponds to the base mip of a 256 cubemap.',\n\t\t\t'material.roughness += geometryRoughness;',\n\t\t\t'material.roughness = min( material.roughness, 1.0 );',\n\t\t\t'material.specularColor = specularFactor;',\n\t\t].join( '\\n' );\n\n\t\tconst uniforms = {\n\t\t\tspecular: { value: new three__WEBPACK_IMPORTED_MODULE_0__.Color().setHex( 0xffffff ) },\n\t\t\tglossiness: { value: 1 },\n\t\t\tspecularMap: { value: null },\n\t\t\tglossinessMap: { value: null }\n\t\t};\n\n\t\tthis._extraUniforms = uniforms;\n\n\t\tthis.onBeforeCompile = function ( shader ) {\n\n\t\t\tfor ( const uniformName in uniforms ) {\n\n\t\t\t\tshader.uniforms[ uniformName ] = uniforms[ uniformName ];\n\n\t\t\t}\n\n\t\t\tshader.fragmentShader = shader.fragmentShader\n\t\t\t\t.replace( 'uniform float roughness;', 'uniform vec3 specular;' )\n\t\t\t\t.replace( 'uniform float metalness;', 'uniform float glossiness;' )\n\t\t\t\t.replace( '#include ', specularMapParsFragmentChunk )\n\t\t\t\t.replace( '#include ', glossinessMapParsFragmentChunk )\n\t\t\t\t.replace( '#include ', specularMapFragmentChunk )\n\t\t\t\t.replace( '#include ', glossinessMapFragmentChunk )\n\t\t\t\t.replace( '#include ', lightPhysicalFragmentChunk );\n\n\t\t};\n\n\t\tObject.defineProperties( this, {\n\n\t\t\tspecular: {\n\t\t\t\tget: function () {\n\n\t\t\t\t\treturn uniforms.specular.value;\n\n\t\t\t\t},\n\t\t\t\tset: function ( v ) {\n\n\t\t\t\t\tuniforms.specular.value = v;\n\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tspecularMap: {\n\t\t\t\tget: function () {\n\n\t\t\t\t\treturn uniforms.specularMap.value;\n\n\t\t\t\t},\n\t\t\t\tset: function ( v ) {\n\n\t\t\t\t\tuniforms.specularMap.value = v;\n\n\t\t\t\t\tif ( v ) {\n\n\t\t\t\t\t\tthis.defines.USE_SPECULARMAP = ''; // USE_UV is set by the renderer for specular maps\n\n\t\t\t\t\t} else {\n\n\t\t\t\t\t\tdelete this.defines.USE_SPECULARMAP;\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tglossiness: {\n\t\t\t\tget: function () {\n\n\t\t\t\t\treturn uniforms.glossiness.value;\n\n\t\t\t\t},\n\t\t\t\tset: function ( v ) {\n\n\t\t\t\t\tuniforms.glossiness.value = v;\n\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tglossinessMap: {\n\t\t\t\tget: function () {\n\n\t\t\t\t\treturn uniforms.glossinessMap.value;\n\n\t\t\t\t},\n\t\t\t\tset: function ( v ) {\n\n\t\t\t\t\tuniforms.glossinessMap.value = v;\n\n\t\t\t\t\tif ( v ) {\n\n\t\t\t\t\t\tthis.defines.USE_GLOSSINESSMAP = '';\n\t\t\t\t\t\tthis.defines.USE_UV = '';\n\n\t\t\t\t\t} else {\n\n\t\t\t\t\t\tdelete this.defines.USE_GLOSSINESSMAP;\n\t\t\t\t\t\tdelete this.defines.USE_UV;\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\t\t\t}\n\n\t\t} );\n\n\t\tdelete this.metalness;\n\t\tdelete this.roughness;\n\t\tdelete this.metalnessMap;\n\t\tdelete this.roughnessMap;\n\n\t\tthis.setValues( params );\n\n\t}\n\n\tcopy( source ) {\n\n\t\tsuper.copy( source );\n\n\t\tthis.specularMap = source.specularMap;\n\t\tthis.specular.copy( source.specular );\n\t\tthis.glossinessMap = source.glossinessMap;\n\t\tthis.glossiness = source.glossiness;\n\t\tdelete this.metalness;\n\t\tdelete this.roughness;\n\t\tdelete this.metalnessMap;\n\t\tdelete this.roughnessMap;\n\t\treturn this;\n\n\t}\n\n}\n\n\nclass GLTFMaterialsPbrSpecularGlossinessExtension {\n\n\tconstructor() {\n\n\t\tthis.name = EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS;\n\n\t\tthis.specularGlossinessParams = [\n\t\t\t'color',\n\t\t\t'map',\n\t\t\t'lightMap',\n\t\t\t'lightMapIntensity',\n\t\t\t'aoMap',\n\t\t\t'aoMapIntensity',\n\t\t\t'emissive',\n\t\t\t'emissiveIntensity',\n\t\t\t'emissiveMap',\n\t\t\t'bumpMap',\n\t\t\t'bumpScale',\n\t\t\t'normalMap',\n\t\t\t'normalMapType',\n\t\t\t'displacementMap',\n\t\t\t'displacementScale',\n\t\t\t'displacementBias',\n\t\t\t'specularMap',\n\t\t\t'specular',\n\t\t\t'glossinessMap',\n\t\t\t'glossiness',\n\t\t\t'alphaMap',\n\t\t\t'envMap',\n\t\t\t'envMapIntensity',\n\t\t\t'refractionRatio',\n\t\t];\n\n\t}\n\n\tgetMaterialType() {\n\n\t\treturn GLTFMeshStandardSGMaterial;\n\n\t}\n\n\textendParams( materialParams, materialDef, parser ) {\n\n\t\tconst pbrSpecularGlossiness = materialDef.extensions[ this.name ];\n\n\t\tmaterialParams.color = new three__WEBPACK_IMPORTED_MODULE_0__.Color( 1.0, 1.0, 1.0 );\n\t\tmaterialParams.opacity = 1.0;\n\n\t\tconst pending = [];\n\n\t\tif ( Array.isArray( pbrSpecularGlossiness.diffuseFactor ) ) {\n\n\t\t\tconst array = pbrSpecularGlossiness.diffuseFactor;\n\n\t\t\tmaterialParams.color.fromArray( array );\n\t\t\tmaterialParams.opacity = array[ 3 ];\n\n\t\t}\n\n\t\tif ( pbrSpecularGlossiness.diffuseTexture !== undefined ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'map', pbrSpecularGlossiness.diffuseTexture ) );\n\n\t\t}\n\n\t\tmaterialParams.emissive = new three__WEBPACK_IMPORTED_MODULE_0__.Color( 0.0, 0.0, 0.0 );\n\t\tmaterialParams.glossiness = pbrSpecularGlossiness.glossinessFactor !== undefined ? pbrSpecularGlossiness.glossinessFactor : 1.0;\n\t\tmaterialParams.specular = new three__WEBPACK_IMPORTED_MODULE_0__.Color( 1.0, 1.0, 1.0 );\n\n\t\tif ( Array.isArray( pbrSpecularGlossiness.specularFactor ) ) {\n\n\t\t\tmaterialParams.specular.fromArray( pbrSpecularGlossiness.specularFactor );\n\n\t\t}\n\n\t\tif ( pbrSpecularGlossiness.specularGlossinessTexture !== undefined ) {\n\n\t\t\tconst specGlossMapDef = pbrSpecularGlossiness.specularGlossinessTexture;\n\t\t\tpending.push( parser.assignTexture( materialParams, 'glossinessMap', specGlossMapDef ) );\n\t\t\tpending.push( parser.assignTexture( materialParams, 'specularMap', specGlossMapDef ) );\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n\tcreateMaterial( materialParams ) {\n\n\t\tconst material = new GLTFMeshStandardSGMaterial( materialParams );\n\t\tmaterial.fog = true;\n\n\t\tmaterial.color = materialParams.color;\n\n\t\tmaterial.map = materialParams.map === undefined ? null : materialParams.map;\n\n\t\tmaterial.lightMap = null;\n\t\tmaterial.lightMapIntensity = 1.0;\n\n\t\tmaterial.aoMap = materialParams.aoMap === undefined ? null : materialParams.aoMap;\n\t\tmaterial.aoMapIntensity = 1.0;\n\n\t\tmaterial.emissive = materialParams.emissive;\n\t\tmaterial.emissiveIntensity = 1.0;\n\t\tmaterial.emissiveMap = materialParams.emissiveMap === undefined ? null : materialParams.emissiveMap;\n\n\t\tmaterial.bumpMap = materialParams.bumpMap === undefined ? null : materialParams.bumpMap;\n\t\tmaterial.bumpScale = 1;\n\n\t\tmaterial.normalMap = materialParams.normalMap === undefined ? null : materialParams.normalMap;\n\t\tmaterial.normalMapType = three__WEBPACK_IMPORTED_MODULE_0__.TangentSpaceNormalMap;\n\n\t\tif ( materialParams.normalScale ) material.normalScale = materialParams.normalScale;\n\n\t\tmaterial.displacementMap = null;\n\t\tmaterial.displacementScale = 1;\n\t\tmaterial.displacementBias = 0;\n\n\t\tmaterial.specularMap = materialParams.specularMap === undefined ? null : materialParams.specularMap;\n\t\tmaterial.specular = materialParams.specular;\n\n\t\tmaterial.glossinessMap = materialParams.glossinessMap === undefined ? null : materialParams.glossinessMap;\n\t\tmaterial.glossiness = materialParams.glossiness;\n\n\t\tmaterial.alphaMap = null;\n\n\t\tmaterial.envMap = materialParams.envMap === undefined ? null : materialParams.envMap;\n\t\tmaterial.envMapIntensity = 1.0;\n\n\t\tmaterial.refractionRatio = 0.98;\n\n\t\treturn material;\n\n\t}\n\n}\n\n/**\n * Mesh Quantization Extension\n *\n * Specification: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization\n */\nclass GLTFMeshQuantizationExtension {\n\n\tconstructor() {\n\n\t\tthis.name = EXTENSIONS.KHR_MESH_QUANTIZATION;\n\n\t}\n\n}\n\n/*********************************/\n/********** INTERPOLATION ********/\n/*********************************/\n\n// Spline Interpolation\n// Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#appendix-c-spline-interpolation\nclass GLTFCubicSplineInterpolant extends three__WEBPACK_IMPORTED_MODULE_0__.Interpolant {\n\n\tconstructor( parameterPositions, sampleValues, sampleSize, resultBuffer ) {\n\n\t\tsuper( parameterPositions, sampleValues, sampleSize, resultBuffer );\n\n\t}\n\n\tcopySampleValue_( index ) {\n\n\t\t// Copies a sample value to the result buffer. See description of glTF\n\t\t// CUBICSPLINE values layout in interpolate_() function below.\n\n\t\tconst result = this.resultBuffer,\n\t\t\tvalues = this.sampleValues,\n\t\t\tvalueSize = this.valueSize,\n\t\t\toffset = index * valueSize * 3 + valueSize;\n\n\t\tfor ( let i = 0; i !== valueSize; i ++ ) {\n\n\t\t\tresult[ i ] = values[ offset + i ];\n\n\t\t}\n\n\t\treturn result;\n\n\t}\n\n}\n\nGLTFCubicSplineInterpolant.prototype.beforeStart_ = GLTFCubicSplineInterpolant.prototype.copySampleValue_;\n\nGLTFCubicSplineInterpolant.prototype.afterEnd_ = GLTFCubicSplineInterpolant.prototype.copySampleValue_;\n\nGLTFCubicSplineInterpolant.prototype.interpolate_ = function ( i1, t0, t, t1 ) {\n\n\tconst result = this.resultBuffer;\n\tconst values = this.sampleValues;\n\tconst stride = this.valueSize;\n\n\tconst stride2 = stride * 2;\n\tconst stride3 = stride * 3;\n\n\tconst td = t1 - t0;\n\n\tconst p = ( t - t0 ) / td;\n\tconst pp = p * p;\n\tconst ppp = pp * p;\n\n\tconst offset1 = i1 * stride3;\n\tconst offset0 = offset1 - stride3;\n\n\tconst s2 = - 2 * ppp + 3 * pp;\n\tconst s3 = ppp - pp;\n\tconst s0 = 1 - s2;\n\tconst s1 = s3 - pp + p;\n\n\t// Layout of keyframe output values for CUBICSPLINE animations:\n\t// [ inTangent_1, splineVertex_1, outTangent_1, inTangent_2, splineVertex_2, ... ]\n\tfor ( let i = 0; i !== stride; i ++ ) {\n\n\t\tconst p0 = values[ offset0 + i + stride ]; // splineVertex_k\n\t\tconst m0 = values[ offset0 + i + stride2 ] * td; // outTangent_k * (t_k+1 - t_k)\n\t\tconst p1 = values[ offset1 + i + stride ]; // splineVertex_k+1\n\t\tconst m1 = values[ offset1 + i ] * td; // inTangent_k+1 * (t_k+1 - t_k)\n\n\t\tresult[ i ] = s0 * p0 + s1 * m0 + s2 * p1 + s3 * m1;\n\n\t}\n\n\treturn result;\n\n};\n\nconst _q = new three__WEBPACK_IMPORTED_MODULE_0__.Quaternion();\n\nclass GLTFCubicSplineQuaternionInterpolant extends GLTFCubicSplineInterpolant {\n\n\tinterpolate_( i1, t0, t, t1 ) {\n\n\t\tconst result = super.interpolate_( i1, t0, t, t1 );\n\n\t\t_q.fromArray( result ).normalize().toArray( result );\n\n\t\treturn result;\n\n\t}\n\n}\n\n\n/*********************************/\n/********** INTERNALS ************/\n/*********************************/\n\n/* CONSTANTS */\n\nconst WEBGL_CONSTANTS = {\n\tFLOAT: 5126,\n\t//FLOAT_MAT2: 35674,\n\tFLOAT_MAT3: 35675,\n\tFLOAT_MAT4: 35676,\n\tFLOAT_VEC2: 35664,\n\tFLOAT_VEC3: 35665,\n\tFLOAT_VEC4: 35666,\n\tLINEAR: 9729,\n\tREPEAT: 10497,\n\tSAMPLER_2D: 35678,\n\tPOINTS: 0,\n\tLINES: 1,\n\tLINE_LOOP: 2,\n\tLINE_STRIP: 3,\n\tTRIANGLES: 4,\n\tTRIANGLE_STRIP: 5,\n\tTRIANGLE_FAN: 6,\n\tUNSIGNED_BYTE: 5121,\n\tUNSIGNED_SHORT: 5123\n};\n\nconst WEBGL_COMPONENT_TYPES = {\n\t5120: Int8Array,\n\t5121: Uint8Array,\n\t5122: Int16Array,\n\t5123: Uint16Array,\n\t5125: Uint32Array,\n\t5126: Float32Array\n};\n\nconst WEBGL_FILTERS = {\n\t9728: three__WEBPACK_IMPORTED_MODULE_0__.NearestFilter,\n\t9729: three__WEBPACK_IMPORTED_MODULE_0__.LinearFilter,\n\t9984: three__WEBPACK_IMPORTED_MODULE_0__.NearestMipmapNearestFilter,\n\t9985: three__WEBPACK_IMPORTED_MODULE_0__.LinearMipmapNearestFilter,\n\t9986: three__WEBPACK_IMPORTED_MODULE_0__.NearestMipmapLinearFilter,\n\t9987: three__WEBPACK_IMPORTED_MODULE_0__.LinearMipmapLinearFilter\n};\n\nconst WEBGL_WRAPPINGS = {\n\t33071: three__WEBPACK_IMPORTED_MODULE_0__.ClampToEdgeWrapping,\n\t33648: three__WEBPACK_IMPORTED_MODULE_0__.MirroredRepeatWrapping,\n\t10497: three__WEBPACK_IMPORTED_MODULE_0__.RepeatWrapping\n};\n\nconst WEBGL_TYPE_SIZES = {\n\t'SCALAR': 1,\n\t'VEC2': 2,\n\t'VEC3': 3,\n\t'VEC4': 4,\n\t'MAT2': 4,\n\t'MAT3': 9,\n\t'MAT4': 16\n};\n\nconst ATTRIBUTES = {\n\tPOSITION: 'position',\n\tNORMAL: 'normal',\n\tTANGENT: 'tangent',\n\tTEXCOORD_0: 'uv',\n\tTEXCOORD_1: 'uv2',\n\tCOLOR_0: 'color',\n\tWEIGHTS_0: 'skinWeight',\n\tJOINTS_0: 'skinIndex',\n};\n\nconst PATH_PROPERTIES = {\n\tscale: 'scale',\n\ttranslation: 'position',\n\trotation: 'quaternion',\n\tweights: 'morphTargetInfluences'\n};\n\nconst INTERPOLATION = {\n\tCUBICSPLINE: undefined, // We use a custom interpolant (GLTFCubicSplineInterpolation) for CUBICSPLINE tracks. Each\n\t\t // keyframe track will be initialized with a default interpolation type, then modified.\n\tLINEAR: three__WEBPACK_IMPORTED_MODULE_0__.InterpolateLinear,\n\tSTEP: three__WEBPACK_IMPORTED_MODULE_0__.InterpolateDiscrete\n};\n\nconst ALPHA_MODES = {\n\tOPAQUE: 'OPAQUE',\n\tMASK: 'MASK',\n\tBLEND: 'BLEND'\n};\n\n/**\n * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#default-material\n */\nfunction createDefaultMaterial( cache ) {\n\n\tif ( cache[ 'DefaultMaterial' ] === undefined ) {\n\n\t\tcache[ 'DefaultMaterial' ] = new three__WEBPACK_IMPORTED_MODULE_0__.MeshStandardMaterial( {\n\t\t\tcolor: 0xFFFFFF,\n\t\t\temissive: 0x000000,\n\t\t\tmetalness: 1,\n\t\t\troughness: 1,\n\t\t\ttransparent: false,\n\t\t\tdepthTest: true,\n\t\t\tside: three__WEBPACK_IMPORTED_MODULE_0__.FrontSide\n\t\t} );\n\n\t}\n\n\treturn cache[ 'DefaultMaterial' ];\n\n}\n\nfunction addUnknownExtensionsToUserData( knownExtensions, object, objectDef ) {\n\n\t// Add unknown glTF extensions to an object's userData.\n\n\tfor ( const name in objectDef.extensions ) {\n\n\t\tif ( knownExtensions[ name ] === undefined ) {\n\n\t\t\tobject.userData.gltfExtensions = object.userData.gltfExtensions || {};\n\t\t\tobject.userData.gltfExtensions[ name ] = objectDef.extensions[ name ];\n\n\t\t}\n\n\t}\n\n}\n\n/**\n * @param {Object3D|Material|BufferGeometry} object\n * @param {GLTF.definition} gltfDef\n */\nfunction assignExtrasToUserData( object, gltfDef ) {\n\n\tif ( gltfDef.extras !== undefined ) {\n\n\t\tif ( typeof gltfDef.extras === 'object' ) {\n\n\t\t\tObject.assign( object.userData, gltfDef.extras );\n\n\t\t} else {\n\n\t\t\tconsole.warn( 'THREE.GLTFLoader: Ignoring primitive type .extras, ' + gltfDef.extras );\n\n\t\t}\n\n\t}\n\n}\n\n/**\n * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#morph-targets\n *\n * @param {BufferGeometry} geometry\n * @param {Array} targets\n * @param {GLTFParser} parser\n * @return {Promise}\n */\nfunction addMorphTargets( geometry, targets, parser ) {\n\n\tlet hasMorphPosition = false;\n\tlet hasMorphNormal = false;\n\n\tfor ( let i = 0, il = targets.length; i < il; i ++ ) {\n\n\t\tconst target = targets[ i ];\n\n\t\tif ( target.POSITION !== undefined ) hasMorphPosition = true;\n\t\tif ( target.NORMAL !== undefined ) hasMorphNormal = true;\n\n\t\tif ( hasMorphPosition && hasMorphNormal ) break;\n\n\t}\n\n\tif ( ! hasMorphPosition && ! hasMorphNormal ) return Promise.resolve( geometry );\n\n\tconst pendingPositionAccessors = [];\n\tconst pendingNormalAccessors = [];\n\n\tfor ( let i = 0, il = targets.length; i < il; i ++ ) {\n\n\t\tconst target = targets[ i ];\n\n\t\tif ( hasMorphPosition ) {\n\n\t\t\tconst pendingAccessor = target.POSITION !== undefined\n\t\t\t\t? parser.getDependency( 'accessor', target.POSITION )\n\t\t\t\t: geometry.attributes.position;\n\n\t\t\tpendingPositionAccessors.push( pendingAccessor );\n\n\t\t}\n\n\t\tif ( hasMorphNormal ) {\n\n\t\t\tconst pendingAccessor = target.NORMAL !== undefined\n\t\t\t\t? parser.getDependency( 'accessor', target.NORMAL )\n\t\t\t\t: geometry.attributes.normal;\n\n\t\t\tpendingNormalAccessors.push( pendingAccessor );\n\n\t\t}\n\n\t}\n\n\treturn Promise.all( [\n\t\tPromise.all( pendingPositionAccessors ),\n\t\tPromise.all( pendingNormalAccessors )\n\t] ).then( function ( accessors ) {\n\n\t\tconst morphPositions = accessors[ 0 ];\n\t\tconst morphNormals = accessors[ 1 ];\n\n\t\tif ( hasMorphPosition ) geometry.morphAttributes.position = morphPositions;\n\t\tif ( hasMorphNormal ) geometry.morphAttributes.normal = morphNormals;\n\t\tgeometry.morphTargetsRelative = true;\n\n\t\treturn geometry;\n\n\t} );\n\n}\n\n/**\n * @param {Mesh} mesh\n * @param {GLTF.Mesh} meshDef\n */\nfunction updateMorphTargets( mesh, meshDef ) {\n\n\tmesh.updateMorphTargets();\n\n\tif ( meshDef.weights !== undefined ) {\n\n\t\tfor ( let i = 0, il = meshDef.weights.length; i < il; i ++ ) {\n\n\t\t\tmesh.morphTargetInfluences[ i ] = meshDef.weights[ i ];\n\n\t\t}\n\n\t}\n\n\t// .extras has user-defined data, so check that .extras.targetNames is an array.\n\tif ( meshDef.extras && Array.isArray( meshDef.extras.targetNames ) ) {\n\n\t\tconst targetNames = meshDef.extras.targetNames;\n\n\t\tif ( mesh.morphTargetInfluences.length === targetNames.length ) {\n\n\t\t\tmesh.morphTargetDictionary = {};\n\n\t\t\tfor ( let i = 0, il = targetNames.length; i < il; i ++ ) {\n\n\t\t\t\tmesh.morphTargetDictionary[ targetNames[ i ] ] = i;\n\n\t\t\t}\n\n\t\t} else {\n\n\t\t\tconsole.warn( 'THREE.GLTFLoader: Invalid extras.targetNames length. Ignoring names.' );\n\n\t\t}\n\n\t}\n\n}\n\nfunction createPrimitiveKey( primitiveDef ) {\n\n\tconst dracoExtension = primitiveDef.extensions && primitiveDef.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ];\n\tlet geometryKey;\n\n\tif ( dracoExtension ) {\n\n\t\tgeometryKey = 'draco:' + dracoExtension.bufferView\n\t\t\t\t+ ':' + dracoExtension.indices\n\t\t\t\t+ ':' + createAttributesKey( dracoExtension.attributes );\n\n\t} else {\n\n\t\tgeometryKey = primitiveDef.indices + ':' + createAttributesKey( primitiveDef.attributes ) + ':' + primitiveDef.mode;\n\n\t}\n\n\treturn geometryKey;\n\n}\n\nfunction createAttributesKey( attributes ) {\n\n\tlet attributesKey = '';\n\n\tconst keys = Object.keys( attributes ).sort();\n\n\tfor ( let i = 0, il = keys.length; i < il; i ++ ) {\n\n\t\tattributesKey += keys[ i ] + ':' + attributes[ keys[ i ] ] + ';';\n\n\t}\n\n\treturn attributesKey;\n\n}\n\nfunction getNormalizedComponentScale( constructor ) {\n\n\t// Reference:\n\t// https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_mesh_quantization#encoding-quantized-data\n\n\tswitch ( constructor ) {\n\n\t\tcase Int8Array:\n\t\t\treturn 1 / 127;\n\n\t\tcase Uint8Array:\n\t\t\treturn 1 / 255;\n\n\t\tcase Int16Array:\n\t\t\treturn 1 / 32767;\n\n\t\tcase Uint16Array:\n\t\t\treturn 1 / 65535;\n\n\t\tdefault:\n\t\t\tthrow new Error( 'THREE.GLTFLoader: Unsupported normalized accessor component type.' );\n\n\t}\n\n}\n\n/* GLTF PARSER */\n\nclass GLTFParser {\n\n\tconstructor( json = {}, options = {} ) {\n\n\t\tthis.json = json;\n\t\tthis.extensions = {};\n\t\tthis.plugins = {};\n\t\tthis.options = options;\n\n\t\t// loader object cache\n\t\tthis.cache = new GLTFRegistry();\n\n\t\t// associations between Three.js objects and glTF elements\n\t\tthis.associations = new Map();\n\n\t\t// BufferGeometry caching\n\t\tthis.primitiveCache = {};\n\n\t\t// Object3D instance caches\n\t\tthis.meshCache = { refs: {}, uses: {} };\n\t\tthis.cameraCache = { refs: {}, uses: {} };\n\t\tthis.lightCache = { refs: {}, uses: {} };\n\n\t\tthis.textureCache = {};\n\n\t\t// Track node names, to ensure no duplicates\n\t\tthis.nodeNamesUsed = {};\n\n\t\t// Use an ImageBitmapLoader if imageBitmaps are supported. Moves much of the\n\t\t// expensive work of uploading a texture to the GPU off the main thread.\n\t\tif ( typeof createImageBitmap !== 'undefined' && /Firefox|^((?!chrome|android).)*safari/i.test( navigator.userAgent ) === false ) {\n\n\t\t\tthis.textureLoader = new three__WEBPACK_IMPORTED_MODULE_0__.ImageBitmapLoader( this.options.manager );\n\n\t\t} else {\n\n\t\t\tthis.textureLoader = new three__WEBPACK_IMPORTED_MODULE_0__.TextureLoader( this.options.manager );\n\n\t\t}\n\n\t\tthis.textureLoader.setCrossOrigin( this.options.crossOrigin );\n\t\tthis.textureLoader.setRequestHeader( this.options.requestHeader );\n\n\t\tthis.fileLoader = new three__WEBPACK_IMPORTED_MODULE_0__.FileLoader( this.options.manager );\n\t\tthis.fileLoader.setResponseType( 'arraybuffer' );\n\n\t\tif ( this.options.crossOrigin === 'use-credentials' ) {\n\n\t\t\tthis.fileLoader.setWithCredentials( true );\n\n\t\t}\n\n\t}\n\n\tsetExtensions( extensions ) {\n\n\t\tthis.extensions = extensions;\n\n\t}\n\n\tsetPlugins( plugins ) {\n\n\t\tthis.plugins = plugins;\n\n\t}\n\n\tparse( onLoad, onError ) {\n\n\t\tconst parser = this;\n\t\tconst json = this.json;\n\t\tconst extensions = this.extensions;\n\n\t\t// Clear the loader cache\n\t\tthis.cache.removeAll();\n\n\t\t// Mark the special nodes/meshes in json for efficient parse\n\t\tthis._invokeAll( function ( ext ) {\n\n\t\t\treturn ext._markDefs && ext._markDefs();\n\n\t\t} );\n\n\t\tPromise.all( this._invokeAll( function ( ext ) {\n\n\t\t\treturn ext.beforeRoot && ext.beforeRoot();\n\n\t\t} ) ).then( function () {\n\n\t\t\treturn Promise.all( [\n\n\t\t\t\tparser.getDependencies( 'scene' ),\n\t\t\t\tparser.getDependencies( 'animation' ),\n\t\t\t\tparser.getDependencies( 'camera' ),\n\n\t\t\t] );\n\n\t\t} ).then( function ( dependencies ) {\n\n\t\t\tconst result = {\n\t\t\t\tscene: dependencies[ 0 ][ json.scene || 0 ],\n\t\t\t\tscenes: dependencies[ 0 ],\n\t\t\t\tanimations: dependencies[ 1 ],\n\t\t\t\tcameras: dependencies[ 2 ],\n\t\t\t\tasset: json.asset,\n\t\t\t\tparser: parser,\n\t\t\t\tuserData: {}\n\t\t\t};\n\n\t\t\taddUnknownExtensionsToUserData( extensions, result, json );\n\n\t\t\tassignExtrasToUserData( result, json );\n\n\t\t\tPromise.all( parser._invokeAll( function ( ext ) {\n\n\t\t\t\treturn ext.afterRoot && ext.afterRoot( result );\n\n\t\t\t} ) ).then( function () {\n\n\t\t\t\tonLoad( result );\n\n\t\t\t} );\n\n\t\t} ).catch( onError );\n\n\t}\n\n\t/**\n\t * Marks the special nodes/meshes in json for efficient parse.\n\t */\n\t_markDefs() {\n\n\t\tconst nodeDefs = this.json.nodes || [];\n\t\tconst skinDefs = this.json.skins || [];\n\t\tconst meshDefs = this.json.meshes || [];\n\n\t\t// Nothing in the node definition indicates whether it is a Bone or an\n\t\t// Object3D. Use the skins' joint references to mark bones.\n\t\tfor ( let skinIndex = 0, skinLength = skinDefs.length; skinIndex < skinLength; skinIndex ++ ) {\n\n\t\t\tconst joints = skinDefs[ skinIndex ].joints;\n\n\t\t\tfor ( let i = 0, il = joints.length; i < il; i ++ ) {\n\n\t\t\t\tnodeDefs[ joints[ i ] ].isBone = true;\n\n\t\t\t}\n\n\t\t}\n\n\t\t// Iterate over all nodes, marking references to shared resources,\n\t\t// as well as skeleton joints.\n\t\tfor ( let nodeIndex = 0, nodeLength = nodeDefs.length; nodeIndex < nodeLength; nodeIndex ++ ) {\n\n\t\t\tconst nodeDef = nodeDefs[ nodeIndex ];\n\n\t\t\tif ( nodeDef.mesh !== undefined ) {\n\n\t\t\t\tthis._addNodeRef( this.meshCache, nodeDef.mesh );\n\n\t\t\t\t// Nothing in the mesh definition indicates whether it is\n\t\t\t\t// a SkinnedMesh or Mesh. Use the node's mesh reference\n\t\t\t\t// to mark SkinnedMesh if node has skin.\n\t\t\t\tif ( nodeDef.skin !== undefined ) {\n\n\t\t\t\t\tmeshDefs[ nodeDef.mesh ].isSkinnedMesh = true;\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tif ( nodeDef.camera !== undefined ) {\n\n\t\t\t\tthis._addNodeRef( this.cameraCache, nodeDef.camera );\n\n\t\t\t}\n\n\t\t}\n\n\t}\n\n\t/**\n\t * Counts references to shared node / Object3D resources. These resources\n\t * can be reused, or \"instantiated\", at multiple nodes in the scene\n\t * hierarchy. Mesh, Camera, and Light instances are instantiated and must\n\t * be marked. Non-scenegraph resources (like Materials, Geometries, and\n\t * Textures) can be reused directly and are not marked here.\n\t *\n\t * Example: CesiumMilkTruck sample model reuses \"Wheel\" meshes.\n\t */\n\t_addNodeRef( cache, index ) {\n\n\t\tif ( index === undefined ) return;\n\n\t\tif ( cache.refs[ index ] === undefined ) {\n\n\t\t\tcache.refs[ index ] = cache.uses[ index ] = 0;\n\n\t\t}\n\n\t\tcache.refs[ index ] ++;\n\n\t}\n\n\t/** Returns a reference to a shared resource, cloning it if necessary. */\n\t_getNodeRef( cache, index, object ) {\n\n\t\tif ( cache.refs[ index ] <= 1 ) return object;\n\n\t\tconst ref = object.clone();\n\n\t\t// Propagates mappings to the cloned object, prevents mappings on the\n\t\t// original object from being lost.\n\t\tconst updateMappings = ( original, clone ) => {\n\n\t\t\tconst mappings = this.associations.get( original );\n\t\t\tif ( mappings != null ) {\n\n\t\t\t\tthis.associations.set( clone, mappings );\n\n\t\t\t}\n\n\t\t\tfor ( const [ i, child ] of original.children.entries() ) {\n\n\t\t\t\tupdateMappings( child, clone.children[ i ] );\n\n\t\t\t}\n\n\t\t};\n\n\t\tupdateMappings( object, ref );\n\n\t\tref.name += '_instance_' + ( cache.uses[ index ] ++ );\n\n\t\treturn ref;\n\n\t}\n\n\t_invokeOne( func ) {\n\n\t\tconst extensions = Object.values( this.plugins );\n\t\textensions.push( this );\n\n\t\tfor ( let i = 0; i < extensions.length; i ++ ) {\n\n\t\t\tconst result = func( extensions[ i ] );\n\n\t\t\tif ( result ) return result;\n\n\t\t}\n\n\t\treturn null;\n\n\t}\n\n\t_invokeAll( func ) {\n\n\t\tconst extensions = Object.values( this.plugins );\n\t\textensions.unshift( this );\n\n\t\tconst pending = [];\n\n\t\tfor ( let i = 0; i < extensions.length; i ++ ) {\n\n\t\t\tconst result = func( extensions[ i ] );\n\n\t\t\tif ( result ) pending.push( result );\n\n\t\t}\n\n\t\treturn pending;\n\n\t}\n\n\t/**\n\t * Requests the specified dependency asynchronously, with caching.\n\t * @param {string} type\n\t * @param {number} index\n\t * @return {Promise}\n\t */\n\tgetDependency( type, index ) {\n\n\t\tconst cacheKey = type + ':' + index;\n\t\tlet dependency = this.cache.get( cacheKey );\n\n\t\tif ( ! dependency ) {\n\n\t\t\tswitch ( type ) {\n\n\t\t\t\tcase 'scene':\n\t\t\t\t\tdependency = this.loadScene( index );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'node':\n\t\t\t\t\tdependency = this.loadNode( index );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'mesh':\n\t\t\t\t\tdependency = this._invokeOne( function ( ext ) {\n\n\t\t\t\t\t\treturn ext.loadMesh && ext.loadMesh( index );\n\n\t\t\t\t\t} );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'accessor':\n\t\t\t\t\tdependency = this.loadAccessor( index );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'bufferView':\n\t\t\t\t\tdependency = this._invokeOne( function ( ext ) {\n\n\t\t\t\t\t\treturn ext.loadBufferView && ext.loadBufferView( index );\n\n\t\t\t\t\t} );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'buffer':\n\t\t\t\t\tdependency = this.loadBuffer( index );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'material':\n\t\t\t\t\tdependency = this._invokeOne( function ( ext ) {\n\n\t\t\t\t\t\treturn ext.loadMaterial && ext.loadMaterial( index );\n\n\t\t\t\t\t} );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'texture':\n\t\t\t\t\tdependency = this._invokeOne( function ( ext ) {\n\n\t\t\t\t\t\treturn ext.loadTexture && ext.loadTexture( index );\n\n\t\t\t\t\t} );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'skin':\n\t\t\t\t\tdependency = this.loadSkin( index );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'animation':\n\t\t\t\t\tdependency = this.loadAnimation( index );\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'camera':\n\t\t\t\t\tdependency = this.loadCamera( index );\n\t\t\t\t\tbreak;\n\n\t\t\t\tdefault:\n\t\t\t\t\tthrow new Error( 'Unknown type: ' + type );\n\n\t\t\t}\n\n\t\t\tthis.cache.add( cacheKey, dependency );\n\n\t\t}\n\n\t\treturn dependency;\n\n\t}\n\n\t/**\n\t * Requests all dependencies of the specified type asynchronously, with caching.\n\t * @param {string} type\n\t * @return {Promise>}\n\t */\n\tgetDependencies( type ) {\n\n\t\tlet dependencies = this.cache.get( type );\n\n\t\tif ( ! dependencies ) {\n\n\t\t\tconst parser = this;\n\t\t\tconst defs = this.json[ type + ( type === 'mesh' ? 'es' : 's' ) ] || [];\n\n\t\t\tdependencies = Promise.all( defs.map( function ( def, index ) {\n\n\t\t\t\treturn parser.getDependency( type, index );\n\n\t\t\t} ) );\n\n\t\t\tthis.cache.add( type, dependencies );\n\n\t\t}\n\n\t\treturn dependencies;\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#buffers-and-buffer-views\n\t * @param {number} bufferIndex\n\t * @return {Promise}\n\t */\n\tloadBuffer( bufferIndex ) {\n\n\t\tconst bufferDef = this.json.buffers[ bufferIndex ];\n\t\tconst loader = this.fileLoader;\n\n\t\tif ( bufferDef.type && bufferDef.type !== 'arraybuffer' ) {\n\n\t\t\tthrow new Error( 'THREE.GLTFLoader: ' + bufferDef.type + ' buffer type is not supported.' );\n\n\t\t}\n\n\t\t// If present, GLB container is required to be the first buffer.\n\t\tif ( bufferDef.uri === undefined && bufferIndex === 0 ) {\n\n\t\t\treturn Promise.resolve( this.extensions[ EXTENSIONS.KHR_BINARY_GLTF ].body );\n\n\t\t}\n\n\t\tconst options = this.options;\n\n\t\treturn new Promise( function ( resolve, reject ) {\n\n\t\t\tloader.load( three__WEBPACK_IMPORTED_MODULE_0__.LoaderUtils.resolveURL( bufferDef.uri, options.path ), resolve, undefined, function () {\n\n\t\t\t\treject( new Error( 'THREE.GLTFLoader: Failed to load buffer \"' + bufferDef.uri + '\".' ) );\n\n\t\t\t} );\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#buffers-and-buffer-views\n\t * @param {number} bufferViewIndex\n\t * @return {Promise}\n\t */\n\tloadBufferView( bufferViewIndex ) {\n\n\t\tconst bufferViewDef = this.json.bufferViews[ bufferViewIndex ];\n\n\t\treturn this.getDependency( 'buffer', bufferViewDef.buffer ).then( function ( buffer ) {\n\n\t\t\tconst byteLength = bufferViewDef.byteLength || 0;\n\t\t\tconst byteOffset = bufferViewDef.byteOffset || 0;\n\t\t\treturn buffer.slice( byteOffset, byteOffset + byteLength );\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#accessors\n\t * @param {number} accessorIndex\n\t * @return {Promise}\n\t */\n\tloadAccessor( accessorIndex ) {\n\n\t\tconst parser = this;\n\t\tconst json = this.json;\n\n\t\tconst accessorDef = this.json.accessors[ accessorIndex ];\n\n\t\tif ( accessorDef.bufferView === undefined && accessorDef.sparse === undefined ) {\n\n\t\t\t// Ignore empty accessors, which may be used to declare runtime\n\t\t\t// information about attributes coming from another source (e.g. Draco\n\t\t\t// compression extension).\n\t\t\treturn Promise.resolve( null );\n\n\t\t}\n\n\t\tconst pendingBufferViews = [];\n\n\t\tif ( accessorDef.bufferView !== undefined ) {\n\n\t\t\tpendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.bufferView ) );\n\n\t\t} else {\n\n\t\t\tpendingBufferViews.push( null );\n\n\t\t}\n\n\t\tif ( accessorDef.sparse !== undefined ) {\n\n\t\t\tpendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.sparse.indices.bufferView ) );\n\t\t\tpendingBufferViews.push( this.getDependency( 'bufferView', accessorDef.sparse.values.bufferView ) );\n\n\t\t}\n\n\t\treturn Promise.all( pendingBufferViews ).then( function ( bufferViews ) {\n\n\t\t\tconst bufferView = bufferViews[ 0 ];\n\n\t\t\tconst itemSize = WEBGL_TYPE_SIZES[ accessorDef.type ];\n\t\t\tconst TypedArray = WEBGL_COMPONENT_TYPES[ accessorDef.componentType ];\n\n\t\t\t// For VEC3: itemSize is 3, elementBytes is 4, itemBytes is 12.\n\t\t\tconst elementBytes = TypedArray.BYTES_PER_ELEMENT;\n\t\t\tconst itemBytes = elementBytes * itemSize;\n\t\t\tconst byteOffset = accessorDef.byteOffset || 0;\n\t\t\tconst byteStride = accessorDef.bufferView !== undefined ? json.bufferViews[ accessorDef.bufferView ].byteStride : undefined;\n\t\t\tconst normalized = accessorDef.normalized === true;\n\t\t\tlet array, bufferAttribute;\n\n\t\t\t// The buffer is not interleaved if the stride is the item size in bytes.\n\t\t\tif ( byteStride && byteStride !== itemBytes ) {\n\n\t\t\t\t// Each \"slice\" of the buffer, as defined by 'count' elements of 'byteStride' bytes, gets its own InterleavedBuffer\n\t\t\t\t// This makes sure that IBA.count reflects accessor.count properly\n\t\t\t\tconst ibSlice = Math.floor( byteOffset / byteStride );\n\t\t\t\tconst ibCacheKey = 'InterleavedBuffer:' + accessorDef.bufferView + ':' + accessorDef.componentType + ':' + ibSlice + ':' + accessorDef.count;\n\t\t\t\tlet ib = parser.cache.get( ibCacheKey );\n\n\t\t\t\tif ( ! ib ) {\n\n\t\t\t\t\tarray = new TypedArray( bufferView, ibSlice * byteStride, accessorDef.count * byteStride / elementBytes );\n\n\t\t\t\t\t// Integer parameters to IB/IBA are in array elements, not bytes.\n\t\t\t\t\tib = new three__WEBPACK_IMPORTED_MODULE_0__.InterleavedBuffer( array, byteStride / elementBytes );\n\n\t\t\t\t\tparser.cache.add( ibCacheKey, ib );\n\n\t\t\t\t}\n\n\t\t\t\tbufferAttribute = new three__WEBPACK_IMPORTED_MODULE_0__.InterleavedBufferAttribute( ib, itemSize, ( byteOffset % byteStride ) / elementBytes, normalized );\n\n\t\t\t} else {\n\n\t\t\t\tif ( bufferView === null ) {\n\n\t\t\t\t\tarray = new TypedArray( accessorDef.count * itemSize );\n\n\t\t\t\t} else {\n\n\t\t\t\t\tarray = new TypedArray( bufferView, byteOffset, accessorDef.count * itemSize );\n\n\t\t\t\t}\n\n\t\t\t\tbufferAttribute = new three__WEBPACK_IMPORTED_MODULE_0__.BufferAttribute( array, itemSize, normalized );\n\n\t\t\t}\n\n\t\t\t// https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#sparse-accessors\n\t\t\tif ( accessorDef.sparse !== undefined ) {\n\n\t\t\t\tconst itemSizeIndices = WEBGL_TYPE_SIZES.SCALAR;\n\t\t\t\tconst TypedArrayIndices = WEBGL_COMPONENT_TYPES[ accessorDef.sparse.indices.componentType ];\n\n\t\t\t\tconst byteOffsetIndices = accessorDef.sparse.indices.byteOffset || 0;\n\t\t\t\tconst byteOffsetValues = accessorDef.sparse.values.byteOffset || 0;\n\n\t\t\t\tconst sparseIndices = new TypedArrayIndices( bufferViews[ 1 ], byteOffsetIndices, accessorDef.sparse.count * itemSizeIndices );\n\t\t\t\tconst sparseValues = new TypedArray( bufferViews[ 2 ], byteOffsetValues, accessorDef.sparse.count * itemSize );\n\n\t\t\t\tif ( bufferView !== null ) {\n\n\t\t\t\t\t// Avoid modifying the original ArrayBuffer, if the bufferView wasn't initialized with zeroes.\n\t\t\t\t\tbufferAttribute = new three__WEBPACK_IMPORTED_MODULE_0__.BufferAttribute( bufferAttribute.array.slice(), bufferAttribute.itemSize, bufferAttribute.normalized );\n\n\t\t\t\t}\n\n\t\t\t\tfor ( let i = 0, il = sparseIndices.length; i < il; i ++ ) {\n\n\t\t\t\t\tconst index = sparseIndices[ i ];\n\n\t\t\t\t\tbufferAttribute.setX( index, sparseValues[ i * itemSize ] );\n\t\t\t\t\tif ( itemSize >= 2 ) bufferAttribute.setY( index, sparseValues[ i * itemSize + 1 ] );\n\t\t\t\t\tif ( itemSize >= 3 ) bufferAttribute.setZ( index, sparseValues[ i * itemSize + 2 ] );\n\t\t\t\t\tif ( itemSize >= 4 ) bufferAttribute.setW( index, sparseValues[ i * itemSize + 3 ] );\n\t\t\t\t\tif ( itemSize >= 5 ) throw new Error( 'THREE.GLTFLoader: Unsupported itemSize in sparse BufferAttribute.' );\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\treturn bufferAttribute;\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#textures\n\t * @param {number} textureIndex\n\t * @return {Promise}\n\t */\n\tloadTexture( textureIndex ) {\n\n\t\tconst json = this.json;\n\t\tconst options = this.options;\n\t\tconst textureDef = json.textures[ textureIndex ];\n\t\tconst source = json.images[ textureDef.source ];\n\n\t\tlet loader = this.textureLoader;\n\n\t\tif ( source.uri ) {\n\n\t\t\tconst handler = options.manager.getHandler( source.uri );\n\t\t\tif ( handler !== null ) loader = handler;\n\n\t\t}\n\n\t\treturn this.loadTextureImage( textureIndex, source, loader );\n\n\t}\n\n\tloadTextureImage( textureIndex, source, loader ) {\n\n\t\tconst parser = this;\n\t\tconst json = this.json;\n\t\tconst options = this.options;\n\n\t\tconst textureDef = json.textures[ textureIndex ];\n\n\t\tconst cacheKey = ( source.uri || source.bufferView ) + ':' + textureDef.sampler;\n\n\t\tif ( this.textureCache[ cacheKey ] ) {\n\n\t\t\t// See https://github.com/mrdoob/three.js/issues/21559.\n\t\t\treturn this.textureCache[ cacheKey ];\n\n\t\t}\n\n\t\tconst URL = self.URL || self.webkitURL;\n\n\t\tlet sourceURI = source.uri || '';\n\t\tlet isObjectURL = false;\n\n\t\tif ( source.bufferView !== undefined ) {\n\n\t\t\t// Load binary image data from bufferView, if provided.\n\n\t\t\tsourceURI = parser.getDependency( 'bufferView', source.bufferView ).then( function ( bufferView ) {\n\n\t\t\t\tisObjectURL = true;\n\t\t\t\tconst blob = new Blob( [ bufferView ], { type: source.mimeType } );\n\t\t\t\tsourceURI = URL.createObjectURL( blob );\n\t\t\t\treturn sourceURI;\n\n\t\t\t} );\n\n\t\t} else if ( source.uri === undefined ) {\n\n\t\t\tthrow new Error( 'THREE.GLTFLoader: Image ' + textureIndex + ' is missing URI and bufferView' );\n\n\t\t}\n\n\t\tconst promise = Promise.resolve( sourceURI ).then( function ( sourceURI ) {\n\n\t\t\treturn new Promise( function ( resolve, reject ) {\n\n\t\t\t\tlet onLoad = resolve;\n\n\t\t\t\tif ( loader.isImageBitmapLoader === true ) {\n\n\t\t\t\t\tonLoad = function ( imageBitmap ) {\n\n\t\t\t\t\t\tconst texture = new three__WEBPACK_IMPORTED_MODULE_0__.Texture( imageBitmap );\n\t\t\t\t\t\ttexture.needsUpdate = true;\n\n\t\t\t\t\t\tresolve( texture );\n\n\t\t\t\t\t};\n\n\t\t\t\t}\n\n\t\t\t\tloader.load( three__WEBPACK_IMPORTED_MODULE_0__.LoaderUtils.resolveURL( sourceURI, options.path ), onLoad, undefined, reject );\n\n\t\t\t} );\n\n\t\t} ).then( function ( texture ) {\n\n\t\t\t// Clean up resources and configure Texture.\n\n\t\t\tif ( isObjectURL === true ) {\n\n\t\t\t\tURL.revokeObjectURL( sourceURI );\n\n\t\t\t}\n\n\t\t\ttexture.flipY = false;\n\n\t\t\tif ( textureDef.name ) texture.name = textureDef.name;\n\n\t\t\tconst samplers = json.samplers || {};\n\t\t\tconst sampler = samplers[ textureDef.sampler ] || {};\n\n\t\t\ttexture.magFilter = WEBGL_FILTERS[ sampler.magFilter ] || three__WEBPACK_IMPORTED_MODULE_0__.LinearFilter;\n\t\t\ttexture.minFilter = WEBGL_FILTERS[ sampler.minFilter ] || three__WEBPACK_IMPORTED_MODULE_0__.LinearMipmapLinearFilter;\n\t\t\ttexture.wrapS = WEBGL_WRAPPINGS[ sampler.wrapS ] || three__WEBPACK_IMPORTED_MODULE_0__.RepeatWrapping;\n\t\t\ttexture.wrapT = WEBGL_WRAPPINGS[ sampler.wrapT ] || three__WEBPACK_IMPORTED_MODULE_0__.RepeatWrapping;\n\n\t\t\tparser.associations.set( texture, { textures: textureIndex } );\n\n\t\t\treturn texture;\n\n\t\t} ).catch( function () {\n\n\t\t\tconsole.error( 'THREE.GLTFLoader: Couldn\\'t load texture', sourceURI );\n\t\t\treturn null;\n\n\t\t} );\n\n\t\tthis.textureCache[ cacheKey ] = promise;\n\n\t\treturn promise;\n\n\t}\n\n\t/**\n\t * Asynchronously assigns a texture to the given material parameters.\n\t * @param {Object} materialParams\n\t * @param {string} mapName\n\t * @param {Object} mapDef\n\t * @return {Promise}\n\t */\n\tassignTexture( materialParams, mapName, mapDef ) {\n\n\t\tconst parser = this;\n\n\t\treturn this.getDependency( 'texture', mapDef.index ).then( function ( texture ) {\n\n\t\t\t// Materials sample aoMap from UV set 1 and other maps from UV set 0 - this can't be configured\n\t\t\t// However, we will copy UV set 0 to UV set 1 on demand for aoMap\n\t\t\tif ( mapDef.texCoord !== undefined && mapDef.texCoord != 0 && ! ( mapName === 'aoMap' && mapDef.texCoord == 1 ) ) {\n\n\t\t\t\tconsole.warn( 'THREE.GLTFLoader: Custom UV set ' + mapDef.texCoord + ' for texture ' + mapName + ' not yet supported.' );\n\n\t\t\t}\n\n\t\t\tif ( parser.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ] ) {\n\n\t\t\t\tconst transform = mapDef.extensions !== undefined ? mapDef.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ] : undefined;\n\n\t\t\t\tif ( transform ) {\n\n\t\t\t\t\tconst gltfReference = parser.associations.get( texture );\n\t\t\t\t\ttexture = parser.extensions[ EXTENSIONS.KHR_TEXTURE_TRANSFORM ].extendTexture( texture, transform );\n\t\t\t\t\tparser.associations.set( texture, gltfReference );\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tmaterialParams[ mapName ] = texture;\n\n\t\t\treturn texture;\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Assigns final material to a Mesh, Line, or Points instance. The instance\n\t * already has a material (generated from the glTF material options alone)\n\t * but reuse of the same glTF material may require multiple threejs materials\n\t * to accommodate different primitive types, defines, etc. New materials will\n\t * be created if necessary, and reused from a cache.\n\t * @param {Object3D} mesh Mesh, Line, or Points instance.\n\t */\n\tassignFinalMaterial( mesh ) {\n\n\t\tconst geometry = mesh.geometry;\n\t\tlet material = mesh.material;\n\n\t\tconst useDerivativeTangents = geometry.attributes.tangent === undefined;\n\t\tconst useVertexColors = geometry.attributes.color !== undefined;\n\t\tconst useFlatShading = geometry.attributes.normal === undefined;\n\n\t\tif ( mesh.isPoints ) {\n\n\t\t\tconst cacheKey = 'PointsMaterial:' + material.uuid;\n\n\t\t\tlet pointsMaterial = this.cache.get( cacheKey );\n\n\t\t\tif ( ! pointsMaterial ) {\n\n\t\t\t\tpointsMaterial = new three__WEBPACK_IMPORTED_MODULE_0__.PointsMaterial();\n\t\t\t\tthree__WEBPACK_IMPORTED_MODULE_0__.Material.prototype.copy.call( pointsMaterial, material );\n\t\t\t\tpointsMaterial.color.copy( material.color );\n\t\t\t\tpointsMaterial.map = material.map;\n\t\t\t\tpointsMaterial.sizeAttenuation = false; // glTF spec says points should be 1px\n\n\t\t\t\tthis.cache.add( cacheKey, pointsMaterial );\n\n\t\t\t}\n\n\t\t\tmaterial = pointsMaterial;\n\n\t\t} else if ( mesh.isLine ) {\n\n\t\t\tconst cacheKey = 'LineBasicMaterial:' + material.uuid;\n\n\t\t\tlet lineMaterial = this.cache.get( cacheKey );\n\n\t\t\tif ( ! lineMaterial ) {\n\n\t\t\t\tlineMaterial = new three__WEBPACK_IMPORTED_MODULE_0__.LineBasicMaterial();\n\t\t\t\tthree__WEBPACK_IMPORTED_MODULE_0__.Material.prototype.copy.call( lineMaterial, material );\n\t\t\t\tlineMaterial.color.copy( material.color );\n\n\t\t\t\tthis.cache.add( cacheKey, lineMaterial );\n\n\t\t\t}\n\n\t\t\tmaterial = lineMaterial;\n\n\t\t}\n\n\t\t// Clone the material if it will be modified\n\t\tif ( useDerivativeTangents || useVertexColors || useFlatShading ) {\n\n\t\t\tlet cacheKey = 'ClonedMaterial:' + material.uuid + ':';\n\n\t\t\tif ( material.isGLTFSpecularGlossinessMaterial ) cacheKey += 'specular-glossiness:';\n\t\t\tif ( useDerivativeTangents ) cacheKey += 'derivative-tangents:';\n\t\t\tif ( useVertexColors ) cacheKey += 'vertex-colors:';\n\t\t\tif ( useFlatShading ) cacheKey += 'flat-shading:';\n\n\t\t\tlet cachedMaterial = this.cache.get( cacheKey );\n\n\t\t\tif ( ! cachedMaterial ) {\n\n\t\t\t\tcachedMaterial = material.clone();\n\n\t\t\t\tif ( useVertexColors ) cachedMaterial.vertexColors = true;\n\t\t\t\tif ( useFlatShading ) cachedMaterial.flatShading = true;\n\n\t\t\t\tif ( useDerivativeTangents ) {\n\n\t\t\t\t\t// https://github.com/mrdoob/three.js/issues/11438#issuecomment-507003995\n\t\t\t\t\tif ( cachedMaterial.normalScale ) cachedMaterial.normalScale.y *= - 1;\n\t\t\t\t\tif ( cachedMaterial.clearcoatNormalScale ) cachedMaterial.clearcoatNormalScale.y *= - 1;\n\n\t\t\t\t}\n\n\t\t\t\tthis.cache.add( cacheKey, cachedMaterial );\n\n\t\t\t\tthis.associations.set( cachedMaterial, this.associations.get( material ) );\n\n\t\t\t}\n\n\t\t\tmaterial = cachedMaterial;\n\n\t\t}\n\n\t\t// workarounds for mesh and geometry\n\n\t\tif ( material.aoMap && geometry.attributes.uv2 === undefined && geometry.attributes.uv !== undefined ) {\n\n\t\t\tgeometry.setAttribute( 'uv2', geometry.attributes.uv );\n\n\t\t}\n\n\t\tmesh.material = material;\n\n\t}\n\n\tgetMaterialType( /* materialIndex */ ) {\n\n\t\treturn three__WEBPACK_IMPORTED_MODULE_0__.MeshStandardMaterial;\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#materials\n\t * @param {number} materialIndex\n\t * @return {Promise}\n\t */\n\tloadMaterial( materialIndex ) {\n\n\t\tconst parser = this;\n\t\tconst json = this.json;\n\t\tconst extensions = this.extensions;\n\t\tconst materialDef = json.materials[ materialIndex ];\n\n\t\tlet materialType;\n\t\tconst materialParams = {};\n\t\tconst materialExtensions = materialDef.extensions || {};\n\n\t\tconst pending = [];\n\n\t\tif ( materialExtensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ] ) {\n\n\t\t\tconst sgExtension = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ];\n\t\t\tmaterialType = sgExtension.getMaterialType();\n\t\t\tpending.push( sgExtension.extendParams( materialParams, materialDef, parser ) );\n\n\t\t} else if ( materialExtensions[ EXTENSIONS.KHR_MATERIALS_UNLIT ] ) {\n\n\t\t\tconst kmuExtension = extensions[ EXTENSIONS.KHR_MATERIALS_UNLIT ];\n\t\t\tmaterialType = kmuExtension.getMaterialType();\n\t\t\tpending.push( kmuExtension.extendParams( materialParams, materialDef, parser ) );\n\n\t\t} else {\n\n\t\t\t// Specification:\n\t\t\t// https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#metallic-roughness-material\n\n\t\t\tconst metallicRoughness = materialDef.pbrMetallicRoughness || {};\n\n\t\t\tmaterialParams.color = new three__WEBPACK_IMPORTED_MODULE_0__.Color( 1.0, 1.0, 1.0 );\n\t\t\tmaterialParams.opacity = 1.0;\n\n\t\t\tif ( Array.isArray( metallicRoughness.baseColorFactor ) ) {\n\n\t\t\t\tconst array = metallicRoughness.baseColorFactor;\n\n\t\t\t\tmaterialParams.color.fromArray( array );\n\t\t\t\tmaterialParams.opacity = array[ 3 ];\n\n\t\t\t}\n\n\t\t\tif ( metallicRoughness.baseColorTexture !== undefined ) {\n\n\t\t\t\tpending.push( parser.assignTexture( materialParams, 'map', metallicRoughness.baseColorTexture ) );\n\n\t\t\t}\n\n\t\t\tmaterialParams.metalness = metallicRoughness.metallicFactor !== undefined ? metallicRoughness.metallicFactor : 1.0;\n\t\t\tmaterialParams.roughness = metallicRoughness.roughnessFactor !== undefined ? metallicRoughness.roughnessFactor : 1.0;\n\n\t\t\tif ( metallicRoughness.metallicRoughnessTexture !== undefined ) {\n\n\t\t\t\tpending.push( parser.assignTexture( materialParams, 'metalnessMap', metallicRoughness.metallicRoughnessTexture ) );\n\t\t\t\tpending.push( parser.assignTexture( materialParams, 'roughnessMap', metallicRoughness.metallicRoughnessTexture ) );\n\n\t\t\t}\n\n\t\t\tmaterialType = this._invokeOne( function ( ext ) {\n\n\t\t\t\treturn ext.getMaterialType && ext.getMaterialType( materialIndex );\n\n\t\t\t} );\n\n\t\t\tpending.push( Promise.all( this._invokeAll( function ( ext ) {\n\n\t\t\t\treturn ext.extendMaterialParams && ext.extendMaterialParams( materialIndex, materialParams );\n\n\t\t\t} ) ) );\n\n\t\t}\n\n\t\tif ( materialDef.doubleSided === true ) {\n\n\t\t\tmaterialParams.side = three__WEBPACK_IMPORTED_MODULE_0__.DoubleSide;\n\n\t\t}\n\n\t\tconst alphaMode = materialDef.alphaMode || ALPHA_MODES.OPAQUE;\n\n\t\tif ( alphaMode === ALPHA_MODES.BLEND ) {\n\n\t\t\tmaterialParams.transparent = true;\n\n\t\t\t// See: https://github.com/mrdoob/three.js/issues/17706\n\t\t\tmaterialParams.depthWrite = false;\n\n\t\t} else {\n\n\t\t\tmaterialParams.transparent = false;\n\n\t\t\tif ( alphaMode === ALPHA_MODES.MASK ) {\n\n\t\t\t\tmaterialParams.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : 0.5;\n\n\t\t\t}\n\n\t\t}\n\n\t\tif ( materialDef.normalTexture !== undefined && materialType !== three__WEBPACK_IMPORTED_MODULE_0__.MeshBasicMaterial ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'normalMap', materialDef.normalTexture ) );\n\n\t\t\tmaterialParams.normalScale = new three__WEBPACK_IMPORTED_MODULE_0__.Vector2( 1, 1 );\n\n\t\t\tif ( materialDef.normalTexture.scale !== undefined ) {\n\n\t\t\t\tconst scale = materialDef.normalTexture.scale;\n\n\t\t\t\tmaterialParams.normalScale.set( scale, scale );\n\n\t\t\t}\n\n\t\t}\n\n\t\tif ( materialDef.occlusionTexture !== undefined && materialType !== three__WEBPACK_IMPORTED_MODULE_0__.MeshBasicMaterial ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'aoMap', materialDef.occlusionTexture ) );\n\n\t\t\tif ( materialDef.occlusionTexture.strength !== undefined ) {\n\n\t\t\t\tmaterialParams.aoMapIntensity = materialDef.occlusionTexture.strength;\n\n\t\t\t}\n\n\t\t}\n\n\t\tif ( materialDef.emissiveFactor !== undefined && materialType !== three__WEBPACK_IMPORTED_MODULE_0__.MeshBasicMaterial ) {\n\n\t\t\tmaterialParams.emissive = new three__WEBPACK_IMPORTED_MODULE_0__.Color().fromArray( materialDef.emissiveFactor );\n\n\t\t}\n\n\t\tif ( materialDef.emissiveTexture !== undefined && materialType !== three__WEBPACK_IMPORTED_MODULE_0__.MeshBasicMaterial ) {\n\n\t\t\tpending.push( parser.assignTexture( materialParams, 'emissiveMap', materialDef.emissiveTexture ) );\n\n\t\t}\n\n\t\treturn Promise.all( pending ).then( function () {\n\n\t\t\tlet material;\n\n\t\t\tif ( materialType === GLTFMeshStandardSGMaterial ) {\n\n\t\t\t\tmaterial = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ].createMaterial( materialParams );\n\n\t\t\t} else {\n\n\t\t\t\tmaterial = new materialType( materialParams );\n\n\t\t\t}\n\n\t\t\tif ( materialDef.name ) material.name = materialDef.name;\n\n\t\t\t// baseColorTexture, emissiveTexture, and specularGlossinessTexture use sRGB encoding.\n\t\t\tif ( material.map ) material.map.encoding = three__WEBPACK_IMPORTED_MODULE_0__.sRGBEncoding;\n\t\t\tif ( material.emissiveMap ) material.emissiveMap.encoding = three__WEBPACK_IMPORTED_MODULE_0__.sRGBEncoding;\n\n\t\t\tassignExtrasToUserData( material, materialDef );\n\n\t\t\tparser.associations.set( material, { materials: materialIndex } );\n\n\t\t\tif ( materialDef.extensions ) addUnknownExtensionsToUserData( extensions, material, materialDef );\n\n\t\t\treturn material;\n\n\t\t} );\n\n\t}\n\n\t/** When Object3D instances are targeted by animation, they need unique names. */\n\tcreateUniqueName( originalName ) {\n\n\t\tconst sanitizedName = three__WEBPACK_IMPORTED_MODULE_0__.PropertyBinding.sanitizeNodeName( originalName || '' );\n\n\t\tlet name = sanitizedName;\n\n\t\tfor ( let i = 1; this.nodeNamesUsed[ name ]; ++ i ) {\n\n\t\t\tname = sanitizedName + '_' + i;\n\n\t\t}\n\n\t\tthis.nodeNamesUsed[ name ] = true;\n\n\t\treturn name;\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#geometry\n\t *\n\t * Creates BufferGeometries from primitives.\n\t *\n\t * @param {Array} primitives\n\t * @return {Promise>}\n\t */\n\tloadGeometries( primitives ) {\n\n\t\tconst parser = this;\n\t\tconst extensions = this.extensions;\n\t\tconst cache = this.primitiveCache;\n\n\t\tfunction createDracoPrimitive( primitive ) {\n\n\t\t\treturn extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ]\n\t\t\t\t.decodePrimitive( primitive, parser )\n\t\t\t\t.then( function ( geometry ) {\n\n\t\t\t\t\treturn addPrimitiveAttributes( geometry, primitive, parser );\n\n\t\t\t\t} );\n\n\t\t}\n\n\t\tconst pending = [];\n\n\t\tfor ( let i = 0, il = primitives.length; i < il; i ++ ) {\n\n\t\t\tconst primitive = primitives[ i ];\n\t\t\tconst cacheKey = createPrimitiveKey( primitive );\n\n\t\t\t// See if we've already created this geometry\n\t\t\tconst cached = cache[ cacheKey ];\n\n\t\t\tif ( cached ) {\n\n\t\t\t\t// Use the cached geometry if it exists\n\t\t\t\tpending.push( cached.promise );\n\n\t\t\t} else {\n\n\t\t\t\tlet geometryPromise;\n\n\t\t\t\tif ( primitive.extensions && primitive.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ] ) {\n\n\t\t\t\t\t// Use DRACO geometry if available\n\t\t\t\t\tgeometryPromise = createDracoPrimitive( primitive );\n\n\t\t\t\t} else {\n\n\t\t\t\t\t// Otherwise create a new geometry\n\t\t\t\t\tgeometryPromise = addPrimitiveAttributes( new three__WEBPACK_IMPORTED_MODULE_0__.BufferGeometry(), primitive, parser );\n\n\t\t\t\t}\n\n\t\t\t\t// Cache this geometry\n\t\t\t\tcache[ cacheKey ] = { primitive: primitive, promise: geometryPromise };\n\n\t\t\t\tpending.push( geometryPromise );\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#meshes\n\t * @param {number} meshIndex\n\t * @return {Promise}\n\t */\n\tloadMesh( meshIndex ) {\n\n\t\tconst parser = this;\n\t\tconst json = this.json;\n\t\tconst extensions = this.extensions;\n\n\t\tconst meshDef = json.meshes[ meshIndex ];\n\t\tconst primitives = meshDef.primitives;\n\n\t\tconst pending = [];\n\n\t\tfor ( let i = 0, il = primitives.length; i < il; i ++ ) {\n\n\t\t\tconst material = primitives[ i ].material === undefined\n\t\t\t\t? createDefaultMaterial( this.cache )\n\t\t\t\t: this.getDependency( 'material', primitives[ i ].material );\n\n\t\t\tpending.push( material );\n\n\t\t}\n\n\t\tpending.push( parser.loadGeometries( primitives ) );\n\n\t\treturn Promise.all( pending ).then( function ( results ) {\n\n\t\t\tconst materials = results.slice( 0, results.length - 1 );\n\t\t\tconst geometries = results[ results.length - 1 ];\n\n\t\t\tconst meshes = [];\n\n\t\t\tfor ( let i = 0, il = geometries.length; i < il; i ++ ) {\n\n\t\t\t\tconst geometry = geometries[ i ];\n\t\t\t\tconst primitive = primitives[ i ];\n\n\t\t\t\t// 1. create Mesh\n\n\t\t\t\tlet mesh;\n\n\t\t\t\tconst material = materials[ i ];\n\n\t\t\t\tif ( primitive.mode === WEBGL_CONSTANTS.TRIANGLES ||\n\t\t\t\t\t\tprimitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP ||\n\t\t\t\t\t\tprimitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN ||\n\t\t\t\t\t\tprimitive.mode === undefined ) {\n\n\t\t\t\t\t// .isSkinnedMesh isn't in glTF spec. See ._markDefs()\n\t\t\t\t\tmesh = meshDef.isSkinnedMesh === true\n\t\t\t\t\t\t? new three__WEBPACK_IMPORTED_MODULE_0__.SkinnedMesh( geometry, material )\n\t\t\t\t\t\t: new three__WEBPACK_IMPORTED_MODULE_0__.Mesh( geometry, material );\n\n\t\t\t\t\tif ( mesh.isSkinnedMesh === true && ! mesh.geometry.attributes.skinWeight.normalized ) {\n\n\t\t\t\t\t\t// we normalize floating point skin weight array to fix malformed assets (see #15319)\n\t\t\t\t\t\t// it's important to skip this for non-float32 data since normalizeSkinWeights assumes non-normalized inputs\n\t\t\t\t\t\tmesh.normalizeSkinWeights();\n\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( primitive.mode === WEBGL_CONSTANTS.TRIANGLE_STRIP ) {\n\n\t\t\t\t\t\tmesh.geometry = toTrianglesDrawMode( mesh.geometry, three__WEBPACK_IMPORTED_MODULE_0__.TriangleStripDrawMode );\n\n\t\t\t\t\t} else if ( primitive.mode === WEBGL_CONSTANTS.TRIANGLE_FAN ) {\n\n\t\t\t\t\t\tmesh.geometry = toTrianglesDrawMode( mesh.geometry, three__WEBPACK_IMPORTED_MODULE_0__.TriangleFanDrawMode );\n\n\t\t\t\t\t}\n\n\t\t\t\t} else if ( primitive.mode === WEBGL_CONSTANTS.LINES ) {\n\n\t\t\t\t\tmesh = new three__WEBPACK_IMPORTED_MODULE_0__.LineSegments( geometry, material );\n\n\t\t\t\t} else if ( primitive.mode === WEBGL_CONSTANTS.LINE_STRIP ) {\n\n\t\t\t\t\tmesh = new three__WEBPACK_IMPORTED_MODULE_0__.Line( geometry, material );\n\n\t\t\t\t} else if ( primitive.mode === WEBGL_CONSTANTS.LINE_LOOP ) {\n\n\t\t\t\t\tmesh = new three__WEBPACK_IMPORTED_MODULE_0__.LineLoop( geometry, material );\n\n\t\t\t\t} else if ( primitive.mode === WEBGL_CONSTANTS.POINTS ) {\n\n\t\t\t\t\tmesh = new three__WEBPACK_IMPORTED_MODULE_0__.Points( geometry, material );\n\n\t\t\t\t} else {\n\n\t\t\t\t\tthrow new Error( 'THREE.GLTFLoader: Primitive mode unsupported: ' + primitive.mode );\n\n\t\t\t\t}\n\n\t\t\t\tif ( Object.keys( mesh.geometry.morphAttributes ).length > 0 ) {\n\n\t\t\t\t\tupdateMorphTargets( mesh, meshDef );\n\n\t\t\t\t}\n\n\t\t\t\tmesh.name = parser.createUniqueName( meshDef.name || ( 'mesh_' + meshIndex ) );\n\n\t\t\t\tassignExtrasToUserData( mesh, meshDef );\n\n\t\t\t\tif ( primitive.extensions ) addUnknownExtensionsToUserData( extensions, mesh, primitive );\n\n\t\t\t\tparser.assignFinalMaterial( mesh );\n\n\t\t\t\tmeshes.push( mesh );\n\n\t\t\t}\n\n\t\t\tfor ( let i = 0, il = meshes.length; i < il; i ++ ) {\n\n\t\t\t\tparser.associations.set( meshes[ i ], {\n\t\t\t\t\tmeshes: meshIndex,\n\t\t\t\t\tprimitives: i\n\t\t\t\t} );\n\n\t\t\t}\n\n\t\t\tif ( meshes.length === 1 ) {\n\n\t\t\t\treturn meshes[ 0 ];\n\n\t\t\t}\n\n\t\t\tconst group = new three__WEBPACK_IMPORTED_MODULE_0__.Group();\n\n\t\t\tparser.associations.set( group, { meshes: meshIndex } );\n\n\t\t\tfor ( let i = 0, il = meshes.length; i < il; i ++ ) {\n\n\t\t\t\tgroup.add( meshes[ i ] );\n\n\t\t\t}\n\n\t\t\treturn group;\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#cameras\n\t * @param {number} cameraIndex\n\t * @return {Promise}\n\t */\n\tloadCamera( cameraIndex ) {\n\n\t\tlet camera;\n\t\tconst cameraDef = this.json.cameras[ cameraIndex ];\n\t\tconst params = cameraDef[ cameraDef.type ];\n\n\t\tif ( ! params ) {\n\n\t\t\tconsole.warn( 'THREE.GLTFLoader: Missing camera parameters.' );\n\t\t\treturn;\n\n\t\t}\n\n\t\tif ( cameraDef.type === 'perspective' ) {\n\n\t\t\tcamera = new three__WEBPACK_IMPORTED_MODULE_0__.PerspectiveCamera( three__WEBPACK_IMPORTED_MODULE_0__.MathUtils.radToDeg( params.yfov ), params.aspectRatio || 1, params.znear || 1, params.zfar || 2e6 );\n\n\t\t} else if ( cameraDef.type === 'orthographic' ) {\n\n\t\t\tcamera = new three__WEBPACK_IMPORTED_MODULE_0__.OrthographicCamera( - params.xmag, params.xmag, params.ymag, - params.ymag, params.znear, params.zfar );\n\n\t\t}\n\n\t\tif ( cameraDef.name ) camera.name = this.createUniqueName( cameraDef.name );\n\n\t\tassignExtrasToUserData( camera, cameraDef );\n\n\t\treturn Promise.resolve( camera );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#skins\n\t * @param {number} skinIndex\n\t * @return {Promise}\n\t */\n\tloadSkin( skinIndex ) {\n\n\t\tconst skinDef = this.json.skins[ skinIndex ];\n\n\t\tconst skinEntry = { joints: skinDef.joints };\n\n\t\tif ( skinDef.inverseBindMatrices === undefined ) {\n\n\t\t\treturn Promise.resolve( skinEntry );\n\n\t\t}\n\n\t\treturn this.getDependency( 'accessor', skinDef.inverseBindMatrices ).then( function ( accessor ) {\n\n\t\t\tskinEntry.inverseBindMatrices = accessor;\n\n\t\t\treturn skinEntry;\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#animations\n\t * @param {number} animationIndex\n\t * @return {Promise}\n\t */\n\tloadAnimation( animationIndex ) {\n\n\t\tconst json = this.json;\n\n\t\tconst animationDef = json.animations[ animationIndex ];\n\n\t\tconst pendingNodes = [];\n\t\tconst pendingInputAccessors = [];\n\t\tconst pendingOutputAccessors = [];\n\t\tconst pendingSamplers = [];\n\t\tconst pendingTargets = [];\n\n\t\tfor ( let i = 0, il = animationDef.channels.length; i < il; i ++ ) {\n\n\t\t\tconst channel = animationDef.channels[ i ];\n\t\t\tconst sampler = animationDef.samplers[ channel.sampler ];\n\t\t\tconst target = channel.target;\n\t\t\tconst name = target.node !== undefined ? target.node : target.id; // NOTE: target.id is deprecated.\n\t\t\tconst input = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.input ] : sampler.input;\n\t\t\tconst output = animationDef.parameters !== undefined ? animationDef.parameters[ sampler.output ] : sampler.output;\n\n\t\t\tpendingNodes.push( this.getDependency( 'node', name ) );\n\t\t\tpendingInputAccessors.push( this.getDependency( 'accessor', input ) );\n\t\t\tpendingOutputAccessors.push( this.getDependency( 'accessor', output ) );\n\t\t\tpendingSamplers.push( sampler );\n\t\t\tpendingTargets.push( target );\n\n\t\t}\n\n\t\treturn Promise.all( [\n\n\t\t\tPromise.all( pendingNodes ),\n\t\t\tPromise.all( pendingInputAccessors ),\n\t\t\tPromise.all( pendingOutputAccessors ),\n\t\t\tPromise.all( pendingSamplers ),\n\t\t\tPromise.all( pendingTargets )\n\n\t\t] ).then( function ( dependencies ) {\n\n\t\t\tconst nodes = dependencies[ 0 ];\n\t\t\tconst inputAccessors = dependencies[ 1 ];\n\t\t\tconst outputAccessors = dependencies[ 2 ];\n\t\t\tconst samplers = dependencies[ 3 ];\n\t\t\tconst targets = dependencies[ 4 ];\n\n\t\t\tconst tracks = [];\n\n\t\t\tfor ( let i = 0, il = nodes.length; i < il; i ++ ) {\n\n\t\t\t\tconst node = nodes[ i ];\n\t\t\t\tconst inputAccessor = inputAccessors[ i ];\n\t\t\t\tconst outputAccessor = outputAccessors[ i ];\n\t\t\t\tconst sampler = samplers[ i ];\n\t\t\t\tconst target = targets[ i ];\n\n\t\t\t\tif ( node === undefined ) continue;\n\n\t\t\t\tnode.updateMatrix();\n\t\t\t\tnode.matrixAutoUpdate = true;\n\n\t\t\t\tlet TypedKeyframeTrack;\n\n\t\t\t\tswitch ( PATH_PROPERTIES[ target.path ] ) {\n\n\t\t\t\t\tcase PATH_PROPERTIES.weights:\n\n\t\t\t\t\t\tTypedKeyframeTrack = three__WEBPACK_IMPORTED_MODULE_0__.NumberKeyframeTrack;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase PATH_PROPERTIES.rotation:\n\n\t\t\t\t\t\tTypedKeyframeTrack = three__WEBPACK_IMPORTED_MODULE_0__.QuaternionKeyframeTrack;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase PATH_PROPERTIES.position:\n\t\t\t\t\tcase PATH_PROPERTIES.scale:\n\t\t\t\t\tdefault:\n\n\t\t\t\t\t\tTypedKeyframeTrack = three__WEBPACK_IMPORTED_MODULE_0__.VectorKeyframeTrack;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t}\n\n\t\t\t\tconst targetName = node.name ? node.name : node.uuid;\n\n\t\t\t\tconst interpolation = sampler.interpolation !== undefined ? INTERPOLATION[ sampler.interpolation ] : three__WEBPACK_IMPORTED_MODULE_0__.InterpolateLinear;\n\n\t\t\t\tconst targetNames = [];\n\n\t\t\t\tif ( PATH_PROPERTIES[ target.path ] === PATH_PROPERTIES.weights ) {\n\n\t\t\t\t\tnode.traverse( function ( object ) {\n\n\t\t\t\t\t\tif ( object.morphTargetInfluences ) {\n\n\t\t\t\t\t\t\ttargetNames.push( object.name ? object.name : object.uuid );\n\n\t\t\t\t\t\t}\n\n\t\t\t\t\t} );\n\n\t\t\t\t} else {\n\n\t\t\t\t\ttargetNames.push( targetName );\n\n\t\t\t\t}\n\n\t\t\t\tlet outputArray = outputAccessor.array;\n\n\t\t\t\tif ( outputAccessor.normalized ) {\n\n\t\t\t\t\tconst scale = getNormalizedComponentScale( outputArray.constructor );\n\t\t\t\t\tconst scaled = new Float32Array( outputArray.length );\n\n\t\t\t\t\tfor ( let j = 0, jl = outputArray.length; j < jl; j ++ ) {\n\n\t\t\t\t\t\tscaled[ j ] = outputArray[ j ] * scale;\n\n\t\t\t\t\t}\n\n\t\t\t\t\toutputArray = scaled;\n\n\t\t\t\t}\n\n\t\t\t\tfor ( let j = 0, jl = targetNames.length; j < jl; j ++ ) {\n\n\t\t\t\t\tconst track = new TypedKeyframeTrack(\n\t\t\t\t\t\ttargetNames[ j ] + '.' + PATH_PROPERTIES[ target.path ],\n\t\t\t\t\t\tinputAccessor.array,\n\t\t\t\t\t\toutputArray,\n\t\t\t\t\t\tinterpolation\n\t\t\t\t\t);\n\n\t\t\t\t\t// Override interpolation with custom factory method.\n\t\t\t\t\tif ( sampler.interpolation === 'CUBICSPLINE' ) {\n\n\t\t\t\t\t\ttrack.createInterpolant = function InterpolantFactoryMethodGLTFCubicSpline( result ) {\n\n\t\t\t\t\t\t\t// A CUBICSPLINE keyframe in glTF has three output values for each input value,\n\t\t\t\t\t\t\t// representing inTangent, splineVertex, and outTangent. As a result, track.getValueSize()\n\t\t\t\t\t\t\t// must be divided by three to get the interpolant's sampleSize argument.\n\n\t\t\t\t\t\t\tconst interpolantType = ( this instanceof three__WEBPACK_IMPORTED_MODULE_0__.QuaternionKeyframeTrack ) ? GLTFCubicSplineQuaternionInterpolant : GLTFCubicSplineInterpolant;\n\n\t\t\t\t\t\t\treturn new interpolantType( this.times, this.values, this.getValueSize() / 3, result );\n\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\t// Mark as CUBICSPLINE. `track.getInterpolation()` doesn't support custom interpolants.\n\t\t\t\t\t\ttrack.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline = true;\n\n\t\t\t\t\t}\n\n\t\t\t\t\ttracks.push( track );\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tconst name = animationDef.name ? animationDef.name : 'animation_' + animationIndex;\n\n\t\t\treturn new three__WEBPACK_IMPORTED_MODULE_0__.AnimationClip( name, undefined, tracks );\n\n\t\t} );\n\n\t}\n\n\tcreateNodeMesh( nodeIndex ) {\n\n\t\tconst json = this.json;\n\t\tconst parser = this;\n\t\tconst nodeDef = json.nodes[ nodeIndex ];\n\n\t\tif ( nodeDef.mesh === undefined ) return null;\n\n\t\treturn parser.getDependency( 'mesh', nodeDef.mesh ).then( function ( mesh ) {\n\n\t\t\tconst node = parser._getNodeRef( parser.meshCache, nodeDef.mesh, mesh );\n\n\t\t\t// if weights are provided on the node, override weights on the mesh.\n\t\t\tif ( nodeDef.weights !== undefined ) {\n\n\t\t\t\tnode.traverse( function ( o ) {\n\n\t\t\t\t\tif ( ! o.isMesh ) return;\n\n\t\t\t\t\tfor ( let i = 0, il = nodeDef.weights.length; i < il; i ++ ) {\n\n\t\t\t\t\t\to.morphTargetInfluences[ i ] = nodeDef.weights[ i ];\n\n\t\t\t\t\t}\n\n\t\t\t\t} );\n\n\t\t\t}\n\n\t\t\treturn node;\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#nodes-and-hierarchy\n\t * @param {number} nodeIndex\n\t * @return {Promise}\n\t */\n\tloadNode( nodeIndex ) {\n\n\t\tconst json = this.json;\n\t\tconst extensions = this.extensions;\n\t\tconst parser = this;\n\n\t\tconst nodeDef = json.nodes[ nodeIndex ];\n\n\t\t// reserve node's name before its dependencies, so the root has the intended name.\n\t\tconst nodeName = nodeDef.name ? parser.createUniqueName( nodeDef.name ) : '';\n\n\t\treturn ( function () {\n\n\t\t\tconst pending = [];\n\n\t\t\tconst meshPromise = parser._invokeOne( function ( ext ) {\n\n\t\t\t\treturn ext.createNodeMesh && ext.createNodeMesh( nodeIndex );\n\n\t\t\t} );\n\n\t\t\tif ( meshPromise ) {\n\n\t\t\t\tpending.push( meshPromise );\n\n\t\t\t}\n\n\t\t\tif ( nodeDef.camera !== undefined ) {\n\n\t\t\t\tpending.push( parser.getDependency( 'camera', nodeDef.camera ).then( function ( camera ) {\n\n\t\t\t\t\treturn parser._getNodeRef( parser.cameraCache, nodeDef.camera, camera );\n\n\t\t\t\t} ) );\n\n\t\t\t}\n\n\t\t\tparser._invokeAll( function ( ext ) {\n\n\t\t\t\treturn ext.createNodeAttachment && ext.createNodeAttachment( nodeIndex );\n\n\t\t\t} ).forEach( function ( promise ) {\n\n\t\t\t\tpending.push( promise );\n\n\t\t\t} );\n\n\t\t\treturn Promise.all( pending );\n\n\t\t}() ).then( function ( objects ) {\n\n\t\t\tlet node;\n\n\t\t\t// .isBone isn't in glTF spec. See ._markDefs\n\t\t\tif ( nodeDef.isBone === true ) {\n\n\t\t\t\tnode = new three__WEBPACK_IMPORTED_MODULE_0__.Bone();\n\n\t\t\t} else if ( objects.length > 1 ) {\n\n\t\t\t\tnode = new three__WEBPACK_IMPORTED_MODULE_0__.Group();\n\n\t\t\t} else if ( objects.length === 1 ) {\n\n\t\t\t\tnode = objects[ 0 ];\n\n\t\t\t} else {\n\n\t\t\t\tnode = new three__WEBPACK_IMPORTED_MODULE_0__.Object3D();\n\n\t\t\t}\n\n\t\t\tif ( node !== objects[ 0 ] ) {\n\n\t\t\t\tfor ( let i = 0, il = objects.length; i < il; i ++ ) {\n\n\t\t\t\t\tnode.add( objects[ i ] );\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tif ( nodeDef.name ) {\n\n\t\t\t\tnode.userData.name = nodeDef.name;\n\t\t\t\tnode.name = nodeName;\n\n\t\t\t}\n\n\t\t\tassignExtrasToUserData( node, nodeDef );\n\n\t\t\tif ( nodeDef.extensions ) addUnknownExtensionsToUserData( extensions, node, nodeDef );\n\n\t\t\tif ( nodeDef.matrix !== undefined ) {\n\n\t\t\t\tconst matrix = new three__WEBPACK_IMPORTED_MODULE_0__.Matrix4();\n\t\t\t\tmatrix.fromArray( nodeDef.matrix );\n\t\t\t\tnode.applyMatrix4( matrix );\n\n\t\t\t} else {\n\n\t\t\t\tif ( nodeDef.translation !== undefined ) {\n\n\t\t\t\t\tnode.position.fromArray( nodeDef.translation );\n\n\t\t\t\t}\n\n\t\t\t\tif ( nodeDef.rotation !== undefined ) {\n\n\t\t\t\t\tnode.quaternion.fromArray( nodeDef.rotation );\n\n\t\t\t\t}\n\n\t\t\t\tif ( nodeDef.scale !== undefined ) {\n\n\t\t\t\t\tnode.scale.fromArray( nodeDef.scale );\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tif ( ! parser.associations.has( node ) ) {\n\n\t\t\t\tparser.associations.set( node, {} );\n\n\t\t\t}\n\n\t\t\tparser.associations.get( node ).nodes = nodeIndex;\n\n\t\t\treturn node;\n\n\t\t} );\n\n\t}\n\n\t/**\n\t * Specification: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#scenes\n\t * @param {number} sceneIndex\n\t * @return {Promise}\n\t */\n\tloadScene( sceneIndex ) {\n\n\t\tconst json = this.json;\n\t\tconst extensions = this.extensions;\n\t\tconst sceneDef = this.json.scenes[ sceneIndex ];\n\t\tconst parser = this;\n\n\t\t// Loader returns Group, not Scene.\n\t\t// See: https://github.com/mrdoob/three.js/issues/18342#issuecomment-578981172\n\t\tconst scene = new three__WEBPACK_IMPORTED_MODULE_0__.Group();\n\t\tif ( sceneDef.name ) scene.name = parser.createUniqueName( sceneDef.name );\n\n\t\tassignExtrasToUserData( scene, sceneDef );\n\n\t\tif ( sceneDef.extensions ) addUnknownExtensionsToUserData( extensions, scene, sceneDef );\n\n\t\tconst nodeIds = sceneDef.nodes || [];\n\n\t\tconst pending = [];\n\n\t\tfor ( let i = 0, il = nodeIds.length; i < il; i ++ ) {\n\n\t\t\tpending.push( buildNodeHierarchy( nodeIds[ i ], scene, json, parser ) );\n\n\t\t}\n\n\t\treturn Promise.all( pending ).then( function () {\n\n\t\t\t// Removes dangling associations, associations that reference a node that\n\t\t\t// didn't make it into the scene.\n\t\t\tconst reduceAssociations = ( node ) => {\n\n\t\t\t\tconst reducedAssociations = new Map();\n\n\t\t\t\tfor ( const [ key, value ] of parser.associations ) {\n\n\t\t\t\t\tif ( key instanceof three__WEBPACK_IMPORTED_MODULE_0__.Material || key instanceof three__WEBPACK_IMPORTED_MODULE_0__.Texture ) {\n\n\t\t\t\t\t\treducedAssociations.set( key, value );\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\tnode.traverse( ( node ) => {\n\n\t\t\t\t\tconst mappings = parser.associations.get( node );\n\n\t\t\t\t\tif ( mappings != null ) {\n\n\t\t\t\t\t\treducedAssociations.set( node, mappings );\n\n\t\t\t\t\t}\n\n\t\t\t\t} );\n\n\t\t\t\treturn reducedAssociations;\n\n\t\t\t};\n\n\t\t\tparser.associations = reduceAssociations( scene );\n\n\t\t\treturn scene;\n\n\t\t} );\n\n\t}\n\n}\n\nfunction buildNodeHierarchy( nodeId, parentObject, json, parser ) {\n\n\tconst nodeDef = json.nodes[ nodeId ];\n\n\treturn parser.getDependency( 'node', nodeId ).then( function ( node ) {\n\n\t\tif ( nodeDef.skin === undefined ) return node;\n\n\t\t// build skeleton here as well\n\n\t\tlet skinEntry;\n\n\t\treturn parser.getDependency( 'skin', nodeDef.skin ).then( function ( skin ) {\n\n\t\t\tskinEntry = skin;\n\n\t\t\tconst pendingJoints = [];\n\n\t\t\tfor ( let i = 0, il = skinEntry.joints.length; i < il; i ++ ) {\n\n\t\t\t\tpendingJoints.push( parser.getDependency( 'node', skinEntry.joints[ i ] ) );\n\n\t\t\t}\n\n\t\t\treturn Promise.all( pendingJoints );\n\n\t\t} ).then( function ( jointNodes ) {\n\n\t\t\tnode.traverse( function ( mesh ) {\n\n\t\t\t\tif ( ! mesh.isMesh ) return;\n\n\t\t\t\tconst bones = [];\n\t\t\t\tconst boneInverses = [];\n\n\t\t\t\tfor ( let j = 0, jl = jointNodes.length; j < jl; j ++ ) {\n\n\t\t\t\t\tconst jointNode = jointNodes[ j ];\n\n\t\t\t\t\tif ( jointNode ) {\n\n\t\t\t\t\t\tbones.push( jointNode );\n\n\t\t\t\t\t\tconst mat = new three__WEBPACK_IMPORTED_MODULE_0__.Matrix4();\n\n\t\t\t\t\t\tif ( skinEntry.inverseBindMatrices !== undefined ) {\n\n\t\t\t\t\t\t\tmat.fromArray( skinEntry.inverseBindMatrices.array, j * 16 );\n\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tboneInverses.push( mat );\n\n\t\t\t\t\t} else {\n\n\t\t\t\t\t\tconsole.warn( 'THREE.GLTFLoader: Joint \"%s\" could not be found.', skinEntry.joints[ j ] );\n\n\t\t\t\t\t}\n\n\t\t\t\t}\n\n\t\t\t\tmesh.bind( new three__WEBPACK_IMPORTED_MODULE_0__.Skeleton( bones, boneInverses ), mesh.matrixWorld );\n\n\t\t\t} );\n\n\t\t\treturn node;\n\n\t\t} );\n\n\t} ).then( function ( node ) {\n\n\t\t// build node hierachy\n\n\t\tparentObject.add( node );\n\n\t\tconst pending = [];\n\n\t\tif ( nodeDef.children ) {\n\n\t\t\tconst children = nodeDef.children;\n\n\t\t\tfor ( let i = 0, il = children.length; i < il; i ++ ) {\n\n\t\t\t\tconst child = children[ i ];\n\t\t\t\tpending.push( buildNodeHierarchy( child, node, json, parser ) );\n\n\t\t\t}\n\n\t\t}\n\n\t\treturn Promise.all( pending );\n\n\t} );\n\n}\n\n/**\n * @param {BufferGeometry} geometry\n * @param {GLTF.Primitive} primitiveDef\n * @param {GLTFParser} parser\n */\nfunction computeBounds( geometry, primitiveDef, parser ) {\n\n\tconst attributes = primitiveDef.attributes;\n\n\tconst box = new three__WEBPACK_IMPORTED_MODULE_0__.Box3();\n\n\tif ( attributes.POSITION !== undefined ) {\n\n\t\tconst accessor = parser.json.accessors[ attributes.POSITION ];\n\n\t\tconst min = accessor.min;\n\t\tconst max = accessor.max;\n\n\t\t// glTF requires 'min' and 'max', but VRM (which extends glTF) currently ignores that requirement.\n\n\t\tif ( min !== undefined && max !== undefined ) {\n\n\t\t\tbox.set(\n\t\t\t\tnew three__WEBPACK_IMPORTED_MODULE_0__.Vector3( min[ 0 ], min[ 1 ], min[ 2 ] ),\n\t\t\t\tnew three__WEBPACK_IMPORTED_MODULE_0__.Vector3( max[ 0 ], max[ 1 ], max[ 2 ] )\n\t\t\t);\n\n\t\t\tif ( accessor.normalized ) {\n\n\t\t\t\tconst boxScale = getNormalizedComponentScale( WEBGL_COMPONENT_TYPES[ accessor.componentType ] );\n\t\t\t\tbox.min.multiplyScalar( boxScale );\n\t\t\t\tbox.max.multiplyScalar( boxScale );\n\n\t\t\t}\n\n\t\t} else {\n\n\t\t\tconsole.warn( 'THREE.GLTFLoader: Missing min/max properties for accessor POSITION.' );\n\n\t\t\treturn;\n\n\t\t}\n\n\t} else {\n\n\t\treturn;\n\n\t}\n\n\tconst targets = primitiveDef.targets;\n\n\tif ( targets !== undefined ) {\n\n\t\tconst maxDisplacement = new three__WEBPACK_IMPORTED_MODULE_0__.Vector3();\n\t\tconst vector = new three__WEBPACK_IMPORTED_MODULE_0__.Vector3();\n\n\t\tfor ( let i = 0, il = targets.length; i < il; i ++ ) {\n\n\t\t\tconst target = targets[ i ];\n\n\t\t\tif ( target.POSITION !== undefined ) {\n\n\t\t\t\tconst accessor = parser.json.accessors[ target.POSITION ];\n\t\t\t\tconst min = accessor.min;\n\t\t\t\tconst max = accessor.max;\n\n\t\t\t\t// glTF requires 'min' and 'max', but VRM (which extends glTF) currently ignores that requirement.\n\n\t\t\t\tif ( min !== undefined && max !== undefined ) {\n\n\t\t\t\t\t// we need to get max of absolute components because target weight is [-1,1]\n\t\t\t\t\tvector.setX( Math.max( Math.abs( min[ 0 ] ), Math.abs( max[ 0 ] ) ) );\n\t\t\t\t\tvector.setY( Math.max( Math.abs( min[ 1 ] ), Math.abs( max[ 1 ] ) ) );\n\t\t\t\t\tvector.setZ( Math.max( Math.abs( min[ 2 ] ), Math.abs( max[ 2 ] ) ) );\n\n\n\t\t\t\t\tif ( accessor.normalized ) {\n\n\t\t\t\t\t\tconst boxScale = getNormalizedComponentScale( WEBGL_COMPONENT_TYPES[ accessor.componentType ] );\n\t\t\t\t\t\tvector.multiplyScalar( boxScale );\n\n\t\t\t\t\t}\n\n\t\t\t\t\t// Note: this assumes that the sum of all weights is at most 1. This isn't quite correct - it's more conservative\n\t\t\t\t\t// to assume that each target can have a max weight of 1. However, for some use cases - notably, when morph targets\n\t\t\t\t\t// are used to implement key-frame animations and as such only two are active at a time - this results in very large\n\t\t\t\t\t// boxes. So for now we make a box that's sometimes a touch too small but is hopefully mostly of reasonable size.\n\t\t\t\t\tmaxDisplacement.max( vector );\n\n\t\t\t\t} else {\n\n\t\t\t\t\tconsole.warn( 'THREE.GLTFLoader: Missing min/max properties for accessor POSITION.' );\n\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t}\n\n\t\t// As per comment above this box isn't conservative, but has a reasonable size for a very large number of morph targets.\n\t\tbox.expandByVector( maxDisplacement );\n\n\t}\n\n\tgeometry.boundingBox = box;\n\n\tconst sphere = new three__WEBPACK_IMPORTED_MODULE_0__.Sphere();\n\n\tbox.getCenter( sphere.center );\n\tsphere.radius = box.min.distanceTo( box.max ) / 2;\n\n\tgeometry.boundingSphere = sphere;\n\n}\n\n/**\n * @param {BufferGeometry} geometry\n * @param {GLTF.Primitive} primitiveDef\n * @param {GLTFParser} parser\n * @return {Promise}\n */\nfunction addPrimitiveAttributes( geometry, primitiveDef, parser ) {\n\n\tconst attributes = primitiveDef.attributes;\n\n\tconst pending = [];\n\n\tfunction assignAttributeAccessor( accessorIndex, attributeName ) {\n\n\t\treturn parser.getDependency( 'accessor', accessorIndex )\n\t\t\t.then( function ( accessor ) {\n\n\t\t\t\tgeometry.setAttribute( attributeName, accessor );\n\n\t\t\t} );\n\n\t}\n\n\tfor ( const gltfAttributeName in attributes ) {\n\n\t\tconst threeAttributeName = ATTRIBUTES[ gltfAttributeName ] || gltfAttributeName.toLowerCase();\n\n\t\t// Skip attributes already provided by e.g. Draco extension.\n\t\tif ( threeAttributeName in geometry.attributes ) continue;\n\n\t\tpending.push( assignAttributeAccessor( attributes[ gltfAttributeName ], threeAttributeName ) );\n\n\t}\n\n\tif ( primitiveDef.indices !== undefined && ! geometry.index ) {\n\n\t\tconst accessor = parser.getDependency( 'accessor', primitiveDef.indices ).then( function ( accessor ) {\n\n\t\t\tgeometry.setIndex( accessor );\n\n\t\t} );\n\n\t\tpending.push( accessor );\n\n\t}\n\n\tassignExtrasToUserData( geometry, primitiveDef );\n\n\tcomputeBounds( geometry, primitiveDef, parser );\n\n\treturn Promise.all( pending ).then( function () {\n\n\t\treturn primitiveDef.targets !== undefined\n\t\t\t? addMorphTargets( geometry, primitiveDef.targets, parser )\n\t\t\t: geometry;\n\n\t} );\n\n}\n\n/**\n * @param {BufferGeometry} geometry\n * @param {Number} drawMode\n * @return {BufferGeometry}\n */\nfunction toTrianglesDrawMode( geometry, drawMode ) {\n\n\tlet index = geometry.getIndex();\n\n\t// generate index if not present\n\n\tif ( index === null ) {\n\n\t\tconst indices = [];\n\n\t\tconst position = geometry.getAttribute( 'position' );\n\n\t\tif ( position !== undefined ) {\n\n\t\t\tfor ( let i = 0; i < position.count; i ++ ) {\n\n\t\t\t\tindices.push( i );\n\n\t\t\t}\n\n\t\t\tgeometry.setIndex( indices );\n\t\t\tindex = geometry.getIndex();\n\n\t\t} else {\n\n\t\t\tconsole.error( 'THREE.GLTFLoader.toTrianglesDrawMode(): Undefined position attribute. Processing not possible.' );\n\t\t\treturn geometry;\n\n\t\t}\n\n\t}\n\n\t//\n\n\tconst numberOfTriangles = index.count - 2;\n\tconst newIndices = [];\n\n\tif ( drawMode === three__WEBPACK_IMPORTED_MODULE_0__.TriangleFanDrawMode ) {\n\n\t\t// gl.TRIANGLE_FAN\n\n\t\tfor ( let i = 1; i <= numberOfTriangles; i ++ ) {\n\n\t\t\tnewIndices.push( index.getX( 0 ) );\n\t\t\tnewIndices.push( index.getX( i ) );\n\t\t\tnewIndices.push( index.getX( i + 1 ) );\n\n\t\t}\n\n\t} else {\n\n\t\t// gl.TRIANGLE_STRIP\n\n\t\tfor ( let i = 0; i < numberOfTriangles; i ++ ) {\n\n\t\t\tif ( i % 2 === 0 ) {\n\n\t\t\t\tnewIndices.push( index.getX( i ) );\n\t\t\t\tnewIndices.push( index.getX( i + 1 ) );\n\t\t\t\tnewIndices.push( index.getX( i + 2 ) );\n\n\n\t\t\t} else {\n\n\t\t\t\tnewIndices.push( index.getX( i + 2 ) );\n\t\t\t\tnewIndices.push( index.getX( i + 1 ) );\n\t\t\t\tnewIndices.push( index.getX( i ) );\n\n\t\t\t}\n\n\t\t}\n\n\t}\n\n\tif ( ( newIndices.length / 3 ) !== numberOfTriangles ) {\n\n\t\tconsole.error( 'THREE.GLTFLoader.toTrianglesDrawMode(): Unable to generate correct amount of triangles.' );\n\n\t}\n\n\t// build final geometry\n\n\tconst newGeometry = geometry.clone();\n\tnewGeometry.setIndex( newIndices );\n\n\treturn newGeometry;\n\n}\n\n\n\n\n//# sourceURL=webpack://voice-changer-internal/./node_modules/three/examples/jsm/loaders/GLTFLoader.js?"); +/***/ }), + +/***/ "./frontend/public/assets/setting.json": +/*!*********************************************!*\ + !*** ./frontend/public/assets/setting.json ***! + \*********************************************/ +/***/ ((module) => { + +"use strict"; +eval("module.exports = JSON.parse('{\"app_title\":\"voice-changer\",\"majar_mode\":\"docker\",\"voice_changer_server_url\":\"/test\",\"sample_rate\":48000,\"buffer_size\":1024,\"prefix_chunk_size\":24,\"chunk_size\":24,\"speakers\":[{\"id\":100,\"name\":\"ずんだもん\"},{\"id\":107,\"name\":\"user\"},{\"id\":101,\"name\":\"そら\"},{\"id\":102,\"name\":\"めたん\"},{\"id\":103,\"name\":\"つむぎ\"}],\"src_id\":107,\"dst_id\":100,\"vf_enable\":true,\"voice_changer_mode\":\"realtime\",\"gpu\":0,\"available_gpus\":[-1,0,1,2,3,4],\"screen\":{\"enable_screen\":true,\"backgournd_image_url\":\"./assets/images/bg_natural_sougen.jpg\"},\"avatar\":{\"enable_avatar\":false,\"motion_capture_face\":false,\"motion_capture_upperbody\":false,\"lip_overwrite_with_voice\":false,\"avatar_url\":\"./assets/vrm/zundamon/zundamon.vrm\",\"background_color\":\"#0000dd\",\"chroma_key\":\"#0000dd\",\"avatar_canvas_size\":[1280,720],\"screen_canvas_size\":[1280,720]},\"advance\":{\"avatar_draw_skip_rate\":3,\"screen_draw_skip_rate\":3,\"visualizer_draw_skip_rate\":3,\"cross_fade_lower_value\":0.1,\"cross_fade_offset_rate\":0.3,\"cross_fade_end_rate\":0.6,\"cross_fade_type\":2},\"transcribe\":{\"lang\":\"日本語(ja-JP)\",\"expire_time\":5}}');\n\n//# sourceURL=webpack://voice-changer-internal/./frontend/public/assets/setting.json?"); + /***/ }) /******/ }); diff --git a/trainer/Dockerfile b/trainer/Dockerfile index dc21e419..3c85bcd6 100644 --- a/trainer/Dockerfile +++ b/trainer/Dockerfile @@ -1,4 +1,4 @@ -FROM dannadori/voice-changer-internal:20221030_232317 as front +FROM dannadori/voice-changer-internal:20221103_035426 as front FROM debian:bullseye-slim as base ARG DEBIAN_FRONTEND=noninteractive