זיהוי דיו דיגיטלי באמצעות ערכת ML ב-iOS

בעזרת התכונה 'זיהוי דיו דיגיטלי' ב-ML Kit, אפשר לזהות טקסט בכתב יד על משטח דיגיטלי במאות שפות, וגם לסווג סקיצות.

רוצה לנסות?

כדאי להתנסות באפליקציית הדוגמה כדי לראות דוגמה לשימוש ב-API הזה.

לפני שמתחילים

צריך לכלול את ספריות ML Kit הבאות ב-Podfile:
```
pod 'GoogleMLKit/DigitalInkRecognition', '8.0.0'
```
אחרי שמתקינים או מעדכנים את ה-Pods של הפרויקט, פותחים את פרויקט Xcode באמצעות .xcworkspace. ‫ML Kit נתמך ב-Xcode בגרסה 13.2.1 ומעלה.

עכשיו אפשר להתחיל בזיהוי טקסט באובייקטים של Ink.

הרכבת אובייקט `Ink`

הדרך העיקרית ליצור אובייקט Ink היא לצייר אותו במסך מגע. ב-iOS, אפשר להשתמש ב-UIImageView יחד עם handlers של אירועי מגע, שמציירים את הקווים על המסך וגם שומרים את הנקודות של הקווים כדי ליצור את אובייקט Ink. הדפוס הכללי הזה מודגם בקטע הקוד הבא. דוגמה מלאה יותר מופיעה באפליקציית ההפעלה המהירה, שבה יש הפרדה בין הטיפול באירועי מגע, ציור המסך וניהול נתוני המשיכות.

Swift

@IBOutlet weak var mainImageView: UIImageView!
var kMillisecondsPerTimeInterval = 1000.0
var lastPoint = CGPoint.zero
private var strokes: [Stroke] = []
private var points: [StrokePoint] = []

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
  UIGraphicsBeginImageContext(view.frame.size)
  guard let context = UIGraphicsGetCurrentContext() else {
    return
  }
  mainImageView.image?.draw(in: view.bounds)
  context.move(to: fromPoint)
  context.addLine(to: toPoint)
  context.setLineCap(.round)
  context.setBlendMode(.normal)
  context.setLineWidth(10.0)
  context.setStrokeColor(UIColor.white.cgColor)
  context.strokePath()
  mainImageView.image = UIGraphicsGetImageFromCurrentImageContext()
  mainImageView.alpha = 1.0
  UIGraphicsEndImageContext()
}

override func touchesBegan(_ touches: Set, with event: UIEvent?) {
  guard let touch = touches.first else {
    return
  }
  lastPoint = touch.location(in: mainImageView)
  let t = touch.timestamp
  points = [StrokePoint.init(x: Float(lastPoint.x),
                             y: Float(lastPoint.y),
                             t: Int(t * kMillisecondsPerTimeInterval))]
  drawLine(from:lastPoint, to:lastPoint)
}

override func touchesMoved(_ touches: Set, with event: UIEvent?) {
  guard let touch = touches.first else {
    return
  }
  let currentPoint = touch.location(in: mainImageView)
  let t = touch.timestamp
  points.append(StrokePoint.init(x: Float(currentPoint.x),
                                 y: Float(currentPoint.y),
                                 t: Int(t * kMillisecondsPerTimeInterval)))
  drawLine(from: lastPoint, to: currentPoint)
  lastPoint = currentPoint
}

override func touchesEnded(_ touches: Set, with event: UIEvent?) {
  guard let touch = touches.first else {
    return
  }
  let currentPoint = touch.location(in: mainImageView)
  let t = touch.timestamp
  points.append(StrokePoint.init(x: Float(currentPoint.x),
                                 y: Float(currentPoint.y),
                                 t: Int(t * kMillisecondsPerTimeInterval)))
  drawLine(from: lastPoint, to: currentPoint)
  lastPoint = currentPoint
  strokes.append(Stroke.init(points: points))
  self.points = []
  doRecognition()
}

Objective-C

// Interface
@property (weak, nonatomic) IBOutlet UIImageView *mainImageView;
@property(nonatomic) CGPoint lastPoint;
@property(nonatomic) NSMutableArray *strokes;
@property(nonatomic) NSMutableArray *points;

// Implementations
static const double kMillisecondsPerTimeInterval = 1000.0;

