🎞️ Videos Build Simple AI Agent using Typescript

Description

In this session, I will share the journey of building AI agent using Typescript. The tech stack I use is Next.js, OpenAI API. To be specific, the prompt I use is called ReAct prompting pattern. Speaker LinkedIn: https://www.linkedin.com/in/sarin-suriyakoon-b47978127/ Repository: https://github.com/palo-it-th/PALO-LLM-Playground Download presentation: https://www.palo-it.com/en/events/javascriptbkk2024-3

Chapters

  • แนะนำตัวและเปิดเซสชันเกี่ยวกับ AI Agent ด้วย TypeScript 0:00
  • แนะนำตัววิทยากรและประสบการณ์ทำงาน 0:48
  • แนะนำ PALO IT บริษัทที่ปรึกษาด้านเทคโนโลยี 1:39
  • บริการหลักของ PALO IT และ GitHub Copilot 1:57
  • บริการของ PALO IT: การพัฒนาและปรับปรุงผลิตภัณฑ์ และ DevOps 2:19
  • แรงบันดาลใจและที่มาของเซสชัน: ReAct และ OS Copilot 2:35
  • เป้าหมายในการสร้าง AI ที่ควบคุม Bash Script ได้ 3:01
  • ความสามารถของ AI Agent ตัวนี้: DevOps, Automation, Coding 3:40
  • ตัวอย่างการทำงานของ AI Agent (Demo) 3:51
  • วิธีการใช้งาน Shell Agent และเลือกโหมดการทำงาน 6:33
  • หลักการทำงานของ ReAct และการ Reasoning ก่อน Action 7:08
  • แนะนำ Paper เกี่ยวกับ ReAct และการนำไปใช้งาน 7:46
  • ตัวอย่างโค้ด Python พื้นฐานของ ReAct และ Loop 8 ครั้ง 7:54
  • Observation ใน ReAct: การเรียก Tool หรือ API จริง 8:18
  • สรุปขั้นตอนการทำงานของ ReAct ในรูปแบบ Stack 9:07
  • ตัวอย่าง Prompt พื้นฐานจาก Langchain และการอธิบาย Instruction, Thought, Observation 10:19
  • สาธิตการใช้ GitHub Copilot ในการทำ Prompt Engineering 11:03
  • ตัวอย่างการเขียน Prompt ReAct เพิ่มเติม: AI นักอ่านใจ 12:16
  • แจก Repo สำหรับผู้สนใจทดลองใช้งาน 12:52
  • Implementation: Full Stack Next.js และ 2 API หลัก 13:29
  • การอัปเดต Repo ให้ใช้ Structure Output ของ OpenAI 14:01
  • Prompt Structure ที่เพิ่มเข้ามา: Verification Step by Step 14:32
  • อธิบายขั้นตอนการทำงานหลังเพิ่ม Structure Output และ Verification 15:05
  • การใช้งาน OpenAI SDK และ Message Object 15:31
  • การสร้าง Chatbot ด้วย History และ Context Awareness 16:15
  • ตัวอย่าง Payload หลังใช้ Structure Output และ Verification 16:50
  • System Prompt ที่ใช้จริงและการอธิบาย Thought, Action Type, Action 17:33
  • สรุป 18:09

Transcript

คำบรรยายต่อไปนี้อาจไม่ถูกต้องทั้งหมด หากคุณพบข้อผิดพลาดใดๆ คุณสามารถช่วยแก้ไขข้อผิดพลาดได้บน GitHub

แนะนำตัวและเปิดเซสชันเกี่ยวกับ AI Agent ด้วย TypeScript0:00

สวัสดีครับทุกคน เดี๋ยววันนี้มาเริ่มเซสชัน Build Simple AI Agent using TypeScript นะครับ ในที่นี้มีใครเล่นกับ OpenAI API มาแล้วบ้างฮะ รบกวนยกมือขึ้นนิดนึงฮะ ถ้าใครเล่นมาแล้วครับ ประมาณครึ่งนึงได้ครับ โอเค ถือว่าผ่านครับ ในที่นี้มีใครรู้จัก AI agent บ้างครับ แบบเคยอ่าน หรือว่าเคยผ่านตามาบ้าง

