How I did customize "rasa-nlu-trainer" as my own tool

Check out my implementation here

Background

I wanted to have a tool for human beings to classify intents and extract entities of texts which were obtained from a raw dataset such as Rocket.chat's conversation, Maluuba Frames or here. Then, the output (labeled texts) could be consumed by an NLU tool such as Rasa NLU.

rasa-nlu-trainer was a potential one which I didn't need to build an app from scratch. However, I needed to add more of my own features to fulfill my needs. They were:

1. Loading/displaying raw texts stored by a database such as MongoDB
2. Manually labeling intents and entities for the loaded texts
3. Persisting labeled texts into the database

I firstly did look up what rasa-nlu-trainer's technologies were used in order to see how to implement my mentioned features.

At first glance

rasa-nlu-trainer was bootstrapped with Create React App. Create React App is a tool to create a React app with no build configuration, as it said. This tool is also recommended by the official React.js tutorial. I actually was very new to React.js. I wondered what problem Creat React App tried to solve so that I first wanted to set up a project without Create React App. I followed this post.

Well, let me say if I built a React app from scratch then I needed to do some manual configurations for Webpack and Babel including webpack.config.json and .babelrc

Then, I tried to use Create React App, and I followed this guide. All right, let me say Create React App helped me create a React boilerplate project with hiding Webpack and Babel's configuration so that as a developer I only needed to focus on writing production code.

The nuts and bolts

I went on starting to watch how rasa-nlu-trainer's source code was organized and what its techniques are used.

Folder structure

1. Auto-created stuff by Create React App
- public/index.html
- src/index.js
2. Overrides
- They didn't use "react-script", they created their own way instead! That was the reason why some additional folder/files were added such as server.js, scripts and config.

Used technologies

- Programming language: Javascript
- Babel: ES6 transpiler
- Project bundle: Webpack
- Dependencies management: npm
- Backend: Node.js
- Fronted framework/project-based: React.js
- React model storing: React-Redux
- React UI extension components: Ant Design
- TypeScript

Hooray! Welcome me to Javascript world!

Architecture

- index.js: Provider{store} <---> LocaleProvider ---> App
- How "separation of concerns" works: import and export
- Global data (store) is immutable and only changed by files actions.js and reducer.js

Proposed changes

Finally, I could start to add my needs to the existing rasa-nlu-trainer app. I listed out what my features:
- Creating an overview page as a custom React component to display all loaded texts
- Customizing the existing page for classifying intents and extracting entities.
- Implementing Node.js methods to load/stores texts (as JSON) which stored in MongoDB

The rule of thumb was I needed to follow the mentioned architecture for modifying the global data which were managed by React-Redux.

You can take a look at the changes from this pull request.

Conclusion

Sometimes, the best way to learn new techs is to get down into an existing tool and customize it with your own needs. 💪

Comments

What the heck is Meteor DDP?

I was using Meteor for my messenger project. I was so curious about the real time connection. I wanted to know how exactly this mechanism works. In this post, I will go through the DDP Specification, an overview of WebSocket, and a simple demo about how to subscribe a publication of Rocket.Chat (containing a DDP server) from an external webpage. At a glance, I knew that Meteor invented a protocol called DDP which uses for handling real time connection. So then, what is DDP? "DDP (Distributed Data Protocol) is the stateful WebSocket protocol that Meteor uses to communicate between the client and the server." [1] All right! Why does DDP matter? "DDP is a standard way to solve the biggest problem facing client-side JavaScript developers: querying a server-side database, sending the results down to the client, and then pushing changes to the client whenever anything changes in the database" . [2] In order to understand deeply the protocol, I decided ...

Set up a web server for learning HTTP headers

Motivation We all follow the client-server model using the HTTP protocol for most of our web apps today. In development, we simply may have a backend API server and a frontend (web pages or mobile apps) only. However, it seemed that a proxy server is always required for production. In fact, most of the hardest issues in production come from integration. The requests and responses might be modified by the proxy server. Therefore, the understanding of HTTP protocol is one of the key skills to resolve those issues. I wanted to dive deep into HTTP with some core concepts such as caching, cookies, and CORS. I didn't intend to go quickly rather than moved slowly to have a well understanding of what I do. Prepare a server The easiest way is to use my laptop as a server then I can just use "localhost". I can also use ngrok to make my web server online. Finally, I use an online tool such as RedBot to check the HTTP headers. To make it more excited though, I deployed the app on A...

MS SQL Server Views

"Creates a virtual table whose contents (columns and rows) are defined by a query. Use this statement to create a view of the data in one or more tables in the database. For example, a view can be used for the following purposes: - To focus, simplify, and customize the perception each user has of the database. - As a security mechanism by allowing users to access data through the view, without granting the users permissions to directly access the underlying base tables. - To provide a backward compatible interface to emulate a table whose schema has changed." [1] Beside that, our team used view in order to improve the performance of our web apps when a database has a very complicated relationship between its tables by using ORM Frameworks such as Hibernate. Example code: --create CREATE VIEW placeholders AS SELECT EMPKEY AS empkey, CONNUMB AS connumb, EMPNBR AS empNbr, ACEEMPN AS empFirstName, ACEEMPFN AS empLastName, EMPNAM AS empFullName, ...

Merging source in SVN

My team has used Primefaces for our projects. We sometimes have several branches of the projects with a new Primefaces's release. For example, we currently have a project with two branches, a branch for using Primeface 4.0, a trunk for using Primeface 5.0, and we are working these parallel branches. Our project looks like the following: - myProject - branches + primefaces4 + tag + trunk (primefaces5) My problem is how to copy the same source from the trunk to the branch "primefaces4". That is where SVN Merging can help! Here is the steps those I have conducted in my project. Step 1 : open the project with the branch "primefaces4" Step 2 : Team > Merge... Chose the trunk's URL. For example: http://192.168.9.10/svn/myProject/trunk Step 3 : Select the revision from "trunk" to merge. For example: +--revision--+--date--------+--author----+--comment---+ + 10 + 03.10.2014 + vanhuong + f1: part 3 + + 9 ...

A Template for Software Engineering Standards

Software engineering standard template A well-structured standard acts as a blueprint that guides engineers in their daily tasks and long-term goals. Below, I will outline a template for creating a comprehensive software engineering standard. Header The header serves as the document's identifier. It contains the following: Authors : The people who have contributed to the creation of the standard. Created Date : The date when the document was initially created. Version : The version of the standard. It is typically updated with significant changes. Status : The current status of the document, whether it's in draft, in-review, or official. Next Review Date : The date when the standard will be reviewed for relevancy and accuracy. Table of Contents A table of contents provides an overview of what the document contains, making it easier for readers to navigate through the document. Body The body of the standard comprises: Values : The core beliefs that guide the decision-maki...

vhandit

Search This Blog