作者：Yannick Assogba，Google Research 脑科学团队软件工程师

我们很高兴地宣布，TensorFlow.js for React Native 现已正式发布。我们感谢所有在 alpha 版本期间提供反馈、错误报告和贡献的用户，并邀请更广泛的 React Native 开发者社区试用！

什么是 React Native？

JavaScript 在包括原生移动应用程序在内的各种平台上运行。混合应用程序框架允许开发人员利用 JavaScript 从单个代码库开发原生 Android 和 iOS 应用程序。这些框架允许开发人员创建脱离浏览器运行的应用程序，并利用原生操作系统 API 创建与底层平台无缝集成的应用程序。

React Native 是最受欢迎的混合原生框架之一，它将 React 框架用于编写和原生 UI 组件用于渲染。React Native 小部件是原生平台小部件，由 JavaScript 线程控制。该框架提供了一种编写应用程序的方法，并负责 JavaScript 线程与原生 API 之间的通信。

tfjs-react-native

React Native 不依赖于“Web View”进行渲染，我们也不想强迫开发人员使用 Web View 来使用 TensorFlow.js。因此，我们无法依赖在浏览器中使用的许多 Web 平台 API。因此，我们提供了一个适用于此环境的新的平台集成和后端。tfjs-react-native 包提供了以下功能

• GPU 加速后端：与浏览器中一样，TensorFlow.js for React Native 使用 WebGL 提供GPU 加速数学运算。我们利用expo-gl 库，它提供了由 OpenGL ES 3 支持的兼容 WebGL 的图形上下文。这使我们能够在这个新环境中重复使用我们现有的 WebGL 实现。
  
• 模型加载和保存：我们能够加载和执行我们在浏览器中能够执行的所有tensorflow.js 模型。 我们还提供两种新的IOHandlers，允许加载与应用程序捆绑在一起的模型（因此不需要远程网络调用）。这也将自定义模型保存到本地存储。
  
• 训练支持：说到自定义模型，tfjs-react-native 完全支持训练和微调 TensorFlow.js 提供的模型。您可以根据用户数据自定义模型，同时将数据保存在客户端设备上。
  
• 图像和视频处理：提供了用于JPEG 解码（我们的第一个外部 PR！）和视频处理的实用程序。由于在 React Native 中将数据从原生线程移动到 JavaScript 线程的序列化成本很高，因此实时视频处理特别难以支持。因此，我们在创建张量之前提供在 GPU 上进行图像调整大小的功能。这使开发人员能够减少需要从相机流传输到模型进行推断的数据量。我们甚至提供了一个 React 高阶组件，使这种集成对 React Native 开发人员来说感觉很自然。
  

一些示例

加载我们托管的模型之一与在浏览器中的工作方式完全相同。在这里，我们在与应用程序捆绑在一起的图像上运行预测。对于来自用户照片库的图像，也可以执行相同的操作。

import * as mobilenet from '@tensorflow-models/mobilenet';
import { fetch, decodeJpeg } from '@tensorflow/tfjs-react-native';

// Load mobilenet.
const model = await mobilenet.load();

// Get a reference to the bundled asset and convert it to a tensor
const image = require('./assets/images/catsmall.jpg');
const imageAssetPath = Image.resolveAssetSource(image);
const response = await fetch(imageAssetPath.uri, {}, { isBinary: true });
const imageData = await response.arrayBuffer();

const imageTensor = decodeJpeg(imageData);

const prediction = await model.classify(imageTensor);

// Use prediction in app.
setState({
  prediction,
});

除了处理本地存储的数据外，原生应用程序还可以将模型存储在本地，与应用程序资产一起。下面的代码片段展示了如何加载一个捆绑到最终应用程序构建中的自定义模型。

import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';
import { fetch, decodeJpeg, bundleResourceIO } from '@tensorflow/tfjs-react-native';

// Get reference to bundled model assets 
const modelJson = require('../assets/model/burger_not_burger.json');
const modelWeights = require('../assets/model/burger_not_burger_weights.bin');

// Use the bundleResorceIO IOHandler to load the model
const model = await tf.loadLayersModel(
  bundleResourceIO(modelJson, modelWeights));

// Load an image from the web
const uri = 'http://example.com/food.jpg';
const response = await fetch(uri, {}, { isBinary: true });
const imageData = await response.arrayBuffer();
const imageTensor = decodeJpeg(imageData);
  
const prediction = (await model.predict(imageTensor))[0];

// Use prediction in app
setState({
  prediction,
});

其他平台

JavaScript 在许多地方运行，并为许多框架提供支持。我们如何使 tensorflow.js 与各种平台和框架集成？我们添加了平台接口，以便将 TensorFlow.js 移植到其他平台。此接口仅包含 4 个函数，需要为底层平台定义这些函数。将它与我们现有的后端之一（JavaScript CPU、WebGL 以及最近的 WASM）结合起来，通常足以创建新的平台集成。我们希望此集成能够为不同社区如何使用他们选择的平台实现这一目标提供模板。

反馈

我们很高兴看到您使用此功能构建了哪些应用程序，并期待听到您的反馈、错误报告和代码贡献！我们希望看到这个平台适配器发展成为一个社区驱动的项目，因为我们认为每天都在这个平台上工作的人员最有可能塑造它的未来！