stagehand

- ด้วยมือ

เฟรมเวิร์กการท่องเว็บ AI มุ่งเน้นไปที่ความเรียบง่ายและการขยายความสามารถ

---

• อินโทร
• เริ่มต้น
• การอ้างอิง API
  • กระทำ()
  • สารสกัด()
  • สังเกต()
• การสนับสนุนแบบจำลอง
• มันทำงานอย่างไร
• Stagehand vs playwright
• เคล็ดลับการแจ้งเตือน
• แผนงาน
• การบริจาค
• กิตติกรรมประกาศ
• ใบอนุญาต

บันทึก

ขณะนี้ Stagehand มีให้บริการในช่วงต้นและเรากำลังมองหาข้อเสนอแนะจากชุมชนอย่างแข็งขัน โปรดเข้าร่วมชุมชน Slack ของเราเพื่ออัปเดตการพัฒนาล่าสุดและให้ข้อเสนอแนะ

อินโทร

Stagehand เป็นผู้สืบทอดที่ขับเคลื่อนด้วย AI ให้กับนักเขียนบทละครนำเสนอ APIs ง่าย ๆ สามแบบ ( act , extract และ observe ) ที่ให้หน่วยการสร้างสำหรับเว็บอัตโนมัติที่ขับเคลื่อนด้วยภาษาธรรมชาติ

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

แต่ละฟังก์ชั่นสเตจแฮนด์ใช้ในคำสั่งอะตอมเช่น act("click the login button") หรือ extract("find the red shoes") สร้างรหัสนักเขียนบทละครที่เหมาะสมเพื่อให้บรรลุคำสั่งนั้นและดำเนินการ

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

Stagehand เป็นโอเพ่นซอร์สและดูแลโดยทีมเบราว์เซอร์เบส เราเชื่อว่าด้วยการเปิดใช้งานนักพัฒนาซอฟต์แวร์มากขึ้นในการสร้างระบบอัตโนมัติเว็บที่เชื่อถือได้เราจะขยายตลาดของนักพัฒนาที่ได้รับประโยชน์จากโครงสร้างพื้นฐานเบราว์เซอร์ที่ไม่มีหัวของเรา นี่คือกรอบการทำงานที่เราต้องการในขณะที่ซ่อมแซมแอปพลิเคชันของเราเองและเรารู้สึกตื่นเต้นที่จะแบ่งปันกับคุณ

เริ่มต้น

1. ติดตั้งแพ็คเกจ Stagehand

นอกจากนี้เรายังติดตั้ง ZOD เพื่อการสกัดที่พิมพ์ด้วยพลังงาน

npm install @browserbasehq/stagehand zod

2. กำหนดค่าผู้ให้บริการโมเดลของคุณ

คุณจะต้องจัดเตรียมคีย์ API ของคุณสำหรับผู้ให้บริการรุ่นที่คุณต้องการใช้ ผู้ให้บริการรุ่นเริ่มต้นคือ OpenAI แต่คุณสามารถใช้มานุษยวิทยาหรือผู้อื่นได้ ข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่รองรับสามารถพบได้ในการอ้างอิง API

ตรวจสอบให้แน่ใจว่าคีย์ OpenAI API หรือปุ่ม API มานุษยวิทยาสามารถเข้าถึงได้ในสภาพแวดล้อมท้องถิ่นของคุณ

 export OPENAI_API_KEY=sk-...
export ANTHROPIC_API_KEY=sk-...

3. สร้างอินสแตนซ์ stagehand

หากคุณวางแผนที่จะเรียกใช้เบราว์เซอร์ในเครื่องคุณจะต้องติดตั้งการพึ่งพาเบราว์เซอร์ของ Playwright

npm exec playwright install

จากนั้นคุณสามารถสร้างอินสแตนซ์ stagehand ได้เช่น:

 import { Stagehand } from "@browserbasehq/stagehand" ;
import { z } from "zod" ;

const stagehand = new Stagehand ( {
  env : "LOCAL" ,
} ) ;

หากคุณวางแผนที่จะเรียกใช้เบราว์เซอร์จากระยะไกลคุณจะต้องตั้งค่าคีย์ API เบราว์เซอร์เบสและรหัสโครงการ

 export BROWSERBASE_API_KEY=...
