เขียน AI แยกของต่างๆทำยังไง?

ลองใช้ AI แยกลุงตู่กับลุงแม้วกัน ใช้ภาษาอะไรก็ทำได้ !!

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

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

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

ตัวโปรแกรมของเราจะทำการส่งรูปไปให้ AI สองกลุ่มคือ กลุ่มลุงตู่ และ กลุ่มลุงแม้ว โดยกลุ่มลุงตู่เราก็จะอัพโหลดรูปของลุงเข้าไปเยอะๆ ส่วนกลุ่มลุงแม้วก็อัพเฉพาะแต่รูปลุงแม้วเช่นกัน แล้วเราก็จะสั่งให้ AI ไปเรียนรู้ว่ารูปแต่ละเป็นมีลักษณะเฉพาะตัวยังไง แล้วสุดท้ายเราก็จะลองส่งรูปที่ AI ไม่เคยเห็นไปถามมันว่ารูปนี้คือรูปลุงตู่หรือลุงแม้วกันแน่ ซึ่งตัวอย่างนี้ผมจะไม่ทำ UI เลยเพราะเน้นไปที่เรื่องการใช้ AI อย่างเดียวเท่านั้นครับ

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

• Download Visual Studio Code
• Download .NET Core SDK

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

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

1. ขั้นตอนแรกเราต้องสร้าง Cognitive Services ภายใน Custom Vision 2 ตัวเสียก่อน เพื่อที่จะใช้งาน AI สำเร็จรูปได้ แล้วเอา Key กับ Endpoint มา ซึ่งเจ้าสองตัวนี้จะเป็นเหมือนรหัสลับในการเข้าใช้งาน AI ของเรานั่นเอง

2. สร้างโปรเจคขึ้นมาเพื่อเตรียมโค้ด

3. เขียนโค้ดอัพโหลดรูปกลุ่มลุงตู่ กับ กลุ่มลุงแม้วให้กับ AI

4. สั่งให้ AI ทำการเรียนรู้ลักษณะเฉพาะของรูปลุงๆทั้งสอง

5. อัพโหลดรูปที่ AI ไม่เคยเห็นมาก่อน เพื่อถามมันว่ารูปนี้คือใคร

🔥 (1) สร้าง Cognitive Services กัน

1.ในขั้นตอนนี้เราจะสร้าง Cognitive Services ผ่านเว็บของ Custom Vision กัน ดังนั้น เราก็เข้าไปที่เว็บไซต์ของเขากันเลย https://www.customvision.ai พอเข้าไปแล้วก็จะเห็นปุ่ม SIGN IN ตัวใหญ่ๆก็ทำการ login เข้าไปเลยครับ

2.เมื่อเข้ามาแล้วให้กดรูปฟังเฟืองด้านบนขวาครับ

3.กดปุ่ม Create new เพื่อทำการสร้าง Cognitive Service ตัวแรกกัน ซึ่งตัวนี้เราจะสร้างเป็นตัวที่ใช้สำหรับ Train Model หรือพูดง่ายๆว่าเป็นตัวที่สามารถทำให้ AI เก่งขึ้นไปเรื่อยๆได้

ชื่อ	รายละเอียด

Name	ชื่อ Cognitive Services ที่จะสร้าง

Resource group	จะสร้าง service นี้ไว้ใน Resource Group ไหน ถ้ายังไม่มีให้กดปุ่ม Create new เลยก็ได้ครับ

King	ประเภทของของการใช้งาน ตัวแรกนี้ให้เลือกเป็น CustomVision.Training ครับ

Location	ตัว service นี้จะสร้างไว้ภูมิภาคไหน ในตัวอย่างผมเล่นในไทยก็เลือกเป็น Southeast Asia

Pricing tier	จะให้เขาเก็บเงินเราแบบไหน ถ้าอยากใช้ตัวฟรีให้เลือก F0 ครับ

เรียบร้อยแล้วเราก็จะได้ Service ที่ใช้สำหรับ Training ออกมา 1 ตัวละ คราวนี้ให้จด Key กับ Endpoint ไว้ครับ เดี๋ยวเราจะเอาไปใช้ในขั้นตอนถัดไปต่อ

4.ให้กด create new เพื่อทำการสร้างอีก 1 ตัวซึ่งตัวที่สองนี้เราจะใช้เป็นตัว Prediction ครับ หรือพูดง่ายๆว่า ใช้เป็นตัวสำหรับเอาไว้ให้คนอื่นๆเรียกใช้งานได้นั่นเอง ซึ่งเจ้าตัวนี้จะไม่ให้มันสามารถมาสั่ง train model เราได้

เรียบร้อยแล้วเราก็จะได้ Service ที่ใช้สำหรับ Prediction ออกมา 1 ตัวละ คราวนี้ให้จด Key กับ Endpoint ไว้ครับ เดี๋ยวเราจะเอาไปใช้ในขั้นตอนถัดไปต่อ

