Overview

@angularai/image-caption provides AI-powered image captioning and analysis using OpenAI Vision models. Generate descriptive captions, extract text from images, and analyze visual content.

✨ Features

• 🖼️ Image Captioning: Generate descriptive captions for images
• 🔍 Visual Analysis: Detailed image content analysis
• 📝 Text Extraction: OCR capabilities for text in images
• 🏷️ Object Detection: Identify objects and elements in images
• 🎨 Style Analysis: Detect artistic styles and compositions
• 🔧 Fully Typed: Complete TypeScript support

📦 Installation

npm install @angularai/image-caption @angularai/core

🚀 Quick Start

1. Import the Component

import { Component } from '@angular/core';
import { ImageCaptionComponent } from '@angularai/image-caption';

@Component({
  selector: 'app-image-caption',
  standalone: true,
  imports: [ImageCaptionComponent],
  template: `
    <image-caption
      [provider]="'openai'"
      [apiKey]="apiKey"
      [imageUrl]="imageUrl"
      (captionGenerated)="onCaption($event)"
    />
  `
})
export class ImageCaptionDemoComponent {
  apiKey = 'your-openai-api-key';
  imageUrl = 'https://example.com/image.jpg';

  onCaption(caption: string) {
    console.log('Generated caption:', caption);
  }
}

2. Use the Caption Service

import { Component, inject } from '@angular/core';
import { ImageCaptionService } from '@angularai/image-caption';

@Component({ ... })
export class CaptionComponent {
  private captionService = inject(ImageCaptionService);

  generateCaption(imageUrl: string) {
    this.captionService.caption(imageUrl).subscribe({
      next: (caption) => console.log('Caption:', caption)
    });
  }

  analyzeImage(imageUrl: string) {
    this.captionService.analyze(imageUrl).subscribe({
      next: (analysis) => {
        console.log('Objects:', analysis.objects);
        console.log('Colors:', analysis.colors);
        console.log('Text:', analysis.text);
      }
    });
  }
}

📖 API Reference

ImageCaptionService

@Injectable({ providedIn: 'root' })
export class ImageCaptionService {
  // Generate caption for image
  caption(imageUrl: string): Observable<string>;

  // Detailed image analysis
  analyze(imageUrl: string): Observable<ImageAnalysis>;

  // Extract text from image (OCR)
  extractText(imageUrl: string): Observable<string>;

  // Describe image in detail
  describe(imageUrl: string, prompt?: string): Observable<string>;
}

ImageAnalysis Interface

interface ImageAnalysis {
  caption: string;
  objects: string[];
  colors: string[];
  text: string | null;
  style: string;
  confidence: number;
}

ImageCaptionComponent

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | provider | string | 'openai' | AI provider | | apiKey | string | '' | API key | | imageUrl | string | '' | URL of image to caption | | model | string | 'gpt-4-vision-preview' | Vision model to use | | maxTokens | number | 300 | Max tokens for response |

Outputs

| Output | Type | Description | |--------|------|-------------| | captionGenerated | EventEmitter<string> | Emitted when caption is ready | | analysisComplete | EventEmitter<ImageAnalysis> | Emitted when analysis is complete | | error | EventEmitter<Error> | Emitted on error |

📦 Related Packages

| Package | Description | |---------|-------------| | @angularai/core | Core AI functionality | | @angularai/doc-intelligence | Document processing | | @angularai/spin-360 | 360° product viewer |

🔗 Related Projects

| Framework | Repository | Status | |-----------|-----------|--------| | Vue.js | @aivue | ✅ Available | | React | @anthropic-ai/react | ✅ Available | | Angular | @angularai | ✅ Available | | Svelte | @svelteai | 💡 Planned |

📄 License

MIT © AngularAI