The world’s leading publication for data science, AI, and ML professionals.

Semantic Highlighting

Building and adding a User Interface for NLP

DOING DATA SCIENCE FROM SCRATCH TASK BY TASK

Photo by Ed Pylypenko on Unsplash
Photo by Ed Pylypenko on Unsplash

Since I wrote my last article, Using NLP to improve your Resume, our readers’ response has been excellent. Reading some of the comments was inspiring and provided much-needed motivation for the next phases. If we really wanted to improve our Resume using NLP, we would need a User Interface, and like that Photo by Ed Pylypenko on Unsplash, our users would consume the service on their mobile.

Consider the use case that you are out and about. Your best friend sends you a job link on LinkedIn. Wouldn’t it be cool to pass that link to an application and get an analysis of your chances right there on your mobile? I think that would be sub-zero cool. Some will say that LinkedIn premium already has that feature, but that won’t be much fun for our readers.

Now, admittedly, building prototypes using JavaScript might not appeal to every reader. Still, I have always been interested in developing solutions, wrapping machine learning around API calls and giving a friendly User Interface. Let me show you how to create a prototype user interface using Vue.js and lay in some NLP processing.

Create a new UI application from the command line

Make a new directory for your project and make sure the vue command-line tool is installed.

mkdir semantic
cd semantic
npm install -g @vue/cli

Now we are ready to scaffold up a Vue application.

vue create semantic

Generally, for my articles, I just use the vue defaults. For production workloads, you might want to take a different approach. Figure 1 shows the final output on my terminal window. We can now run the beginner application using an NPM command, and Figure 2 shows the resultant terminal messages.

npm run serve.
Figure 1: A small screenshot of the terminal once vue create semantic has finished. Image by author.
Figure 1: A small screenshot of the terminal once vue create semantic has finished. Image by author.
Figure 2: Running the development server we see the URL address. Image by author
Figure 2: Running the development server we see the URL address. Image by author

If you navigate to localhost:8080/ you will just find the standard scaffold welcome message shown in Figure 3.

Figure 3: The new web application is up and running.
Figure 3: The new web application is up and running.

If you follow the above instructions, you will end up with a basic framework to develop and add features for your project. Next, let us add a Text Highlight feature.

Adding a Text Highlight feature

I mostly use Visual Code these days. Next, we need to install the vue-text-highlight module with npm

npm install --save vue-text-highlight

We need to make some changes to the main.js, as shown in Figure 4.

Figure 4: main.js for the vue app. Image by the author. Adding in TextHighLight
Figure 4: main.js for the vue app. Image by the author. Adding in TextHighLight

Then add a new vue component. I am using the basic illustration provided by the package owner to bootstrap my project. Start small and build up your code from ground truth basics. The new component is shown in figure 5.

Figure 5 - adding a new vue component. Image by author.
Figure 5 – adding a new vue component. Image by author.

Now we need to integrate our component into the main vue.app file. My code is shown in Figure 6.

Figure 6: adding the text highlight component to the app. Image by author.
Figure 6: adding the text highlight component to the app. Image by author.

With all the coding done, we should now pray that the application will compile and run. Go ahead and issue

npm run serve

Check and fix any issues that are reported by the npm run command. All going well; when you visit your site, you should see some text with some highlights. Mine is shown in figure 7. We expect to see a text ‘Tropical birds scattered as Drake veered the jeep‘, and the words ‘birds‘ and ‘scatt‘ should be highlighted.

Figure 7 - showing the modified application with the text feature. Image by the author.
Figure 7 – showing the modified application with the text feature. Image by the author.

Use the inspector to examine the page, as shown in Figure 8.

Figure 8: Inspecting the application and noticing the html tags used. Image by the author.
Figure 8: Inspecting the application and noticing the html tags used. Image by the author.

Looking at Figure 8, we can see that the vue application is built in two chunks, and the text is highlighted using a span tag and a mark tag. We can remove some of the boilerplate HTML from the components and arrive at a friendly prototype page. Mine is shown in Figure 9.

Figure 9: An initial prototype page for Text Highlight. Image by the author.
Figure 9: An initial prototype page for Text Highlight. Image by the author.

I have shown you how to create a Prototype User Interface and lay in some basic NLP. Using pre-selected keywords, we demonstrated how to highlight those in a text on the screen.

Next steps

I created an NLP class many years ago, so I have the back-end code that I require for this project. I recently experimented a lot with Vue.js and also have a large codebase of re-usable techniques. Broadly the next steps are:-

  • Design a User Interface for the resume improvement project
  • Add a back-end service using Python and integrate the NLP class
  • Add some API calls to the front-end to collect the resume, job description, and perform the analysis.
  • Update the codebase and test

Come back and get the next installment, where I will be hooking it all up! Meanwhile, if you are interested in the development process and want to watch a video where I demonstrate how to make a product from scratch, you might enjoy my YouTube series. Building web services, API calls, user interfaces are all discussed in detail.

Links


Related Articles