Fix typo: speach should be speech

 - Fixed typo in cdk.json: restrictSqsDescryption restrictSqsDescription

- Renamed useSpeach.ts to useSpeech.ts

- Updated all related function and variable names in TranslatePage.tsx

- Fixed synthesizeSpeach synthesizeSpeech

- Fixed speachIsLoading speechIsLoading

- Fixed isSpeachPlaying isSpeechPlaying

- Fixed handleSpeachEnded handleSpeechEnded

- Fixed startOrStopSpeach startOrStopSpeech

- Fixed speachUrl speechUrl

 -m Resolves

Author: hide-G

packages/cdk/cdk.json

@@ -64,9 +64,7 @@
     "inlineAgents": false,
     "mcpEnabled": false,
     "flows": [],
-    "agentBuilderEnabled": false,
     "createGenericAgentCoreRuntime": false,
-    "agentCoreRegion": null,
     "agentCoreExternalRuntimes": [],
     "allowedIpV4AddressRanges": null,
     "allowedIpV6AddressRanges": null,
@@ -97,7 +95,7 @@
     "@aws-cdk/core:validateSnapshotRemovalPolicy": true,
     "@aws-cdk/aws-codepipeline:crossAccountKeyAliasStackSafeResourceName": true,
     "@aws-cdk/aws-s3:createDefaultLoggingPolicy": true,
-    "@aws-cdk/aws-sns-subscriptions:restrictSqsDescryption": true,
+    "@aws-cdk/aws-sns-subscriptions:restrictSqsDescription": true,
     "@aws-cdk/aws-apigateway:disableCloudWatchRole": true,
     "@aws-cdk/core:enablePartitionLiterals": true,
     "@aws-cdk/aws-events:eventsTargetQueueSameAccount": true,

packages/web/src/hooks/useSpeach.ts packages/web/src/hooks/useSpeech.tspackages/web/src/hooks/useSpeach.ts renamed to packages/web/src/hooks/useSpeech.ts

@@ -17,7 +17,7 @@ const LanguageVoiceMapping: Record<string, VoiceId> = {
   de: 'Vicki',
 };
 
-const useSpeach = (language: string) => {
+const useSpeech = (language: string) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [voiceId, setVoiceId] = useState<VoiceId>('Joanna');
@@ -33,7 +33,7 @@ const useSpeach = (language: string) => {
 
   return {
     loading,
-    synthesizeSpeach: async (text: string): Promise<string> => {
+    synthesizeSpeech: async (text: string): Promise<string> => {
       setLoading(true);
 
       const token = (await fetchAuthSession()).tokens?.idToken?.toString();
@@ -87,4 +87,4 @@ const useSpeach = (language: string) => {
   };
 };
 
-export default useSpeach;
+export default useSpeech;

packages/web/src/pages/TranslatePage.tsx

@@ -31,7 +31,7 @@ import { TranslatePageQueryParams } from '../@types/navigate';
 import { MODELS } from '../hooks/useModel';
 import { getPrompter } from '../prompts';
 import queryString from 'query-string';
-import useSpeach from '../hooks/useSpeach';
+import useSpeech from '../hooks/useSpeech';
 import { useTranslation } from 'react-i18next';
 
 const languages = ['en', 'ja', 'zh', 'ko', 'fr', 'es', 'de', 'th', 'vi'];
@@ -125,7 +125,7 @@ const TranslatePage: React.FC = () => {
   const stopReason = getStopReason();
   const [auto, setAuto] = useLocalStorageBoolean('Auto_Translate', true);
   const [audio, setAudioInput] = useState(false); // Audio input flag
-  const { synthesizeSpeach, loading: speachIsLoading } = useSpeach(language);
+  const { synthesizeSpeech, loading: speechIsLoading } = useSpeech(language);
 
   useEffect(() => {
     updateSystemContextByModel();
@@ -257,41 +257,41 @@ const TranslatePage: React.FC = () => {
   }, []);
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
-  const [isSpeachPlaying, setIsSpeachPlaying] = useState(false);
+  const [isSpeechPlaying, setIsSpeechPlaying] = useState(false);
 
-  const handleSpeachEnded = useCallback(() => {
-    setIsSpeachPlaying(false);
-  }, [setIsSpeachPlaying]);
+  const handleSpeechEnded = useCallback(() => {
+    setIsSpeechPlaying(false);
+  }, [setIsSpeechPlaying]);
 
-  const startOrStopSpeach = useCallback(async () => {
-    if (speachIsLoading) return;
+  const startOrStopSpeech = useCallback(async () => {
+    if (speechIsLoading) return;
 
     // If it is playing, stop it
-    if (isSpeachPlaying && audioRef.current) {
-      setIsSpeachPlaying(false);
+    if (isSpeechPlaying && audioRef.current) {
+      setIsSpeechPlaying(false);
 
       audioRef.current.pause();
       audioRef.current.currentTime = 0;
       audioRef.current = null;
       return;
     }
 
-    setIsSpeachPlaying(true);
+    setIsSpeechPlaying(true);
 
-    const speachUrl = await synthesizeSpeach(translatedSentence);
-    const audio = new Audio(speachUrl!);
+    const speechUrl = await synthesizeSpeech(translatedSentence);
+    const audio = new Audio(speechUrl!);
 
     audioRef.current = audio;
-    audio.addEventListener('ended', handleSpeachEnded);
+    audio.addEventListener('ended', handleSpeechEnded);
     audio.play();
   }, [
     translatedSentence,
-    synthesizeSpeach,
+    synthesizeSpeech,
     audioRef,
-    setIsSpeachPlaying,
-    isSpeachPlaying,
-    handleSpeachEnded,
-    speachIsLoading,
+    setIsSpeechPlaying,
+    isSpeechPlaying,
+    handleSpeechEnded,
+    speechIsLoading,
   ]);
 
   return (
@@ -381,8 +381,8 @@ const TranslatePage: React.FC = () => {
                   </div>
                 )}
                 <div className="flex w-full justify-end">
-                  <ButtonIcon onClick={startOrStopSpeach}>
-                    {isSpeachPlaying ? (
+                  <ButtonIcon onClick={startOrStopSpeech}>
+                    {isSpeechPlaying ? (
                       <PiSpeakerSimpleHighFill />
                     ) : (
                       <PiSpeakerSimpleHigh />