คำเตือน ตัว Service ที่สร้าง ถ้าเลือก Pricing Tier เป็น F0 จะไม่เสียเงินก็จริง แต่มีข้อจำกัดคือสร้าง project มาเล่นได้ไม่เกิน 2 ตัว และจำกัดจำนวนครั้งในการสร้าง tag บลาๆ ดังนั้นถ้าใครลอง Run โค้ดแล้วไม่ผ่านอาจเป็นเพราะโค้ดไปสร้าง project จนมันครบกำหนดแล้วก็ได้ ซึ่งวิธีการลบโปรเจคจะอยู่หัวข้อสุดท้ายเลยครับ

🔥 (2) สร้างโปรเจค

ในขั้นตอนนี้ผมจะสร้างโปรเจคของ C# ขึ้นมา เพื่อเขียนโค้ดในการสร้างเรียกใช้ Cognitive Services ล่ะนะ ดังนั้นขอแบ่งเป็นหัวข้อย่อยๆนิดหน่อย

2.1.สร้างโปรเจค

เริ่มต้นก็เปิด command prompt หรือ terminal ขึ้นมาเลย แล้วใช้คำสั่งด้านล่างในการสร้างโปรเจคได้เลย

dotnet new console -n saladpuk-image-classification

saladpuk-image-classification คือชื่อโปรเจคนะครับ อยากได้ชื่ออื่นก็เปลี่ยนได้เลย

ตอนนี้เราก็จะได้โปรเจคมา 1 ตัวละ ถัดไปก็เข้าไปที่โปรเจคนั้นครับด้วยคำสั่งด้านล่างนี้ (ใครที่เปลี่ยนชื่อโปรเจคก็ใส่ชื่อเป็นชื่อโปรเจคที่ตัวเองตั้งไว้นะ)

cd saladpuk-image-classification

ในตัวอย่างนี้การที่เราจะเรียกใช้ Cognitive Service โดยใช้ Library ที่ Microsoft เขาเตรียมมาให้เราดูบ้างละนะ ดังนั้นเราก็ต้องจะลง library เสริม 2 โดยใช้คำสั่งด้านล่างก็เป็นอันเสร็จสิ้นพิธี

dotnet add package Microsoft.Azure.CognitiveServices.Vision.CustomVision.Training
dotnet add package Microsoft.Azure.CognitiveServices.Vision.CustomVision.Prediction

ทดสอบว่าโปรเจคไม่มีปัญหาอะไรด้วยคำสั่งด้านล่าง

dotnet build

ซึ่งถ้าไม่มีปัญหาอะไรก็น่าจะได้ผลลัพท์ออกมาแบบนี้

Build succeeded.
    0 Warning(s)
    0 Error(s)

คราวนี้ให้เราเปิด Visual Studio Code ขึ้นมา โดยใช้คำสั่ง code . ภายใน command prompt หรือ terminal หรือจะเปิด Visual Studio Code แล้วเปิด folder มาที่ตัวโปรเจคนี้ก็ได้เหมือนกัน

หลังจากที่ Visual Studio Code เปิดขึ้นมาแล้ว ให้ทำการเปิดไฟล์ Program.cs ขึ้นมารอเลยครับ

Visual Studio Code: C# Extension ในตัวอย่างที่เป็นสีสวยงาม เพราะผมลง extension 2 ตัวให้กับ Visual Studio Code นะครับ ถ้าสนใจก็กดติดตั้งได้จากลิงค์ด้านล่างเลย

• C#
• C# Extensions

2.2.เขียนโค้ดติดต่อ Cognitive Services

ตอนนี้ให้เอาโค้ดด้านล่างไปทับใน Program.cs ทั้งหมดเลย ซึ่งเจ้าโค้ดด้านล่างจะเป็นแค่โครงคร่าวๆเท่านั้น

Program.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading;
using Microsoft.Azure.CognitiveServices.Vision.CustomVision.Prediction;
using Microsoft.Azure.CognitiveServices.Vision.CustomVision.Training;
using Microsoft.Azure.CognitiveServices.Vision.CustomVision.Training.Models;

namespace saladpuk_image_classification
{
    class Program
    {
        const string Endpoint = "ENTER_YOUR_ENDPOINT";
        const string TrainingKey = "ENTER_YOUR_TRAINING_KEY";
        const string PredictionKey = "ENTER_YOUR_PREDICTION_KEY";
        const string PredictionResourceId = "ENTER_YOUR_PREDICTION_RESOURCE_ID";

        static void Main(string[] args)
        {
            // เอาโค้ดจากขั้นตอนที่ 3 มาใส่ตรงนี้เบย
        }
    }
}

