{"_id":"@cfnwmp/ai-img-element","name":"@cfnwmp/ai-img-element","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@cfnwmp/ai-img-element","version":"1.0.0","description":"A custom HTML element for AI-generated images with simple configuration","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/yourusername/ai-img-element.git"},"keywords":["ai","image","web-component","custom-element","flux","sdxl","ai-image","image-generation"],"author":"","license":"MIT","devDependencies":{"@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","rollup":"^4.9.6","tslib":"^2.6.2","typescript":"^5.3.3"},"_id":"@cfnwmp/ai-img-element@1.0.0","bugs":{"url":"https://github.com/yourusername/ai-img-element/issues"},"homepage":"https://github.com/yourusername/ai-img-element#readme","_nodeVersion":"24.13.1","_npmVersion":"11.8.0","dist":{"integrity":"sha512-HftbAgYIDx7zQKLYpD043X7VnrHZMJNhP8oBPc2VcDWF84i4BTjwoaSjH2euneViFxgVgirCYn63ZkyAOB1CxA==","shasum":"1416a2f49ea6c4cf1868beb853bd6555f61bd372","tarball":"https://registry.npmjs.org/@cfnwmp/ai-img-element/-/ai-img-element-1.0.0.tgz","fileCount":12,"unpackedSize":67653,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFQsHybDJtVeB+Cfy0iEX2YEwYmIIMLfUKYsPY3dWFGPAiEAzN+RsQtTgxZWP4p0yRTEyFeQi5b+XQA6DHJ5lUt1T3A="}]},"_npmUser":{"name":"cfnwmp","email":"1531527200@qq.com"},"directories":{},"maintainers":[{"name":"cfnwmp","email":"1531527200@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai-img-element_1.0.0_1776326534305_0.40725820014246317"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-16T08:02:14.233Z","1.0.0":"2026-04-16T08:02:14.450Z","modified":"2026-04-16T08:02:14.630Z"},"maintainers":[{"name":"cfnwmp","email":"1531527200@qq.com"}],"description":"A custom HTML element for AI-generated images with simple configuration","homepage":"https://github.com/yourusername/ai-img-element#readme","keywords":["ai","image","web-component","custom-element","flux","sdxl","ai-image","image-generation"],"repository":{"type":"git","url":"git+https://github.com/yourusername/ai-img-element.git"},"bugs":{"url":"https://github.com/yourusername/ai-img-element/issues"},"license":"MIT","readme":"# ai-img-element\n\n一个通过自定义 HTML 标签直接生成 AI 图片的插件。极其易用，不依赖 React/Vue 等框架，支持通过 CDN 或 NPM 引入。\n\n## 特性\n\n- 🎨 使用自定义 `<ai-img>` 标签直接生成 AI 图片\n- 🚀 极简 API，开箱即用\n- 🔧 支持全局配置和提示词\n- 💡 使用 Shadow DOM 封装，样式隔离\n- 📦 支持 NPM 和 CDN 引入\n- 🎯 支持 React、Vue 等任何框架\n\n## 安装\n\n```bash\nnpm install ai-img-element\n```\n\n## 使用方法\n\n### 在 React/Vue 中使用\n\n```javascript\nimport { AIImage } from 'ai-img-element';\n\n// 全局初始化\nAIImage.config({\n  baseUrl: 'https://api.your-service.com',\n  globalPrompt: 'masterpiece, high-end aesthetic, 8k resolution, minimalist'\n});\n```\n\n### 在 HTML 中使用\n\n```html\n<ai-img \n  prompt=\"一个具有极简主义风格的科技感蓝色登录框背景\" \n  width=\"800\" \n  height=\"600\">\n</ai-img>\n```\n\n### CDN 引入\n\n```html\n<script type=\"module\">\n  import { AIImage } from 'https://unpkg.com/ai-img-element/dist/index.esm.js';\n  \n  AIImage.config({\n    baseUrl: 'http://127.0.0.1:5555',\n    globalPrompt: 'masterpiece, high quality'\n  });\n</script>\n\n<ai-img \n  prompt=\"有考试通过、或者通关成功含义的图标，蓝紫渐变，毛玻璃\" \n  width=\"400\" \n  height=\"300\">\n</ai-img>\n```\n\n## API\n\n### AIImage.config(options)\n\n配置全局参数\n\n```typescript\nAIImage.config({\n  baseUrl: string;          // 必填：API 服务地址\n  globalPrompt?: string;    // 可选：全局提示词前缀\n  timeout?: number;         // 可选：请求超时时间（毫秒）\n  retryCount?: number;      // 可选：重试次数\n});\n```\n\n### `<ai-img>` 标签属性\n\n| 属性 | 类型 | 必填 | 说明 |\n|------|------|------|------|\n| prompt | string | 是 | 图片描述提示词 |\n| width | number | 否 | 图片宽度（默认 400） |\n| height | number | 否 | 图片高度（默认 300） |\n| alt | string | 否 | 图片 alt 文本 |\n| loading | 'lazy' \\| 'eager' | 否 | 加载方式 |\n\n## 后端 API 要求\n\n后端需要提供 `/api/generate` 接口，接收 POST 请求：\n\n```json\n{\n  \"user_input\": \"图片描述提示词\",\n  \"width\": 800,\n  \"height\": 600\n}\n```\n\n返回生成的图片（Blob 格式）。\n\n## 开发\n\n```bash\n# 安装依赖\nnpm install\n\n# 开发模式\nnpm run dev\n\n# 构建\nnpm run build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-9a63712834bd7449c473f9ce5ef5fa40"}