Как интегрировать машинное обучение в приложения React Native ? Объяснение

Машинное обучение — это мощная технология, которая позволяет приложениям принимать разумные решения на основе данных. С React Native мы можем легко интегрировать машинное обучение в наши приложения, используя популярные библиотеки машинного обучения, такие как TensorFlow.js и ml5.js. В этой статье мы рассмотрим, как мы можем интегрировать машинное обучение в приложения React Native, на примерах.

Что такое машинное обучение?

Машинное обучение — это тип искусственного интеллекта (ИИ), который позволяет компьютерам учиться и принимать решения на основе данных. Он включает в себя создание алгоритмов, которые могут идентифицировать закономерности в данных и использовать их для прогнозирования или принятия решений. Машинное обучение используется в широком спектре приложений, включая распознавание изображений, распознавание речи, обработку естественного языка и рекомендательные системы.

Интеграция машинного обучения в приложения React Native

React Native предоставляет мощную платформу для создания мобильных приложений, которые могут использовать машинное обучение. Мы можем интегрировать машинное обучение в наши приложения React Native, используя популярные библиотеки машинного обучения, такие как TensorFlow.js и ml5.js.

TensorFlow.js

TensorFlow.js — это библиотека с открытым исходным кодом для машинного обучения на JavaScript. Это позволяет нам обучать и запускать модели машинного обучения прямо в браузере или на сервере с помощью Node.js. TensorFlow.js предоставляет высокоуровневый API для создания и обучения моделей машинного обучения, а также низкоуровневый API для настройки и оптимизации моделей.

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

import React, { useState } from 'react';
import { View, Text, Button, Image } from 'react-native';
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

const ImageClassifier = () => {
  const [predictions, setPredictions] = useState([]);

  const classifyImage = async () => {
    const image = Image.resolveAssetSource(require('./assets/cat.jpg'));
    const model = await mobilenet.load();
    const tensor = tf.browser.fromPixels(image).resizeNearestNeighbor([224, 224]).toFloat();
    const predictions = await model.classify(tensor);
    setPredictions(predictions);
  };

  return (
    <View>
      <Image source={require('./assets/cat.jpg')} style={{ width: 200, height: 200 }} />
      <Button title="Classify Image" onPress={classifyImage} />
      {predictions.map((prediction, index) => (
        <Text key={index}>{prediction.className}: {prediction.probability.toFixed(3)}</Text>
      ))}
    </View>
  );
};

export default ImageClassifier;

В этом примере мы используем пакеты @tensorflow/tfjs и @tensorflow-models/mobilenet для загрузки и запуска предварительно обученной модели классификации изображений MobileNet. Затем мы используем компонент Image из React Native для отображения изображения и компонент Button для запуска классификации. Когда кнопка нажата, мы загружаем изображение, изменяем его размер до ожидаемого входного размера модели и запускаем модель, чтобы получить прогнозы. Затем мы отображаем прогнозы в виде списка имен классов и вероятностей.

ml5.js

ml5.js — удобная и простая в использовании библиотека машинного обучения для JavaScript. Он предоставляет набор предварительно обученных моделей для таких задач, как классификация изображений, обнаружение объектов и перенос стиля, а также инструменты для обучения пользовательских моделей. ml5.js построен поверх TensorFlow.js, поэтому его можно использовать в приложениях React Native таким же образом.

Вот пример использования ml5.js для создания простого классификатора изображений в приложении React Native:

Ограничения машинного обучения в React Native

Хотя интеграция машинного обучения в приложения React Native возможна и эффективна, необходимо учитывать некоторые ограничения. Во-первых, модели машинного обучения могут быть ресурсоемкими и требовать большой вычислительной мощности и памяти, особенно для больших моделей или сложных задач. Это может повлиять на производительность приложения и привести к его замедлению или зависанию.

Во-вторых, модели машинного обучения обычно обучаются на больших наборах данных и могут не подходить для всех случаев использования. Например, предварительно обученная модель классификации изображений может быть не в состоянии точно классифицировать изображения редких или уникальных объектов или изображения с плохим освещением или композицией. В этих случаях может потребоваться индивидуальная модель, которая может занять много времени и может потребовать специальных знаний.

Модели машинного обучения могут не подходить для всех типов приложений или пользователей. У некоторых пользователей могут быть проблемы с конфиденциальностью в связи с тем, что их данные используются для машинного обучения, в то время как другие могут не найти функции машинного обучения полезными или соответствующими их потребностям. При интеграции машинного обучения в ваше приложение React Native важно учитывать потребности и предпочтения вашей целевой аудитории.

давайте рассмотрим еще один пример того, как интегрировать машинное обучение в приложения React Native с помощью TensorFlow.js. В этом примере мы будем использовать предварительно обученную модель TensorFlow.js для распознавания рукописных цифр.

Настройка среды

Для начала нам нужно настроить нашу среду и установить необходимые зависимости. Во-первых, нам нужно создать новый проект React Native с помощью команды react-native init. Затем нам нужно установить пакеты tensorflow и react-native-tensorflow с помощью npm:

npm install tensorflow react-native-tensorflow

После установки пакетов нам нужно связать нативные библиотеки, выполнив следующие команды:

react-native link react-native-tensorflow

Создание приложения

Теперь, когда наша среда настроена, мы можем приступить к созданию нашего приложения. Во-первых, нам нужно создать новый компонент с именем DigitRecognizer, который будет содержать логику нашего приложения. Мы будем использовать компонент Canvas из react-native-canvas для рисования цифр, которые мы хотим распознать.

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Canvas from 'react-native-canvas';
import { loadLayersModel } from '@tensorflow/tfjs';

