0Pricing
AI Agents · บทเรียน

เอเจนต์ภาพ + ข้อความด้วย Claude Vision และ GPT-4V

ส่งภาพในการเรียก API การยึดโยงกับภาพ และการใช้เครื่องมือที่เข้าใจภาพ

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

เอเจนต์หลายรูปแบบ: ภาพและข้อความ

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

การส่งภาพด้วยเอพีไอของ OpenAI

โมเดลการมองเห็นของ OpenAI (GPT-4o, GPT-4V) รองรับอาร์เรย์ content แทนสตริงธรรมดา แต่ละองค์ประกอบอาจเป็นออบเจ็กต์ text หรือออบเจ็กต์ image_url ภาพอาจเป็นที่อยู่สาธารณะหรือที่อยู่ข้อมูลซึ่งเข้ารหัสด้วยเบส64

from openai import OpenAI

client = OpenAI(api_key='YOUR_OPENAI_API_KEY')

# Using a public URL
response = client.chat.completions.create(
    model='gpt-4o',
    messages=[
        {
            'role': 'user',
            'content': [
                {
                    'type': 'image_url',
                    'image_url': {
                        'url': 'https://example.com/chart.png'
                    }
                },
                {
                    'type': 'text',
                    'text': 'What trend does this chart show?'
                }
            ]
        }
    ],
    max_tokens=512
)
print(response.choices[0].message.content)

การเข้ารหัสภาพด้วยเบส64

สำหรับภาพที่บุคคลทั่วไปเข้าถึงไม่ได้ (ไฟล์ในเครื่อง ภาพหน้าจอ และไฟล์ที่ผู้ใช้อัปโหลด) ให้เข้ารหัสเป็นเบส64 แล้วฝังลงในการเรียกเอพีไอโดยตรงด้วยรูปแบบที่อยู่ data:image/jpeg;base64,...

import base64
from pathlib import Path

Path('screenshot.png').write_bytes(b'\x89PNG\r\n\x1a\n' + bytes(range(40)))

def encode_image_to_base64(image_path: str) -> str:
    with open(image_path, 'rb') as f:
        return base64.b64encode(f.read()).decode('utf-8')

def build_image_message(image_path: str, question: str, mime: str = 'jpeg') -> dict:
    b64 = encode_image_to_base64(image_path)
    data_url = f'data:image/{mime};base64,{b64}'
    return {
        'role': 'user',
        'content': [
            {'type': 'image_url', 'image_url': {'url': data_url}},
            {'type': 'text', 'text': question}
        ]
    }

message = build_image_message('screenshot.png', 'What error is shown?', mime='png')
print('Message built, image size:', len(message['content'][0]['image_url']['url']))

เอพีไอการมองเห็นของโคลด

โมเดลโคลดของ Anthropic รองรับการมองเห็นเช่นกัน บล็อกเนื้อหาใช้ฟิลด์ source พร้อม type: base64 และ media_type โครงสร้างแตกต่างจากของ OpenAI เล็กน้อย แต่มีความสามารถไม่แพ้กัน

import anthropic
import base64

client = anthropic.Anthropic(api_key='YOUR_ANTHROPIC_API_KEY')

with open('diagram.png', 'rb') as f:
    image_data = base64.standard_b64encode(f.read()).decode('utf-8')

response = client.messages.create(
    model='claude-opus-4-5',
    max_tokens=512,
    messages=[
        {
            'role': 'user',
            'content': [
                {
                    'type': 'image',
                    'source': {
                        'type': 'base64',
                        'media_type': 'image/png',
                        'data': image_data
                    }
                },
                {
                    'type': 'text',
                    'text': 'Describe the architecture shown in this diagram.'
                }
            ]
        }
    ]
)
print(response.content[0].text)

การตรวจจับชนิด MIME จากนามสกุลไฟล์