export BROWSERBASE_PROJECT_ID=...

 import { Stagehand } from "@browserbasehq/stagehand" ;
import { z } from "zod" ;

const stagehand = new Stagehand ( {
  env : "BROWSERBASE" ,
  enableCaching : true ,
} ) ;

4. เรียกใช้ระบบอัตโนมัติครั้งแรกของคุณ

 await stagehand . init ( ) ;
await stagehand . page . goto ( "https://github.com/browserbase/stagehand" ) ;
await stagehand . act ( { action : "click on the contributors" } ) ;
const contributor = await stagehand . extract ( {
  instruction : "extract the top contributor" ,
  schema : z . object ( {
    username : z . string ( ) ,
    url : z . string ( ) ,
  } ) ,
} ) ;
console . log ( `Our favorite contributor is ${ contributor . username } ` ) ;

ตัวอย่างง่ายๆนี้จะเปิดเบราว์เซอร์นำทางไปยัง repo stagehand และบันทึกผู้สนับสนุนชั้นนำ

การอ้างอิง API

Stagehand()

ตัวสร้างนี้ใช้เพื่อสร้างอินสแตนซ์ของ Stagehand

• ข้อโต้แย้ง:

  • env : 'LOCAL' หรือ 'BROWSERBASE' ค่าเริ่มต้นเป็น 'BROWSERBASE'
  • modelName : (ไม่บังคับ) สตริง AvailableModel เพื่อระบุรุ่นเริ่มต้นที่จะใช้
  • modelClientOptions : (ตัวเลือก) ตัวเลือกการกำหนดค่าสำหรับไคลเอนต์โมเดล
  • enableCaching : boolean ที่เปิดใช้งานการแคชของการตอบสนอง LLM เมื่อตั้งค่าเป็น true คำขอ LLM จะถูกแคชบนดิสก์และนำกลับมาใช้ใหม่สำหรับคำขอที่เหมือนกัน ค่าเริ่มต้นเป็น false
  • headless : boolean ที่กำหนดว่าเบราว์เซอร์ทำงานในโหมดหัวขาดหรือไม่ ค่าเริ่มต้นเป็น false เมื่อ env ถูกตั้งค่าเป็น BROWSERBASE สิ่งนี้จะถูกละเว้น
  • domSettleTimeoutMs : integer ระบุการหมดเวลาเป็นมิลลิวินาทีเพื่อรอให้ DOM ชำระ ค่าเริ่มต้นถึง 30000 (30 วินาที)
  • apiKey : (ไม่บังคับ) คีย์ API เบราว์เซอร์เบสของคุณ ค่าเริ่มต้นเป็นตัวแปรสภาพแวดล้อม BROWSERBASE_API_KEY
  • projectId : (ไม่บังคับ) รหัสโครงการเบราว์เซอร์เบสของคุณ ค่าเริ่มต้นเป็นตัวแปรสภาพแวดล้อมของ BROWSERBASE_PROJECT_ID
  • browserBaseSessionCreateParams : ตัวเลือกการกำหนดค่าสำหรับการสร้างเซสชัน BrowserBase ใหม่
  • browserbaseResumeSessionID : ID ของเซสชันเบราว์เซอร์เบสที่มีอยู่เพื่อกลับมาทำงานต่อ
  • logger : ฟังก์ชั่นที่จัดการกับข้อความบันทึก มีประโยชน์สำหรับการใช้งานการบันทึกแบบกำหนดเอง
  • verbose : integer ช่วยให้การบันทึกหลายระดับระหว่างระบบอัตโนมัติ:
    • 0 : จำกัด ไม่ให้เข้าสู่ระบบ
    • 1 : การบันทึกระดับ SDK
    • 2 : การบันทึกระดับ LLM-client (ละเอียดส่วนใหญ่)
  • debugDom : boolean ที่ดึงกล่องที่มีขอบเขตรอบ ๆ องค์ประกอบที่นำเสนอต่อ LLM ในระหว่างระบบอัตโนมัติ

• ผลตอบแทน:

  • อินสแตนซ์ของคลาส Stagehand ที่กำหนดค่าด้วยตัวเลือกที่ระบุ