- (void)drawLineFrom:(CGPoint)fromPoint to:(CGPoint)toPoint {
  UIGraphicsBeginImageContext(self.mainImageView.frame.size);
  [self.mainImageView.image drawInRect:CGRectMake(0, 0, self.mainImageView.frame.size.width,
                                                  self.mainImageView.frame.size.height)];
  CGContextMoveToPoint(UIGraphicsGetCurrentContext(), fromPoint.x, fromPoint.y);
  CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), toPoint.x, toPoint.y);
  CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
  CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 10.0);
  CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1, 1, 1, 1);
  CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeNormal);
  CGContextStrokePath(UIGraphicsGetCurrentContext());
  CGContextFlush(UIGraphicsGetCurrentContext());
  self.mainImageView.image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
}

- (void)touchesBegan:(NSSet *)touches withEvent:(nullable UIEvent *)event {
  UITouch *touch = [touches anyObject];
  self.lastPoint = [touch locationInView:self.mainImageView];
  NSTimeInterval time = [touch timestamp];
  self.points = [NSMutableArray array];
  [self.points addObject:[[MLKStrokePoint alloc] initWithX:self.lastPoint.x
                                                         y:self.lastPoint.y
                                                         t:time * kMillisecondsPerTimeInterval]];
  [self drawLineFrom:self.lastPoint to:self.lastPoint];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(nullable UIEvent *)event {
  UITouch *touch = [touches anyObject];
  CGPoint currentPoint = [touch locationInView:self.mainImageView];
  NSTimeInterval time = [touch timestamp];
  [self.points addObject:[[MLKStrokePoint alloc] initWithX:currentPoint.x
                                                         y:currentPoint.y
                                                         t:time * kMillisecondsPerTimeInterval]];
  [self drawLineFrom:self.lastPoint to:currentPoint];
  self.lastPoint = currentPoint;
}

- (void)touchesEnded:(NSSet *)touches withEvent:(nullable UIEvent *)event {
  UITouch *touch = [touches anyObject];
  CGPoint currentPoint = [touch locationInView:self.mainImageView];
  NSTimeInterval time = [touch timestamp];
  [self.points addObject:[[MLKStrokePoint alloc] initWithX:currentPoint.x
                                                         y:currentPoint.y
                                                         t:time * kMillisecondsPerTimeInterval]];
  [self drawLineFrom:self.lastPoint to:currentPoint];
  self.lastPoint = currentPoint;
  if (self.strokes == nil) {
    self.strokes = [NSMutableArray array];
  }
  [self.strokes addObject:[[MLKStroke alloc] initWithPoints:self.points]];
  self.points = nil;
  [self doRecognition];
}

שימו לב שקטע הקוד כולל פונקציה לדוגמה לציור הקו ב-UIImageView. צריך להתאים את הפונקציה הזו לאפליקציה שלכם לפי הצורך. מומלץ להשתמש ב-roundcaps כשמציירים את קטעי הקו, כדי שקטעים באורך אפס יצוירו כנקודה (כמו הנקודה באות i קטנה). הפונקציה doRecognition() מופעלת אחרי כל תנועת עט שנכתבת, והיא מוגדרת בהמשך.

קבלת מופע של `DigitalInkRecognizer`

כדי לבצע זיהוי, צריך להעביר את האובייקט Ink למופע DigitalInkRecognizer. כדי לקבל את מופע DigitalInkRecognizer, קודם צריך להוריד את מודל הזיהוי בשפה הרצויה, ואז לטעון את המודל לזיכרון ה-RAM. אפשר לעשות זאת באמצעות קטע הקוד הבא, שמוצב בפונקציה viewDidLoad() ומשתמש בשם שפה שמוגדר בקוד, כדי לפשט את התהליך. באפליקציה למתחילים אפשר לראות דוגמה לאופן שבו אפשר להציג למשתמש את רשימת השפות הזמינות ולהוריד את השפה שנבחרה.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  let languageTag = "en-US"
  let identifier = DigitalInkRecognitionModelIdentifier(forLanguageTag: languageTag)
  if identifier == nil {
    // no model was found or the language tag couldn't be parsed, handle error.
  }
  let model = DigitalInkRecognitionModel.init(modelIdentifier: identifier!)
  let modelManager = ModelManager.modelManager()
  let conditions = ModelDownloadConditions.init(allowsCellularAccess: true,
                                         allowsBackgroundDownloading: true)
  modelManager.download(model, conditions: conditions)
  // Get a recognizer for the language
  let options: DigitalInkRecognizerOptions = DigitalInkRecognizerOptions.init(model: model)
  recognizer = DigitalInkRecognizer.digitalInkRecognizer(options: options)
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  NSString *languagetag = @"en-US";
  MLKDigitalInkRecognitionModelIdentifier *identifier =
      [MLKDigitalInkRecognitionModelIdentifier modelIdentifierForLanguageTag:languagetag];
  if (identifier == nil) {
    // no model was found or the language tag couldn't be parsed, handle error.
  }
  MLKDigitalInkRecognitionModel *model = [[MLKDigitalInkRecognitionModel alloc]
                                          initWithModelIdentifier:identifier];
  MLKModelManager *modelManager = [MLKModelManager modelManager];
  [modelManager downloadModel:model conditions:[[MLKModelDownloadConditions alloc]
                                                initWithAllowsCellularAccess:YES
                                                allowsBackgroundDownloading:YES]];
  MLKDigitalInkRecognizerOptions *options =
      [[MLKDigitalInkRecognizerOptions alloc] initWithModel:model];
  self.recognizer = [MLKDigitalInkRecognizer digitalInkRecognizerWithOptions:options];
}

