Привет! Меня зовут Никита Грибков, я Flutter-разработчик в AGIMA. В этой статье расскажу про фреймворк TensorFlow Lite, который позволяет интегрировать в мобильное приложение модели машинного обучения. Это полезная штука, если нужно реализовать фичи, связанные с распознаванием речи или с классификацией изображений. Покажу, как обучать модели и как затем с ними работать.

Технология позволяет создавать персонализированные и интеллектуальные решения для пользователей, поэтому пользуется высоким спросом. Если наша цель — сделать приложение более удобным и инклюзивным, то, скорее всего, придется использовать ML.

Вот несколько примеров задач, для которых технология 100% подходит:

классификация изображений: чтобы приложение могло распознавать объекты на фотографиях или видео (например, Google Lens);
обработка естественного языка (NLP): в приложениях с голосовыми ассистентами или чат-ботами ML обрабатывает речь и тексты (например, Siri или Google Assistant);
персонализация: алгоритмы ML анализируют поведение пользователей и предлагают персонализированный контент или рекомендации;
распознавание голоса: используется в приложениях для конвертации речи в текст и команд.

Существует несколько способов, как интегрировать модели машинного обучения в приложение. Можно воспользоваться ML Kit от Firebase или библиотеки на Dart. Но лично я пробовал работать с TensorFlow Lite (TFLite). Этот фреймворк можно считать самым распространенным решением в данном случае.

Его главное (но не единственное) преимущество — что он может работать в офлайне, когда устройство не подключено к интернету. Также мне нравится, что TFLite оптимизирован для работы на устройствах с ограниченными ресурсами, это удобно. Разберем, как фреймворк работает.

Подготовка модели для использования с TFLite

Прежде чем интегрировать TFLite во Flutter-приложение, необходимо подготовить модель. Это предполагает её обучение в TensorFlow и конвертацию в формат .tflite.

Шаг 1. Создание и обучение модели в TensorFlow

Для работы с машинным обучением вы можете обучить модель с помощью TensorFlow. Вот простой пример создания и обучения модели на Python:

import tensorflow as tf
from tensorflow.keras import layers

# Создание простой модели для классификации изображений
model = tf.keras.Sequential([
    layers.Flatten(input_shape=(28, 28)),
    layers.Dense(128, activation='relu'),
    layers.Dense(10, activation='softmax')
])

Компиляция модели:

model.compile(optimizer='adam', loss='sparse_categorical_crossentropy', metrics=['accuracy'])

Обучение модели на данных MNIST:

model.fit(train_images, train_labels, epochs=5)

Сохранение модели:

model.save("model.h5")

Сеть состоит из одного слоя для преобразования 28x28 пикселей в одномерный вектор, скрытого слоя с 128 нейронами и выходного слоя с 10 нейронами для 10 классов.

model = tf.keras.Sequential([
    layers.Flatten(input_shape=(28, 28)),
    layers.Dense(128, activation='relu'),
    layers.Dense(10, activation='softmax')
])

Модель компилируется с использованием оптимизатора Adam и функции потерь Sparse Categorical Crossentropy.

model.compile(optimizer='adam', loss='sparse_categorical_crossentropy', metrics=['accuracy'])

Затем обучается на данных MNIST в течение 5 эпох и сохраняется в файл "model.h5".

model.fit(train_images, train_labels, epochs=5)

Шаг 2: Конвертация модели в формат TFLite

После обучения модели ее нужно преобразовать в формат .tflite с помощью TFLite-конвертера.

Пример кода для конвертации модели:

# Загрузка модели
model = tf.keras.models.load_model('model.h5')

# Конвертация модели в формат TFLite
converter = tf.lite.TFLiteConverter.from_keras_model(model)
tflite_model = converter.convert()

# Сохранение модели в формате .tflite
with open('model.tflite', 'wb') as f:
    f.write(tflite_model)

Теперь у вас есть модель в формате .tflite, которую можно интегрировать в приложение на Flutter.

Интеграция TFLite в Flutter-приложение

Для работы с TFLite в Flutter нужно использовать плагин tflite_flutter. Этот репозиторий — управляемый TensorFlow форк проекта — управляемый TensorFlow форк проекта [tflite_flutter_plugin]

Шаг 1. Установка необходимых зависимостей

Откройте файл pubspec.yaml вашего Flutterпроекта и добавьте зависимости:

dependencies:
  flutter:
    sdk: flutter
  tflite_flutter: ^0.11.0
  tflite_flutter_helper_plus: ^0.0.2

Шаг 2. Подготовка модели

Скопируйте файл вашей модели model.tflite в папку проекта assets. Затем в файле pubspec.yaml укажите путь к модели в разделе assets:

flutter:
  assets:
    - assets/model.tflite
    - assets/labels.txt # если у вас есть файл с метками

Шаг 3. Загрузка и использование модели в коде Flutter

Теперь создадим код для загрузки модели и выполнения предсказаний на ее основе на стороне Flutter.

Импорт пакетов:

import 'package:tflite_flutter/tflite_flutter.dart';
import 'package:tflite_flutter_helper_plus/tflite_flutter_helper_plus.dart';

Загрузка модели:

late Interpreter interpreter;
Future<void> loadModel() async {
  try {
    // Загружаем модель из assets
    interpreter = await Interpreter.fromAsset('model.tflite');
    print('Модель загружена успешно');
  } catch (e) {
    print('Ошибка загрузки модели: $e');
  }
}

