Nature of Code -EmoChat

Originally, I want to train my own model to do emotion recognition, but I realize it takes too long. Only 10mb data take me 3 hour to train, and not to mention I have 400mb data in total to finish the model.

So I turn to cmltrackr to do the emotion recognition.

To insert a emoji whenever user send a message, I have two work to do. First, I have to capture the html element that Facebook store our message in. Second, I have to make sure when users hit enter key, my insert event goes before the message is sent.

The second is quite complicate because large website like Facebook, they usually separate the the front-end and back-end. When I only insert the emoji to the .innerText, it will only change the view of user, which means the user “can” see there’s an emoji at the end of the message. However, as users hit enter, the emoji disappear at the end of the message, because we don’t really send the Facebook server the a emoji as it listen to our keyboard typing event which we have to simulate. So I have to:
1. Pause the Facebook eventListener which listen to enter key event
2. Remove this eventListener so it won’t block our enter key event simulate bu our code
2. Insert the emoji
3. Simulate the user hit enter key event to send out message
4. Add a new stopEnterKey eventListener so every time people type enter will trigger the insert action again

* The reason why our eventListener goes before the original enter key eventListener is because the bubbling and capturing feature of javascript.

Now this chrome extension can only work partially because chrome browser do not give the extension the permission to access the web cam, so my next step may be write it as an Electron app to listen to laptops’ keyboard event.

Leave a Reply

Your email address will not be published. Required fields are marked *