AI image captioning with GPT-4 Vision for React
npm install @aireact/image-captionš AI-Powered Image Captioning for React
Generate intelligent captions and descriptions for images using AI vision models.
- š¼ļø AI Vision: Powered by OpenAI GPT-4 Vision, Claude, Gemini
- š Rich Descriptions: Detailed, context-aware captions
- š·ļø Auto Tagging: Generate relevant tags for images
- āæ Accessibility: Perfect for alt-text generation
- šØ Customizable: Control caption style and length
- š§ TypeScript: Full TypeScript support
``bash`
npm install @aireact/image-caption @aireact/core
`tsx
import { ImageCaption, useImageCaption } from '@aireact/image-caption';
import '@aireact/image-caption/style.css';
function App() {
return (
apiKey={process.env.REACT_APP_OPENAI_API_KEY}
model="gpt-4-vision-preview"
src="/path/to/image.jpg"
showCaption={true}
/>
);
}
`
`tsx
import { useImageCaption } from '@aireact/image-caption';
function CustomCaption() {
const {
caption,
tags,
isLoading,
generateCaption
} = useImageCaption({
provider: 'openai',
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
model: 'gpt-4-vision-preview'
});
const handleImageUpload = async (file) => {
await generateCaption(file);
};
return (
{caption}
}š Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
provider | string | - | AI provider |
| apiKey | string | - | API key |
| model | string | - | Vision model |
| src | string | - | Image source |
| showCaption | boolean | true | Display caption |
| showTags | boolean | false | Display tags |
| style | string | 'detailed' | Caption style |šØ Customization
`css
:root {
--aireact-caption-bg: #f5f5f5;
--aireact-caption-text: #333333;
--aireact-caption-tag: #2196f3;
}
``- GitHub Repository
- Full Documentation
- Report Issues
MIT Ā© Bharatkumar Subramanian