비전 기반 웹 AI 에이전트 구축: 몰모웹-4B를 활용한 다중 모드 추론 및 액션 예측

웹 자동화와 AI의 융합은 미래 기술의 중요한 트렌드입니다. 이전에는 개발자의 개입 없이는 불가능했던 웹 작업을 자동화하는 솔루션이 등장하면서 사용자 경험이 혁신되고 효율성이 향상되었습니다. 이 중에서도 몰모웹은 획기적인 접근 방식을 제시합니다. 몰모웹은 웹사이트의 스크린샷을 직접 이해하고 상호 작용하는 오픈 소스 멀티모달 웹 에이전트로서, HTML이나 DOM 파싱에 의존하지 않고 시각 정보를 기반으로 웹 작업을 수행합니다. 이 튜토리얼에서는 몰모웹의 핵심 원리를 살펴보고, Colab 환경에서 몰모웹을 사용하여 실제 웹 작업을 자동화하는 방법을 단계별로 안내합니다.

몰모웹은 단순히 웹 페이지를 탐색하는 것을 넘어, 사용자의 의도를 이해하고 적절한 행동을 예측하는 능력을 갖추고 있습니다. 이는 사용자에게 더욱 직관적이고 편리한 웹 경험을 제공하며, 복잡한 웹 작업을 자동화하여 생산성을 향상시킵니다. 이 튜토리얼을 통해 몰모웹의 잠재력을 최대한 활용하고, 웹 자동화 분야의 혁신에 동참할 수 있을 것입니다.

섹션 1: 환경 설정 및 필수 라이브러리 설치

몰모웹을 사용하기 위해서는 먼저 필요한 환경을 설정하고 관련 라이브러리를 설치해야 합니다. 이 단계에서는 Colab 환경을 설정하고, 필요한 라이브러리를 설치하며, PyTorch의 버전 및 CUDA 가용성을 확인합니다. 이 과정은 몰모웹을 원활하게 실행하기 위한 기반을 마련하는 중요한 단계입니다.

import subprocess, sys

def pip_install(*packages):
   subprocess.check_call([
       sys.executable, "-m", "pip", "install", "-q"] + list(packages)
   ))

pip_install(
   "transformers>=4.48.0",
   "accelerate",
   "bitsandbytes",
   "jinja2",
   "Pillow",
   "requests",
   "datasets",
   "matplotlib",
   "torch",
)

import torch
import re
import json
import textwrap
from PIL import Image, ImageDraw, ImageFont
import requests
from io import BytesIO
from jinja2 import Template
import matplotlib.pyplot as plt
import matplotlib.patches as patches
from transformers import AutoProcessor, AutoModelForImageTextToText, BitsAndBytesConfig

print(f"PyTorch {torch.__version__}  |  CUDA available: {torch.cuda.is_available()}")
if torch.cuda.is_available():
   print(f"   GPU: {torch.cuda.get_device_name(0)}")
   mem_gb = torch.cuda.get_device_properties(0).total_mem / 1e9
   print(f"   VRAM: {mem_gb:.1f} GB")

섹션 2: 몰모웹 모델 로딩 및 설정

이 섹션에서는 몰모웹-4B 모델을 로드하고 효율적인 4비트 양자화를 적용합니다. 모델 로딩 과정은 몰모웹의 성능과 메모리 사용량에 직접적인 영향을 미치므로, 적절한 설정이 중요합니다. 특히, 4비트 양자화는 모델 크기를 줄이고 메모리 사용량을 최적화하여 Colab 환경에서도 몰모웹을 원활하게 실행할 수 있도록 지원합니다.

CHECKPOINT = "allenai/MolmoWeb-4B"

QUANTIZE = True

if QUANTIZE:
   print("Using 4-bit NF4 quantization (fits ~6 GB VRAM)")
   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",
   )
else:
   print("Loading in full bfloat16 precision")
   model = AutoModelForImageTextToText.from_pretrained(
       CHECKPOINT,
       trust_remote_code=True,
       torch_dtype=torch.bfloat16,
       device_map="auto",
   )

processor = AutoProcessor.from_pretrained(
   CHECKPOINT,
   trust_remote_code=True,
   padding_side="left",
)

print(f"Model loaded: {CHECKPOINT}")
print(f"   Device map: {model.hf_device_map if hasattr(model, 'hf_device_map') else 'single device'}")

섹션 3: 프롬프트 템플릿 및 액션 공간 이해

몰모웹의 핵심은 프롬프트 템플릿을 통해 모델이 웹 작업을 수행하도록 지시하는 것입니다. 이 섹션에서는 몰모웹의 프롬프트 템플릿 구조와 액션 공간을 자세히 살펴봅니다. 프롬프트 템플릿은 모델이 웹 페이지의 상태를 이해하고 적절한 행동을 예측하는 데 필요한 정보를 제공합니다. 또한, 액션 공간은 모델이 수행할 수 있는 다양한 행동 목록을 정의하며, 이를 통해 모델은 웹 환경과 상호 작용할 수 있습니다.

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
""")

SYSTEM_MESSAGE = "molmo_web_think"

print("""
MolmoWeb Action Space:
 goto(url)        - Navigate to a URL
 click(x, y)      - Click at normalised coordinates (0.0-1.0)
 type("text")     - Type text into focused element
 scroll(dir)      - Scroll the page (up/down)
 press("key")     - Press a key (Enter, Tab, etc.)
 new_tab()        - Open a new tab
 switch_tab(n)    - Switch to tab n
 go_back()        - Navigate back
 send_msg("text") - Reply to the user with an answer
""")

섹션 4: 헬퍼 함수 정의

이 섹션에서는 몰모웹 작업을 수행하기 위한 다양한 헬퍼 함수를 정의합니다. 이러한 함수는 프롬프트 생성, 모델 추론, 출력 파싱 등 몰모웹의 핵심 기능을 수행하는 데 사용됩니다. 특히, 프롬프트 생성 함수는 모델이 이해할 수 있는 형식으로 입력 데이터를 변환하고, 모델 추론 함수는 모델을 실행하여 답변을 생성합니다. 또한, 출력 파싱 함수는 모델의 출력을 분석하여 유용한 정보를 추출합니다.

섹션 5: 단일 단계 추론 – 빈 페이지 (콜드 스타트)

섹션 6: 단일 단계 추론 – 웹페이지 스크린샷

섹션 7: 멀티 스텝 에이전트 루프 (시뮬레이션)

섹션 8: 액션 파싱 & 라우팅 데모

섹션 9: 배치 추론 – 다양한 작업

섹션 10: 몰모웹믹스 훈련 데이터셋 살펴보기

이 튜토리얼에서는 몰모웹의 작동 원리를 이해하고, 실제 웹 작업을 자동화하는 방법을 배우었습니다. 몰모웹은 웹 자동화 분야의 혁신을 이끌고 있으며, 사용자에게 더욱 편리하고 효율적인 웹 경험을 제공할 수 있도록 지원합니다. 앞으로 몰모웹을 활용하여 더욱 다양한 웹 자동화 솔루션을 개발하고, 웹 환경을 더욱 스마트하게 만들 수 있을 것입니다.

몰모웹은 단순한 도구를 넘어, 웹 자동화의 미래를 엿볼 수 있는 중요한 열쇠입니다. 이 튜토리얼을 통해 몰모웹의 잠재력을 최대한 활용하고, 웹 자동화 분야의 혁신에 동참할 수 있기를 바랍니다.

심층 분석 및 시사점

Array

원문 출처: How to Build a Vision-Guided Web AI Agent with MolmoWeb-4B Using Multimodal Reasoning and Action Prediction