react-a11y-auto-caption 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Gaeun Kim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "react-a11y-auto-caption",
+  "version": "1.0.0",
+  "description": "Smart React component that automatically generates alt text for images using AI.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup && tsc --emitDeclarationOnly --declaration --declarationDir ./dist",
+    "dev": "tsup --watch"
+  },
+  "keywords": [
+    "react",
+    "accessibility",
+    "a11y",
+    "ai",
+    "image-captioning",
+    "alt-text"
+  ],
+  "author": "Gaeun Kim",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2",
+    "next": "^15.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "next": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  }
+}

package/src/index.tsx

@@ -0,0 +1,161 @@
+import React, { createContext, useContext, useState, useEffect, ImgHTMLAttributes } from "react";
+
+interface SmartImageContextProps {
+  apiEndpoint?: string;
+  disableAI?: boolean;
+}
+
+export const SmartImageContext = createContext<SmartImageContextProps | undefined>(undefined);
+
+export const SmartImageProvider: React.FC<{
+  value: SmartImageContextProps;
+  children: React.ReactNode;
+}> = ({ value, children }) => {
+  return <SmartImageContext.Provider value={value}>{children}</SmartImageContext.Provider>;
+};
+
+const captionCache = new Map<string, string>();
+const pendingRequestCache = new Map<string, Promise<string>>();
+
+export interface SmartImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  apiEndpoint?: string;
+  fallbackAlt?: string;
+  onCaptionGenerated?: (caption: string) => void;
+  disableAI?: boolean;
+  announceLive?: boolean;
+}
+
+export const SmartImage = ({
+  src,
+  alt,
+  apiEndpoint: propsEndpoint,
+  fallbackAlt = "Image loading or caption unavailable",
+  onCaptionGenerated,
+  disableAI: propsDisableAI,
+  announceLive = false,
+  ...props
+}: SmartImageProps) => {
+  const context = useContext(SmartImageContext);
+
+  const apiEndpoint = propsEndpoint || context?.apiEndpoint;
+  const disableAI = propsDisableAI ?? context?.disableAI ?? false;
+
+  const [generatedAlt, setGeneratedAlt] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  useEffect(() => {
+    if (alt) {
+      setGeneratedAlt(alt);
+      return;
+    }
+
+    if (!src) return;
+
+    if (disableAI) {
+      setGeneratedAlt("[Testing mode: AI caption generation disabled]");
+      return;
+    }
+
+    if (!apiEndpoint) {
+      console.warn(
+        "[SmartImage] Missing 'apiEndpoint' prop. Please provide a backend API URL via props or SmartImageProvider to enable AI caption generation.",
+      );
+      setGeneratedAlt(fallbackAlt);
+      return;
+    }
+
+    const imageUrl = src as string;
+
+    if (captionCache.has(imageUrl)) {
+      console.log("[SmartImage] Cache hit: Reusing existing caption.");
+      const cachedCaption = captionCache.get(imageUrl)!;
+      setGeneratedAlt(cachedCaption);
+
+      if (onCaptionGenerated) onCaptionGenerated(cachedCaption);
+      return;
+    }
+
+    const generateCaption = async () => {
+      setIsGenerating(true);
+      try {
+        if (pendingRequestCache.has(imageUrl)) {
+          console.log("[SmartImage] Pending request detected. Waiting for the existing API call to complete.");
+          const caption = await pendingRequestCache.get(imageUrl)!;
+          setGeneratedAlt(caption);
+          if (onCaptionGenerated) onCaptionGenerated(caption);
+          return;
+        }
+
+        const fetchPromise = (async () => {
+          const imageResponse = await fetch(imageUrl);
+          const imageBlob = await imageResponse.blob();
+
+          const imageFile = new File([imageBlob], "image.jpg", {
+            type: imageBlob.type || "image/jpeg",
+          });
+          const formData = new FormData();
+
+          formData.append("file", imageFile);
+
+          const response = await fetch(apiEndpoint, {
+            method: "POST",
+            body: formData,
+          });
+
+          if (!response.ok) throw new Error("AI API request failed");
+          const data = await response.json();
+
+          if (data.caption) return data.caption;
+          throw new Error("No caption returned from the API.");
+        })();
+
+        pendingRequestCache.set(imageUrl, fetchPromise);
+
+        const newCaption = await fetchPromise;
+
+        pendingRequestCache.delete(imageUrl);
+        captionCache.set(imageUrl, newCaption);
+
+        setGeneratedAlt(newCaption);
+
+        if (onCaptionGenerated) onCaptionGenerated(newCaption);
+      } catch (error) {
+        console.error("[SmartImage] Caption Error:", error);
+        pendingRequestCache.delete(imageUrl);
+        setGeneratedAlt(fallbackAlt);
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    generateCaption();
+  }, [src, alt, apiEndpoint, fallbackAlt, onCaptionGenerated, disableAI]);
+
+  const srOnlyStyle: React.CSSProperties = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: 0,
+  };
+
+  return (
+    <>
+      {announceLive && (
+        <span style={srOnlyStyle} aria-live="polite" aria-atomic="true">
+          {isGenerating
+            ? "Generating image description. Please wait..."
+            : generatedAlt
+              ? `Image description generated: ${generatedAlt}`
+              : ""}
+        </span>
+      )}
+
+      <img src={src} alt={generatedAlt} aria-busy={isGenerating} {...props} />
+    </>
+  );
+};

package/src/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

package/src/next.tsx

@@ -0,0 +1,154 @@
+import React, { useState, useEffect, useContext } from "react";
+import Image, { ImageProps } from "next/image";
+
+import { SmartImageContext } from "./index";
+
+function isStaticImport(source: any): source is { src: string } {
+  return typeof source === "object" && source !== null && "src" in source;
+}
+
+const captionCache = new Map<string, string>();
+const pendingRequestCache = new Map<string, Promise<string>>();
+
+export interface SmartNextImageProps extends Omit<ImageProps, "alt"> {
+  alt?: string;
+  apiEndpoint?: string;
+  fallbackAlt?: string;
+  onCaptionGenerated?: (caption: string) => void;
+  disableAI?: boolean;
+  announceLive?: boolean;
+}
+
+export const SmartNextImage = ({
+  src,
+  alt,
+  apiEndpoint: propsEndpoint,
+  fallbackAlt = "Image loading or caption unavailable",
+  onCaptionGenerated,
+  disableAI: propsDisableAI,
+  announceLive = false,
+  ...props
+}: SmartNextImageProps) => {
+  const context = useContext(SmartImageContext);
+  const apiEndpoint = propsEndpoint || context?.apiEndpoint;
+  const disableAI = propsDisableAI ?? context?.disableAI ?? false;
+
+  const [generatedAlt, setGeneratedAlt] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const imageUrl = isStaticImport(src) ? src.src : (src as string);
+
+  useEffect(() => {
+    if (alt) {
+      setGeneratedAlt(alt);
+      return;
+    }
+
+    if (!src) return;
+
+    if (disableAI) {
+      setGeneratedAlt("[Testing mode: AI caption generation disabled]");
+      return;
+    }
+
+    if (!apiEndpoint) {
+      console.warn(
+        "[SmartNextImage] Missing 'apiEndpoint' prop. Please provide a backend API URL via props or SmartImageProvider to enable AI caption generation.",
+      );
+      setGeneratedAlt(fallbackAlt);
+      return;
+    }
+
+    if (captionCache.has(imageUrl)) {
+      console.log("[SmartNextImage] Cache hit: Reusing existing caption.");
+      const cachedCaption = captionCache.get(imageUrl)!;
+      setGeneratedAlt(cachedCaption);
+
+      if (onCaptionGenerated) onCaptionGenerated(cachedCaption);
+      return;
+    }
+
+    const generateCaption = async () => {
+      setIsGenerating(true);
+      try {
+        if (pendingRequestCache.has(imageUrl)) {
+          console.log("[SmartNextImage] Pending request detected. Waiting for the existing API call to complete.");
+          const caption = await pendingRequestCache.get(imageUrl)!;
+          setGeneratedAlt(caption);
+          if (onCaptionGenerated) onCaptionGenerated(caption);
+          return;
+        }
+
+        const fetchPromise = (async () => {
+          const imageResponse = await fetch(imageUrl);
+          const imageBlob = await imageResponse.blob();
+
+          const imageFile = new File([imageBlob], "image.jpg", {
+            type: imageBlob.type || "image/jpeg",
+          });
+          const formData = new FormData();
+
+          formData.append("file", imageFile);
+
+          const response = await fetch(apiEndpoint, {
+            method: "POST",
+            body: formData,
+          });
+
+          if (!response.ok) throw new Error("AI API request failed");
+          const data = await response.json();
+
+          if (data.caption) return data.caption;
+          throw new Error("No caption returned from the API.");
+        })();
+
+        pendingRequestCache.set(imageUrl, fetchPromise);
+
+        const newCaption = await fetchPromise;
+
+        pendingRequestCache.delete(imageUrl);
+        captionCache.set(imageUrl, newCaption);
+
+        setGeneratedAlt(newCaption);
+
+        if (onCaptionGenerated) onCaptionGenerated(newCaption);
+      } catch (error) {
+        console.error("[SmartNextImage] Caption Error:", error);
+        pendingRequestCache.delete(imageUrl);
+        setGeneratedAlt(fallbackAlt);
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    generateCaption();
+  }, [src, alt, apiEndpoint, fallbackAlt, onCaptionGenerated, disableAI, imageUrl]);
+
+  const srOnlyStyle: React.CSSProperties = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: 0,
+  };
+
+  return (
+    <>
+      {announceLive && (
+        <span style={srOnlyStyle} aria-live="polite" aria-atomic="true">
+          {isGenerating
+            ? "Generating image description. Please wait..."
+            : generatedAlt
+              ? `Image description generated: ${generatedAlt}`
+              : ""}
+        </span>
+      )}
+
+      <Image src={src} alt={generatedAlt || ""} aria-busy={isGenerating} {...props} />
+    </>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "target": "es2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.tsx", "src/next.tsx"],
+  format: ["cjs", "esm"],
+  dts: false,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  external: ["react", "react-dom"],
+});