เขียนแอพ ทายอายุ บอกเพศ ง่ายจิ๊ดเดียว

ใครว่า AI ยากมาลองดูกัน ภาษาอะไรก็เขียนได้ จบภายใน 10 นาที

ในรอบนี้เราจะมาลองเขียนแอพตามหัวเรื่องกันเลย ซึ่งตัวแอพของเราจะส่งรูปไปให้ AI ประมวลผลว่า มีกี่คนอยู่ในรูป แต่ละคนอายุเท่าไหร่ ใครเขียนคิ้วทาปากบ้าง ใครใส่เครื่องประดับอะไรบ้าง อยู่ในอารมณ์ไหน บลาๆ ซึ่งการที่จะทำแบบนี้ได้ผมจะใช้ AI สำเร็จรูปของ Microsoft Azure ที่ชื่อว่า Cognitive Services ครับ

แนะนำให้อ่าน บทความนี้เป็นหนึ่งในซีรี่ AI ดังนั้นถ้าเพื่อนสนใจของสนุกๆ เช่น , ยืนยันตัวตนด้วยเสียง, , และอื่นๆ สามารถดูเนื้อหาทั้งหมดได้จาก Side menu ในหมวดของ Cognitive Services ครับ ซึ่งถ้ามีบทความเกี่ยวกับ AI ก็จะมาลงในหมวดนี้เรื่อยๆ แต่ถ้าอยากรู้ว่า AI สำเร็จรูปตัวอื่นๆของ Microsoft Azure มีอะไรน่าเล่นบ้าง ไปอ่านกันได้จากลิงค์นี้เลยครัช เชื่อผมเต๊อะ AI ไม่ได้ยากแบบที่คิด

😗 ทำความเข้าใจกันก่อน

ตัวอย่างนี้ผมจะใช้ภาษา C# ด้วย .NET Core ดังนั้นใครที่จะทำตามด้วยภาษา C# ให้ลง Visual Studio Code และ .NET Core SDK ในลิงค์ด้านล่างด้วยถ้ายังไม่มี ส่วนคนที่ใช้ภาษาอื่นๆก็สามารถทำตามได้เหมือนกัน เพราะขั้นตอนทั้งหมดเราเรียกใช้ REST API เพียงอย่างเดียวเลยครับ

🤔 เริ่มยังไงดี ?

ก่อนที่จะเริ่มเขียนโค้ดผมอยากเคลียให้เข้าใจตรงกันก่อน ว่าในตัวอย่างนี้เราจะต้องทำอะไรกันบ้างตามนี้เลย

ขั้นตอนแรกเราต้องสร้าง Cognitive Services เสียก่อน เพื่อไปเอา Key กับ Endpoint มา เราถึงจะมีสิทธิ์ในการเรียกใช้ AI ต่อนั่นเอง
สร้าง C# โปรเจคขึ้นมา แล้ว setup project ให้พร้อมทำงานกับ REST API และ Json
คำความรู้จักกับ Face Detect API กันก่อน
เขียนโค้ดอัพโหลดรูปขึ้นไปให้ AI ประมวลผล แล้วเอาผลลัพท์กลับมา
แปลง Json กลับมาเป็นข้อมูลที่เราเข้าใจได้ แล้วเอามาโชว์ออกที่หน้าจอ

🔥 (1-2) สร้าง Cognitive Services และ Project C#

ขั้นตอนที่ 1 กับ 2 เป็นพื้นฐานในการทำ AI ของคอร์สนี้เลย ผมเลยแยกออกไปอีกลิงค์นึง ไม่งั้นทุกบทความผมจะต้องมาคอยนั่ง copy วางตลอดเวลา เลยขอรวมขั้นตอนที่ 1 กับ 2 ไว้ในลิงค์ด้านล่างนี้ครับ

🔥 (3) ทำความรู้จักกับ Face Detect API กันก่อน

