How to create a Girlfriend by using AI and javascript
Hey guys, Today we are going to make an AI chatbot using javascript and some API’s.
Let me explain how this gonna work.
It converts our voice input to text by using google’s speech-to-text API -> then it will send the input text via our AI API (api.pgamerx.com)
and we will get the response as a JSON output -> we convert that JSON text output to sound using text to speech API using responsive voice
To make this happen you need to get 2 API keys
- https://api.pgamerx.com
- https://responsivevoice.org
Once you get the api you have to apply that in the code and you are ready to go.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AI Bot</title>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
</script>
</head>
<body>
<script>
let aiapi = "XXXXXXXXXXXXXXXXXXXXXXXXXXX";
window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
let finalTranscript = '';
let recognition = new window.SpeechRecognition();
recognition.interimResults = true;
recognition.maxAlternatives = 10;
recognition.continuous = true;
recognition.onresult = (event) => {
let interimTranscript = '';
for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
let transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
document.getElementById("show").innerHTML = "Me :"+ transcript;
console.log(transcript);
async function fetchText() {
let response = await fetch('https://api.pgamerx.com/v4/ai?message='+transcript, {
method: "GET",
headers: {"x-api-key": aiapi}
});
let data = await response.text();
let voiceout = JSON.parse(data);
console.log(voiceout[0]);
document.getElementById("show").innerHTML = "Robot :"+ voiceout[0].message;
responsiveVoice.speak(voiceout[0].message, "UK English Female");
}
fetchText();
}
}
}
function startButton(event) {
recognition.start();
}
recognition.start();
</script>
<div id="show"></div>
<button id="start_button" onclick="startButton(event)"> Start</button>
</body>
</html>
Hope you like this .
Check the video to get detailed information
Download Source Code :Â
Post Your Questions on our forum
Post a question on Forum
Share with your friends:
Export html table to excel, pdf, csv format using Datatable
Do you know how to export html table to excel, pdf, CSV, or excel format using Datatable? If you don’t […]
August 4, 2022
Instagram Hashtag API PHP and JavaScript Integration with RapidAPI
Do you know how to integrate Instagram Hashtag API with your website? In this tutorial, I will show you how […]
August 2, 2022
How to host React Application into Cpanel – Routes not working Htaccess fix
Do you know how to host react applications into Cpanel? After building your react application. you will get an index.html […]
July 28, 2022
How to get user Public IP Address using Javascript
Do you know how to get the user IP address using javascript? I will show you how. Today we are […]
July 27, 2022
Digital Marketing Toolkit
Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits
Get Free Access Now