wc-img-ai 0.0.2 → 0.0.4

package/README.md

@@ -3,15 +3,52 @@
 By simply providing an src to an api that does the AI for you, and you can simply get ai-rendered images anywhere you need based on the alt-attribute.
 
 ```html
-<script
-  type="module"
-  src="/src/ai-image.ts"
-></script>
-
 <img
   is="ai-image"
-  src="/api/openai"
+  src="/api/myimage"
   alt="a sleeping little kitten"
   data-fallback="https://placekitten.com/12/12"
 />
 ```
+
+## installation
+
+```bash
+pnpm i wc-img-ai
+```
+
+```html
+<script type="module">
+  import "wc-img-ai"
+</script>
+```
+
+The api server itself needs to receive this body and return a string with the url of the image
+
+### Function: POST
+
+This function sends a request to the an API to generate an image based on a given prompt.
+
+#### Request Body Format
+
+- **prompt** (string): The description or prompt based on which the image will be generated.
+- **width** (number): The width of the desired image in pixels.
+- **height** (number): The height of the desired image in pixels.
+
+#### Example Request Body
+
+```json
+{
+  "prompt": "a sleeping little kitten",
+  "width": 300,
+  "height": 300
+}
+```
+
+#### Return
+
+it is expected to return a simple string
+
+```json
+"https://example.com/path/to/generated/image.jpg"
+```

package/dist/wc-img-ai.js

@@ -77,3 +77,6 @@ class AIImage extends HTMLImageElement {
   }
 }
 customElements.define("ai-image", AIImage, { extends: "img" });
+export {
+  AIImage
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-img-ai",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Use AI to generate images for your img tags.",
   "author": {
     "name": "John Romani",
@@ -21,6 +21,11 @@
     "dist",
     "types"
   ],
+  "main": "./dist/wc-img-ai.js",
+  "exports": {
+    ".": "./dist/wc-img-ai.js",
+    "./wc-img-ai.d.ts": "./types/wc-img-ai.d.ts"
+  },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",

package/types/ai-image.d.ts

@@ -1,3 +1,19 @@
+export declare class AIImage extends HTMLImageElement {
+    static get observedAttributes(): string[];
+    private _fallbackSrc;
+    private _prompt;
+    private _originalSrc;
+    private svgPlaceholder;
+    private _endpoint;
+    private ph_w;
+    private ph_h;
+    constructor();
+    get src(): string;
+    set src(value: string);
+    set fallbackSrc(value: string | null);
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+    protected getGeneratedImage: (endpoint: string, prompt: string, width: number, height: number) => Promise<string | undefined>;
+}
 declare global {
     interface AIImage extends HTMLImageElement {
         "data-fallback"?: string;
@@ -6,4 +22,3 @@ declare global {
         "ai-image": AIImage;
     }
 }
-export {};