10%

Try : Insurtech, Application Development

Edtech(5)

Events(31)

Interviews(10)

Life@mantra(10)

Logistics(1)

Strategy(14)

Testing(7)

Android(43)

Backend(28)

Dev Ops(2)

Enterprise Solution(20)

Frontend(28)

iOS(39)

Javascript(13)

AI in Insurance(26)

Insurtech(57)

Product Innovation(34)

Solutions(13)

Augmented Reality(7)

Customer Journey(7)

Design(6)

User Experience(21)

Artificial Intelligence(95)

Bitcoin(7)

Blockchain(14)

Cognitive Computing(7)

Computer Vision(6)

Data Science(14)

FinTech(41)

Intelligent Automation(25)

Machine Learning(43)

Natural Language Processing(10)

E-health(2)

HealthTech(5)

mHealth(3)

Telehealth Care(1)

Top Trending React JS Libraries of 2019

You may be a Javascript developer looking to experiment with modern frameworks, or maybe you’re a seasoned back-end or systems programmer, or perhaps you’re new to programming in general and want to learn how to build dynamic web applications. Whether you are a sole developer or a project manager — the foremost thing you want is to keep up with the latest trends around the newest core technologies.

According to a Stack Overflow survey — Javascript is the most preferred programming, markup, and scripting language for developers. Javascript (71.5%) followed by HTML (69.4%) and CSS (66.2%) are the top three most used languages. Javascript tools like Node.js, Angular, and React are the most popular frameworks and libraries for developers to work with. New developers are eager to learn React over any other framework. While Javascript React itself seems pretty straightforward — the tooling and ecosystem, however, can become overwhelming.

Facebook’s extensive and open-source library – React is best for large web apps development. Following is an in-depth evaluation of the trending React JS libraries.

1. Redux

As the documentation states, Redux is a predictable state container for JavaScript apps. Redux is one of the most popular libraries in front-end development these days. However, many people are confused about what it is and what its benefits are. It’s an application data-flow architecture, rather than a traditional library or a framework like Underscore.js and AngularJS.

Redux (React JS Library) architecture

[Read documentation]

2. ANTD

Ant Design is a design language for background applications. It is refined by the Ant UED Team with an aims to create a uniform user interface specs for internal background projects, and lower the unnecessary cost of design and implementation. ANTD also liberates the design and front-end development resources.

Specially created for internal desktop applications, Ant Design is committed to improving the experience of users and product designers. User interface designers and user experience designers are collectively considered as product designers. ANTD has also blurred the boundaries of product managers, interaction designers, visual designers, front-end developers, and development engineers. Taking advantage of unitary specifications, Ant Design makes design and prototype more simple and accessible for all project members, which comprehensively promotes experience and development efficiency of background applications and products.

Also read-

  1. Top Javascript Trends for 2020
  2. React Native Framework: an in-depth study
  3. Tips to build an awesome UI using React

3. Blueprint

Blueprint provides reusable UI components for building various apps. Initially, the toolkit was built for desktop solutions. Later, because of its great capabilities and flexibility, Blueprint was implemented for web and mobile solutions as well. However, the contributors say it may not cater to all mobile apps’ needs.

BluePrint is not just a React JS library. It works well with Angular and Vue. Developers can also use it with other JavaScript and TypeScript languages and CSS markup language.

4. Mozaik

Mozaik is a great library for creating lovely dashboards for web applications. It has customization options for developing responsive layouts and personalized themes. Mozaik allows for grid positioning, optimized backend communication, and also provides an option to use more than one dashboard. Mozaik JS library works really great on all platforms, be it on a big screen or a smartphone.

Moziak - one of the popular React JS Libraries

5. Elemental UI

Elemental UI is a pretty flexible and efficient UI framework for building design-heavy web applications.

This framework is very similar to the Material UI framework but is much more lightweight. It is a flexible and beautiful CSS UI framework for ReactJS. It’s designed to be installed from npm and built into your project with Browserify or Webpack.

6. Gatsby

This is a level up from the traditional React JS libraries as we know them. The Gatsby tool allows developing websites on ReactJS and GraphQL faster than with any other web technology.

Most websites use static generators to take the first step towards a high-quality solution. Gatsby allows extending website functionality, seamless maintenance, and support.

Gatsby websites can easily load data from any resources with special plugins, contributing significantly to performance improvement. Image optimization, lazy-loading, and styles-lining speed up the website automatically, without manual modifications.

One of the most important Gatsby features is that websites don’t require a server to run on. For example, you can host the website on Github or Netlify for free.

Trending React JS Libraries: Conclusion

The libraries discussed above are very efficient in carrying out their specific functions. You can use the libraries for:

  • Designing great user interfaces
  • Creating captivating user experiences
  • Testing JavaScript and React code
  • Generating static websites

Each of these React JS libraries described has taken advantage of the features and components of the React JS framework, allowing for an easier experience during development. You can check out GitHub, for a complete and extensive list of React JS components and Libraries. 

About the author: Abhijeet Gupta is a Tech Lead with Mantra Labs. He has over 8 years of experience in developing web and mobile applications.

Related:

  1. Learn Ionic Framework From Scratch in Less Than 15 Minutes! 
  2. Ionic Platform for Mobile App Development: Features & New Releases
  3. 5 Trending PHP Frameworks in 2020
  4. Top Javascript Frameworks and Trends in 2020
