{"_id":"@aivue/image-caption","_rev":"4-70cff7cf2ca9b22ae45695d52e3a7388","name":"@aivue/image-caption","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aivue/image-caption","version":"1.0.0","keywords":["vue","vue3","ai","image-captioning","computer-vision","huggingface","blip","machine-learning","typescript"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/image-caption@1.0.0","maintainers":[{"name":"aivue","email":"Reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai/tree/main/packages/image-caption","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"20aab40806fc7651ad2b88a856b49c21d0a84164","tarball":"https://registry.npmjs.org/@aivue/image-caption/-/image-caption-1.0.0.tgz","fileCount":10,"integrity":"sha512-v0QhgGDcFuUpa8PT+x3X+eZ/gAxfHJH84voGbjSNvrQYljs52Bcm/kipAxbMeqAEmmziLTWis34yxYLQ4slwXQ==","signatures":[{"sig":"MEUCIQCSV5HTYfyAyG/eTkBV8xWx1EXKX43zLW5KMwfGv8b1ZAIgGpkOFTcNhk/q3aq9Qj0PoZGo2nZ8STztXnHvO4OhltY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":140482},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./dist/image-caption.css":"./dist/image-caption.css"},"gitHead":"0cb81ffe1335b6cdf1c4edc7c341253e3b4615ab","scripts":{"dev":"vite build --watch","lint":"eslint src --ext .ts,.vue","test":"vitest","build":"vite build && tsc --emitDeclarationOnly","clean":"rm -rf dist","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"aivue","email":"Reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/image-caption"},"_npmVersion":"10.9.2","description":"AI-powered image captioning for Vue.js applications using Hugging Face BLIP models","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@aivue/core":"^1.2.7"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","eslint":"^8.55.0","vitest":"^1.0.0","vue-tsc":"^1.8.0","typescript":"^5.3.0","@types/node":"^20.10.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/image-caption_1.0.0_1748816037815_0.14010912546633447","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aivue/image-caption","version":"1.0.1","keywords":["vue","vue3","ai","image-captioning","computer-vision","huggingface","blip","machine-learning","typescript"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/image-caption@1.0.1","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai/tree/main/packages/image-caption","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"78840c6802b4474b6ec9d8cfaabed177de0419eb","tarball":"https://registry.npmjs.org/@aivue/image-caption/-/image-caption-1.0.1.tgz","fileCount":10,"integrity":"sha512-3PT9eYzp3xLAtH/LmWhupZX1MukmrMpFJAew96TePg+/INiLkowIse0G0MmcrtneXobkPBtHzBkRAXTrnKiXqQ==","signatures":[{"sig":"MEUCIQCKs+uwAetJxhMtqQhn+VW7LNBJnIpGP86zonP1bk0NnQIgPT0tv6nrBu9hffZCn7TAFII9s0m3UI+Xi098RqPscQ8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":141848},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./dist/image-caption.css":"./dist/image-caption.css"},"gitHead":"c3a2b65fec27d25b9f1287eadf3f18abfc6e225e","scripts":{"dev":"vite build --watch","lint":"eslint src --ext .ts,.vue","test":"vitest","build":"vite build && tsc --emitDeclarationOnly","clean":"rm -rf dist","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/image-caption"},"_npmVersion":"10.9.2","description":"AI-powered image captioning for Vue.js applications using Hugging Face BLIP models","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@aivue/core":"^1.2.7"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","eslint":"^8.55.0","vitest":"^1.0.0","vue-tsc":"^1.8.0","typescript":"^5.3.0","@types/node":"^20.10.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/image-caption_1.0.1_1764907586917_0.18372955363888965","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aivue/image-caption","version":"1.0.2","keywords":["vue","vue3","ai","image-captioning","computer-vision","huggingface","blip","machine-learning","typescript"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/image-caption@1.0.2","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai/tree/main/packages/image-caption","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"13e6834bbafe6c3dbddd4224950a07c9951f06b9","tarball":"https://registry.npmjs.org/@aivue/image-caption/-/image-caption-1.0.2.tgz","fileCount":10,"integrity":"sha512-RIn9/8W9mAsJo9LYzDAJE6QOzaNBkrVFqGAirC90kDEoX/4VSw+64K8lh3Jx2Xue4xoA30ALG7NeTtpffLCODQ==","signatures":[{"sig":"MEYCIQCP0hzISrH9PQteYyjsajaoZZ5OfFc+fxWh2FzvC+UtXAIhAMKTnNuH4l5zSjj5hqQnO0N/YOK9libEKhTZf1oSTzHy","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":141848},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./dist/image-caption.css":"./dist/image-caption.css"},"gitHead":"2567f0769c449fe4333ccc807a82444957dc0cd3","scripts":{"dev":"vite build --watch","lint":"eslint src --ext .ts,.vue","test":"vitest","build":"vite build && tsc --emitDeclarationOnly","clean":"rm -rf dist","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/image-caption"},"_npmVersion":"10.9.2","description":"AI-powered image captioning for Vue.js applications using Hugging Face BLIP models","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@aivue/core":"^1.2.7"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","eslint":"^8.55.0","vitest":"^1.0.0","vue-tsc":"^1.8.0","typescript":"^5.3.0","@types/node":"^20.10.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/image-caption_1.0.2_1765265233800_0.7965671314953287","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aivue/image-caption","version":"1.0.3","description":"AI-powered image captioning for Vue.js applications using Hugging Face BLIP models","author":{"name":"reachbrt"},"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./dist/image-caption.css":"./dist/image-caption.css"},"scripts":{"build":"vite build && tsc --emitDeclarationOnly","dev":"vite build --watch","clean":"rm -rf dist","test":"vitest","lint":"eslint src --ext .ts,.vue","typecheck":"vue-tsc --noEmit"},"keywords":["vue","vue3","ai","image-captioning","computer-vision","huggingface","blip","machine-learning","typescript"],"repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/image-caption"},"homepage":"https://github.com/reachbrt/vueai/tree/main/packages/image-caption","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"dependencies":{"@aivue/core":"^1.2.7"},"devDependencies":{"@types/node":"^20.10.0","@vitejs/plugin-vue":"^5.0.0","typescript":"^5.3.0","vite":"^5.0.0","vue-tsc":"^1.8.0","vitest":"^1.0.0","eslint":"^8.55.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@aivue/image-caption@1.0.3","gitHead":"c54d7def7f2bad63a3e63881dd7ac15ba3e957a4","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-fmPgk07ekgqfqEJSDOxSfYufcYZi+QW0hh62WqWPqwpdryiQSfjl1gW7EGeZ9DjYATWGdoeBwrU5Lv8Cin/UFw==","shasum":"50828485820ad5efbee233a093c304d89c4a8020","tarball":"https://registry.npmjs.org/@aivue/image-caption/-/image-caption-1.0.3.tgz","fileCount":10,"unpackedSize":142141,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDVR2tkLRx1Oyso4Kfux8mHHf7p+cPvOd3RJGGjjWga3AIgQzQZjO98oF2qWbhQtjpX5uAK8e760mNjpJ5eQXNTa+o="}]},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"directories":{},"maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/image-caption_1.0.3_1768404855334_0.020429584770495834"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-01T22:13:57.733Z","modified":"2026-01-14T15:34:15.615Z","1.0.0":"2025-06-01T22:13:57.997Z","1.0.1":"2025-12-05T04:06:27.097Z","1.0.2":"2025-12-09T07:27:13.932Z","1.0.3":"2026-01-14T15:34:15.480Z"},"bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"author":{"name":"reachbrt"},"license":"MIT","homepage":"https://github.com/reachbrt/vueai/tree/main/packages/image-caption","keywords":["vue","vue3","ai","image-captioning","computer-vision","huggingface","blip","machine-learning","typescript"],"repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/image-caption"},"description":"AI-powered image captioning for Vue.js applications using Hugging Face BLIP models","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"readme":"# @aivue/image-caption\n\n[![npm version](https://badge.fury.io/js/@aivue%2Fimage-caption.svg)](https://badge.fury.io/js/@aivue%2Fimage-caption)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Vue 3](https://img.shields.io/badge/Vue-3.x-4FC08D.svg)](https://vuejs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n\n🖼️ **AI-powered image captioning for Vue.js applications using OpenAI Vision API**\n\nGenerate 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.\n\n## ✨ Features\n\n- 🤖 **GPT-4 Vision** - Most advanced image understanding AI\n- 🎯 **Easy Integration** - Drop-in Vue component with minimal setup\n- 🔑 **Simple Authentication** - Just add your OpenAI API key\n- 📱 **Drag & Drop Upload** - Intuitive file upload with preview\n- 🌐 **URL Support** - Caption images from URLs\n- 📊 **Batch Processing** - Process multiple images at once\n- 📈 **History Tracking** - Keep track of generated captions\n- 💾 **Export Data** - Export captions as JSON or CSV\n- 🎨 **Beautiful UI** - Modern, responsive design\n- 🔧 **TypeScript Support** - Full type definitions included\n- 📱 **Mobile Friendly** - Works great on all devices\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @aivue/image-caption\n```\n\n### Basic Usage\n\n```vue\n<template>\n  <div>\n    <AiImageCaption\n      :api-key=\"openaiApiKey\"\n      @caption-generated=\"onCaptionGenerated\"\n    />\n  </div>\n</template>\n\n<script setup>\nimport { AiImageCaption } from '@aivue/image-caption';\nimport '@aivue/image-caption/dist/image-caption.css';\n\nconst openaiApiKey = import.meta.env.VITE_OPENAI_API_KEY;\n\nconst onCaptionGenerated = (result) => {\n  console.log('Generated caption:', result.caption);\n};\n</script>\n```\n\n### Environment Variables\n\nSet your API key in environment variables:\n\n```bash\n# .env\nVITE_OPENAI_API_KEY=your-openai-api-key\n```\n\n## 📖 API Reference\n\n### Component Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `apiKey` | `string` | `''` | OpenAI API key |\n| `model` | `string` | `'gpt-4o'` | AI model to use |\n| `autoCaption` | `boolean` | `false` | Auto-generate caption on image upload |\n| `maxHistorySize` | `number` | `20` | Maximum number of captions to keep in history |\n\n### Component Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `caption-generated` | `ImageCaptionResult` | Fired when caption is successfully generated |\n| `caption-error` | `Error` | Fired when caption generation fails |\n| `image-uploaded` | `ImageUploadEvent` | Fired when image is uploaded |\n| `image-removed` | `void` | Fired when image is removed |\n\n### Composable Usage\n\n```vue\n<script setup>\nimport { useImageCaption } from '@aivue/image-caption';\n\nconst {\n  generateCaption,\n  uploadImage,\n  isProcessing,\n  result,\n  error,\n  history\n} = useImageCaption({\n  config: {\n    apiKey: import.meta.env.VITE_OPENAI_API_KEY,\n    model: 'gpt-4o'\n  }\n});\n\n// Generate caption for uploaded file\nconst handleFileUpload = async (file) => {\n  try {\n    await uploadImage(file);\n    const result = await generateCaption(file);\n    console.log('Caption:', result.caption);\n  } catch (error) {\n    console.error('Failed:', error);\n  }\n};\n</script>\n```\n\n## 🎯 Available Models\n\n| Model | ID | Description | Best For |\n|-------|----|-----------| ---------|\n| **GPT-4o** | `gpt-4o` | Latest and most capable vision model | General use, highest quality |\n| **GPT-4o Mini** | `gpt-4o-mini` | Faster and more cost-effective | High volume, cost-sensitive apps |\n| **GPT-4 Turbo** | `gpt-4-turbo` | High-intelligence vision model | Detailed analysis, complex scenes |\n\n## 🔧 Configuration Options\n\n```typescript\ninterface ImageCaptionConfig {\n  apiKey?: string;                    // OpenAI API key\n  model?: string;                     // Model ID to use ('gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo')\n}\n\ninterface ImageCaptionOptions {\n  model?: string;                     // Override model for this request\n  prompt?: string;                    // Custom prompt for caption generation\n  detail?: 'low' | 'high' | 'auto';   // Image analysis detail level\n  maxTokens?: number;                 // Maximum response tokens (300)\n  temperature?: number;               // Creativity level (0.7)\n}\n```\n\n## 🎨 Styling\n\nThe component comes with beautiful default styles, but you can customize them:\n\n```css\n/* Override default styles */\n.ai-image-caption {\n  --primary-color: #your-color;\n  --border-radius: 12px;\n  --spacing: 16px;\n}\n\n/* Custom upload area */\n.upload-area {\n  border: 2px dashed #your-color;\n  background: #your-background;\n}\n\n/* Custom button styles */\n.generate-btn {\n  background: linear-gradient(135deg, #your-gradient);\n}\n```\n\n## 📊 Advanced Usage\n\n### Batch Processing\n\n```vue\n<script setup>\nimport { useImageCaption } from '@aivue/image-caption';\n\nconst { generateBatchCaptions } = useImageCaption();\n\nconst processBatch = async (imageFiles) => {\n  const result = await generateBatchCaptions({\n    images: imageFiles,\n    options: {\n      model: 'gpt-4o',\n      prompt: 'Describe this image in detail for accessibility purposes.',\n      detail: 'high'\n    }\n  });\n\n  console.log(`Processed ${result.successCount} images`);\n  console.log('Results:', result.results);\n};\n</script>\n```\n\n### Custom Image Processing\n\n```vue\n<script setup>\nimport { useImageCaption, resizeImageFile } from '@aivue/image-caption';\n\nconst { generateCaption } = useImageCaption();\n\nconst processLargeImage = async (file) => {\n  // Resize large images for faster processing\n  const resizedFile = await resizeImageFile(file, {\n    maxWidth: 800,\n    maxHeight: 600,\n    quality: 0.8\n  });\n  \n  const result = await generateCaption(resizedFile);\n  return result;\n};\n</script>\n```\n\n### Export History\n\n```vue\n<script setup>\nimport { useImageCaption } from '@aivue/image-caption';\n\nconst { exportHistory, history } = useImageCaption();\n\nconst downloadHistory = () => {\n  const jsonData = exportHistory('json');\n  const blob = new Blob([jsonData], { type: 'application/json' });\n  const url = URL.createObjectURL(blob);\n  \n  const a = document.createElement('a');\n  a.href = url;\n  a.download = 'image-captions.json';\n  a.click();\n  \n  URL.revokeObjectURL(url);\n};\n</script>\n```\n\n## 🔑 Getting Your API Key\n\n1. Go to [OpenAI Platform](https://platform.openai.com/)\n2. Sign up for an account\n3. Go to [API Keys](https://platform.openai.com/api-keys)\n4. Create a new secret key\n5. Copy your key (starts with \"sk-\") and use it as your API key\n\n**Pricing:**\n- **GPT-4o**: $5.00 / 1M input tokens, $15.00 / 1M output tokens\n- **GPT-4o Mini**: $0.15 / 1M input tokens, $0.60 / 1M output tokens\n- **GPT-4 Turbo**: $10.00 / 1M input tokens, $30.00 / 1M output tokens\n\n## 🌟 Examples\n\n### Accessibility Enhancement\n\n```vue\n<template>\n  <div>\n    <img :src=\"imageUrl\" :alt=\"altText\" />\n    <AiImageCaption \n      :api-key=\"apiKey\"\n      @caption-generated=\"updateAltText\"\n    />\n  </div>\n</template>\n\n<script setup>\nconst altText = ref('');\n\nconst updateAltText = (result) => {\n  altText.value = result.caption;\n};\n</script>\n```\n\n### Social Media Integration\n\n```vue\n<template>\n  <div class=\"social-post\">\n    <AiImageCaption \n      :api-key=\"apiKey\"\n      :auto-caption=\"true\"\n      @caption-generated=\"suggestHashtags\"\n    />\n    <textarea v-model=\"postText\" placeholder=\"Write your post...\"></textarea>\n  </div>\n</template>\n\n<script setup>\nconst postText = ref('');\n\nconst suggestHashtags = (result) => {\n  const hashtags = generateHashtags(result.caption);\n  postText.value += `\\n\\n${hashtags}`;\n};\n</script>\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md) for details.\n\n## 📦 Related Packages\n\nExplore the complete @aivue ecosystem:\n\n### 🧠 [@aivue/core](https://www.npmjs.com/package/@aivue/core)\nCore AI functionality for Vue.js components\n\n### 💬 [@aivue/chatbot](https://www.npmjs.com/package/@aivue/chatbot)\nAI-powered chat components for Vue.js\n\n### ✨ [@aivue/autosuggest](https://www.npmjs.com/package/@aivue/autosuggest)\nAI-powered suggestion components for Vue.js\n\n### 📝 [@aivue/smartform](https://www.npmjs.com/package/@aivue/smartform)\nAI-powered form validation for Vue.js\n\n### 🎭 [@aivue/emotion-ui](https://www.npmjs.com/package/@aivue/emotion-ui)\nEmotion-aware UI components with sentiment analysis\n\n### 📄 [@aivue/doc-intelligence](https://www.npmjs.com/package/@aivue/doc-intelligence)\nDocument processing and OCR with AI\n\n### 🧠 [@aivue/predictive-input](https://www.npmjs.com/package/@aivue/predictive-input)\nAI-powered predictive text input\n\n### 🔔 [@aivue/smart-notify](https://www.npmjs.com/package/@aivue/smart-notify)\nIntelligent notification system\n\n### 🎤 [@aivue/voice-actions](https://www.npmjs.com/package/@aivue/voice-actions)\nVoice command integration\n\n### 📋 [@aivue/smart-datatable](https://www.npmjs.com/package/@aivue/smart-datatable)\nAdvanced data table components\n\n### 📊 [@aivue/analytics](https://www.npmjs.com/package/@aivue/analytics)\nAI-powered analytics and insights\n\n## 📄 License\n\nMIT License - see [LICENSE](../../LICENSE) for details.\n\n## 🔗 Links\n\n- [Documentation](https://github.com/reachbrt/vueai/tree/main/packages/image-caption)\n- [Live Demo](https://aivue.netlify.app)\n- [GitHub Repository](https://github.com/reachbrt/vueai)\n- [npm Package](https://www.npmjs.com/package/@aivue/image-caption)\n- [Hugging Face Models](https://huggingface.co/models?pipeline_tag=image-to-text)\n\n---\n\nMade with ❤️ by [reachbrt](https://github.com/reachbrt)\n","readmeFilename":"README.md"}