การจดจำลายมือดิจิทัลของ ML Kit ช่วยให้คุณจดจำข้อความที่เขียนด้วยลายมือบนพื้นผิวดิจิทัลในภาษาต่างๆ หลายร้อยภาษา รวมถึงแยกประเภทภาพร่างได้
ลองเลย
- ลองใช้แอปตัวอย่างเพื่อ ดูตัวอย่างการใช้งาน API นี้
ก่อนเริ่มต้น
ใส่ไลบรารี ML Kit ต่อไปนี้ใน Podfile
pod 'GoogleMLKit/DigitalInkRecognition', '8.0.0'หลังจากติดตั้งหรืออัปเดต Pod ของโปรเจ็กต์แล้ว ให้เปิดโปรเจ็กต์ Xcode โดยใช้ไฟล์
.xcworkspaceML Kit รองรับใน Xcode เวอร์ชัน 13.2.1 ขึ้นไป
ตอนนี้คุณพร้อมที่จะเริ่มจดจำข้อความในออบเจ็กต์ Ink แล้ว
สร้างออบเจ็กต์ Ink
วิธีหลักในการสร้างออบเจ็กต์ Ink คือการวาดบนหน้าจอสัมผัส ใน iOS
คุณสามารถใช้ UIImageView ร่วมกับ
ตัวแฮนเดิลเหตุการณ์สัมผัส
ซึ่งจะวาดเส้นบนหน้าจอและจัดเก็บจุดของเส้นเพื่อสร้าง
ออบเจ็กต์ 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
ซึ่งคุณควรปรับให้เหมาะกับแอปพลิเคชันของคุณ เราขอแนะนำให้ใช้ปลายเส้นโค้งเมื่อวาดส่วนของเส้นเพื่อให้ส่วนที่มีความยาวเป็น 0 ถูกวาดเป็นจุด (ลองนึกถึงจุดบนตัวอักษร "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."); }]; }
เคล็ดลับในการปรับปรุงความแม่นยำในการจดจำข้อความ
ความแม่นยำในการจดจำข้อความอาจแตกต่างกันไปในแต่ละภาษา ความแม่นยำยังขึ้นอยู่กับรูปแบบการเขียนด้วย แม้ว่าระบบจะฝึกการจดจำลายมือดิจิทัลให้รองรับรูปแบบการเขียนหลายประเภท แต่ผลลัพธ์อาจแตกต่างกันไปในแต่ละผู้ใช้
ต่อไปนี้คือวิธีต่างๆ ในการปรับปรุงความแม่นยำของตัวจดจำข้อความ โปรดทราบว่าเทคนิคเหล่านี้ใช้ไม่ได้กับตัวแยกประเภทภาพวาดสำหรับอิโมจิ การวาดอัตโนมัติ และรูปร่าง
พื้นที่สำหรับเขียน
แอปพลิเคชันหลายรายการมีพื้นที่สำหรับเขียนที่กำหนดไว้อย่างชัดเจนเพื่อให้ผู้ใช้ป้อนข้อมูล ความหมายของสัญลักษณ์จะขึ้นอยู่กับขนาดของสัญลักษณ์เมื่อเทียบกับขนาดของพื้นที่สำหรับเขียนที่สัญลักษณ์นั้นอยู่ เช่น ความแตกต่างระหว่างตัวอักษร "o" หรือ "c" พิมพ์เล็กหรือพิมพ์ใหญ่ และเครื่องหมายจุลภาคกับเครื่องหมายทับ
การบอกความกว้างและความสูงของพื้นที่สำหรับเขียนให้ตัวจดจำทราบจะช่วยปรับปรุงความแม่นยำได้ อย่างไรก็ตาม ตัวจดจำจะถือว่าพื้นที่สำหรับเขียนมีข้อความเพียงบรรทัดเดียว หากพื้นที่สำหรับเขียนจริงมีขนาดใหญ่พอที่จะให้ผู้ใช้เขียนได้ 2 บรรทัดขึ้นไป คุณอาจได้รับผลลัพธ์ที่ดีขึ้นโดยการส่งออบเจ็กต์ WritingArea ที่มีความสูงซึ่งเป็นค่าประมาณที่ดีที่สุดสำหรับความสูงของข้อความ 1 บรรทัด ออบเจ็กต์ 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 และผสานผลลัพธ์กับการจดจำก่อนหน้าโดยใช้ตรรกะของคุณเอง
การจัดการกับรูปร่างที่กำกวม
มีบางกรณีที่ความหมายของรูปร่างที่ส่งไปยังตัวจดจำนั้นกำกวม ตัวอย่างเช่น สี่เหลี่ยมผืนผ้าที่มีขอบโค้งมนมากอาจถูกมองว่าเป็นสี่เหลี่ยมผืนผ้าหรือวงรีก็ได้
คุณสามารถจัดการกับกรณีที่ไม่ชัดเจนเหล่านี้ได้โดยใช้คะแนนการจดจำเมื่อมี เฉพาะตัวแยกประเภทรูปร่างเท่านั้นที่ให้คะแนน หากโมเดลมีความมั่นใจมาก คะแนนของผลลัพธ์ยอดนิยมจะดีกว่าผลลัพธ์ที่รองลงมามาก หากมีความไม่แน่นอน คะแนนของผลลัพธ์ 2 รายการแรกจะใกล้เคียงกัน นอกจากนี้ โปรดทราบว่าตัวแยกประเภทรูปร่างจะตีความ Ink ทั้งหมดเป็นรูปร่างเดียว ตัวอย่างเช่น หาก Ink มีสี่เหลี่ยมผืนผ้าและวงรีอยู่ข้างกัน ตัวจดจำอาจแสดงผลอย่างใดอย่างหนึ่ง (หรืออย่างอื่นที่แตกต่างออกไปโดยสิ้นเชิง) เนื่องจากผู้สมัครรับการจดจำรายเดียวไม่สามารถแสดงรูปร่าง 2 รูปได้