@aivue/image-caption


🖼️ AI-powered image captioning for Vue.js applications using OpenAI Vision API

Generate intelligent, contextual captions for images using GPT-4 Vision, the most advanced computer vision model available. Perfect for accessibility, content management, social media, and AI-powered applications.

✨ Features

- 🤖 GPT-4 Vision - Most advanced image understanding AI
- 🎯 Easy Integration - Drop-in Vue component with minimal setup
- 🔑 Simple Authentication - Just add your OpenAI API key
- 📱 Drag & Drop Upload - Intuitive file upload with preview
- 🌐 URL Support - Caption images from URLs
- 📊 Batch Processing - Process multiple images at once
- 📈 History Tracking - Keep track of generated captions
- 💾 Export Data - Export captions as JSON or CSV
- 🎨 Beautiful UI - Modern, responsive design
- 🔧 TypeScript Support - Full type definitions included
- 📱 Mobile Friendly - Works great on all devices

🚀 Quick Start

$3

``bash
npm install @aivue/image-caption
`

$3

`vue



`

$3

Set your API key in environment variables:

`bash


.env


VITE_OPENAI_API_KEY=your-openai-api-key
`

📖 API Reference

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| apiKey | string | '' | OpenAI API key |
| model | string | 'gpt-4o' | AI model to use |
| autoCaption | boolean | false | Auto-generate caption on image upload |
| maxHistorySize | number | 20 | Maximum number of captions to keep in history |

$3

| Event | Payload | Description |
|-------|---------|-------------|
| caption-generated | ImageCaptionResult | Fired when caption is successfully generated |
| caption-error | Error | Fired when caption generation fails |
| image-uploaded | ImageUploadEvent | Fired when image is uploaded |
| image-removed | void | Fired when image is removed |

$3

`vue

`

🎯 Available Models

| Model | ID | Description | Best For |
|-------|----|-----------| ---------|
| GPT-4o | gpt-4o | Latest and most capable vision model | General use, highest quality |
| GPT-4o Mini | gpt-4o-mini | Faster and more cost-effective | High volume, cost-sensitive apps |
| GPT-4 Turbo | gpt-4-turbo | High-intelligence vision model | Detailed analysis, complex scenes |

🔧 Configuration Options

`typescript
interface ImageCaptionConfig {
apiKey?: string; // OpenAI API key
model?: string; // Model ID to use ('gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo')
}

interface ImageCaptionOptions {
model?: string; // Override model for this request
prompt?: string; // Custom prompt for caption generation
detail?: 'low' | 'high' | 'auto'; // Image analysis detail level
maxTokens?: number; // Maximum response tokens (300)
temperature?: number; // Creativity level (0.7)
}
`

🎨 Styling

The component comes with beautiful default styles, but you can customize them:

`css
/ Override default styles /
.ai-image-caption {
--primary-color: #your-color;
--border-radius: 12px;
--spacing: 16px;
}

/ Custom upload area /
.upload-area {
border: 2px dashed #your-color;
background: #your-background;
}

/ Custom button styles /
.generate-btn {
background: linear-gradient(135deg, #your-gradient);
}
`

📊 Advanced Usage

$3

`vue

`

$3

`vue

`

$3

`vue

`

🔑 Getting Your API Key

1. Go to OpenAI Platform
2. Sign up for an account
3. Go to API Keys
4. Create a new secret key
5. Copy your key (starts with "sk-") and use it as your API key

Pricing:
- GPT-4o: $5.00 / 1M input tokens, $15.00 / 1M output tokens
- GPT-4o Mini: $0.15 / 1M input tokens, $0.60 / 1M output tokens
- GPT-4 Turbo: $10.00 / 1M input tokens, $30.00 / 1M output tokens

🌟 Examples

$3

`vue



`

$3

`vue



``

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📦 Related Packages

Explore the complete @aivue ecosystem:

$3

Core AI functionality for Vue.js components

$3

AI-powered chat components for Vue.js

$3

AI-powered suggestion components for Vue.js

$3

AI-powered form validation for Vue.js

$3

Emotion-aware UI components with sentiment analysis

$3

Document processing and OCR with AI

$3

AI-powered predictive text input

$3

Intelligent notification system

$3

Voice command integration

$3

Advanced data table components

$3

AI-powered analytics and insights

📄 License

MIT License - see LICENSE for details.

🔗 Links

- Documentation
- Live Demo
- GitHub Repository
- npm Package
- Hugging Face Models

---

Made with ❤️ by reachbrt