ก่อนที่เราจะไปเรียกใช้งานเจ้า Cognitive Services API เราลองมาดูกันก่อนว่า เจ้า API ตัวนี้มันมี interface เป็นยังไงบ้าง ซึ่งผมเอาตัวอย่างคร่าวๆมาให้แล้วตามด้านล่างเลย

Face - Detect

POST {endpoint}/face/v1.0/detect

ตรวจหาใบหน้าจากรูปได้หลายใบหน้าในภาพเดียว และสามารถแยกแยะแต่ละใบหน้าได้

Path Parameters

Name

Type

Description

returnFaceAttributes

string

จะให้ส่งค่าอะไรกลับบ้าง โดยตัวเลือกที่สามารถเลือกได้คือ age, gender, headPose, smile, facialHair, glasses, emotion, hair, makeup, occlusion, accessories, blur, exposure, noise (ถ้าเลือกหลายตัวให้ใส่ comma คั่น) ยิ่งเลือกหลายตัวยิ่งใช้เวลาประมวลผลนานขึ้น

Headers

Name

Type

Description

ocp-apim-subscription-key

string

Key ที่ได้จาก Cognitive Services ที่ทำในขั้นตอนที่ 1

content-type

string

application/json

Request Body

Name

Type

Description

url

string

URL ของรูปที่จะส่งขึ้นไป

[
    {
        "faceId": "c5c24a82-6845-4031-9d5d-978df9175426",
        "recognitionModel": "recognition_02",
        "faceRectangle": {
            "width": 78,
            "height": 78,
            "left": 394,
            "top": 54
        },
        "faceLandmarks": {
            "pupilLeft": {
                "x": 412.7,
                "y": 78.4
            },
            "pupilRight": {
                "x": 446.8,
                "y": 74.2
            },
            "noseTip": {
                "x": 437.7,
                "y": 92.4
            },
            "mouthLeft": {
                "x": 417.8,
                "y": 114.4
            },
            "mouthRight": {
                "x": 451.3,
                "y": 109.3
            },
            "eyebrowLeftOuter": {
                "x": 397.9,
                "y": 78.5
            },
            "eyebrowLeftInner": {
                "x": 425.4,
                "y": 70.5
            },
            "eyeLeftOuter": {
                "x": 406.7,
                "y": 80.6
            },
            "eyeLeftTop": {
                "x": 412.2,
                "y": 76.2
            },
            "eyeLeftBottom": {
                "x": 413.0,
                "y": 80.1
            },
            "eyeLeftInner": {
                "x": 418.9,
                "y": 78.0
            },
            "eyebrowRightInner": {
                "x": 4.8,
                "y": 69.7
            },
            "eyebrowRightOuter": {
                "x": 5.5,
                "y": 68.5
            },
            "eyeRightInner": {
                "x": 441.5,
                "y": 75.0
            },
            "eyeRightTop": {
                "x": 446.4,
                "y": 71.7
            },
            "eyeRightBottom": {
                "x": 447.0,
                "y": 75.3
            },
            "eyeRightOuter": {
                "x": 451.7,
                "y": 73.4
            },
            "noseRootLeft": {
                "x": 428.0,
                "y": 77.1
            },
            "noseRootRight": {
                "x": 435.8,
                "y": 75.6
            },
            "noseLeftAlarTop": {
                "x": 428.3,
                "y": 89.7
            },
            "noseRightAlarTop": {
                "x": 442.2,
                "y": 87.0
            },
            "noseLeftAlarOutTip": {
                "x": 424.3,
                "y": 96.4
            },
            "noseRightAlarOutTip": {
                "x": 446.6,
                "y": 92.5
            },
            "upperLipTop": {
                "x": 437.6,
                "y": 105.9
            },
            "upperLipBottom": {
                "x": 437.6,
                "y": 108.2
            },
            "underLipTop": {
                "x": 436.8,
                "y": 111.4
            },
            "underLipBottom": {
                "x": 437.3,
                "y": 114.5
            }
        },
        "faceAttributes": {
            "age": 71.0,
            "gender": "male",
            "smile": 0.88,
            "facialHair": {
                "moustache": 0.8,
                "beard": 0.1,
                "sideburns": 0.02
            },
            "glasses": "sunglasses",
            "headPose": {
                "roll": 2.1,
                "yaw": 3,
                "pitch": 1.6
            },
            "emotion": {
                "anger": 0.575,
                "contempt": 0,
                "disgust": 0.006,
                "fear": 0.008,
                "happiness": 0.394,
                "neutral": 0.013,
                "sadness": 0,
                "surprise": 0.004
            },
            "hair": {
                "bald": 0.0,
                "invisible": false,
                "hairColor": [
                    {"color": "brown", "confidence": 1.0},
                    {"color": "blond", "confidence": 0.88},
                    {"color": "black", "confidence": 0.48},
                    {"color": "other", "confidence": 0.11},
                    {"color": "gray", "confidence": 0.07},
                    {"color": "red", "confidence": 0.03}
                ]
            },
            "makeup": {
                "eyeMakeup": true,
                "lipMakeup": false
            },
            "occlusion": {
                "foreheadOccluded": false,
                "eyeOccluded": false,
                "mouthOccluded": false
            },
            "accessories": [
                {"type": "headWear", "confidence": 0.99},
                {"type": "glasses", "confidence": 1.0},
                {"type": "mask"," confidence": 0.87}
            ],
            "blur": {
                "blurLevel": "Medium",
                "value": 0.51
            },
            "exposure": {
                "exposureLevel": "GoodExposure",
                "value": 0.55
            },
            "noise": {
                "noiseLevel": "Low",
                "value": 0.12
            }
        }
    }
]

