حزمة تعلُّم الآلة لميزة التعرّف على النص وميزات الوجه: iOS

1- مقدمة

‫ML Kit هي حزمة تعلّم الآلة (SDK) للأجهزة الجوّالة تتيح الاستفادة من خبرة Google في مجال تعلّم الآلة في تطبيقات Android وiOS من خلال حزمة قوية وسهلة الاستخدام. سواء كنت جديدًا على تعلّم الآلة أو لديك خبرة فيه، يمكنك بسهولة تنفيذ الوظائف التي تحتاج إليها ببضعة أسطر من الرموز البرمجية. ليس من الضروري أن تكون لديك معرفة عميقة بالشبكات العصبية أو تحسين النماذج للبدء.

كيف تعمل هذه الميزة؟

تسهّل حزمة ML Kit تطبيق تقنيات تعلّم الآلة في تطبيقاتك من خلال جمع تقنيات تعلّم الآلة من Google، مثل Mobile Vision و TensorFlow Lite، في حزمة تطوير البرامج (SDK) واحدة. سواء كنت بحاجة إلى قوة الإمكانات في الوقت الفعلي لنماذج Mobile Vision على الجهاز فقط، أو مرونة نماذج تصنيف الصور المخصّصة في TensorFlow Lite، تتيح لك حزمة تعلّم الآلة ذلك ببضعة أسطر من الرموز البرمجية.

سيشرح لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء تطبيق iOS خاص بك يمكنه تلقائيًا التعرّف على النص وملامح الوجه في صورة.

التطبيق الذي ستنشئه

في هذا الدرس التطبيقي حول الترميز، ستنشئ تطبيق iOS باستخدام حزمة تعلّم الآلة. سيتيح تطبيقك ما يلي:

  • استخدام واجهة برمجة التطبيقات (API) للتعرّف على النص في حزمة تعلّم الآلة للتعرّف على النص في الصور
  • استخدام واجهة برمجة التطبيقات (API) للتعرّف على الوجوه في حزمة تعلّم الآلة للتعرّف على ملامح الوجه في الصور

صورة لغريس هوبر توضّح طريقة استخدام واجهة برمجة التطبيقات ML Kit Face Recognition APIصورة لافتة على العشب تعرض واجهة برمجة التطبيقات للتعرّف على النص

ما ستتعلمه

  • كيفية استخدام حزمة ML Kit SDK لإضافة إمكانات تعلّم الآلة المتقدّمة بسهولة، مثل التعرّف على النص والتعرّف على ملامح الوجه، إلى أي تطبيق iOS

ما تحتاج إليه

  • إصدار حديث من Xcode (الإصدار 12.4 أو أحدث)
  • محاكي iOS أو جهاز iOS فعلي يعمل بنظام التشغيل iOS 10.0 أو أحدث
  • لا تتوافق حزمة تعلّم الآلة إلا مع هذين البنيتين من 64 بت: x86_64 وarm64
  • الرمز النموذجي
  • معرفة أساسية بتطوير تطبيقات iOS بلغة Swift
  • فهم أساسي لنماذج تعلّم الآلة

يركّز هذا الدرس التطبيقي حول الترميز على حزمة تعلّم الآلة. تم إغفال المفاهيم غير ذات الصلة وكتل الرموز البرمجية، وتم توفيرها لتتمكّن من نسخها ولصقها ببساطة.

2. الإعداد

تنزيل الرمز البرمجي

انقر على الرابط التالي لتنزيل كل الرموز البرمجية لهذا الدرس التطبيقي حول الترميز:

فك ضغط ملف zip الذي تم تنزيله. سيؤدي ذلك إلى إنشاء مجلد جذر (mlkit-ios-codelab) يحتوي على جميع الموارد التي ستحتاج إليها. في هذا الدرس التطبيقي حول الترميز، لن تحتاج إلا إلى الموارد في الدليل الفرعي vision.

يحتوي الدليل الفرعي vision في مستودع mlkit-ios-codelab على دليلَين فرعيَين:

  • android_studio_folder.pngstarter : رمز البداية الذي ستنشئ عليه في هذا الدرس التطبيقي حول الترميز
  • android_studio_folder.pngfinal : الرمز البرمجي المكتمل لنموذج التطبيق النهائي

إضافة التبعيات لحزمة تعلّم الآلة باستخدام CocoaPods

يتم استخدام CocoaPods لإضافة تبعيات حزمة تعلّم الآلة إلى تطبيقك. إذا لم يكن CocoaPods مثبّتًا على جهازك، يمكنك العثور على تعليمات التثبيت هنا. بعد التثبيت، افتح Podfile في المحرّر المفضّل لديك وأضِف حزمة تعلّم الآلة كتبعيات:

Podfile

platform :ios, '10.0'
use_frameworks!

pod 'GoogleMLKit/FaceDetection'
pod 'GoogleMLKit/TextRecognition'

target 'MLKit-codelab' do
end