Этот код преобразует изображение в массив Float32List. Он берет каждый пиксель изображения, извлекает значения красного, зеленого и синего каналов, нормализует их с помощью заданных mean и std, а затем заполняет массив.

Float32List imageToByteListFloat32(
      img.Image image, int inputSize, double mean, double std) {
    var convertedBytes = Float32List(1 * inputSize * inputSize * 3);
    var buffer = Float32List.view(convertedBytes.buffer);
    int pixelIndex = 0;
    for (var i = 0; i < inputSize; i++) {
      for (var j = 0; j < inputSize; j++) {
        var pixel = image.getPixel(j, i);
        buffer[pixelIndex++] = ((img.getRed(pixel) - mean) / std);
        buffer[pixelIndex++] = ((img.getGreen(pixel) - mean) / std);
        buffer[pixelIndex++] = ((img.getBlue(pixel) - mean) / std);
      }
    }
    return convertedBytes;
  }

Выполнение предсказаний

Для выполнения предсказаний нужно преобразовать входные данные в подходящий формат, например, изображение в тензор (массив данных).

 Future<void> classifyImage(File image) async {
    // Преобразуем изображение в тензор
    final img.Image imageInput = img.decodeImage(image.readAsBytesSync())!;
    var inputImage = img.copyResize(imageInput, width: 28, height: 28);
    var input = imageToByteListFloat32(inputImage, 28, 127.5, 127.5);

    // Подготовка выходного тензора
    var output = List.filled(10, 0).reshape([1, 10]);

    // Выполнение предсказания
    _interpreter.run(input, output);

    setState(() {
      _result = 'Предсказание: ${output.toString()}';
    });
  }

Flutter с использованием TFLite

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:tflite_flutter/tflite_flutter.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:image/image.dart' as img;

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Interpreter _interpreter;
  File? _image;
  final picker = ImagePicker();
  String _result = 'Нет предсказаний';

  @override
  void initState() {
    super.initState();
    loadModel();
  }

  Future<void> loadModel() async {
    try {
      _interpreter = await Interpreter.fromAsset('model.tflite');
      print('Модель загружена');
    } catch (e) {
      print('Ошибка загрузки модели: $e');
    }
  }

  Future<void> pickImage() async {
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);

    setState(() {
      _image = File(pickedFile!.path);
    });

    if (_image != null) {
      classifyImage(_image!);
    }
  }

  Future<void> classifyImage(File image) async {
    // Преобразуем изображение в тензор
    final img.Image imageInput = img.decodeImage(image.readAsBytesSync())!;
    var inputImage = img.copyResize(imageInput, width: 28, height: 28);
    var input = imageToByteListFloat32(inputImage, 28, 127.5, 127.5);

    // Подготовка выходного тензора
    var output = List.filled(10, 0).reshape([1, 10]);

    // Выполнение предсказания
    _interpreter.run(input, output);

    setState(() {
      _result = 'Предсказание: ${output.toString()}';
    });
  }

  Float32List imageToByteListFloat32(
      img.Image image, int inputSize, double mean, double std) {
    var convertedBytes = Float32List(1 * inputSize * inputSize * 3);
    var buffer = Float32List.view(convertedBytes.buffer);
    int pixelIndex = 0;
    for (var i = 0; i < inputSize; i++) {
      for (var j = 0; j < inputSize; j++) {
        var pixel = image.getPixel(j, i);
        buffer[pixelIndex++] = ((img.getRed(pixel) - mean) / std);
        buffer[pixelIndex++] = ((img.getGreen(pixel) - mean) / std);
        buffer[pixelIndex++] = ((img.getBlue(pixel) - mean) / std);
      }
    }
    return convertedBytes;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TFLite Classifier')),
      body: Column(
        children: [
          _image == null ? Text('Выберите изображение') : Image.file(_image!),
          ElevatedButton(
            onPressed: pickImage,
            child: Text('Загрузить изображение'),
          ),
          Text(_result),
        ],
      ),
    );
  }
}

Оптимизация модели для мобильных устройств

Чтобы повысить производительность на мобильных устройствах, можно использовать такие подходы:

Квантизация модели. Она уменьшает размер модели и ускоряет работу за счет уменьшения точности числовых представлений.
Параллельное выполнение. Использование многоядерных процессоров для ускорения предсказаний.

Пример кода для квантизации модели:

converter = tf.lite.TFLiteConverter.from_keras_model(model)
converter.optimizations = [tf.lite.Optimize.DEFAULT]
tflite_model = converter.convert()

with open('quantized_model.tflite', 'wb') as f:
    f.write(tflite_model)

Что в итоге

В итоге мы получаем приложение с уже работающими моделями ML. Самый долгий этап связан с обучением моделей, всё остальное — вопрос техники. Думаю, примеры выше помогут провести интеграцию быстро.

Если у вас остались вопросы — задавайте в комментариях, я отвечу. А вообще подписывайтесь на канал нашего коллеги Саши Ворожищева — он много пишет про Flutter и про мобильную разработку в целом.

Что еще почитать

Что такое Home-виджеты и как их подружить с вашим приложением на Flutter
Rive-анимация для Flutter-приложений: почему мы любим ее больше Lottie, когда ее применять и какие фишки использовать
SQL vs NoSQL: как выбрать архитектуру БД для мобильного приложения, чтобы потом не пришлось ничего переписывать

Интеграция TFLite во Flutter: внедряем модели машинного обучения в мобильное приложение