น้องรัก นักแต่งนิทาน - สร้าง AI แต่งนิทานด้วย Azure OpenAI

สวัสดีฮะทุกท่าน! ยินดีต้อนรับเข้าสู่ Job/og นะครับ!~

นี่ก็เป็นบทความแรกบนเว็บบล็อคอันแรกของผมเลยนะฮะ 🎉

OpenAI คืออะไร?

ผมว่าเราอยู่ในยุคที่ ถ้าพูดถึง ChatGPT ก็คงไม่มีใครไม่รู้จักแล้วแหละ แต่กับ OpenAI นี่คืออะไร?

เอาสั้น ๆ ง่าย ๆ เลย OpenAI ก็คือองค์กรวิจัยที่พัฒนา AI ที่เป็นปัญญาประดิษฐ์ โดยเปิดให้ทุกคนใช้งานได้ฟรี และก็เป็นผู้สร้าง ChatGPT Chatbot สุดแสนอัจฉริยะ, DALL-E AI สำหรับสร้างสรรค์ผลงานภาพ (อย่างรูปน้องใน Cover ก็สร้างจาก DALL-E นะ!)

GPT! Tell me the story!

ทีนี้ก็มาเรื่องของเรา … GPT! Tell me the story คืออะไร?

จริง ๆ แล้ว GPT! Tell me the story คือ ผลงานส่วนตัวของผมเองแหละ (ไปลองเล่นกันได้นะครับ แต่ว่าเตรียม Endpoint กับ Key ของ Azure OpenAI กันไปเองนะครับ 🥲)

เชื่อว่าบางท่านอาจเคยได้เห็นมันมาก่อน ตามงาน Community event ต่าง ๆ ที่ผมไปพูด หรือคุณอาจลูกค้าของผมที่ผมเคยเปิดโชว์ให้ดู โปรเจคนี้สร้างเพื่อทำความเข้าใจมากขึ้นเกี่ยวกับการนำ Generative AI อย่าง OpenAI เข้ามาใช้มันเป็นยังไง ใช้ยากไหม ด้วยความที่ว่าหน้าที่การงานเราต้อง consult ลูกค้า การใช้งานจริงเลยเป็นเรื่องนึงที่ต้องมีด้วย

โปรเจคนี้เป็นเว็บที่จะใช้ GPT-3.5 model ของ Azure OpenAI ในการช่วยแต่งนิทาน โดยเล่าแค่ใส่คำบรีฟเล็ก ๆ น้อย ๆ นิทานที่เราอยากฟังเท่านั้นเอง เช่น ถ้าอยากได้นิทานที่เกี่ยวกับลูกหมู และแมวน้ำที่มีสีชมพู เราก็อาจจะใส่ว่า “ลูกหมู 3 ตัวกับแมวน้ำใจร้ายสีชมพู” หลังจากนั้นน้อน GPT! Tell me the story (ชื่อมันยาวแหะ…เดี๋ยวไว้ตั้งชื่อให้ใหม่) ก็จะแต่งนิทานที่ไม่เหมือนใคร และไม่เคยมีใครมีออกมาให้

และด้วยความที่ว่า GPT เนี่ยมันเป็น LLM มันเลยมีความสามารถที่จะเข้าใจทุกภาษาเลย แปลว่าเราก็สามารถที่จะ input เป็นภาษาอะไรก็ได้ หรือบอกกับน้องเพิ่มก็ได้ว่าเราอยากให้ output เป็นภาษาอะไร และน้องก็จะแต่งนิทานให้เราเป็นภาษานั้น ๆ ออกมาเลย

ทำไมต้องเป็นนักแต่งนิทาน?

Azure OpenAI ? มันต่างกับ OpenAI อย่างไร?

ในบทความเราเขียนไว้ว่าเจ้า GPT! Tell me the story ของเรานั้นใช้ Azure OpenAI แล้วที่นี้มันต่างกับ OpenAI ไหม? มันต่างกันอย่างไร?

GPT! Tell me the story ทำงานยังไง?

เราก็ได้ทราบแล้วว่า Azure OpenAI กับ OpenAI ไม่ได้แตกต่างกันในการใช้งาน แต่ว่าจะต่างกันแค่ใน layer ของ security, Enterprise-ready, และความง่ายต่อการต่อกับ Azure รวมไปถึงสำหรับใครที่ใช้งาน Azure อยู่แล้ว Azure OpenAI จะ billing ไปรวมกับ Azure Subscription ได้เลย

ปล.จริง ๆ แล้วเหตุผลที่เราใช้ Azure OpenAI ก็เพราะว่า…เราทำงานที่ Microsoft และ Azure เป็น product ที่เราต้องดูแล 😬

อีกอย่างที่สำคัญคือ … เราใช้ฟรีสำหรับการเรียนรู้และ PoC (Proof of Concept)

---

กลับมาที่ว่า GPT! Tell me the story เรานั้นมันไปต่อกับ Azure OpenAI ยังไง

Services ที่ใช้ในครั้งนี้เราใช้แบบโคตร simple ไปเลย

เริ่มจาก เราสร้างเว็บด้วย React กับ styling Tailwind ง่าย ๆ แล้วก็ host ไว้บน Azure Static Web App (SWA) ซึ่งเป็น service ที่ให้เราสร้างเว็บแล้ว deploy ได้โดยไม่ต้องมี server อะไรเลย แถมต่อตรงเข้ากับ GitHub ใช้ GitHub Actions ในการ build และ deploy ได้เลย

