From 5bd432a85f32bfc978937b834cfc59c6edb6ddae Mon Sep 17 00:00:00 2001
From: "Charlie.Wei" <luowei@cvte.com>
Date: Sat, 25 May 2024 12:55:04 +0800
Subject: [PATCH] Fix tts audition (#4637)

Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
---
 web/app/components/app/chat/answer/index.tsx  |  1 +
 .../chat-group/text-to-speech/index.tsx       |  5 +-
 .../app/text-generate/item/index.tsx          |  1 +
 .../app/text-generate/saved-items/index.tsx   |  1 +
 web/app/components/base/audio-btn/index.tsx   | 51 ++++++++++++-------
 .../base/chat/chat/answer/operation.tsx       |  1 +
 .../feature-panel/text-to-speech/index.tsx    |  1 +
 7 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/web/app/components/app/chat/answer/index.tsx b/web/app/components/app/chat/answer/index.tsx
index f96c91d57b..1ba033911a 100644
--- a/web/app/components/app/chat/answer/index.tsx
+++ b/web/app/components/app/chat/answer/index.tsx
@@ -375,6 +375,7 @@ const Answer: FC<IAnswerProps> = ({
                         <div className='mx-1 w-[1px] h-[14px] bg-gray-200'/>
                         <AudioBtn
                           value={content}
+                          noCache={false}
                           className={cn(s.playBtn)}
                         />
                       </>
diff --git a/web/app/components/app/configuration/features/chat-group/text-to-speech/index.tsx b/web/app/components/app/configuration/features/chat-group/text-to-speech/index.tsx
index 02cac061b4..4bb66cb635 100644
--- a/web/app/components/app/configuration/features/chat-group/text-to-speech/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/text-to-speech/index.tsx
@@ -41,13 +41,14 @@ const TextToSpeech: FC = () => {
             <AudioBtn
               value={languageInfo?.example}
               voice={voiceItem?.value}
-              isAudition={true}
+              isAudition
+              noCache
             />
           )}
         </div>
       }
       noBodySpacing
-      isShowTextToSpeech={true}
+      isShowTextToSpeech
     />
   )
 }
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index e8b98e554d..be7328d448 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -422,6 +422,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                     <div className='ml-2 mr-2 h-[14px] w-[1px] bg-gray-200'></div>
                     <AudioBtn
                       value={content}
+                      noCache={false}
                       className={'mr-1'}
                     />
                   </>
diff --git a/web/app/components/app/text-generate/saved-items/index.tsx b/web/app/components/app/text-generate/saved-items/index.tsx
index f63ebdfbc0..8cd16d5aae 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -78,6 +78,7 @@ const SavedItems: FC<ISavedItemsProps> = ({
                       <div className='ml-2 mr-2 h-[14px] w-[1px] bg-gray-200'></div>
                       <AudioBtn
                         value={answer}
+                        noCache={false}
                         className={'mr-1'}
                       />
                     </>
diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 8aee0b5f51..0dd8a35edd 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -13,6 +13,7 @@ type AudioBtnProps = {
   voice?: string
   className?: string
   isAudition?: boolean
+  noCache: boolean
 }
 
 type AudioState = 'initial' | 'loading' | 'playing' | 'paused' | 'ended'
@@ -22,6 +23,7 @@ const AudioBtn = ({
   voice,
   className,
   isAudition,
+  noCache,
 }: AudioBtnProps) => {
   const audioRef = useRef<HTMLAudioElement | null>(null)
   const [audioState, setAudioState] = useState<AudioState>('initial')
@@ -38,12 +40,12 @@ const AudioBtn = ({
 
   const loadAudio = async () => {
     const formData = new FormData()
+    formData.append('text', removeCodeBlocks(value))
+    formData.append('voice', removeCodeBlocks(voice))
+
     if (value !== '') {
       setAudioState('loading')
 
-      formData.append('text', removeCodeBlocks(value))
-      formData.append('voice', removeCodeBlocks(voice))
-
       let url = ''
       let isPublic = false
 
@@ -72,15 +74,16 @@ const AudioBtn = ({
     }
   }
 
-  const handleToggle = () => {
-    if (audioState === 'initial')
-      loadAudio()
-    if (audioRef.current) {
+  const handleToggle = async () => {
+    if (audioState === 'initial' || noCache) {
+      await loadAudio()
+    }
+    else if (audioRef.current) {
       if (audioState === 'playing') {
         audioRef.current.pause()
         setAudioState('paused')
       }
-      else if (audioState === 'paused' || audioState === 'ended') {
+      else {
         audioRef.current.play()
         setAudioState('playing')
       }
@@ -89,27 +92,31 @@ const AudioBtn = ({
 
   useEffect(() => {
     const currentAudio = audioRef.current
+
     const handleLoading = () => {
       setAudioState('loading')
     }
+
     const handlePlay = () => {
       currentAudio?.play()
       setAudioState('playing')
     }
+
     const handleEnded = () => {
       setAudioState('ended')
     }
+
     currentAudio?.addEventListener('progress', handleLoading)
     currentAudio?.addEventListener('canplaythrough', handlePlay)
     currentAudio?.addEventListener('ended', handleEnded)
+
     return () => {
-      if (currentAudio) {
-        currentAudio.removeEventListener('progress', handleLoading)
-        currentAudio.removeEventListener('canplaythrough', handlePlay)
-        currentAudio.removeEventListener('ended', handleEnded)
-        URL.revokeObjectURL(currentAudio.src)
-        currentAudio.src = ''
-      }
+      currentAudio?.removeEventListener('progress', handleLoading)
+      currentAudio?.removeEventListener('canplaythrough', handlePlay)
+      currentAudio?.removeEventListener('ended', handleEnded)
+      URL.revokeObjectURL(currentAudio?.src || '')
+      currentAudio?.pause()
+      currentAudio?.setAttribute('src', '')
     }
   }, [])
 
@@ -131,9 +138,17 @@ const AudioBtn = ({
         <button
           disabled={audioState === 'loading'}
           className={`box-border p-0.5 flex items-center justify-center cursor-pointer ${isAudition || '!p-0 rounded-md bg-white'}`}
-          onClick={handleToggle}>
-          {audioState === 'loading' && <div className='w-6 h-6 rounded-md flex items-center justify-center p-2'><Loading /></div>}
-          {audioState !== 'loading' && <div className={`w-6 h-6 rounded-md ${!isAudition ? 'w-4 h-4 hover:bg-gray-50' : 'hover:bg-gray-50'} ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>}
+          onClick={handleToggle}
+        >
+          {audioState === 'loading'
+            ? (
+              <div className='w-6 h-6 rounded-md flex items-center justify-center p-2'>
+                <Loading />
+              </div>
+            )
+            : (
+              <div className={`w-6 h-6 rounded-md ${!isAudition ? 'w-4 h-4 hover:bg-gray-50' : 'hover:bg-gray-50'} ${(audioState === 'playing') ? s.pauseIcon : s.playIcon}`}></div>
+            )}
         </button>
       </Tooltip>
       <audio ref={audioRef} src='' className='hidden' />
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 568c094d1d..b63b7077b8 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -120,6 +120,7 @@ const Operation: FC<OperationProps> = ({
                 <div className='mx-1 w-[1px] h-[14px] bg-gray-200'/>
                 <AudioBtn
                   value={content}
+                  noCache={false}
                   voice={config?.text_to_speech?.voice}
                   className='hidden group-hover:block'
                 />
diff --git a/web/app/components/base/features/feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/feature-panel/text-to-speech/index.tsx
index e49f231db8..f2f067a61e 100644
--- a/web/app/components/base/features/feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/feature-panel/text-to-speech/index.tsx
@@ -47,6 +47,7 @@ const TextToSpeech = ({
         { languageInfo?.example && (
           <AudioBtn
             value={languageInfo?.example}
+            noCache={false}
             isAudition={true}
           />
         )}