Neural Artwork Style Transfer

Cloudinary is a cloud-based service that provides solutions for image and video management, including server or client-side upload, on-the-fly image and video transformations, quick CDN delivery, and a variety of asset management options.

The Neural Artwork Style Transfer add-on takes Cloudinary image transformations to a new level with the style_transfer effect. This effect applies a complex deep learning neural network algorithm that extracts artistic styles from a source image and applies them to the content of a target photograph.

Getting started

Before you can use the Neural Art Style Transfer add-on:

You must have a Cloudinary account. If you don't already have one, you can sign up for a free account.
Register for the add-on: make sure you're logged in to your account and then go to the Add-ons page. For more information about add-on registrations, see Registering for add-ons.
Keep in mind that many of the examples on this page use our SDKs. For SDK installation and configuration details, see the relevant SDK guide.
If you are new to Cloudinary, you may want to take a look at How to integrate Cloudinary in your app for a walk through on the basics of creating and setting up your account, working with SDKs, and then uploading, transforming and delivering assets.

Important

By default, delivery URLs that use this add-on either need to be signed or eagerly generated. You can optionally remove this requirement by selecting this add-on in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console (the demo account has this setting applied to make the examples on this page easier to read and try out).

On this page:

Getting started
Overview
Adjusting style transformation preferences
Setting the image size
Signed URLs
Neural artwork add-on demo
More on Cloudinary transformations

Overview

Gatys et al is credited with using the VGG neural network to demonstrate how different abstractions of the source and target images can be filtered at different layers, so that the essential elements of the input image can be applied without losing the essence of the target content. Cloudinary's algorithm takes advantage of Xun Huange and Serge Belongie's enhancement on the Gatys algorithm, which make it possible to use any image for both source and target, and still deliver a good quality style transfer in real time, using a single feed-forward neural network.

To apply this style transfer effect on any photograph, specify the public ID of the source artwork as an image overlay (l_ in URLs) and style_transfer as the overlay effect (e_style_transfer in URLs) to apply (include this effect in the layer_apply component of your URL). The target photograph is the public ID of the image to deliver.

In the example below, the styles of the Sailing Angel artwork are transferred to the Golden Gate Bridge photo:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/c_fill,h_700,w_700/l_sailing_angel/e_style_transfer,fl_layer_apply/golden_gate.jpg

Ruby (cloudinary 1.x):