จากโค้ดด้านบนเราจะต้องเอา Key กับ Endpoint ที่ได้มาจากขั้นตอนที่ 1 เอามาใส่ไว้ในโค้ดของเราในบรรทัดที่ 14-17 เพื่อเตรียมให้เราสามารถเรียก Cognitive Services ได้นั่นเอง ดังนั้นก็ไปเอามาใส่กันเบย

ชื่อ	เอามาจากไหน
Endpoint	ขั้นตอนที่ 1 ที่กดจัดฟันเฟือง
TrainingKey	Key ของ Service ที่เราสร้างเป็น Training
PredictionKey	Key ของ Service ที่เราสร้างเป็น Prediction
PredictionResourceId	Resource Id ของ Service ที่เราสร้างเป็น Prediction

Program.cs

const string Endpoint = "https://southeastasia.api.cognitive.microsoft.com/";
const string TrainingKey = "9307b0e4690f43219a136680e5b59740";
const string PredictionKey = "f8b0f6ce2cda4b7d8cef892b3f3de468";
const string PredictionResourceId = "/subscriptions/c91771fb-def2-45f8-9400-673d59a95640/resourceGroups/saladpuk-demo/providers/Microsoft.CognitiveServices/accounts/saladpuk-prediction";

คำเตือน ถ้าใช้ Key กับ Endpoint จากตัวอย่างของผมมันจะทำงานไม่ได้นะครับ เพราะผมลบของพวกนี้ไปแล้ว ให้ไปสร้างมาเล่นเองนะ

🔥 (3) เขียนโค้ดอัพโหลดรูปลุงทั้งหาย

ในรอบนี้เราก็จะเพิ่มโค้ดเพื่อที่จะทำการอัพโหลดรูปลุงตู่หลายๆรูปขึ้นไป โดยรูปที่ใช้ก็จะราวๆด้านล่างนี้เลย

รูปกลุ่มลุงตู่

รูปกลุ่มลุงแม้ว

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

2MB

Images.zip

archive

รูปลุงๆทั้งหลาย

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

Program.cs

var trainingClient = new CustomVisionTrainingClient()
{
    ApiKey = TrainingKey,
    Endpoint = Endpoint
};

Console.WriteLine("Creating new project:");
var project = trainingClient.CreateProject("Saladpuk demo");

หลังจากที่สร้าง project แล้ว ถัดไปเราก็จะอัพโหลดรูปลุงๆ โดยใช้โค้ดตัวถัดมา

อัพโหลดรูปลุงตู่ก่อน

Program.cs

Console.WriteLine("Uploading Prayut images.");
var prayutTag = trainingClient.CreateTag(project.Id, "Prayut");
var prayutImages = Directory.GetFiles(Path.Combine("Images", "Prayut"));
var prayutFiles = prayutImages.Select(img => new ImageFileCreateEntry(Path.GetFileName(img), File.ReadAllBytes(img))).ToList();
trainingClient.CreateImagesFromFiles(project.Id, new ImageFileCreateBatch(prayutFiles, new List<Guid>() { prayutTag.Id }));
Console.WriteLine("-> Done.");

ถัดมาก็อัพโหลดรูปลุงแม้ว

Program.cs

Console.WriteLine("Uploading Thaksin images.");
var thaksinTag = trainingClient.CreateTag(project.Id, "Thaksin");
var thaksinImages = Directory.GetFiles(Path.Combine("Images", "Thaksin"));
var thaksinFiles = thaksinImages.Select(img => new ImageFileCreateEntry(Path.GetFileName(img), File.ReadAllBytes(img))).ToList();
trainingClient.CreateImagesFromFiles(project.Id, new ImageFileCreateBatch(thaksinFiles, new List<Guid>() { thaksinTag.Id }));
Console.WriteLine("-> Done.");

🔥 (4) สั่งให้ AI รู้จักหน้าของคุณลุงไว้

หลังจากอัพโหลดทุกอย่างเสร็จแล้ว เราก็จะสั่งให้ AI มันทำการเรียนรู้รูปภาพในแต่ละกลุ่ม เพื่อให้ AI สามารถวิเคราะห์ได้ว่ากลุ่มแต่ละกลุ่มมันมีลักษณะเฉพาะตัวยังไงนั่นเอง ดังนั้นเลยเอาโค้ดตัวนี้ไปแปะต่อเลย

Program.cs

Console.WriteLine("Training.");
var iteration = trainingClient.TrainProject(project.Id);
while (iteration.Status == "Training")
{
    Thread.Sleep(1000);
    iteration = trainingClient.GetIteration(project.Id, iteration.Id);
}
Console.WriteLine("-> Done.");

Console.WriteLine("Publishing.");
var publishedName = "GuessWho";
trainingClient.PublishIteration(project.Id, iteration.Id, publishedName, PredictionResourceId);
Console.WriteLine("-> Done.");

