@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

Installation

npm install @aivue/image-caption

Basic Usage

<template>
  <div>
    <AiImageCaption
      :api-key="openaiApiKey"
      @caption-generated="onCaptionGenerated"
    />
  </div>
</template>

<script setup>
import { AiImageCaption } from '@aivue/image-caption';
import '@aivue/image-caption/dist/image-caption.css';

const openaiApiKey = import.meta.env.VITE_OPENAI_API_KEY;

const onCaptionGenerated = (result) => {
  console.log('Generated caption:', result.caption);
};
</script>

Environment Variables

Set your API key in environment variables:

# .env
VITE_OPENAI_API_KEY=your-openai-api-key

📖 API Reference

Component Props

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

Component Events

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

Composable Usage

<script setup>
import { useImageCaption } from '@aivue/image-caption';

const {
  generateCaption,
  uploadImage,
  isProcessing,
  result,
  error,
  history
} = useImageCaption({
  config: {
    apiKey: import.meta.env.VITE_OPENAI_API_KEY,
    model: 'gpt-4o'
  }
});

// Generate caption for uploaded file
const handleFileUpload = async (file) => {
  try {
    await uploadImage(file);
    const result = await generateCaption(file);
    console.log('Caption:', result.caption);
  } catch (error) {
    console.error('Failed:', error);
  }
};
</script>

🎯 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

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:

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

Batch Processing

<script setup>
import { useImageCaption } from '@aivue/image-caption';

const { generateBatchCaptions } = useImageCaption();

const processBatch = async (imageFiles) => {
  const result = await generateBatchCaptions({
    images: imageFiles,
    options: {
      model: 'gpt-4o',
      prompt: 'Describe this image in detail for accessibility purposes.',
      detail: 'high'
    }
  });

  console.log(`Processed ${result.successCount} images`);
  console.log('Results:', result.results);
};
</script>

Custom Image Processing

<script setup>
import { useImageCaption, resizeImageFile } from '@aivue/image-caption';

const { generateCaption } = useImageCaption();

const processLargeImage = async (file) => {
  // Resize large images for faster processing
  const resizedFile = await resizeImageFile(file, {
    maxWidth: 800,
    maxHeight: 600,
    quality: 0.8
  });
  
  const result = await generateCaption(resizedFile);
  return result;
};
</script>

Export History

<script setup>
import { useImageCaption } from '@aivue/image-caption';

const { exportHistory, history } = useImageCaption();

const downloadHistory = () => {
  const jsonData = exportHistory('json');
  const blob = new Blob([jsonData], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = url;
  a.download = 'image-captions.json';
  a.click();
  
  URL.revokeObjectURL(url);
};
</script>

🔑 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

Accessibility Enhancement

<template>
  <div>
    <img :src="imageUrl" :alt="altText" />
    <AiImageCaption 
      :api-key="apiKey"
      @caption-generated="updateAltText"
    />
  </div>
</template>

<script setup>
const altText = ref('');

const updateAltText = (result) => {
  altText.value = result.caption;
};
</script>

Social Media Integration

<template>
  <div class="social-post">
    <AiImageCaption 
      :api-key="apiKey"
      :auto-caption="true"
      @caption-generated="suggestHashtags"
    />
    <textarea v-model="postText" placeholder="Write your post..."></textarea>
  </div>
</template>

<script setup>
const postText = ref('');

const suggestHashtags = (result) => {
  const hashtags = generateHashtags(result.caption);
  postText.value += `\n\n${hashtags}`;
};
</script>

🤝 Contributing

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

📦 Related Packages

Explore the complete @aivue ecosystem:

🧠 @aivue/core

Core AI functionality for Vue.js components

💬 @aivue/chatbot

AI-powered chat components for Vue.js

✨ @aivue/autosuggest

AI-powered suggestion components for Vue.js

📝 @aivue/smartform

AI-powered form validation for Vue.js

🎭 @aivue/emotion-ui

Emotion-aware UI components with sentiment analysis

📄 @aivue/doc-intelligence

Document processing and OCR with AI

🧠 @aivue/predictive-input

AI-powered predictive text input

🔔 @aivue/smart-notify

Intelligent notification system

🎤 @aivue/voice-actions

Voice command integration

📋 @aivue/smart-datatable

Advanced data table components

📊 @aivue/analytics

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