Все мы видели в Facebook или Instagram функции тегов, когда приложение распознает лица и предлагает нам отметить их на наших фотографиях. Этот процесс работает настолько гладко, что обеспечивает приятный пользовательский опыт.
Иногда эти приложения размывают некоторые лица. Это может быть сделано по соображениям конфиденциальности или иногда пользователи загружают откровенный контент, который не является точным для массового пользователя.
Если мы проанализируем эти два рабочих процесса, то сначала нам нужно обнаружить лица на изображении. После обнаружения мы можем применить другие виды манипуляций с фотографиями, например, размытие, применение некоторых фильтров или предложить отметить кого-то.
Если вы хотите реализовать это обнаружение лиц в своем приложении flutter и не являетесь экспертом в области AI/ML, то, конечно, это будет очень сложно для вас. Вам придется изучить OpenCV или другие тонны кусочков и деталей, чтобы получить функцию, которая будет приятна пользователю.
В парадигме программирования говорят «никогда не изобретайте колесо». Поскольку время дорого, а как программист, вы должны действовать быстро, вы можете использовать некоторые сервисы, которые сделают всю тяжелую работу за вас. Вы можете распознавать лица, размывать лица, извлекать данные из изображений или из идентификационной карты и т.д. Самым новым и популярным сервисом для вышеупомянутой функции является PixLab.
Что такое Pixlab
Теперь давайте рассмотрим, что такое Pixlab. Pixlab — это платформа «программное обеспечение как услуга» (SaaS), известная тем, что предоставляет API машинного зрения и обработки мультимедиа. Она имеет 130 конечных точек API, и число таких точек постоянно растет.
Вы можете без сомнений использовать их API для своего бизнеса, поскольку они предоставляют гарантию безотказной работы на 99,9% и круглосуточную поддержку.
У них есть 4 уровня цен, и вы можете узнать о них больше здесь.
Что мы создаем
В этой статье мы создаем приложение-детектор изображений с помощью flutter. Приложение будет определять человеческие лица на изображении. После этого обнаруженные лица будут автоматически размываться и отображаться в приложении.
Окончательная версия приложения будет выглядеть следующим образом.
Поддерживаемые устройства
Поскольку мы используем flutter и не используем никаких зависимостей от платформы, вы можете запустить это приложение на всех платформах, которые поддерживает flutter. Я лично тестировал это приложение на android, windows и Linux, и оно работает без проблем.
Если у вас возникнет какая-либо ошибка во время выполнения этого руководства, пожалуйста, сообщите мне об этом в комментариях.
Структура приложения
Сначала создайте новый проект flutter. Установите flutter, если он еще не установлен в вашей системе. Затем перейдите в выбранную вами папку и запустите команду
flutter create pixlab_demo
Новый проект flutter будет создан в папке pixlab_demo. Откройте эту папку в текстовом редакторе. Я использую для этой цели Visual Studio Code.
Затем внутри файла lib/main.dart удалите весь демонстрационный код и напишите
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: FaceBlurPage(),
),
);
}
Теперь создайте виджет с состоянием FaceBlurPage().
class FaceBlurPage extends StatefulWidget {
const FaceBlurPage({super.key});
@override
State<FaceBlurPage> createState() => _FaceBlurPageState();
}
class _FaceBlurPageState extends State<FaceBlurPage> {
@override
Widget build(BuildContext context) {
}
}
Установка зависимостей
В этом приложении мы будем делать HTTP-запросы к конечным точкам API Pixlab. Поэтому нам нужен HTTP-клиент. В flutter dio — это очень мощный и простой в использовании HTTP-клиент. Чтобы установить dio в свой проект, выполните команду .
flutter pub add dio
После успешной установки dio в ваш проект, вам необходимо иметь API-ключ для взаимодействия с конечными точками Pixlab. Для этого подпишитесь на тарифный план pixlab и получите API-ключ.
Ваш API-ключ может выглядеть следующим образом 74fg2erg46a1fe159er8rd8a4545a4.
HTTP-запросы во flutter
Сделать HTTP-запрос во flutter не очень сложно. Поскольку мы установили пакет dio, это очень облегчает нам жизнь.
Если вы новичок и не знаете многого о HTTP-запросах, это очень полезное руководство, которое поможет вам понять основы.
Чтобы сделать GET-запрос во flutter, сначала создайте экземпляр dio и напишите
import 'package:dio/dio.dart'
// Instentiating Dio
var dio = Dio();
// Making a get request in dio
dio.get("https://yourdomain.com")
Для выполнения POST-запроса, аналогично, мы должны создать экземпляр dio и дополнительно предоставить тело.
import 'package:dio/dio.dart'
// Instentiating dio
var dio = Dio()
// Making a post request
dio.post("https://yourdomain.com",data:{})
Внутри параметра data вы можете поместить тело запроса.
В этой статье мы будем использовать только эти два типа HTTP-запросов, поэтому это краткое введение может помочь вам глубже погрузиться в эту статью.
Определение лиц по изображению в flutter
Сначала создайте переменную imagelink внутри виджета stateful. В ней вы указываете URL вашего изображения. Я использую это изображение для данного урока. Вы можете использовать любые изображения по своему усмотрению.
String imagelink = "https://pixlab.io/images/m3.jpg";
Теперь создайте функцию detectFaces(). Это будет функция async и вернет Future из Response. Внутри этой функции мы сделаем GET-запрос к конечной точке API pixlab facedetect.
В запросе мы должны указать 2 параметра запроса. Первый — это URL изображения, а второй — ключ API. Для URL изображения мы будем использовать переменную imagelink, которую мы определили ранее.
Полная функция будет выглядеть следующим образом.
import 'package:dio/dio.dart';
var dio = Dio();
// Detect faces using pixlab API
Future<Response> detectFaces(String image) async {
return dio.get(
"https://api.pixlab.io/facedetect",
queryParameters: {
"img": image,
"key": pixlabkey,
},
);
}
Эта функция возвращает ответ в формате JSON, к которому мы можем обратиться с помощью метода response.data.
Ответ будет выглядеть примерно так.
{
"faces": [
{
"face_id": 1,
"bottom": 118,
"right": 386,
"top": 74,
"left": 343,
"width": 44,
"height": 45
},
{
"face_id": 2,
"bottom": 159,
"right": 210,
"top": 107,
"left": 158,
"width": 53,
"height": 53
},
{
"face_id": 3,
"bottom": 127,
"right": 516,
"top": 84,
"left": 472,
"width": 45,
"height": 44
},
{
"face_id": 4,
"bottom": 156,
"right": 135,
"top": 94,
"left": 73,
"width": 63,
"height": 63
},
{
"face_id": 5,
"bottom": 211,
"right": 504,
"top": 159,
"left": 452,
"width": 53,
"height": 53
},
{
"face_id": 6,
"bottom": 163,
"right": 301,
"top": 101,
"left": 239,
"width": 63,
"height": 63
},
{
"face_id": 7,
"bottom": 136,
"right": 631,
"top": 84,
"left": 579,
"width": 53,
"height": 53
}
],
"status": 200
}
Эти конечные точки faceetect дают нам координаты всех лиц, присутствующих на изображении. Используя эти координаты, можно нарисовать прямоугольник или размыть лица. Используйте свой творческий потенциал и расскажите в комментариях, что вы можете сделать со всеми этими данными.
Размытие обнаруженных лиц в программе flutter
Поскольку целью нашей статьи является обнаружение и размытие данных о лицах, на данном этапе мы наконец-то добрались до размытия лиц. Вы взволнованы? Давайте сделаем это вместе.
Сделайте функцию blurface(). Это функция async, и сделайте POST-запрос к конечной точке Pixlab mogrify API. Функция возвращает Future из Response. В теле POST-запроса мы предоставили объект JSON. Он состоит из нашего изображения, ключа API и координат лица, которые мы получаем из вышеуказанной функции определения лица.
Функция будет выглядеть следующим образом
import 'package:dio/dio.dart';
var dio = Dio();
// Blurring faces using facial coordinates
Future<Response> blurface(String image, List coordinates) async {
return await dio.post(
"https://api.pixlab.io/mogrify",
data: {
"img": image,
"key": pixlabkey,
"cord": coordinates,
},
options: Options(contentType: "application/json"),
);
}
Эта конечная точка отвечает объектом JSON, содержащим ссылку на размытое изображение, которое мы можем загрузить или напрямую отобразить внутри нашего приложения flutter с помощью виджета Image.network().
Создание пользовательского интерфейса
После создания всех полезных функций, detectFaces() и blurface(), настало время создать пользовательский интерфейс.
Мы сделаем интерфейс очень минимальным. Мы определяем колонку внутри тела леса. Первым элементом колонки будет превью нашего изображения. Для этого мы будем использовать изображение сети.
Затем рядом с изображением предварительного просмотра мы определим текст-заполнитель для нашего конечного обработанного размытого изображения из pixlab.
Затем внутри плавающей кнопки действия мы сделаем кнопку с иконкой, при нажатии на которую будут выполняться ранее определенные функции detectFaces() и blurface().
Работа приложения
GET-запрос к конечной точке API pixlab позволяет обнаружить все лица внутри изображения.
Эта конечная точка API отвечает объектом JSON со всеми координатами лиц, присутствующих в приложении.
Затем мы берем эти координаты и помещаем их в функцию blurface(). Затем делаем POST-запрос со всеми координатами лица в теле запроса.
Теперь API pixlab делает свое волшебство и отвечает нам размытым изображением лица, которое мы будем использовать для отображения внутри нашего приложения в качестве конечного результата.
Конечный результат и код
Конечный результат работы приложения выглядит следующим образом.
Я использую setstate() для обновления переменной blurImageLink, чтобы конечное изображение могло быть отображено внутри приложения.
Полный код приложения выглядит следующим образом.
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
void main() {
runApp(
const MaterialApp(
home: FaceBlurPage(),
),
);
}
class FaceBlurPage extends StatefulWidget {
const FaceBlurPage({super.key});
@override
State<FaceBlurPage> createState() => _FaceBlurPageState();
}
class _FaceBlurPageState extends State<FaceBlurPage> {
String pixlabkey = "74389de25cb37a10adf615e8a79c8da4";
String imagelink = "https://pixlab.io/images/m3.jpg";
String? blurImagelink;
// Instentiating Dio
var dio = Dio();
// Detect faces using pixlab API
Future<Response> detectFaces(String image) async {
return dio.get(
"https://api.pixlab.io/facedetect",
queryParameters: {
"img": image,
"key": pixlabkey,
},
);
}
// Blurring faces using facial coordinates
Future<Response> blurface(String image, List coordinates) async {
return await dio.post(
"https://api.pixlab.io/mogrify",
data: {
"img": image,
"key": pixlabkey,
"cord": coordinates,
},
options: Options(contentType: "application/json"),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Face Blur Example"),
),
body: Column(
children: [
Image.network(imagelink),
blurImagelink != null
? Image.network(blurImagelink!)
: const Text("No image provided"),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () async {
Response faces = await detectFaces(imagelink);
Response blurfaceImageResponse =
await blurface(imagelink, faces.data["faces"]);
setState(() {
blurImagelink = blurfaceImageResponse.data["ssl_link"];
});
},
child: const Icon(Icons.auto_mode_rounded),
),
);
}
}
Заключение
Это очень интересный проект, позволяющий узнать, как использовать API pixlab для интеграции функций обнаружения AI/ML в ваше приложение. Если вы застряли на чем-то, пожалуйста, дайте мне знать. Мой твиттер-идентификатор — @hrishikshpathak.
Бонусный совет: Если вы не хотите делать несколько запросов для доступа к изображению и снизить стоимость CDN, вы можете использовать пакет Cached_Network_Image. Этот пакет будет кэшировать ваше сетевое изображение и сделает ваше приложение более плавным и использующим меньше данных на устройстве пользователя.