التعرف على الوجوه في الاندرويد من خلال فايربيز- ML kit

07 June

Android Firebase ML kit

درس جديد من سلسلة دروس الفايربيز و بالتحديد فرع MLkit و اليوم لنا موعد مع خاصية تحديد الوجه من خلال الجهاز اما الكلاود كما اسلفنا سابقا فهو لا يدعم هذه الخاصية . و لتفهم محتوى هذه التدوينة خد فكرة عامة عن الموضوع في تدوينة سابقة لنا سلسلة دروس شرح مكتبة ML Kit حسنا الان انت مستعد لتجربة هذه الخاصية الرائعة و الفعالة حسنا .

التعرف على الوجوه في الاندرويد من خلال فايربيز- ML kit

الصفر : المشروع موجود على github .

اولا : نظرة عامة عن الخاصية ←

ستمكنك هذه الخاصية من تحديد الوجوه الموجودة في الصورة و ايضا تحديد المعالم كالابتسامة و تحديد مكان الفم و الانف و العينين و غير ذلك من ملامح الوجه التي قد تحتاجها لتعديل على الصور و جمع معلومات عنها لهذا قسمت الدرس الى قسمين في هذه التذوينة من اجل تحديد الوجه و التذوينة القادمة عن تحديد معالم الوجه .

ثانيا : اضافة الخاصية الى مشروعك ←

1-يجب عليك ربط التطبيق بالفايربيز .

2-اضف الكود التالي الى ملف build.gradle ↓

build.gradle -> App

implementation 'com.google.firebase:firebase-ml-vision:16.0.0'

3-نقوم باضافة الكود التالي الى ملف Manifest

<meta-data android:name="com.google.firebase.ml.vision.DEPENDENCIES" android:value="face"/>

دور هذا الكود هو تحميل الملفات التي يحتاجها تطبيقك اثناء التنصيب كي لا تحدث معك اي مشكلة .اما ان لم تضفه فلا مشكلة فسيتم تحميل الملفات المرغوب فيها عند اول تشغيل لتطبيقك على هاتف المستخدم لكن لا ينصح بهذا .

4-اضف الكود التالي الى ملف manifest ان كنت ستستخدم الكاميرا↓


<manifest ..>
...
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />

</manifest>

وفي حال واجهة مشكلة اضف الكود التالي الى ملف build.gradle ↓

build.gradle -> Project


    repositories {
        //...
        maven { url 'https://jitpack.io' }
    }

ثالثا : الواجهة ←

الواجهة القبيحة كما العادة يمكنك تعديلها :

image_labeling.xml


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#efefef">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    </android.support.design.widget.AppBarLayout>

    <io.fotoapparat.view.CameraView
        android:id="@+id/camera_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- Adding bottom sheet after main content -->
    <include layout="@layout/bottom_sheet" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/takePic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@+id/bottom_sheet"
        app:srcCompat="@drawable/ic_camera"
        android:layout_margin="10dp"
        app:fabSize="normal"
        app:layout_anchorGravity="top|start" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fromDevice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@+id/bottom_sheet"
        app:srcCompat="@drawable/ic_upload"
        android:layout_margin="10dp"
        app:fabSize="normal"
        app:layout_anchorGravity="top|center" />

</android.support.design.widget.CoordinatorLayout>

نضيف الان الواجهة السفلية :

bottom_sheet.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="100dp"
    android:background="#fff"
    android:orientation="vertical"
    app:behavior_hideable="false"
    app:behavior_peekHeight="56dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/pic"
        android:textColor="#444"
        android:textSize="18dp"
        android:textStyle="bold"/>
    <ImageView
        android:id="@+id/mImage"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:contentDescription="@string/app_name"
        android:visibility="gone"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/text"
        android:textColor="#444"
        android:textSize="18dp"
        android:textStyle="bold" />
<TextView
    android:id="@+id/mtextRec"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"/>
   
</LinearLayout>

رابعا : تحديد الوجه من الصورة و رسم شعار الموقع عليه ←

لكي تعمل لديك الكاميرا لابد من الحصول على اذن المستخدم من اصدار الولي بوب 5

1-بما ان api الكاميرا في الاندرويد كانه برمج في اخر الشارع لذا فانا ساستعمل هذه المكتبة fotoapparat .