โอเค ไม่เป็นไรครับวันนี้ ไม่มีอะไรยาก AI agent ก็คือเป็น OpenAI API ที่สามารถรับ feedback จาก user ได้แบบอัตโนมัติ ก็คือเขาจะพยายามเรียกพวก AI เนี่ยเป็น agent แทน

แนะนำตัววิทยากรและประสบการณ์ทำงาน0:48

โอเค ก็เดี๋ยวมาเริ่มแนะนำตัวเลยครับ ผมชื่อเล่นว่าปาร์โก้นะครับ ผมก็เป็น Tech Lead แล้วก็เป็นรองหัวหน้า High Master นะครับที่ PALO IT นะครับ

โอเค ก็ผมเป็นใครนะครับ ก็คือผมเชี่ยวชาญด้านการทำ super app นั่นแหละครับ ให้พวกแบงก์ที่มีสีนะครับ แล้วก็พวกประกันที่มีสีแดงนะครับ

ก็เน้นไปแบบระหว่างประเทศอะไรเงี้ยครับ ก็ประเทศเพื่อนบ้านนะครับ แถบใกล้ๆ จีนนะครับ แล้วก็ถ้าใครสนใจมีคำถามหลังจากเซสชันนี้ก็ ติดต่อมาได้ในลิงก์นะครับ DM มาได้ครับ ก็ผมจะทิ้ง QR code ไว้แล้วกันนะครับ ถ้าใครสนใจก็มาติดต่อกันหลังไมค์ได้ครับ อาจจะมีคำถาม

แนะนำ PALO IT บริษัทที่ปรึกษาด้านเทคโนโลยี1:39

โอเค ผมขอแค่ 3 สไลด์เท่านั้นนะในการขายของ PALO IT คือใครนะครับ

ก็คือเป็นบริษัท consultant ที่มีสาขาอยู่ที่ 10 ประเทศทั่วโลกนะครับ มีอยู่ 18 ออฟฟิศนะครับ แล้วก็เป็นที่ปรึกษาด้านเทคโนโลยีเนี่ยแหละครับ แล้วก็ทำพวก digital transformation นะครับ

บริการหลักของ PALO IT และ GitHub Copilot1:57

หลักๆ ตอนนี้นะครับเรากำลังขาย GitHub Copilot ถ้าใครสนใจเอาเข้าองค์กรก็มาติดต่อผมหลังไมค์ได้ครับ

ทุกคนรู้จัก GitHub Copilot ใช่มั้ยฮะ โอเคครับ มีใครใช้แล้วเลิกไปแล้วบ้างครับ

โอเคครับ เลิกไม่ได้ใช่มั้ยฮะ โอเคครับ ดีครับ

บริการของ PALO IT: การพัฒนาและปรับปรุงผลิตภัณฑ์ และ DevOps2:19

ก็เซอร์วิสของเราหลักๆ มี 2 อันนะครับ ก็คือทำโปรดักต์ที่มีอยู่แล้วกับช่วยปรับปรุงโปรดักต์ ที่ถูกคิดขึ้นมาใหม่นะครับ แล้วก็ระดับ organization ก็คือทำพวก DevOps ปรับปรุงพวก pipeline การ release นู่นนี่นั่นนะครับ

แรงบันดาลใจและที่มาของเซสชัน: ReAct และ OS Copilot2:35

โอเค เรามาเข้าเรื่องกันนะครับ ก็ introduction นะครับ ก็ motivation กับ background ของเซสชันนี้แล้วกัน คือผมเนี่ยพยายามศึกษา อ่าน paper แล้วกัน เรื่อง ReAct นะครับ ในที่นี้มีใครเคยได้ยินเรื่อง ReAct บ้างฮะ ที่ไม่ใช่ JavaScript นะฮะ

โอเค ไม่มีเนาะ ก็คือเป็นการเขียน prompt ให้มันสามารถรับ input ใน environment จริงเข้ามาได้เนาะ

เป้าหมายในการสร้าง AI ที่ควบคุม Bash Script ได้3:01

