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

Make simple music program with beep(freq, duration) with Pascal

Pascal is my first programing language when I have studied in high school. It was really exciting for me. :) The Pascal programming language was created by Niklaus Wirth in 1970. It was named after Blaise Pascal, a famous French Mathematician. It was made as a language to teach programming and to be reliable and efficient. Pascal has since become more than just an academic language and is now used commercially . I tried to make a simple music program by using Lazarus IDE on MS Window 7, 64-bit. It frustrated me a few times how difficulty to use Sound command to make a sound. Sound did not work on my compiler and my platform anymore. So far, I just could use beep(freq, duration) from window unit to implement my work. Here is my code. ;) program mysong; uses Windows, crt; const C: Integer = 512; { x = A * EXP(LN(2)/12)} C_: Integer = 542; D: Integer = 574; D_: Integer = 608; E: Integer = 644; F: Integer = 682; F_: Integer = 723; G: Integer = ...

Automating deployment and managing apps on OpenShift

Previously, we maintained OpenShift templates for deploying apps in development environments as well as delivering these templates to our customers for their on-prem deployment. Customers who refer to our templates (as well as documentation) have their own configuration management tools to automate the deployment such as ArgoCD and FluxCD. My son's buildings Our developers usually modify templates (YAML) directly on OpenShift for testing and then adjust the corresponding templates stored in the Git repository in Bitbucket. This sometimes causes an issue that delivered templates are incorrect because: - Developers forget to update the templates in Git repositories. - Developers don’t test the templates Therefore, our goal was to integrate a tool into our CI/CD that can automate and manage the configuration of OpenShift apps. The delivered templates should be the ones that are able to run on our OpenShift with the following purposes: - Automate deployment from templated in Git repos...

How Would You Answer These Typical Interview Questions?

I have joined several job interviews with candidates at my current company. As a technical supporter, my attention was mainly focused on specific technical points rather than behavioral ones. However, I saw that these following typical questions were rarely missed for any interviews. In fact, there is a meaning behind of the questions. The concern is candidates should focus on answering the right things that interviewers really want to know. Take a look! Introduce about yourself It is "What and why are you fit for this job?". So, it is good to go "Talking too much about your hobbies."? I would say "We don't care about your hobbies much". ;) Why do you want to find a new job? It is "Why this job are interesting you?". So, it is good to go "Talking about something negative like 'I hate my boss/leader'"? I would say "Who wants to work with a negative person?" What did you do in your current j...

Sharing a virtualenv across several Python projects using Pipenv

There is a standard library for all projects in Python. However, several projects don’t always have the same dependencies all the time. That is where virtual environments come to play. You can follow this official document to use two separated tools virtualenv and pip to fulfill that need. My preferred alternative is to use pipenv . Pipenv is easy to use and convenient. The following are my steps to make a shared virtualenv for my all projects which requires the same dependencies. Step 1. Create an isolated virtualenv. python -m venv my-shared-env Step 2. Create a symbolic link to the created virtualenv. cd project_1 ln -s ~/.local/share/virtualenvs/my-shared-env .venv I have encountered the following issue at step 1. FileNotFoundError: [Errno 2] No such file or directory: '{my_project_path}/.venv/bin/pip': '{my_project_path}/.venv/bin/pip' The root cause was I tried to create virtualenv by running pipenv install and renaming the generated virtualenv to ...

[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...

vhandit

Search This Blog