รูปแบบภาพแต่ละชนิด (JPEG, PNG, GIF, เวบพี) ใช้ชนิด MIME ที่แตกต่างกัน ให้ตรวจจับชนิด MIME จากนามสกุลไฟล์โดยอัตโนมัติ เพื่อไม่ต้องกำหนดชนิดดังกล่าวไว้ตายตัวในโค้ดของเอเจนต์

import os
import base64

with open('photo.jpg', 'wb') as f:
    f.write(b'\xff\xd8\xff' + bytes(range(30)))

MIME_MAP = {
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.png': 'image/png',
    '.gif': 'image/gif',
    '.webp': 'image/webp'
}

def get_mime_type(image_path: str) -> str:
    ext = os.path.splitext(image_path)[1].lower()
    mime = MIME_MAP.get(ext)
    if not mime:
        raise ValueError(f'Unsupported image format: {ext}')
    return mime

def load_image_as_base64(image_path: str) -> tuple:
    """Returns (base64_string, mime_type)"""
    mime = get_mime_type(image_path)
    with open(image_path, 'rb') as f:
        b64 = base64.b64encode(f.read()).decode('utf-8')
    return b64, mime

b64, mime = load_image_as_base64('photo.jpg')
print(f'MIME: {mime}, Size: {len(b64)} bytes base64')

การวิเคราะห์ภาพในวงจรเอเจนต์

ในวงจรเอเจนต์ การวิเคราะห์ภาพถือเป็นเครื่องมือชนิดหนึ่ง เอเจนต์จะตัดสินใจว่าจะเรียกใช้เมื่อใด เช่นเดียวกับเครื่องมืออื่น ๆ ให้กำหนดเครื่องมือนี้ไว้ในแบบแผนเครื่องมือ และส่งคืนข้อมูลที่มีโครงสร้าง (JSON) เพื่อให้เอเจนต์นำไปให้เหตุผลด้วยโปรแกรมได้

def analyze_image_tool(image_path: str, query: str) -> dict:
    """
    Agent tool: analyse an image and return structured findings.
    """
    import anthropic, base64
    client = anthropic.Anthropic(api_key='YOUR_API_KEY')
    b64, mime = load_image_as_base64(image_path)

    structured_query = (
        query + '\n\nRespond with JSON only: '
        '{"description": str, "objects": [str], "text_found": str, "confidence": float}'
    )
    response = client.messages.create(
        model='claude-opus-4-5',
        max_tokens=512,
        messages=[{
            'role': 'user',
            'content': [
                {'type': 'image', 'source': {'type': 'base64',
                  'media_type': mime, 'data': b64}},
                {'type': 'text', 'text': structured_query}
            ]
        }]
    )
    import json
    return json.loads(response.content[0].text)

การควบคุมระดับรายละเอียดของภาพ (OpenAI)

เอพีไอการมองเห็นของ OpenAI รองรับพารามิเตอร์ detail ได้แก่ low (รวดเร็ว ประหยัด ใช้ 85 โทเค็น), high (ละเอียด แบ่งภาพเป็นช่อง ใช้ได้สูงสุด 1105 โทเค็น) หรือ auto (ให้โมเดลตัดสินใจ) ใช้ low สำหรับคำถามง่าย ๆ ที่ตอบใช่หรือไม่ใช่ และใช้ high สำหรับการวิเคราะห์ที่ต้องละเอียด เช่น การอ่านข้อความขนาดเล็ก

def query_image_openai(
    image_path: str,
    question: str,
    detail: str = 'auto'  # 'low', 'high', or 'auto'
) -> str:
    import base64
    from openai import OpenAI
    client = OpenAI(api_key='YOUR_OPENAI_API_KEY')
    b64, mime = load_image_as_base64(image_path)
    data_url = f'data:{mime};base64,{b64}'

    response = client.chat.completions.create(
        model='gpt-4o',
        max_tokens=512,
        messages=[{
            'role': 'user',
            'content': [
                {
                    'type': 'image_url',
                    'image_url': {'url': data_url, 'detail': detail}
                },
                {'type': 'text', 'text': question}
            ]
        }]
    )
    return response.choices[0].message.content

การสนทนาหลายภาพ

