useStyleTransfer

Style transfer is a technique used in computer graphics and machine learning where the visual style of one image is applied to the content of another. This is achieved using algorithms that manipulate data from both images, typically with the aid of a neural network. The result is a new image that combines the artistic elements of one picture with the structural details of another, effectively merging art with traditional imagery. React Native ExecuTorch offers a dedicated hook useStyleTransfer, for this task. However before you start you'll need to obtain ExecuTorch-compatible model binary.

warning

It is recommended to use models provided by us which are available at our Hugging Face repository, you can also use constants shipped with our library.

API Reference

• For detailed API Reference for useStyleTransfer see: useStyleTransfer API Reference.
• For all style transfer models available out-of-the-box in React Native ExecuTorch see: Style Transfer Models.

High Level Overview

import {
  useStyleTransfer,
  STYLE_TRANSFER_CANDY,
} from 'react-native-executorch';

const model = useStyleTransfer({ model: STYLE_TRANSFER_CANDY });

const imageUri = 'file:///Users/.../cute_cat.png';

try {
  // Returns a file URI string
  const uri = await model.forward(imageUri, 'url');
  // Or returns raw PixelData (default)
  const pixels = await model.forward(imageUri);
} catch (error) {
  console.error(error);
}

Arguments

useStyleTransfer takes StyleTransferProps that consists of:

• model containing modelSource.
• An optional flag preventLoad which prevents auto-loading of the model.

You need more details? Check the following resources:

• For detailed information about useStyleTransfer arguments check this section: useStyleTransfer arguments.
• For all style transfer models available out-of-the-box in React Native ExecuTorch see: Style Transfer Models.
• For more information on loading resources, take a look at loading models page.

Returns

useStyleTransfer returns an object called StyleTransferType containing bunch of functions to interact with style transfer models. To get more details please read: StyleTransferType API Reference.

Running the model

To run the model, use the forward method. It accepts two arguments:

• input (required) — The image to stylize. Can be a remote URL, a local file URI, a base64-encoded image (whole URI or only raw base64), or a PixelData object (raw RGB pixel buffer).
• outputType (optional) — Controls the return format:
  • 'pixelData' (default) — Returns a PixelData object with raw RGB pixels. No file is written.
  • 'url' — Saves the result to a temp file and returns its URI as a string.

info

When outputType is 'url', the generated image is stored in your application's temporary directory.

Example

import {
  useStyleTransfer,
  STYLE_TRANSFER_CANDY,
} from 'react-native-executorch';

function App() {
  const model = useStyleTransfer({ model: STYLE_TRANSFER_CANDY });

  // Returns a file URI — easy to pass to <Image source={{ uri }} />
  const runWithUrl = async (imageUri: string) => {
    try {
      const uri = await model.forward(imageUri, 'url');
      console.log('Styled image saved at:', uri);
    } catch (error) {
      console.error(error);
    }
  };

  // Returns raw PixelData — useful for further processing or frame pipelines
  const runWithPixelData = async (imageUri: string) => {
    try {
      const pixels = await model.forward(imageUri);
      // pixels.dataPtr is a Uint8Array of RGB bytes
    } catch (error) {
      console.error(error);
    }
  };
}

VisionCamera integration

See the full guide: VisionCamera Integration.

Supported models

• Candy
• Mosaic
• Udnie
• Rain princess