Making an AI chatbot, how can Javascript help us in hacking?

liu, tempo Date: 2021-07-16 14:14:03
Views:40 Reply:0

We want to use conversational artificial intelligence to create the idea of a chatbot. We finally decided to create a chatbot so that people can talk freely with the robot. Essentially, the goal is to make the user feel comfortable or even better after talking to the robot.


When the hacking started, we immediately began to study machine learning and Tensorflow. Finally, we wrote a neural network and created a model to train it. Since our time is very short and we don’t have any Javascript framework/library experience, we choose to use Flask. Flask is a Python micro network framework. If you want to do everything yourself and build something quickly, it’s great.


The main problem we encountered when using Flask in the past was that Jinja did not always handle complex data objects very well. If you are not familiar with using Jinja to iterate objects, it looks a bit like this:
<div> {% for record in RecordsList %} <p>{{ record.someData }}</p> {% endfor %}</div>


For those who use Angular, this is very similar to “ngFor”. Unfortunately, we don’t have any experience and don’t have much time. In the past, we usually passed data objects to Flask templates (basically HTML files) and started iterating. However, this time, we decided to use Jinja in a different way. You can use a filter to read the passed object as JSON. Therefore, objects can be parsed and assigned to Javascript variables. For example, we use:
var json = JSON.parse({{ Messages | tojson }});
This is very convenient because we can now iterate objects using Javascript instead of iterating with Jinja.
for (var i = 0; i <json.length; i++){ var sent = json[i].sent; var received = json[i].received; var card = document.createElement(‘div’); card. className =’card’; var ul = document.createElement(‘ul’); ul.className =’list-group list-group-flush’; var sentLi = document.createElement(‘li’); sentLi.innerText = sent ; sentLi.className =’list-group-item odd’; var receivedLi = document.createElement(‘li’); receivedLi.innerText = received; receivedLi.className =’list-group-item even’; ul.appendChild(sentLi ); ul.appendChild(receivedLi); card.appendChild(ul); messageContainer.appendChild(card);}


Not only is it easier to iterate over JSON objects, but when time is so critical, Javascript makes it much easier to build a dynamic list of chat messages. This helped us create the look we wanted for the project.


There will be a larger box that contains user input text boxes and chat messages. The chat message is just a guide card, the blue card is the user message, and the pink card is the robot message. Using the createElement() function of Javascript, we can dynamically create a message list. After decomposing the JSON object into two separate lists (send, receive), we can use the innerText property to assign the message to the created card.


function updateScroll() {var scrollBox = document.getElementById(‘box’); var elementHeight = scrollBox.scrollHeight; scrollBox.scrollTop = elementHeight;}


Before the hacking is over, the last thing we need to do is to create a function that will automatically convert the message box into a scroll box and maintain the same height.


Well, it’s time to conclude this article. If you are interested in programming, computers, and programmers, please contact me by private message and we can discuss at any time! A little attention will encourage me a lot!

Leave a comment

You must Register or Login to post a comment.