ai-agents-for-beginners

การสร้าง Computer Use Agents (CUA)

Computer use agents สามารถโต้ตอบกับเว็บไซต์ได้เหมือนคนทั่วไป: โดยการเปิดเบราว์เซอร์ ตรวจสอบหน้าเว็บ และดำเนินการถัดไปที่ดีที่สุดตามที่พวกเขาเห็น ในบทเรียนนี้ คุณจะสร้างตัวแทนอัตโนมัติสำหรับเบราว์เซอร์ที่ค้นหา Airbnb ดึงข้อมูลประกาศแบบมีโครงสร้าง และระบุการเข้าพักที่ถูกที่สุดในสตอกโฮล์ม

บทเรียนนี้ผสมผสาน Browser-Use สำหรับการนำทางด้วย AI, Playwright และ Chrome DevTools Protocol (CDP) สำหรับควบคุมเบราว์เซอร์, Azure OpenAI สำหรับการให้เหตุผลที่มีการมองเห็น และ Pydantic สำหรับการดึงข้อมูลแบบมีโครงสร้าง

บทนำ

บทเรียนนี้จะครอบคลุม:

• ทำความเข้าใจว่าเมื่อใดที่ computer use agents เหมาะสมกว่าการทำงานอัตโนมัติแบบใช้ API อย่างเดียว
• การผสาน Browser-Use กับ Playwright และ CDP สำหรับการจัดการ lifecycle ของเบราว์เซอร์อย่างเชื่อถือได้
• การใช้ Azure OpenAI ที่มองเห็นและผลลัพธ์แบบมีโครงสร้างของ Pydantic เพื่อดึงข้อมูลประกาศจากเว็บเพจแบบไดนามิก
• การตัดสินใจเมื่อใช้เวิร์กโฟลว์อัตโนมัติเบราว์เซอร์แบบ agent-first, actor-first หรือแบบผสมผสาน

เป้าหมายการเรียนรู้

หลังจากทำบทเรียนนี้เสร็จ คุณจะรู้วิธี:

• กำหนดค่า Browser-Use กับ Azure OpenAI และ Playwright
• สร้างเวิร์กโฟลว์อัตโนมัติสำหรับเบราว์เซอร์ที่นำทางเว็บไซต์จริงและจัดการกับองค์ประกอบ UI แบบไดนามิก
• ดึงผลลัพธ์ที่มีชนิดจากเนื้อหาที่มองเห็นบนหน้าเว็บและเปลี่ยนเป็นตรรกะทางธุรกิจต่อไป
• เลือกระหว่างรูปแบบ agent และ actor ตามความสามารถในการทำนายงานของเบราว์เซอร์

ตัวอย่างโค้ด

บทเรียนนี้ประกอบด้วยโน้ตบุ๊กหนึ่งชุดสอน:

• 15-browser-user.ipynb: เปิดเซสชัน Chrome ผ่าน CDP, ค้นหา Airbnb สำหรับประกาศในสตอกโฮล์ม, ดึงราคาด้วย Browser-Use vision และคืนค่าตัวเลือกที่ถูกที่สุดเป็นข้อมูลแบบมีโครงสร้าง

ความต้องการเบื้องต้น

• Python 3.12+
• กำหนดค่า Azure OpenAI deployment ในสภาพแวดล้อมของคุณแล้ว
• ติดตั้ง Chrome หรือ Chromium ในเครื่อง
• ติดตั้ง dependencies ของ Playwright
• คุ้นเคยกับ async Python ในระดับพื้นฐาน

การติดตั้ง

ติดตั้งแพ็กเกจที่ใช้ในโน้ตบุ๊ก:

pip install browser_use playwright python-dotenv
playwright install chromium

ตั้งค่า environment variables ของ Azure OpenAI ที่ใช้โดยโน้ตบุ๊ก:

AZURE_OPENAI_ENDPOINT=...
AZURE_OPENAI_API_KEY=...
AZURE_OPENAI_CHAT_DEPLOYMENT_NAME=...
# ตัวเลือก: ค่าเริ่มต้นเป็นเวอร์ชัน API ล่าสุดเมื่อไม่ได้ระบุ
AZURE_OPENAI_API_VERSION=...

ภาพรวมสถาปัตยกรรม

โน้ตบุ๊กนี้สาธิตเวิร์กโฟลว์อัตโนมัติเบราว์เซอร์แบบผสมผสาน:

1. Chrome เริ่มต้นด้วย CDP เปิดใช้งานเพื่อให้ Playwright และ Browser-Use ใช้เซสชันเบราว์เซอร์เดียวกัน
2. ตัวแทน Browser-Use จัดการงานนำทางแบบเปิดอย่างเช่น การเปิด Airbnb, ปิดป๊อปอัป และค้นหา Stockholm
3. หน้าปัจจุบันถูกตรวจสอบด้วยสกีมา Pydantic แบบมีโครงสร้างเพื่อดึงชื่อประกาศ, ราคาต่อคืน, คะแนน และ URLs
4. ตรรกะ Python เปรียบเทียบประกาศที่ดึงมาแล้วเน้นผลลัพธ์ที่ถูกที่สุด

แนวทางนี้ช่วยรักษาการให้เหตุผลด้วยการมองเห็นที่ยืดหยุ่นซึ่ง Browser-Use ถนัดในขณะเดียวกันก็ยังให้การควบคุมเบราว์เซอร์ที่มีความแน่นอนได้เมื่อคุณต้องการ

ข้อคิดและแนวปฏิบัติที่ดีที่สุด

เมื่อใดควรใช้ Agent หรือ Actor

สถานการณ์	ใช้ Agent	ใช้ Actor
เค้าโครงแบบไดนามิก	ใช่, AI สามารถปรับตัวกับการเปลี่ยนแปลงของหน้าได้	ไม่, ตัวเลือกที่เปราะบางอาจเสียหาย
โครงสร้างที่รู้จัก	ไม่, agent ช้ากว่าการควบคุมตรง	ใช่, รวดเร็วและแม่นยำ
การหาธาตุ	ใช่, การใช้ภาษาธรรมชาติดี	ไม่, ต้องตัวเลือกที่แม่นยำ
ควบคุมเวลา	ไม่, คาดเดาได้น้อยกว่า	ใช่, ควบคุมการรอและลองใหม่ได้เต็มที่
เวิร์กโฟลว์ที่ซับซ้อน	ใช่, จัดการสถานะ UI ที่ไม่คาดคิด	ไม่, ต้องการการแยกสาขาที่ชัดเจน

แนวทางปฏิบัติที่ดีที่สุดของ Browser-Use

1. เริ่มต้นด้วย agent สำหรับการสำรวจและการนำทางแบบไดนามิก
2. เปลี่ยนไปควบคุมหน้าโดยตรงเมื่อการโต้ตอบเริ่มคาดการณ์ได้
3. ใช้โมเดลผลลัพธ์แบบมีโครงสร้างเพื่อให้ข้อมูลที่ดึงมาเป็นการยืนยันและปลอดภัยต่อชนิดข้อมูล
4. เพิ่มความล่าช้าอย่างมีกลยุทธ์หลังการทำงานที่กระตุ้นการเปลี่ยนแปลง UI ที่มองเห็นได้
5. จับภาพหน้าจอในระหว่างการวนซ้ำเพื่อให้ง่ายต่อการดีบักเมื่อเกิดความล้มเหลว
6. คาดหวังว่าเว็บไซต์จะเปลี่ยนไปและออกแบบกลยุทธ์สำรองสำหรับป๊อปอัปและการเลื่อนเค้าโครง
7. ผสมผสานรูปแบบ agent และ actor เพื่อให้ได้ทั้งความยืดหยุ่นและความแม่นยำ

การใช้งานในโลกจริง

• การจองท่องเที่ยวและการตรวจสอบราคา
• เปรียบเทียบราคาและตรวจสอบความพร้อมในอีคอมเมิร์ซ
• การดึงข้อมูลแบบมีโครงสร้างจากเว็บไซต์แบบไดนามิก
• การทดสอบและยืนยัน UI ที่ใช้การมองเห็น
• การติดตามเว็บไซต์และแจ้งเตือน
• การกรอกแบบฟอร์มอย่างชาญฉลาดในขั้นตอนหลายๆ ขั้นตอน

แหล่งข้อมูลเพิ่มเติม

• เทมเพลตการผสาน Browser-Use กับ Playwright
• พารามิเตอร์ actor ของ Browser-Use และการดึงเนื้อหา
• การตั้งคอร์ส

---

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้ความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นฉบับควรถูกพิจารณาเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดใด ๆ ที่เกิดจากการใช้การแปลนี้

This site is open source. Improve this page.