Censor Images in Remix Using AI

Censoring images helps blur or hide anything we don’t want people to see, such as backgrounds, faces, house numbers, or anything we want to obscure from photos.

Remix is a full-stack React framework for building web applications. It provides several helpful features such as server-side rendering, file-system-based routing, TypeScript support, built-in support for cookies and sessions, and more.

This article will discuss how to censor images using Cloudinary and Remix.

The completed project is on CodeSandbox. Fork it and run the code.

The source code is also available on GitHub.

The following are requirements to complete this project:

• Knowledge of React, Remix
• Node.js and its package manager, npm. We run the command node -v && npm -v to verify we have them installed or install them from here
• A Cloudinary account (sign up here)

First, we need to run the command below in the terminal to set up a new Remix application.

npx create-remix@latest censor-images

The command above triggers a command-line interface (CLI) where we can configure the application. The images below show the configuration options the CLI provides:

Next, navigate into the project directory.

cd remix-censor-images

Then, run the command below to start the application.

npm run dev

Remix will start a development environment accessible by default at http://localhost:3000.

Cloudinary provides a robust solution to store, transform, optimize and deliver images and videos in software applications.

We’ll install the cloudinary-react package that exposes various media delivery and transformation functions using the command line.

npm i cloudinary-react lodash

Lodash is a dependency of the Cloudinary package.

In our dashboard, we will have access to upload and save the downloaded images in Cloudinary by clicking the Media Library tab and Upload button, as displayed below.

Next, we need to copy the publicId for the saved images from our dashboard, we’ll use them later to access our images.

Navigate to the app/routes/index.jsx file and update it with the code from the gist below.

https://gist.github.com/Tundesamson26/c573bdec4c2a2590b014cb56a2eec6ca

From the gist above, we:

• Imported CloudinaryContext and added our cloud name
• Passed publicId of the images we uploaded to cloudinary to the Image tag to display them
• Used Transformation to add different pixelate_faces effects to the pictures to blur the images

Now, we should see our images with different blur effects in the browser.

The first image has the default blur effect, pixelate_faces.

The second image has a lighter blur effect, pixelate_faces:10.

The third one has a very thick blur effect, pixelate_faces:45.

This article taught us how to censor or blur images with Remix and Cloudinary.

• Remix Documentation
• Effects with face detection
• Cloudinary Image Transformation