• ตัวอย่าง:

   // Basic usage
  const stagehand = new Stagehand ( ) ;
  
  // Custom configuration
  const stagehand = new Stagehand ( {
    env : "LOCAL" ,
    verbose : 1 ,
    headless : true ,
    enableCaching : true ,
    logger : ( logLine ) => {
      console . log ( `[ ${ logLine . category } ] ${ logLine . message } ` ) ;
    } ,
  } ) ;
  
  // Resume existing Browserbase session
  const stagehand = new Stagehand ( {
    env : "BROWSERBASE" ,
    browserbaseResumeSessionID : "existing-session-id" ,
  } ) ;

วิธีการ

init()

init() แบบอะซิงโครนัสเริ่มต้นอินสแตนซ์สเตจแฮนด์ ควรเรียกใช้ก่อนวิธีการอื่นใด

• ข้อโต้แย้ง:

  • modelName : (ไม่บังคับ) สตริง AvailableModel เพื่อระบุโมเดลที่จะใช้ สิ่งนี้จะใช้สำหรับวิธีอื่นทั้งหมดเว้นแต่จะถูกแทนที่
  • modelClientOptions : (ตัวเลือก) ตัวเลือกการกำหนดค่าสำหรับไคลเอนต์โมเดล
  • domSettleTimeoutMs : (ไม่บังคับ) การหมดเวลาในมิลลิวินาทีเพื่อรอให้ DOM ชำระ

• ผลตอบแทน:

  • Promise ที่แก้ไขกับวัตถุที่มี:
    • debugUrl : string ที่เป็นตัวแทนของ URL สำหรับการดีบักสด จะใช้ได้เฉพาะเมื่อใช้เบราว์เซอร์เบราว์เซอร์
    • sessionUrl : string ที่แสดงถึง URL เซสชัน จะใช้ได้เฉพาะเมื่อใช้เบราว์เซอร์เบราว์เซอร์

• ตัวอย่าง:

   await stagehand . init ( { modelName : "gpt-4o" } ) ; 

act()

act() อนุญาตให้ Stagehand โต้ตอบกับหน้าเว็บ ให้ action เช่น "search for 'x'" หรือ "select the cheapest flight presented" (เป้าหมายอะตอมเล็ก ๆ ทำงานได้ดีที่สุด)

• ข้อโต้แย้ง:

  • action : string ที่อธิบายการกระทำเพื่อดำเนินการ
  • modelName : (ไม่บังคับ) สตริง AvailableModel เพื่อระบุโมเดลที่จะใช้
  • modelClientOptions : (ตัวเลือก) ตัวเลือกการกำหนดค่าสำหรับไคลเอนต์โมเดล
  • useVision : (เป็นทางเลือก) boolean หรือ "fallback" เพื่อตรวจสอบว่าควรใช้การประมวลผลที่อิงกับการมองเห็นหรือไม่ ค่าเริ่มต้นเป็น "fallback"
  • variables : (ไม่บังคับ) Record<string, string> ของตัวแปรที่จะใช้ในการกระทำ ตัวแปรในสตริงการกระทำนั้นอ้างอิงโดยใช้ %variable_name%
  • domSettleTimeoutMs : (ไม่บังคับ) การหมดเวลาในมิลลิวินาทีเพื่อรอให้ DOM ชำระ

• ผลตอบแทน:

  • Promise ที่แก้ไขกับวัตถุที่มี:
    • success : boolean ระบุว่าการกระทำเสร็จสมบูรณ์หรือไม่
    • message : string ที่ให้รายละเอียดเกี่ยวกับการดำเนินการของการดำเนินการ
    • action : string ที่อธิบายการกระทำที่ดำเนินการ

• ตัวอย่าง:

   // Basic usage
  await stagehand . act ( { action : "click on add to cart" } ) ;
  
  // Using variables
  await stagehand . act ( {
    action : "enter %username% into the username field" ,
    variables : {
      username : "[email protected]" ,
    } ,
  } ) ;
  
  // Multiple variables
  await stagehand . act ( {
    action : "fill in the form with %username% and %password%" ,
    variables : {
      username : "john.doe" ,
      password : "secretpass123" ,
    } ,
  } ) ; 

extract()

extract() คว้าข้อความที่มีโครงสร้างจากหน้าปัจจุบันโดยใช้ ZOD คำแนะนำและ schema คุณจะได้รับข้อมูลที่มีโครงสร้าง ซึ่งแตกต่างจากไลบรารีการสกัดบางอย่าง Stagehand สามารถแยกข้อมูลใด ๆ บนหน้าเว็บไม่ใช่แค่เนื้อหาบทความหลัก

