smolagents가 Vision Language Model 지원을 추가하여 에이전트가 이미지를 처리하고 동적으로 시각 정보를 메모리에 누적할 수 있는 웹 브라우징 자동화 실현

Context

에이전트 기반 시스템에서 웹 페이지의 텍스트 추출만으로는 객체 위치, 색상 메시지, 아이콘 등 시각적 정보를 완전히 복구할 수 없는 문제가 있었다. 이는 웹 브라우징이나 Document AI와 같은 작업에서 에이전트의 능력을 제한했다.

Technical Solution

• 에이전트 초기화 단계에서 여러 이미지를 리스트로 전달: agent.run("Describe these images:", images=[image_1, image_2]) 메서드를 통해 TaskStep의 task_images 속성에 이미지와 프롬프트를 함께 저장
• 각 스텝마다 동적으로 이미지 추가: MultiStepAgent 클래스의 ReAct 루프 말미에 실행되는 step_callbacks에서 콜백 함수를 정의하여 ActionStep의 step_log.observation_images 속성에 이미지 기록
• 에이전트 메모리 쓰기 프로세스 연동: write_inner_memory_from_logs()로 에이전트 로그를 LLM이 읽을 수 있는 chat message 형식으로 변환할 때 이미지 정보 포함
• 웹 브라우저 자동화 통합: helium 라이브러리의 selenium 기반 브라우저 자동화를 CodeAgent에 직접 통합하여 click(), search_item_ctrl_f() 등의 도구와 함께 시각 정보 활용
• 콜백 기반 이미지 스냅샷 캡처: 각 에이전트 스텝 실행 후 자동으로 현재 페이지의 스크린샷을 캡처하여 모델의 관찰(observation)에 포함

Key Takeaway

에이전트 프레임워크에서 이미지 처리를 위해 ReAct 루프의 콜백 메커니즘을 활용하면 동적으로 수집된 시각 정보를 일관되게 모델의 메모리에 통합할 수 있다. 이는 웹 브라우징, Document AI 등 시각 정보 기반 의사결정이 필요한 자율 에이전트 구현의 핵심 패턴이다.