Bildverarbeitung
Bildanalyse und Dokumentenverarbeitung für multimodale Interaktionen Lerne die Einrichtungsmuster, APIs und praktischen Beispiele kennen, die du zum Aufbau...
Bildanalyse und Dokumentenverarbeitung für multimodale Interaktionen
Übersicht
Das Vision-System ermöglicht es Agenten, Bilder zu verarbeiten und zu analysieren, und bietet so multimodale KI-Funktionen für reichhaltigere Interaktionen. Es unterstützt mehrere Bildformate, bietet verschiedene Analysemodi und integriert sich nahtlos mit OpenAI, Claude, Gemini und lokalem Ollama für flexible Bereitstellungsoptionen.
Vision aktivieren
Aktiviere Vision-Funktionen für einen Agenten, indem du die Option vision auf true setzt:
import { Agent } from '@astreus-ai/astreus';
const agent = await Agent.create({
name: 'VisionAgent',
model: 'gpt-4o', // Vision-capable model
vision: true // Enable vision capabilities (default: false)
});Anhangssystem
Astreus unterstützt ein intuitives Anhangssystem für die Arbeit mit Bildern:
// Clean, modern attachment API
const response = await agent.ask("What do you see in this image?", {
attachments: [
{ type: 'image', path: '/path/to/image.jpg', name: 'My Photo' }
]
});Das Anhangssystem übernimmt automatisch:
- Erkennung des Dateityps und Auswahl geeigneter Tools
- Anreicherung des Prompts mit Anhangsinformationen
- Aktivierung der Tool-Nutzung, wenn Anhänge vorhanden sind
Vision-Funktionen
Das Vision-System bietet drei Kernfunktionen über integrierte Tools:
1. Allgemeine Bildanalyse
Analysiere Bilder mit benutzerdefinierten Prompts und konfigurierbaren Detailstufen:
// Using attachments (recommended approach)
const response = await agent.ask("Please analyze this screenshot and describe the UI elements", {
attachments: [
{ type: 'image', path: '/path/to/screenshot.png', name: 'UI Screenshot' }
]
});
// Using the analyze_image tool through conversation
const response2 = await agent.ask("Please analyze the image at /path/to/screenshot.png and describe the UI elements");
// Direct method call
const analysis = await agent.analyzeImage('/path/to/image.jpg', {
prompt: 'What UI elements are visible in this interface?',
detail: 'high',
maxTokens: 1500
});2. Bildbeschreibung
Erstelle strukturierte Beschreibungen für verschiedene Anwendungsfälle:
// Accessibility-friendly description
const description = await agent.describeImage('/path/to/image.jpg', 'accessibility');
// Available styles:
// - 'detailed': Comprehensive description of all visual elements
// - 'concise': Brief description of main elements
// - 'accessibility': Screen reader-friendly descriptions
// - 'technical': Technical analysis including composition and lighting3. Textextraktion (OCR)
Extrahiere und transkribiere Text aus Bildern:
// Extract text with language hint
const text = await agent.extractTextFromImage('/path/to/document.jpg', 'english');
// The system maintains original formatting and structure
console.log(text);Unterstützte Formate
Das Vision-System unterstützt diese Bildformate:
- JPEG (
.jpg,.jpeg) - PNG (
.png) - GIF (
.gif) - BMP (
.bmp) - WebP (
.webp)
Eingabequellen
Dateipfade
Analysiere Bilder aus dem lokalen Dateisystem:
const result = await agent.analyzeImage('/path/to/image.jpg');Base64-Daten
Analysiere Bilder aus base64-kodierten Daten:
const base64Image = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...';
const result = await agent.analyzeImageFromBase64(base64Image);Konfiguration
Konfiguration des Vision-Modells
Gib das Vision-Modell direkt in der Agent-Konfiguration an:
const agent = await Agent.create({
name: 'VisionAgent',
model: 'gpt-4o',
visionModel: 'gpt-4o', // Specify vision model here
vision: true
});Umgebungsvariablen
# API keys (auto-detected based on model)
OPENAI_API_KEY=your_openai_key # For OpenAI models
OPENAI_VISION_API_KEY=your_openai_key # Dedicated vision API key (takes priority)
ANTHROPIC_API_KEY=your_anthropic_key # For Claude models
ANTHROPIC_VISION_API_KEY=your_anthropic_key # Dedicated vision API key (takes priority)
GEMINI_API_KEY=your_gemini_key # For Gemini models
GEMINI_VISION_API_KEY=your_gemini_key # Dedicated vision API key (takes priority)
# Ollama configuration (local)
OLLAMA_BASE_URL=http://localhost:11434 # Default if not setDas Vision-System wählt automatisch den passenden Provider basierend auf dem in der Agent-Konfiguration angegebenen visionModel aus.
Analyseoptionen
Konfiguriere das Analyseverhalten mit diesen Optionen:
interface AnalysisOptions {
prompt?: string; // Custom analysis prompt
maxTokens?: number; // Response length limit (default: 1000)
detail?: 'low' | 'high' | 'auto'; // Analysis detail level (OpenAI only)
}Verwendungsbeispiele
Screenshot-Analyse
const agent = await Agent.create({
name: 'UIAnalyzer',
model: 'gpt-4o',
vision: true
});
// Analyze a UI screenshot
const analysis = await agent.analyzeImage('/path/to/app-screenshot.png', {
prompt: 'Analyze this mobile app interface. Identify key UI components, layout structure, and potential usability issues.',
detail: 'high'
});
console.log(analysis);Dokumentenverarbeitung
// Extract text from scanned documents
const documentText = await agent.extractTextFromImage('/path/to/scanned-invoice.jpg', 'english');
// Generate accessible descriptions
const accessibleDesc = await agent.describeImage('/path/to/chart.png', 'accessibility');Multimodale Konversationen
// Using attachments for cleaner API
const response = await agent.ask("I'm getting an error. Can you analyze this screenshot and help me fix it?", {
attachments: [
{ type: 'image', path: '/Users/john/Desktop/error.png', name: 'Error Screenshot' }
]
});
// Multiple attachments
const response2 = await agent.ask("Compare these UI mockups and suggest improvements", {
attachments: [
{ type: 'image', path: '/designs/mockup1.png', name: 'Design A' },
{ type: 'image', path: '/designs/mockup2.png', name: 'Design B' }
]
});
// Traditional approach (still works)
const response3 = await agent.ask(
"Please analyze the error screenshot at /Users/john/Desktop/error.png and suggest how to fix the issue"
);Provider-Vergleich
| Feature | OpenAI (gpt-4o) | Claude (claude-3-5-sonnet) | Gemini (gemini-1.5-pro) | Ollama (llava) |
|---|---|---|---|---|
| Analysequalität | Ausgezeichnet | Ausgezeichnet | Ausgezeichnet | Gut |
| Verarbeitungsgeschwindigkeit | Schnell | Schnell | Schnell | Variabel |
| Kosten | Nutzungsabhängig | Nutzungsabhängig | Nutzungsabhängig | Kostenlos (lokal) |
| Datenschutz | Cloud-basiert | Cloud-basiert | Cloud-basiert | Lokale Verarbeitung |
| Detailstufen | Niedrig/Hoch/Auto | Standard | Standard | Standard |
| Sprachunterstützung | Umfangreich | Umfangreich | Umfangreich | Gut |
OpenAI-Provider
- Am besten geeignet für: Produktionsanwendungen, die hohe Genauigkeit erfordern
- Standardmodell:
gpt-4o - Funktionen: Steuerung der Detailstufe, ausgezeichnete Texterkennung
Claude-Provider
- Am besten geeignet für: Nuancierte Analyse und detaillierte Beschreibungen
- Standardmodell:
claude-3-5-sonnet-20241022 - Funktionen: Starkes Reasoning, ausgezeichnetes Kontextverständnis
Gemini-Provider
- Am besten geeignet für: Multimodale Aufgaben und Dokumentenanalyse
- Standardmodell:
gemini-1.5-pro - Funktionen: Unterstützung langer Kontexte, gut für komplexe Bilder
Ollama-Provider (lokal)
- Am besten geeignet für: Datenschutzsensible Anwendungen oder Entwicklung
- Standardmodell:
llava - Funktionen: Lokale Verarbeitung, keine API-Kosten, Offline-Fähigkeit
Batch-Verarbeitung
Verarbeite mehrere Bilder effizient:
const images = [
'/path/to/image1.jpg',
'/path/to/image2.png',
'/path/to/image3.gif'
];
// Process all images in parallel
const results = await Promise.all(
images.map(imagePath =>
agent.describeImage(imagePath, 'concise')
)
);
console.log('Analysis results:', results);
// Or use task attachments for batch processing
const batchTask = await agent.createTask({
prompt: 'Analyze all these images and provide a comparative report',
attachments: images.map(path => ({
type: 'image',
path,
name: path.split('/').pop()
}))
});
const batchResult = await agent.executeTask(batchTask.id);Integrierte Vision-Tools
Wenn Vision aktiviert ist, sind diese Tools automatisch verfügbar:
analyze_image
- Parameter:
image_path(string, erforderlich): Pfad zur Bilddateiprompt(string, optional): Benutzerdefinierter Analyse-Promptdetail(string, optional): Detailstufe 'low' oder 'high'
describe_image
- Parameter:
image_path(string, erforderlich): Pfad zur Bilddateistyle(string, optional): Beschreibungsstil ('detailed', 'concise', 'accessibility', 'technical')
extract_text_from_image
- Parameter:
image_path(string, erforderlich): Pfad zur Bilddateilanguage(string, optional): Sprachhinweis für bessere OCR-Genauigkeit
Antworttypen
Vision-Methoden geben String-Antworten mit den Analyseergebnissen zurück.
Analyze-Image-Antwort
Die Bildanalyse gibt einen beschreibenden String basierend auf deinem Prompt zurück:
const analysis = await agent.analyzeImage('/path/to/office.jpg', {
prompt: "What objects are in this image and how is the space organized?",
detail: "high"
});
// Response: string
"The image shows a modern office workspace with a MacBook Pro laptop, wireless keyboard, and mouse on a wooden desk. To the left is a coffee mug and a notebook. The desk is positioned near a window with natural lighting. The space features a minimalist organization with cable management and a small potted plant."Describe-Image-Antwort
describeImage gibt einen formatierten Beschreibungs-String zurück:
const description = await agent.describeImage('/path/to/product.jpg');
// Response: string
"A professional product photograph featuring a stainless steel water bottle with a matte black finish. The bottle has a wide mouth opening and is photographed against a white background with soft studio lighting creating subtle highlights along the curved surfaces."Extract-Text-from-Image-Antwort
OCR gibt den extrahierten Text als String zurück:
const text = await agent.extractTextFromImage('/path/to/document.png', {
language: 'en'
});
// Response: string
"INVOICE\nDate: January 15, 2024\nInvoice #: INV-2024-001\n\nBill To:\nAcme Corporation\n123 Main Street\nNew York, NY 10001\n\nDescription Quantity Price Total\nProfessional Services 8 hrs $150 $1,200\nConsulting Fee 1 $500 $500\n\nSubtotal: $1,700\nTax (8%): $136\nTotal: $1,836"Analyze-Image-from-Base64-Antwort
Die Base64-Bildanalyse gibt ebenfalls einen String zurück:
const base64Image = "data:image/png;base64,iVBORw0KG...";
const result = await agent.analyzeImageFromBase64(base64Image, {
prompt: "Identify the main subject and mood of this image"
});
// Response: string
"The main subject is a sunset landscape with mountains in the background. The mood is serene and peaceful, with warm orange and pink tones dominating the sky. The composition creates a sense of tranquility and natural beauty."Zuletzt aktualisiert: 6. Juli 2026
In diesem Abschnitt
Einführung
Open-Source-KI-Agent-Framework zum Erstellen autonomer Systeme, die reale Aufgaben effektiv lösen.
Installation
Installiere Astreus mit npm, yarn oder pnpm, überprüfe die erforderliche Node.js-Version und bereite ein lokales Projekt für die Entwicklung von KI-Agenten...
Schnellstart
Erstelle deinen ersten KI-Agenten mit Astreus in unter 2 Minuten Lerne die Einrichtungsmuster, APIs und praktischen Beispiele kennen, die du zum Aufbau...
Agent
Zentrale KI-Entität mit modularen Fähigkeiten und dekoratorbasierter Komposition Lerne die Einrichtungsmuster, APIs und praktischen Beispiele kennen, die du...