{"ast":null,"code":"var _jsxFileName = \"/var/www/gavt/src/Route/Sample.tsx\",\n _s = $RefreshSig$();\nimport React, { useState, useEffect, useRef } from 'react';\nimport { Button, Flex } from 'antd';\nimport { SettingOutlined, CustomerServiceOutlined } from '@ant-design/icons';\nimport { Col, Row, Tour, ConfigProvider } from 'antd';\nimport { CaretRightOutlined, LoadingOutlined } from '@ant-design/icons';\nimport { Slider, Input } from 'antd';\nimport { Layout, Dropdown } from 'antd';\nimport { Drawer, Radio } from 'antd';\nimport { RedoOutlined, PauseOutlined, StepForwardOutlined, StepBackwardOutlined } from '@ant-design/icons';\nimport { Tooltip, FloatButton, Space, Switch } from 'antd';\nimport '../CSS/sample.css';\nimport ConstantTxt from '../Canvas/ConstantTxt';\nimport Fixed from '../Canvas/Fixed';\nimport Stair from '../Canvas/Stair';\nimport Heteronym from '../Canvas/Heteronym';\nimport { UploadOutlined } from '@ant-design/icons';\nimport { message, Upload } from 'antd';\nimport hark from 'hark';\nimport { useLocation } from 'react-router-dom';\nimport { Typography } from 'antd';\nimport { Collapse } from 'antd';\nimport { Image } from 'antd';\nimport divide_1 from '../icon/Divider2-half.png';\nimport { QuestionOutlined } from '@ant-design/icons';\nimport { useTemString } from '../hooks/useTemString';\n// @ts-ignore\nimport pdfToText from 'react-pdftotext';\nimport AudioPlayer from 'react-h5-audio-player';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport { useOptionsHooks } from '../hooks/useOptionsHooks';\nimport { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst PlayIcon = createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/c/font_4566050_zpduwnlv2t.js'\n});\n_c = PlayIcon;\nconst {\n TextArea\n} = Input;\nconst {\n Title,\n Paragraph,\n Text,\n Link\n} = Typography;\nconst items = [{\n key: '1',\n label: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: \"The Rainbow Passage\"\n }, void 0, false)\n}, {\n key: '2',\n label: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: \"Grandfather\"\n }, void 0, false)\n}, {\n key: '3',\n label: /*#__PURE__*/_jsxDEV(_Fragment, {\n children: \"Harvard Phonetically Balanced Sentences\"\n }, void 0, false)\n}];\nconst {\n Content\n} = Layout;\nconst marksRange = {\n 50: '50Hz',\n 600: '600Hz'\n};\nconst marksBallPos = {\n 0: '0%',\n 1: '100%'\n};\nconst marksVol = {\n 50: '50dB',\n 90: '90dB'\n};\nconst Sample = ({\n genderName,\n gender,\n setGender,\n audioKey,\n audioSrc,\n fetchAudioData,\n handleIconClick,\n itemsAvatar\n}) => {\n _s();\n const {\n audioPlayerNew\n } = useOptionsHooks();\n\n // strings\n const {\n items_3,\n stairFilenames,\n heteronymFilenames,\n shortDescription,\n Text_1_Rainbow,\n Text_2,\n Text_3\n } = useTemString();\n\n // Canvas values\n const size = [400, 1400];\n const [initialRange, setInitialRange] = useState([100, 300]);\n const [config, setConfig] = useState({\n SRATE: 48000,\n fxmin: 50,\n fxlow: 50 + 50,\n // This initial value will be updated by useEffect below\n fxhigh: 600 - 200,\n // This initial value will be updated by useEffect below\n fxmax: 600\n });\n const [COLORS, setCOLORS] = useState({\n realVoiceColor: '#d679de',\n targetVoiceColor: '#4669C8',\n closeVoiceColor: '#15dbcc'\n });\n const [COLORSMode, setCOLORSMode] = useState(\"de\");\n\n // open/close \n const [openSetting, setOpenSetting] = useState(false);\n const [txtShow, setTxtShow] = useState(\"true\");\n const [txtShowSwitch, setTxtShowSwitch] = useState('show');\n const [openTour, setOpenTour] = useState(false);\n const [isPlaying, setIsPlaying] = useState(true);\n const [isRetry, setIsRetry] = useState(false);\n const [enableVol, setEnableVol] = useState(false);\n const [isOpenTextbox, setIsOpenTextbox] = useState(false);\n const [showNextPre, setShowNextPre] = useState(false);\n const [showListen, setShowListen] = useState(false);\n\n // special vatiables\n const location = useLocation();\n const ref12 = useRef(null);\n const ref1 = useRef(null);\n const ref2 = useRef(null);\n const ref3 = useRef(null);\n const parentRef = useRef(null);\n\n // initial Value\n const [volume, setVolume] = useState(0);\n const [threshold, setThreshold] = useState(70);\n const [maxLyricCount, setMaxLyricCount] = useState(2);\n const [playLyricCount, setPlayLyricCount] = useState(0);\n const [divisor, setDivisor] = useState(10);\n const [ballPosition, setBallPosition] = useState(0.5);\n const [pitchDiff, setPitchDiff] = useState([0]);\n const [avgPitchDiff, setAvgPitchDiff] = useState();\n // Hz/Notes\n const [showNotesPar, setShowNotesPar] = useState(false);\n\n // selected choice\n const [component, setComponent] = useState(\"ConstantTxt\");\n const [currentSelection, setCurrentSelection] = useState('Constant');\n const [syllableCount, setSyllableCount] = useState(\"none\");\n const [baseFilenames, setBaseFilenames] = useState([]);\n const [fileContent, setFileContent] = useState([]);\n const [selectedNum, setSelectedNum] = useState([\"2\"]);\n const [selectedDefaultText, setSelectedDefaultText] = useState(\"1\");\n\n // auido\n const audioPlayer = useRef(null);\n // const audioPlayerNew = useRef(null);\n const [audioSrcFromChild, setAudioSrcFromChild] = useState('');\n const [isListen, setIsListen] = useState(1);\n\n // \n const setPlaying = () => {\n setIsPlaying(true);\n };\n const setPlayingPause = () => {\n setIsPlaying(false);\n };\n const handleBeginTour = () => {\n setOpenTour(true);\n window.scrollTo(0, 0);\n };\n const onClose = () => {\n setOpenSetting(false);\n };\n const ClearTxt = () => {\n setFileContent([]);\n setMaxLyricCount(1);\n };\n const handlePitchDiffChange = value => {\n setPitchDiff(value);\n };\n\n // Constant Page upload and input\n const onClick = ({\n key\n }) => {\n message.info(`Click on item ${key}`);\n setSelectedDefaultText(key);\n };\n useEffect(() => {\n console.log(Text_1_Rainbow[1]);\n handleTextInputString(Text_1_Rainbow[Number(selectedDefaultText) - 1]);\n }, [selectedDefaultText]);\n const handleTextInputString = e => {\n const content = e;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators).map(s => s.trim()).filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n };\n const handleTextInput = e => {\n const content = e.target.value;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators).map(s => s.trim()).filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n };\n const props = {\n name: 'file',\n accept: '.txt, .pdf',\n beforeUpload: file => {\n if (file.type !== 'text/plain' && file.type !== 'application/pdf') {\n message.error(`${file.name} is not a valid text/pdf file.`);\n return false;\n }\n if (file.type === 'application/pdf') {\n pdfToText(file).then(text => {\n const separators = /[;,./\\n]/;\n const splitContent = text.split(separators).map(s => s.trim()).filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }).catch(error => {\n // Explicitly specify the type of 'error' parameter as 'any'\n message.error('Error reading PDF file:', error);\n });\n return false;\n }\n if (file.type === 'text/plain') {\n const reader = new FileReader();\n reader.onload = e => {\n var _e$target;\n if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.result) {\n const content = e.target.result;\n // const separators = /[;,./]/;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators).map(s => s.trim()).filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }\n };\n reader.readAsText(file);\n return false;\n }\n },\n onChange(info) {\n if (info.file.status === 'done') {\n message.success(`${info.file.name} file read successfully`);\n } else if (info.file.status === 'error') {\n message.error(`${info.file.name} file read failed.`);\n }\n }\n };\n const changeOnEnter = e => {\n if (e.key === 'Enter' && !e.shiftKey) {\n console.log(\"Enter Key Pressed!\");\n handleTextInput(e);\n }\n };\n\n // audio\n const handleAudioSrc = newAudioSrc => {\n setAudioSrcFromChild(newAudioSrc);\n };\n const playAudio = () => {\n // if (audioPlayer.current && audioPlayer.current.audioEl.current) {\n // audioPlayer.current.audioEl.current.play()\n if (audioPlayerNew.current && audioPlayerNew.current.audio.current) {\n audioPlayerNew.current.audio.current.play().then(() => {\n setIsListen(isListen + 1);\n }).catch(error => {\n console.error('Fail play audios: ', error);\n });\n }\n };\n\n // options audio\n useEffect(() => {\n fetchAudioData();\n }, [genderName]);\n\n // Volume\n useEffect(() => {\n navigator.mediaDevices.getUserMedia({\n audio: true,\n video: false\n }).then(stream => {\n const harkInstance = hark(stream, {});\n harkInstance.on('volume_change', (volume, threshold) => {\n setVolume(volume);\n });\n return () => harkInstance.stop();\n }).catch(error => {\n console.error('Error accessing the microphone', error);\n });\n }, []);\n useEffect(() => {\n if (volume > threshold - 100 && enableVol) {\n setIsPlaying(true);\n }\n }, [volume]);\n\n // Tour\n const steps = [{\n title: 'Pitch Exercises',\n description: 'Switch between different exercises',\n placement: 'top',\n target: () => ref12.current\n }, {\n title: 'Canvas Display',\n description: 'Visualize your voice pitch and target pitch curve in real-time.',\n placement: 'top',\n target: () => ref1.current\n }, {\n title: 'Function Buttons',\n cover: /*#__PURE__*/_jsxDEV(\"ul\", {\n style: {\n textAlign: 'left'\n },\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Start/Stop: Begin or stop recording.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 384,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Retry: Clear display and restart.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 385,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Upload txt/pdf File (optional): Upload text or pdf for you (in .txt/.pdf format) to read while recording.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 386,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"Previous Next (if text uploaded): Switch between lines of text.\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 387,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 383,\n columnNumber: 9\n }, this),\n target: () => ref2.current\n }, {\n title: 'Slider',\n description: 'Use this slides to change the target pitch value that you want to aim for.',\n target: () => parentRef.current\n }, {\n title: 'Options menu',\n description: 'Adjust settings such as the pitch display range.',\n target: () => ref3.current\n }];\n useEffect(() => {\n const queryParams = new URLSearchParams(location.search);\n const init = queryParams.get('init');\n if (init === 'true') {\n handleBeginTour();\n }\n }, [location]);\n\n // Options of different Exercise \n const handleStairAndConstantClick = e => {\n setPlayLyricCount(0);\n setCurrentSelection(e.target.innerText);\n console.log(e.target.innerText);\n if (e.target.innerText === \"Constant\" || e.target.innerText === \"CONSTANT\") {\n setComponent(\"ConstantTxt\");\n setSelectedNum([\"2\"]);\n } else if (e.target.innerText === \"Stair\" || e.target.innerText === \"STAIR\") {\n setComponent(\"Stair\");\n setSelectedNum([\"3\"]);\n } else {\n setComponent(\"Heteronym\");\n setSelectedNum([\"4\"]);\n }\n setSyllableCount(\"none\");\n };\n const handleMenuClick = e => {\n setPlayLyricCount(0);\n const [componentType, genderType, syllableCountType] = e.key.split('-');\n if (componentType == \"Constant\") {\n setCurrentSelection(\"Constant\");\n } else if (componentType == \"ConstantTxt\") {\n setCurrentSelection(\"Constant\");\n } else if (componentType == \"Stair\") {\n setCurrentSelection(\"Staircase\");\n } else {\n let tt = \"Syllables \" + syllableCountType;\n setCurrentSelection(tt);\n setSelectedNum([\"5\"]);\n }\n setComponent(componentType);\n setGender(genderType);\n setSyllableCount(syllableCountType);\n setCurrentSelection(e.key + \"syllable \" + genderName);\n };\n const renderTruncatedFilenames = filenames => {\n return filenames.map((text, index) => {\n const isNearEnd = filenames.length - playLyricCount <= 2;\n const startIndex = isNearEnd ? filenames.length - 3 : playLyricCount;\n const showCondition = index >= startIndex && index <= startIndex + 2;\n return showCondition && /*#__PURE__*/_jsxDEV(\"li\", {\n className: playLyricCount === index ? 'highlighted' : '',\n children: text\n }, index, false, {\n fileName: _jsxFileName,\n lineNumber: 461,\n columnNumber: 11\n }, this);\n });\n };\n const handlePlayLyricCountChange = newCount => {\n setPlayLyricCount(newCount);\n };\n\n /**\n * Defines the items for the syllable menu based on the gender.\n * If the gender is 'none', it only includes a single item prompting the user to select an avatar.\n * Otherwise, it includes multiple items representing the number of syllables, with corresponding click handlers.\n */\n const itemsSyllable = gender === 'none' ? [{\n key: 'SelectAvatar',\n label: 'Please select avatar'\n }] : [{\n key: `Fixed-${gender}-2`,\n label: \"2 syllables\",\n onClick: handleMenuClick\n }, {\n key: `Fixed-${gender}-3`,\n label: \"3 syllables\",\n onClick: handleMenuClick\n }, {\n key: `Fixed-${gender}-4`,\n label: \"4 syllables\",\n onClick: handleMenuClick\n }, {\n key: `Fixed-${gender}-5`,\n label: \"5 syllables\",\n onClick: handleMenuClick\n }];\n const onChangeStairSwitch = value => {\n setTxtShowSwitch(value ? 'hide' : 'show');\n setTxtShow(value ? 'true' : 'false');\n };\n const renderSelectedComponent = () => {\n switch (component) {\n // case 'Constant':\n // return ;\n case 'ConstantTxt':\n return /*#__PURE__*/_jsxDEV(ConstantTxt, {\n handlePitchDiffChange: handlePitchDiffChange,\n ref: parentRef,\n initialRange: initialRange,\n divisor: divisor,\n ballPosition: ballPosition,\n isRetry: isRetry,\n setPlayingPause: setPlayingPause,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n size: size,\n config: config,\n isPlaying: isPlaying\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 512,\n columnNumber: 16\n }, this);\n case 'Stair':\n return /*#__PURE__*/_jsxDEV(Stair, {\n setShowNotesPar: setShowNotesPar,\n setMaxLyricCount: setMaxLyricCount,\n initialRange: initialRange,\n divisor: divisor,\n txtShow: txtShow,\n playLyricCount: playLyricCount,\n setPlayingPause: setPlayingPause,\n isRetry: isRetry,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n size: size,\n config: config,\n isPlaying: isPlaying\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 514,\n columnNumber: 16\n }, this);\n case 'Fixed':\n return /*#__PURE__*/_jsxDEV(Fixed, {\n setMaxLyricCount: setMaxLyricCount,\n setIsListen: setIsListen,\n isListen: isListen,\n initialRange: initialRange,\n divisor: divisor,\n setPlayingPause: setPlayingPause,\n isRetry: isRetry,\n onAudioSrcChange: handleAudioSrc,\n setBaseFilenames: setBaseFilenames,\n onPlayLyricCountChange: handlePlayLyricCountChange,\n syllableCount: syllableCount,\n gender: gender,\n genderName: genderName,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n playLyricCount: playLyricCount,\n size: size,\n config: config,\n isPlaying: isPlaying\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 516,\n columnNumber: 16\n }, this);\n case 'Heteronym':\n return /*#__PURE__*/_jsxDEV(Heteronym, {\n setMaxLyricCount: setMaxLyricCount,\n initialRange: initialRange,\n divisor: divisor,\n txtShow: txtShow,\n playLyricCount: playLyricCount,\n setPlayingPause: setPlayingPause,\n isRetry: isRetry,\n setPlaying: setPlaying,\n COLORS: COLORS,\n showNotesPar: showNotesPar,\n size: size,\n config: config,\n isPlaying: isPlaying,\n heteronymFile: heteronymFilenames\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 518,\n columnNumber: 16\n }, this);\n default:\n return /*#__PURE__*/_jsxDEV(\"span\", {\n children: \"Canvas: Picture\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 520,\n columnNumber: 16\n }, this);\n }\n };\n const MainButtons = () => {\n return /*#__PURE__*/_jsxDEV(Flex, {\n justify: \"center\",\n wrap: \"wrap\",\n gap: \"small\",\n children: [/*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Retry\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: () => setIsRetry(!isRetry),\n shape: \"circle\",\n icon: /*#__PURE__*/_jsxDEV(RedoOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 528,\n columnNumber: 77\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 528,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 527,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(AudioPlayer, {\n autoPlayAfterSrcChange: false,\n src: audioSrcFromChild,\n ref: audioPlayerNew,\n style: {\n display: 'none'\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 536,\n columnNumber: 9\n }, this), showListen && /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Listen\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n disabled: component !== \"Fixed\",\n shape: \"circle\",\n onClick: playAudio,\n icon: /*#__PURE__*/_jsxDEV(CustomerServiceOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 544,\n columnNumber: 95\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 544,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 543,\n columnNumber: 11\n }, this), showNextPre && /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Previous\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n shape: \"circle\",\n onClick: onChangePrevious,\n icon: /*#__PURE__*/_jsxDEV(StepBackwardOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 551,\n columnNumber: 69\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 551,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 550,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: isPlaying ? \"Pause\" : \"Play\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: onChangePause,\n shape: \"circle\",\n icon: isPlaying ? /*#__PURE__*/_jsxDEV(PauseOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 555,\n columnNumber: 76\n }, this) : /*#__PURE__*/_jsxDEV(CaretRightOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 555,\n columnNumber: 96\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 555,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 554,\n columnNumber: 9\n }, this), showNextPre && /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Next\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n shape: \"circle\",\n onClick: onChangeNext,\n icon: /*#__PURE__*/_jsxDEV(StepForwardOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 560,\n columnNumber: 65\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 560,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 559,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 525,\n columnNumber: 7\n }, this);\n };\n useEffect(() => {\n const avgDiff = pitchDiff.reduce((acc, current) => {\n if (!isNaN(current)) {\n acc.sum += current;\n acc.count++;\n }\n return acc;\n }, {\n sum: 0,\n count: 0\n });\n const formattedAvgPitchDiff = (avgDiff.count > 0 ? avgDiff.sum / avgDiff.count : 0).toFixed(2);\n setAvgPitchDiff(parseFloat(formattedAvgPitchDiff));\n }, [pitchDiff]);\n const RecordingBar = () => {\n return /*#__PURE__*/_jsxDEV(Flex, {\n justify: \"center\",\n wrap: \"wrap\",\n gap: \"small\",\n children: isPlaying ? /*#__PURE__*/_jsxDEV(_Fragment, {\n children: [/*#__PURE__*/_jsxDEV(LoadingOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 585,\n columnNumber: 19\n }, this), \"Recording...\"]\n }, void 0, true) : /*#__PURE__*/_jsxDEV(_Fragment, {\n children: [\"Recording stopped. Your average pitch difference is \", avgPitchDiff, \".\"]\n }, void 0, true)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 581,\n columnNumber: 7\n }, this);\n };\n const renderSelectedComponentLyric = () => {\n switch (component) {\n case 'ConstantTxt':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [/*#__PURE__*/_jsxDEV(Space, {\n size: \"middle\",\n children: [RecordingBar(), /*#__PURE__*/_jsxDEV(Space.Compact, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 609,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 607,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 613,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n size: \"middle\",\n children: [MainButtons(), /*#__PURE__*/_jsxDEV(Space.Compact, {\n children: [/*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Clear existing files and upload new ones\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: ClearTxt,\n children: \"Clear text\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 619,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 618,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Default text example\",\n children: /*#__PURE__*/_jsxDEV(Dropdown, {\n menu: {\n items,\n onClick\n },\n placement: \"bottomLeft\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n children: \"Default Texts\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 623,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 622,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 621,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Upload PDF or .txt file to read during practice\",\n children: /*#__PURE__*/_jsxDEV(Upload, {\n maxCount: 1,\n ...props,\n children: /*#__PURE__*/_jsxDEV(Button, {\n icon: /*#__PURE__*/_jsxDEV(UploadOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 629,\n columnNumber: 35\n }, this),\n children: \"Upload File\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 629,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 628,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 627,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Type/Paste text to read during parctice\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n onClick: () => setIsOpenTextbox(!isOpenTextbox),\n children: !isOpenTextbox ? \"Enter Text\" : \"Close Textbox\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 633,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 632,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 616,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 614,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(_Fragment, {\n children: isOpenTextbox && fileContent.length === 0 && /*#__PURE__*/_jsxDEV(TextArea, {\n rows: 4,\n placeholder: \"Enter or paste Text Entry\",\n style: {\n height: 40,\n resize: 'none'\n },\n onKeyDown: changeOnEnter\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 642,\n columnNumber: 17\n }, this)\n }, void 0, false), /*#__PURE__*/_jsxDEV(\"ul\", {\n children: fileContent.map((text, index) => {\n const maxIndexToShow = playLyricCount + 2 >= fileContent.length ? fileContent.length - 1 : playLyricCount + 2;\n const shouldShow = index >= playLyricCount && index <= maxIndexToShow;\n const isNearEnd = fileContent.length - playLyricCount <= 2;\n const startIndex = isNearEnd ? fileContent.length - 3 : playLyricCount;\n const showCondition = index >= startIndex && index <= startIndex + 2;\n return showCondition && /*#__PURE__*/_jsxDEV(\"li\", {\n className: playLyricCount === index ? 'highlighted' : '',\n children: text\n }, index, false, {\n fileName: _jsxFileName,\n lineNumber: 659,\n columnNumber: 21\n }, this);\n })\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 648,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 606,\n columnNumber: 11\n }, this);\n case 'Stair':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [/*#__PURE__*/_jsxDEV(Flex, {\n align: \"center\",\n gap: \"middle\",\n children: [MainButtons(), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Show/Hide 5-syllable phrases to read\",\n children: /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: true,\n checkedChildren: \"show\",\n unCheckedChildren: \"hide\",\n onChange: onChangeStairSwitch\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 673,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 672,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 669,\n columnNumber: 13\n }, this), (() => {\n if (txtShow === 'true') {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(stairFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 680,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 668,\n columnNumber: 11\n }, this);\n case 'Heteronym':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [MainButtons(), (() => {\n if (txtShow === 'true') {\n return /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(heteronymFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 697,\n columnNumber: 19\n }, this);\n }\n return null;\n })()]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 692,\n columnNumber: 11\n }, this);\n case 'Fixed':\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"lyric\",\n children: [MainButtons(), /*#__PURE__*/_jsxDEV(\"ul\", {\n children: renderTruncatedFilenames(baseFilenames)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 711,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 709,\n columnNumber: 11\n }, this);\n default:\n return /*#__PURE__*/_jsxDEV(\"span\", {\n children: \"Canvas: Picture\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 717,\n columnNumber: 16\n }, this);\n }\n };\n useEffect(() => {\n if (component == \"ConstantTxt\" && fileContent.length === 0) {\n setShowNextPre(false);\n setShowListen(false);\n } else if (component == \"ConstantTxt\" && fileContent.length != 0) {\n setShowNextPre(true);\n setShowListen(false);\n } else if (component == \"Fixed\") {\n setShowNextPre(true);\n setShowListen(true);\n } else if (component == \"Stair\") {\n setShowNextPre(true);\n setShowListen(false);\n } else if (component == \"Heteronym\") {\n setShowNextPre(true);\n setShowListen(false);\n } else {\n setShowNextPre(true);\n setShowListen(false);\n }\n }, [component, fileContent]);\n\n // Options Changing functions\n const onChangeRange = rangeValue => {\n setInitialRange([rangeValue[0], rangeValue[1]]);\n };\n const onChangePosition = positionValue => {\n setBallPosition(positionValue);\n };\n const onChangeSpeed = speedValue => {\n const mappedValue = Math.round(speedValue * 20 + 4);\n setDivisor(mappedValue);\n };\n const onChangeHz = ({\n target: {\n value\n }\n }) => {\n console.log(value);\n if (value === 'hz') {\n setShowNotesPar(false);\n } else {\n setShowNotesPar(true);\n }\n };\n const onChangeColor = ({\n target: {\n value\n }\n }) => {\n console.log(value);\n if (value === 'de') {\n setCOLORSMode(value);\n setCOLORS({\n realVoiceColor: '#d679de',\n targetVoiceColor: '#4669C8',\n closeVoiceColor: '#15dbcc'\n });\n } else {\n setCOLORSMode(value);\n setCOLORS({\n realVoiceColor: '#ff0000',\n targetVoiceColor: '#3399ff',\n closeVoiceColor: 'yellow'\n });\n }\n };\n const EnableVoluneMode = e => {\n console.log(e);\n if (e) {\n setEnableVol(true);\n } else {\n setEnableVol(false);\n }\n };\n\n // Button functions\n const onChangePause = () => {\n setIsPlaying(!isPlaying);\n };\n const onChangePrevious = () => {\n const tem = playLyricCount;\n if (tem <= 0) {\n setPlayLyricCount(0);\n } else {\n setPlayLyricCount(tem - 1);\n }\n };\n const onChangeNext = () => {\n const tem = playLyricCount;\n if (tem >= maxLyricCount) {\n setPlayLyricCount(maxLyricCount);\n } else {\n setPlayLyricCount(tem + 1);\n }\n };\n\n // tooltips\n const onChangeThreshold = e => {\n setThreshold(e);\n };\n const formatterdB = value => `${value} dB`;\n const formatterHz = value => `${value} Hz`;\n const formatterPos = value => `${value ? (value * 100).toFixed(0) : '0'}%`;\n\n // onChangeCollapse\n const onChangeCollapse = e => {\n console.log(e);\n if (Array.isArray(e)) {\n setSelectedNum(e);\n } else {\n setSelectedNum([e]);\n }\n };\n return /*#__PURE__*/_jsxDEV(Row, {\n children: /*#__PURE__*/_jsxDEV(Col, {\n span: 24,\n children: /*#__PURE__*/_jsxDEV(Layout, {\n className: \"layoutSample\",\n children: /*#__PURE__*/_jsxDEV(Content, {\n children: [/*#__PURE__*/_jsxDEV(Flex, {\n align: \"center\",\n justify: \"center\",\n gap: \"middle\",\n vertical: true,\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n marginTop: \"2vw\"\n },\n children: /*#__PURE__*/_jsxDEV(ConfigProvider, {\n theme: {\n token: {\n colorPrimary: \"rgb(132, 118, 171)\",\n borderRadius: 0\n }\n },\n children: /*#__PURE__*/_jsxDEV(Space, {\n size: \"middle\",\n ref: ref12,\n children: /*#__PURE__*/_jsxDEV(Space.Compact, {\n children: [/*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Switch to the Constant exercise\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"ConstantTxt\" ? \"primary\" : \"default\",\n onClick: handleStairAndConstantClick,\n children: \"CONSTANT\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 853,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 852,\n columnNumber: 23\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Switch to the Stair exercise\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"Stair\" ? \"primary\" : \"default\",\n onClick: handleStairAndConstantClick,\n children: \"STAIR\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 859,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 858,\n columnNumber: 23\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Switch to the Heteronyms exercise\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"Heteronym\" ? \"primary\" : \"default\",\n onClick: handleStairAndConstantClick,\n children: \"HETERONYMS\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 865,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 864,\n columnNumber: 23\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"Switch to the Human Curve exercise\",\n children: /*#__PURE__*/_jsxDEV(Dropdown, {\n menu: {\n items: itemsSyllable\n },\n placement: \"bottom\",\n children: /*#__PURE__*/_jsxDEV(Button, {\n type: component === \"Fixed\" ? \"primary\" : \"default\",\n children: syllableCount === \"none\" ? 'HUMAN CURVE' : syllableCount + ' SYLLABLE'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 871,\n columnNumber: 27\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 870,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 869,\n columnNumber: 23\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 850,\n columnNumber: 21\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 849,\n columnNumber: 19\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 840,\n columnNumber: 17\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 839,\n columnNumber: 15\n }, this), shortDescription(component), /*#__PURE__*/_jsxDEV(\"div\", {\n style: {\n width: \"100%\"\n },\n children: renderSelectedComponent()\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 890,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Flex, {\n vertical: true,\n justify: \"center\",\n wrap: \"wrap\",\n gap: \"small\",\n ref: ref2,\n children: renderSelectedComponentLyric()\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 895,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(FloatButton, {\n style: {\n width: 60,\n height: 60,\n right: 15,\n bottom: 30,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n onClick: () => setOpenSetting(true),\n ref: ref3,\n shape: \"square\",\n description: \"SETTINGS\",\n icon: /*#__PURE__*/_jsxDEV(SettingOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 912,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 899,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(FloatButton, {\n style: {\n width: 60,\n height: 60,\n right: 100,\n bottom: 30,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center'\n },\n shape: \"square\",\n description: \"TOUR\",\n onClick: handleBeginTour,\n icon: /*#__PURE__*/_jsxDEV(QuestionOutlined, {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 927,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 914,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Image, {\n preview: false,\n src: divide_1,\n style: {\n width: '100%'\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 929,\n columnNumber: 15\n }, this), /*#__PURE__*/_jsxDEV(Typography, {\n style: {\n width: \"100%\",\n paddingLeft: \"30px\",\n paddingRight: \"40px\"\n },\n children: [/*#__PURE__*/_jsxDEV(Typography.Title, {\n id: \"part-1\",\n level: 2,\n style: {\n margin: 0\n },\n children: \"How to use\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 938,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Collapse, {\n activeKey: selectedNum\n // accordion\n ,\n onChange: onChangeCollapse\n // defaultActiveKey={selectedNum} \n ,\n ghost: true,\n items: items_3\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 941,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 934,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 837,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Drawer, {\n title: \"Options\",\n placement: \"right\",\n onClose: () => setOpenSetting(false),\n open: openSetting,\n width: 430,\n children: /*#__PURE__*/_jsxDEV(Flex, {\n vertical: true,\n gap: \"middle\",\n children: [/*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Model Selection: \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 956,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Dropdown.Button, {\n menu: {\n items: itemsAvatar\n },\n placement: \"bottom\",\n trigger: [\"click\"],\n overlayClassName: \"custom-dropdown\",\n buttonsRender: ([leftButton, rightButton]) => [/*#__PURE__*/_jsxDEV(Tooltip, {\n children: /*#__PURE__*/_jsxDEV(Button, {\n style: {\n display: 'flex',\n alignItems: 'center'\n },\n onClick: handleIconClick,\n icon: /*#__PURE__*/_jsxDEV(PlayIcon, {\n style: {\n fontSize: '1.7em'\n },\n type: \"icon-audioPlay\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 972,\n columnNumber: 29\n }, this),\n children: genderName === \"none\" ? \"Model Voice\" : gender === \"Female\" ? genderName : 'Male01'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 965,\n columnNumber: 25\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 964,\n columnNumber: 23\n }, this), /*#__PURE__*/React.cloneElement(rightButton, {\n loading: false\n })]\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 958,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 955,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(AudioPlayer, {\n autoPlayAfterSrcChange: false,\n src: audioSrc,\n ref: audioPlayerNew,\n style: {\n display: 'none'\n },\n onEnded: () => console.log('audio ended'),\n onError: e => console.log('audio error', e)\n }, audioKey, false, {\n fileName: _jsxFileName,\n lineNumber: 997,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Coordinate Display Mode\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1007,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Radio.Group, {\n onChange: onChangeHz,\n value: showNotesPar ? 'notes' : 'hz',\n defaultValue: \"notes\",\n buttonStyle: \"solid\",\n children: [/*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"hz\",\n children: \" Hz \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1009,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"notes\",\n children: \"Notes\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1010,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1008,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1012,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1006,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Display Color Scheme \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1016,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Radio.Group, {\n onChange: onChangeColor,\n value: COLORSMode === 'co' ? 'co' : 'de',\n defaultValue: \"default\",\n buttonStyle: \"solid\",\n children: [/*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"de\",\n children: \"TruVox \"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1018,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Radio.Button, {\n value: \"co\",\n children: \"Colorblind\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1019,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1017,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1021,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1015,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Display Range\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1025,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n range: true,\n step: 10,\n min: 50,\n max: 600,\n onChange: onChangeRange,\n tooltip: {\n formatter: formatterHz\n },\n marks: marksRange,\n defaultValue: [100, 300]\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1026,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1024,\n columnNumber: 17\n }, this), component !== \"Fixed\" && component !== \"Stair\" && component !== \"Heteronym\" && /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Indicator Horizontal Position\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1041,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.1,\n min: 0,\n max: 1,\n onChange: onChangePosition,\n tooltip: {\n formatter: formatterPos\n },\n defaultValue: 0.5,\n marks: marksBallPos\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1042,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1040,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Pitch Indicator Speed\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1057,\n columnNumber: 19\n }, this), /*#__PURE__*/_jsxDEV(Slider, {\n step: 0.05,\n min: 0,\n max: 1,\n onChange: onChangeSpeed,\n defaultValue: 0.3,\n tooltip: {\n formatter: null\n }\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1058,\n columnNumber: 19\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1056,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n children: [/*#__PURE__*/_jsxDEV(Space, {\n children: [/*#__PURE__*/_jsxDEV(\"p\", {\n children: \"# Auto-Start When Voice Detected\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1070,\n columnNumber: 21\n }, this), /*#__PURE__*/_jsxDEV(Tooltip, {\n title: \"If enabled, an exercise will start if your microphone detects speech. If disabled, you must start exercises manually.\",\n children: /*#__PURE__*/_jsxDEV(Switch, {\n defaultChecked: false,\n onChange: EnableVoluneMode\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1072,\n columnNumber: 23\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1071,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1069,\n columnNumber: 19\n }, this), enableVol && /*#__PURE__*/_jsxDEV(Slider, {\n step: 1,\n min: 50,\n max: 90,\n onChange: onChangeThreshold,\n tooltip: {\n formatter: formatterdB\n },\n defaultValue: 70,\n marks: marksVol\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1079,\n columnNumber: 21\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 1068,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(\"br\", {}, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1093,\n columnNumber: 17\n }, this), /*#__PURE__*/_jsxDEV(Button, {\n onClick: onClose,\n children: \"Close\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1094,\n columnNumber: 17\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 953,\n columnNumber: 15\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 952,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(Tour, {\n open: openTour,\n onClose: () => setOpenTour(false),\n steps: steps\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 1097,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 835,\n columnNumber: 11\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 833,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 832,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 831,\n columnNumber: 5\n }, this)\n\n // \n ;\n};\n_s(Sample, \"zieEX9Zfe9PACq1h1Gy8gqx/zS0=\", false, function () {\n return [useOptionsHooks, useTemString, useLocation];\n});\n_c2 = Sample;\nexport default Sample;\nvar _c, _c2;\n$RefreshReg$(_c, \"PlayIcon\");\n$RefreshReg$(_c2, \"Sample\");","map":{"version":3,"names":["React","useState","useEffect","useRef","Button","Flex","SettingOutlined","CustomerServiceOutlined","Col","Row","Tour","ConfigProvider","CaretRightOutlined","LoadingOutlined","Slider","Input","Layout","Dropdown","Drawer","Radio","RedoOutlined","PauseOutlined","StepForwardOutlined","StepBackwardOutlined","Tooltip","FloatButton","Space","Switch","ConstantTxt","Fixed","Stair","Heteronym","UploadOutlined","message","Upload","hark","useLocation","Typography","Collapse","Image","divide_1","QuestionOutlined","useTemString","pdfToText","AudioPlayer","createFromIconfontCN","useOptionsHooks","Fragment","_Fragment","jsxDEV","_jsxDEV","PlayIcon","scriptUrl","_c","TextArea","Title","Paragraph","Text","Link","items","key","label","children","Content","marksRange","marksBallPos","marksVol","Sample","genderName","gender","setGender","audioKey","audioSrc","fetchAudioData","handleIconClick","itemsAvatar","_s","audioPlayerNew","items_3","stairFilenames","heteronymFilenames","shortDescription","Text_1_Rainbow","Text_2","Text_3","size","initialRange","setInitialRange","config","setConfig","SRATE","fxmin","fxlow","fxhigh","fxmax","COLORS","setCOLORS","realVoiceColor","targetVoiceColor","closeVoiceColor","COLORSMode","setCOLORSMode","openSetting","setOpenSetting","txtShow","setTxtShow","txtShowSwitch","setTxtShowSwitch","openTour","setOpenTour","isPlaying","setIsPlaying","isRetry","setIsRetry","enableVol","setEnableVol","isOpenTextbox","setIsOpenTextbox","showNextPre","setShowNextPre","showListen","setShowListen","location","ref12","ref1","ref2","ref3","parentRef","volume","setVolume","threshold","setThreshold","maxLyricCount","setMaxLyricCount","playLyricCount","setPlayLyricCount","divisor","setDivisor","ballPosition","setBallPosition","pitchDiff","setPitchDiff","avgPitchDiff","setAvgPitchDiff","showNotesPar","setShowNotesPar","component","setComponent","currentSelection","setCurrentSelection","syllableCount","setSyllableCount","baseFilenames","setBaseFilenames","fileContent","setFileContent","selectedNum","setSelectedNum","selectedDefaultText","setSelectedDefaultText","audioPlayer","audioSrcFromChild","setAudioSrcFromChild","isListen","setIsListen","setPlaying","setPlayingPause","handleBeginTour","window","scrollTo","onClose","ClearTxt","handlePitchDiffChange","value","onClick","info","console","log","handleTextInputString","Number","e","content","separators","splitContent","split","map","s","trim","filter","Boolean","length","handleTextInput","target","props","name","accept","beforeUpload","file","type","error","then","text","catch","reader","FileReader","onload","_e$target","result","readAsText","onChange","status","success","changeOnEnter","shiftKey","handleAudioSrc","newAudioSrc","playAudio","current","audio","play","navigator","mediaDevices","getUserMedia","video","stream","harkInstance","on","stop","steps","title","description","placement","cover","style","textAlign","fileName","_jsxFileName","lineNumber","columnNumber","queryParams","URLSearchParams","search","init","get","handleStairAndConstantClick","innerText","handleMenuClick","componentType","genderType","syllableCountType","tt","renderTruncatedFilenames","filenames","index","isNearEnd","startIndex","showCondition","className","handlePlayLyricCountChange","newCount","itemsSyllable","onChangeStairSwitch","renderSelectedComponent","ref","onAudioSrcChange","onPlayLyricCountChange","heteronymFile","MainButtons","justify","wrap","gap","shape","icon","autoPlayAfterSrcChange","src","display","disabled","onChangePrevious","onChangePause","onChangeNext","avgDiff","reduce","acc","isNaN","sum","count","formattedAvgPitchDiff","toFixed","parseFloat","RecordingBar","renderSelectedComponentLyric","Compact","menu","maxCount","rows","placeholder","height","resize","onKeyDown","maxIndexToShow","shouldShow","align","defaultChecked","checkedChildren","unCheckedChildren","onChangeRange","rangeValue","onChangePosition","positionValue","onChangeSpeed","speedValue","mappedValue","Math","round","onChangeHz","onChangeColor","EnableVoluneMode","tem","onChangeThreshold","formatterdB","formatterHz","formatterPos","onChangeCollapse","Array","isArray","span","vertical","marginTop","theme","token","colorPrimary","borderRadius","width","right","bottom","alignItems","justifyContent","preview","paddingLeft","paddingRight","id","level","margin","activeKey","ghost","open","trigger","overlayClassName","buttonsRender","leftButton","rightButton","fontSize","cloneElement","loading","onEnded","onError","Group","defaultValue","buttonStyle","range","step","min","max","tooltip","formatter","marks","_c2","$RefreshReg$"],"sources":["/var/www/gavt/src/Route/Sample.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { Button, Flex, } from 'antd';\nimport { SettingOutlined, CustomerServiceOutlined } from '@ant-design/icons';\nimport { Col, Row, Tour, ConfigProvider } from 'antd';\nimport { CaretRightOutlined, LoadingOutlined } from '@ant-design/icons';\nimport { Slider, Input } from 'antd';\nimport { Breadcrumb, Layout, Menu, Dropdown, theme, Avatar } from 'antd';\nimport { Drawer, Cascader, Radio } from 'antd';\nimport { RedoOutlined, PauseOutlined, StepForwardOutlined, StepBackwardOutlined } from '@ant-design/icons';\nimport { Tooltip, FloatButton, Space, Switch } from 'antd';\nimport '../CSS/sample.css';\nimport { Modal } from 'antd';\nimport ConstantTxt from '../Canvas/ConstantTxt'\nimport Fixed from '../Canvas/Fixed'\nimport Stair from '../Canvas/Stair'\nimport Heteronym from '../Canvas/Heteronym'\nimport type { RadioChangeEvent } from 'antd';\nimport type { TourProps } from 'antd';\nimport ReactAudioPlayer from 'react-audio-player';\nimport type { SliderSingleProps } from 'antd';\nimport type { UploadProps } from 'antd';\nimport { UploadOutlined, ArrowLeftOutlined, RollbackOutlined } from '@ant-design/icons';\nimport { message, Upload } from 'antd';\nimport hark from 'hark';\nimport { useLocation } from 'react-router-dom';\nimport { Typography } from 'antd';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\nimport { Image } from 'antd';\nimport divide_1 from '../icon/Divider2-half.png'\nimport { UserOutlined } from '@ant-design/icons';\nimport { QuestionOutlined } from '@ant-design/icons';\nimport { adjustCanvasScale, map, drawBackground, generateNotesAndFrequencies } from '../function/canvasDefault';\nimport { useTemString } from '../hooks/useTemString';\nimport { useCanvasHooks } from '../hooks/useCanvasHooks';\nimport type { MenuProps } from 'antd';\n// @ts-ignore\nimport pdfToText from 'react-pdftotext';\nimport useCanvasAdjustHeight from '../hooksUseEffect/useCanvasAdjustHeight';\nimport AudioPlayer from 'react-h5-audio-player';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport { useOptionsHooks } from '../hooks/useOptionsHooks';\n\nconst PlayIcon = createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/c/font_4566050_zpduwnlv2t.js',\n});\n\nconst { TextArea } = Input;\nconst { Title, Paragraph, Text, Link } = Typography;\ntype MenuTheme = 'show' | 'hide';\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n label: (<>\n The Rainbow Passage\n \n ),\n },\n {\n key: '2',\n label: (\n <>\n Grandfather\n \n ),\n },\n {\n key: '3',\n label: (\n <>\n Harvard Phonetically Balanced Sentences \n \n ),\n },\n];\n\n\n\n\nconst { Content } = Layout;\n\nconst marksRange: SliderSingleProps['marks'] = {\n 50: '50Hz',\n 600: '600Hz'\n};\n\nconst marksBallPos: SliderSingleProps['marks'] = {\n 0: '0%',\n 1: '100%'\n};\nconst marksVol: SliderSingleProps['marks'] = {\n 50: '50dB',\n 90: '90dB'\n};\n\n\ninterface SampleProps {\n genderName: string;\n gender: string;\n setGender: (str: string) => void;\n audioKey: number;\n audioSrc: string;\n fetchAudioData: () => void;\n handleIconClick: (e: React.MouseEvent) => void;\n itemsAvatar: MenuProps['items'];\n}\n\nconst Sample: React.FC = ({\n genderName, \n gender, \n setGender,\n audioKey,\n audioSrc,\n fetchAudioData,\n handleIconClick,\n itemsAvatar,\n\n}) => {\n const {\n audioPlayerNew,\n } = useOptionsHooks();\n\n // strings\n const {\n items_3,\n stairFilenames,\n heteronymFilenames,\n shortDescription,\n Text_1_Rainbow,\n Text_2,\n Text_3,\n } = useTemString();\n\n // Canvas values\n const size = [400, 1400];\n const [initialRange, setInitialRange] = useState([100, 300]);\n const [config, setConfig] = useState({\n SRATE: 48000,\n fxmin: 50,\n fxlow: 50 + 50, // This initial value will be updated by useEffect below\n fxhigh: 600 - 200, // This initial value will be updated by useEffect below\n fxmax: 600\n });\n const [COLORS, setCOLORS] = useState({\n realVoiceColor: '#d679de', \n targetVoiceColor: '#4669C8', \n closeVoiceColor: '#15dbcc', \n }\n);\nconst [COLORSMode,setCOLORSMode] = useState(\"de\");\n\n // open/close \n const [openSetting, setOpenSetting] = useState(false);\n const [txtShow, setTxtShow] = useState(\"true\");\n const [txtShowSwitch, setTxtShowSwitch] = useState('show');\n const [openTour, setOpenTour] = useState(false);\n const [isPlaying, setIsPlaying] = useState(true);\n const [isRetry, setIsRetry] = useState(false);\n const [enableVol, setEnableVol] = useState(false);\n const [isOpenTextbox, setIsOpenTextbox] = useState(false);\n const [showNextPre, setShowNextPre] = useState(false);\n const [showListen, setShowListen] = useState(false);\n\n // special vatiables\n const location = useLocation();\n const ref12 = useRef(null);\n const ref1 = useRef(null);\n const ref2 = useRef(null);\n const ref3 = useRef(null);\n const parentRef = useRef(null);\n\n // initial Value\n const [volume, setVolume] = useState(0);\n const [threshold, setThreshold] = useState(70);\n const [maxLyricCount, setMaxLyricCount] = useState(2);\n const [playLyricCount, setPlayLyricCount] = useState(0);\n const [divisor, setDivisor] = useState(10);\n const [ballPosition, setBallPosition] = useState(0.5);\n const [pitchDiff, setPitchDiff] = useState([0]);\n const [avgPitchDiff,setAvgPitchDiff] = useState();\n // Hz/Notes\n const [showNotesPar, setShowNotesPar] = useState(false);\n\n // selected choice\n const [component, setComponent] = useState(\"ConstantTxt\");\n const [currentSelection, setCurrentSelection] = useState('Constant');\n const [syllableCount, setSyllableCount] = useState(\"none\");\n const [baseFilenames, setBaseFilenames] = useState([]);\n const [fileContent, setFileContent] = useState([]);\n const [selectedNum, setSelectedNum] = useState([\"2\"]);\n const [selectedDefaultText, setSelectedDefaultText] = useState(\"1\");\n\n\n // auido\n const audioPlayer = useRef(null);\n // const audioPlayerNew = useRef(null);\n const [audioSrcFromChild, setAudioSrcFromChild] = useState('');\n const [isListen, setIsListen] = useState(1);\n\n // \n const setPlaying = () => {\n setIsPlaying(true);\n };\n const setPlayingPause = () => {\n setIsPlaying(false);\n };\n const handleBeginTour = () => {\n setOpenTour(true);\n window.scrollTo(0, 0);\n };\n const onClose = () => {\n setOpenSetting(false);\n };\n const ClearTxt = () => {\n setFileContent([]);\n setMaxLyricCount(1);\n };\n const handlePitchDiffChange = (value:number[]) => {\n setPitchDiff(value);\n };\n\n // Constant Page upload and input\n const onClick: MenuProps['onClick'] = ({ key }) => {\n message.info(`Click on item ${key}`);\n setSelectedDefaultText(key);\n };\n\n useEffect(() => {\n console.log(Text_1_Rainbow[1]);\n handleTextInputString(Text_1_Rainbow[Number(selectedDefaultText)-1]);\n },[selectedDefaultText]);\n\n const handleTextInputString = (e: string) => {\n const content = e as string;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators)\n .map(s => s.trim())\n .filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }\n\n const handleTextInput = (e: React.ChangeEvent) => {\n const content = e.target.value as string;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators)\n .map(s => s.trim())\n .filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }\n const props: UploadProps = {\n name: 'file',\n accept: '.txt, .pdf',\n beforeUpload: (file) => {\n if (file.type !== 'text/plain' && file.type !== 'application/pdf') {\n message.error(`${file.name} is not a valid text/pdf file.`);\n return false;\n }\n if (file.type === 'application/pdf') {\n pdfToText(file)\n .then((text: string) => {\n const separators = /[;,./\\n]/;\n const splitContent = text.split(separators)\n .map((s: string) => s.trim())\n .filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n })\n .catch((error: any) => { // Explicitly specify the type of 'error' parameter as 'any'\n message.error('Error reading PDF file:', error);\n });\n return false;\n }\n if (file.type === 'text/plain') {\n const reader = new FileReader();\n reader.onload = (e: ProgressEvent) => {\n if (e.target?.result) {\n const content = e.target.result as string;\n // const separators = /[;,./]/;\n const separators = /[;,./\\n]/;\n const splitContent = content.split(separators)\n .map(s => s.trim())\n .filter(Boolean);\n console.log(splitContent);\n setFileContent(splitContent);\n setMaxLyricCount(splitContent.length - 1);\n setPlayLyricCount(0);\n }\n };\n\n reader.readAsText(file);\n\n return false;\n }\n },\n onChange(info) {\n if (info.file.status === 'done') {\n message.success(`${info.file.name} file read successfully`);\n } else if (info.file.status === 'error') {\n message.error(`${info.file.name} file read failed.`);\n }\n },\n };\n const changeOnEnter = (e: any) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n console.log(\"Enter Key Pressed!\");\n handleTextInput(e);\n }\n }\n\n // audio\n const handleAudioSrc = (newAudioSrc: string) => {\n setAudioSrcFromChild(newAudioSrc);\n };\n const playAudio = () => {\n\n // if (audioPlayer.current && audioPlayer.current.audioEl.current) {\n // audioPlayer.current.audioEl.current.play()\n if (audioPlayerNew.current && audioPlayerNew.current.audio.current) {\n audioPlayerNew.current.audio.current.play()\n .then(() => {\n setIsListen(isListen + 1);\n })\n .catch(error => {\n console.error('Fail play audios: ', error);\n });\n }\n\n };\n\n // options audio\n useEffect(() => {\n fetchAudioData();\n }, [genderName]);\n\n // Volume\n useEffect(() => {\n navigator.mediaDevices.getUserMedia({ audio: true, video: false })\n .then(stream => {\n const harkInstance = hark(stream, {});\n\n harkInstance.on('volume_change', (volume, threshold) => {\n setVolume(volume);\n });\n\n return () => harkInstance.stop();\n })\n .catch(error => {\n console.error('Error accessing the microphone', error);\n });\n }, []);\n useEffect(() => {\n if (volume > threshold - 100 && enableVol) {\n setIsPlaying(true);\n }\n }, [volume]);\n\n // Tour\n const steps: TourProps['steps'] = [\n {\n title: 'Pitch Exercises',\n description: 'Switch between different exercises',\n placement: 'top',\n target: () => ref12.current,\n },\n {\n title: 'Canvas Display',\n description: 'Visualize your voice pitch and target pitch curve in real-time.',\n placement: 'top',\n target: () => ref1.current,\n },\n {\n title: 'Function Buttons',\n cover: (\n
    \n
  • Start/Stop: Begin or stop recording.
    • \n
  • Retry: Clear display and restart.
    • \n
  • Upload txt/pdf File (optional): Upload text or pdf for you (in .txt/.pdf format) to read while recording.
    • \n
  • Previous Next (if text uploaded): Switch between lines of text.
    • \n