• ข้อโต้แย้ง:

  • instruction : string ให้คำแนะนำสำหรับการสกัด
  • schema : A z.AnyZodObject กำหนดโครงสร้างของข้อมูลเพื่อแยก
  • modelName : (ไม่บังคับ) สตริง AvailableModel เพื่อระบุโมเดลที่จะใช้
  • modelClientOptions : (ตัวเลือก) ตัวเลือกการกำหนดค่าสำหรับไคลเอนต์โมเดล
  • domSettleTimeoutMs : (ไม่บังคับ) การหมดเวลาในมิลลิวินาทีเพื่อรอให้ DOM ชำระ

• ผลตอบแทน:

  • Promise ที่แก้ไขข้อมูลที่มีโครงสร้างตามที่กำหนดโดย schema ที่ให้ไว้

• ตัวอย่าง:

   const price = await stagehand . extract ( {
    instruction : "extract the price of the item" ,
    schema : z . object ( {
      price : z . number ( ) ,
    } ) ,
  } ) ; 

observe()

บันทึก

observe() ปัจจุบันประเมินเพียงก้อนแรกในหน้าเท่านั้น

observe() ใช้เพื่อรับรายการการกระทำที่สามารถดำเนินการในหน้าปัจจุบัน มันมีประโยชน์สำหรับการเพิ่มบริบทในขั้นตอนการวางแผนของคุณหรือหากคุณไม่แน่ใจว่าคุณอยู่ในหน้าใด

หากคุณกำลังมองหาองค์ประกอบเฉพาะคุณสามารถผ่านคำสั่งเพื่อสังเกตผ่าน: observe({ instruction: "{your instruction}"})

• ข้อโต้แย้ง:

  • instruction : (ไม่บังคับ) string ให้คำแนะนำสำหรับการสังเกต ค่าเริ่มต้นเป็น "ค้นหาการกระทำที่สามารถทำได้ในหน้านี้"
  • modelName : (ไม่บังคับ) สตริง AvailableModel เพื่อระบุโมเดลที่จะใช้
  • modelClientOptions : (ตัวเลือก) ตัวเลือกการกำหนดค่าสำหรับไคลเอนต์โมเดล
  • useVision : (เป็นทางเลือก) boolean เพื่อตรวจสอบว่าควรใช้การประมวลผลที่ใช้การมองเห็นหรือไม่ ค่าเริ่มต้นเป็น false
  • domSettleTimeoutMs : (ไม่บังคับ) การหมดเวลาในมิลลิวินาทีเพื่อรอให้ DOM ชำระ

• ผลตอบแทน:

  • Promise ที่แก้ไขให้เป็นอาร์เรย์ของวัตถุที่มี:
    • selector : string ที่แสดงตัวเลือกองค์ประกอบ
    • description : string ที่อธิบายการกระทำที่เป็นไปได้

• ตัวอย่าง:

   const actions = await stagehand . observe ( ) ; 

page และ context

page และ context เป็นอินสแตนซ์ของ Page ของ Playwright และ BrowserContext ตามลำดับ ใช้วิธีการเหล่านี้เพื่อโต้ตอบกับอินสแตนซ์ของนักเขียนบทละครที่ StageHand ใช้ โดยทั่วไปคุณจะใช้ page.goto() เพื่อนำทางไปยัง URL

• ตัวอย่าง:

   await stagehand . page . goto ( "https://github.com/browserbase/stagehand" ) ;

log()

log() ใช้เพื่อพิมพ์ข้อความไปยังคอนโซลเบราว์เซอร์ ข้อความเหล่านี้จะคงอยู่ในบันทึกเซสชันเบราว์เซอร์เบสและสามารถใช้ในการดีบักหลังจากเสร็จสิ้น

ตรวจสอบให้แน่ใจว่าระดับบันทึกอยู่เหนือระดับ verbose ที่คุณตั้งค่าเมื่อเริ่มต้นอินสแตนซ์สเตจแฮนด์

• ตัวอย่าง:

   stagehand . log ( "Hello, world!" ) ; 

การสนับสนุนแบบจำลอง

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

รุ่นที่รองรับปัจจุบัน

ขณะนี้ Stagehand รองรับรุ่นต่อไปนี้จาก OpenAI และมานุษยวิทยา:

• โมเดล Openai:

  • gpt-4o
  • gpt-4o-mini
  • gpt-4o-2024-08-06

• โมเดลมานุษยวิทยา:

  • claude-3-5-sonnet-latest
  • claude-3-5-sonnet-20240620
  • claude-3-5-sonnet-20241022

โมเดลเหล่านี้สามารถระบุได้เมื่อเริ่มต้นอินสแตนซ์ Stagehand หรือเมื่อวิธีการโทรเช่น act() และ extract()

มันทำงานอย่างไร

SDK มีสองขั้นตอนสำคัญ:

1. การประมวลผล DOM (รวมถึง chunking - ดูด้านล่าง )
2. การดำเนินการ LLM ขับเคลื่อนขึ้นอยู่กับสถานะปัจจุบันของ DOM

การประมวลผล DOM

Stagehand ใช้การผสมผสานของเทคนิคในการเตรียม DOM

ขั้นตอนการประมวลผล DOM มีดังนี้:

1. ผ่านนักเขียนบทละครฉีดสคริปต์ลงใน DOM ที่เข้าถึงได้โดย SDK ที่สามารถเรียกใช้การประมวลผล
2. รวบรวมข้อมูล DOM และสร้างรายการองค์ประกอบของผู้สมัคร
   • องค์ประกอบของผู้สมัครเป็นองค์ประกอบ Leaf (องค์ประกอบ DOM ที่มีสารที่ผู้ใช้หันหน้าเข้าหาจริง) หรือเป็นองค์ประกอบแบบโต้ตอบ
   • องค์ประกอบแบบอินเทอร์แอคทีฟถูกกำหนดโดยการรวมกันของบทบาทและแท็ก HTML
3. องค์ประกอบของผู้สมัครที่ไม่ได้ใช้งานมองเห็นได้หรือที่ด้านบนของ DOM จะถูกทิ้ง
   • LLM ควรได้รับองค์ประกอบที่สามารถดำเนินการในนามของตัวแทน/ผู้ใช้ได้อย่างซื่อสัตย์เท่านั้น
4. สำหรับองค์ประกอบของผู้สมัครแต่ละคนจะมีการสร้าง XPATH สิ่งนี้รับประกันได้ว่าหากองค์ประกอบนี้ถูกเลือกโดย LLM เราจะสามารถกำหนดเป้าหมายได้อย่างน่าเชื่อถือ
5. ส่งคืนทั้งรายการขององค์ประกอบผู้สมัครเช่นเดียวกับแผนที่ขององค์ประกอบไปยังตัวเลือก XPATH ข้ามเบราว์เซอร์กลับไปที่ SDK เพื่อวิเคราะห์โดย LLM

การตี

ในขณะที่ LLMS จะยังคงเพิ่มความยาวของหน้าต่างบริบทและลดเวลาแฝงการให้ระบบการให้เหตุผลใด ๆ น้อยลงในการคิดควรทำให้เชื่อถือได้มากขึ้น เป็นผลให้การประมวลผล DOM ทำในชิ้นเพื่อให้บริบทเล็กต่อการเรียกการอนุมาน เพื่อที่จะเป็นก้อน SDK พิจารณาองค์ประกอบของผู้สมัครที่เริ่มต้นในส่วนของวิวพอร์ตเพื่อเป็นส่วนหนึ่งของก้อนนั้น ในอนาคตจะมีการเพิ่มช่องว่างภายในเพื่อให้แน่ใจว่าแต่ละก้อนไม่ได้ขาดบริบทที่เกี่ยวข้อง ดูแผนภาพนี้ว่าเป็นอย่างไร:

วิสัยทัศน์

act() และ observe() วิธีการสามารถใช้ธง useVision หากสิ่งนี้ถูกตั้งค่าเป็น true LLM จะได้รับภาพหน้าจอคำอธิบายประกอบของหน้าปัจจุบันเพื่อระบุว่าองค์ประกอบใดที่จะดำเนินการ สิ่งนี้มีประโยชน์สำหรับ DOMs ที่ซับซ้อนซึ่ง LLM มีเวลาที่ยากลำบากในการให้เหตุผลแม้หลังจากการประมวลผลและการถ่ายทำ โดยค่าเริ่มต้นธงนี้จะถูกตั้งค่าเป็น "fallback" ซึ่งหมายความว่าหาก LLM ไม่สามารถระบุองค์ประกอบเดียวได้สำเร็จ StageHand จะลองใช้ความพยายามอีกครั้ง

การวิเคราะห์ LLM

ตอนนี้เรามีรายการองค์ประกอบของผู้สมัครและวิธีการเลือก เราสามารถนำเสนอองค์ประกอบเหล่านั้นด้วยบริบทเพิ่มเติมกับ LLM สำหรับการสกัดหรือการกระทำ ในขณะที่ยังไม่ผ่านการทดสอบในขนาดใหญ่การนำเสนอ "รายการองค์ประกอบที่มีหมายเลข" นำแบบจำลองเพื่อไม่ปฏิบัติต่อบริบทเป็น DOM เต็มรูปแบบ แต่เป็นรายการขององค์ประกอบที่เกี่ยวข้อง แต่เป็นอิสระในการทำงาน

ในกรณีของการกระทำเราขอให้ LLM เขียนวิธีการเขียนบทละครเพื่อทำสิ่งที่ถูกต้อง ในการทดสอบที่ จำกัด ของเราไวยากรณ์นักเขียนบทละครมีประสิทธิภาพมากกว่าการพึ่งพา API JavaScript ในตัวซึ่งอาจเกิดจากการโทเค็น

สุดท้ายเราใช้ LLM เพื่อเขียนคำแนะนำในอนาคตเพื่อช่วยจัดการความคืบหน้าและเป้าหมายเมื่อดำเนินการข้ามชิ้น

Stagehand vs playwright

ด้านล่างเป็นตัวอย่างของวิธีการแยกรายการ บริษัท จากเว็บไซต์ AI Grant โดยใช้ทั้ง Stagehand และ Playwright

เคล็ดลับการแจ้งเตือน

การแจ้งเตือนสเตจแฮนด์นั้นเป็นตัวอักษรและอะตอมมากกว่าเฟรมเวิร์กระดับสูงกว่าอื่น ๆ รวมถึงเฟรมเวิร์กตัวแทน นี่คือแนวทางบางประการที่จะช่วยให้คุณได้รับการแจ้งเตือนที่มีประสิทธิภาพ:

ทำ:

• ใช้การกระทำที่เฉพาะเจาะจงและรัดกุม

 await stagehand . act ( { action : "click the login button" } ) ;

const productInfo = await stagehand . extract ( {
  instruction : "find the red shoes" ,
  schema : z . object ( {
    productName : z . string ( ) ,
    price : z . number ( ) ,
  } ) ,
} ) ;

• แบ่งงานที่ซับซ้อนออกเป็นขั้นตอนเล็ก ๆ อะตอม

แทนที่จะรวมการกระทำ:

 // Avoid this
await stagehand . act ( { action : "log in and purchase the first item" } ) ;

แบ่งออกเป็นแต่ละขั้นตอน:

 await stagehand . act ( { action : "click the login button" } ) ;
// ...additional steps to log in...
await stagehand . act ( { action : "click on the first item" } ) ;
await stagehand . act ( { action : "click the purchase button" } ) ;

• ใช้ observe() เพื่อรับคำแนะนำที่สามารถดำเนินการได้จากหน้าปัจจุบัน

 const actions = await stagehand . observe ( ) ;
console . log ( "Possible actions:" , actions ) ;

อย่า:

• ใช้คำแนะนำที่กว้างหรือคลุมเครือ

 // Too vague
await stagehand . act ( { action : "find something interesting on the page" } ) ;

• รวมการกระทำหลายอย่างเข้ากับคำสั่งเดียว

 // Avoid combining actions
await stagehand . act ( { action : "fill out the form and submit it" } ) ;

• คาดว่า Stagehand จะทำการวางแผนหรือให้เหตุผลระดับสูง

 // Outside Stagehand's scope
await stagehand . act ( { action : "book the cheapest flight available" } ) ;

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

เราปล่อยให้พฤติกรรมตัวแทนไปยังระบบตัวแทนระดับสูงซึ่งสามารถใช้ StageHand เป็นเครื่องมือ

