AI Agents · บทเรียน

โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ

ส่งภาพหน้าจอให้โมเดลแบบหลายรูปแบบ เพื่อให้เอเจนต์ “มองเห็น” สิ่งที่มนุษย์จะเห็น

โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ เป็นบทเรียน AI Agents ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน AI Agents และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส AI Agents มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

ทำไมต้องใช้การมองเห็น

การกระทำบนเว็บบางอย่างอธิบายด้วยตัวเลือกองค์ประกอบได้ยาก:

แคปชาท์ (หรืออย่างน้อยก็ความพยายามในการจัดการกับแคปชาท์)
องค์ประกอบที่จัดตำแหน่งด้วยภาพ (ฟองแชต ส่วนติดต่อผู้ใช้แบบไดนามิก)
แอปที่ไม่มี DOM ที่เสถียร (Canvas / WebGL)

LLM แบบหลายรูปแบบช่วยให้เอเจนต์ SEE หน้าจอได้

Take a Screenshot, Send to LLM

import base64
page.screenshot(path='screen.png')
with open('screen.png', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode()

response = client.chat.completions.create(
    model='gpt-4o',
    messages=[{
        'role': 'user',
        'content': [
            {'type': 'text', 'text': 'What buttons are visible? Return JSON.'},
            {'type': 'image_url', 'image_url': {'url': f'data:image/png;base64,{b64}'}}
        ]
    }]
)

Anthropic Vision

response = client.messages.create(
    model='claude-sonnet-4-5',
    max_tokens=1024,
    messages=[{
        'role': 'user',
        'content': [
            {'type': 'image', 'source': {'type': 'base64', 'media_type': 'image/png', 'data': b64}},
            {'type': 'text', 'text': 'Describe what you see.'}
        ]
    }]
)

คุณภาพการมองเห็น

GPT-4o และ Claude Sonnet 4.5 สามารถทำสิ่งต่อไปนี้ได้:

อธิบายภาพหน้าจอได้อย่างแม่นยำ
อ่านข้อความในภาพ (OCR)
ระบุองค์ประกอบส่วนติดต่อผู้ใช้จากตำแหน่ง
ตรวจพบรูปแบบและความผิดปกติ

อย่างไรก็ตาม ทั้งสองยังมีปัญหากับข้อความขนาดเล็กมาก ตารางซับซ้อน และพิกัดพิกเซลที่ต้องแม่นยำ

ค้นหาองค์ประกอบด้วยคำอธิบาย

ถามโมเดลว่า "ปุ่ม Submit อยู่ที่ไหน" แล้วโมเดลจะส่งพิกัดโดยประมาณหรือคำแนะนำกลับมา:

prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}

ข้อควรระวังเรื่องความแม่นยำของพิกัด

โมเดลไม่ได้แม่นยำถึงระดับพิกเซล ให้ถือว่าพิกัดของโมเดลเป็นเพียงคำใบ้ หากต้องการคลิกอย่างแม่นยำ ให้ใช้ตัวเลือก DOM ร่วมด้วยเมื่อทำได้

SoM (ชุดเครื่องหมาย)

ใส่หมายเลขกำกับในภาพหน้าจอ โดยวาดกรอบรอบองค์ประกอบที่โต้ตอบได้ แล้วถามโมเดลว่า "คุณต้องการคลิกหมายเลขใด":

ระบุองค์ประกอบที่โต้ตอบได้ผ่าน DOM
วาดภาพซ้อนทับที่มีหมายเลขกำกับ
ส่งภาพหน้าจอที่มีคำอธิบายกำกับให้ LLM
LLM ตอบกลับเป็นหมายเลข แล้วคุณคลิกองค์ประกอบนั้น

เชื่อถือได้มากกว่าการใช้พิกัดอิสระอย่างเห็นได้ชัด

Code for SoM

elements = page.query_selector_all('button, a, input, [role="button"]')
annotated = draw_numbered_overlays(screenshot, elements)
idx = ask_llm_for_choice(annotated, prompt='Click the Submit button')
elements[idx].click()

การให้เหตุผลจากหลายเฟรม

สำหรับหน้าเว็บแบบไดนามิก ให้ถ่ายภาพหน้าจอในหลายช่วงเวลาแล้วส่งทั้งหมดให้โมเดล โมเดลจะให้เหตุผลเกี่ยวกับการเปลี่ยนแปลงตามเวลาได้

เวลาแฝงและต้นทุน

ภาพหน้าจอแต่ละภาพมีขนาดประมาณ 85k tokens เมื่อใช้ความละเอียดเต็ม ต้นทุนมีดังนี้:

gpt-4o: 0.85 ดอลลาร์สหรัฐต่อ 100 ภาพ
claude-sonnet-4-5: ประมาณ 1.50 ดอลลาร์สหรัฐต่อ 100 ภาพ

ปรับขนาดภาพก่อนส่ง และใช้การมองเห็นเฉพาะเมื่อการเลือกโดยอิง DOM ล้มเหลว

Resize for Cheaper Calls

from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')

ทางเลือกสำรองด้วย OCR

สำหรับการดึงข้อความล้วน OCR (Tesseract, PaddleOCR) มีราคาถูกกว่ามาก และมักทำได้ดีกว่า LLM ด้านการมองเห็น

รูปแบบ SoM

รูปแบบการเขียนพรอมต์แบบ Set-of-Marks (SoM) คืออะไร

สรุปทบทวน

ส่งภาพหน้าจอให้ GPT-4o หรือ Claude เพื่อทำความเข้าใจหน้าจอ ใช้คำอธิบายแบบ SoM เพื่อให้โต้ตอบได้อย่างเชื่อถือได้ ใช้ OCR สำหรับข้อความล้วน และปรับขนาดภาพเพื่อลดต้นทุน

คำถามที่พบบ่อย

บทเรียน “โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส AI Agents ให้อัปเกรดเป็น CoddyKit PRO คอร์ส AI Agents มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ”

ส่งภาพหน้าจอให้โมเดลแบบหลายรูปแบบ เพื่อให้เอเจนต์ “มองเห็น” สิ่งที่มนุษย์จะเห็น คุณปฏิบัติ AI Agents ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน AI Agents หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน AI Agents บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน AI Agents นี้ได้ไหม

ได้ บทเรียน AI Agents ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การทำงานอัตโนมัติบนเบราว์เซอร์ด้วย Playwright
โมเดลการมองเห็นเพื่อทำความเข้าใจหน้าจอ
รูปแบบการใช้งานคอมพิวเตอร์ (Anthropic Computer-Use)
การสร้างเอเจนต์กรอกแบบฟอร์มที่เชื่อถือได้

← กลับไปที่ AI Agents