Astreus

ビジョン

Astreusのドキュメントでビジョンについて学び、エージェントシステムを構築するためのセットアップの手引き、APIのパターン、実践的な例を確認しましょう。 信頼性の高いAstreusエージェントシステムを構築するために必要なセットアップのパターン、API、実践的な例を学びましょう。

マルチモーダルなやり取りのための画像解析とドキュメント処理

概要

ビジョンシステムにより、エージェントは画像を処理・解析できるようになり、より豊かなやり取りのためのマルチモーダルAI機能を提供します。複数の画像形式をサポートし、さまざまな解析モードを提供し、柔軟なデプロイオプションのためにOpenAI、Claude、Gemini、ローカルのOllamaプロバイダーとシームレスに統合されます。

ビジョンの有効化

visionオプションをtrueに設定して、エージェントのビジョン機能を有効にします。

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)
});

添付ファイルシステム

Astreusは、画像を扱うための直感的な添付ファイルシステムをサポートしています。

// 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' }
  ]
});

添付ファイルシステムは自動的に:

  • ファイルタイプを検出し、適切なツールを選択します
  • 添付ファイルの情報でプロンプトを拡張します
  • 添付ファイルが存在する場合、ツールの使用を有効にします

ビジョンの機能

ビジョンシステムは、組み込みツールを通じて3つのコア機能を提供します。

1. 一般的な画像解析

カスタムプロンプトと設定可能な詳細レベルで画像を解析します。

// 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. 画像の説明

さまざまなユースケースのために、構造化された説明文を生成します。

// 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 lighting

3. テキスト抽出(OCR)

画像からテキストを抽出・書き起こします。

// 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);

サポートされている形式

ビジョンシステムは以下の画像形式をサポートしています。

  • JPEG (.jpg.jpeg)
  • PNG (.png)
  • GIF (.gif)
  • BMP (.bmp)
  • WebP (.webp)

入力ソース

1

ファイルパス

ローカルファイルシステムから画像を解析します。

const result = await agent.analyzeImage('/path/to/image.jpg');
2

Base64データ

Base64エンコードされたデータから画像を解析します。

const base64Image = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ...';
const result = await agent.analyzeImageFromBase64(base64Image);

設定

ビジョンモデルの設定

エージェントの設定内で、ビジョンモデルを直接指定します。

const agent = await Agent.create({
  name: 'VisionAgent',
  model: 'gpt-4o',
  visionModel: 'gpt-4o',  // Specify vision model here
  vision: true
});

環境変数

# 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 set

ビジョンシステムは、エージェント設定で指定されたvisionModelに基づいて、適切なプロバイダーを自動的に選択します。

解析オプション

以下のオプションで解析の挙動を設定します。

interface AnalysisOptions {
  prompt?: string;                    // Custom analysis prompt
  maxTokens?: number;                 // Response length limit (default: 1000)
  detail?: 'low' | 'high' | 'auto';   // Analysis detail level (OpenAI only)
}

使用例

スクリーンショット解析

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);

ドキュメント処理

// 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');

マルチモーダルな会話

// 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"
);

プロバイダー比較

機能OpenAI (gpt-4o)Claude (claude-3-5-sonnet)Gemini (gemini-1.5-pro)Ollama (llava)
解析品質優秀優秀優秀良好
処理速度高速高速高速変動あり
コスト従量課金従量課金従量課金無料(ローカル)
プライバシークラウドベースクラウドベースクラウドベースローカル処理
詳細レベル低/高/自動標準標準標準
言語サポート広範広範広範良好

OpenAIプロバイダー

  • 最適な用途: 高精度が求められる本番アプリケーション
  • デフォルトモデル: gpt-4o
  • 特徴: 詳細レベルの制御、優れたテキスト認識

Claudeプロバイダー

  • 最適な用途: 微妙なニュアンスの解析と詳細な説明
  • デフォルトモデル: claude-3-5-sonnet-20241022
  • 特徴: 強力な推論力、優れたコンテキスト理解

Geminiプロバイダー

  • 最適な用途: マルチモーダルなタスクとドキュメント解析
  • デフォルトモデル: gemini-1.5-pro
  • 特徴: 長いコンテキストのサポート、複雑な画像に強い

Ollamaプロバイダー(ローカル)

  • 最適な用途: プライバシーに配慮したアプリケーションや開発
  • デフォルトモデル: llava
  • 特徴: ローカル処理、APIコストなし、オフライン対応

バッチ処理

複数の画像を効率的に処理します。

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);

組み込みビジョンツール

ビジョンが有効になっている場合、以下のツールが自動的に利用可能になります。

analyze_image

  • パラメータ:
    • image_path(文字列、必須): 画像ファイルへのパス
    • prompt(文字列、任意): カスタム解析プロンプト
    • detail(文字列、任意): 詳細レベル 'low' または 'high'

describe_image

  • パラメータ:
    • image_path(文字列、必須): 画像ファイルへのパス
    • style(文字列、任意): 説明のスタイル('detailed'、'concise'、'accessibility'、'technical')

extract_text_from_image

  • パラメータ:
    • image_path(文字列、必須): 画像ファイルへのパス
    • language(文字列、任意): より高いOCR精度のための言語ヒント

レスポンスの型

ビジョンメソッドは、解析結果を含む文字列レスポンスを返します。

画像解析のレスポンス

画像解析は、プロンプトに基づく説明的な文字列を返します。

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."

画像説明のレスポンス

describeImageは、フォーマットされた説明文字列を返します。

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."

画像からのテキスト抽出のレスポンス

OCRは、抽出されたテキストを文字列として返します。

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"

Base64画像解析のレスポンス

Base64画像解析も文字列を返します。

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."

最終更新日: 2026年7月6日