> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Enhance and restore images (video tutorial)

[githublink]: https://github.com/cloudinary-devs/ai-enhancements

## Overview

Watch this tutorial to learn how to improve the visual appeal of images and remove compression artifacts using AI.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Enhancing user-generated content
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | User-generated content plays a crucial role in engaging audiences and building trust, but some images that users upload can be poor quality, and not reflective of your brand. Cloudinary can help to revitalize these images by using AI to restore quality and enhance their visual appeal.

### Different improvement options
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=47 :player=cld} | There are many options that you can use to improve the images on your site, and they can even be combined to take advantage of all their strengths. You can use any of the [Cloudinary SDKs](cloudinary_sdks) to apply the enhancements to your delivered images programmatically. A React environment is used in this tutorial.

### Generative restore
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=06 :player=cld} | The generative restore effect uses generative AI to recover image details lost due to compression and over-processing. Install and configure the [React SDK](react_quick_start), then instantiate a CloudinaryImage object for the image you want to improve. Import `generativeRestore` from `@cloudinary/url-gen/actions/effect` and apply the effect to the image:

```react
import { Cloudinary } from "@cloudinary/url-gen";
import { generativeRestore } from "@cloudinary/url-gen/actions/effect";

function App() {

  // Create a Cloudinary instance and set your cloud name.
  const cld = new Cloudinary({
    cloud: {
      cloudName: 'demo'
    }
  });

// Instantiate a CloudinaryImage object.
const origWedding = cld.image('docs/small-wedding-couple');

// Apply the effect to the image.
origWedding.effect(generativeRestore());

...
```

### Compare images
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=39 :player=cld} | Use the `react-compare-slider` library to compare the original image with the restored image.

```react
import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

...

  const origWedding = cld.image('docs/small-wedding-couple');
  const restoredWedding = cld.image('docs/small-wedding-couple');
  
  // Restored
  restoredWedding.effect(generativeRestore());

...

  <h1>Original vs Restored</h1>
  <div className="container400">
    <ReactCompareSlider
        itemOne={<ReactCompareSliderImage src={origWedding.toURL()} alt="Image one" />}
        itemTwo={<ReactCompareSliderImage src={restoredWedding.toURL()} alt="Image two" />}
    />
  </div>
  <br/>

```

### Upscale
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=10 :player=cld} | Upscaling, by simply increasing the dimensions of an image, makes the quality worse. Cloudinary's super-resolution `upscale` effect increases the quality, especially for faces. Import `upscale` from `@cloudinary/url-gen/actions/effect` and apply the effect to the image:

```react
import { upscale } from "@cloudinary/url-gen/actions/effect";

...

  const superUpscaledWedding = cld.image('docs/small-wedding-couple');

  // Upscale with super resolution.
  superUpscaledWedding.effect(upscale());
```

### Enhance
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=59 :player=cld} | The `enhance` effect uses AI to analyze the image, then applies various operators to enhance it, improving, for example, exposure, color balance and white balance. Import `enhance` from `@cloudinary/url-gen/actions/effect` and apply the effect to the image:

```react
import { enhance } from "@cloudinary/url-gen/actions/effect";

...

  const enhancedWedding = cld.image('docs/small-wedding-couple');

  // Apply the enhance effect.
  enhancedWedding.effect(enhance());
```

### Improve
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=26 :player=cld} | The `improve` effect uses a filter to adjust the colors, contrast and lighting. Import `enhance` from `@cloudinary/url-gen/actions/effect` and apply the effect to the image:

```react
import { improve } from "@cloudinary/url-gen/actions/adjust";

...

  const improvedWedding = cld.image('docs/small-wedding-couple');

  // Apply the enhance effect.
  improvedWedding.adjust(improve());
```

### Combine all the effects
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=46 :player=cld} | You can combine all the effects to take advantage of all their strengths. Each effect is applied to the result of the previous:

```react
  const restoredSuperUpscaledEnhancedImprovedWedding = cld.image('docs/small-wedding-couple'); 

  restoredSuperUpscaledEnhancedImprovedWedding
    .effect(generativeRestore())
    .effect(upscale())
    .effect(enhance())
    .adjust(improve());
```

## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn about other applications of [AI in action](ai_in_action).

> * Take a look at the [User-generated content guide](user_generated_content) to see all the features you can take advantage of when displaying user-generated content on your site.

> * Discover more transformations in the [Transformation URL API reference](transformation_reference).

#### If you like this, you might also like...

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

  
  
  
    Upload Assets in React
    Upload assets using the Upload widget in a React app 
  

  
  
  
      Crop and Resize Images in React
      Crop and resize images using React with Cloudinary 
  

&nbsp;

&nbsp;Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
&nbsp;