MolmoWeb-4B 튜토리얼: 스크린샷 기반 멀티모달 웹 에이전트 구축 가이드

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

핵심 요약

기존 웹 에이전트들이 복잡한 HTML이나 DOM 구조에 의존하는 것과 달리, MolmoWeb은 스크린샷 이미지만을 입력받아 웹사이트를 이해하고 상호작용한다. 이 튜토리얼은 MolmoWeb-4B 모델을 4비트 양자화(NF4)를 통해 무료 Google Colab 환경에서 로드하고 실행하는 전체 파이프라인을 제공한다. 사용자는 작업 목표와 이전 단계 기록이 포함된 프롬프트 템플릿을 통해 모델이 사고(Thought)와 행동(Action)을 생성하도록 유도하며, 생성된 좌표를 스크린샷 위에 시각화하여 검증할 수 있다. 결과적으로 4B 규모의 경량 모델로도 복잡한 다단계 웹 브라우징 시나리오를 처리할 수 있는 실용적인 에이전트 아키텍처를 제시한다.

배경

Python 프로그래밍 기초, PyTorch 및 Transformers 라이브러리 사용 경험, Google Colab 환경 사용법

대상 독자

저비용으로 멀티모달 웹 에이전트를 구축하려는 AI 개발자 및 연구자

의미 / 영향

이 기술은 복잡한 웹 구조에 의존하지 않는 범용 웹 에이전트의 대중화를 가속화한다. 특히 4B 규모의 소형 모델로도 충분한 성능을 낼 수 있음을 보여줌으로써, 온디바이스 또는 저사양 서버 환경에서도 자율형 웹 에이전트 배포가 가능해질 것으로 전망된다.

섹션별 상세

웹 에이전트의 추론 비용과 메모리 요구 사항을 낮추기 위해 4비트 양자화 기술을 적용한다. BitsAndBytesConfig를 사용하여 allenai/MolmoWeb-4B 모델을 NF4 형식으로 로드함으로써 약 6GB의 VRAM만으로도 T4 GPU 환경에서 원활한 추론이 가능하다. 이를 통해 고성능 하드웨어 없이도 멀티모달 웹 에이전트의 성능을 테스트하고 프로토타입을 제작할 수 있다.

python

bnb_config = BitsAndBytesConfig(
    load_in_4bit=True,
    bnb_4bit_quant_type="nf4",
    bnb_4bit_compute_dtype=torch.bfloat16,
    bnb_4bit_use_double_quant=True,
)
model = AutoModelForImageTextToText.from_pretrained(
    CHECKPOINT, trust_remote_code=True, quantization_config=bnb_config, device_map="auto",
)

BitsAndBytes를 사용하여 MolmoWeb-4B 모델을 4비트 NF4 방식으로 양자화하여 로드하는 코드

모델이 일관된 논리적 흐름을 유지하도록 GOAL, PREVIOUS STEPS, CURRENT PAGE로 구성된 구조화된 프롬프트 템플릿을 사용한다. 모델은 입력된 스크린샷과 프롬프트를 바탕으로 현재 상황을 분석하는 'THOUGHT'와 실제 브라우저 명령인 'ACTION'을 순차적으로 출력한다. 이러한 구조는 에이전트가 이전 단계의 맥락을 잃지 않고 복잡한 다단계 작업을 완수할 수 있게 돕는다.

python

MOLMOWEB_THINK_TEMPLATE = Template("""
 # GOAL {{ task_description }}
 # PREVIOUS STEPS
 {% for action in past_actions -%}
 ## Step {{ action['index'] }}
 THOUGHT: {{ action['thought'] }}
 ACTION: {{ action['action'] }}
 {% endfor %}
 # CURRENTLY ACTIVE PAGE
 Page {{ page_index }}: {{ page_title }} | {{ page_url }}
 # NEXT STEP
 """)

모델의 사고 과정과 행동 이력을 구조화하여 전달하는 프롬프트 템플릿 정의