ผมก็สนใจเนาะว่าแบบ ผมจะ automate ทุกอย่างที่อยู่ใน Mac ผมได้ไงเนาะ เป็นความฝันผม แล้วก็อ่าน paper ที่ชื่อว่า OS Copilot นะครับ mobile agent ซึ่งน่าสนใจมากเพราะว่าเขา automate ทุกอย่าง ในมือถือบ้าง ในคอมบ้างนะครับ แล้วก็ผมเองก็เลย ส่วนตัวเนี่ยคือสนใจด้าน DevOps แล้วก็ชอบใช้ Bash script นะครับ ก็เลยคิดว่าจะสร้าง AI ที่มัน execute bash script ได้นะครับ เพราะว่าทุกคนรู้จัก bash script ใช่มั้ยฮะ โอเค ก็คือ bash script นี่มันค่อนข้างเทพเนาะ มันแบบเป็นเหมือนกับ layer พื้นฐานที่สามารถทำได้ทุกอย่าง ผมคิดว่า เอ้ย ถ้า AI มันควบคุม bash script ได้เนี่ย แสดงว่ามันต้องควบคุมทุกอย่างในคอมพิวเตอร์ได้ถูกมั้ยครับ เกือบทุกอย่าง

ความสามารถของ AI Agent ตัวนี้: DevOps, Automation, Coding3:40

โอเค ก็ task นี้เนี่ย AI agent ตัวนี้เนี่ย

ควรที่จะสามารถทำงาน DevOps งาน automation งาน coding ได้นะครับ ก็คือเป็น vision ของผมนะครับ

ตัวอย่างการทำงานของ AI Agent (Demo)3:51

แล้วสิ่งที่ทำออกมาได้นะครับ ก็ถือว่าดีพอสมควรนะครับ เดี๋ยวผมจะให้ดูเดโมประมาณ 50 วินาทีได้ครับ

ก็เริ่มแรกนะครับก็คือ เดี๋ยวผมหยุดให้ก่อน

โอเค ก็เราใส่ instruction สิ่งที่เราอยากได้ลงไปนะครับ สิ่งที่ AI ทำก็คือมันจะรับ instruction ของเราไปนะครับ แล้วก็ค่อยๆ ส่ง bash script ทีละอันมาให้ แล้วผมก็ส่ง bash script นั้นน่ะ ไปให้ backend execute ในคอมผม ทุกคนนึกออกใช่มั้ยครับ เอา bash script ไป execute จริงๆ หลังบ้าน โอเค พี่ตามทันมั้ยครับ โอเค หลังจากได้ execute เสร็จปุ๊บ เอา output กลับไปส่งกลับไปให้ AI generate ขั้นถัดไป เราก็จะได้ bash script ขั้นถัดไป ซึ่งหมายความว่าแต่ละ step เนี่ย เราจะถูกตรวจสอบแล้วว่ามันสามารถทำงานได้ ถ้าเกิดใครลองจินตนาการ workflow ที่เราทำกันอยู่ทุกวันนี้นะครับ ก็คือเราไปที่ ChatGPT ไปที่ Claude นะครับ เราได้คำสั่งเรียงเป็นตับเลย เราก็อปปี้เพสต์แล้วลองๆ รันดู แต่เราไม่รู้ว่าแต่ละ step เนี่ยมันทำงานได้มั้ยบนคอมเรา ไม่ว่าจะเป็น dependency นะครับ ไม่ว่าจะเป็น syntax ไม่ว่าจะเป็นนู่นนี่นั่นนะครับ เราไม่ได้ตรวจสอบทีละ step แล้วเราก็ต้องไปไล่ก๊อปไล่วาง ไล่ก๊อปไล่วางถูกมั้ยครับ แต่ว่าอันนี้ก็คือ ผมพยายามจะทำให้มันยิงทีเดียวครับ แล้วก็ทำทุกอย่างให้ได้สำเร็จ แต่ว่าก็ต้องเชื่อใจ agent ผมนิดนึงนะครับ

ว่ามันสามารถทำงานได้ เดี๋ยวผมจะเอารีโพให้ดูตอนท้ายครับ

โอเค ก็ task นี้คือ set up local backend นะครับ จินตนาการดูว่าลูกค้าอยากได้ POC พรุ่งนี้นะครับ หรือว่า frontend อยากได้ POC พรุ่งนี้ เราก็สามารถซัดไปเลยครับ ให้ตัวนี้ทำงานให้ได้ เสร็จภายใน 1 นาทีครับ ลองคิดดูว่าเราจะสามารถแข่งกับ AI แบบนี้ได้มั้ยนะครับ

