javascript - 如何在 ReactJS APP 中调用预训练的 Magenta Tensorflow JS 任意样式迁移模型？

Question

我是 ReactJS 的新手。我正在尝试在 ReactJS 应用程序中使用 Magenta TensorflowJS 库中预先训练的任意样式传输模型。https://www.npmjs.com/package/@magenta/image 尽管在 javascript 中有一个代码示例，但我发现很难将它纳入 React。这是 magenta npm 的示例代码，

import * as mi from '@magenta/image';
 
const model = new mi.ArbitraryStyleTransferNetwork();
const contentImg = document.getElementById('content') as HTMLImageElement;
const styleImg = document.getElementById('style') as HTMLImageElement;
const stylizedCanvas = document.getElementById('stylized') as HTMLCanvasElement;
 
function stylize() {
  model.stylize(contentImg, styleImg).then((imageData) => {
    stylizedCanvas.getContext('2d').putImageData(imageData, 0, 0);
  });
}
 
model.initialize().then(stylize);

我正在上传两个用户图像并将其 URL 存储在两个变量中。对于模型输入，要给出的基本图像和样式图像 URL 还是作为输入的图像？如链接中的示例所示，我不确定如何在 React 中调用 canvas 元素。如何在 ReactJS 中调用这个预训练模型？

标签： javascriptreactjstensorflow.jsmagenta