Cancel

Knowledge thats worth delivered in your inbox

Tabular Data Extraction from Invoice Documents

5 minutes, 12 seconds read

The task of extracting information from tables is a long-running problem statement in the world of machine learning and image processing. Although the latest accomplishments in the field of deep learning have seen a lot of success, tabular data extraction still remains a challenge due to the vast amount of ways in which tables are represented both visually and structurally. Below are some of the examples: 

Fig. 1

Fig. 2

Fig. 3

Fig. 4

Fig. 5

Invoice Documents

Many companies process their bills in the form of invoices which contain tables that hold information about the items along with their prices and quantities. This information is generally required to be stored in databases while these invoices get processed.

Traditionally, this information is required to be hand filled into a database software however, this approach has some drawbacks:

1. The whole process is time consuming.

2. Certain errors might get induced during the data entry process.

3. Extra cost of manual data entry.

 An invoice automation system can be deployed to address these shortcomings. The idea is to upload the invoice document and the system will read and generate the tabular information in the digital format making the whole process faster and more cost-effective for companies.

Fig. 6

Fig. 6 shows a sample invoice that contains some regular invoice details such as Invoice No, Invoice Date, Company details, and two tables holding transaction information. Now, our goal is to extract the information present in the two tables.

Tabular Information

The problem of extracting tables from invoices can be condensed into 2 main subtasks.

1. Table Detection

2. Tabular Structure Extraction.

 What is Table Detection?

 Table Detection is the process of identifying and locating tables that are present in a document, usually an image. There are multiple ways to detect tables in an image. Some of the approaches make use of image processing toolkits like OpenCV while some of the other approaches use statistical models on features extracted from the documents such as Text Position and Text Characteristics. Recently more deep learning approaches have been used to detect tables using trained neural networks similar to the ones used in Object Detection.

What is Table Structure Extraction?

Table Structure Extraction is the process of extracting the tabular information once the boundaries of the table are detected through Table Detection. The information within the rows and columns is then extracted and transferred to the desired format, usually CSV or Excel file.

Table Detection using Faster RCNN

Faster RCNN is a neural network model that comes from the RCNN family. It is the successor of Fast RCNN created by Ross Girshick in 2015. The name Faster RCNN is to signify an improvement over the previous model both in terms of training speed and detection speed. 

To read more about the model framework, one can access the paper Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks.

 There are many other object detection model architectures that are available for use today. Each model comes with certain advantages and disadvantages in terms of prediction accuracy, model parameter size, inference speed, etc.

For the task of detecting tables in invoice documents, we will select the Faster RCNN model with FPN(Feature Pyramid Network) as a feature extraction network. The model is pre-trained on the ImageNet corpus using ResNET 101 architecture. The ImageNet corpus is a public dataset that consists of more than 20,000 image categories of everyday objects.  We will therefore make use of a Pytorch framework to train and test the model.

The above mentioned model gives us a fast inference time and a high Mean Average Precision. It is preferred for cases where a quick real time detection is desired.

First, the model is to be trained using public datasets for Table Detection such as Marmot and UNLV datasets. Next, we further fine-tune the model with our custom labeled dataset. For the purpose of labeling, we will follow the COCO annotation format.

Once trained, the model displayed an accuracy close to 86% on our custom dataset. There are certain scenarios where the model fails to locate the tables such as cases containing watermarks and/or overlapping texts. Tables without borders are also missed in a few instances. However, the model has shown its ability to learn from examples and detect tables in multiple different invoice documents. 

Fig. 7

After running inference on the sample invoice from Fig 6, we can see two table boundaries being detected by the model in Fig 7. The first table gets detected with 100% accuracy and the second table is detected with 99% accuracy.

Table Structure Extraction

Once the boundaries of the table are detected by the model, an OCR (Optical Character Reader) mechanism is used to extract the text within the boundaries. The text is then processed using the information that is part of a unique table.

We were able to extract the correct structure of the table, including its headers and line items using logics derived from the invoices. The difficulty of this process depends on the type of invoice format at hand.

There are multiple challenges that one may encounter while building an algorithm to extract structure. Some of them are:

  1. The span of some table columns may overlap making it difficult to determine the boundaries between columns.
  2. The fonts and sizes present within tables may vary from one table to another. The algorithm should be able to accomodate for this variation.
  3. The tables might get split into two pages and detecting the continuation of a table might be challenging.

Certain deep learning approaches have also been published recently to determine the structure of a table. However, training them on custom datasets still remains a challenge. 

Fig 8

The final result is then stored in a CSV file and can be edited or stored according to one’s convenience as shown in Fig 8 which displays the first table information.

Conclusion

The deep learning approach to extracting information from structured documents is a step in the right direction. With high accuracy and low running time, the systems can only learn to perform better with more data. The recent and upcoming advancements in computer vision approaches have made processes such as invoice automation significantly accessible and robust.

About the author:

Prateek Sethi is a Data Scientist working at Mantra Labs. His work involves leveraging Artificial Intelligence to create data-driven solutions. Apart from his work he takes a keen interest in football and exploring the outdoors.

Further Reading:

Cancel

Knowledge thats worth delivered in your inbox

Loading More Posts ...
Go Top
bot

May i help you?

bot shadow

Our Website is
Best Experienced on
Chrome & Safari

safari icon