В этом руководстве вы установите и запустите пример приложения 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 .
Установите и запустите пример приложения
- Клонируйте или загрузите репозиторий
tfjs-examples
. Перейдите в каталог
react-native/pose-detection
:cd tfjs-examples/react-native/pose-detection
Установите зависимости:
yarn
Запустите пример приложения локально:
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 .
,В этом руководстве вы установите и запустите пример приложения 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 .
Установите и запустите пример приложения
- Клонируйте или загрузите репозиторий
tfjs-examples
. Перейдите в каталог
react-native/pose-detection
:cd tfjs-examples/react-native/pose-detection
Установите зависимости:
yarn
Запустите пример приложения локально:
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 .