MolmoWeb은 click(x, y), type("text"), goto(url) 등 9가지 이상의 명확한 액션 공간(Action Space)을 정의하여 브라우저 제어를 수행한다. 특히 클릭 액션의 경우 0.0에서 1.0 사이의 정규화된 좌표를 반환하며, 이를 실제 이미지 픽셀로 변환하여 시각화하는 헬퍼 함수를 통해 모델의 정확도를 직관적으로 확인할 수 있다. 이는 모델의 시각적 접지(Visual Grounding) 능력을 실무적으로 활용하는 핵심 요소이다.

python

def parse_action_details(action_str):
    action_str = action_str.strip()
    m = re.match(r'click\(\s*([\d.]+)\s*,\s*([\d.]+)\s*\)', action_str)
    if m:
        return {"type": "click", "x": float(m.group(1)), "y": float(m.group(2))}
    m = re.match(r'goto\(\s*["\'](.+?)["\']\s*\)', action_str)
    if m:
        return {"type": "goto", "url": m.group(1)}
    // ...(중략)
    return {"type": "unknown", "raw": action_str}

모델이 생성한 텍스트 명령을 구조화된 데이터(JSON 형식)로 파싱하는 함수

실제 운영 환경을 위해 Playwright와 연동된 비동기 에이전트 루프 아키텍처를 참고용으로 제공한다. 브라우저에서 스크린샷을 캡처하고 모델의 출력을 구문 분석하여 실제 마우스 및 키보드 이벤트를 실행하는 반복 과정을 통해 자율적인 웹 탐색이 가능해진다. 튜토리얼에서는 가상의 스크린샷을 활용한 3단계 시뮬레이션을 통해 이 루프가 어떻게 작동하는지 구체적으로 입증한다.

실무 Takeaway

HTML 파싱 없이 스크린샷만 사용하는 MolmoWeb을 활용하면 DOM 구조가 복잡하거나 동적인 웹사이트에서도 안정적인 에이전트 구축이 가능하다.
4비트 양자화(NF4)를 적용하여 MolmoWeb-4B 모델을 6GB 미만의 VRAM에서 실행함으로써 저비용으로 고성능 멀티모달 추론 환경을 구성할 수 있다.
모델의 출력을 'THOUGHT'와 'ACTION'으로 분리하여 파싱하고 클릭 좌표를 시각화함으로써 에이전트의 의사결정 과정을 투명하게 모니터링할 수 있다.

언급된 리소스

API DocsMolmoWeb Models on Hugging Face

GitHubMolmoWeb GitHub Repository

논문MolmoWeb Technical Report

DemoMolmoWeb Live Demo

bnb_config = BitsAndBytesConfig( load_in_4bit=True, bnb_4bit_quant_type="nf4", bnb_4bit_compute_dtype=torch.bfloat16, bnb_4bit_use_double_quant=True, ) model = AutoModelForImageTextToText.from_pretrained( CHECKPOINT, trust_remote_code=True, quantization_config=bnb_config, device_map="auto", )

MOLMOWEB_THINK_TEMPLATE = Template(""" # GOAL {{ task_description }} # PREVIOUS STEPS {% for action in past_actions -%} ## Step {{ action['index'] }} THOUGHT: {{ action['thought'] }} ACTION: {{ action['action'] }} {% endfor %} # CURRENTLY ACTIVE PAGE Page {{ page_index }}: {{ page_title }} | {{ page_url }} # NEXT STEP """)

def parse_action_details(action_str): action_str = action_str.strip() m = re.match(r'click\(\s*([\d.]+)\s*,\s*([\d.]+)\s*\)', action_str) if m: return {"type": "click", "x": float(m.group(1)), "y": float(m.group(2))} m = re.match(r'goto\(\s*["\'](.+?)["\']\s*\)', action_str) if m: return {"type": "goto", "url": m.group(1)} // ...(중략) return {"type": "unknown", "raw": action_str}

MolmoWeb-4B 튜토리얼: 스크린샷 기반 멀티모달 웹 에이전트 구축 가이드

핵심 요약

배경

대상 독자

의미 / 영향

섹션별 상세

실무 Takeaway

언급된 리소스

MolmoWeb-4B 튜토리얼: 스크린샷 기반 멀티모달 웹 에이전트 구축 가이드

핵심 요약

배경

대상 독자

의미 / 영향

섹션별 상세

실무 Takeaway

언급된 리소스

관련 토론

댓글

관련 피드

관련 토론

댓글

관련 피드