Skip to main content

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. 💪
Labels:

Comments

Post a Comment

Popular posts from this blog

Junit - Test fails on French or German string assertion

In my previous post about building a regex to check a text without special characters but allow German and French . I met a problem that the unit test works fine on my machine using Eclipse, but it was fail when running on Jenkins' build job. Here is my test: @Test public void shouldAllowFrenchAndGermanCharacters(){ String source = "ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ"; assertFalse(SpecialCharactersUtils.isExistSpecialCharater(source)); } Production code: public static boolean isExistNotAllowedCharacters(String source){ Pattern regex = Pattern.compile("^[a-zA-Z_0-9_ÄäÖöÜüß áÁàÀâÂéÉèÈêÊîÎçÇ]*$"); Matcher matcher = regex.matcher(source); return !matcher.matches(); } The result likes the following: Failed tests: SpecialCharactersUtilsTest.shouldAllowFrenchAndGermanCharacters:32 null A guy from stackoverflow.com says: "This is probably due to the default encoding used for your Java source files. The ö in the string literal in the J...
5 comments
Read more

4 Remarkable Notes for JSF Apps Using HTML5

In the previous post , I've already shared with you how my team consults clients by using a HTML prototype. This post is about the used technologies for reusing the provided HTML template and communicating with backend. What is the issue when using HTML elements with Primefaces components? Primefaces is a great extension for developing JSF web apps. However, it is really frustrating in case we have to make it work with an existing HTML template. Why? - Primefaces has its own theme for styling. - Primefaces changes the HTML structure. Therefore, that would be a huge effort to use the Primefaces' components to replicate the elements of the HTML template; especially it is impossible for images drawing by " canvas " tag. That requires us to find a better approach. Since Java EE 7 (introducing JSF 2.2 included), it supports to use HTML5 elements . The idea is that JSF components don't effect the style and HTML structure, so we can easily reuse the provided HTM...
2 comments
Read more

Multiple Inheritance of State and Implementation

Today, I was just curious about why an enum can not extend anything else. I took a look on the Oracle document here , and I found the answer is below: "All enums implicitly extend java.lang.Enum. Because a class can only extend one parent (see Declaring Classes), the Java language does not support multiple inheritance of state (see Multiple Inheritance of State, Implementation, and Type), and therefore an enum cannot extend anything else." I have been learned of it before. But, wait a sec...! Why Java does not support multiple inheritance of state? Since I have worked with other programming languages like C++, I was able to make a class extend some other classes. The short answer is to avoid the issues of multiple inheritance of state .  I wonder if other programming languages have these below terms but Java does. Multiple inheritance of state It is the ability to inherit fields from multiple classes. There is a problem and Java avoids it. "For exa...
Post a Comment
Read more

[Snippet] CSS - Child element overlap parent

I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below: HTML code: <div id="parent">  <div id="child">  </div> </div> And, CSS: #parent{   position: relative;   overflow:hidden; } #child{   position: absolute;   top: -1;   right: -1px; } However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it. www.tom-collinson.com I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent; to position: static; for one of parents -> the problem is solved. Look at my code: <div class="modal-body dn-placeholder-parent-positi...
Post a Comment
Read more

The HelloWorld example of JSF 2.2 with Myfaces

I just did by myself create a very simple app "HelloWorld" of JSF 2.2 with a concrete implementation Myfaces that we can use it later on for our further JSF trying out. I attached the source code link at the end part. Just follow these steps below: 1. Create a Maven project in Eclipse (Kepler) with a simple Java web application archetype "maven-archetype-webapp". Maven should be the best choice for managing the dependencies , so far. JSF is a web framework that is the reason why I chose the mentioned archetype for my example. 2. Import dependencies for JSF implementation - Myfaces (v2.2.10) into file pom.xml . The following code that is easy to find from  http://mvnrepository.com/  with key words "myfaces". <dependency> <groupId>org.apache.myfaces.core</groupId> <artifactId>myfaces-api</artifactId> <version>2.2.10</version> </dependency> <dependency> <groupId>org.apache.myfaces.core<...
Post a Comment
Read more