โอเค ตอนนี้ก็อยู่ที่ step ที่ 5 แล้วฮะ โอเค ก็จะเห็นว่ามันทำงานเสร็จแล้ว มันก็จะมีการเช็กนะครับ ก็ในรีโพตัวนี้ก็จะมีแบบ show status show diagram นู่นนี่นั่นนะครับ เพื่อเข้าใจการทำงานของมัน โอเค พอ task complete นะครับ เราก็จะมีแบบมี log อะไรให้ดูในรีโพนี้นะครับ แต่ว่าที่สำคัญคือเดี๋ยวจะมีโชว์ให้ดูว่า API ตัวนี้ มันรันบน local แล้วจริงๆ นะครับ

โอเคใกล้จบแล้วทุกคนครับ

API product มาแล้วครับ

ภายใน 1 นาทีนะครับ

วิธีการใช้งาน Shell Agent และเลือกโหมดการทำงาน6:33

เราไปดูรายละเอียดกันนะครับ

เดี๋ยวผมจะอธิบายคร่าวๆ แล้วกันนะครับวิธีการทำงานของมัน เราไปที่ shell agent นะครับแล้วก็ใส่ instruction แล้วก็มีให้เลือก 2 โหมดนะครับ ว่าจะเป็นโหมด run step by step คือเราอยากอ่านคำสั่งก่อน แล้วค่อย run หรือว่าเราอยาก run แบบ auto ไปเลย เมื่อตะกี้คือแบบ auto ผมแนะนำถ้าเกิดใครโหลด repo ไปเล่นแล้วเนี่ย ก็ลองแบบ step by step ก่อนนะครับ แบบสร้างความเชื่อใจกันก่อนฮะ คิดซะว่าเป็น junior ในทีมครับ

หลักการทำงานของ ReAct และการ Reasoning ก่อน Action7:08

ขออนุญาตอธิบายหลักการ react คร่าวๆ นะครับว่ามันทำงานยังไง ก่อนหน้านี้เนี่ยการใช้ LLM เนี่ยก็คือ มันจะเริ่มจากคำสั่งแล้วไป action เลยนะครับ แล้วรับ feedback แล้วก็ไป action ถัดไปเลย แต่ว่าในยุคก่อน GPT แล้วกัน แชท GPT ก็มีงานวิจัยนึงออกมาบอกว่า ถ้าเกิดเราให้มัน reasoning ก่อนเนี่ย มันจะทำงานได้ดีขึ้นเป็นอย่างมากนะครับ เราก็เลยมีการ reasoning ก่อนแล้วค่อยตามด้วย action นะครับ เพื่อเพิ่ม accuracy ของการทำงานมัน อันนี้ก็คือเป็น classic paper ที่ทุกคนแตกหน่อไปทำงานวิจัยต่อนะครับ

แนะนำ Paper เกี่ยวกับ ReAct และการนำไปใช้งาน7:46

แนะนำให้ไปอ่านดูได้นะครับ

แล้วก็มาอ่าน implementation ที่สไลด์ผมได้นะครับ

ตัวอย่างโค้ด Python พื้นฐานของ ReAct และ Loop 8 ครั้ง7:54

เรามาดู paper พื้นฐานก่อน โค้ดพื้นฐาน อันนี้คือเป็นโค้ด python นะครับ ทุกคนเคยเขียน python มาใช่มั้ยครับ หลักๆ เนี่ยจะเห็นสิ่งที่สังเกตอย่างแรกคือจะมี loop ครับ

มี loop ด้านบน for loop ครับ จะวน loop ได้ 8 ครั้งครับ ก็คือ original paper เนี่ยให้โอกาส 8 ครั้งในการทำงาน 8 step ไปเรื่อยๆ นะครับ

Observation ใน ReAct: การเรียก Tool หรือ API จริง8:18

