export default function FastNeuralStyle()

in react-native-pytorch-core/example/src/toolbox/models/FastNeuralStyle.tsx [31:98]


export default function FastNeuralStyle() {
  const [metrics, setMetrics] = React.useState<ModelResultMetrics>();
  const [layout, setLayout] = React.useState<LayoutRectangle>();
  const [context2d, setContext2d] = React.useState<CanvasRenderingContext2D>();
  const isFocused = useIsFocused();

  const handleCapture = useCallback(
    async (image: Image) => {
      const width = image.getWidth();
      const height = image.getHeight();
      const size = Math.min(width, height);
      const {result, metrics: m} =
        await MobileModel.execute<StyleTransferResult>(model, {
          image,
          cropWidth: size,
          cropHeight: size,
          scaleWidth: pictureSize,
          scaleHeight: pictureSize,
        });
      setMetrics(m);

      if (layout != null) {
        context2d?.clearRect(0, 0, layout?.width, layout?.height);
        context2d?.drawImage(
          result.image,
          0,
          0,
          pictureSize,
          pictureSize,
          0,
          layout?.height / 2 - layout?.width / 2,
          layout?.width,
          layout?.width,
        );
        await context2d?.invalidate();
        ImageUtil.release(result.image);
      }

      image.release();
    },
    [setMetrics, layout, context2d],
  );

  if (!isFocused) {
    return null;
  }

  return (
    <View style={styles.background}>
      <Camera
        onFrame={handleCapture}
        style={styles.camera}
        targetResolution={{width: 480, height: 640}}
        facing={CameraFacing.FRONT}
      />
      <Canvas
        style={styles.canvas}
        onLayout={e => setLayout(e.nativeEvent.layout)}
        onContext2D={setContext2d}
      />
      <ImageClass
        style={styles.metrics}
        imageClass={'Candy Style Transfer'}
        metrics={metrics}
      />
    </View>
  );
}