Snapshot

Snapshot은 AI 에이전트가 웹페이지를 읽는 방식입니다. 현재 페이지를 압축된 구조화된 텍스트로 바꾸고 실행 가능한 요소(버튼, 입력, 링크)에 임시 숫자(@1, @2 등)를 할당합니다. 에이전트는 원시 HTML을 읽거나 화면 좌표를 추측하는 대신 해당 스냅샷을 바탕으로 다음 작업을 결정합니다.

그것이 해결하는 것

사람에게 웹페이지는 시각적 인터페이스입니다. 에이전트에게 이는 수만 개의 HTML, 스크립트, 스타일 및 실시간 상태 토큰입니다. LLM에 바로 입력하려면 두 가지 반복 비용이 발생합니다.

• 높은 토큰 비용. 일반적인 관리 페이지는 30,000개의 토큰까지 실행할 수 있으며 모든 작업 전에 다시 읽을 수 있습니다.
• 소음에 빠져들다. 대부분의 전체 DOM(스타일, 스크립트, 숨겨진 노드)은 결정과 관련이 없으며 방해만 할 뿐입니다.

스냅샷은 브라우저의 접근성 트리(브라우저가 스크린 리더를 위해 유지하는 페이지의 의미론적 보기)에서 생성되며 페이지를 수백 개의 토큰으로 압축합니다.

• 페이지 제목 및 현재 URL.
• 보이는 텍스트와 주요 구조.
• 역할과 이름이 포함된 클릭 가능, 입력 가능, 선택 가능 요소입니다.
• 각 대화형 요소에 대한 임시 @N입니다.

이는 원시 HTML이나 화면 좌표 없이 에이전트가 클릭할 버튼과 채울 필드를 결정하는 데 충분합니다.

@N 참조의 작동 방식

스냅샷의 각 대화형 요소에는 임시 번호가 부여됩니다.

@1 [input]  "Search"
@2 [button] "Submit"
@3 [link]   "Next page"

에이전트는 해당 번호에 따라 조치를 취합니다. await click('@2').

@N은 현재 Snapshot에서만 유효합니다. 탐색, 새로 고침, 대화 상자, 양식 제출, 탭 전환, 동적 렌더링 등으로 페이지가 바뀌면 이전 번호가 더 이상 같은 요소를 가리키지 않을 수 있습니다. @N을 계속 재사용하지 말고 페이지가 바뀔 때마다 새 Snapshot을 만드는 것이 안전합니다.

여러 단계에서 요소에 대한 안정적인 참조가 필요한 경우 스냅샷 출력의 loc=... 선택기를 안정적인 선택기로 사용하거나 CSS 선택기를 직접 작성하세요. ego-browser를 참조하세요.

스냅샷을 발견하면

대부분의 경우 스냅샷을 전혀 건드리지 않고 에이전트가 스스로 스냅샷을 읽습니다. 다음 두 위치에서 표면이 나타나는 것을 볼 수 있습니다.

1. 에이전트는 "재스냅샷" 또는 "페이지 스냅샷"이라고 말합니다. 이는 변경 사항을 감지했으며 현재 상태를 다시 읽고 있음을 의미합니다.
2. 작업 결과에는 증거로 발췌한 스냅샷이 포함됩니다.

에이전트를 위한 작업 작성

Snapshot은 에이전트가 페이지를 명확하게 읽는 데 도움이 되지만 작업의 범위와 한계는 사용자가 정합니다. 좋은 작업 설명에는 다음 내용이 포함됩니다.

• 대상 페이지 또는 사이트입니다.
• 무엇을 읽고, 채우고, 클릭하고, 다운로드해야 할까요?
• 해서는 안되는 작업(삭제, 게시, 지불, 메일 전송 등).
• 보안 문자, 결제 또는 승인 화면에서 일시 중지할지 여부입니다.
• 원하는 결과의 모양(표, 요약, 스크린샷, 로컬 파일 경로)

예:

Open my GitHub Notifications and list the PRs that need my review — repo name, title, URL.
Don't archive, don't mark anything as read.

Open the orders dashboard, filter yesterday's orders, and download the CSV.
Pause if you hit a login challenge or an export confirmation, and tell me where the file landed.

에이전트가 수행한 작업 검토

작업이 완료되면 확인해야 할 신호는 다음과 같습니다.

• 에이전트가 방문한 페이지와 수행한 주요 작업을 명시했나요?
• 반환된 결과에 확인할 수 있는 항목(제목, ID, URL, 금액, 타임스탬프)이 포함되어 있나요?
• 다운로드의 경우 로컬 파일 경로를 제공했습니까?
• 수정하거나 제출하는 항목의 경우 최종 단계 전에 확인을 위해 일시 ​​중지되었습니까?
• Space에 관련 페이지가 아직 열려 있어서 살펴볼 수 있나요?

문제가 있는 것 같으면 에이전트에게 이전 답변에서 계속 추론하기보다는 현재 페이지의 스냅샷을 다시 찍도록 요청하세요.

일반적인 질문

에이전트가 참조가 유효하지 않다고 말하는 이유는 무엇인가요?

이전 스냅샷 이후 페이지가 변경되었습니다. 새 것을 가져 가도록 요청하십시오.

스냅샷으로 모든 내용을 읽을 수 있나요?

항상 그런 것은 아닙니다. 화면 밖의 콘텐츠, 이미지 내부의 텍스트, 복잡한 캔버스, 샌드박스가 적용된 교차 원본 iframe은 완전히 표시되지 않을 수 있습니다. 이러한 경우 에이전트는 스냅샷을 스크린샷, 텍스트 추출 또는 수동 확인과 결합할 수 있습니다.

스냅샷을 찍으면 페이지에 어떤 변화가 있나요?

아니요. 스냅샷은 페이지 구조만 읽습니다. 이후에 발생하는 클릭, 채우기, 제출, 업로드 및 삭제는 실제로 상태를 수정하는 것입니다.

@1 또는 @2를 기억해야 하나요?

아니요. 현재 페이지의 임시 번호로 취급하세요. 에이전트는 이를 사용합니다. 당신은 목표와 경계를 설정합니다.