wc-img-ai 0.1.0 → 0.1.2

package/README.md

@@ -1,3 +1,59 @@
 # AI based img-tags
 
-WIP
+By simply providing a src to an api that does the AI for you, and you can simply get ai-rendered images anywhere you need based on the prompt-attribute.
+
+```html
+<ai-img
+  src="http://localhost:4321/api/openai/img"
+  width="256"
+  height="256"
+  prompt="funny dolphin up to no good"
+  fallback="https://placekitten.com/200/300"
+></ai-img>
+```
+
+## 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
+
+The web-component sends a POST request to the API to generate an image and expects an image in return.
+
+#### 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": 256,
+  "height": 256
+}
+```
+
+#### Server Return
+
+it is expected to return a simple string
+
+```json
+"https://example.com/path/to/generated/image.jpg"
+```
+
+#### Demo
+
+Check it out [running](https://john.ro/lab/img-ai) inside an MDX/Astro framework

package/dist/wc-img-ai.js

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var _a;
-const t$3 = globalThis, e$3 = t$3.ShadowRoot && (void 0 === t$3.ShadyCSS || t$3.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
+const t$4 = globalThis, e$3 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$4 = /* @__PURE__ */ new WeakMap();
 let n$4 = class n {
   constructor(t2, e2, o2) {
     if (this._$cssResult$ = true, o2 !== s$3)
@@ -38,7 +38,7 @@ const r$5 = (t2) => new n$4("string" == typeof t2 ? t2 : t2 + "", void 0, s$3),
     s3.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
   else
     for (const e2 of o2) {
-      const o3 = document.createElement("style"), n3 = t$3.litNonce;
+      const o3 = document.createElement("style"), n3 = t$4.litNonce;
       void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s3.appendChild(o3);
     }
 }, c$3 = e$3 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
@@ -299,7 +299,7 @@ b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d$1("elementProp
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$2 = globalThis, i$1 = t$2.trustedTypes, s$2 = i$1 ? i$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$1 = "$lit$", h$1 = `lit$${(Math.random() + "").slice(9)}$`, o$2 = "?" + h$1, n$2 = `<${o$2}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof (t2 == null ? void 0 : t2[Symbol.iterator]), d = "[ 	\n\f\r]", f$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
+const t$3 = globalThis, i$1 = t$3.trustedTypes, s$2 = i$1 ? i$1.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$1 = "$lit$", h$1 = `lit$${(Math.random() + "").slice(9)}$`, o$2 = "?" + h$1, n$2 = `<${o$2}>`, r$3 = document, l = () => r$3.createComment(""), c$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, a = Array.isArray, u = (t2) => a(t2) || "function" == typeof (t2 == null ? void 0 : t2[Symbol.iterator]), d = "[ 	\n\f\r]", f$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y = (t2) => (i2, ...s3) => ({ _$litType$: t2, strings: i2, values: s3 }), x = y(1), w = Symbol.for("lit-noChange"), T = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), E = r$3.createTreeWalker(r$3, 129);
 function C(t2, i2) {
   if (!Array.isArray(t2) || !t2.hasOwnProperty("raw"))
@@ -534,8 +534,8 @@ class L {
     N(this, t2);
   }
 }
-const Z = t$2.litHtmlPolyfillSupport;
-Z == null ? void 0 : Z(V, M), (t$2.litHtmlVersions ?? (t$2.litHtmlVersions = [])).push("3.1.0");
+const Z = t$3.litHtmlPolyfillSupport;
+Z == null ? void 0 : Z(V, M), (t$3.litHtmlVersions ?? (t$3.litHtmlVersions = [])).push("3.1.0");
 const j = (t2, i2, s3) => {
   const e2 = (s3 == null ? void 0 : s3.renderBefore) ?? i2;
   let h2 = e2._$litPart$;
@@ -584,7 +584,7 @@ r$2 == null ? void 0 : r$2({ LitElement: s$1 });
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$1 = (t2) => (e2, o2) => {
+const t$2 = (t2) => (e2, o2) => {
   void 0 !== o2 ? o2.addInitializer(() => {
     customElements.define(t2, e2);
   }) : customElements.define(t2, e2);
@@ -621,6 +621,17 @@ function n$1(t2) {
     return e3.constructor.createProperty(o3, r2 ? { ...t3, wrapped: true } : t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
   })(t2, e2, o2);
 }
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function t$1(t2) {
+  return (n3, o2) => {
+    const c2 = "function" == typeof n3 ? n3 : n3[o2];
+    Object.assign(c2, t2);
+  };
+}
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -939,6 +950,7 @@ let AiImg = class extends s$1 {
     this.prompt = "";
     this.imgAttributes = {};
     setTimeout(async () => {
+      var _a2;
       if (!this.prompt) {
         this.imgsrc = this.fallback;
         return;
@@ -955,7 +967,9 @@ let AiImg = class extends s$1 {
         console.error("Error fetching AI image:", error);
         this.imgsrc = this.fallback;
       }
-    }, 1e3);
+      const img = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("img");
+      img == null ? void 0 : img.addEventListener("error", this._onImgError.bind(this));
+    }, 1);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -979,6 +993,12 @@ let AiImg = class extends s$1 {
         this.height = attr.value;
       }
     });
+    this.imgsrc = "data:image/svg+xml;utf8," + encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${this.width} ${this.height}"><rect width="${this.width}" height="${this.height}" fill="#ddd"/></svg>`
+    );
+  }
+  _onImgError() {
+    this.imgsrc = this.fallback;
   }
   render() {
     const hostStyles = {
@@ -997,10 +1017,22 @@ let AiImg = class extends s$1 {
             <img
               src=${this.imgsrc}
               decoding="async"
-              loading="lazy"
+              loading="eager"
               ${spread(this.imgAttributes)}
+              @onerror=${() => {
+      console.log("onerror");
+    }}
+              @onabort=${() => {
+      console.log("onabort");
+    }}
+              @onloadend=${() => {
+      console.log("onloadend");
+    }}
+              @onprogress=${() => {
+      console.log("onprogress");
+    }}
             />
-          ` : ""}
+          ` : x`<div>fail</div>`}
     `;
   }
 };
@@ -1045,8 +1077,11 @@ __decorateClass([
 __decorateClass([
   n$1({ type: String, reflect: true })
 ], AiImg.prototype, "prompt", 2);
+__decorateClass([
+  t$1({ passive: true })
+], AiImg.prototype, "_onImgError", 1);
 AiImg = __decorateClass([
-  t$1("ai-img")
+  t$2("ai-img")
 ], AiImg);
 export {
   AiImg

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wc-img-ai",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Use AI to generate images for your img tags.",
   "author": {
     "name": "John Romani",

package/types/ai-img.d.ts

@@ -12,6 +12,7 @@ export declare class AiImg extends LitElement {
     };
     connectedCallback(): void;
     protected constructor();
+    private _onImgError;
     protected render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/types/ai-image.d.ts

@@ -1,24 +0,0 @@
-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;
-    }
-    interface HTMLElementTagNameMap {
-        "ai-image": AIImage;
-    }
-}