เอเจนต์ภาพ + ข้อความด้วย 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เอเจนต์ภาพ + ข้อความด้วย Claude Vision และ GPT-4V
- เวิร์กโฟลว์เอเจนต์เสียง + ข้อความ
- การทำความเข้าใจวิดีโอในเอเจนต์
- รูปแบบการให้เหตุผลข้ามสื่อ