Użyj TensorFlow.js w aplikacji React Native

W tym samouczku zainstalujesz i uruchomisz przykładową aplikację React Native, która korzysta z modelu wykrywania pozy TensorFlow ( MoveNet.SinglePose.Lightning ) do wykrywania pozy w czasie rzeczywistym. Zbudowana na adapterze platformy TensorFlow.js dla React Native , aplikacja obsługuje zarówno tryb portretowy, jak i poziomy, z przednim i tylnym aparatem.

Warunki wstępne

Aby ukończyć ten samouczek, w środowisku programistycznym musisz zainstalować:

• Node.js ( pobierz )
• Przędza ( zainstaluj )
• (Na telefonie lub innym urządzeniu testowym) Expo Go ( zainstaluj )

Adapter platformy TensorFlow.js React Native zależy od expo-gl i expo-gl-cpp , dlatego musisz użyć wersji React Native obsługiwanej przez Expo .

Zainstaluj i uruchom przykładową aplikację

1. Sklonuj lub pobierz repozytorium tfjs-examples .

2. Przejdź do katalogu react-native/pose-detection :

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

3. Zainstaluj zależności:

   yarn
   

4. Uruchom przykładową aplikację lokalnie:

   yarn start
   

Po uruchomieniu aplikacji terminal wyświetla kod QR.

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

› Metro waiting on exp://192.168.0.6:19000

Zeskanuj kod QR telefonem lub innym urządzeniem testowym, na którym zainstalowano Expo Go. Przykładowa aplikacja powinna otworzyć się w Expo Go.

Poniższe zrzuty ekranu przedstawiają aplikację wykrywającą i renderującą kluczowe punkty ciała użytkownika.

Aby zrozumieć, w jaki sposób biblioteki TensorFlow.js są używane w przykładzie, spójrz na plik App.tsx . Komentarze w tym pliku wyjaśniają, jak skonfigurować rozmiar tensora, załadować model, uruchomić wykrywanie pozycji i nie tylko.

Aby dowiedzieć się więcej o wykrywaniu ułożenia za pomocą TensorFlow.js, zobacz ten wpis na blogu .

Więcej o adapterze platformy Reactive Native

Adapter platformy TensorFlow.js dla React Native zapewnia przyspieszone przez GPU wykonywanie TensorFlow.js i obsługuje wszystkie główne tryby użycia TensorFlow.js:

• Obsługa zarówno wnioskowania o modelu, jak i uczenia
• Obsługa GPU z WebGL poprzez expo-gl
• Obsługa ładowania wstępnie wytrenowanych modeli z Internetu
• IOHandler s do obsługi ładowania modeli z magazynu asynchronicznego i modeli, które są kompilowane w pakiecie aplikacji

Pełne instrukcje dotyczące instalacji można znaleźć w pliku README adaptera platformy React Native.

Rozwiązywanie problemów z TensorFlow.js dla React Native

Jeśli aplikacja ulega awarii podczas uruchamiania, może być konieczna zmiana konfiguracji. Aby dowiedzieć się więcej na temat konfigurowania adaptera platformy dla React Native, zobacz plik README .