Sådan bruges Style Transfer API i React Native med Fritz

Fritz er en platform, der er beregnet til at gøre det let for udviklere at bruge deres mobile apps med maskinlæringsfunktioner. I øjeblikket har den en SDK til både Android og iOS. SDK indeholder klar-til-brug API'er til følgende funktioner:

  1. Objektdetektion
  2. Billedmærkning
  3. Styleoverførsel
  4. Billedsegmentering
  5. Pose estimering

I dag undersøger vi, hvordan du bruger Style Transfer API i React Native.

Jeg var kun i stand til at udvikle og teste i Android (ingen Mac'er her!) Og fik en fungerende applikation.

Style Transfer API typografier billeder eller video i henhold til ægte kunstværker. Der er 11 foruddannede kunststilarter, herunder Van Gogh's Starry Night og Munch's Scream, blandt andre.

Den app, vi udvikler, giver brugeren mulighed for at tage et billede og konvertere det til et stylet billede. Det vil også give brugeren mulighed for at vælge den grafikstil, de ønsker at bruge på billedet.

Appen vil indeholde en startside, hvor brugeren kan vælge kunststilen. Det vil også omfatte en separat kameravisning, hvor brugeren optager billedet.

Bemærk: Følgende tutorial er kun til Android-platformen.

Forudsætninger

  1. React Native CLI: kør npm i -g react-native-cli for at installere CLI globalt

Da der ikke er noget standard React Native-modul til Fritz, er vi nødt til at skrive vores eget. At skrive et indbygget modul betyder at skrive ægte native code til brug på en eller begge platforme.

Trin 1 - Oprettelse af RN-appen og installer moduler

For at oprette appen skal du køre følgende kommando i terminalen:

react-native init 

Gå ind i roden af ​​mappen for at begynde konfigurationen.

Til navigation bruger vi React Navigation og React Native Camera til kameravisningen.

For at installere begge afhængigheder skal du køre følgende kommando i terminalen:

npm i - gem reaktion-navigation reaktionskamera

Følg instruktionerne her for at konfigurere React Navigation til appen. Vi bliver også nødt til at installere reaktor-native-gestus-handler, da det er en afhængighed af React Navigation.

Følg instruktionerne her for at konfigurere React Native Camera til appen. Vi kan stoppe i trin 6, da vi i dette eksempel ikke bruger tekst-, ansigt- eller stregkodegenkendelse.

Trin 2 - Inkluderer Fritz SDK i appen

Først skal vi oprette en Fritz-konto og et nyt projekt.

Fra projektoversigten skal du klikke på Tilføj til Android for at inkludere SDK til Android-platformen. Vi bliver nødt til at medtage et appnavn og applikations-id. Applikations-id'et kan findes i android / app / build.gradle, inde i taget defaultConfig.

Når vi registrerer appen, er vi nødt til at tilføje følgende linjer i android / build.gradle:

alle projekter {
    .....
    depoter {
        .....
        maven {url "https://raw.github.com/fritzlabs/fritz-repository/master"} // tilføj denne linje
    }
}

Indsæt derefter afhængigheden i android / app / build.gradle:

afhængigheder {
    implementering 'ai.fritz: core: 3.0.2'
}

Vi bliver nødt til at opdatere filen AndroidManifest.xml for at give app'en tilladelse til at bruge internettet og registrere Fritz-tjenesten:


    .....
    

    
        .....
        
    

Vi skal derefter inkludere følgende metode i MainActivity.java:

import ai.fritz.core.Fritz;
import android.os.Bundle; // importer også disse to
public class MainActivity udvider ReactActivity {
    .....
    @Override
    beskyttet tomrum onCreate (Bundle gemtInstanceState) {
        // Initialiser Fritz
        Fritz.configure (dette, "");
    }
}

Trin 3 - Opret det indbyggede modul

Da SDK kun understøtter iOS og Android, bliver vi nødt til at oprette det oprindelige modul. For at få en bedre forståelse af dette henvises til dokumenterne her:

For at oprette et Android Native-modul skal vi oprette to nye filer. De vil være inden for rodpakken i Android-kildemappen.

  1. FritzStyleModule: Denne indeholder koden, der returnerer det stylede billede
  2. FritzStylePackage: Dette registrerer modulet, så det kan bruges af JavaScript-siden af ​​appen.

FritzStyleModule

React-metoden, der bruges, har en succes og fejlopkald. Den valgte kunststil og en base64 i det originale billede sendes til metoden. Fejlopkaldet kaldes op, når en undtagelse kastes og returnerer fejlen. Succesgenopkaldet returnerer en base64-kodet streng for det konverterede billede. På et højt niveau gør ovenstående kode følgende:

  1. Initialiserer stilprædiktoren med brugerens valg af kunst.
  2. Konverterer det originale base64-billede til en bitmap.
  3. Opretter en FritzVisionImage, som er input fra stilprædiktoren.
  4. Konverterer FritzVisionImage til et stylet FritzVisionStyleResult, som er det konverterede billede.
  5. Henter en bitmap fra FritzVisionStyleResult.
  6. Konverterer Bitmap til en base64, der skal sendes tilbage til JavaScript-siden af ​​appen.

FritzStylePackage

Denne klasse bruges til at registrere pakken, så den kan kaldes i JavaScript-siden af ​​appen.

Denne klasse er også initialiseret i getPackages () i MainApplication.java:

@Override
beskyttet liste  getPakker () {
  return Arrays.  asList (
    ny MainReactPackage (),
    ......,
    nye FritzStylePackage () // Tilføj denne linje og importer den på toppen
  );
}

Nu videre til JavaScript-siden af ​​applikationen.

Trin 4 - Oprettelse af brugergrænseflade

For at gøre dette opretter / opdaterer vi de følgende sider:

  1. Home.js - Vis vælgeren af ​​kunststilarter og det endelige resultat.
  2. CameraContainer.js - Vis kameravisningen for at optage et billede.
  3. FritzModule.js - Eksporter det ovenfor oprettede indfødte modul til JavaScript-siden.
  4. App.js - Root af appen, der inkluderer navigationsstakken.

Home.js

Denne side indeholder:

  1. Tekst for at få vist appbeskrivelsen.
  2. Vælger for at give brugeren mulighed for at vælge kunststilen på det konverterede billede.
  3. Knap for at omdirigere brugeren til kamerasiden. Det vil videregive den valgte kunststil til CameraContainer.
  4. Hvis navigationsprogrammet indeholder det originale og konverterede billede, vises det.

Siden ser i øjeblikket sådan ud;

Hjemmeside, før du tager et billede

CameraContainer.js

CameraContainer-siden viser en fuld side CameraView. Det inkluderer en knap til at tage billedet nederst på siden. Når du klikker på den, vises en spinner for at formidle til brugeren, at en handling finder sted.

Billedet optages først ved hjælp af metoden til reaktionskamera-kameraet takePictureAsync (). Det originale billede gemmes derefter i status på siden. SetState-metoden er asynkron og har således en succes-tilbagekald, der kører efter, at staten er indstillet.

GetNewImage-metoden fra FritzModule køres inden for denne succes-tilbagekald. Det originale billede og filteret (kunststilen) valgt fra hjemmesiden overføres til metoden. Ved fejlopkald vises en advarsel til brugeren for at formidle, at der er opstået en fejl. Ved tilbagekald af succes gemmes det nye stilbillede i tilstanden. På denne anden setState-metodes succes-tilbagekald omdirigeres brugeren til startsiden med både de originale og stylede billeder.

CameraContainer på emulator

FritzModule.js

import {NativeModules} fra 'react-native';
eksport standard NativeModules.FritzStyle;

Denne side viser Native modulet, FritzStyle. Dette gør det muligt for JavaScript-siden at foretage opkald til metoden getNewImage.

App.js

import React, {Component} fra 'react';
import hjem fra './src/Home';
import CameraContainer fra './src/CameraContainer';
import {createStackNavigator, createAppContainer} fra 'react-navigation';
const AppNavigator = createStackNavigator ({
  Hjem: {skærm: Hjem},
  Kamera: {skærm: CameraContainer}
});
const AppContainer = createAppContainer (AppNavigator);
eksport standardklasse App udvider komponent {
  render () {
    retur ();
  }
}

Først opretter vi Stack-navigatoren med startsiden og kameravisningen. Tasten 'Hjem' bruges, når du navigerer til startsiden, og tasten 'Kamera', når du navigerer til CameraContainer.

AppContainer bliver rodkomponenten til appen. Det er også den komponent, der administrerer appens tilstand.

Nu for at se hele appen i funktion;

At sammenfatte, vi har;

  1. Oprettet en React Native app,
  2. Inkluderede Fritz SDK i det,
  3. Oprettet et indbygget modul, der gør brug af Style Transfer API, og
  4. Designet en brugergrænseflade til at vise det stylede billede.

Find koderepoen her.

For oprindelige iOS- eller Android-implementeringer af Fritz's Style Transfer API skal du kontrollere følgende tutorials: