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

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

🚀 Quick Start

$3

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

@Component({
selector: 'app-image-caption',
standalone: true,
imports: [ImageCaptionComponent],
template:
[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);
}
}
`

$3

`typescript
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

$3

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

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

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

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

$3

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

$3

#### 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 | Emitted when caption is ready |
| analysisComplete | EventEmitter | Emitted when analysis is complete |
| error | EventEmitter` | 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