2- اضافة كود اخد الاذن للوصول للكاميرا اليك الطريقة .

3-الان يمكنك الموت بسلام او اضافة الكود :

faceRec.kt


class faceRec:AppCompatActivity() {
 lateinit var sheetBehavior:BottomSheetBehavior<View>

 override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.image_labeling)
  setSupportActionBar(toolbar)
  sheetBehavior = BottomSheetBehavior.from(bottom_sheet)
  val fotoapparat = Fotoapparat(context = this, view = camera_view)
  fotoapparat.start()
  //اخد صورة
  //يمكنك عدم استخدمها
  takePic.setOnClickListener {
   val photoResult =fotoapparat.takePicture()
   photoResult
     .toBitmap()
     .whenAvailable { bitmapPhoto ->
      recognizeText(bitmapPhoto!!.bitmap)
     }
  }
  //اخد الصورة من الهاتف
  fromDevice.setOnClickListener {
   val photoPickerIntent = Intent(Intent.ACTION_GET_CONTENT)
   photoPickerIntent.type = "image/*"
   startActivityForResult(photoPickerIntent, 1)
  }
 }

 private fun recognizeText(bitmap: Bitmap) {
  //تحويل بيتماب الى بيتماب قابل للتعديل
  val mBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true)
  val canvas = Canvas(mBitmap)
  //الحصول على الكود
  val image : FirebaseVisionImage = FirebaseVisionImage.fromBitmap(bitmap)
  val detector = FirebaseVision.getInstance().visionFaceDetector
  detector.detectInImage(image)
    .addOnSuccessListener {
     // انتهى بنجاح
     for (face in it) {
      //احداثيات الصورة
      val bounds = face.boundingBox
      val btm=getBitmapFromVectorDrawable(R.drawable.ic_logo)
      //رسم الصورة على الوجه اعتمادا على الاحذاثيات
      canvas.drawBitmap(btm, bounds.exactCenterX()-btm.height/2,bounds.exactCenterY()-btm.width/2,null)
     }
     //وضع الصورة في الفيو
     mImage.setImageBitmap(mBitmap)
    }
    .addOnFailureListener {
     // خطا ما وقع
     Toast.makeText(baseContext,"Sorry, something went wrong!", Toast.LENGTH_SHORT).show()
    }
 }
        //انتضار استرجاع الصورة من تطبيق الصورة
 override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent) {
  super.onActivityResult(requestCode, resultCode, data)
  if (resultCode == RESULT_OK) {
   try {
    val chosenImageUri = data.data
    val mBitmap= MediaStore.Images.Media.getBitmap(this.contentResolver, chosenImageUri)
    recognizeText(mBitmap)
   } catch (e: IOException) {
    e.printStackTrace()
   }
  }
 }
        //تحويل الصورة الى بيتماب من خلال المعرف الخاص بها
 fun getBitmapFromVectorDrawable(drawableId: Int): Bitmap {
  var drawable = ContextCompat.getDrawable(this, drawableId)
  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
   drawable = DrawableCompat.wrap(drawable!!).mutate()
  }

  val bitmap = Bitmap.createBitmap(drawable!!.intrinsicWidth,
    drawable.intrinsicHeight, Bitmap.Config.ARGB_8888)
  val canvas = Canvas(bitmap)
  drawable.setBounds(0, 0, canvas.width, canvas.height)
  drawable.draw(canvas)

  return bitmap
 }
}

النتيجة جميلة جدا←

في التذوينة القادمة سنتحدث عن التعرف على معالم الوجه كالابتسامة و غير ذلك .

و لا تنسى متابعتنا على فايسبوك للتوصل بجديد برمجة تطبيقات اندرويد و كل ما يخص اخبار جوجل

هل ترغب في مثل هذه التدوينات

جوجل توتير

فايسبوك

اسماعيل ايت بلا

ببساطة ارغب في تجربة جديدة من التعلم من خلال مشاركة ما تعلمه يجبرني ذلك على البحث لمدة طويلة مما يجعل الموقع جديرا بالثقة

تابعني

android bella: التعرف على الوجوه في الاندرويد من خلال فايربيز- ML kit

ادعمنا عن طريق مشاركة التدوينة التي اعجبتك