From 8cc68b83cbda2333dc5cc212658461a6b55e4472 Mon Sep 17 00:00:00 2001
From: Taichiro Suzuki <taichirs@amazon.co.jp>
Date: Fri, 30 Aug 2024 16:02:16 +0900
Subject: [PATCH] fix

---
 packages/web/src/hooks/useSpeach.ts      | 31 +++++++++++++++++++++---
 packages/web/src/pages/TranslatePage.tsx | 18 ++++++--------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/hooks/useSpeach.ts b/packages/web/src/hooks/useSpeach.ts
index 8003ed0f..f4e646dd 100644
--- a/packages/web/src/hooks/useSpeach.ts
+++ b/packages/web/src/hooks/useSpeach.ts
@@ -1,11 +1,33 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { fetchAuthSession } from 'aws-amplify/auth';
 import { fromCognitoIdentityPool } from '@aws-sdk/credential-provider-cognito-identity';
 import { CognitoIdentityClient } from '@aws-sdk/client-cognito-identity';
-import { Polly, SynthesizeSpeechCommand } from '@aws-sdk/client-polly';
+import { Polly, SynthesizeSpeechCommand, VoiceId } from '@aws-sdk/client-polly';
 
-const useSpeach = () => {
+// Engine=neural のものが指定可能
+// https://docs.aws.amazon.com/ja_jp/polly/latest/dg/available-voices.html
+const LanguageVoiceMapping: Record<string, VoiceId> = {
+  英語: 'Joanna',
+  日本語: 'Kazuha',
+  中国語: 'Zhiyu',
+  韓国語: 'Seoyeon',
+  フランス語: 'Lea',
+  スペイン語: 'Lucia',
+  ドイツ語: 'Vicki',
+};
+
+const useSpeach = (language: string) => {
   const [loading, setLoading] = useState(false);
+  const [voiceId, setVoiceId] = useState<VoiceId>('Joanna');
+
+  useEffect(() => {
+    const tmpVoiceId = LanguageVoiceMapping[language];
+    if (tmpVoiceId) {
+      setVoiceId(tmpVoiceId);
+    } else {
+      console.error(`No voiceId found for language ${language}`);
+    }
+  }, [language]);
 
   return {
     loading,
@@ -39,7 +61,8 @@ const useSpeach = () => {
       const command = new SynthesizeSpeechCommand({
         Text: text,
         OutputFormat: 'mp3',
-        VoiceId: 'Joanna', // TODO: 多言語対応
+        VoiceId: voiceId,
+        Engine: 'neural',
       });
 
       const response = await polly.send(command);
diff --git a/packages/web/src/pages/TranslatePage.tsx b/packages/web/src/pages/TranslatePage.tsx
index 10a920a2..b15c6bd2 100644
--- a/packages/web/src/pages/TranslatePage.tsx
+++ b/packages/web/src/pages/TranslatePage.tsx
@@ -131,7 +131,7 @@ const TranslatePage: React.FC = () => {
   const stopReason = getStopReason();
   const [auto, setAuto] = useLocalStorageBoolean('Auto_Translate', true);
   const [audio, setAudioInput] = useState(false); // 音声入力フラグ
-  const { synthesizeSpeach, loading: speachIsLoading } = useSpeach();
+  const { synthesizeSpeach, loading: speachIsLoading } = useSpeach(language);
 
   useEffect(() => {
     updateSystemContextByModel();
@@ -381,15 +381,13 @@ const TranslatePage: React.FC = () => {
                   </div>
                 )}
                 <div className="flex w-full justify-end">
-                  {language === '英語' && (
-                    <ButtonIcon onClick={startOrStopSpeach}>
-                      {isSpeachPlaying ? (
-                        <PiSpeakerSimpleHighFill />
-                      ) : (
-                        <PiSpeakerSimpleHigh />
-                      )}
-                    </ButtonIcon>
-                  )}
+                  <ButtonIcon onClick={startOrStopSpeach}>
+                    {isSpeachPlaying ? (
+                      <PiSpeakerSimpleHighFill />
+                    ) : (
+                      <PiSpeakerSimpleHigh />
+                    )}
+                  </ButtonIcon>
                   <ButtonCopy
                     text={translatedSentence}
                     interUseCasesKey="translatedSentence"></ButtonCopy>