สิ่งที่ต้องสังเกตก็คือบรรทัดที่นี่ครับ observation observation ก็คือเราได้ action มาใช่มั้ยครับ แล้วเราก็ได้ observation มาครับ observation เนี่ยคือเกิดจากการเรียก tool หรือเรียก API จริงๆ แล้วก็เอาผลลัพธ์เนี่ยมาประกอบตรงนี้ฮะ พอประกอบตรงนี้เนี่ยด้วยความที่เป็น text completion นะครับ เขาใส่ตัวอย่างให้เราว่าถ้าเกิดมี thought เนี่ย ซึ่งก็คือการ reasoning action มี observation เสร็จปุ๊บสิ่งที่จะตามมาคือ thought ของ step ถัดไป ด้วยความที่ยุคสมัยมันเป็นยุคก่อนแชท GPT เนาะ มันก็เลยไม่ได้ออกมาเป็นแชท มันจะออกมาเป็น text completion มันก็เหมือนกับการต่อคำ ถ้าเกิด observation จบมันก็คือ thought เลขถัดไปนั่นเองครับ ก็หลักการมีแค่นี้เลยครับ แต่ว่าสิ่งที่ผมใส่เพิ่มไปเนี่ย เดี๋ยวจะมาอธิบายว่าใส่ไรเพิ่มเข้าไปจาก original paper นะครับ

สรุปขั้นตอนการทำงานของ ReAct ในรูปแบบ Stack9:07

ก็บทสรุปของ react แล้วกัน ผมใส่มาเป็น stack งี้เพื่อให้เข้าใจในยุคของแชท GPT แล้วกันครับ หมายความว่าในช่องที่เป็น user นะครับ เราจะใส่ instruction เข้ามาใช่มั้ยครับ แล้ว AI ก็จะ generate thought กับ action ออกมา แล้วทีนี้ user ก็ตอบกลับไปด้วย observation ทีนี้ API มันก็จะเข้าใจแล้วว่าคือยังไงครับ

ถึงตรงนี้มีใครมีคำถามเลยมั้ยครับ เชิญครับ

thought เนี่ยคือการ reasoning ครับ หมายความว่าจากที่เขาหามาคือพอมีคำว่า thought เนี่ย มันจะรู้เลยว่ามันต้องทำยังไง คือผมเขียนคำอธิบายไปด้วยแหละใน original paper มันก็จะมีคำอธิบายว่า thought คืออะไร เดี๋ยวเราจะมาเห็นกันใน prompt ว่าผมอธิบายว่า thought คืออะไร มันก็จะ generate ออกมาว่า เอ้ย ควร reasoning นะว่าสิ่งที่ได้รับก่อนหน้านี้คืออะไร แล้ว step ถัดไปควรจะเป็นยังไง action ก็คือจริงๆ generate มาเป็น shot เดียวกันนะครับ ก็คือ thought เสร็จ action ครับ

อธิบายไว้หมดแล้วว่าใน system prompt ว่า thought คืออะไร action คืออะไร instruction คืออะไรครับ

ตัวอย่าง Prompt พื้นฐานจาก Langchain และการอธิบาย Instruction, Thought, Observation10:19

จริงๆ มี example ให้ดูไวๆ ครับ

แต่ว่าผมทำให้ดูเลยแล้วกันฮะ

อันนี้ก็คือ prompt พื้นฐานนะครับ คือไม่ใช่ prompt ที่ผมใช้จริงๆ แต่ว่าเป็นไอเดีย prompt แรกเลยที่เอามาจาก langchain นะครับ จะเห็นได้ว่าผมอธิบายว่า instruction คืออะไร thought คืออะไร observation คืออะไรนะครับ

สาธิตการใช้ GitHub Copilot ในการทำ Prompt Engineering11:03

แล้วก็ด้วยอิทธิฤทธิ์ของ GitHub Copilot นะครับ ผมขอทดลองอะไรให้ดูบางอย่าง

ข้อดีของ GitHub นะครับ GitHub Copilot ก็คือ เราทำ prompt engineering ได้ไวครับ สามารถ generate example ได้ไวครับ มาดูอภินิหารกันนะครับ

จะดูว่า prompt ที่เราเขียนมาเนี่ย ผลลัพธ์เราเป็นไง จับมาใส่ในนี่นะฮะ

เห็นภาพไหมครับ

ตัวอย่างการเขียน Prompt ReAct เพิ่มเติม: AI นักอ่านใจ12:16

โอเค ตัวอย่างการเขียน prompt ReAct เพิ่มเติมนะครับ เดี๋ยวผมเปิดให้ดู

สมมุติว่าเราอยากทำ AI agent ที่เป็นนักอ่านใจนะฮะ