คุณสามารถส่งภาพหลายภาพในข้อความเดียว หรือส่งข้ามรอบต่าง ๆ ของการสนทนาได้ ซึ่งทำให้รองรับงานเปรียบเทียบ เช่น “เปรียบเทียบภาพหน้าจอสองภาพนี้และอธิบายว่ามีอะไรเปลี่ยนแปลง”

def compare_two_images(
    image_path_1: str,
    image_path_2: str,
    comparison_question: str
) -> str:
    import anthropic, base64
    client = anthropic.Anthropic(api_key='YOUR_API_KEY')
    b64_1, mime_1 = load_image_as_base64(image_path_1)
    b64_2, mime_2 = load_image_as_base64(image_path_2)

    response = client.messages.create(
        model='claude-opus-4-5',
        max_tokens=512,
        messages=[{
            'role': 'user',
            'content': [
                {'type': 'image', 'source': {'type': 'base64',
                  'media_type': mime_1, 'data': b64_1}},
                {'type': 'image', 'source': {'type': 'base64',
                  'media_type': mime_2, 'data': b64_2}},
                {'type': 'text', 'text': comparison_question}
            ]
        }]
    )
    return response.content[0].text

เอเจนต์ภาพ: เครื่องอ่านภาพหน้าจอ

กรณีใช้งานจริงอย่างหนึ่งคือเอเจนต์ที่อ่านภาพหน้าจอของแอปพลิเคชันเพื่อดึงค่าช่องกรอกข้อมูล ข้อความแสดงข้อผิดพลาด หรือสถานะส่วนติดต่อผู้ใช้ ซึ่งมีประโยชน์สำหรับการทำงานอัตโนมัติด้านการทดสอบและกระบวนการทำงานด้านการตรวจสอบ

SCREENSHOT_READER_PROMPT = (
    'You are a UI analyser. Given this application screenshot, extract:\n'
    '1. The current page/screen name\n'
    '2. Any error messages\n'
    '3. Key UI elements visible (buttons, form fields, text)\n'
    '4. The overall app state\n\n'
    'Return JSON: {"screen": str, "errors": [str], '
    '"elements": [str], "state": str}'
)

def read_screenshot(screenshot_path: str) -> dict:
    import anthropic, base64, json
    client = anthropic.Anthropic(api_key='YOUR_API_KEY')
    b64, mime = load_image_as_base64(screenshot_path)
    response = client.messages.create(
        model='claude-opus-4-5',
        max_tokens=512,
        messages=[{
            'role': 'user',
            'content': [
                {'type': 'image', 'source': {'type': 'base64',
                  'media_type': mime, 'data': b64}},
                {'type': 'text', 'text': SCREENSHOT_READER_PROMPT}
            ]
        }]
    )
    return json.loads(response.content[0].text)

การปรับต้นทุนการเรียกการมองเห็นให้เหมาะสม

การเรียกเอพีไอการมองเห็นมีค่าใช้จ่ายสูงกว่าการเรียกที่ใช้ข้อความเพียงอย่างเดียวอย่างมาก ให้ปรับต้นทุนให้เหมาะสมด้วยวิธีต่อไปนี้ ปรับขนาดภาพก่อนเข้ารหัส (โมเดลส่วนใหญ่รองรับขนาด 512×512–2048×2048) ใช้ detail=low สำหรับงานง่าย เก็บผลการวิเคราะห์ของภาพที่ไม่เปลี่ยนแปลงไว้ใช้ซ้ำ และรวมคำถามหลายข้อไว้ในการเรียกครั้งเดียว

from PIL import Image
import io, base64

def resize_and_encode(
    image_path: str,
    max_dim: int = 1024
) -> tuple:
    img = Image.open(image_path)
    # Resize maintaining aspect ratio
    ratio = min(max_dim / img.width, max_dim / img.height)
    if ratio < 1.0:
        new_w = int(img.width * ratio)
        new_h = int(img.height * ratio)
        img = img.resize((new_w, new_h), Image.LANCZOS)
        print(f'Resized to {new_w}x{new_h} (from {img.width}x{img.height})')

    # Convert to JPEG for smaller size
    buf = io.BytesIO()
    img.save(buf, format='JPEG', quality=85)
    b64 = base64.b64encode(buf.getvalue()).decode('utf-8')
    return b64, 'image/jpeg'

