Résumé IA
Section 1: Les faits essentiels Dans cet article intitulé "Comment construire un agent AI pour le Web guidé par la vision avec MolmoWeb-4B en utilisant la raisonnement multimodal et la prédiction d'actions", l'auteur décrit comment mettre en place MolmoWeb, un agent multimodal open source développé par Ai2. Cet agent peut comprendre et interagir directement avec les sites web à partir de captures d'écran, sans dépendre du HTML ou du parsing DOM. L'auteur configure l'ensemble de l'environnement dans Google Colab, charge le modèle MolmoWeb-4B avec une quantification efficace en 4 bits et établit précisément la séquence de prompts qui permet au modèle de raisonner sur une tâche web et de prédire les actions du navigateur. Le modèle est testé sur des pages vides, des captures d'écran synthétiques de sites web, et des scénarios de navigation à plusieurs étapes pour comprendre comment les agents web basés sur des captures d'écran pensent, agissent et maintiennent le contexte entre les étapes. Section 2: Pourquoi c'est important Cette approche est significative car elle permet aux IA d'interagir avec le contenu web de manière plus intuitive, similaire à la façon dont les humains le font lorsqu'ils naviguent sur Internet. Cela ouvre des possibilités pour créer des assistants intelligents capables de suivre des instructions complexes en utilisant des captures d'écran ou des descriptions visuelles comme entrée, améliorant ainsi l'accessibilité et la facilité d'utilisation pour les utilisateurs ayant des difficultés avec les interfaces traditionnelles. De plus, comprendre le processus de pensée interne d'un tel agent peut contribuer au développement de nouvelles méthodes de raisonnement artificiel et à une meilleure interprétabilité des systèmes d'IA. Section 3: Le contexte Le contexte de cet article est l'avancement rapide dans le domaine des grands modèles de langage (Large Language Models - LLMs) et l'intérêt croissant pour les agents AI capables d'interagir avec des environnements externes, y compris le Web. MolmoWeb représente une étape importante dans ce domaine en combinant la vision par ordinateur et le traitement du langage naturel pour permettre aux IA de naviguer sur Internet à partir de captures d'écran plutôt que de code source. En résumé, cet article décrit un tutoriel pour configurer et utiliser MolmoWeb-4B, un agent web multimodal open source qui peut comprendre et interagir avec des sites web à partir de captures d'écran. Cette approche offre des avantages significatifs en termes de facilité d'utilisation et d'accessibilité pour les utilisateurs et contribue au développement de modèles plus interprétables et capables dans le domaine du traitement du langage naturel et de la vision par ordinateur.
Impact France/UECet agent IA pourrait améliorer l'accessibilité des utilisateurs européens confrontés à des interfaces web complexes grâce à la navigation basée sur des captures d'écran.
In this tutorial, we explore MolmoWeb , Ai2’s open multimodal web agent that understands and interacts with websites directly from screenshots, without relying on HTML or DOM parsing. We set up the full environment in Colab, load the MolmoWeb-4B model with efficient 4-bit quantization, and build the exact prompting workflow that lets the model reason about a web task and predict browser actions. Also, we test the model on blank pages, synthetic web screenshots, and multi-step browsing scenarios to understand how screenshot-based web agents actually think, act, and maintain context across steps. Copy Code Copied Use a different Browser print("=" * 70) print("SECTION 1: Installing dependencies...") print("=" * 70) 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") print("\n" + "=" * 70) print("SECTION 2: Loading MolmoWeb-4B model...") print("=" * 70) 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'}") We set up the entire environment by installing all required dependencies and importing the core libraries needed for the tutorial. We ensure the runtime is properly configured for GPU usage and verify CUDA availability and device details. By the end of this step, we will have established a stable foundation for running MolmoWeb efficiently in Colab. Copy Code Copied Use a different Browser print("\n" + "=" * 70) print("SECTION 3: Understanding the prompt template & action space") print("=" * 70) 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 """) print("=" * 70) print("SECTION 4: Defining helper functions") print("=" * 70) def build_prompt(task_description, past_actions=None, page_title=None, page_url="about:blank", page_index=0): """Build the full MolmoWeb prompt from components.""" if past_actions is None: past_actions = [] user_message = MOLMOWEB_THINK_TEMPLATE.render( task_description=task_description, past_actions=past_actions, page_title=page_title, page_url=page_url, page_index=page_index, ) return f"{SYSTEM_MESSAGE}: {user_message}" def run_inference(prompt, image, max_new_tokens=300): """Run a single forward pass through MolmoWeb and return decoded text.""" messages = [ { "role": "user", "content": [ {"type": "text", "text": prompt}, {"type": "image", "image": image}, ], } ] inputs = processor.apply_chat_template( messages, tokenize=True, add_generation_prompt=True, return_tensors="pt", return_dict=True, padding=True, ) inputs = {k: v.to(model.device) for k, v in inputs.items()} with torch.inference_mode(), torch.autocast("cuda", dtype=torch.bfloat16): output = model.generate(**inputs, max_new_tokens=max_new_tokens) generated_tokens = output[0, inputs["input_ids"].size(1):] return processor.decode(generated_tokens, skip_special_tokens=True) def
