Agen Gambar + Teks dengan Claude Vision dan GPT-4V
Mengirim gambar dalam panggilan API, pelandasan visual, dan penggunaan alat yang memahami gambar.
Agen Gambar + Teks dengan Claude Vision dan GPT-4V adalah pelajaran AI Agents gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar AI Agents, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus AI Agents mencakup 4 pelajaran total.
Agen Multimodal: Gambar + Teks
Agen multimodal dapat melihat sekaligus membaca. Dengan mengirimkan gambar bersama teks dalam satu panggilan antarmuka pemrograman aplikasi, agen dapat menjawab pertanyaan tentang foto, menganalisis bagan, membaca tangkapan layar, dan menjelaskan diagram — semuanya dalam putaran percakapan yang sama.
Mengirim Gambar dengan Antarmuka Pemrograman OpenAI
Model visi OpenAI (GPT-4o, GPT-4V) menerima larik content, bukan string biasa. Setiap elemen berupa objek text atau objek image_url. Gambar dapat berupa alamat publik atau alamat data yang dikodekan dalam basis 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)Pengodean Gambar dalam Basis 64
Untuk gambar yang tidak dapat diakses secara publik, seperti berkas lokal, tangkapan layar, dan unggahan pengguna, kodekan gambar dalam basis 64 lalu sematkan langsung dalam panggilan antarmuka pemrograman aplikasi menggunakan skema alamat 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']))Antarmuka Visi Claude
Model Claude dari Anthropic juga mendukung visi. Blok konten menggunakan kolom source dengan type: base64 dan media_type. Strukturnya sedikit berbeda dari milik OpenAI, tetapi sama-sama kuat.
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)Mendeteksi Jenis MIME dari Ekstensi Berkas
Format gambar yang berbeda (JPEG, PNG, GIF, WebP) menggunakan jenis MIME yang berbeda. Deteksi otomatis jenis MIME dari ekstensi berkas agar Anda tidak perlu menuliskannya secara tetap dalam kode agen.
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')Analisis Gambar dalam Putaran Agen
Dalam putaran agen, analisis gambar merupakan sebuah alat. Agen menentukan kapan alat tersebut dipanggil, sama seperti alat lainnya. Tentukan alat itu dalam skema alat dan kembalikan data terstruktur (JSON) agar agen dapat menalar data tersebut secara terprogram.
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)Mengendalikan Tingkat Perincian Gambar (OpenAI)
Antarmuka visi OpenAI menerima parameter detail: low (cepat, murah, 85 token), high (terperinci, membagi gambar menjadi ubin, hingga 1105 token), atau auto (ditentukan oleh model). Gunakan low untuk pertanyaan sederhana dengan jawaban ya atau tidak, dan high untuk analisis terperinci seperti membaca teks kecil.
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.contentPercakapan dengan Banyak Gambar
Anda dapat mengirim beberapa gambar dalam satu pesan atau di beberapa giliran percakapan. Hal ini memungkinkan tugas perbandingan: 'Bandingkan kedua tangkapan layar ini dan jelaskan perubahannya.'
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].textAgen Gambar: Pembaca Tangkapan Layar
Salah satu kasus penggunaan praktis adalah agen yang membaca tangkapan layar aplikasi untuk mengambil nilai bidang formulir, pesan kesalahan, atau status antarmuka pengguna. Hal ini berguna untuk otomatisasi pengujian dan alur pemantauan.
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)Mengoptimalkan Biaya Panggilan Visi
Panggilan antarmuka visi jauh lebih mahal daripada panggilan yang hanya menggunakan teks. Optimalkan biaya dengan mengubah ukuran gambar sebelum pengodean (sebagian besar model menerima ukuran 512×512–2048×2048), menggunakan detail=low untuk tugas sederhana, menyimpan hasil analisis untuk gambar yang tidak berubah, dan menggabungkan beberapa pertanyaan dalam satu panggilan.
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'Keterbatasan Visi dan Pilihan Cadangan
Model visi memiliki beberapa keterbatasan: model mungkin tidak dapat membaca teks yang sangat kecil secara andal, kesulitan menangani gambar yang sangat terkompresi, dan dapat mengada-adakan detail. Selalu validasi data penting yang diambil, misalnya angka dari bagan, dengan instruksi cadangan yang meminta skor keyakinan.
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 resultUji Pemahaman
Parameter apa yang mengendalikan tingkat perincian dan biaya analisis gambar dalam antarmuka visi OpenAI?
Rangkuman: Agen Gambar-Teks
Kerja bagus! Berikut hal-hal yang telah Anda pelajari:
- Visi OpenAI: larik
image_url+ objektext; mendukung alamat dan basis 64 - Visi Claude:
source.type: base64denganmedia_type - Pengodean basis 64: baca berkas → kodekan dalam basis 64 → sematkan sebagai alamat data
- Tingkat perincian: gunakan
lowuntuk proses cepat dan murah, sertahighuntuk analisis terperinci - Pengoptimalan biaya: ubah ukuran gambar, gabungkan pertanyaan, dan simpan hasil
Berikutnya: alur kerja agen audio-teks dengan transkripsi Whisper dan tanggapan TTS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Agen Gambar + Teks dengan Claude Vision dan GPT-4V” gratis?
Ya — teks lengkap “Agen Gambar + Teks dengan Claude Vision dan GPT-4V” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus AI Agents, upgrade ke CoddyKit PRO. Kursus AI Agents mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Agen Gambar + Teks dengan Claude Vision dan GPT-4V”?
Mengirim gambar dalam panggilan API, pelandasan visual, dan penggunaan alat yang memahami gambar. Kamu berlatih AI Agents dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai AI Agents?
Tidak diperlukan pengalaman sebelumnya. AI Agents di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Agen Gambar + Teks dengan Claude Vision dan GPT-4V” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran AI Agents ini?
Ya. Setiap pelajaran AI Agents menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Agen Gambar + Teks dengan Claude Vision dan GPT-4V
- Alur Kerja Agen Audio + Teks
- Pemahaman Video dalam Agen
- Pola Penalaran Lintas Modalitas