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>
);
}