How to Create your own Virtual Assistent

Hello there, Let's Create a Virtual Assistent of our own, who will talk with you
as per your instructions.

There are many ways do it, but here we will choose the simplest way to do it.
We will use p5.js libraries to build our virtual assistent.

Let's first download p5 libraries to start, you will get those from Here, and you've to download p5 speech libraies from This link.

let's divide functionality we need to implement our virtual assistent.

1. Assistent should Speak
2. Assistent should Hear and respond
3. Implementation of Brain of Assistent

So, our first goal is to make sure that our assistent could talk to us.

After completion of download above mentioned files, copy the p5.speech.js
to p5 folder and edit the index.html and sketch.js file.

add the following line <script src="../addons/p5.speech.js"></script> to index.html file.
let's first check if everything works perfect. To check, you need to add the following code to your setup function of sketch.js file

     noCanvas();
 let voice = new p5.Speech();

 voice.speak('hello there');

 Now open your index.html on localhost and you will hear 'hello there' voice
 See!! its that easy to make our assistent talk. now we will make our assistent hear our instruction and repond by that.
add below mentioned code inside your setup function.

let speechRec = new p5.SpeechRec('en-US',gotSpeech);
speechRec.start();

function gotSpeech(){

if(speechRec.resultValue){

     createP(speechRec.resultString);
    

  }

Now  refresh your browser to get effect and taadaa, whatever you will speak,
will be on your browser screen like google speech to text function.

Remember: webkitSpeechRecognition not supported by the Mozilla Firefox.

Now that we've make our Assistent to hear our voice let's teach it how it can
respond according to our voice.

To implement next thing we need a scripting language called Rivescrip which is a Artificial Intelligence scripting language.

add the following line to your index.html file

<script src="https://unpkg.com/rivescript@latest/dist/rivescript.min.js"></script>

your index.html file
After you've done that, create a new file in your folder where index.html and other files are stored. Named the file brain.rive because this is the brain of you assistent. you can follow this tutorial to learn more about Rivescript.

create a basic input field in your index.html to type your message

    <input type="text" placeholder="Enter your message" name="msg" id="msg">
 
and create main.js file where we to put instructions about supply of our instruction to assistent. add below code to your main.js file

Var bot  = new Rivescript();
bot.loadfile("brain.rive", brainReady, brainError);

function brainReady(){
     console.log('Chatbot ready');
     bot.sortReplies();
      let num = floor(random(10))+1;
     var reply = bot.reply("local-user", input); 
     speech.speak(reply);
}

 $(document).keypress(function(e) {
if(e.which == 13) {
let input = $("#msg").val();
let reply = bot.reply("local-user",input);
speech.speak(reply);

$("#msg").val('');
$("#msg").focus();
  $.ajax({
    url: 'index.php',
    method: 'POST',
    data: {data:n},
  });
    }
  });

Now that we 've setup our brain's connection, lets put some predefined respond
to give by the assistent.
to do so, you have to edit brain.rive file which we have created early
now edit that file and paste below code onto that

! version = 2.0

+ hello there
- Hello, human!

+ how are you
- I'm great, how are you?
- I'm good, you?
- Good :) you?
- Great! You?
- I'm fine, thanks for asking!

Nice , god job.

 By the above code you should see a text box in front of you, once you type 'hello there' your bot should speak  'hello human'. if it's done perfectly then congratulations you've successfully created your first Virtual Assistent. You can make it more intelligent by adding more stuff to the brain :D

Well, It's not completed yet, there's is a task left, which i am lefting for you. The task is, you've to speak to the bot to get reply. Hope you can do it easily, since in the beginning i've told you how you can convert your speech to text by p5 speech.

Best of luck for that. Bye bye.