diff --git a/.gitignore b/.gitignore
index 6ec9e51d..b6df4aa8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,5 +23,7 @@ dist-ssr
*.sln
*.sw?
+client/node_modules
+server/node_modules
# env
.env
\ No newline at end of file
diff --git a/1.png b/1.png
new file mode 100644
index 00000000..ad52851c
Binary files /dev/null and b/1.png differ
diff --git a/2.png b/2.png
new file mode 100644
index 00000000..0b289008
Binary files /dev/null and b/2.png differ
diff --git a/README.md b/README.md
index ed0ec801..cdbea40e 100644
--- 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
+
+## 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
+``
+
+
+
+
### 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
new file mode 100644
index 00000000..6c49c919
--- /dev/null
+++ b/client/assets/microphone-off.svg
@@ -0,0 +1,41 @@
+
+
+
\ No newline at end of file
diff --git a/client/assets/microphone-on.svg b/client/assets/microphone-on.svg
new file mode 100644
index 00000000..033096f4
--- /dev/null
+++ b/client/assets/microphone-on.svg
@@ -0,0 +1,33 @@
+
+
+
\ No newline at end of file
diff --git a/client/assets/microphone-svgrepo-com.svg b/client/assets/microphone-svgrepo-com.svg
new file mode 100644
index 00000000..6c49c919
--- /dev/null
+++ b/client/assets/microphone-svgrepo-com.svg
@@ -0,0 +1,41 @@
+
+
+
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index c29aff55..47ce9cc2 100644
--- a/client/index.html
+++ b/client/index.html
@@ -9,10 +9,12 @@
-
+
diff --git a/client/script.js b/client/script.js
index d027aa76..caf5571c 100644
--- 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();
})
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..3ae552b9
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "project_openai_codex_with_speech2text",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {}
+}
diff --git a/server/server.js b/server/server.js
index a6c56255..912932ad 100644
--- 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!'
})
})