\n ),\n target: () => ref2.current,\n },\n {\n title: 'Slider',\n description: 'Use this slides to change the target pitch value that you want to aim for.',\n target: () => parentRef.current as HTMLDivElement,\n },\n {\n title: 'Options menu',\n description: 'Adjust settings such as the pitch display range.',\n target: () => ref3.current,\n },\n\n ];\n useEffect(() => {\n const queryParams = new URLSearchParams(location.search);\n const init = queryParams.get('init');\n if (init === 'true') {\n handleBeginTour();\n }\n }, [location]);\n\n // Options of different Exercise \n const handleStairAndConstantClick = (e: any) => {\n setPlayLyricCount(0);\n setCurrentSelection(e.target.innerText);\n console.log(e.target.innerText);\n if (e.target.innerText === \"Constant\" || e.target.innerText === \"CONSTANT\") {\n setComponent(\"ConstantTxt\");\n setSelectedNum([\"2\"]);\n\n } else if (e.target.innerText === \"Stair\" || e.target.innerText === \"STAIR\") {\n setComponent(\"Stair\");\n setSelectedNum([\"3\"]);\n\n } else {\n setComponent(\"Heteronym\");\n setSelectedNum([\"4\"]);\n }\n setSyllableCount(\"none\");\n }\n \n const handleMenuClick = (e: any) => {\n setPlayLyricCount(0);\n const [componentType, genderType, syllableCountType] = e.key.split('-');\n if (componentType == \"Constant\") {\n setCurrentSelection(\"Constant\");\n } else if (componentType == \"ConstantTxt\") {\n setCurrentSelection(\"Constant\");\n } else if (componentType == \"Stair\") {\n setCurrentSelection(\"Staircase\");\n } else {\n let tt = \"Syllables \" + syllableCountType\n setCurrentSelection(tt);\n setSelectedNum([\"5\"]);\n\n }\n\n setComponent(componentType);\n setGender(genderType);\n setSyllableCount(syllableCountType);\n\n setCurrentSelection(e.key + \"syllable \" + genderName);\n };\n const renderTruncatedFilenames = (filenames: string[]) => {\n return filenames.map((text, index) => {\n const isNearEnd = filenames.length - playLyricCount <= 2;\n const startIndex = isNearEnd ? filenames.length - 3 : playLyricCount;\n const showCondition = index >= startIndex && index <= startIndex + 2;\n return (\n showCondition && (\n
  • {text}
    • \n )\n );\n });\n };\n const handlePlayLyricCountChange = (newCount: number) => {\n setPlayLyricCount(newCount);\n };\n\n\n /**\n * Defines the items for the syllable menu based on the gender.\n * If the gender is 'none', it only includes a single item prompting the user to select an avatar.\n * Otherwise, it includes multiple items representing the number of syllables, with corresponding click handlers.\n */\n const itemsSyllable: MenuProps['items'] = gender === 'none' ? [\n {\n key: 'SelectAvatar',\n label: 'Please select avatar',\n },\n ] : [\n {\n key: `Fixed-${gender}-2`,\n label: \"2 syllables\",\n onClick: handleMenuClick,\n },\n {\n key: `Fixed-${gender}-3`,\n label: \"3 syllables\",\n onClick: handleMenuClick,\n },\n {\n key: `Fixed-${gender}-4`,\n label: \"4 syllables\",\n onClick: handleMenuClick,\n },\n {\n key: `Fixed-${gender}-5`,\n label: \"5 syllables\",\n onClick: handleMenuClick,\n },\n ];\n const onChangeStairSwitch = (value: boolean) => {\n setTxtShowSwitch(value ? 'hide' : 'show');\n setTxtShow(value ? 'true' : 'false');\n };\n const renderSelectedComponent = (): React.ReactNode => {\n switch (component) {\n // case 'Constant':\n // return ;\n case 'ConstantTxt':\n return ;\n case 'Stair':\n return ;\n case 'Fixed':\n return ;\n case 'Heteronym':\n return ;\n default:\n return Canvas: Picture;\n }\n }\n const MainButtons = (): React.ReactNode => {\n return (\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n <>\n {isOpenTextbox && fileContent.length === 0 && (\n