โอเค เราก็จะบอกว่าให้ลองเดาตัวเลขขึ้นมานะครับว่า ตัวเลขที่ user คิดอยู่คืออะไรนะครับ thought ก็คือ you always think about what to do อันนี้คือเหมือนมันเข้าใจนะครับว่าเราหมายถึงอะไรนะครับ ถ้าเกิดใครเอาไปลองที่บ้านได้ครับ action นะครับก็คือ question you would like to ask ตัวอย่างมันก็จะแบบลองไปเล่นได้ครับที่บ้าน

แจก Repo สำหรับผู้สนใจทดลองใช้งาน12:52

เดี๋ยวผมแจก repo เลยแล้วกันฮะ เตรียมถ่ายรูปครับ

เข้าไปที่ repo นี้นะครับ download setup OpenAI API key นะครับ แล้วก็เข้าไปที่ shell agent ฮะ ก็เป็น Next.js นะครับ เป็น stack ธรรมดานะครับ ทุกคนรู้จัก Next.js ใช่มั้ยฮะ โอเค npm install เป็นกันทุกคนนะครับ โอเค ครับ ขอบคุณครับ เยี่ยมมาก

Implementation: Full Stack Next.js และ 2 API หลัก13:29

โอเค ต่อเลย

implementation นะครับผมทำไงนะครับ ก็คือใช้ full stack Next.js นั่นเองครับ จะมีอยู่ 2 API ครับ API ที่เรียกว่า run OpenAI กับ run bash นะครับ run OpenAI ก็คือส่งไป run ทุกอย่างไป run OpenAI เนี่ยแหละครับ run bash ก็คือ API ที่ผมจะโยน bash script เข้าไปให้ backend run นะครับมีแค่ 2 อย่าง ส่วน frontend ก็คือมีหน้าที่จัดการ state ทั้งหมด รับ OpenAI output จัดไปให้ bash script นะครับ

การอัปเดต Repo ให้ใช้ Structure Output ของ OpenAI14:01

เมื่อ 2 เดือนที่ผ่านมาผมก็อัพเดตตัว repo นี้นะครับ ให้ใช้ structure output ของตัว OpenAI ใครๆ ได้ข่าวเรื่อง structure output ของ OpenAI บ้างฮะ โอเค ข่าวไม่ดังเนาะ เอาเป็นว่าผมใช้ structure output จริงๆ ฮะ เพื่อที่จะไม่ต้องมาตัด string เองนะครับ เพราะถ้าดูจากใน original paper เนี่ย คือเค้าทำการตัด string concatenate อะไรเองหมด ผมก็เลยใช้ structure output นะครับ ผลลัพธ์ที่ได้คือพอเป็น structure output performance ต่ำลงนิดหน่อยนะครับ แต่ว่าเขียนโค้ดง่าย

Prompt Structure ที่เพิ่มเข้ามา: Verification Step by Step14:32

โอเค มาดู prompt structure จริงๆ ของผมกันบ้างครับ สิ่งที่ผมใส่เพิ่มมาจาก ReAct นะครับ ผมรวมกับ paper ที่ชื่อว่า verification step by step นะครับ ชื่อว่า let's verify step by step นะครับ หมายความว่าผมบอกใน prompt ไว้แหละว่า หลังจากที่ทำงานเสร็จนะครับ หลังจากที่ generate bash script ออกมาเนี่ย ให้ generate bash script อีกอันนึง ที่ไว้ตรวจสอบงานที่ทำด้วย มันก็จะเป็น alternate กันไปครับว่า เป็น execute เป็น validate execute validate นะครับ อันนี้คือสิ่งที่ผมใส่เข้าไปเพิ่มนะครับ ไปดูตัวอย่างการ implement ได้ในโค้ดครับ

อธิบายขั้นตอนการทำงานหลังเพิ่ม Structure Output และ Verification15:05

อันนี้คืออธิบายเพิ่มเติมนะครับ structure ที่ผมใส่เข้าไปนะครับก็คือ user เนี่ยก็จะพิมพ์ instruction เข้ามา ผมก็ส่งไปเรียก OpenAI นะครับ แล้วก็ extract ตัว thought ออกมา มันจะ output ออกมาเป็น JSON นะฮะ ก็เอา thought ออกมา เอา action ออกมา เอา action ไป run bash แล้วก็เก็บ observation นะครับ ก็หลักการคล้ายๆ กันนะครับจากที่พูดถึงเมื่อกี้