אפליקציות ההפעלה המהירה כוללות קוד נוסף שמראה איך לטפל בכמה הורדות בו-זמנית, ואיך לקבוע איזו הורדה הצליחה על ידי טיפול בהתראות על השלמת ההורדה.

זיהוי אובייקט `Ink`

הפונקציה הבאה היא doRecognition(), שנקראת touchesEnded() כדי לפשט את הדברים. באפליקציות אחרות, יכול להיות שתרצו להפעיל את הזיהוי רק אחרי פסק זמן, או כשמשתמש לוחץ על לחצן כדי להפעיל את הזיהוי.

Swift

func doRecognition() {
  let ink = Ink.init(strokes: strokes)
  recognizer.recognize(
    ink: ink,
    completion: {
      [unowned self]
      (result: DigitalInkRecognitionResult?, error: Error?) in
      var alertTitle = ""
      var alertText = ""
      if let result = result, let candidate = result.candidates.first {
        alertTitle = "I recognized this:"
        alertText = candidate.text
      } else {
        alertTitle = "I hit an error:"
        alertText = error!.localizedDescription
      }
      let alert = UIAlertController(title: alertTitle,
                                  message: alertText,
                           preferredStyle: UIAlertController.Style.alert)
      alert.addAction(UIAlertAction(title: "OK",
                                    style: UIAlertAction.Style.default,
                                  handler: nil))
      self.present(alert, animated: true, completion: nil)
    }
  )
}

Objective-C

- (void)doRecognition {
  MLKInk *ink = [[MLKInk alloc] initWithStrokes:self.strokes];
  __weak typeof(self) weakSelf = self;
  [self.recognizer
      recognizeInk:ink
        completion:^(MLKDigitalInkRecognitionResult *_Nullable result,
                     NSError *_Nullable error) {
    typeof(weakSelf) strongSelf = weakSelf;
    if (strongSelf == nil) {
      return;
    }
    NSString *alertTitle = nil;
    NSString *alertText = nil;
    if (result.candidates.count > 0) {
      alertTitle = @"I recognized this:";
      alertText = result.candidates[0].text;
    } else {
      alertTitle = @"I hit an error:";
      alertText = [error localizedDescription];
    }
    UIAlertController *alert =
        [UIAlertController alertControllerWithTitle:alertTitle
                                            message:alertText
                                     preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"OK"
                                              style:UIAlertActionStyleDefault
                                            handler:nil]];
    [strongSelf presentViewController:alert animated:YES completion:nil];
  }];
}

ניהול הורדות של מודלים

כבר ראינו איך מורידים מודל הכרה. קטעי הקוד הבאים מראים איך לבדוק אם מודל כבר הורד, או איך למחוק מודל כשכבר לא צריך אותו כדי לפנות מקום באחסון.

איך בודקים אם מודל כבר הורד

Swift

let model : DigitalInkRecognitionModel = ...
let modelManager = ModelManager.modelManager()
modelManager.isModelDownloaded(model)

Objective-C

MLKDigitalInkRecognitionModel *model = ...;
MLKModelManager *modelManager = [MLKModelManager modelManager];
[modelManager isModelDownloaded:model];

מחיקת מודל שהורדתם

Swift

let model : DigitalInkRecognitionModel = ...
let modelManager = ModelManager.modelManager()

