Creating a Grammar Corrector App with Monaca, Capacitor and Hugging Face

Published in

The Web Tub

5 min readMar 18, 2024

In this article we will learn how to create a simple app that will allow the user to check and correct the grammar of English sentences.

Technologies used

Prerequisites

Monaca account
Hugging Face account and access token
Node
Monaca CLI if working locally
Android Studio and Xcode if building locally / using device simulator

Setting up the project

Once all prerequisites are installed, open a terminal and create a new Monaca project using the Capacitor Basic template, as follows:

Alternatively you can do it from Monaca Cloud IDE, in the same way.

Since this template does not include any framework, the next step is to add React to the project.

The generated structure of the project is the following:

The code developed for the app will be inside of /src.

If you want to build locally, make sure Android Studio and Xcode are installed and working, and the pertinent simulators work.

Development

First, we install the required libraries, using yarn

All the dependencies used are the following, which are divided into:

Capacitor related dependencies, already installed after setting up the project with Monaca
React related libraries, to use the popular web framework
Material UI related dependencies, a powerful react UI library
React String Diff, to display the difference between the sentence that the user inputted and the corrected sentence.

To use the Hugging Face Inference API we need an access token. To use it we have an env.js file as follows:

After the setup is completed then we proceed to create the different screens and components of the application:

As we can see, it is a fairly straightforward project, consisting of only two screens: FixGrammar and History. There is also a top bar and a bottom navigator element present in both screens.

Fix Grammar

This screen contains the main functionality of the app, getting a sentence from the user and displaying the corrected sentence. To do so we call the Hugging Face T5 Base Grammar Correction Inference API as follows:

The corrected sentence is displayed making use of the StringDiff component. The user is able to copy the correction to clipboard.

It is worth mentioning that in the case of using Monaca Cloud IDE to preview the app, we have to make sure to implement copy to clipboard functionality in a way that works with iframes, since the Clipboard API is blocked.

History

This screen contains a history of the corrections made by the user. This corrections are stored in local storage. The user is also able to delete their history.

Top Bar and Bottom Navigator

The Top Bar is only used as a UI element and it only contains the button to toggle between light and dark mode.

The Bottom Navigator is used to switch between the two screens of the application.

Running the application

To run the application you can open a terminal inside of the project’s directory and run the following command:

This will open a local server with the web version of the project running.

If you want to test the application on Android or iOS, you can either use Monaca Cloud IDE to build on the cloud or set up the local environment.

If you’re using Monaca Cloud IDE, go to your project and select build for your target device.

If you’re building locally, you need to first generate the android and/or iOS projects with the following command, changing ios to android depending on your target.

Every time you make some changes to the project, run the following command:

After that you can open the project on Xcode or Android studio to build the application and run it in a simulator:

Conclusion

In this article we have shown how easy it is to create a hybrid application with Monaca and Capacitor that integrates the use of a machine learning model by using Hugging Face Inference API.

You can find the code for this project here.

Thanks for reading :)