<div align="center"> <h1>@angularai/image-caption</h1> <p>🖼️ AI-powered image captioning with OpenAI Vision for Angular</p>
npm install @angularai/image-caption🖼️ AI-powered image captioning with OpenAI Vision for Angular
@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.
- 🖼️ 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
``bash`
npm install @angularai/image-caption @angularai/core
`typescript
import { Component } from '@angular/core';
import { ImageCaptionComponent } from '@angularai/image-caption';
@Component({
selector: 'app-image-caption',
standalone: true,
imports: [ImageCaptionComponent],
template:
[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);
}
}
`
`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);
}
});
}
}
`
`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
}
`
`typescript`
interface ImageAnalysis {
caption: string;
objects: string[];
colors: string[];
text: string | null;
style: string;
confidence: number;
}
#### 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
| Package | Description |
|---------|-------------|
| @angularai/core | Core AI functionality |
| @angularai/doc-intelligence | Document processing |
| @angularai/spin-360 | 360° product viewer |
| Framework | Repository | Status |
|-----------|-----------|--------|
| Vue.js | @aivue | ✅ Available |
| React | @anthropic-ai/react | ✅ Available |
| Angular | @angularai | ✅ Available |
| Svelte | @svelteai | 💡 Planned |
MIT © AngularAI