คำแนะนำในการตรวจจับใบหน้าสำหรับ iOS

งานฟีเจอร์ตรวจจับใบหน้าช่วยให้คุณตรวจจับใบหน้าในรูปภาพหรือวิดีโอได้ คุณสามารถใช้งานนี้เพื่อค้นหาใบหน้าและฟีเจอร์ใบหน้าภายในเฟรมได้ งานนี้ใช้โมเดลแมชชีนเลิร์นนิง (ML) ที่ทำงานร่วมกับรูปภาพเดียวหรือสตรีมรูปภาพแบบต่อเนื่อง การแสดงผลงานจะแสดงตำแหน่งใบหน้า ตลอดจนประเด็นสำคัญบนใบหน้า ได้แก่ ตาซ้าย ตาขวา ปลายจมูก ปาก ตาข้างซ้าย และแผลที่ตาขวา

ตัวอย่างโค้ดที่อธิบายในวิธีการเหล่านี้จะดูได้ใน GitHub คุณดูงานนี้ในการใช้งานจริงได้โดยดูการสาธิตในเว็บนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่าของงานนี้ได้ที่ภาพรวม

ตัวอย่างโค้ด

โค้ดตัวอย่างงาน MediaPipe Tasks เป็นการใช้งานแอปตัวตรวจจับใบหน้าสำหรับ iOS แบบง่ายๆ ตัวอย่างนี้ใช้กล้องบนอุปกรณ์ Android จริงเพื่อตรวจจับใบหน้าในสตรีมวิดีโอต่อเนื่อง แอปยังสามารถตรวจจับใบหน้าในภาพ และวิดีโอจากแกลเลอรีอุปกรณ์ได้ด้วย

คุณสามารถใช้แอปนี้เป็นจุดเริ่มต้นสำหรับแอป iOS ของคุณเองหรือใช้อ้างอิงเมื่อแก้ไขแอปที่มีอยู่ โค้ดตัวอย่างของเครื่องตรวจจับใบหน้าจะโฮสต์อยู่ใน GitHub

ดาวน์โหลดโค้ด

วิธีการต่อไปนี้แสดงวิธีสร้างสำเนาโค้ดตัวอย่างในเครื่องโดยใช้เครื่องมือบรรทัดคำสั่ง git

วิธีดาวน์โหลดโค้ดตัวอย่าง

1. โคลนที่เก็บ Git โดยใช้คำสั่งต่อไปนี้

   git clone https://github.com/google-ai-edge/mediapipe-samples
   

2. (ไม่บังคับ) กำหนดค่าอินสแตนซ์ Git เพื่อใช้การชำระเงินแบบกะทัดรัด คุณจึงมีเฉพาะไฟล์สำหรับแอปตัวอย่างของอุปกรณ์ตรวจจับใบหน้าเท่านั้น

   cd mediapipe
   git sparse-checkout init --cone
   git sparse-checkout set examples/face_detector/ios/
   

หลังจากสร้างโค้ดตัวอย่างเวอร์ชันในเครื่องแล้ว คุณจะติดตั้งไลบรารีงาน MediaPipe แล้วเปิดโปรเจ็กต์โดยใช้ Xcode และเรียกใช้แอป ดูวิธีได้ที่คู่มือการตั้งค่าสำหรับ iOS

องค์ประกอบหลัก

ไฟล์ต่อไปนี้มีโค้ดที่สำคัญสำหรับแอปพลิเคชันตัวอย่าง Face Detector

• FaceDetectorService.swift: เริ่มต้นตัวตรวจจับ จัดการการเลือกโมเดล และเรียกใช้การอนุมานกับข้อมูลอินพุต
• CameraViewController: ใช้ UI สำหรับโหมดป้อนข้อมูลฟีดกล้องแบบสดและแสดงภาพผลการตรวจจับ
• MediaLibraryViewController.swift: ใช้ UI สำหรับโหมดป้อนข้อมูลภาพนิ่งและไฟล์วิดีโอ และแสดงภาพผลการตรวจจับ

ตั้งค่า

ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์และโปรเจ็กต์โค้ดเพื่อใช้อุปกรณ์ตรวจจับใบหน้า ดูข้อมูลทั่วไปเกี่ยวกับการตั้งค่าสภาพแวดล้อมการพัฒนาสำหรับการใช้งาน MediaPipe รวมถึงข้อกำหนดเวอร์ชันแพลตฟอร์มได้ที่คู่มือการตั้งค่าสำหรับ iOS

การอ้างอิง