تثبيت Cocoa Pods لحزمة تعلّم الآلة

للتأكّد من توفّر جميع الاعتماديات لتطبيقك، عليك استخدام سطر الأوامر لتثبيت Cocoa Pods لحزمة تعلّم الآلة.

سطر الأوامر

# Make sure you are in the root of your app
pod install
xed .

3- تشغيل التطبيق الأوّلي

أنت الآن مستعد لتشغيل التطبيق للمرة الأولى. انقر على تشغيل 98205811bbed9d74.png في Xcode لتجميع التطبيق وتشغيله على محاكي iOS.

من المفترض أن يتم تشغيل التطبيق على المحاكي. في هذه المرحلة، من المفترض أن يظهر لك تنسيق أساسي يحتوي على أداة اختيار تتيح لك الاختيار بين صورتَين. في القسم التالي، ستضيف ميزة التعرّف على النص إلى تطبيقك للتعرّف على النص في الصور.

4- إضافة ميزة التعرّف على النص على الجهاز فقط

في هذه الخطوة، سنضيف وظيفة إلى تطبيقك للتعرّف على النص في الصور.

استيراد وحدة MLVision

تأكَّد من توفّر عمليات الاستيراد التالية لفئة ViewController.

ViewController.swift

import MLKit

إنشاء VisionTextRecognizer

أضِف السمات الكسولة التالية إلى فئة ViewController.

ViewController.swift

private lazy var textRecognizer = TextRecognizer.textRecognizer()

إعداد ميزة التعرّف على النص على الجهاز فقط وتشغيلها على صورة

أضِف ما يلي إلى طريقة runTextRecognition لفئة ViewController:

ViewController.swift

func runTextRecognition(with image: UIImage) {
  let visionImage = VisionImage(image: image)
  textRecognizer.process(visionImage) { features, error in
    self.processResult(from: features, error: error)
  }
}

يضبط الرمز البرمجي أعلاه أداة التعرّف على النص ويستدعي الدالة processResult(from:, error:) مع الردّ.

معالجة الردّ على طلب التعرّف على النص

أضِف الرمز البرمجي التالي إلى processResult في فئة ViewController لتحليل النتائج وعرضها في تطبيقك.

ViewController.swift

 func processResult(from text: Text?, error: Error?) {
    removeDetectionAnnotations()
    guard error == nil, let text = text else {
      let errorString = error?.localizedDescription ?? Constants.detectionNoResultsMessage
      print("Text recognizer failed with error: \(errorString)")
      return
    }

    let transform = self.transformMatrix()

    // Blocks.
    for block in text.blocks {
      drawFrame(block.frame, in: .purple, transform: transform)

      // Lines.
      for line in block.lines {
        drawFrame(line.frame, in: .orange, transform: transform)

        // Elements.
        for element in line.elements {
          drawFrame(element.frame, in: .green, transform: transform)

          let transformedRect = element.frame.applying(transform)
          let label = UILabel(frame: transformedRect)
          label.text = element.text
          label.adjustsFontSizeToFitWidth = true
          self.annotationOverlayView.addSubview(label)
        }
      }
    }
  }

تشغيل التطبيق على المحاكي

انقر الآن على 98205811bbed9d74.pngتشغيل في Xcode. بعد تحميل التطبيق، تأكَّد من اختيار Image 1 في أداة الاختيار وانقر على الزر Find Text.

من المفترض أن يظهر تطبيقك الآن كما هو موضّح في الصورة أدناه، حيث يعرض نتائج التعرّف على النص والمربّعات المحيطة التي تم وضعها فوق الصورة الأصلية.

7269fd8fcb4dc793.png

الصورة: Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0

تهانينا، لقد أضفت للتو ميزة التعرّف على النص على الجهاز فقط إلى تطبيقك باستخدام حزمة تعلّم الآلة. تُعدّ ميزة التعرّف على النص على الجهاز فقط رائعة للعديد من حالات الاستخدام لأنّها تعمل حتى عندما لا يكون تطبيقك متصلاً بالإنترنت، وهي سريعة بما يكفي لاستخدامها في الصور الثابتة وإطارات الفيديو المباشر.

5- إضافة ميزة التعرّف على محيط الوجه على الجهاز فقط

في هذه الخطوة، سنضيف وظيفة إلى تطبيقك للتعرّف على محيط الوجوه في الصور.

إنشاء FaceDetector

أضِف السمات الكسولة التالية إلى فئة ViewController.

ViewController.swift

private lazy var faceDetectorOption: FaceDetectorOptions = {
  let option = FaceDetectorOptions()
  option.contourMode = .all
  option.performanceMode = .fast
  return option
}()
private lazy var faceDetector = FaceDetector.faceDetector(options: faceDetectorOption)

إعداد ميزة التعرّف على محيط الوجه على الجهاز وتشغيلها على صورة

أضِف ما يلي إلى طريقة runFaceContourDetection لفئة ViewController:

