Introduction to AI Background Remover Using TensorFlow.js for React Applications

Hello, Khabrovsk residents! Today I want to share how I created a component React Selfie AI Background Remover using TensorFlow.js. All code is publicly available on GitHub, and you can also explore it as a separate package on NPM. Also available live demowhich you can try.

In Part 2, we'll dive into the power of artificial intelligence for front-end applications and explore other powerful machine learning models provided by TensorFlow.js.

Introduction

React Selfie AI Background Remover is a React component I developed to remove backgrounds from images of people using a model MediaPipe Selfie Segmentation from TensorFlow.js. This model can be used for a variety of tasks due to its wide capabilities for segmenting people in images. Although it can be used for a variety of purposes, in this article we will focus on how to use it for background removal.

In this article we will look at:

1. How to use React Selfie AI Background Remover.

2. The technology underlying it is the TensorFlow.js model.

3. Other features it offers TensorFlow.js for frontend applications.

Step 1: Using AI Background Remover in Your Application

You can easily integrate React Selfie AI Background Remover to any React application with version 16.8 or higher.

Add the component via npm:

npm install react-selfie-ai-background-remover

The component

The interface is customizable; you can pass parameters or entire button components as props to personalize the interface.

Usage example BackgroundRemover:

import React from 'react';
import BackgroundRemover, { OnProcessCompleteResult, BackgroundRemoverProps, ShowButtonsProps } from 'react-selfie-ai-background-remover';

function App() {
  const handleProcessComplete = ({ originalImage, processedImage, maskImage }: OnProcessCompleteResult) => {
    console.group('Process Complete')
    console.dir({ originalImage, processedImage, maskImage })
  };

  const handleError = (error: unknown) => {
    console.error('Error: ', error);
  };


  return (
    <div className="wrapper">
      <h1>Example of usage React Selfie Background Remover</h1>
      <BackgroundRemover
        onProcessComplete={handleProcessComplete}
        onError={handleError}
        allowDownload={true}
        uploadButton={<button className="custom-class-name-1">Custom Upload Image</button>}
        downloadButton={<button className="custom-class-name-2">Custom Download Image</button>}
        downloadMaskButton={<button className="custom-class-name-3">Custom Download Mask</button>}
        clearButton={<button className="custom-class-name-4">Custom Clear</button>}
      />
    </div>
  );
}

export default App;

The component includes image uploading, AI-based background removal, and options to download the processed image and mask. You can customize or hide the buttons as needed. The component's API provides many props for further customization, which are not covered in this article.

For more details, check out the documentation on NPM or visit repository on GitHub.

For mining React Selfie AI Background RemoverI used:

• @tensorflow-models/body-segmentation: MediaPipe Selfie Segmentation provides a model for body segmentation.

• @tensorflow/tfjs: A library that allows you to run TensorFlow models in the browser using JavaScript.

Step 2: Technology – TensorFlow.js and MediaPipe Selfie Segmentation

Background removal is done using TensorFlow.jswhich brings machine learning to the browser through pre-installed models.

Model MediaPipe Selfie Segmentation from body-segmentation from TensorFlow accurately separates object and background. Here's how it works:

1. Uploading an image: User uploads an image.

2. Segmentation: The model identifies the object in the image.

3. Mask generation: Creates a binary mask to separate the object and background.

4. Applying a mask: The canvas element uses this mask to remove the background.

Step 3: TensorFlow.js for Frontend Applications

In addition to removing the background, TensorFlow.js offers other useful models:

• BlazeFace: Real face detection time.

• Body-Pix: Body part segmentation and background removal.

• Body Segmentation: Advanced body segmentation for precise object separation.

• Coco-SSD: Detecting objects in images.

• DeepLab: Semantic image segmentation.

• Depth Estimation: Image depth estimation.

• Face Detection: Face detection using modern algorithms.

• Face Landmarks Detection: Identify key points of the face such as eyes and nose.

• GPT-2: Text generation using neural networks.

• Hand Pose Detection: Detects the position of hands and fingers.

• Handpose: Hand gesture recognition.

• KNN Classifier: Data classification using KNN algorithm.

• MobileNet: A lightweight image classification model.

• Model Playground: Interactive testing of various models.

• Pose Detection: Human pose detection for applications such as fitness.

• Posenet: Body position tracking for motion analysis.

• QnA: Answer questions based on the text provided.

• Scripts: A set of utility scripts for developing models.

• Shared: Common utilities for TensorFlow.js integration.

• Speech Commands: Voice command recognition.

• Tasks: Optimized tasks for various models.

• Tools: Auxiliary tools for working with models.

• Toxicity: Detection of toxic comments in the text.

• Universal Sentence Encoder: Coding sentences to analyze their meaning.

TensorFlow.js allows developers to integrate AI into web applications without the need for a machine learning backend.

Find out more by exploring this repository with examples on GitHub.

Why TensorFlow.js?

TensorFlow.js brings machine learning directly to the browser, making apps more responsive and secure. Processing is performed locally on the device, which ensures the privacy of user data.

Advantages of TensorFlow.js:

• Privacy: Data is processed on the user's device.

• Interactivity: Real time feedback.

• Cross-platform: Works on any device with a modern browser.

Conclusion

React Selfie AI Background Remover demonstrates the potential of machine learning in the browser. Using TensorFlow.jsyou can create features like background removal with minimal effort. This component is easy to integrate and configure.

Install it via npmcheck out repository on GitHub or try live demo.

TensorFlow.js is an excellent tool for integrating AI into web projects, allowing you to implement functions such as facial recognition, gesture recognition and text analysis.