if modelManager.isModelDownloaded(model) {
  modelManager.deleteDownloadedModel(
    model!,
    completion: {
      error in
      if error != nil {
        // Handle error
        return
      }
      NSLog(@"Model deleted.");
    })
}

Objective-C

MLKDigitalInkRecognitionModel *model = ...;
MLKModelManager *modelManager = [MLKModelManager modelManager];

if ([self.modelManager isModelDownloaded:model]) {
  [self.modelManager deleteDownloadedModel:model
                                completion:^(NSError *_Nullable error) {
                                  if (error) {
                                    // Handle error.
                                    return;
                                  }
                                  NSLog(@"Model deleted.");
                                }];
}

טיפים לשיפור הדיוק של זיהוי הטקסט

רמת הדיוק של זיהוי הטקסט עשויה להשתנות בין שפות שונות. רמת הדיוק תלויה גם בסגנון הכתיבה. התכונה 'זיהוי כתב יד דיגיטלי' מאומנת לטפל בסגנונות כתיבה רבים, אבל התוצאות עשויות להיות שונות ממשתמש למשתמש.

ריכזנו כאן כמה דרכים לשיפור הדיוק של כלי לזיהוי טקסט. חשוב לזכור שהטכניקות האלה לא רלוונטיות לסיווגים של שרטוטים של אמוג'י, AutoDraw וצורות.

אזור הכתיבה

באפליקציות רבות יש אזור כתיבה מוגדר היטב לקלט של משתמשים. המשמעות של סמל נקבעת בחלקה לפי הגודל שלו ביחס לגודל של אזור הכתיבה שמכיל אותו. לדוגמה, ההבדל בין האותיות הקטנות והגדולות o או c, ובין פסיק לבין לוכסן.

כדי לשפר את הדיוק, אפשר לציין את הרוחב והגובה של אזור הכתיבה. עם זאת, הכלי לזיהוי כתב יד מניח שאזור הכתיבה מכיל רק שורה אחת של טקסט. אם אזור הכתיבה הפיזי גדול מספיק כדי לאפשר למשתמש לכתוב שתי שורות או יותר, יכול להיות שתקבלו תוצאות טובות יותר אם תעבירו WritingArea עם גובה שהוא האומדן הטוב ביותר שלכם לגובה של שורה אחת של טקסט. האובייקט WritingArea שמעבירים למזהה לא צריך להתאים בדיוק לאזור הכתיבה הפיזי במסך. שינוי הגובה של אזור הכתיבה בדרך הזו עובד טוב יותר בשפות מסוימות מאשר באחרות.

כשמציינים את אזור הכתיבה, צריך לציין את הרוחב והגובה שלו באותן יחידות שבהן מציינים את קואורדינטות המשיכות. אין דרישה ליחידות של ארגומנטי הקואורדינטות x,y – ה-API מבצע נורמליזציה של כל היחידות, כך שהדבר היחיד שחשוב הוא הגודל והמיקום היחסיים של הקווים. אתם יכולים להעביר קואורדינטות בכל קנה מידה שמתאים למערכת שלכם.

לפני ההקשר

הטקסט שלפני ההקשר הוא הטקסט שמופיע מיד לפני התנועות ב-Ink שאתם מנסים לזהות. כדי לעזור למערכת הזיהוי, אפשר לספר לה על ההקשר הקודם.

לדוגמה, לעיתים קרובות מתבלבלים בין האותיות "n" ו-"u" בכתב מחובר. אם המשתמש כבר הזין את המילה החלקית "arg", הוא יכול להמשיך בהקשות שאפשר לזהות כ-"ument" או כ-"nment". ציון ההקשר המקדים arg פותר את הבעיה, כי סביר יותר שהמילה תהיה argument ולא argnment.

הקשר שלפני המילה יכול גם לעזור למערכת לזהות את הרווחים בין המילים. אפשר להקליד רווח, אבל אי אפשר לצייר אותו. אז איך מערכת הזיהוי יכולה לדעת איפה מסתיימת מילה אחת ומתחילה מילה אחרת? אם המשתמש כבר כתב 'hello' וממשיך עם המילה הכתובה 'world', ללא הקשר הקודם, מנגנון הזיהוי מחזיר את המחרוזת 'world'. עם זאת, אם מציינים את ההקשר הקודם 'hello', המודל יחזיר את המחרוזת ' world' עם רווח מוביל, כי 'hello world' הגיוני יותר מ-'helloword'.

צריך לספק את מחרוזת הטקסט הארוכה ביותר שאפשר, עד 20 תווים, כולל רווחים. אם המחרוזת ארוכה יותר, הכלי לזיהוי משתמש רק ב-20 התווים האחרונים.