cl_image_tag("golden_gate.jpg", :transformation=>[
  {:height=>700, :width=>700, :crop=>"fill"},
  {:overlay=>"sailing_angel"},
  {:effect=>"style_transfer", :flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new ImageTag('golden_gate.jpg'))
  ->resize(Resize::fill()->width(700)
->height(700))
  ->effect(Effect::styleTransfer(
  Source::image("sailing_angel")));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("golden_gate.jpg", array("transformation"=>array(
  array("height"=>700, "width"=>700, "crop"=>"fill"),
  array("overlay"=>"sailing_angel"),
  array("effect"=>"style_transfer", "flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryImage("golden_gate.jpg").image(transformation=[
  {'height': 700, 'width': 700, 'crop': "fill"},
  {'overlay': "sailing_angel"},
  {'effect': "style_transfer", 'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("golden_gate.jpg", {transformation: [
  {height: 700, width: 700, crop: "fill"},
  {overlay: "sailing_angel"},
  {effect: "style_transfer", flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .height(700).width(700).crop("fill").chain()
  .overlay(new Layer().publicId("sailing_angel")).chain()
  .effect("style_transfer").flags("layer_apply")).imageTag("golden_gate.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("golden_gate.jpg")
  .resize(fill().width(700).height(700))
  .effect(styleTransfer(image("sailing_angel")));

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('golden_gate.jpg', {transformation: [
  {height: 700, width: 700, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("sailing_angel")},
  {effect: "style_transfer", flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("golden_gate.jpg", {transformation: [
  {height: 700, width: 700, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("sailing_angel")},
  {effect: "style_transfer", flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("golden_gate.jpg")
  .resize(fill().width(700).height(700))
  .effect(styleTransfer(image("sailing_angel")));

React (cloudinary-react 1.x):

<Image publicId="golden_gate.jpg" >
  <Transformation height="700" width="700" crop="fill" />
  <Transformation overlay="sailing_angel" />
  <Transformation effect="style_transfer" flags="layer_apply" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="golden_gate.jpg" >
  <cld-transformation height="700" width="700" crop="fill" />
  <cld-transformation :overlay="sailing_angel" />
  <cld-transformation effect="style_transfer" flags="layer_apply" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("golden_gate.jpg")
  .resize(fill().width(700).height(700))
  .effect(styleTransfer(image("sailing_angel")));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="golden_gate.jpg" >
  <cl-transformation height="700" width="700" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="sailing_angel">
  </cl-transformation>
  <cl-transformation effect="style_transfer" flags="layer_apply">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(700).Width(700).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("sailing_angel")).Chain()
  .Effect("style_transfer").Flags("layer_apply")).BuildImageTag("golden_gate.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(700).setWidth(700).setCrop("fill").chain()
  .setOverlay("sailing_angel").chain()
  .setEffect("style_transfer").setFlags("layer_apply")).generate("golden_gate.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .height(700).width(700).crop("fill").chain()
  .overlay(new Layer().publicId("sailing_angel")).chain()
  .effect("style_transfer").flags("layer_apply")).generate("golden_gate.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("golden_gate.jpg")
   resize(Resize.fill() { width(700)
 height(700) })
   effect(Effect.styleTransfer(
  Source.image("sailing_angel"))) 
}.generate()

Source artwork

Target photo

Style transfer result

Tip

To apply this transformation using the Transformation Editor, first select to Add overlay & watermark and specify the source artwork's Image ID. Then select Style transfer as the effect of the overlay image.

Adjusting style transformation preferences

The algorithm is able to recognize styles in the source painting, such as brush stroke style, textures, and dominant colors. It can then apply those styles to the content elements of the target photograph. In the resulting image, there is some content loss, and some style loss, but the neural network algorithm optimizes these losses so that the main elements of the artwork's style come through while ensuring that the content of the target photo is clearly recognizable.

If you want to retain the target photograph's colors, you can include the preserve_color option.
If you want to control how much of the style from the source painting is transferred, you can adjust the style_strength (1-100, default: 100).

For example, if you transfer the styles of the lighthouse source artwork to the beach_2_kids target photo, you clearly get a result that is heavily influenced by the lighthouse image's colors and brushstroke styles:

Source artwork

Target photo

Default style transfer

Now take a look at the next three images to see how the result changes with the use of the adjustment settings:

Preserve original colors

Adjust style strength
to 60

Style transfer with adjusted strength and colors preserved

Adjust strength and
preserve colors

Here's the transformation code for that last image, using both the preserve_color and style_strength options:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/image/upload/c_fill,h_700,w_700/l_lighthouse/e_style_transfer:preserve_color:40,fl_layer_apply/beach_2_kids.jpg

Ruby (cloudinary 1.x):

cl_image_tag("beach_2_kids.jpg", :transformation=>[
  {:height=>700, :width=>700, :crop=>"fill"},
  {:overlay=>"lighthouse"},
  {:effect=>"style_transfer:preserve_color:40", :flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new ImageTag('beach_2_kids.jpg'))
  ->resize(Resize::fill()->width(700)
->height(700))
  ->effect(Effect::styleTransfer(
  Source::image("lighthouse"))
  ->preserveColor()
->strength(40));

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("beach_2_kids.jpg", array("transformation"=>array(
  array("height"=>700, "width"=>700, "crop"=>"fill"),
  array("overlay"=>"lighthouse"),
  array("effect"=>"style_transfer:preserve_color:40", "flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryImage("beach_2_kids.jpg").image(transformation=[
  {'height': 700, 'width': 700, 'crop': "fill"},
  {'overlay': "lighthouse"},
  {'effect': "style_transfer:preserve_color:40", 'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("beach_2_kids.jpg", {transformation: [
  {height: 700, width: 700, crop: "fill"},
  {overlay: "lighthouse"},
  {effect: "style_transfer:preserve_color:40", flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .height(700).width(700).crop("fill").chain()
  .overlay(new Layer().publicId("lighthouse")).chain()
  .effect("style_transfer:preserve_color:40").flags("layer_apply")).imageTag("beach_2_kids.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("beach_2_kids.jpg")
  .resize(fill().width(700).height(700))
  .effect(
    styleTransfer(image("lighthouse"))
      .preserveColor()
      .strength(40)
  );

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('beach_2_kids.jpg', {transformation: [
  {height: 700, width: 700, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("lighthouse")},
  {effect: "style_transfer:preserve_color:40", flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("beach_2_kids.jpg", {transformation: [
  {height: 700, width: 700, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("lighthouse")},
  {effect: "style_transfer:preserve_color:40", flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("beach_2_kids.jpg")
  .resize(fill().width(700).height(700))
  .effect(
    styleTransfer(image("lighthouse"))
      .preserveColor()
      .strength(40)
  );

React (cloudinary-react 1.x):

<Image publicId="beach_2_kids.jpg" >
  <Transformation height="700" width="700" crop="fill" />
  <Transformation overlay="lighthouse" />
  <Transformation effect="style_transfer:preserve_color:40" flags="layer_apply" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="beach_2_kids.jpg" >
  <cld-transformation height="700" width="700" crop="fill" />
  <cld-transformation :overlay="lighthouse" />
  <cld-transformation effect="style_transfer:preserve_color:40" flags="layer_apply" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("beach_2_kids.jpg")
  .resize(fill().width(700).height(700))
  .effect(
    styleTransfer(image("lighthouse"))
      .preserveColor()
      .strength(40)
  );

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="beach_2_kids.jpg" >
  <cl-transformation height="700" width="700" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="lighthouse">
  </cl-transformation>
  <cl-transformation effect="style_transfer:preserve_color:40" flags="layer_apply">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(700).Width(700).Crop("fill").Chain()
  .Overlay(new Layer().PublicId("lighthouse")).Chain()
  .Effect("style_transfer:preserve_color:40").Flags("layer_apply")).BuildImageTag("beach_2_kids.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(700).setWidth(700).setCrop("fill").chain()
  .setOverlay("lighthouse").chain()
  .setEffect("style_transfer:preserve_color:40").setFlags("layer_apply")).generate("beach_2_kids.jpg")!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .height(700).width(700).crop("fill").chain()
  .overlay(new Layer().publicId("lighthouse")).chain()
  .effect("style_transfer:preserve_color:40").flags("layer_apply")).generate("beach_2_kids.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("beach_2_kids.jpg")
   resize(Resize.fill() { width(700)
 height(700) })
   effect(Effect.styleTransfer(
  Source.image("lighthouse")) {
   preserveColor()
 strength(40) }) 
}.generate()

Setting the image size

The Neural Artwork add-on supports generating images with the style_transfer effect for any resolution up to 3000x3000, and it's capable of rendering the new image very quickly even at large sizes. However, because of the way the algorithm analyzes the content of the target photo, you will get different results for different sizes of the target photo. Also, keep in mind that the neural network algorithm behind our Neural Artwork add-on was initially designed for optimum output of images at resolutions in the range of 600x600 - 800x800.

Therefore, when this optimum resolution range is appropriate for your intended usage, use resize or cropping transformations to bring the target photo into this range in one transformation component, and then apply the style_transfer effect in a later transformation component.

For example: ....c_scale,w_700/l_your_artwork/e_style_transfer,fl_layer_apply/your_target_photo.jpg

Likewise, if you want to output images that are significantly smaller than the above recommended resolution range, you may want to apply the style_transfer effect in an earlier transformation component, and then apply the resizing to the small size in a later transformation component.

For example: ....c_scale,w_700/l_your_artwork/e_style_transfer,fl_layer_apply/c_scale,w_200/your_target_photo.jpg

Signed URLs

Cloudinary's dynamic image transformation URLs are powerful tools for agile web and mobile development. However, due to the potential costs of your customers accessing unplanned dynamic URLs that apply the neural art algorithm, image transformation add-on URLs are required (by default) to be signed using Cloudinary's authenticated API or, alternatively, you can eagerly generate the requested derived images using Cloudinary's authenticated API.

To create a signed Cloudinary URL, set the sign_url parameter to true when building a URL or creating an image tag.

The following code example generates a neural artwork by overlaying the davinci_mona_lisa artwork with the coffee_cup_st photo, including a signed Cloudinary URL:

Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

Ruby (cloudinary 1.x):

cl_image_tag("coffee_cup_st.jpg", :sign_url=>true, :transformation=>[
  {:overlay=>"davinci_mona_lisa"},
  {:effect=>"style_transfer", :flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new ImageTag('coffee_cup_st.jpg'))
  ->effect(Effect::styleTransfer(
  Source::image("davinci_mona_lisa")))
  ->sign();

PHP (cloudinary_php 1.x (legacy)):

cl_image_tag("coffee_cup_st.jpg", array("sign_url"=>true, "transformation"=>array(
  array("overlay"=>"davinci_mona_lisa"),
  array("effect"=>"style_transfer", "flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryImage("coffee_cup_st.jpg").image(sign_url=True, transformation=[
  {'overlay': "davinci_mona_lisa"},
  {'effect': "style_transfer", 'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.image("coffee_cup_st.jpg", {sign_url: true, transformation: [
  {overlay: "davinci_mona_lisa"},
  {effect: "style_transfer", flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("davinci_mona_lisa")).chain()
  .effect("style_transfer").flags("layer_apply")).signed(true).imageTag("coffee_cup_st.jpg");

JS (@cloudinary/url-gen 1.x):

new CloudinaryImage("coffee_cup_st.jpg")
  .effect(styleTransfer(image("davinci_mona_lisa")))
  .setSignature("D2UmnV-Z");

JS (cloudinary-core 2.x (legacy)):

cloudinary.imageTag('coffee_cup_st.jpg', {signUrl: true, transformation: [
  {overlay: new cloudinary.Layer().publicId("davinci_mona_lisa")},
  {effect: "style_transfer", flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.image("coffee_cup_st.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("davinci_mona_lisa")},
  {effect: "style_transfer", flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("coffee_cup_st.jpg")
  .effect(styleTransfer(image("davinci_mona_lisa")))
  .setSignature("D2UmnV-Z");

React (cloudinary-react 1.x):

<Image publicId="coffee_cup_st.jpg" signUrl="true">
  <Transformation overlay="davinci_mona_lisa" />
  <Transformation effect="style_transfer" flags="layer_apply" />
</Image>

Vue.js (cloudinary-vue 1.x):

<cld-image public-id="coffee_cup_st.jpg" sign-url="true">
  <cld-transformation :overlay="davinci_mona_lisa" />
  <cld-transformation effect="style_transfer" flags="layer_apply" />
</cld-image>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryImage("coffee_cup_st.jpg")
  .effect(styleTransfer(image("davinci_mona_lisa")))
  .setSignature("D2UmnV-Z");

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-image public-id="coffee_cup_st.jpg" sign-url="true">
  <cl-transformation overlay="davinci_mona_lisa">
  </cl-transformation>
  <cl-transformation effect="style_transfer" flags="layer_apply">
  </cl-transformation>
</cl-image>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("davinci_mona_lisa")).Chain()
  .Effect("style_transfer").Flags("layer_apply")).Signed(true).BuildImageTag("coffee_cup_st.jpg")

iOS (cloudinary 3.x):

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("davinci_mona_lisa").chain()
  .setEffect("style_transfer").setFlags("layer_apply")).generate("coffee_cup_st.jpg", signUrl: true)!, cloudinary: cloudinary)

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("davinci_mona_lisa")).chain()
  .effect("style_transfer").flags("layer_apply")).signed(true).generate("coffee_cup_st.jpg");

Kotlin (kotlin-url-gen 1.x):

cloudinary.image {
  publicId("coffee_cup_st.jpg")
   effect(Effect.styleTransfer(
  Source.image("davinci_mona_lisa")))
   signature() 
}.generate()

Code for generating neural artwork with signed URL

The generated Cloudinary URL shown below includes a signature component (/s--D2UmnV-Z--/). Only URLs with a valid signature that matches the requested image transformation will be approved for on-the-fly image transformation and delivery.

https://res.cloudinary.com/demo/image/upload/s--D2UmnV-Z--/l_davinci_mona_lisa/e_style_transfer,fl_layer_apply/coffee_cup_st.jpg

For more details on signed URLs, see Signed delivery URLs.

Note

You can optionally remove the signed URL default requirement for a particular add-on by selecting it in the Allow unsigned add-on transformations section of the Security account settings in the Cloudinary console.

Neural artwork add-on demo

1 Pick an artwork:

2 Pick a target photo below OR

Upload your own

If you upload a picture, it will appear here

3 Press the magic button:

Generate Neural Artwork

https://res.cloudinary.com/demo/image/upload/art_here.jpg

More on Cloudinary transformations

You can create even more unique results by combining the Neural Artwork style_transfer effect with other transformations. For details, see Image transformations and the Transformation URL API Reference.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: