Semantic Highlighting. Building and adding a User Interface... | by David Moore | Towards Data Science

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.
Make a new directory for your project and make sure the vue command-line tool is installed.
mkdir semanticcd semanticnpm 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.
If you navigate to localhost:8080/ you will just find the standard scaffold welcome message shown in Figure 3.
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.
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.
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.
Now we need to integrate our component into the main vue.app file. My code is shown in Figure 6.
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.
Use the inspector to examine the page, as shown in Figure 8.
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.
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.
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.
Creating a new Vue.app
TextHighLight vue module
Linking to a github repo
Generate and add SSH to github
My github repo