[flutter] 플러터 프로바이더를 사용하여 실시간으로 얼굴 인식하기

22 Dec 2023

flutter

이 블로그에서는 플러터(Flutter) 앱에서 프로바이더(Provider) 패키지를 활용하여 실시간으로 얼굴을 인식하는 방법을 소개하겠습니다.

필요한 패키지 설치하기

먼저 플러터 프로젝트에 camera, tflite, provider 패키지를 추가해야 합니다. 아래의 명령어를 사용하여 패키지를 설치합니다.

flutter pub add camera
flutter pub add tflite
flutter pub add provider

카메라 설정

camera 패키지를 사용하여 카메라를 구성합니다. 다음은 카메라 설정에 관한 예시코드입니다.

import 'package:camera/camera.dart';

List<CameraDescription> cameras;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  cameras = await availableCameras();
  runApp(MyApp());
}

얼굴 인식 모델 설정

얼굴 인식을 위해 tflite 패키지를 사용하여 모델을 로드합니다. 아래는 모델을 로드하고 추론을 하는 예시 코드입니다.

import 'package:tflite/tflite.dart';

void loadModel() async {
  var res = await Tflite.loadModel(
    model: "assets/face_model.tflite",
    labels: "assets/face_labels.txt",
  );
  print(res);
}

프로바이더로 화면 갱신하기

인식된 얼굴의 정보를 다른 위젯과 공유하기 위해 provider 패키지를 사용합니다. 아래는 ChangeNotifier를 이용하여 상태를 관리하는 예시 코드입니다.

import 'package:flutter/material.dart';

class FaceProvider extends ChangeNotifier {
  String _detectedFace;

  String get detectedFace => _detectedFace;

  void setDetectedFace(String face) {
    _detectedFace = face;
    notifyListeners();
  }
}

화면에 얼굴 인식 정보 출력하기

마지막으로, provider를 활용하여 화면에 인식된 얼굴의 정보를 출력하는 방법을 보여드리겠습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class FaceScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final faceProvider = Provider.of<FaceProvider>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Face Detection')),
      body: Center(
        child: Text(
          faceProvider.detectedFace ?? 'No face detected',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

위의 예시 코드들을 활용하여 프로바이더를 사용하여 실시간으로 얼굴을 인식하는 플러터 앱을 만들 수 있습니다.

이렇게 하여 프로바이더와 다른 패키지들을 통해 플러터 앱에서 실시간으로 얼굴 인식을 구현하는 방법에 대해 살펴보았습니다.