ViewController.swift

  func runFaceContourDetection(with image: UIImage) {
    let visionImage = VisionImage(image: image)
    faceDetector.process(visionImage) { features, error in
      self.processResult(from: features, error: error)
    }
  }

يضبط الرمز البرمجي أعلاه أداة التعرّف على النص ويستدعي الدالة processResult(from:, error:) مع الردّ.

معالجة الردّ على أداة التعرّف على الوجوه

أضِف الرمز البرمجي التالي إلى processResult في فئة ViewController لتحليل النتائج وعرضها في تطبيقك.

ViewController.swift

  func processResult(from faces: [Face]?, error: Error?) {
    removeDetectionAnnotations()
    guard let faces = faces else {
      return
    }

    for feature in faces {
      let transform = self.transformMatrix()
      let transformedRect = feature.frame.applying(transform)
      UIUtilities.addRectangle(
        transformedRect,
        to: self.annotationOverlayView,
        color: UIColor.green
      )
      self.addContours(forFace: feature, transform: transform)
    }
  }

أخيرًا، أضِف طريقة المساعد addContours في فئة ViewController لرسم نقاط المحيط.

ViewController.swift

 private func addContours(forFace face: Face, transform: CGAffineTransform) {
    // Face
    if let faceContour = face.contour(ofType: .face) {
      for point in faceContour.points {
        drawPoint(point, in: .blue, transform: transform)
      }
    }

    // Eyebrows
    if let topLeftEyebrowContour = face.contour(ofType: .leftEyebrowTop) {
      for point in topLeftEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let bottomLeftEyebrowContour = face.contour(ofType: .leftEyebrowBottom) {
      for point in bottomLeftEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let topRightEyebrowContour = face.contour(ofType: .rightEyebrowTop) {
      for point in topRightEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let bottomRightEyebrowContour = face.contour(ofType: .rightEyebrowBottom) {
      for point in bottomRightEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }

    // Eyes
    if let leftEyeContour = face.contour(ofType: .leftEye) {
      for point in leftEyeContour.points {
        drawPoint(point, in: .cyan, transform: transform)
      }
    }
    if let rightEyeContour = face.contour(ofType: .rightEye) {
      for point in rightEyeContour.points {
        drawPoint(point, in: .cyan, transform: transform)
      }
    }

    // Lips
    if let topUpperLipContour = face.contour(ofType: .upperLipTop) {
      for point in topUpperLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let bottomUpperLipContour = face.contour(ofType: .upperLipBottom) {
      for point in bottomUpperLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let topLowerLipContour = face.contour(ofType: .lowerLipTop) {
      for point in topLowerLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let bottomLowerLipContour = face.contour(ofType: .lowerLipBottom) {
      for point in bottomLowerLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }

    // Nose
    if let noseBridgeContour = face.contour(ofType: .noseBridge) {
      for point in noseBridgeContour.points {
        drawPoint(point, in: .yellow, transform: transform)
      }
    }
    if let noseBottomContour = face.contour(ofType: .noseBottom) {
      for point in noseBottomContour.points {
        drawPoint(point, in: .yellow, transform: transform)
      }
    }
  }

تشغيل التطبيق على المحاكي

انقر الآن على 98205811bbed9d74.pngتشغيل في Xcode. بعد تحميل التطبيق، تأكَّد من اختيار Image 2 في أداة الاختيار وانقر على الزر Find Face Contour. من المفترض أن يظهر تطبيقك الآن كما هو موضّح في الصورة أدناه، حيث يعرض محيط وجه Grace Hopper كنقاط موضوعة فوق الصورة الأصلية.

a5169b50dafbcb2f.png

تهانينا، لقد أضفت للتو ميزة التعرّف على محيط الوجه على الجهاز فقط إلى تطبيقك باستخدام حزمة تعلّم الآلة. تُعدّ ميزة التعرّف على محيط الوجه على الجهاز فقط رائعة للعديد من حالات الاستخدام لأنّها تعمل حتى عندما لا يكون تطبيقك متصلاً بالإنترنت، وهي سريعة بما يكفي لاستخدامها في الصور الثابتة وإطارات الفيديو المباشر.

6- تهانينا!

لقد استخدمت حزمة تعلّم الآلة لإضافة إمكانات تعلّم الآلة المتقدّمة بسهولة إلى تطبيقك.

المواضيع التي تناولناها

  • كيفية إضافة حزمة تعلّم الآلة إلى تطبيق iOS
  • كيفية استخدام ميزة التعرّف على النص على الجهاز فقط في حزمة تعلّم الآلة للعثور على النص في الصور
  • كيفية استخدام ميزة التعرّف على الوجوه على الجهاز فقط في حزمة تعلّم الآلة للتعرّف على ملامح الوجه في الصور

الخطوات التالية

  • استخدِم حزمة تعلّم الآلة في تطبيق iOS الخاص بك.

مزيد من المعلومات

  • https://g.co/mlkit