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.