export default class DigitRecognizer extends Component {
  state = {
    model: null,
    prediction: null,
  };

  async componentDidMount() {
    // Load the pre-trained TensorFlow.js model
    const model = await loadLayersModel('https://storage.googleapis.com/tfjs-models/tfjs/mnist_v1/model.json');
    this.setState({ model });
  }

  handleRecognizeDigit = async () => {
    // Get the canvas context and extract the pixel data
    const { drawing } = this.refs;
    const ctx = drawing.getContext('2d');
    const pixels = ctx.getImageData(0, 0, 28, 28).data;

    // Preprocess the pixel data
    const input = Array.from(pixels).map(x => (255 - x) / 255);

    // Run the model and get the predictions
    const output = await this.state.model.predict([input]).data();
    const prediction = output.indexOf(Math.max(...output));

    this.setState({ prediction });
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 24, marginBottom: 20 }}>Digit Recognizer</Text>
        <Canvas ref="drawing" style={{ width: 280, height: 280, borderWidth: 1, borderColor: '#000' }} />
        <Button title="Recognize Digit" onPress={this.handleRecognizeDigit} />
        {this.state.prediction !== null && <Text style={{ fontSize: 24 }}>Prediction: {this.state.prediction}</Text>}
      </View>
    );
  }
}

В этом компоненте мы сначала загружаем предварительно обученную модель TensorFlow.js с помощью функции loadLayersModel. Затем мы устанавливаем модель в состояние компонента.

Когда пользователь нажимает кнопку «Распознать цифру», мы получаем контекст холста и извлекаем данные пикселей. Затем мы предварительно обрабатываем данные пикселей, масштабируя значения пикселей в диапазоне от 0 до 1. Наконец, мы передаем предварительно обработанные данные пикселей в функцию predict модели и получаем прогнозы. Мы извлекаем цифру с наибольшей вероятностью и устанавливаем ее в состояние компонента.

Другой пример

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { RNCamera } from 'react-native-camera';
import { TensorCamera } from 'react-native-tensorflow';
import { loadGraphModel } from '@tensorflow/tfjs';

export default class ImageClassifier extends Component {
  state = {
    model: null,
    prediction: null,
  };

  async componentDidMount() {
    // Load the pre-trained TensorFlow.js model
    const model = await loadGraphModel('https://tfhub.dev/google/tfjs-model/imagenet/mobilenet_v2_100_224/classification/4/default/1', { fromTFHub: true });
    this.setState({ model });
  }

  handleCameraStream = async images => {
    // Get the image tensor from the camera stream
    const { image } = images;
    const tensor = new TensorCamera(image, 3).getTensor();

    // Run the model and get the predictions
    const output = await this.state.model.predict(tensor).data();
    const prediction = output.indexOf(Math.max(...output));

    this.setState({ prediction });
  };

  render() {
    return (
      <View style={styles.container}>
        <RNCamera style={styles.preview} type={RNCamera.Constants.Type.back} onGoogleVisionBarcodesDetected={null} onTextRecognized={null}>
          <TensorCamera style={styles.preview} type={RNCamera.Constants.Type.back} zoom={0} cameraTextureHeight={1080} cameraTextureWidth={1920} resizeHeight={224} resizeWidth={224} resizeDepth={3} onReady={this.handleCameraStream} />
        </RNCamera>
        {this.state.prediction !== null && <Text style={styles.predictionText}>Prediction: {this.state.prediction}</Text>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#000',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  predictionText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    position: 'absolute',
    bottom: 20,
    left: 20,
  },
});

В этом компоненте мы сначала загружаем предварительно обученную модель TensorFlow.js, используя `loadGraph

Параметр Modelfunction from@tensorflow/tfjs. We use the fromTFHub, чтобы указать, что модель размещена в TensorFlow Hub.

Затем мы определяем функцию handleCameraStream, которая будет вызываться каждый раз, когда камера захватывает новое изображение. Внутри этой функции мы используем компонент TensorCamera для предварительной обработки изображения и преобразования его в тензор, который можно передать в модель TensorFlow.js. Затем мы используем функцию predict для запуска модели и получения прогнозов.

Наконец, мы обновляем состояние значением прогноза и отображаем его на экране с помощью компонента Text.

Тестирование приложения

Чтобы протестировать приложение, мы можем запустить его на устройстве Android или iOS с помощью команд react-native run-android или react-native run-ios. Когда приложение загрузится, камера запустится автоматически, и модель начнет классифицировать изображения в режиме реального времени.

Мы можем протестировать модель, направив камеру на разные объекты и проверив, правильно ли приложение их идентифицирует. Например, если мы направляем камеру на кошку, приложение должно предсказать метку класса для «кошки» с высокой степенью достоверности.

Заключение

В этой статье мы узнали, как интегрировать машинное обучение в приложения React Native с помощью TensorFlow.js. Мы использовали предварительно обученную модель для классификации изображений в режиме реального времени с помощью камеры устройства. Этот пример демонстрирует возможности React Native для создания сложных кроссплатформенных приложений, включающих возможности машинного обучения. В связи с растущим спросом на мобильные приложения с поддержкой ИИ разработчикам становится важно иметь навыки и знания для интеграции машинного обучения в свои приложения, и React Native предоставляет для этого отличную платформу.

Спасибо, что прочитали эту статью.

Пожалуйста, поставьте лайк и подпишитесь на меня, чтобы получать больше статей.

Гопеш Джангид