ตัวตรวจจับใบหน้าใช้คลัง MediaPipeTasksVision ซึ่งต้องติดตั้งโดยใช้ CocoaPods ไลบรารีนี้ใช้งานได้กับทั้งแอป Swift และ Objective-C และไม่จำเป็นต้องมีการตั้งค่าเฉพาะภาษาใดๆ เพิ่มเติม

หากต้องการดูวิธีการติดตั้ง CocoaPods ใน macOS โปรดอ่านคู่มือการติดตั้ง CocoaPods ดูวิธีสร้าง Podfile ด้วยพ็อดที่จำเป็นสำหรับแอปได้ที่การใช้ CocoaPods

เพิ่มพ็อด MediaPipeTasksVision ใน Podfile โดยใช้โค้ดต่อไปนี้

target 'MyFaceDetectorApp' do
  use_frameworks!
  pod 'MediaPipeTasksVision'
end

หากแอปมีเป้าหมายการทดสอบหน่วย โปรดอ่านคู่มือการตั้งค่าสำหรับ iOS เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่า Podfile

รุ่น

งาน MediaPipe Face Detector ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกแล้วสำหรับตัวตรวจจับใบหน้าได้ที่ภาพรวมงานส่วนโมเดล

เลือกและดาวน์โหลดโมเดล แล้วเพิ่มลงในไดเรกทอรีโปรเจ็กต์โดยใช้ Xcode สำหรับคำแนะนำเกี่ยวกับวิธีเพิ่มไฟล์ลงในโปรเจ็กต์ Xcode โปรดดูการจัดการไฟล์และโฟลเดอร์ในโปรเจ็กต์ Xcode

ใช้พร็อพเพอร์ตี้ BaseOptions.modelAssetPath เพื่อระบุเส้นทางไปยังโมเดลใน App Bundle โปรดดูตัวอย่างโค้ดในส่วนถัดไป

สร้างงาน

คุณสร้างงานการตรวจจับใบหน้าได้โดยเรียกใช้หนึ่งในผู้เริ่มต้นของงาน เครื่องมือเริ่มต้น FaceDetector(options:) จะยอมรับค่าสำหรับตัวเลือกการกำหนดค่า

หากไม่ต้องการให้อุปกรณ์ตรวจจับใบหน้าเริ่มต้นใช้งานด้วยตัวเลือกการกำหนดค่าที่กำหนดเอง คุณสามารถใช้เครื่องมือเริ่มต้น FaceDetector(modelPath:) เพื่อสร้างอุปกรณ์ตรวจจับใบหน้าด้วยตัวเลือกเริ่มต้นได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ภาพรวมการกำหนดค่า

งานการตรวจจับใบหน้ารองรับข้อมูลอินพุต 3 ประเภท ได้แก่ ภาพนิ่ง ไฟล์วิดีโอ และสตรีมวิดีโอสด โดยค่าเริ่มต้น FaceDetector(modelPath:) จะเริ่มต้นงาน สำหรับภาพนิ่ง หากต้องการเริ่มต้นงานเพื่อประมวลผลไฟล์วิดีโอหรือสตรีมวิดีโอสด ให้ใช้ FaceDetector(options:) เพื่อระบุโหมดการทำงานของวิดีโอหรือสตรีมแบบสด โหมดสตรีมแบบสดต้องใช้ตัวเลือกการกำหนดค่า faceDetectorLiveStreamDelegate เพิ่มเติมด้วย ซึ่งจะช่วยให้อุปกรณ์ตรวจจับใบหน้าส่งผลลัพธ์การตรวจจับใบหน้าไปยังผู้รับมอบสิทธิ์แบบไม่พร้อมกันได้

เลือกแท็บที่เหมาะกับโหมดการวิ่งของคุณเพื่อดูวิธีสร้างงานและใช้การอนุมาน

Swift

import MediaPipeTasksVision

let modelPath = Bundle.main.path(forResource: "model",
                                      ofType: "tflite")

let options = FaceDetectorOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .image

let faceDetector = try FaceDetector(options: options)
    

import MediaPipeTasksVision

let modelPath = Bundle.main.path(forResource: "model",
                                      ofType: "tflite")

let options = FaceDetectorOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .video

let faceDetector = try FaceDetector(options: options)
    

import MediaPipeTasksVision

// Class that conforms to the `FaceDetectorLiveStreamDelegate` protocol and
// implements the method that the face detector calls once it finishes
// detecting faces in each input frame.
class FaceDetectorResultProcessor: NSObject, FaceDetectorLiveStreamDelegate {

  func faceDetector(
    _ faceDetector: FaceDetector,
    didFinishDetection result: FaceDetectorResult?,
    timestampInMilliseconds: Int,
    error: Error?) {

    // Process the face detection result or errors here.

  }
}