🔥 (4) เขียนโค้ดอัพโหลดรูปให้ AI

คราวนี้เราก็จะมาเขียนโค้ดในการอัพโหลดรูปไปให้ AI กันบ้างละ ซึ่งเราก็จะใช้รูปด้านล่างนี้ลองอัพโหลดขึ้นไปละกัน

ซึ่ง URL ของรูปนี้คือตามลิงค์นี้เลยครัช

https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-LoCfku1h93nvIQvqkaR%2F-LoCglDFUW0smoSUxSMs%2Fimage.png?alt=media&token=cd35a07f-4f22-4a00-b8ac-0274c4fc7791

คราวนี้กลับมาที่ส่วนของโค้ดของเราต่อ เราก็จะเขียนโค้ดให้มันไปเรียกใช้ API ตัวด้านบนกัน ซึ่งเราก็จะได้โค้ดออกมาประมาณนี้

Program.cs

var returnFaceAttributes = "returnFaceAttributes=age,gender,glasses,emotion,makeup,accessories";
var faceDetectRequest = CreateRestRequest($"face/v1.0/detect?returnFaceId=true&{returnFaceAttributes}", new
{
    url = "https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-Lm0_idNbY6k1lwp6hm4%2F-LoCfku1h93nvIQvqkaR%2F-LoCglDFUW0smoSUxSMs%2Fimage.png?alt=media&token=cd35a07f-4f22-4a00-b8ac-0274c4fc7791"
});
var faceDetectResult = client.Execute(faceDetectRequest, Method.POST);
if (faceDetectResult.StatusCode == HttpStatusCode.OK)
{
    var faces = JArray.Parse(faceDetectResult.Content);
    foreach (var item in faces)
    {
        Console.WriteLine(item);
    }
}
else
{
    Console.WriteLine(faceDetectResult.Content);
}

อธิบายโค้ด

