تشخیص چهره با فلاتر — راهنمای کاربردی
در این مقاله به بررسی مبانی تشخیص چهره با فلاتر درون یک تصویر با استفاده از 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) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت
- مفاهیم مقدماتی فلاتر (Flutter) — به زبان ساده
- ایجاد انیمیشن اسکرول در فلاتر (Flutter) — از صفر تا صد
==