fixing TypeErrors

imrany · Oct 21, 2024 · 6a40741 · 6a40741
1 parent 416761b
commit 6a40741
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 38 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,6 @@ import SearchPage from "./pages/SearchPage.tsx";
 import LandingPage from "./pages/LandingPage.tsx";
 import * as cocossd from "@tensorflow-models/coco-ssd";
 import { GlobalContext } from "./context";
-import { textToSpeech } from "./components/utilities.ts"
 
 export default function App(){
     const API_URL=`https://gemmie.onrender.com`
@@ -21,7 +20,7 @@ export default function App(){
         height: 720,
         facingMode: "user"
     })
-    const voiceCommands=["SPEAK","SEARCH","RELOAD","UNMUTE","MUTE","START", "BACK"]
+    const voiceCommands=["SPEAK","SEARCH","RELOAD","UNMUTE","MUTE","START", "BACK", "READ"]
 
     // Main function
     const runCoco = async () => {
@@ -49,7 +48,8 @@ export default function App(){
         }
     }
 
-    let recognition:any = window.SpeechRecognition ? window.SpeechRecognition : window.webkitSpeechRecognition; 
+    let recognition = 
+        window.SpeechRecognition || window.webkitSpeechRecognition; 
     if(recognition){
         recognition = new recognition();   
         recognition.continuous = true;
@@ -67,8 +67,10 @@ export default function App(){
                 .join('') 
              */    
             const result=e.results
-            const transcript=result[result.length-1][result[0].length-1].transcript
-            setVoiceInput(transcript.toUpperCase()); 
+            const transcript=result[result.length-1][result[0].length-1].transcript.toUpperCase()
+            const update=transcript.includes('.')?transcript.replace('.',''):transcript;
+            setVoiceInput(update); 
+            recognition.stop()
         }); 
 
         //if (speech) { 

diff --git a/src/components/ui/Microphone.tsx b/src/components/ui/Microphone.tsx
@@ -6,9 +6,9 @@ export default function Microphone(){
     const { recognition }=useContext(GlobalContext);
     return(
         <button onClick={()=>{
-            //window.speechSynthesis.cancel()
+            window.speechSynthesis.cancel()
             recognition.start()
-        }} className="fixed right-5 bottom-10 z-20 shadow-md bg-white rounded-[50px]">
+        }} className="fixed right-5 bottom-10 z-30 shadow-md bg-white rounded-[50px]">
             <div className="flex items-center justify-center h-[50px] w-[50px]">
                 <CiMicrophoneOn className="w-[24px] h-[24px]"/>
             </div>

diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
@@ -8,7 +8,7 @@ import Microphone from "../components/ui/Microphone.tsx";
 
 export default function LandingPage(){
     const navigate=useNavigate();
-    const { isLoading, voiceInput,voiceCommands, recognition }=useContext(GlobalContext);
+    const { isLoading, voiceInput,voiceCommands }=useContext(GlobalContext);
 
     const heroSectionContent=[
         "Experts on Special needs and Vision Loss",
@@ -29,22 +29,32 @@ export default function LandingPage(){
         "If you would like to contact, say contact us"
     ]
 
+    function readSection(contents:string[]){
+        localStorage.setItem("audio","unmute")
+        contents.map((content:string)=>{
+            textToSpeech(content)
+        })
+    }
+
     useEffect(()=>{
         if(voiceInput.length>0){
             console.log(voiceInput)
             if(voiceCommands.includes(voiceInput)){
-                if(voiceInput==voiceCommands[0]||voiceInput==voiceCommands[3]){
+                if(voiceInput==voiceCommands[0]||voiceInput==voiceCommands[7]){
+                    readSection(heroSectionContent)
+                    readSection(middleSectionContent)
+                }else if(voiceInput==voiceCommands[3]){
                     localStorage.setItem("audio","unmute")
-                    window.speechSynthesis.start()
-                    console.log("here unmuted")
-                    textToSpeech("unmuted")
+                    console.log("unmuted")
                 }else if(voiceInput==voiceCommands[2]){
                     window.location.reload()
                 }else if(voiceInput==voiceCommands[4]){
-                    textToSpeech("muting")
                     localStorage.setItem("audio","mute")
+                    console.log("muted")
                 }else if(voiceInput==voiceCommands[5]){
                     navigate("/main")
+                }else{
+                    textToSpeech("You cannot use that prompt on this page.")
                 }
             }else{
                 textToSpeech("Please use")
@@ -95,12 +105,7 @@ export default function LandingPage(){
                     </div>
                 </div>
             </div>
-            <div onDoubleClick={()=>{
-                localStorage.setItem("audio","unmute")
-                heroSectionContent.map((content:string)=>{
-                    textToSpeech(content)
-                })
-            }} className="flex relative flex-col gap-6 items-center justify-center text-gray-100 h-[65vh] bg-[url('/images/support-the-africa-child.png')] bg-cover bg-no-repeat bg-center">
+            <div onDoubleClick={()=>readSection(heroSectionContent)} className="flex relative flex-col gap-6 items-center justify-center text-gray-100 h-[65vh] bg-[url('/images/support-the-africa-child.png')] bg-cover bg-no-repeat bg-center">
                 <div className="absolute inset-0 bg-black bg-opacity-50"></div>
                 <div className="relative text-2xl w-[80vw] font-bold text-center">
                     <p>{heroSectionContent[0]}</p>
@@ -118,24 +123,14 @@ export default function LandingPage(){
                     }
                 }}  className="relative shadow-md h-[40px] w-[150px] rounded-[50px] bg-white hover:bg-blue-500 hover:text-white active:bg-blue-500 active:text-white flex items-center justify-center text-blue-500">Get Started</button>
             </div>
-            <div onDoubleClick={()=>{
-                localStorage.setItem("audio","unmute")
-                middleSectionContent.map((content:string)=>{
-                    textToSpeech(content)
-                })
-            }}  className="mx-3 my-10">
+            <div onDoubleClick={()=>readSection(middleSectionContent)}  className="mx-3 my-10">
                 <div className="flex flex-col gap-1">
                     <p className="text-base font-semibold text-gray-800">{middleSectionContent[0]}</p>
                     <p className="text-sm">{middleSectionContent[1]}</p>
                     <p className="text-sm">{middleSectionContent[2]}</p>
                 </div>
             </div>
-            <footer onDoubleClick={()=>{
-                localStorage.setItem("audio","unmute")
-                footerSectionContent.map((content:string)=>{
-                    textToSpeech(content)
-                })
-            }} className="px-4 py-6 bg-blue-500 text-white flex ">
+            <footer onDoubleClick={()=>readSection(footerSectionContent)} className="px-4 py-6 bg-blue-500 text-white flex ">
                 <div className="flex flex-col gap-2">
                     <p className="text-lg font-semibold">{footerSectionContent[0]}</p>
                     <div className="text-sm flex flex-col gap-1">

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -5,11 +5,12 @@ import Webcam from "react-webcam";
 import * as tf from "@tensorflow/tfjs";
 //import * as cpu from "@tensorflow/tfjs-backend-cpu";
 //import * as webgl from "@tensorflow/tfjs-backend-webgl";
-import { drawRect } from "../components/utilities";
+import { drawRect, textToSpeech } from "../components/utilities";
 import { GlobalContext } from "../context";
 import { IoSearch } from "react-icons/io5";
 import { IoCameraReverseSharp } from "react-icons/io5";
 import { HiMiniSpeakerXMark, HiMiniSpeakerWave } from "react-icons/hi2";
+import Microphone from "../components/ui/Microphone.tsx";
 
 export default function MainPage() {
   const navigate=useNavigate();
@@ -68,12 +69,36 @@ export default function MainPage() {
   useEffect(()=>{
     if(voiceInput.length>0){
         console.log(voiceInput)
-    }else{
-        window.speechSynthesis.cancel()
-        setInterval(() => {
-            detect(net);
-        }, 10);
+        if(voiceCommands.includes(voiceInput)){
+            if(voiceInput==voiceCommands[0]){
+                localStorage.setItem("audio","unmute")
+                console.log("unmuted")
+            }else if(voiceInput==voiceCommands[3]){
+                localStorage.setItem("audio","unmute")
+                console.log("unmuted")
+            }else if(voiceInput==voiceCommands[1]){
+                capture()
+            }else if(voiceInput==voiceCommands[2]){
+                window.location.reload()
+            }else if(voiceInput==voiceCommands[4]){
+                localStorage.setItem("audio","mute")
+                console.log("muted")
+            }else if(voiceInput==voiceCommands[6]){
+                navigate(-1)
+            }else{
+                textToSpeech("You cannot use that prompt on this page.")
+            }
+        }else{
+            textToSpeech("Please use")
+            voiceCommands.map((command:string)=>{
+                textToSpeech(command)
+            })
+            textToSpeech("to interact")
+        }
     }
+    setInterval(() => {
+        detect(net);
+    }, 10);
   },[isLoading, voiceInput]);
 
   return (
@@ -84,6 +109,7 @@ export default function MainPage() {
                 </div>
             ):(
                 <div className="text-center h-screen">
+                    <Microphone/>
                     <header className="h-screen flex flex-col items-center justify-center text-white bg-[#14161a]">
                         <div className="fixed h-[0px] z-10 top-0 left-0 right-0">
                             <div className="flex bg-none text-white items-center justify-between m-[20px]">

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -0,0 +1,8 @@
+export {};
+
+declare global {
+  interface Window {
+    SpeechRecognition: any; // or the specific type if you know it
+    webkitSpeechRecognition: any; // or the specific type if you know it
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -5,7 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
+    "typeRoots": ["./node_modules/@types", "./src/types"],
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,