בדוגמת הקוד הבאה אפשר לראות איך מגדירים אזור כתיבה ומשתמשים באובייקט RecognitionContext כדי לציין הקשר מקדים.

Swift

let ink: Ink = ...;
let recognizer: DigitalInkRecognizer =  ...;
let preContext: String = ...;
let writingArea = WritingArea.init(width: ..., height: ...);

let context: DigitalInkRecognitionContext.init(
    preContext: preContext,
    writingArea: writingArea);

recognizer.recognizeHandwriting(
  from: ink,
  context: context,
  completion: {
    (result: DigitalInkRecognitionResult?, error: Error?) in
    if let result = result, let candidate = result.candidates.first {
      NSLog("Recognized \(candidate.text)")
    } else {
      NSLog("Recognition error \(error)")
    }
  })

Objective-C

MLKInk *ink = ...;
MLKDigitalInkRecognizer *recognizer = ...;
NSString *preContext = ...;
MLKWritingArea *writingArea = [MLKWritingArea initWithWidth:...
                                              height:...];

MLKDigitalInkRecognitionContext *context = [MLKDigitalInkRecognitionContext
       initWithPreContext:preContext
       writingArea:writingArea];

[recognizer recognizeHandwritingFromInk:ink
            context:context
            completion:^(MLKDigitalInkRecognitionResult
                         *_Nullable result, NSError *_Nullable error) {
                               NSLog(@"Recognition result %@",
                                     result.candidates[0].text);
                         }];

סידור המשיכות

רמת הדיוק של הזיהוי תלויה בסדר המשיכות. הכלי לזיהוי מצפה שהקווים יופיעו בסדר שבו אנשים כותבים באופן טבעי. לדוגמה, משמאל לימין באנגלית. כל מקרה שחורג מהדפוס הזה, כמו כתיבת משפט באנגלית שמתחיל במילה האחרונה, יוביל לתוצאות פחות מדויקות.

דוגמה נוספת היא כשמסירים מילה באמצע Ink ומחליפים אותה במילה אחרת. התיקון כנראה באמצע המשפט, אבל התנועות של התיקון נמצאות בסוף רצף התנועות. במקרה כזה, מומלץ לשלוח את המילה החדשה שנכתבה בנפרד ל-API ולמזג את התוצאה עם הזיהויים הקודמים באמצעות הלוגיקה שלכם.

התמודדות עם צורות מעורפלות

יש מקרים שבהם המשמעות של הצורה שמסופקת לכלי הזיהוי היא דו-משמעית. לדוגמה, מלבן עם קצוות מעוגלים מאוד יכול להיחשב כמלבן או כאליפסה.

אפשר לטפל במקרים לא ברורים כאלה באמצעות ציוני זיהוי, אם הם זמינים. רק מסווגי צורות מספקים ציונים. אם המודל בטוח מאוד, הציון של התוצאה המובילה יהיה הרבה יותר טוב מהציון של התוצאה השנייה הכי טובה. אם יש אי ודאות, הציונים של שתי התוצאות הראשונות יהיו קרובים. בנוסף, חשוב לזכור שסיווג הצורות מפרש את כל Ink כצורה אחת. לדוגמה, אם Ink מכיל מלבן ואליפסה אחד ליד השני, יכול להיות שהמערכת תחזיר את אחד מהם (או משהו שונה לגמרי) כתוצאה, כי מועמד יחיד לזיהוי לא יכול לייצג שתי צורות.

זיהוי דיו דיגיטלי באמצעות ערכת ML ב-iOS קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

רוצה לנסות?

לפני שמתחילים

הרכבת אובייקט Ink

Swift

Objective-C

קבלת מופע של DigitalInkRecognizer

Swift

Objective-C

זיהוי אובייקט Ink

Swift

Objective-C

ניהול הורדות של מודלים

איך בודקים אם מודל כבר הורד

Swift

Objective-C

מחיקת מודל שהורדתם

Swift

Objective-C

טיפים לשיפור הדיוק של זיהוי הטקסט

אזור הכתיבה

לפני ההקשר

Swift

Objective-C

סידור המשיכות

התמודדות עם צורות מעורפלות

זיהוי דיו דיגיטלי באמצעות ערכת ML ב-iOS

הרכבת אובייקט `Ink`

קבלת מופע של `DigitalInkRecognizer`

זיהוי אובייקט `Ink`