تشخیص چهره با فلاتر — راهنمای کاربردی

۲۳۸ بازدید
آخرین به‌روزرسانی: ۱۵ مهر ۱۴۰۲
زمان مطالعه: ۲ دقیقه
تشخیص چهره با فلاتر — راهنمای کاربردی

در این مقاله به بررسی مبانی تشخیص چهره با فلاتر درون یک تصویر با استفاده از ML Kit فایربیس و نمایان ساختن آن به کمک CustomPainter (+) می‌پردازیم. گردش کار به صورت زیر است:

  • یک تصویر را گرفته و آن را به قالبی تبدیل می‌کنیم که از سوی ML Kit قابل درک باشد.
  • تصویر را به دتکتور می‌دهیم و اجازه می‌دهیم چهره‌های موجود را شناسایی کند.
  • چهره‌های پیدا شده را بیرون کشیده و به CustomPainter می‌دهیم.
  • به CustomPainter اجازه می‌دهیم تا مختصات چهره‌ها را پیدا کرده و سپس از آن‌ها برای رسم کادرهایی پیرامون چهره‌ها استفاده کند.

وابستگی‌ها: ما برای کار با این پروژه به پکیج‌های image_picker و firebase_ml_vision نیاز داریم.

پیاده‌سازی

دراین بخش مراحل پیاده‌سازی را بررسی خوهیم کرد.

گام 1: پروژه فایربیس و وابستگی‌ها

ابتدا یک پروژه فایربیس ایجاد می‌کنیم و وابستگی‌های image_picker و firebase_ml_vision را به فایل pubspec.yaml اضافه می‌کنیم. وابستگی‌های ما باید اینک به صورت زیر درآمده باشند:

تشخیص چهره با فلاتر

ضمناً وابستگی مدل چهره را نیز به فایل build.gradle در سطح app اضافه می‌کنیم:

تشخیص چهره با فلاتر

گام 2: واکشی و پردازش تصویر

در این بخش باید تصویر را از دوربین یا گالری دستگاه با استفاده از پلاگین image_picker واکشی کنیم:

1final imageFile = await ImagePicker.pickImage(source:ImageSource.gallery);
2seState((){
3  isLoading = true;
4});

سپس این تصویر را به بایت‌هایی تبدیل می‌کنیم تا از سوی مدل ML و همچنین از سوی custom painter قابل درک باشند:

1final data = await file.readAsBytes();
2await decodeImageFromList(data).then(
3(value) => setState(() {
4    _image = value;
5    isLoading = false;
6  }),
7);

گام 3: تشخیص چهره‌ها

اینک یک نمونه از تشخیص‌دهنده چهره ایجاد کرده‌ایم و وظیفه پردازش تصویر و یافتن چهره‌های موجود را بر عهده آن گذارده‌ایم:

1final faceDetector = FirebaseVision.instance.faceDetector();
2List<Face> faces = await faceDetector.processImage(image);

گام 4: CustomPainter

تشخیص‌دهنده چهره لیستی از کلاس Face بازگشت می‌دهد که شامل مختصات کادر پیرامونی است. سپس Painter از این مختصات برای رسم یک کادر مستطیلی پیرامون چهره‌ها با استفاده از آن مختصات بهره می‌گیرد. در ادامه کد CustomPainter را می‌بینید:

1class FacePainter extends CustomPainter {
2  final ui.Image image;
3  final List<Face> faces;
4  final List<Rect> rects = [];
5
6  FacePainter(this.image, this.faces) {
7    for (var i = 0; i < faces.length; i++) {
8      rects.add(faces[i].boundingBox);
9    }
10  }
11
12  @override
13  void paint(ui.Canvas canvas, ui.Size size) {
14    final Paint paint = Paint()
15      ..style = PaintingStyle.stroke
16      ..strokeWidth = 15.0
17      ..color = Colors.yellow;
18
19    canvas.drawImage(image, Offset.zero, Paint());
20    for (var i = 0; i < faces.length; i++) {
21      canvas.drawRect(rects[i], paint);
22    }
23  }
24
25  @override
26  bool shouldRepaint(FacePainter oldDelegate) {
27    return image != oldDelegate.image || faces != oldDelegate.faces;
28  }
29}

گام 5: کدنویسی UI

اینک می‌توانیم از custom painter درون درخت ویجت خود به صورت زیر استفاده کنیم:

1@override
2  Widget build(BuildContext context) {
3    return Scaffold(
4      body: isLoading
5          ? Center(child: CircularProgressIndicator())
6          : (_imageFile == null)
7              ? Center(child: Text('No image selected'))
8              : Center(
9                  child: FittedBox(
10                    child: SizedBox(
11                      width: _image.width.toDouble(),
12                      height: _image.height.toDouble(),
13                      child: CustomPaint(
14                        painter: FacePainter(_image, _faces),
15                      ),
16                    ),
17                  ),
18                ),
19      floatingActionButton: FloatingActionButton(
20        onPressed: _getImageAndDetectFaces,
21        tooltip: 'Pick Image',
22        child: Icon(Icons.add_a_photo),
23      ),
24    );
25  }

گام 6: بهره‌گیری

اپلیکیشن را اجرا می‌کنیم و امیدواریم همه چیز به درستی کار کند:

تشخیص چهره با فلاتر

بدین ترتیب موفق شدیم با چند خط کدنویسی به لطف فریمورک فلاتر و فایربیس یک اپلیکیشن تشخیص چهره داشته باشیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۲ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
flutter-community
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *