wc-img-ai 0.0.1

package/README.md

@@ -0,0 +1,17 @@
+# AI based img-tags
+
+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"
+  alt="a sleeping little kitten"
+  data-fallback="https://placekitten.com/12/12"
+/>
+```

package/dist/wc-image-ai.js

@@ -0,0 +1,80 @@
+const getOpenAi = async (endpoint, prompt, width, height) => {
+  let response;
+  console.log("getOpenAi", endpoint, prompt, width, height);
+  try {
+    const r = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        prompt,
+        width,
+        height
+      })
+    });
+    if (!r.ok) {
+      throw new Error("Network response was not ok");
+    }
+    response = await r.text();
+  } catch (error) {
+    console.error("There has been a problem with your fetch operation:", error);
+  }
+  return response;
+};
+class AIImage extends HTMLImageElement {
+  constructor() {
+    var _a;
+    super();
+    this._fallbackSrc = null;
+    this._prompt = null;
+    this._originalSrc = null;
+    this.svgPlaceholder = null;
+    this._endpoint = null;
+    this.ph_w = 256;
+    this.ph_h = 256;
+    this.getOpenAi = getOpenAi;
+    this.ph_w = Number(super.getAttribute("width")) || 256;
+    this.ph_h = Number(super.getAttribute("height")) || 256;
+    this.svgPlaceholder = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${this.ph_w} ${this.ph_h}"><rect width="${this.ph_w}" height="${this.ph_h}" fill="#ddd"/></svg>`;
+    this._originalSrc = this.getAttribute("currentSrc");
+    this._prompt = this.getAttribute("alt");
+    this._endpoint = ((_a = super.getAttribute("src")) == null ? void 0 : _a.toString()) || null;
+    this.addEventListener("error", (_event) => {
+      super.src = "data:image/svg+xml;utf8," + encodeURIComponent(this.svgPlaceholder);
+    });
+    super.src = "data:image/svg+xml;utf8," + encodeURIComponent(this.svgPlaceholder);
+    setTimeout(async () => {
+      if (!this._prompt) {
+        return;
+      }
+      const openAiResponse = await this.getOpenAi(
+        this._endpoint,
+        this._prompt,
+        this.ph_w,
+        this.ph_h
+      );
+      super.src = openAiResponse || this._fallbackSrc || "";
+    }, 1);
+  }
+  static get observedAttributes() {
+    return ["data-fallback"];
+  }
+  get src() {
+    return this._originalSrc || "";
+  }
+  set src(value) {
+    if (this._originalSrc !== value && this.src !== void 0) {
+      super.src = value;
+    }
+  }
+  set fallbackSrc(value) {
+    this._fallbackSrc = value;
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "data-fallback") {
+      this.fallbackSrc = newValue;
+    }
+  }
+}
+customElements.define("ai-image", AIImage, { extends: "img" });

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "wc-img-ai",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "exports": "./dist/wc-image-ai.js",
+  "license": "MIT",
+  "types": "./dist/wc-image-ai.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-wc": "^2.0.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  }
+}

package/types/ai-image.d.ts

@@ -0,0 +1,9 @@
+declare global {
+    interface AIImage extends HTMLImageElement {
+        "data-fallback"?: string;
+    }
+    interface HTMLElementTagNameMap {
+        "ai-image": AIImage;
+    }
+}
+export {};

package/types/get-open-ai.d.ts

@@ -0,0 +1 @@
+export declare const getOpenAi: (endpoint: string, prompt: string, width: number, height: number) => Promise<string | undefined>;