Javascript Rescued at a Hackathon When We Made An AI Chatbot

It was the Fall of 2019 and my fiancé and I were absolutely obsessed with going to hackathons. For those of you who may not know, a hackathon is an event where software developers collaborate together to build something in a specified amount of time. We had just finished one in Kent two weeks prior and got the crazy idea to go into another without any project idea. Normally, we figure out what our project will be prior to the hackathon. This gives us plenty of time to do research for the project which ultimately saves valuable minutes during the event. However, we decided to just go, have some fun, and figure out something when we got there.

After arriving, checking in, and picking up some swag from the sponsors, we found a nice place to sit and began brainstorming. Initially, I had wanted to create something that utilized machine learning. My fiancé wanted to do something related to one of the prize categories, Best Hack for Social Good. Eventually, we came up with the idea of creating a chatbot utilizing conversational AI (Artificial Intelligence). What we ultimately decided on was to create a chatbot that someone who is suffering from lack of energy, depression, suicidal thoughts, etc., and is not comfortable sharing their thoughts with another human, could talk freely to the bot. Essentially, the goal was for the user to feel comfortable and maybe even feel better after talking with the bot.

When hacking began, we immediately started researching machine learning and Tensorflow. Eventually, we got a neural network written and a model created to train it on. Since we were running extremely low on time and didn’t have any experience in Javascript frameworks/libraries, we opted to use Flask. Flask is a Python micro-web framework. It works great if you want to do everything yourself and get something built quickly.

The main issue that we’ve run into in the past when using Flask is that Jinja doesn’t always play nicely with complex data objects. If you’re not familiar with iterating through objects with Jinja, it looks a little something like this:

<div>
     {% for record in RecordsList %}
          <p>{{ record.someData }}</p>
     {% endfor %}
</div>

For those of you that use Angular, this pretty similar to “ngFor”. Unfortunately for us, we didn’t have any Angular experience and not a whole lot of time either. In the past, we would normally pass the data object to the Flask template (basically, your HTML file) and start iterating through it. This time though, we decided to utilize Jinja differently. There is a filter you can use that will read the passed up object as JSON. Because of this, the object can be parsed and assigned to a Javascript variable. For example, we used:

var json = JSON.parse({{ Messages | tojson }});

This was very handy because instead of iterating with Jinja, we could now iterate through the object using Javascript.

Not only was it easier to iterate through the JSON object but at a point when the time was so critical, Javascript made it much easier to build a dynamic list of chat messages. This helped us to create the look that we were wanting for the project.

As you can see, we had a larger box that contained the user input textbox and the chat messages. The chat messages are just bootstrap cards with the blue cards being user messages and pink cards being bot messages. Utilizing Javascript’s createElement() function, we were able to dynamically create the message list. After breaking up the JSON object into two separate lists (sent, received), we were able to 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;                    
}

The last thing that we had to do before hacking ended was to create a function that would automatically turn the message box into a scroll box and keep the same height.

All in all, I would say it was a very successful hackathon. We went into the event without any project idea. However, by the end of it, the project that we had built was something totally out of our comfort zone. With no prior experience of Javascript, it had come to our rescue when we were desperate for something that could easily build a dynamic list. Feel free to let me know in the comments if there was a time when Javascript had come to the rescue for you. Keep coding my friends. Cheers!