adrianhajdin · donejeh · Jan 17, 2023 · Jan 17, 2023 · Jan 17, 2023 · Jan 17, 2023
diff --git a/.gitignore b/.gitignore
@@ -23,5 +23,7 @@ dist-ssr
 *.sln
 *.sw?
 
+client/node_modules
+server/node_modules
 # env
 .env
diff --git a/1.png b/1.png
diff --git a/2.png b/2.png
diff --git a/README.md b/README.md
@@ -1,4 +1,36 @@
-# Build and Deploy Your Own ChatGPT AI Application That Will Help You Code
+
+
+# Build and Deploy Your Own ChatGPT AI with audio Application That Will Help You Code
+## A Few Screenshots
+
 ![Open AI CodeGPT](https://i.ibb.co/LS4DRhb/image-257.png)
 
+## To run this project
+
+-  cd to into server and 
+``
+Run npm install
+``
+
+-  cd to into client and 
+``
+Run npm install
+``
+
+- Get your API KEY at https://beta.openai.com/account/api-keys
+
+- Create .env file inside server folder and paste your generated key
+
+#inside server
+``
+Run npm run server
+``
+#inside client
+``
+Run npm run dev
+``
+
+![Alt text](1.png?raw=true "Title")
+![Alt text](2.PNG?raw=true "Title")
+
 ### Launch your development career with project-based coaching - https://www.jsmastery.pro
diff --git a/client/assets/microphone-off.svg b/client/assets/microphone-off.svg
diff --git a/client/assets/microphone-on.svg b/client/assets/microphone-on.svg
diff --git a/client/assets/microphone-svgrepo-com.svg b/client/assets/microphone-svgrepo-com.svg
diff --git a/client/index.html b/client/index.html
@@ -9,10 +9,12 @@
   </head>
   <body>
     <div id="app">
-      <div id="chat_container"></div>
+      <div class="chat_container" id="chat_container"></div>
 
       <form>
-        <textarea name="prompt" rows="1" cols="1" placeholder="Ask codex..."></textarea>
+        <img id="micOn" src="assets/microphone-off.svg" alt="mic off" />
+        <img id="micOff" style="display: none;" src="assets/microphone-on.svg" alt="mic ff" />
+        <textarea id="prompt" name="prompt" rows="1" cols="1" placeholder="Ask codex..."></textarea>
         <button type="submit"><img src="assets/send.svg" alt="send" />
       </form>
     </div>

diff --git a/client/script.js b/client/script.js
@@ -5,6 +5,8 @@ const form = document.querySelector('form')
 const chatContainer = document.querySelector('#chat_container')
 
 let loadInterval
+let speechRecognition = null;
+
 
 function loader(element) {
     element.textContent = ''
@@ -62,6 +64,85 @@ function chatStripe(isAi, value, uniqueId) {
     )
 }
 
+function micControl(isRecording){
+
+    if(isRecording){
+        document.querySelector("#micOn").style.display = "none";
+        document.querySelector("#micOff").style.display = "inline";
+    }else{
+
+        document.querySelector("#micOn").style.display = "inline";
+        document.querySelector("#micOff").style.display = "none";
+    }
+    speechRecognition.stop(); 
+
+}
+
+function speechText(){
+    if ("webkitSpeechRecognition" in window) {
+        // Initialize webkitSpeechRecognition
+         speechRecognition = new webkitSpeechRecognition();
+
+        // String for the Final Transcript
+        let final_transcript = "";
+
+        // Set the properties for the Speech Recognition object
+        speechRecognition.continuous = false;
+        speechRecognition.interimResults = true;
+
+        // Callback Function for the onStart Event
+        speechRecognition.onstart = () => {
+          // Show the Status Element
+          micControl(true);
+        };
+        speechRecognition.onerror = () => {
+          // Hide the Status Element
+          micControl(false);
+        };
+        speechRecognition.onend = () => {
+          // Hide the Status Element
+          micControl(false);
+        };
+
+        speechRecognition.onresult = (event) => {
+          // Create the interim transcript string locally because we don't want it to persist like final transcript
+          let interim_transcript = "";
+
+          // Loop through the results from the speech recognition object.
+          for (let i = event.resultIndex; i < event.results.length; ++i) {
+            // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
+            if (event.results[i].isFinal) {
+              final_transcript += event.results[i][0].transcript;
+            } else {
+              interim_transcript += event.results[i][0].transcript;
+            }
+          }
+
+          // Set the Final transcript and Interim transcript.
+        document.querySelector("#prompt").innerHTML = final_transcript+''+interim_transcript;
+         // var interim = document.querySelector("#interim").innerHTML = interim_transcript;
+         speechRecognition.stop();
+        };
+
+      } else {
+        console.log("Speech Recognition Not Available");
+      }
+}
+
+ // Set the onClick property of the start button
+ document.querySelector("#micOn").onclick = () => {
+
+    speechText();
+    // Start the Speech Recognition
+    speechRecognition.start();
+  };
+  // Set the onClick property of the stop button
+  document.querySelector("#micOff").onclick = () => {
+    // Stop the Speech Recognition
+    speechText();
+    speechRecognition.stop();
+  };
+
 const handleSubmit = async (e) => {
     e.preventDefault()
 
@@ -72,6 +153,8 @@ const handleSubmit = async (e) => {
 
     // to clear the textarea input 
     form.reset()
+    document.querySelector("#prompt").value= '';
+    micControl(false);
 
     // bot's chatstripe
     const uniqueId = generateUniqueId()
@@ -86,7 +169,7 @@ const handleSubmit = async (e) => {
     // messageDiv.innerHTML = "..."
     loader(messageDiv)
 
-    const response = await fetch('https://codex-im0y.onrender.com/', {
+    const response = await fetch('http://localhost:5000/', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -104,17 +187,24 @@ const handleSubmit = async (e) => {
         const parsedData = data.bot.trim() // trims any trailing spaces/'\n' 
 
         typeText(messageDiv, parsedData)
+
     } else {
         const err = await response.text()
 
         messageDiv.innerHTML = "Something went wrong"
         alert(err)
     }
+
+    speechRecognition.abort();
+    speechRecognition.stop();
 }
 
+
+
 form.addEventListener('submit', handleSubmit)
 form.addEventListener('keyup', (e) => {
     if (e.keyCode === 13) {
         handleSubmit(e)
     }
+    speechRecognition.abort();
 })
diff --git a/package-lock.json b/package-lock.json
diff --git a/server/server.js b/server/server.js
@@ -17,7 +17,7 @@ app.use(express.json())
 
 app.get('/', async (req, res) => {
   res.status(200).send({
-    message: 'Hello from CodeX!'
+    message: 'Hello from enhance CodeX!'
   })
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,5 +23,7 @@ dist-ssr @@
     *.sln
     *.sw?
+    client/node_modules
+    server/node_modules
     # env
     .env