ข้อจำกัดและทางเลือกสำรองของการมองเห็น

โมเดลการมองเห็นมีข้อจำกัด ได้แก่ ไม่สามารถอ่านข้อความขนาดเล็กมากได้อย่างน่าเชื่อถือ ทำงานได้ไม่ดีเมื่อภาพถูกบีบอัดมาก และอาจสร้างรายละเอียดขึ้นเอง ควรตรวจสอบข้อมูลสำคัญที่ดึงออกมาเสมอ (เช่น ตัวเลขจากแผนภูมิ) ด้วยพรอมต์ทางเลือกสำรองที่ขอคะแนนความมั่นใจ

def analyze_with_confidence(
    image_path: str,
    question: str,
    confidence_threshold: float = 0.7
) -> dict:
    import anthropic, json
    client = anthropic.Anthropic(api_key='YOUR_API_KEY')
    b64, mime = load_image_as_base64(image_path)

    prompt = (
        question + '\n\nAlso rate your confidence (0.0-1.0) in the answer.\n'
        'Return JSON: {"answer": str, "confidence": float, '
        '"uncertainty_reason": str}'
    )
    response = client.messages.create(
        model='claude-opus-4-5', max_tokens=256,
        messages=[{'role': 'user', 'content': [
            {'type': 'image', 'source': {'type': 'base64',
              'media_type': mime, 'data': b64}},
            {'type': 'text', 'text': prompt}
        ]}]
    )
    result = json.loads(response.content[0].text)
    if result['confidence'] < confidence_threshold:
        result['action'] = 'human_review_needed'
    return result

ตรวจสอบความรู้

พารามิเตอร์ใดควบคุมระดับรายละเอียดและค่าใช้จ่ายในการวิเคราะห์ภาพของเอพีไอการมองเห็นของ OpenAI

สรุป: เอเจนต์ภาพและข้อความ

ทำได้ดีมาก! สิ่งที่คุณได้เรียนรู้มีดังนี้

  • การมองเห็นของ OpenAI: อาร์เรย์เนื้อหาที่มีออบเจ็กต์ image_url และ text รองรับทั้งที่อยู่และเบส64
  • การมองเห็นของโคลด: source.type: base64 พร้อม media_type
  • การเข้ารหัสด้วยเบส64: อ่านไฟล์ → เข้ารหัสเป็นเบส64 → ฝังเป็นที่อยู่ข้อมูล
  • ระดับรายละเอียด: ใช้ low เพื่อความรวดเร็วและประหยัด ใช้ high สำหรับการวิเคราะห์ที่ต้องละเอียด
  • การปรับต้นทุนให้เหมาะสม: ปรับขนาดภาพ รวมคำถามเป็นชุด และเก็บผลลัพธ์ไว้ใช้ซ้ำ

ถัดไป: กระบวนการทำงานของเอเจนต์เสียงและข้อความด้วยการถอดเสียงของวิสเปอร์และการตอบกลับด้วย TTS

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

บทเรียน “เอเจนต์ภาพ + ข้อความด้วย Claude Vision และ GPT-4V” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เอเจนต์ภาพ + ข้อความด้วย Claude Vision และ GPT-4V”

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

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

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

บทเรียน “เอเจนต์ภาพ + ข้อความด้วย Claude Vision และ GPT-4V” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เอเจนต์ภาพ + ข้อความด้วย Claude Vision และ GPT-4V
  2. เวิร์กโฟลว์เอเจนต์เสียง + ข้อความ
  3. การทำความเข้าใจวิดีโอในเอเจนต์
  4. รูปแบบการให้เหตุผลข้ามสื่อ
← กลับไปที่ AI Agents