_{🧠 图解记忆：视觉Agent完整示例：Bug修复Agent；点击图片可查看原图。}

💡 答案要点

视觉Agent工具分类：

工具类型	功能	示例
视觉感知	理解图像内容	OCR、目标检测、图像描述
视觉生成	创建或编辑图像	文生图、图像编辑、截图
视觉操作	在环境中执行	鼠标点击、UI操作、机器人控制
跨模态检索	图文匹配搜索	相似图片搜索、以图搜图

核心工具实现：

展开 Python 代码示例（43 行）

from PIL import Image
import base64, io

# ========== 工具1：截取屏幕区域 ==========
def capture_screen(region: tuple[int,int,int,int]) -> str:
    """截取屏幕指定区域，返回base64编码"""
    screenshot = pyscreeze.screenshot(region=region)
    return image_to_base64(screenshot)

# ========== 工具2：目标检测定位 ==========
def detect_ui_element(image: Image.Image, element_desc: str) -> dict:
    """
    描述 → 坐标定位
    返回: {"x": 100, "y": 200, "width": 50, "height": 30}
    """
    # 使用GPT-4V + 提示词工程
    prompt = f"""
    在这张UI截图中，找到"{element_desc}"的位置。
    返回JSON格式: {{"x": 左上x, "y": 左上y, "width": 宽度, "height": 高度}}
    如果找不到，返回null。
    """
    response = gpt4v.analyze(image, prompt=prompt)
    return json.loads(response)

# ========== 工具3：OCR文字识别 ==========
def ocr_text(image: Image.Image) -> str:
    """从图像中提取文字"""
    return pytesseract.image_to_string(image)

# ========== 工具4：点击坐标 ==========
def click_at坐标(x: int, y: int):
    """在指定坐标执行鼠标点击"""
    pyautogui.click(x, y)

# ========== 工具5：图像差异检测 ==========
def detect_image_diff(img1: Image, img2: Image) -> float:
    """计算两张图的视觉差异（0-1，越大差异越大）"""
    # 方法1：像素级MSE
    # 方法2：感知哈希（pHash）
    # 方法3：CLIP embedding余弦距离
    emb1 = clip_encode_image(img1)
    emb2 = clip_encode_image(img2)
    return 1 - cosine_similarity(emb1, emb2)

视觉Agent完整示例：Bug修复Agent

展开 Python 代码示例（37 行）

class VisualBugFixAgent:
    def __init__(self):
        self.llm = GPT4o()
        self.tools = {
            "capture_screen": capture_screen,
            "detect_element": detect_ui_element,
            "click_at": click_at坐标,
            "ocr": ocr_text,
            "search_code": search_codebase,
            "write_code": write_to_file
        }

    def fix_bug(self, screenshot_region=(0, 0, 1920, 1080)):
        # Step 1: 捕获错误截图
        error_screenshot = self.tools["capture_screen"](screenshot_region)

        # Step 2: 让LLM分析错误
        analysis = self.llm.analyze_image(error_screenshot, prompt="""
            这是一个软件错误截图。
            1. 识别错误类型（UI错位/功能异常/崩溃）
            2. 提取错误信息文本
            3. 判断可能的代码原因
        """)

        # Step 3: 搜索相关代码
        code_snippets = self.tools["search_code"](error_keywords=analysis.error_keywords)

        # Step 4: 生成修复方案
        fix = self.llm.generate(prompt=f"""
            错误分析: {analysis}
            相关代码: {code_snippets}
            请生成bug修复代码和说明。
        """)

        # Step 5: 自动修复或输出给开发者
        self.tools["write_code"](fix.code)
        return fix.summary

面试话术：

示例表达（仅在能用本人经历或可复现实验佐证时使用）： "视觉Agent的工具设计关键是'把视觉感知转化为可执行动作'。我设计了一个截图测试Agent：捕获截图→GPT-4V分析错误→定位UI元素→执行修复。核心是让LLM理解视觉后调用工具操作，而不是只输出文字。"

📚 参考：Qwen-VL（视觉工具调用的代表模型）