แผนงาน

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

คุณสามารถดูแผนงานได้ที่นี่ ต้องการมีส่วนร่วม? อ่านต่อ!

การบริจาค

บันทึก

เราให้ความสำคัญกับการมีส่วนร่วมอย่างมากในเวที! สำหรับการสนับสนุนหรือการตรวจสอบรหัสโปรดเข้าร่วมชุมชน Slack ของเรา

ก่อนอื่นโคลน repo

git clone [email protected]:browserbase/stagehand.git

จากนั้นติดตั้งการพึ่งพา

npm install

ตรวจสอบให้แน่ใจว่าคุณมีไฟล์ .env ตามที่บันทึกไว้ข้างต้นในส่วนการเริ่มต้นใช้งาน

จากนั้นเรียกใช้ตัวอย่างสคริปต์ npm run example

เคล็ดลับการพัฒนา

การพัฒนาที่ดีคือ:

1. ลองสิ่งต่างๆในไฟล์ตัวอย่าง
2. ใช้สิ่งนั้นเพื่อทำการเปลี่ยนแปลง SDK
3. เขียน evals ที่ช่วยตรวจสอบการเปลี่ยนแปลงของคุณ
4. ตรวจสอบให้แน่ใจว่าคุณไม่ได้ทำลาย Evals ที่มีอยู่!
5. เปิดการประชาสัมพันธ์และรับการตรวจสอบโดยทีมงาน

Evals วิ่ง

คุณจะต้องใช้กุญแจ API BrainTrust เพื่อเรียกใช้ Evals

 BRAINTRUST_API_KEY = " "

หลังจากนั้นคุณสามารถเรียกใช้การประเมินโดยใช้ npm run evals

การเพิ่ม Evals ใหม่

การเรียกใช้ Evals ทั้งหมดอาจใช้เวลาสักครู่ เรามี example.ts สคริปต์ความสะดวกสบายที่คุณสามารถพัฒนา eval เดี่ยวใหม่ของคุณก่อนที่จะเพิ่มลงในชุดของ evals ทั้งหมด

คุณสามารถเรียกใช้ npm run example เพื่อดำเนินการและทำซ้ำในการประเมินที่คุณกำลังพัฒนาอยู่

การเพิ่มรุ่นใหม่

หากต้องการเพิ่มโมเดลใหม่ลงใน Stagehand ให้ทำตามขั้นตอนเหล่านี้:

1. กำหนดรุ่น : เพิ่มชื่อรุ่นใหม่ลงในประเภท AvailableModel ในไฟล์ LLMProvider.ts สิ่งนี้ทำให้มั่นใจได้ว่าแบบจำลองนี้ได้รับการยอมรับจากระบบ

2. แมปโมเดลไปยังผู้ให้บริการ : อัปเดต modelToProviderMap ในคลาส LLMProvider เพื่อเชื่อมโยงโมเดลใหม่กับผู้ให้บริการที่สอดคล้องกัน การทำแผนที่นี้เป็นสิ่งสำคัญสำหรับการพิจารณาว่าลูกค้าจะใช้ใด

3. ใช้ไคลเอนต์ : หากโมเดลใหม่ต้องการไคลเอนต์ใหม่ให้ใช้คลาสที่ปฏิบัติตามอินเตอร์เฟส LLMClient คลาสนี้ควรกำหนดวิธีการที่จำเป็นทั้งหมดเช่น createChatCompletion

4. อัปเดตวิธี getClient : แก้ไขวิธี getClient ในคลาส LLMProvider เพื่อส่งคืนอินสแตนซ์ของไคลเอนต์ใหม่เมื่อมีการร้องขอโมเดลใหม่

การสร้าง SDK

Stagehand ใช้ TSUP เพื่อสร้าง SDK และ Vanilla esbuild เพื่อสร้างสคริปต์ที่ทำงานใน DOM

1. รัน npm run build
2. เรียกใช้ npm pack เพื่อรับ tarball สำหรับการแจกจ่าย

กิตติกรรมประกาศ

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

Jeremy Press เขียน MVP ดั้งเดิมของ Stagehand และยังคงเป็นพันธมิตรที่สำคัญของโครงการ

ใบอนุญาต

ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT

ลิขสิทธิ์ 2024 BrowserBase, Inc.