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

  1. https://api.pgamerx.com
  2. 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

Ajith Jojo Joseph

Self taught, dedicated young entrepreneur with many licensed products under his sleeve. Passionate about technology, business and excellence in general.

Share with your friends:

Comments are closed.

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 […]

10 July, 2021

How to create Instagram Bot with InstaPy

Hello everyone, Today we are going to learning how we can make an Instagram bot with InstaPy. InstaPy is a […]

31 March, 2021

Different types of Programming languages – Busting language confusions

Languages basically let us speak to the computer in its own language. Just like there are many human languages, computer […]

11 December, 2020

Essential Skills Required for Web Developers

Web development is a serious profession. We basically transform ideas in our heads to reality while creating a website. Honestly […]

23 November, 2020

Digital Marketing Toolkit

Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits

Get Free Access Now