{"_id":"@aivue/ai-360-generator","name":"@aivue/ai-360-generator","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@aivue/ai-360-generator","version":"1.0.1","description":"AI-powered 360° product view generator from single images using OpenAI DALL-E and Stability AI","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./ai-360-generator.css":"./dist/ai-360-generator.css","./dist/ai-360-generator.css":"./dist/ai-360-generator.css"},"scripts":{"build":"npm run clean && vite build","dev":"vite build --watch","clean":"rm -rf dist","prepublishOnly":"npm run build"},"keywords":["vue","ai","360","product","image","generation","dall-e","openai","stability-ai","3d","ecommerce","computer-vision","machine-learning","typescript"],"author":{"name":"reachbrt"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/ai-360-generator"},"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"publishConfig":{"access":"public"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0"},"dependencies":{"@aivue/core":"^1.3.12"},"devDependencies":{"@types/node":"^20.16.0","@vitejs/plugin-vue":"^5.0.0","@vue/compiler-sfc":"^3.5.13","typescript":"^5.3.0","vite":"^6.3.5","vite-plugin-dts":"^4.5.3","vue":"^3.5.0","vue-tsc":"^2.2.10"},"_id":"@aivue/ai-360-generator@1.0.1","gitHead":"c54d7def7f2bad63a3e63881dd7ac15ba3e957a4","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-kCTCLMo0R/fiScuOzJltrLkx9X/4q6tN7GLL26+iYmFKTR+EVcZa3zA0rwazAlA+ZP3a7SYZi3KNzZgLY+Ln6g==","shasum":"faa7859bdbf34ad5b1968c788b4c9eb6cd174aef","tarball":"https://registry.npmjs.org/@aivue/ai-360-generator/-/ai-360-generator-1.0.1.tgz","fileCount":13,"unpackedSize":131528,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDzo7iXbCpXQzC1PuxADojPGAY0MyYgV8p63Eaz5k0wJQIgATO/231fIX3huwIjRpYa+zBhjfCf53YUdCwjtKJLU08="}]},"_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/ai-360-generator_1.0.1_1768404896258_0.059510782215560054"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-14T15:34:56.191Z","1.0.1":"2026-01-14T15:34:56.425Z","modified":"2026-01-14T15:34:56.617Z"},"maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"description":"AI-powered 360° product view generator from single images using OpenAI DALL-E and Stability AI","homepage":"https://github.com/reachbrt/vueai#readme","keywords":["vue","ai","360","product","image","generation","dall-e","openai","stability-ai","3d","ecommerce","computer-vision","machine-learning","typescript"],"repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/ai-360-generator"},"author":{"name":"reachbrt"},"bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"license":"MIT","readme":"# @aivue/ai-360-generator\n\n![AI 360 Generator](https://raw.githubusercontent.com/reachbrt/vueai/main/demo/src/assets/images/ai-360-illustration.svg)\n\n🤖 **AI-Powered 360° Product View Generator for Vue.js**\n\nTransform a single product image into a complete 360° rotation view using AI. Powered by OpenAI DALL-E 3 and Stability AI.\n\n[![npm version](https://img.shields.io/npm/v/@aivue/ai-360-generator.svg?style=flat-square)](https://www.npmjs.com/package/@aivue/ai-360-generator)\n[![npm downloads](https://img.shields.io/npm/dm/@aivue/ai-360-generator.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/@aivue/ai-360-generator)\n[![MIT License](https://img.shields.io/npm/l/@aivue/ai-360-generator.svg?style=flat-square)](https://github.com/reachbrt/vueai/blob/main/LICENSE)\n[![Netlify Status](https://img.shields.io/netlify/5cb37fa7-9ee1-4af6-9ff4-d34ff0322ded?style=flat-square&logo=netlify)](https://aivue.netlify.app/)\n\n---\n\n## ✨ Features\n\n### 🎯 **Core Capabilities**\n- 🤖 **AI-Powered Generation** - Uses OpenAI DALL-E 3 or Stability AI to generate 360° views\n- 📸 **Single Image Input** - Upload one product photo, get 36 frames\n- 🔄 **Complete 360° Rotation** - Generates views from all angles\n- 🎨 **Customizable Output** - Control frame count, quality, background color\n- 📊 **Real-time Progress** - Live updates during generation\n- 💾 **Export Options** - Download individual frames or complete sequence\n- 🎬 **360° Viewer Integration** - Works seamlessly with @aivue/360-spin\n\n### 🚀 **AI Providers**\n- **OpenAI DALL-E 3** - High-quality, photorealistic generation\n- **Stability AI** - Advanced 3D novel view synthesis\n- **Multi-provider Support** - Switch between providers easily\n\n### 🛠️ **Developer Experience**\n- ✅ **TypeScript Support** - Full type definitions included\n- 📦 **Vue 2 & 3 Compatible** - Works with both Vue versions\n- 🎨 **Customizable UI** - Styled components with CSS variables\n- 🔌 **Composable API** - Use the Vue composable or standalone class\n- 📱 **Responsive Design** - Mobile-friendly interface\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @aivue/ai-360-generator @aivue/core\n```\n\n---\n\n## 🚀 Quick Start\n\n### Basic Usage\n\n```vue\n<template>\n  <AI360Generator\n    :api-key=\"openaiApiKey\"\n    provider=\"openai\"\n    :frame-count=\"36\"\n    @complete=\"handleComplete\"\n  />\n</template>\n\n<script setup>\nimport { AI360Generator } from '@aivue/ai-360-generator';\nimport '@aivue/ai-360-generator/ai-360-generator.css';\n\nconst openaiApiKey = 'your-openai-api-key';\n\nfunction handleComplete(frames) {\n  console.log('Generated frames:', frames);\n  // Use frames with @aivue/360-spin or download\n}\n</script>\n```\n\n### With 360° Viewer Integration\n\n```vue\n<template>\n  <div>\n    <!-- Step 1: Generate 360° frames -->\n    <AI360Generator\n      v-if=\"!generated360Frames\"\n      :api-key=\"apiKey\"\n      provider=\"openai\"\n      @complete=\"handle360Generated\"\n    />\n\n    <!-- Step 2: Display in 360° viewer -->\n    <Ai360Spin\n      v-else\n      :static-image=\"generated360Frames[0].url\"\n      :animated-image=\"generated360Frames.map(f => f.url)\"\n      mode=\"frames\"\n      enable-drag-spin\n    />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AI360Generator } from '@aivue/ai-360-generator';\nimport { Ai360Spin } from '@aivue/360-spin';\nimport '@aivue/ai-360-generator/ai-360-generator.css';\nimport '@aivue/360-spin/360-spin.css';\n\nconst apiKey = import.meta.env.VITE_OPENAI_API_KEY;\nconst generated360Frames = ref(null);\n\nfunction handle360Generated(frames) {\n  generated360Frames.value = frames;\n}\n</script>\n```\n\n---\n\n## 📖 API Reference\n\n### Component Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `apiKey` | `string` | **required** | OpenAI or Stability AI API key |\n| `provider` | `'openai' \\| 'stability-ai'` | `'openai'` | AI provider to use |\n| `frameCount` | `number` | `36` | Number of frames to generate |\n| `quality` | `number` | `90` | Image quality (0-100) |\n| `backgroundColor` | `string` | `'white'` | Background color for generated images |\n| `title` | `string` | `'AI 360° Generator'` | Component title |\n| `description` | `string` | Auto | Component description |\n\n### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `complete` | `GeneratedFrame[]` | Emitted when generation completes successfully |\n| `error` | `string` | Emitted when generation fails |\n\n---\n\n## 🎨 Using the Composable\n\nFor more control, use the `useAI360Generator` composable:\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { useAI360Generator } from '@aivue/ai-360-generator';\n\nconst config = {\n  provider: 'openai',\n  apiKey: 'your-api-key',\n  frameCount: 36,\n  quality: 90\n};\n\nconst {\n  status,\n  progress,\n  frames,\n  isGenerating,\n  isComplete,\n  generate,\n  cancel,\n  downloadFrames\n} = useAI360Generator(config);\n\nasync function handleFileUpload(file) {\n  await generate(file);\n}\n</script>\n```\n\n---\n\n## 🔧 Advanced Configuration\n\n### OpenAI DALL-E Options\n\n```typescript\nconst config = {\n  provider: 'openai',\n  apiKey: 'your-key',\n  frameCount: 36,\n  openai: {\n    model: 'dall-e-3',\n    size: '1024x1024',\n    style: 'natural' // or 'vivid'\n  }\n};\n```\n\n### Stability AI Options\n\n```typescript\nconst config = {\n  provider: 'stability-ai',\n  apiKey: 'your-key',\n  frameCount: 36,\n  stabilityAI: {\n    model: 'stable-video-3d',\n    steps: 50,\n    cfgScale: 7.5\n  }\n};\n```\n\n---\n\n## 💡 Use Cases\n\n### E-commerce Product Photography\nGenerate 360° views for product listings without expensive photography equipment.\n\n### Virtual Showrooms\nCreate interactive product displays from catalog images.\n\n### AR/VR Applications\nGenerate multi-angle views for augmented reality experiences.\n\n### Marketing Materials\nCreate dynamic product presentations from single photos.\n\n---\n\n## 🔐 API Keys\n\n### OpenAI API Key\n1. Sign up at [platform.openai.com](https://platform.openai.com)\n2. Navigate to API Keys section\n3. Create a new API key\n4. Add billing information (DALL-E 3 is paid)\n\n### Stability AI API Key\n1. Sign up at [stability.ai](https://stability.ai)\n2. Get API key from dashboard\n3. Choose appropriate pricing plan\n\n---\n\n## 📊 Performance\n\n- **Generation Time**: ~2-5 minutes for 36 frames (OpenAI DALL-E 3)\n- **Cost**: ~$1.44 for 36 frames with DALL-E 3 ($0.04/image)\n- **Quality**: HD 1024x1024 images\n- **Frame Count**: Customizable (12, 24, 36, or more)\n\n---\n\n## 🤝 Integration with @aivue Ecosystem\n\nWorks seamlessly with:\n- **@aivue/360-spin** - Display generated 360° views\n- **@aivue/core** - Shared AI client utilities\n- **@aivue/image-caption** - Add AI captions to products\n\n---\n\n## 📝 License\n\nMIT © [reachbrt](https://github.com/reachbrt)\n\n---\n\n## 🔗 Links\n\n- [Documentation](https://github.com/reachbrt/vueai#readme)\n- [Live Demo](https://aivue.netlify.app)\n- [GitHub](https://github.com/reachbrt/vueai)\n- [npm](https://www.npmjs.com/package/@aivue/ai-360-generator)\n- [Issues](https://github.com/reachbrt/vueai/issues)\n\n","readmeFilename":"README.md","_rev":"1-9d6dfdc05fdf6dbbdad3f0f141accefd"}