ในบรรทัด 1-6 ทำการเรียก API ไป โดยระบุว่าเราจะขอข้อมูลพวก age gender glasses emotion accessories ทั้งหลายมาด้วยในบรรทัดที่ 1
เมื่อได้ผลลัพท์กลับมา ก็ทำการตรวจสอบว่าที่ส่งไปมีอะไรผิดหรือเปล่า ในบรรทัดที่ 7
ถ้าไม่มีอะไรผิดพลาดเราก็จะเอาผลลัพท์ที่ได้มาอ่าน แล้วแสดงผลออกหน้าจอ ในบรรทัดที่ 9-13

จากทั้งหมดที่ทำมา เราก็จะทำการลอง Run กันนะครับ โดยกด CTRL + F5 หรือจะใช้คำสั่ง dotnet run จากใน Command prompt หรือ Terminal ก็ได้ครับ ซึ่งก็จะได้ผลลัพท์ออกมาแบบนี้

{
  "faceId": "c54ae586-b2b0-460a-99bf-c42565908df0",
  "faceRectangle": {
    "top": 97,
    "left": 122,
    "width": 165,
    "height": 165
  },
  "faceAttributes": {
    "gender": "male",
    "age": 49.0,
    "glasses": "NoGlasses",
    "emotion": {
      "anger": 0.0,
      "contempt": 0.002,
      "disgust": 0.0,
      "fear": 0.0,
      "happiness": 0.003,
      "neutral": 0.986,
      "sadness": 0.01,
      "surprise": 0.0
    },
    "makeup": {
      "eyeMakeup": false,
      "lipMakeup": false
    },
    "accessories": []
  }
}

ซึ่งผลลัพท์เขาบอกว่าในรูปเป็น ผู้ชาย อายุ 49 ปี ไม่ได้ใส่แว่น อารมณ์ปรกติ ไม่ได้แต่งหน้า ไม่ได้สวมใส่เครื่องประดับ เย่เหมือนจะตรงซะเกือบหมด แค่อายุยังคลาดเคลื่อนอยู่หน่อยจาก 70 เหลือ 49 ฮ่าๆ ไม่เป็นไรครับคนเอเชียหน้าเด็กก็งี้แหละ

🤔 ยาวจังของโค้ดทั้งหมดหน่อย

เพื่อไม่ให้เนื้อหายาวเพราะโค้ดจนเกินไป ดังนั้นผมขอ zip ตัวโปรเจคนี้แล้วไปดาวโหลดกันเอามาลองเล่นดูละกันนะ แต่ต้องไปเปลี่ยน Key กันเอาเองนะครัช

🎯 บทสรุป

ในการทำงานกับ AI จริงๆไม่ใช่เรื่องยากเลยหัวใจหลักของมันจริงๆก็คือการเรียกใช้ REST API ให้ถูกตัวเท่านั้น ดังนั้นไม่ว่าเราจะเขียนภาษาไหนก็ตาม เราก็สามารถเรียกใช้ Face API เพื่อทำของประมาณนี้ได้เลย

Cognitive Services API หากใครสนใจอยากดู API ทั้งหมดที่ Microsoft เตรียมไว้ให้เราเรียกใช้ AI สำเร็จรูป ก็สามารถเข้าไปดูได้จากลิงค์ด้านล่างนี้เลยครับ

Cognitive Services Library สำหรับคนที่ต้องการเขียนทำงานกับ Cognitive Services จริงๆไม่ต้องไปนั่งเขียนเชื่อม API ทีละตัวก็ได้นะ เพราะทาง Microsoft นั้นได้มี Library ให้เราสามารถเรียกใช้ได้เลยครับ เช่นในฝั่ง .NET ก็จะมีตัวนี้ด้านล่างนี้ที่สามารถติดตั้งแล้วใช้งานได้เลย dotnet add package Microsoft.Azure.CognitiveServices.Vision.Face --version 2.5.0-preview.1

Previousเขียน AI แยกของต่างๆทำยังไง?Nextเขียนแอพให้ AI อธิบายรูปเป็นภาษาคน

Last updated 5 years ago

Was this helpful?