การใช้งาน OpenAI SDK และ Message Object15:31

สำหรับใครที่ยังไม่เคยใช้ OpenAI SDK นะครับ

ดูอันนี้สักครู่นึง อันนี้ก็คือเป็นบทสนทนาธรรมดานะครับเหมือนกับแชททั่วไป ผมก็แค่จะโชว์ให้ดูว่าตัว message object ที่เราส่งไปให้ OpenAI จริงๆ แล้วเนี่ย มันหน้าตาเป็นไงนะฮะ ผมจะพยายามเลื่อนให้ พอเห็นมั้ยฮะ

จะเห็นว่ามันจะมี role นะครับกับ content สลับไปมานะครับ role เป็น user กับ role เป็น assistant นะครับ role เป็น user เนี่ยก็คือสิ่งที่ user input เข้าไป ส่วน OpenAI เนี่ยก็จะตอบกลับมาเป็น assistant ที่มี content แล้วเราก็มา concatenate กันบน frontend

การสร้าง Chatbot ด้วย History และ Context Awareness16:15

แล้วพอเราต้องการทำเป็น chatbot นะครับ เราก็เอา history ทั้งหมดเนี่ย ทั้ง user ทั้ง assistant ที่ตอบก่อนหน้าเนี่ย แล้วเราก็ใส่ user อันล่าสุดกลับไปนะครับ แล้วตัว OpenAI ก็จะตอบ assistant กลับมา มันก็จะมี context awareness นะครับ ตรงนี้ทุกคนเข้าใจมั้ยครับ ใครมีคำถามถึงตรงนี้ยกมือขึ้นฮะ

โอเค สุดยอดฮะ

ตัวอย่าง Payload หลังใช้ Structure Output และ Verification16:50

อันนี้จะให้ดูตัวอย่างว่า หลังจากที่ใช้ structure output กับ ReAct บวกกับ verification step by step เนี่ย หน้าตามันจะเป็นไงนะครับ

ก็จะดูคล้ายๆ ของเดิมนะครับ

แล้วก็ตัว payload หน้าตาเป็นไงนะครับ

ก็ใช้ structure output ก็จะได้มาเป็น JSON นะครับ ส่วน observation เนี่ยถ้าเกิดมี บางที bash script มันไม่มี output เนาะ ถ้ามีก็คือมันจะมีอะไรมาต่อตรงนี้ แต่ถ้าไม่มีก็คือจะเป็น no output ไปฮะ อันนี้ผม hard code ไว้ถ้าไม่มี output อะไรออกมา ก็ส่งกลับไปกลับมาอย่างงี้นะครับ ก็จะได้ agent ที่เราต้องการครับ

System Prompt ที่ใช้จริงและการอธิบาย Thought, Action Type, Action17:33

ถัดไปฮะ โอเค เดี๋ยวผมจะโชว์ system prompt ให้ดูนะฮะ

โอเค ไหวๆ ฮะ ยาวจัดฮะ

ก็จะมีอธิบายไว้ว่า thought คืออะไรนะครับ action type คืออะไรนะครับ เพราะผมมี execution กับ validate แล้วก็ action ก็คือจะระบุแบบใส่รายละเอียดไว้ว่า ต้องการให้ generate bash script ออกมาเป็นไง handle เคสนู้นเคสนี้ยังไงนะฮะ

สรุป18:09

โอเค จบแล้วครับ ไม่มี quick demo ครับ ใครมีคำถามครับขอให้ยกมือขึ้นครับ ผมมีเวลา 3 นาทีฮะ

โอเค ไม่ถาม ไม่ถามใช่มั้ยฮะ

โอเค ก็อีกครั้งนะครับขอฝาก GitHub Copilot ไว้ครับ

แล้วก็ใครต้องการ presentation นี้ครับ สแกนดาวน์โหลดไปได้เลยฮะ แจกฟรีนะครับไม่มีค่าใช้จ่าย

โอเค ไม่มีคำถามใช่มั้ยครับ เสื้อฟ้า ไม่มี โอเคฮะ จบแล้วครับทุกคน ขอขอบคุณครับ สวัสดีครับ