Используйте TensorFlow.js в приложении React Native

В этом руководстве вы установите и запустите пример приложения React Native, которое использует модель обнаружения позы TensorFlow ( MoveNet.SinglePose.Lightning ) для обнаружения позы в реальном времени. Созданное на основе адаптера платформы TensorFlow.js для React Native , приложение поддерживает как портретный, так и альбомный режимы с передней и задней камерами.

Предварительные условия

Для работы с этим руководством в вашей среде разработки необходимо установить следующее:

• Node.js ( скачать )
• Пряжа ( установить )
• (На телефоне или другом тестовом устройстве) Expo Go ( установить )

Адаптер платформы TensorFlow.js React Native зависит от expo-gl и expo-gl-cpp , поэтому вы должны использовать версию React Native, поддерживаемую Expo .

Установите и запустите пример приложения

1. Клонируйте или загрузите репозиторий tfjs-examples .

2. Перейдите в каталог react-native/pose-detection :

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

3. Установите зависимости:

   yarn
   

4. Запустите пример приложения локально:

   yarn start
   

Когда вы запускаете приложение, терминал отображает QR-код.

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

› Metro waiting on exp://192.168.0.6:19000

Отсканируйте QR-код с помощью телефона или другого тестового устройства, на котором установлено Expo Go. Пример приложения должен открыться в Expo Go.

На скриншотах ниже показано, как приложение обнаруживает и отображает ключевые точки тела пользователя.

Чтобы понять, как в примере используются библиотеки TensorFlow.js, посмотрите App.tsx . Комментарии в этом файле объясняют, как настроить размер тензора, загрузить модель, запустить обнаружение позы и многое другое.

Чтобы узнать больше об обнаружении позы с помощью TensorFlow.js, прочтите эту публикацию в блоге .

Подробнее об адаптере платформы Reactive Native

Адаптер платформы TensorFlow.js для React Native обеспечивает выполнение TensorFlow.js с графическим ускорением и поддерживает все основные режимы использования TensorFlow.js:

• Поддержка как вывода модели, так и обучения
• Поддержка графического процессора с WebGL через expo-gl
• Поддержка загрузки предварительно обученных моделей из Интернета.
• IOHandler для поддержки загрузки моделей из асинхронного хранилища и моделей, скомпилированных в пакет приложения.

Полные инструкции по установке см. в README адаптера платформы React Native.

Устранение неполадок TensorFlow.js для React Native

Если ваше приложение аварийно завершает работу при запуске, возможно, вам придется изменить настройки. Чтобы узнать больше о настройке адаптера платформы для React Native, смотрите README .