ถัดมาเราก็มี Azure Functions ที่เป็น serverless function ที่เราสร้างขึ้นมาเพื่อใช้เป็น proxy ในการเรียกใช้งาน(แค่บางอย่าง) Azure OpenAI … แต่ตอนนี้ปิดไว้ก่อน เพราะว่าเรายังไม่เสร็จดี อิ_อิ

และสุดท้ายพระเอกของเรา ถ้าไม่มีเขาก็ใช้ไม่ได้ล่ะ Azure OpenAI กับ completion endpoint ของ model GPT-3.5 turbo

แล้วก็ Azure AI Speech gimmick เล็ก ๆ น้อย สำหรับทำให้น้อนของเราสามารถ ฟังที่เราพูดแล้วแปลเป็นข้อความได้ (Speech-to-text) และ อ่านข้อความให้เราได้ (Text-to-speech)

สรุป Services ที่ใช้

• Azure Static Web App
• Azure Functions
• Azure OpenAI
• Azure AI Speech

เราก็สร้าง resource Azure OpenAI ตรง ๆ ผ่าน Azure Portal ไว้ก่อน แล้วก็เอา API Key และ Endpoint มาใส่ใน GPT! Tell me the story ได้เลย

แล้วก็ลองเล่นใน Playground บน Azure OpenAI Studio ได้เลย

หลังจากนั้นเราก็กลับมาลุยกันต่อที่โค้ดของเรา

จริง ๆ แล้ว Azure OpenAI นี่มีให้เราเรียกใช้งานมันผ่านได้ทั้ง SDK และ REST API เลย SDK เองก็ support ตั้งหลายภาษาตั้งแต่ C#, Go, Java, JavaScript, Python, ยัน PowerShell ดูตัวอย่างได้ที่นี่

แต่ตอนนั้นที่เริ่มทำโปรเจคนี้ service มันออกมาค่อนข้างใหม่มาก SDK ยังไม่พร้อมเราเลยเลือกใช้เป็น REST API

ในการใช้ REST API ก็ง่ายตรงไปตรงมาเหมือนกับที่เราใช้ REST ทั่ว ๆ ไป ก็จะมี Endpoint กับ Body

ในส่วนของ Body หลัก ๆ เราจะใช้แค่

• System Prompt: เหมือนเป็น Brief ให้กับ GPT รู้ว่า แกเป็นใคร มาทำอะไร ทำอะไรได้บ้าง ขอจำกัดคืออะไร
  • เช่น “คุณเป็นนักแต่งนิทาน ที่เน้นเนื้อเรื่องสร้างสรรค์สำหรับเด็ก ๆ”
• User Prompt: เป็น input เนื้อหานิทานที่เราอยากได้นั่นเอง
  • เช่น “แมวน้ำน้อยสีเขียวไม่แปรงฟัน”

แล้วยัดใส่ Array ตัวอย่างข้างล่าง แล้วยิง POST ตุ้มไปได้เลย

และนี่คือตัวอย่าง Response

{
    "id": "chatcmpl-8aNUHrBLljam0h8wop64nK4Q3pUD7",
    "object": "chat.completion",
    "created": 1703680785,
    "model": "gpt-35-turbo",
    "choices": [
        {
            "finish_reason": "stop",
            "index": 0,
            "message": {
                "role": "assistant",
                "content": "เดิมทีมีแมวน้ำน้อยสีเขียว มีลักษณะคล้ายแมวน้ำตัวอื่นๆ แต่จุดเด่นคือไม่ได้มีฟัน เพราะว่าอยู่ในระดับพันธุ์พิเศษของแมวน้ำ และพวกเขาสามารถดูแลตัวเองได้ดีมากเนื่องจากเป็นสัตว์ที่เป็นเพียงน้องแมวเล็กๆเท่านั้น นอกจากนี้ เจ้าแมวน้อยสีเขียวยังมีความสามารถพิเศษอย่างหนึ่งคือ สามารถว่ายน้ำและตกปลาเอามากินได้ดี ซึ่งเป็นเรื่องที่แปลกตาให้กับพวกเขาเพราะมีพันธุ์อื่นที่กินเพียงแมลงที่มีในแม่น้ำเท่านั้น ถ้าหากคุณได้เห็นเจ้าแมวน้อยสีเขียวในน้ำ อย่าลืมสวยงาม ใส่ใจ และไม่น่าจะทำร้ายกับเจ้าตัวน้อยสีเขียวที่น่ารักนี้แน่นอนค่ะ"
            }
        }
    ],
    "usage": {
        "prompt_tokens": 137,
        "completion_tokens": 470,
        "total_tokens": 607
    }
}

เท่านี้น้อน GPT! Tell me the story ก็จะสามารถทำงานได้แล้วฮะ!~ 🎉

สรุป

ทั้งนี้ทั้งนั้น config ต่าง ๆ ที่ใช้อาจจะยังไม่ได้ optimize แต่ว่าอย่างน้อย เราก็ได้เรียนรู้ว่าถ้าจะทำ completion endpoint กับ OpenAI จะเป็นอย่างไร

หวังว่าทุกคนจะได้รับประโยชน์จากบทความแรกของผมนี้ ไม่มากก็น้อย และหากมีข้อผิดพลาดประการใด ก็ขออภัยมา ณ ที่นี้ด้วยนะฮะ

สุดท้ายแล้วขอฝาก Repo ไว้กับทุกท่านได้ลองไปดู ลอง contribute เปิด PR กันมาได้นะครับ และขอฝาก Job/og ไว้กับทุก ๆ ท่านด้วยนะฮะ และเจอกันใหม่ในบทความหน้า 🙏

ปล. ถ้าท่านใดอยากสนับสนุนค่ากาแฟสามารถคลิกที่ Become a sponsor ได้เลยนะฮะ 😬