let modelPath = Bundle.main.path(
  forResource: "model",
  ofType: "tflite")

let options = FaceDetectorOptions()
options.baseOptions.modelAssetPath = modelPath
options.runningMode = .liveStream

// Assign an object of the class to the `faceDetectorLiveStreamDelegate`
// property.
let processor = FaceDetectorResultProcessor()
options.faceDetectorLiveStreamDelegate = processor

let faceDetector = try FaceDetector(options: options)
    

Objective-C

@import MediaPipeTasksVision;

NSString *modelPath = [[NSBundle mainBundle] pathForResource:@"model"
                                                      ofType:@"tflite"];

MPPFaceDetectorOptions *options = [[MPPFaceDetectorOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeImage;

MPPFaceDetector *faceDetector =
      [[MPPFaceDetector alloc] initWithOptions:options error:nil];
    

@import MediaPipeTasksVision;

NSString *modelPath = [[NSBundle mainBundle] pathForResource:@"model"
                                                      ofType:@"tflite"];

MPPFaceDetectorOptions *options = [[MPPFaceDetectorOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeVideo;

MPPFaceDetector *faceDetector =
      [[MPPFaceDetector alloc] initWithOptions:options error:nil];
    

@import MediaPipeTasksVision;

// Class that conforms to the `MPPFaceDetectorLiveStreamDelegate` protocol
// and implements the method that the face detector calls once it finishes
// detecting faces in each input frame.

@interface APPFaceDetectorResultProcessor : NSObject 

@end

@implementation APPFaceDetectorResultProcessor

-   (void)faceDetector:(MPPFaceDetector *)faceDetector
    didFinishDetectionWithResult:(MPPFaceDetectorResult *)faceDetectorResult
         timestampInMilliseconds:(NSInteger)timestampInMilliseconds
                           error:(NSError *)error {

    // Process the face detector result or errors here.

}

@end

NSString *modelPath = [[NSBundle mainBundle] pathForResource:@"model"
                                                      ofType:@"tflite"];

MPPFaceDetectorOptions *options = [[MPPFaceDetectorOptions alloc] init];
options.baseOptions.modelAssetPath = modelPath;
options.runningMode = MPPRunningModeLiveStream;

// Assign an object of the class to the `faceDetectorLiveStreamDelegate`
// property.
APPFaceDetectorResultProcessor *processor = [APPFaceDetectorResultProcessor new];
options.faceDetectorLiveStreamDelegate = processor;

MPPFaceDetector *faceDetector =
      [[MPPFaceDetector alloc] initWithOptions:options error:nil];
    

หมายเหตุ: หากใช้โหมดวิดีโอหรือโหมดสตรีมแบบสด ตัวตรวจจับใบหน้าจะใช้การติดตามเพื่อหลีกเลี่ยงการทริกเกอร์รูปแบบการตรวจจับในทุกเฟรม ซึ่งจะช่วยลดเวลาในการตอบสนอง

ตัวเลือกการกำหนดค่า

งานมีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับแอป iOS

การกำหนดค่าสตรีมแบบสด

เมื่อตั้งค่าโหมดกำลังทำงานเป็นสตรีมแบบสด ตัวตรวจจับใบหน้าจะต้องใช้ตัวเลือกการกำหนดค่า faceDetectorLiveStreamDelegate เพิ่มเติม ซึ่งทำให้ตัวตรวจจับใบหน้าแสดงผลการตรวจจับแบบไม่พร้อมกันได้ ผู้มอบสิทธิ์จะใช้เมธอด faceDetector(_:didFinishDetection:timestampInMilliseconds:error:) ซึ่งอุปกรณ์ตรวจจับใบหน้าเรียกใช้หลังจากประมวลผลผลการตรวจจับใบหน้าสำหรับแต่ละเฟรม

เตรียมข้อมูล

คุณต้องแปลงรูปภาพหรือเฟรมอินพุตเป็นวัตถุ MPImage ก่อนที่จะส่งไปยังอุปกรณ์ตรวจจับใบหน้า MPImage รองรับรูปแบบรูปภาพ iOS ประเภทต่างๆ และสามารถใช้ในโหมดการอนุมานได้ทุกโหมด ดูข้อมูลเพิ่มเติมเกี่ยวกับ MPImage ได้ที่ MPImage API

เลือกรูปแบบรูปภาพ iOS ตามกรณีการใช้งานและโหมดที่แอปพลิเคชันต้องการMPImage ยอมรับรูปแบบรูปภาพ UIImage, CVPixelBuffer และ CMSampleBuffer บน iOS

UIImage

รูปแบบ UIImage เหมาะสมสำหรับโหมดการวิ่งต่อไปนี้

• รูปภาพ: รูปภาพจาก App Bundle แกลเลอรีของผู้ใช้ หรือระบบไฟล์ที่จัดรูปแบบเป็นรูปภาพ UIImage จะแปลงเป็นออบเจ็กต์ MPImage ได้

• วิดีโอ: ใช้ AVAssetImageGenerator เพื่อดึงเฟรมวิดีโอเป็นรูปแบบ CGImage แล้วแปลงเป็นรูปภาพ UIImage รูป

// Load an image on the user's device as an iOS `UIImage` object.

// Convert the `UIImage` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(uiImage: image)
    

// Load an image on the user's device as an iOS `UIImage` object.

// Convert the `UIImage` object to a MediaPipe's Image object having the default
// orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithUIImage:image error:nil];
    

ตัวอย่างนี้จะเริ่มต้น MPImage ด้วยการวางแนว UIImage.Orientation.Up เริ่มต้น คุณเริ่มต้น MPImage ด้วยค่า UIImage.Orientation ที่รองรับค่าใดก็ได้ ตัวตรวจจับใบหน้าไม่รองรับการวางแนวแบบมิเรอร์ เช่น .upMirrored, .downMirrored, .leftMirrored, .rightMirrored

ดูข้อมูลเพิ่มเติมเกี่ยวกับ UIImage ได้ในเอกสารประกอบสำหรับนักพัฒนาแอปของ Apple สำหรับ UIImage

CVPixelBuffer

รูปแบบ CVPixelBuffer เหมาะกับแอปพลิเคชันที่สร้างเฟรมและใช้เฟรมเวิร์ก CoreImage ของ iOS สำหรับการประมวลผล

รูปแบบ CVPixelBuffer เหมาะสมสำหรับโหมดการวิ่งต่อไปนี้

• รูปภาพ: แอปที่สร้างรูปภาพ CVPixelBuffer รูปหลังจากการประมวลผลบางอย่างโดยใช้เฟรมเวิร์ก CoreImage ของ iOS สามารถส่งไปยังอุปกรณ์ตรวจจับใบหน้าในโหมดการทำงานของรูปภาพได้

• วิดีโอ: เฟรมวิดีโอสามารถแปลงเป็นรูปแบบ CVPixelBuffer เพื่อประมวลผล จากนั้นส่งไปยังอุปกรณ์ตรวจจับใบหน้าในโหมดวิดีโอ

• สตรีมแบบสด: แอปที่ใช้กล้อง iOS สร้างเฟรมอาจแปลงเป็นรูปแบบ CVPixelBuffer เพื่อประมวลผลก่อนที่จะส่งไปยังตัวตรวจจับใบหน้าในโหมดสตรีมแบบสด

// Obtain a CVPixelBuffer.

// Convert the `CVPixelBuffer` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(pixelBuffer: pixelBuffer)
    

// Obtain a CVPixelBuffer.

// Convert the `CVPixelBuffer` object to a MediaPipe's Image object having the
// default orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithUIImage:image error:nil];
    

ดูข้อมูลเพิ่มเติมเกี่ยวกับ CVPixelBuffer ได้ในเอกสารประกอบสำหรับนักพัฒนาแอป CVPixelBuffer ของ Apple

CMSampleBuffer

รูปแบบ CMSampleBuffer จะเก็บตัวอย่างสื่อของประเภทสื่อแบบเดียวกัน และเหมาะกับโหมดการสตรีมแบบสดเป็นอย่างยิ่ง เฟรมสดจากกล้อง iOS จะส่งแบบไม่พร้อมกันในรูปแบบ CMSampleBuffer โดย iOS AVCaptureVideoDataOutput

// Obtain a CMSampleBuffer.

// Convert the `CMSampleBuffer` object to a MediaPipe's Image object having the default
// orientation `UIImage.Orientation.up`.
let image = try MPImage(sampleBuffer: sampleBuffer)
    

// Obtain a `CMSampleBuffer`.

// Convert the `CMSampleBuffer` object to a MediaPipe's Image object having the
// default orientation `UIImageOrientationUp`.
MPImage *image = [[MPPImage alloc] initWithSampleBuffer:sampleBuffer error:nil];
    

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ CMSampleBuffer โปรดดูเอกสารสำหรับ นักพัฒนาซอฟต์แวร์ CMSampleBuffer

เรียกใช้งาน

หากต้องการเรียกใช้อุปกรณ์ตรวจจับใบหน้า ให้ใช้เมธอด detect() เฉพาะสำหรับโหมดการทำงานที่มอบหมาย ดังนี้

• ภาพนิ่ง: detect(image:)
• วิดีโอ: detect(videoFrame:timestampInMilliseconds:)
• สตรีมสด: detectAsync(image:timestampInMilliseconds:)

ตัวตรวจจับใบหน้าจะแสดงใบหน้าที่ตรวจพบภายในรูปภาพหรือเฟรมอินพุต

ตัวอย่างโค้ดต่อไปนี้แสดงตัวอย่างง่ายๆ ของวิธีเรียกใช้ตัวตรวจจับใบหน้าในโหมดทำงานต่างๆ เหล่านี้

Swift

let result = try faceDetector.detect(image: image)
    

let result = try faceDetector.detect(
  videoFrame: image,
  timestampInMilliseconds: timestamp)
    

try faceDetector.detectAsync(
  image: image,
  timestampInMilliseconds: timestamp)
    

Objective-C

MPPFaceDetectorResult *result = [faceDetector detectInImage:image
                                                      error:nil];
    

MPPFaceDetectorResult *result = [faceDetector detectInVideoFrame:image
                                         timestampInMilliseconds:timestamp
                                                           error:nil];
    

BOOL success = [faceDetector detectAsyncInImage:image
                        timestampInMilliseconds:timestamp
                                          error:nil];
    

ตัวอย่างโค้ดเครื่องตรวจจับใบหน้าจะแสดงการใช้งานของแต่ละโหมดเหล่านี้อย่างละเอียด detect(image:), detect(videoFrame:timestampInMilliseconds:) และ detectAsync(image:timestampInMilliseconds:) โค้ดตัวอย่างช่วยให้ผู้ใช้สลับโหมดการประมวลผลที่อาจไม่จำเป็นสำหรับกรณีการใช้งานของคุณ

โปรดทราบดังต่อไปนี้

• เมื่อทำงานในโหมดวิดีโอหรือโหมดสตรีมแบบสด คุณต้องระบุการประทับเวลาของเฟรมอินพุตในงานตรวจจับใบหน้าด้วย

• เมื่อเรียกใช้ในโหมดรูปภาพหรือวิดีโอ งานตัวตรวจจับใบหน้าจะบล็อกชุดข้อความปัจจุบันจนกว่าจะประมวลผลรูปภาพหรือเฟรมอินพุตเสร็จ หากต้องการหลีกเลี่ยงการบล็อกเทรดปัจจุบัน ให้ประมวลผลการประมวลผลในเทรดเบื้องหลังโดยใช้เฟรม iOS Dispatch หรือ NSOperation

• เมื่อทำงานในโหมดสตรีมแบบสด งานตัวตรวจจับใบหน้าจะแสดงผลทันทีและจะไม่บล็อกชุดข้อความปัจจุบัน โดยจะเรียกใช้เมธอด faceDetector(_:didFinishDetection:timestampInMilliseconds:error:) พร้อมกับผลการตรวจจับใบหน้าหลังจากประมวลผลเฟรมอินพุตแต่ละเฟรม ตัวตรวจจับใบหน้าจะเรียกใช้วิธีการนี้แบบไม่พร้อมกันในคิวการส่งแบบอนุกรมที่เฉพาะเจาะจง สำหรับการแสดงผลลัพธ์บนอินเทอร์เฟซผู้ใช้ ให้ส่งผลลัพธ์ไปยังคิวหลักหลังจากประมวลผลผลลัพธ์แล้ว หากมีการเรียกฟังก์ชัน detectAsync เมื่องานอุปกรณ์ตรวจจับใบหน้าไม่ว่างในการประมวลผลเฟรมอื่น ตัวตรวจจับใบหน้าจะไม่สนใจเฟรมอินพุตใหม่

แฮนเดิลและแสดงผลลัพธ์

เมื่อเรียกใช้การอนุมาน งานอุปกรณ์ตรวจจับใบหน้าจะแสดงผลออบเจ็กต์ FaceDetectorResult ที่มีกรอบล้อมรอบสำหรับใบหน้าที่ตรวจพบและคะแนนความเชื่อมั่นสำหรับใบหน้าที่ตรวจพบแต่ละรายการ

ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

รูปภาพต่อไปนี้แสดงภาพเอาต์พุตของงาน

สำหรับรูปภาพที่ไม่มีกรอบล้อมรอบ โปรดดูรูปภาพต้นฉบับ

โค้ดตัวอย่างของเครื่องตรวจจับใบหน้าจะสาธิตวิธีแสดงผลลัพธ์ ดูรายละเอียดในตัวอย่างโค้ด