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 :
Share with your friends:
HTML Form to Email Using JavaScript and SMTP server 🚀
Hello Everyone, 🙋♂️ In this tutorial, we are going to look at how to send emails from HTML Form to […]
22 September, 2021
How to make pretty URL in PHP using .htaccess
Hello Everyone, Here in this tutorial, you will learn How to make a pretty URL in PHP using .htaccess. and […]
18 September, 2021
Submit Form Without Refreshing Page PHP and Javascript
Hello Everyone, In this tutorial, we are going to learn, How to submit a form without reloading. yeah, that’s so […]
HTML from to Email using SMTP in PHP with Source code
Hello Everyone, In this tutorial, I am going to teach you how to send an email from an HTML form […]
16 September, 2021
Newsletter
Subscribe to our weekly Newsletter and stay tuned.
Free PHP Invoicing Software
Gmax CRM Lite is an Invoicing and project management tool for small businesses, features including client management , invoicing , quotation and project management
Download for free