在 React Native 应用中使用 TensorFlow.js

在本教程中，您将安装并运行一个 React Native 示例应用程序，该应用程序使用 TensorFlow 姿势检测模型 (MoveNet.SinglePose.Lightning) 进行实时姿势检测。该应用程序基于 TensorFlow.js 针对 React Native 的平台适配器 构建，支持使用前后摄像头进行纵向和横向模式。

先决条件

要完成本教程，您需要在开发环境中安装以下内容

TensorFlow.js React Native 平台适配器依赖于 expo-gl 和 expo-gl-cpp，因此您必须使用 Expo 支持的 React Native 版本。

安装并运行示例应用程序

  1. 克隆或下载 tfjs-examples 存储库。

  2. 更改到 react-native/pose-detection 目录

    cd tfjs-examples/react-native/pose-detection

  3. 安装依赖项

    yarn

  4. 在本地运行示例应用程序

    yarn start

运行应用程序时，终端会显示一个二维码。

Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀ ▀   ███ ▄▄▄▄▄ █
█ █   █ █   █▀ █ ▀█ █   █ █
█ █▄▄▄█ █▄█▀ ▄▀█▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ █ █▄▀ █▄▄▄▄▄▄▄█
█▄  ▄▀█▄█ █ ▄ ▀▀▄▄▄██▄ ▄▀▄█
██▄▀▀█▀▄█▀  ▄▄▀ █▀█ ▀██▀███
█▄▄▀ ▀▀▄▄▄ ▄▀ ▄█ ▄█ ▄ █ █▀█
█▀▄▄ ▄▄▄▀ ▄  █▄██ ▀▀█▀▀█ ▀█
███▄▄██▄█▀▄██▄  ▄ ▄▄▄ ▀▄█▀█
█ ▄▄▄▄▄ ██  ▀██▀█ █▄█ █▄▄ █
█ █   █ █▀█ ███▀▀▄▄   █▀ ▀█
█ █▄▄▄█ █ ▀▀▀▀▀▄▀▄▀▄█▄▄ ▄██
█▄▄▄▄▄▄▄█▄██▄▄██▄██████▄▄▄█

› Metro waiting on exp://192.168.0.6:19000

使用安装了 Expo Go 的手机或其他测试设备扫描二维码。示例应用程序应在 Expo Go 中打开。

以下屏幕截图显示了应用程序检测和渲染用户身体的关键点。

Portrait Landscape

要了解 TensorFlow.js 库如何在示例中使用，请查看 App.tsx。该文件中的注释解释了如何配置张量大小、加载模型、运行姿势检测等等。

要详细了解使用 TensorFlow.js 进行姿势检测，请参阅 这篇博文。

有关 Reactive Native 平台适配器的更多信息

TensorFlow.js 针对 React Native 的平台适配器提供 TensorFlow.js 的 GPU 加速执行，并支持 TensorFlow.js 的所有主要使用模式

  • 支持模型推理和训练
  • 通过 expo-gl 使用 WebGL 的 GPU 支持
  • 支持从 Web 加载预训练模型
  • IOHandler 支持从异步存储加载模型以及编译到应用程序包中的模型

有关完整安装说明，请参阅 React Native 平台适配器的 自述文件。

排查 TensorFlow.js 针对 React Native 的问题

如果您的应用程序在启动时崩溃，您可能需要更改设置。要详细了解如何为 React Native 设置平台适配器，请参阅 自述文件。