การสร้างตัวแทนใช้งานคอมพิวเตอร์ (CUA)
ตัวแทนใช้งานคอมพิวเตอร์สามารถโต้ตอบกับเว็บไซต์เหมือนกับที่มนุษย์ทำได้: โดยการเปิดเบราว์เซอร์ ตรวจสอบหน้าเว็บ และดำเนินการต่อไปในสิ่งที่เห็น ในบทเรียนนี้ คุณจะสร้างตัวแทนอัตโนมัติเบราว์เซอร์ที่ค้นหา Airbnb ดึงข้อมูลโครงสร้างประกาศ และระบุที่พักราคาถูกที่สุดในสตอกโฮล์ม
บทเรียนนี้ผสมผสานการใช้ Browser-Use เพื่อการนำทางด้วย AI, Playwright และ Chrome DevTools Protocol (CDP) สำหรับควบคุมเบราว์เซอร์, Azure OpenAI สำหรับการคิดด้วยภาพ และ Pydantic สำหรับการดึงข้อมูลโครงสร้าง
บทนำ
บทเรียนนี้จะครอบคลุม:
- การเข้าใจว่าเมื่อใดควรใช้ตัวแทนใช้งานคอมพิวเตอร์แทนการทำงานอัตโนมัติแบบใช้ API เท่านั้น
- การรวม Browser-Use กับ Playwright และ CDP สำหรับการจัดการวงจรชีวิตเบราว์เซอร์ที่เชื่อถือได้
- การใช้ Azure OpenAI ด้วยการมองเห็นและผลลัพธ์โครงสร้างจาก Pydantic เพื่อดึงข้อมูลรายการจากเว็บไดนามิก
- การตัดสินใจใช้กระบวนการอัตโนมัติแบบตัวแทน-นำ, ผู้แสดง-นำ หรือแบบผสมผสาน
เป้าหมายการเรียนรู้
หลังจากทำบทเรียนนี้เสร็จ คุณจะรู้วิธี:
- ตั้งค่า Browser-Use กับ Azure OpenAI และ Playwright
- สร้างกระบวนการอัตโนมัติเบราว์เซอร์ที่นำทางเว็บไซต์จริงและจัดการกับองค์ประกอบ UI ที่เปลี่ยนแปลงได้
- ดึงผลลัพธ์ประเภทจากเนื้อหาที่มองเห็นบนหน้าและแปลงเป็นตรรกะธุรกิจขั้นต่อไป
- เลือกระหว่างแบบแผนตัวแทนและผู้แสดงตามความสามารถทำนายของงานเบราว์เซอร์
ตัวอย่างโค้ด
บทเรียนนี้มีสมุดบันทึกหนึ่งชุดสอน:
- 15-browser-user.ipynb: เปิดเซสชัน Chrome ผ่าน CDP, ค้นหารายการ Airbnb ในสตอกโฮล์ม, ดึงราคาด้วยวิสัยทัศน์ Browser-Use และคืนตัวเลือกที่ถูกที่สุดในรูปแบบข้อมูลโครงสร้าง
สิ่งที่ต้องมี
- Python 3.12+
- ตั้งค่า Azure OpenAI deployment ในสภาพแวดล้อมของคุณแล้ว
- ติดตั้ง Chrome หรือ Chromium บนเครื่อง
- ติดตั้ง dependencies ของ Playwright
- คุ้นเคยพื้นฐานกับ Python แบบ async
การตั้งค่า
ติดตั้งแพ็กเกจที่ใช้ในสมุดบันทึก:
pip install browser_use playwright python-dotenv
playwright install chromium
ตั้งค่าตัวแปรสภาพแวดล้อม Azure OpenAI ที่ใช้โดยสมุดบันทึก:
AZURE_OPENAI_ENDPOINT=...
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=...
# ตัวเลือก: ค่าเริ่มต้นเป็นเวอร์ชัน API ล่าสุดเมื่อไม่ได้ระบุ
AZURE_OPENAI_API_VERSION=...
ภาพรวมสถาปัตยกรรม
สมุดบันทึกนี้แสดงกระบวนการอัตโนมัติเบราว์เซอร์แบบไฮบริด:
- Chrome เริ่มต้นด้วย CDP เปิดใช้งานเพื่อให้ Playwright และ Browser-Use ใช้เซสชันเบราว์เซอร์เดียวกัน
- ตัวแทน Browser-Use รับผิดชอบงานนำทางแบบเปิด เช่น เปิด Airbnb, ปิดหน้าต่างป็อปอัป และค้นหาสตอกโฮล์ม
- ตรวจสอบหน้าที่ใช้งานด้วยสคีมา Pydantic ที่มีโครงสร้างเพื่อดึงชื่อประกาศ, ราคาต่อคืน, คะแนน, และ URL
- ตรรกะ Python เปรียบเทียบรายการที่ดึงมาและเน้นผลลัพธ์ที่ถูกที่สุด
แนวทางนี้คงไว้ซึ่งเหตุผลด้วยการมองเห็นที่ยืดหยุ่นซึ่ง Browser-Use ทำได้ดี ในขณะเดียวกันก็ให้คุณควบคุมเบราว์เซอร์อย่างกำหนดได้เมื่อจำเป็น
ประเด็นสำคัญและแนวทางปฏิบัติที่ดีที่สุด
เมื่อใดควรใช้ Agent หรือ Actor
| สถานการณ์ |
ใช้ Agent |
ใช้ Actor |
| รูปแบบไดนามิก |
ใช่, AI ปรับตัวตามการเปลี่ยนแปลงหน้าได้ |
ไม่, ตัวเลือกเปราะบางอาจพัง |
| โครงสร้างที่รู้จัก |
ไม่, agent ช้ากว่าควบคุมโดยตรง |
ใช่, รวดเร็วและแม่นยำ |
| ค้นหาองค์ประกอบ |
ใช่, ภาษาแบบธรรมชาติทำงานได้ดี |
ไม่, ต้องใช้ตัวเลือกที่แม่นยำ |
| การควบคุมเวลา |
ไม่, น้อยกว่าความคาดหมาย |
ใช่, ควบคุมเต็มที่ทั้งรอและลองใหม่ |
| กระบวนการซับซ้อน |
ใช่, จัดการสถานะ UI ที่ไม่คาดคิด |
ไม่, ต้องการการแตกแขนงชัดเจน |
แนวทางปฏิบัติที่ดีที่สุดสำหรับ Browser-Use
- เริ่มด้วย agent สำหรับการสำรวจและนำทางแบบไดนามิก
- สลับไปควบคุมหน้าโดยตรงเมื่อปฏิสัมพันธ์เป็นไปอย่างคาดการณ์ได้
- ใช้โมเดลผลลัพธ์ที่มีโครงสร้างเพื่อให้ข้อมูลดึงมาถูกต้องและปลอดภัยตามประเภท
- เพิ่มดีเลย์อย่างมีกลยุทธ์หลังทำกิจกรรมที่ก่อให้เกิดการเปลี่ยนแปลง UI ที่มองเห็นได้
- บันทึกภาพหน้าจอในขณะทำซ้ำเพื่อให้การแก้ไขปัญหาระหว่างล้มเหลวง่ายขึ้น
- คาดหวังว่าเว็บไซต์จะเปลี่ยนแปลงและวางแผนสำรองสำหรับป็อปอัปและการเลื่อนเค้าโครง
- ผสมผสานแบบแผน agent และ actor เพื่อความยืดหยุ่นและความแม่นยำ
แนวทางความปลอดภัยสำหรับตัวแทนเบราว์เซอร์
ตัวแทนเบราว์เซอร์ทำงานบนเว็บไซต์จริง ดังนั้นต้องมีข้อจำกัดเข้มงวดกว่าสคริปต์ที่เรียกใช้ API ที่รู้จักเท่านั้น ก่อนที่จะย้ายจากเดโมสมุดบันทึกมาเป็นเวิร์กโฟลว์จริง ให้กำหนดการควบคุมว่าตัวแทนสามารถเห็น คลิก และส่งอะไรได้บ้าง
- จำกัดสภาพแวดล้อมการเรียกดู. รัน agent ในโปรไฟล์เบราว์เซอร์หรือ sandbox แยก และจำกัดเฉพาะโดเมนที่จำเป็นสำหรับงาน
- แยกการสังเกตจากการกระทำ. ให้ agent ค้นหา อ่าน และดึงข้อมูลก่อน; ต้องมีขั้นตอนยืนยันชัดเจนก่อนส่งฟอร์ม ส่งข้อความ จองทริป ซื้อของ ลบข้อมูล หรือตั้งค่าบัญชี
- เก็บความลับนอกข้อความแจ้งและบันทึก. หลีกเลี่ยงการใส่รหัสผ่าน รายละเอียดการชำระเงิน คุกกี้เซสชัน หรือข้อมูลส่วนตัวดิบในบริบทโมเดล ให้ผู้ใช้ดำเนินการยืนยันตัวตนและลบข้อมูลที่ละเอียดอ่อนออกจากบันทึก
- จัดการเนื้อหาหน้าเว็บเป็นข้อมูลไม่เชื่อถือ. เว็บไซต์อาจมีคำสั่งที่มีไว้สำหรับตัวแทนไม่ใช่ผู้ใช้ ตัวแทนควรงดการอ่านข้อความที่ขอเปลี่ยนเป้าหมาย เปิดเผยข้อมูล ปิดฟังก์ชันความปลอดภัย หรือไปยังไซต์ที่ไม่เกี่ยวข้อง
- ใช้การตรวจสอบที่กำหนดได้รอบขั้นตอนเสี่ยง. ตรวจสอบ URL ปัจจุบัน ชื่อหน้า รายการที่เลือก ราคา ผู้รับ และสรุปการกระทำด้วยโค้ดก่อนขออนุมัติจากผู้ใช้ในขั้นตอนสุดท้าย
- ตั้งงบประมาณและเงื่อนไขหยุด. จำกัดจำนวนการกระทำ การลองใหม่ แท็บ และเวลาที่ agent ใช้ หยุดเมื่อสถานะหน้าไม่ชัดเจนแทนการคลิกต่อ
- บันทึกหลักฐานที่มีประโยชน์เท่านั้น ไม่ใช่ทุกอย่าง. รักษาสรุปการกระทำ เวลา URL คำอธิบายองค์ประกอบที่เลือก ผลการตรวจสอบ และอ้างอิงภาพหน้าจอเพื่อให้งานสามารถทบทวนได้โดยไม่ต้องเก็บเนื้อหาหน้าเว็บที่ละเอียดอ่อนเกินจำเป็น
ในตัวอย่าง Airbnb การตั้งค่าปลอดภัยคือค้นหารายการและดึงราคามาเท่านั้น การเข้าระบบ ติดต่อเจ้าบ้าน หรือทำการจองควรเป็นการดำเนินการที่ได้รับการอนุมัติจากผู้ใช้แยกต่างหาก
ตัวอย่างการใช้งานจริง
- การจองทริปและติดตามราคา
- การเปรียบเทียบราคาและตรวจสอบสินค้าคงคลังในอีคอมเมิร์ซ
- การดึงข้อมูลโครงสร้างจากเว็บไซต์ไดนามิก
- การทดสอบและยืนยัน UI ที่รู้จักด้วยวิสัยทัศน์
- การติดตามและแจ้งเตือนเว็บไซต์
- การกรอกแบบฟอร์มอัจฉริยะในกระบวนการหลายขั้นตอน
ตัวอย่างในโลกจริง: Microsoft Project Opal
ตัวแทนที่คุณสร้างในบทเรียนนี้เป็นเวอร์ชันเล็กๆ ในเครื่องของ ตัวแทนใช้งานคอมพิวเตอร์ (CUA) — โปรแกรมที่ขับเคลื่อนเบราว์เซอร์เหมือนมนุษย์ Microsoft นำแนวคิดนี้สู่ภาคธุรกิจด้วย Project Opal (Frontier) ฟีเจอร์ใน Microsoft 365 Copilot
ด้วย Project Opal คุณบอกงานที่ต้องทำ และตัวแทนจะทำงานแทนคุณโดยใช้ การใช้งานคอมพิวเตอร์บน Windows 365 Cloud PC ที่ปลอดภัย ทำงาน แบบอะซิงโครนัสเบื้องหลัง และคุณสามารถชี้นำงานหรือควบคุมตลอดเวลา งานตัวอย่างรวมถึง:
- การจัดการคำขอเป็นสมาชิกกลุ่มความปลอดภัย
- การรวบรวมและตรวจสอบหลักฐานการตรวจสอบเพื่อรีวิวความสอดคล้อง
- การจัดการเหตุการณ์ IT (อัปเดตสถานะตั๋ว, มอบหมายผู้รับผิดชอบ, ปิดเหตุการณ์ซ้ำ)
- การประมวลผลข้อมูล Excel เป็นชุดข้อมูลปิดงบการเงิน
Opal เป็นข้อมูลอ้างอิงที่ดีของตัวแทนใช้งานคอมพิวเตอร์ที่ มีมาตรฐานและเชื่อถือได้ — และยังสร้างความเข้าใจจากบทเรียนก่อนๆ:
| แนวคิดในคอร์สนี้ |
วิธีที่ Project Opal ใช้ |
| Human-in-the-loop (บทเรียน 06) |
Opal หยุดรอข้อมูลล็อกอิน ข้อมูลละเอียดอ่อน หรือคำแนะนำไม่ชัดเจน และไม่กรอกรหัสผ่านหรือส่งฟอร์มโดยไม่มีการยืนยันชัดเจน คุณสามารถ Take Control และ Return Control ในระหว่างงานได้ |
| ตัวแทนที่เชื่อถือได้และปลอดภัย (บทเรียน 06 & 18) |
ทำงานใน Windows 365 Cloud PC แบบแยกต่างหาก, เริ่มต้นเป็นเบราว์เซอร์เท่านั้น (ปิดกั้นการเข้าถึงคอมพิวเตอร์อื่นผ่าน Intune), ใช้ตัวตนของ คุณ เพื่อเข้าถึงเฉพาะสิ่งที่คุณมีสิทธิ์ และบันทึกทุกการกระทำสำหรับการตรวจสอบ |
| การวางแผนและเมตาค็อกนิชัน (บทเรียน 07 & 09) |
Opal สร้างแผนงานก่อน แล้วตรวจสอบตรรกะของตัวเองในแต่ละขั้นตอน และหยุดหากพบกิจกรรมผิดปกติ |
| ศักยภาพ/เครื่องมือที่นำกลับมาใช้ใหม่ได้ (บทเรียน 04) |
สกิล ช่วยให้เขียนคำสั่งงานซ้ำได้ (นำเข้าจากไฟล์ .md หรือเขียนด้วย Opal) และใช้งานซ้ำในหลายบทสนทนา |
สถานะ: Project Opal เปิดให้ผู้ใช้ในโปรแกรม Frontier early access เท่านั้น พร้อมสมาชิก Microsoft 365 Copilot และผู้ดูแลระบบต้องตั้งค่าแล้ว เนื่องจากเป็นฟีเจอร์ทดลองใน Frontier, ศักยภาพอาจเปลี่ยนแปลงได้ในอนาคต
การตรวจสอบความรู้
ทดสอบความเข้าใจก่อนไปบทเรียนต่อไป
1. เมื่อใดที่ตัวแทนใช้งานคอมพิวเตอร์บนเบราว์เซอร์เหมาะกว่ากระบวนการทำงานที่ใช้ API อย่างเดียว?
คำตอบ
ใช้ตัวแทนเบราว์เซอร์เมื่อภารกิจขึ้นอยู่กับสิ่งที่ปรากฏใน UI เว็บ, เว็บไซต์ไม่มี API ที่ต้องการ หรือหน้าเว็บเปลี่ยนบ่อยจนตรรกะ API หรือตัวเลือกตายตัวเปราะบาง หากมี API ที่เสถียรสำหรับงานเดียวกัน ให้ใช้ API เพราะมักทำงานได้เร็วกว่า ทดสอบง่ายกว่า และปลอดภัยกว่า
2. ในเวิร์กโฟลว์แบบไฮบริด, ตัวแทนควรจัดการส่วนใด และโค้ด Playwright ควรจัดการส่วนใด?
คำตอบ
ให้ตัวแทนจัดการงานนำทางแบบเปิดและสถานะ UI ที่ไดนามิก เช่น หาหน้าเว็บที่ใช่ หรือปิดป็อปอัปไม่คาดคิด สลับไปควบคุม Playwright โดยตรงเมื่อโครงสร้างหน้าเป็นที่รู้จักและต้องการความแม่นยำ การลองใหม่ การรอ หรือการตรวจสอบที่กำหนดได้
3. ตัวอย่าง Airbnb พบรายการที่ผู้ใช้ต้องการจอง ก่อนที่กระบวนการจะล็อกอิน ติดต่อเจ้าบ้าน หรือทำการจอง ควรเกิดอะไรขึ้น?
คำตอบ
ควรหยุดและขออนุมัติจากผู้ใช้อย่างชัดเจน ก่อนขอควรแสดงสรุปรายการที่เลือก URL ปัจจุบัน ราคา วันที่ และการกระทำที่ตั้งใจ ค้นหาและดึงราคาสามารถทำอัตโนมัติได้ แต่การเข้าบัญชี ส่งข้อความ ซื้อของ และจองควรได้รับอนุมัติจากผู้ใช้
4. หน้าเว็บบอกตัวแทนให้ละเลยคำสั่งเดิม, ไปไซต์อื่น, และเปิดเผยข้อมูลทำงานที่บันทึกไว้ ตัวแทนควรจัดการข้อความนั้นอย่างไร?
คำตอบ
ให้ถือเป็นเนื้อหาไม่เชื่อถือบนหน้าเว็บ ไม่ใช่คำสั่งจากผู้พัฒนาหรือผู้ใช้ ตัวแทนควรอยู่ในโดเมนและขอบเขตงานที่อนุญาต ปฏิเสธการเปิดเผยความลับ และหลีกเลี่ยงการทำตามข้อความที่เปลี่ยนเป้าหมาย ปิดฟังก์ชันความปลอดภัย หรือพาไปไซต์ที่ไม่เกี่ยวข้อง
5. หลักฐานใดที่ควรเก็บไว้เมื่อรันตัวแทนเบราว์เซอร์ และควรหลีกเลี่ยงอะไร?
คำตอบ
เก็บสรุปการกระทำ, เวลาที่ทำ, URL, คำอธิบายองค์ประกอบที่เลือก, ผลการตรวจสอบ และอ้างอิงภาพหน้าจอเพื่อให้การรันสามารถทบทวนได้ หลีกเลี่ยงการเก็บรหัสผ่าน, รายละเอียดการชำระเงิน, คุกกี้เซสชัน, ข้อมูลส่วนบุคคลดิบ หรือเนื้อหาหน้าทั้งหมดเว้นแต่ว่ามีเหตุผลเรื่องการเก็บรักษาและความเป็นส่วนตัว
แหล่งข้อมูลเพิ่มเติม
บทเรียนก่อนหน้า
สำรวจ Microsoft Agent Framework
บทเรียนถัดไป
การปรับใช้ตัวแทนขนาดใหญ่
ปฏิเสธความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator ขณะที่เราพยายามให้ความถูกต้อง โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นทางควรถูกพิจารณาเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้การแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดขึ้นจากการใช้การแปลนี้