🔥 (5) ให้ AI ทายซิว่านี่รูปใครเอ่ย ?

ถัดมาเราก็จะลองเอารูปที่ AI ไม่เคยเห็นมาก่อน ส่งไปถามเจ้า AI ว่ารูปนี้ใครเอ่ย ซึ่งรูปที่ผมจะสั่งไปก็คือรูปด้านล่างนี้

ปายทัศนะศึกษาเล่นซักเดือนมุ๊ย ?

ซึ่งรูปที่จะส่งไปก็อยู่ใน zip ไฟล์ที่ดาวโหลดไปนั่นแหละ Images\Test\Test.jpg ดังนั้นเราก็จะเขียนโค้ดตัวนี้ต่อ

Program.cs

Console.WriteLine("Making a prediction.");
var predictionClient = new CustomVisionPredictionClient()
{
    ApiKey = PredictionKey,
    Endpoint = Endpoint
};
var testImage = new MemoryStream(File.ReadAllBytes(Path.Combine("Images", @"Test\Test.jpg")));
var result = predictionClient.ClassifyImage(project.Id, publishedName, testImage);
foreach (var prediction in result.Predictions)
{
    Console.WriteLine($"-> {prediction.TagName}: {prediction.Probability:P1}");
}
Console.WriteLine("-> Done.");

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

Creating new project:
Uploading Prayut images.
-> Done.
Uploading Prayut images.
-> Done.
Training.
-> Done.
Publishing.
-> Done.
Making a prediction:
-> Prayut: 87.4%
-> Thaksin: 2.7%

จะเห็นว่ารูปที่ส่งไปทายนั้น เจ้า AI บอกว่าใกล้เคียงกับลุงตู่ 87.4% ครับป๋ม

ตัวโปรเจคนี้ถ้าใครขี้เกียจไปนั่งลบมันทุกครั้ง ก็สามารถใส่โค้ดนี้เข้าไปได้นะครับ พอได้ผลลัพท์เสร็จมันจะลบโปรเจคทิ้งให้เลย

Program.cs

Console.WriteLine("Deleting your project.");
trainingClient.UnpublishIteration(project.Id, iteration.Id);
trainingClient.DeleteIteration(project.Id, iteration.Id);
trainingClient.DeleteProject(project.Id);
Console.WriteLine("-> Done.");

🤔 อยากเอา AI ตัวนี้ไปให้คนอื่นเล่นทำไง ?

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

แล้วที่เมนูด้านบนให้เลือก Performance แล้วเมนูด้านล่างเลือก Prediction URL ตามรูปเบย

ภายใน popup ก็จะมีรายละเอียดของการเรียกใช้งาน ดังนั้นเวลาที่เราเรียกใช้ REST API ก็ส่ง header และ request body ไปตามที่อยู่ใน popup ก็จะสามารถเรียกใช้ AI ตัวนี้ได้เลยครัช

🤔 อยากลบโปรเจคทำไง ?

อย่างที่บอกไปว่าถ้าเลือกตัวฟรีเราจะสร้างโปรเจคได้ไม่เกิน 2 ตัวและมีข้อจำกัดอื่นๆด้วย ดังนั้นวิธีการลบโปรเจคคือการเข้าไปที่ตัวเว็บ Custom Vision ตามลิงค์นี้ https://www.customvision.ai แล้วเอาเมาส์ไปแถวๆโปรเจคที่ต้องการจะลบ แล้วกดรูปถังขยะซะก็เสร็จแล้ว

ถ้ากดจากถังขยะแล้วไม่ได้ ให้กดโปรเจคที่ต้องการจะลบตามรูป

เลือกโปรเจคที่ต้องการจะลบ ไม่ใช่จะทำอย่างอื่นจริงๆนะ

ถัดไปที่ด้านบนขวาให้เลือกไปที่เมนู Performance แล้วเมนูด้านล่างเลือก Unpublish แล้วตามด้วย Delete เสร็จแล้วก็จะสามารถกลับไปกดลบที่ถังขยะได้แล้วครัช

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

พอดีเนื้อหาค่อนข้างยาวดังนั้นผมขอยก source code ให้ไปดาวโหลดมาลองเล่นเลยดีกว่าครับ

2MB

saladpuk-image-classification.zip

archive

Source Code: Image classification

🎯 บทสรุป

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

ดังนั้นภาษาอื่นๆก็แค่เรียกไปที่ API ของ Custom Vision ตามลิงค์นี้ ก็จะสามารถทำงานได้เลยครัช Microsoft Cognitive Services API - Custom Vision

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

• Microsoft Cognitive Services API

ลาก่อนครับทุกคน อย่าลืมไปเยี่ยมผมด้วย อ่อผมชอบกินข้าวผัดปูนะ