@jhb.software/payload-alt-text-plugin 0.1.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 JHB Software
+
+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/README.md

@@ -0,0 +1,54 @@
+# Image Alt Text Generation Plugin for Payload CMS
+
+A minimal plugin to generate image alt texts using OpenAI's Vision API.
+
+## Installation
+
+```bash
+pnpm add @jhb.software/payload-alt-text-plugin
+```
+
+## Setup
+
+### 1. Add plugin to Payload config
+
+```typescript
+import { payloadAltTextPlugin } from '@jhb.software/payload-alt-text-plugin'
+
+export default buildConfig({
+  plugins: [
+    payloadAltTextPlugin({
+      collections: ['media'], // Specify which upload collections should have alt text fields
+      openAIApiKey: process.env.OPENAI_API_KEY!,
+      model: 'gpt-4.1-mini',
+      getImageThumbnail: (doc: Record<string, unknown>) => {
+        // a function to get a thumbnail URL (e.g. from the sizes)
+        return doc.url as string
+      },
+    }),
+  ],
+})
+```
+
+## Features
+
+When the plugin is enabled for an upload collection, it will
+
+1. Add an alt text field to the collection
+   - A button to AI-generate the alt text
+   - This field will include a description of what the alt text should be
+2. Add a keywords fields to the collection
+   - This field will be automatically filled when generating the alt text 
+   - It can be used for improving the search of images in the admin panel
+2. Add a bulk generate button to the collection list view
+   - This button will allow you to generate alt text for multiple images at once
+
+## Roadmap
+
+> ⚠️ **Warning**: This plugin is actively evolving and may undergo significant changes. While it is functional, please thoroughly test before using in production environments.
+
+Have a suggestion for the plugin? Any feedback is welcome!
+
+## Contributing
+
+We welcome contributions! Please open an issue to report bugs or suggest improvements, or submit a pull request with your changes.

package/dist/components/AltTextField.d.ts

@@ -0,0 +1,2 @@
+import type { TextareaFieldClientProps } from 'payload';
+export declare const AltTextField: (clientProps: TextareaFieldClientProps) => import("react").JSX.Element;

package/dist/components/AltTextField.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldLabel, TextareaInput, useDocumentInfo, useField } from '@payloadcms/ui';
+import { GenerateAltTextButton } from './GenerateAltTextButton.js';
+export const AltTextField = (clientProps)=>{
+    const { field, path } = clientProps;
+    const { value, setValue } = useField({
+        path
+    });
+    const { id } = useDocumentInfo();
+    // the field should be optional when the document is created
+    // (since the alt text generation can only be used once the document is created and the image uploaded)
+    const required = id ? field.required : false;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type textarea",
+        style: {
+            flex: '1 1 auto'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(FieldLabel, {
+                htmlFor: `field-${path}`,
+                label: field.label,
+                required: required,
+                localized: field.localized
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "field-type__wrap",
+                children: /*#__PURE__*/ _jsx(TextareaInput, {
+                    value: value,
+                    path: path,
+                    required: required,
+                    onChange: (e)=>setValue(e.target.value),
+                    AfterInput: /*#__PURE__*/ _jsx(GenerateAltTextButton, {})
+                })
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=AltTextField.js.map

package/dist/components/AltTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/AltTextField.tsx"],"sourcesContent":["'use client'\n\nimport { FieldLabel, TextareaInput, useDocumentInfo, useField } from '@payloadcms/ui'\nimport type { TextareaFieldClientProps } from 'payload'\n\nimport { GenerateAltTextButton } from './GenerateAltTextButton.js'\n\nexport const AltTextField = (clientProps: TextareaFieldClientProps) => {\n  const { field, path } = clientProps\n\n  const { value, setValue } = useField<string>({ path })\n  const { id } = useDocumentInfo()\n\n  // the field should be optional when the document is created\n  // (since the alt text generation can only be used once the document is created and the image uploaded)\n  const required = id ? field.required : false\n\n  return (\n    <div className=\"field-type textarea\" style={{ flex: '1 1 auto' }}>\n      <FieldLabel\n        htmlFor={`field-${path}`}\n        label={field.label}\n        required={required}\n        localized={field.localized}\n      />\n\n      <div className=\"field-type__wrap\">\n        <TextareaInput\n          value={value}\n          path={path!}\n          required={required}\n          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n          AfterInput={<GenerateAltTextButton />}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldLabel","TextareaInput","useDocumentInfo","useField","GenerateAltTextButton","AltTextField","clientProps","field","path","value","setValue","id","required","div","className","style","flex","htmlFor","label","localized","onChange","e","target","AfterInput"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,aAAa,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,iBAAgB;AAGrF,SAASC,qBAAqB,QAAQ,6BAA4B;AAElE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGF;IAExB,MAAM,EAAEG,KAAK,EAAEC,QAAQ,EAAE,GAAGP,SAAiB;QAAEK;IAAK;IACpD,MAAM,EAAEG,EAAE,EAAE,GAAGT;IAEf,4DAA4D;IAC5D,uGAAuG;IACvG,MAAMU,WAAWD,KAAKJ,MAAMK,QAAQ,GAAG;IAEvC,qBACE,MAACC;QAAIC,WAAU;QAAsBC,OAAO;YAAEC,MAAM;QAAW;;0BAC7D,KAAChB;gBACCiB,SAAS,CAAC,MAAM,EAAET,MAAM;gBACxBU,OAAOX,MAAMW,KAAK;gBAClBN,UAAUA;gBACVO,WAAWZ,MAAMY,SAAS;;0BAG5B,KAACN;gBAAIC,WAAU;0BACb,cAAA,KAACb;oBACCQ,OAAOA;oBACPD,MAAMA;oBACNI,UAAUA;oBACVQ,UAAU,CAACC,IAA8CX,SAASW,EAAEC,MAAM,CAACb,KAAK;oBAChFc,0BAAY,KAACnB;;;;;AAKvB,EAAC"}

package/dist/components/BulkGenerateAltTextsButton.d.ts

@@ -0,0 +1 @@
+export declare function BulkGenerateAltTextsButton(): false | import("react").JSX.Element;

package/dist/components/BulkGenerateAltTextsButton.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, toast, useSelection } from '@payloadcms/ui';
+import { useRouter } from 'next/navigation.js';
+import { useTransition } from 'react';
+import { Lightning } from './icons/Lightning.js';
+import { Spinner } from './icons/Spinner.js';
+export function BulkGenerateAltTextsButton() {
+    const [isPending, startTransition] = useTransition();
+    const { selected, setSelection } = useSelection();
+    const selectedIds = Array.from(selected.entries()).filter(([, isSelected])=>isSelected).map(([id])=>id);
+    const router = useRouter();
+    const handleGenerateAltTexts = async ()=>{
+        startTransition(async ()=>{
+            try {
+                const response = await fetch('/api/alt-text-plugin/bulk-generate-alt-texts', {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        collection: 'media',
+                        ids: selectedIds
+                    })
+                });
+                if (!response.ok) {
+                    toast.error('Failed to generate alt text. Please try again.');
+                    return;
+                }
+                const data = await response.json();
+                if (data.erroredDocs.length > 0) {
+                    toast.error(`Failed to generate alt text for ${data.erroredDocs.length} images.`);
+                }
+                // in case not all images were updated, show a warning instead of a success message:
+                if (data.updatedDocs === data.totalDocs) {
+                    toast.success(`${data.updatedDocs} of ${data.totalDocs} images updated.`);
+                } else {
+                    toast.warning(`${data.updatedDocs} of ${data.totalDocs} images updated.`);
+                }
+                // deselect all previously selected images
+                for (const id of selectedIds){
+                    setSelection(id);
+                }
+                router.refresh();
+            } catch (error) {
+                console.error('Error generating alt text:', error);
+                toast.error('Error generating alt text. Please try again.');
+            }
+        });
+    };
+    return selectedIds.length > 0 && /*#__PURE__*/ _jsx("div", {
+        style: {
+            display: 'flex',
+            justifyContent: 'right'
+        },
+        className: "m-0",
+        children: /*#__PURE__*/ _jsxs(Button, {
+            onClick: handleGenerateAltTexts,
+            disabled: isPending || selectedIds.length === 0,
+            icon: isPending ? /*#__PURE__*/ _jsx(Spinner, {}) : /*#__PURE__*/ _jsx(Lightning, {}),
+            className: "m-0",
+            children: [
+                "Generate alt text for ",
+                selectedIds.length,
+                " ",
+                selectedIds.length === 1 ? 'image' : 'images'
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=BulkGenerateAltTextsButton.js.map

package/dist/components/BulkGenerateAltTextsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/BulkGenerateAltTextsButton.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useSelection } from '@payloadcms/ui'\nimport { useRouter } from 'next/navigation.js'\nimport { useTransition } from 'react'\n\nimport { Lightning } from './icons/Lightning.js'\nimport { Spinner } from './icons/Spinner.js'\n\nexport function BulkGenerateAltTextsButton() {\n  const [isPending, startTransition] = useTransition()\n  const { selected, setSelection } = useSelection()\n\n  const selectedIds = Array.from(selected.entries())\n    .filter(([, isSelected]) => isSelected)\n    .map(([id]) => id) as string[]\n\n  const router = useRouter()\n\n  const handleGenerateAltTexts = async () => {\n    startTransition(async () => {\n      try {\n        const response = await fetch('/api/alt-text-plugin/bulk-generate-alt-texts', {\n          method: 'POST',\n          body: JSON.stringify({\n            collection: 'media',\n            ids: selectedIds,\n          }),\n        })\n\n        if (!response.ok) {\n          toast.error('Failed to generate alt text. Please try again.')\n          return\n        }\n\n        const data = (await response.json()) as {\n          updatedDocs: number\n          totalDocs: number\n          erroredDocs: string[]\n        }\n\n        if (data.erroredDocs.length > 0) {\n          toast.error(`Failed to generate alt text for ${data.erroredDocs.length} images.`)\n        }\n\n        // in case not all images were updated, show a warning instead of a success message:\n        if (data.updatedDocs === data.totalDocs) {\n          toast.success(`${data.updatedDocs} of ${data.totalDocs} images updated.`)\n        } else {\n          toast.warning(`${data.updatedDocs} of ${data.totalDocs} images updated.`)\n        }\n\n        // deselect all previously selected images\n        for (const id of selectedIds) {\n          setSelection(id)\n        }\n\n        router.refresh()\n      } catch (error) {\n        console.error('Error generating alt text:', error)\n        toast.error('Error generating alt text. Please try again.')\n      }\n    })\n  }\n\n  return (\n    selectedIds.length > 0 && (\n      <div style={{ display: 'flex', justifyContent: 'right' }} className=\"m-0\">\n        <Button\n          onClick={handleGenerateAltTexts}\n          disabled={isPending || selectedIds.length === 0}\n          icon={isPending ? <Spinner /> : <Lightning />}\n          className=\"m-0\"\n        >\n          Generate alt text for {selectedIds.length} {selectedIds.length === 1 ? 'image' : 'images'}\n        </Button>\n      </div>\n    )\n  )\n}\n"],"names":["Button","toast","useSelection","useRouter","useTransition","Lightning","Spinner","BulkGenerateAltTextsButton","isPending","startTransition","selected","setSelection","selectedIds","Array","from","entries","filter","isSelected","map","id","router","handleGenerateAltTexts","response","fetch","method","body","JSON","stringify","collection","ids","ok","error","data","json","erroredDocs","length","updatedDocs","totalDocs","success","warning","refresh","console","div","style","display","justifyContent","className","onClick","disabled","icon"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,YAAY,QAAQ,iBAAgB;AAC5D,SAASC,SAAS,QAAQ,qBAAoB;AAC9C,SAASC,aAAa,QAAQ,QAAO;AAErC,SAASC,SAAS,QAAQ,uBAAsB;AAChD,SAASC,OAAO,QAAQ,qBAAoB;AAE5C,OAAO,SAASC;IACd,MAAM,CAACC,WAAWC,gBAAgB,GAAGL;IACrC,MAAM,EAAEM,QAAQ,EAAEC,YAAY,EAAE,GAAGT;IAEnC,MAAMU,cAAcC,MAAMC,IAAI,CAACJ,SAASK,OAAO,IAC5CC,MAAM,CAAC,CAAC,GAAGC,WAAW,GAAKA,YAC3BC,GAAG,CAAC,CAAC,CAACC,GAAG,GAAKA;IAEjB,MAAMC,SAASjB;IAEf,MAAMkB,yBAAyB;QAC7BZ,gBAAgB;YACd,IAAI;gBACF,MAAMa,WAAW,MAAMC,MAAM,gDAAgD;oBAC3EC,QAAQ;oBACRC,MAAMC,KAAKC,SAAS,CAAC;wBACnBC,YAAY;wBACZC,KAAKjB;oBACP;gBACF;gBAEA,IAAI,CAACU,SAASQ,EAAE,EAAE;oBAChB7B,MAAM8B,KAAK,CAAC;oBACZ;gBACF;gBAEA,MAAMC,OAAQ,MAAMV,SAASW,IAAI;gBAMjC,IAAID,KAAKE,WAAW,CAACC,MAAM,GAAG,GAAG;oBAC/BlC,MAAM8B,KAAK,CAAC,CAAC,gCAAgC,EAAEC,KAAKE,WAAW,CAACC,MAAM,CAAC,QAAQ,CAAC;gBAClF;gBAEA,oFAAoF;gBACpF,IAAIH,KAAKI,WAAW,KAAKJ,KAAKK,SAAS,EAAE;oBACvCpC,MAAMqC,OAAO,CAAC,GAAGN,KAAKI,WAAW,CAAC,IAAI,EAAEJ,KAAKK,SAAS,CAAC,gBAAgB,CAAC;gBAC1E,OAAO;oBACLpC,MAAMsC,OAAO,CAAC,GAAGP,KAAKI,WAAW,CAAC,IAAI,EAAEJ,KAAKK,SAAS,CAAC,gBAAgB,CAAC;gBAC1E;gBAEA,0CAA0C;gBAC1C,KAAK,MAAMlB,MAAMP,YAAa;oBAC5BD,aAAaQ;gBACf;gBAEAC,OAAOoB,OAAO;YAChB,EAAE,OAAOT,OAAO;gBACdU,QAAQV,KAAK,CAAC,8BAA8BA;gBAC5C9B,MAAM8B,KAAK,CAAC;YACd;QACF;IACF;IAEA,OACEnB,YAAYuB,MAAM,GAAG,mBACnB,KAACO;QAAIC,OAAO;YAAEC,SAAS;YAAQC,gBAAgB;QAAQ;QAAGC,WAAU;kBAClE,cAAA,MAAC9C;YACC+C,SAAS1B;YACT2B,UAAUxC,aAAaI,YAAYuB,MAAM,KAAK;YAC9Cc,MAAMzC,0BAAY,KAACF,6BAAa,KAACD;YACjCyC,WAAU;;gBACX;gBACwBlC,YAAYuB,MAAM;gBAAC;gBAAEvB,YAAYuB,MAAM,KAAK,IAAI,UAAU;;;;AAK3F"}

package/dist/components/GenerateAltTextButton.d.ts

@@ -0,0 +1 @@
+export declare function GenerateAltTextButton(): import("react").JSX.Element;

package/dist/components/GenerateAltTextButton.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, toast, useDocumentInfo, useField, useLocale } from '@payloadcms/ui';
+import { useTransition } from 'react';
+import { Lightning } from './icons/Lightning.js';
+import { Spinner } from './icons/Spinner.js';
+export function GenerateAltTextButton() {
+    const { id, collectionSlug } = useDocumentInfo();
+    const locale = useLocale();
+    const [isPending, startTransition] = useTransition();
+    const { setValue: setKeywords } = useField({
+        path: 'keywords'
+    });
+    const { setValue: setAltText } = useField({
+        path: 'alt'
+    });
+    const handleGenerateAltText = async ()=>{
+        if (!collectionSlug || !id) {
+            toast.error('Cannot generate alt text. Missing required fields.');
+            throw new Error('Missing required fields');
+        }
+        startTransition(async ()=>{
+            try {
+                const response = await fetch('/api/alt-text-plugin/generate-alt-text', {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        collection: collectionSlug,
+                        id: id,
+                        locale: locale.code
+                    })
+                });
+                if (!response.ok) {
+                    let errorMessage = 'Failed to generate alt text. Please try again.';
+                    try {
+                        const errorData = await response.json();
+                        errorMessage = errorData.error;
+                    } catch (error) {
+                        console.error('Error generating alt text:', error);
+                    }
+                    toast.error(errorMessage);
+                    return;
+                }
+                const data = await response.json();
+                if (data.altText && data.keywords) {
+                    setAltText(data.altText);
+                    setKeywords(data.keywords);
+                    toast.success('Alt text generated successfully. Please review and save the document.');
+                } else {
+                    toast.error('No alt text generated. Please try again.');
+                }
+            } catch (error) {
+                console.error('Error generating alt text:', error);
+                toast.error('Error generating alt text. Please try again.');
+            }
+        });
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            gap: '20px',
+            marginTop: '10px'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    flex: '1',
+                    color: 'var(--theme-elevation-400)'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        children: "Alternate text for the image. This will be used for screen readers and SEO. It should meet the following requirements:"
+                    }),
+                    /*#__PURE__*/ _jsxs("ol", {
+                        style: {
+                            paddingLeft: '20px',
+                            margin: '10px 0'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("li", {
+                                children: "Briefly describe what is visible in the image in 1–2 sentences."
+                            }),
+                            /*#__PURE__*/ _jsx("li", {
+                                children: "Ensure it conveys the same information or purpose as the image, whenever possible."
+                            }),
+                            /*#__PURE__*/ _jsx("li", {
+                                children: 'Avoid phrases like "image of" or "picture of" — screen readers already announce that it"s an image.'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: /*#__PURE__*/ _jsx(Button, {
+                    onClick: handleGenerateAltText,
+                    disabled: isPending || !id,
+                    icon: isPending ? /*#__PURE__*/ _jsx(Spinner, {}) : /*#__PURE__*/ _jsx(Lightning, {}),
+                    tooltip: !id ? 'Please save the document first' : undefined,
+                    children: "Generate alt text"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=GenerateAltTextButton.js.map

package/dist/components/GenerateAltTextButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/GenerateAltTextButton.tsx"],"sourcesContent":["'use client'\n\nimport { Button, toast, useDocumentInfo, useField, useLocale } from '@payloadcms/ui'\nimport { useTransition } from 'react'\n\nimport { Lightning } from './icons/Lightning.js'\nimport { Spinner } from './icons/Spinner.js'\n\nexport function GenerateAltTextButton() {\n  const { id, collectionSlug } = useDocumentInfo()\n  const locale = useLocale()\n  const [isPending, startTransition] = useTransition()\n\n  const { setValue: setKeywords } = useField<string>({ path: 'keywords' })\n  const { setValue: setAltText } = useField<string>({ path: 'alt' })\n\n  const handleGenerateAltText = async () => {\n    if (!collectionSlug || !id) {\n      toast.error('Cannot generate alt text. Missing required fields.')\n      throw new Error('Missing required fields')\n    }\n\n    startTransition(async () => {\n      try {\n        const response = await fetch('/api/alt-text-plugin/generate-alt-text', {\n          method: 'POST',\n          body: JSON.stringify({\n            collection: collectionSlug,\n            id: id as string,\n            locale: locale.code,\n          }),\n        })\n\n        if (!response.ok) {\n          let errorMessage = 'Failed to generate alt text. Please try again.'\n          try {\n            const errorData = (await response.json()) as { error: string }\n            errorMessage = errorData.error\n          } catch (error) {\n            console.error('Error generating alt text:', error)\n          }\n\n          toast.error(errorMessage)\n          return\n        }\n\n        const data = (await response.json()) as {\n          altText: string\n          keywords: string[]\n        }\n\n        if (data.altText && data.keywords) {\n          setAltText(data.altText)\n          setKeywords(data.keywords)\n          toast.success('Alt text generated successfully. Please review and save the document.')\n        } else {\n          toast.error('No alt text generated. Please try again.')\n        }\n      } catch (error) {\n        console.error('Error generating alt text:', error)\n        toast.error('Error generating alt text. Please try again.')\n      }\n    })\n  }\n\n  return (\n    <div style={{ display: 'flex', gap: '20px', marginTop: '10px' }}>\n      <div style={{ flex: '1', color: 'var(--theme-elevation-400)' }}>\n        <p>\n          Alternate text for the image. This will be used for screen readers and SEO. It should meet\n          the following requirements:\n        </p>\n        <ol style={{ paddingLeft: '20px', margin: '10px 0' }}>\n          <li>Briefly describe what is visible in the image in 1–2 sentences.</li>\n          <li>\n            Ensure it conveys the same information or purpose as the image, whenever possible.\n          </li>\n          <li>\n            Avoid phrases like &quot;image of&quot; or &quot;picture of&quot; — screen readers\n            already announce that it&quot;s an image.\n          </li>\n        </ol>\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center' }}>\n        <Button\n          onClick={handleGenerateAltText}\n          disabled={isPending || !id}\n          icon={isPending ? <Spinner /> : <Lightning />}\n          tooltip={!id ? 'Please save the document first' : undefined}\n        >\n          Generate alt text\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["Button","toast","useDocumentInfo","useField","useLocale","useTransition","Lightning","Spinner","GenerateAltTextButton","id","collectionSlug","locale","isPending","startTransition","setValue","setKeywords","path","setAltText","handleGenerateAltText","error","Error","response","fetch","method","body","JSON","stringify","collection","code","ok","errorMessage","errorData","json","console","data","altText","keywords","success","div","style","display","gap","marginTop","flex","color","p","ol","paddingLeft","margin","li","alignItems","onClick","disabled","icon","tooltip","undefined"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,iBAAgB;AACpF,SAASC,aAAa,QAAQ,QAAO;AAErC,SAASC,SAAS,QAAQ,uBAAsB;AAChD,SAASC,OAAO,QAAQ,qBAAoB;AAE5C,OAAO,SAASC;IACd,MAAM,EAAEC,EAAE,EAAEC,cAAc,EAAE,GAAGR;IAC/B,MAAMS,SAASP;IACf,MAAM,CAACQ,WAAWC,gBAAgB,GAAGR;IAErC,MAAM,EAAES,UAAUC,WAAW,EAAE,GAAGZ,SAAiB;QAAEa,MAAM;IAAW;IACtE,MAAM,EAAEF,UAAUG,UAAU,EAAE,GAAGd,SAAiB;QAAEa,MAAM;IAAM;IAEhE,MAAME,wBAAwB;QAC5B,IAAI,CAACR,kBAAkB,CAACD,IAAI;YAC1BR,MAAMkB,KAAK,CAAC;YACZ,MAAM,IAAIC,MAAM;QAClB;QAEAP,gBAAgB;YACd,IAAI;gBACF,MAAMQ,WAAW,MAAMC,MAAM,0CAA0C;oBACrEC,QAAQ;oBACRC,MAAMC,KAAKC,SAAS,CAAC;wBACnBC,YAAYjB;wBACZD,IAAIA;wBACJE,QAAQA,OAAOiB,IAAI;oBACrB;gBACF;gBAEA,IAAI,CAACP,SAASQ,EAAE,EAAE;oBAChB,IAAIC,eAAe;oBACnB,IAAI;wBACF,MAAMC,YAAa,MAAMV,SAASW,IAAI;wBACtCF,eAAeC,UAAUZ,KAAK;oBAChC,EAAE,OAAOA,OAAO;wBACdc,QAAQd,KAAK,CAAC,8BAA8BA;oBAC9C;oBAEAlB,MAAMkB,KAAK,CAACW;oBACZ;gBACF;gBAEA,MAAMI,OAAQ,MAAMb,SAASW,IAAI;gBAKjC,IAAIE,KAAKC,OAAO,IAAID,KAAKE,QAAQ,EAAE;oBACjCnB,WAAWiB,KAAKC,OAAO;oBACvBpB,YAAYmB,KAAKE,QAAQ;oBACzBnC,MAAMoC,OAAO,CAAC;gBAChB,OAAO;oBACLpC,MAAMkB,KAAK,CAAC;gBACd;YACF,EAAE,OAAOA,OAAO;gBACdc,QAAQd,KAAK,CAAC,8BAA8BA;gBAC5ClB,MAAMkB,KAAK,CAAC;YACd;QACF;IACF;IAEA,qBACE,MAACmB;QAAIC,OAAO;YAAEC,SAAS;YAAQC,KAAK;YAAQC,WAAW;QAAO;;0BAC5D,MAACJ;gBAAIC,OAAO;oBAAEI,MAAM;oBAAKC,OAAO;gBAA6B;;kCAC3D,KAACC;kCAAE;;kCAIH,MAACC;wBAAGP,OAAO;4BAAEQ,aAAa;4BAAQC,QAAQ;wBAAS;;0CACjD,KAACC;0CAAG;;0CACJ,KAACA;0CAAG;;0CAGJ,KAACA;0CAAG;;;;;;0BAMR,KAACX;gBAAIC,OAAO;oBAAEC,SAAS;oBAAQU,YAAY;gBAAS;0BAClD,cAAA,KAAClD;oBACCmD,SAASjC;oBACTkC,UAAUxC,aAAa,CAACH;oBACxB4C,MAAMzC,0BAAY,KAACL,6BAAa,KAACD;oBACjCgD,SAAS,CAAC7C,KAAK,mCAAmC8C;8BACnD;;;;;AAMT"}

package/dist/components/icons/Lightning.d.ts

@@ -0,0 +1 @@
+export declare function Lightning(): import("react").JSX.Element;

package/dist/components/icons/Lightning.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Lightning() {
+    return /*#__PURE__*/ _jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        style: {
+            height: '1rem',
+            width: '1rem'
+        },
+        children: /*#__PURE__*/ _jsx("path", {
+            fillRule: "evenodd",
+            d: "M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z",
+            clipRule: "evenodd"
+        })
+    });
+}
+
+//# sourceMappingURL=Lightning.js.map

package/dist/components/icons/Lightning.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/Lightning.tsx"],"sourcesContent":["export function Lightning() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      style={{\n        height: '1rem',\n        width: '1rem',\n      }}\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\n"],"names":["Lightning","svg","xmlns","viewBox","fill","style","height","width","path","fillRule","d","clipRule"],"mappings":";AAAA,OAAO,SAASA;IACd,qBACE,KAACC;QACCC,OAAM;QACNC,SAAQ;QACRC,MAAK;QACLC,OAAO;YACLC,QAAQ;YACRC,OAAO;QACT;kBAEA,cAAA,KAACC;YACCC,UAAS;YACTC,GAAE;YACFC,UAAS;;;AAIjB"}

package/dist/components/icons/Spinner.d.ts

@@ -0,0 +1 @@
+export declare function Spinner(): import("react").JSX.Element;

package/dist/components/icons/Spinner.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Spinner() {
+    return /*#__PURE__*/ _jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        style: {
+            height: '1rem',
+            width: '1rem',
+            animation: 'spin 1s linear infinite'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("style", {
+                children: `
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `
+            }),
+            /*#__PURE__*/ _jsx("circle", {
+                style: {
+                    opacity: 0.25
+                },
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                style: {
+                    opacity: 0.75
+                },
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=Spinner.js.map

package/dist/components/icons/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/icons/Spinner.tsx"],"sourcesContent":["export function Spinner() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      style={{\n        height: '1rem',\n        width: '1rem',\n        animation: 'spin 1s linear infinite',\n      }}\n    >\n      <style>\n        {`\n          @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n          }\n        `}\n      </style>\n      <circle\n        style={{ opacity: 0.25 }}\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      ></circle>\n      <path\n        style={{ opacity: 0.75 }}\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      ></path>\n    </svg>\n  )\n}\n"],"names":["Spinner","svg","xmlns","fill","viewBox","style","height","width","animation","circle","opacity","cx","cy","r","stroke","strokeWidth","path","d"],"mappings":";AAAA,OAAO,SAASA;IACd,qBACE,MAACC;QACCC,OAAM;QACNC,MAAK;QACLC,SAAQ;QACRC,OAAO;YACLC,QAAQ;YACRC,OAAO;YACPC,WAAW;QACb;;0BAEA,KAACH;0BACE,CAAC;;;;;QAKF,CAAC;;0BAEH,KAACI;gBACCJ,OAAO;oBAAEK,SAAS;gBAAK;gBACvBC,IAAG;gBACHC,IAAG;gBACHC,GAAE;gBACFC,QAAO;gBACPC,aAAY;;0BAEd,KAACC;gBACCX,OAAO;oBAAEK,SAAS;gBAAK;gBACvBP,MAAK;gBACLc,GAAE;;;;AAIV"}

package/dist/endpoints/bulkGenerateAltTexts.d.ts

@@ -0,0 +1,5 @@
+import type { PayloadHandler } from 'payload';
+/**
+ * Generates and updates alt text for multiple images in all locales.
+ */
+export declare const bulkGenerateAltTextsEndpoint: PayloadHandler;

package/dist/endpoints/bulkGenerateAltTexts.js

@@ -0,0 +1,150 @@
+import OpenAI from 'openai';
+import pMap from 'p-map';
+import { z } from 'zod';
+import { getGenerationCost } from '../utilities/getGenerationCost.js';
+import { zodResponseFormat } from '../utilities/zodResponseFormat.js';
+/**
+ * Generates and updates alt text for multiple images in all locales.
+ */ export const bulkGenerateAltTextsEndpoint = async (req)=>{
+    try {
+        if (!req.user) {
+            return Response.json({
+                error: 'Unauthorized'
+            }, {
+                status: 401
+            });
+        }
+        const data = 'json' in req && typeof req.json === 'function' ? await req.json() : null;
+        const schema = z.object({
+            collection: z.string(),
+            ids: z.array(z.string())
+        });
+        const { collection, ids } = schema.parse(data);
+        let updatedDocs = 0;
+        const erroredDocs = [];
+        // Get plugin config from payload config
+        const pluginConfig = req.payload.config.custom?.altTextPluginConfig;
+        if (!pluginConfig?.openAIApiKey) {
+            return Response.json({
+                error: 'OpenAI API key not configured'
+            }, {
+                status: 500
+            });
+        }
+        // Use concurrency from config
+        const concurrency = pluginConfig.maxBulkGenerateConcurrency || 16;
+        await pMap(ids, async (id)=>{
+            try {
+                await generateAndUpdateAltText({
+                    payload: req.payload,
+                    id,
+                    collection,
+                    pluginConfig,
+                    locales: pluginConfig.locales
+                });
+                updatedDocs++;
+                console.log(`${updatedDocs}/${ids.length} updated (${Math.round(updatedDocs / ids.length * 100)}%)`);
+            } catch (error) {
+                console.error(`Error generating alt text for ${id}:`, error);
+                erroredDocs.push(id);
+            }
+        }, {
+            concurrency
+        });
+        if (erroredDocs.length > 0) {
+            console.error(`Failed for: ${erroredDocs.join(', ')}`);
+        }
+        return Response.json({
+            updatedDocs,
+            totalDocs: ids.length,
+            erroredDocs
+        });
+    } catch (error) {
+        console.error('Error in bulk generation:', error);
+        return Response.json({
+            error: `Error generating alt text: ${error instanceof Error ? error.message : 'Unknown error'}`
+        }, {
+            status: 500
+        });
+    }
+};
+async function generateAndUpdateAltText({ payload, id, collection, pluginConfig, locales }) {
+    const imageDoc = await payload.findByID({
+        collection: collection,
+        id: id,
+        depth: 0
+    });
+    if (!imageDoc) {
+        throw new Error('Image not found');
+    }
+    const imageThumbnailUrl = pluginConfig.getImageThumbnail(imageDoc);
+    const openai = new OpenAI({
+        apiKey: pluginConfig.openAIApiKey
+    });
+    const modelResponseSchema = z.object(Object.fromEntries(locales.map((locale)=>[
+            locale,
+            z.object({
+                altText: z.string().describe('A concise, descriptive alt text for the image'),
+                keywords: z.array(z.string()).describe('Keywords that describe the content of the image')
+            })
+        ])));
+    const response = await openai.chat.completions.parse({
+        model: pluginConfig.model,
+        messages: [
+            {
+                role: 'system',
+                content: `
+      You are an expert at analyzing images and creating descriptive image alt text. 
+      
+      Please analyze the given image and provide the following in ${locales.join(', ')}:
+      - A concise, localized descriptive alt text (1-2 sentences) as "altText". Focus on the subject, action, and setting. Avoid phrases like 'Image of', 'A picture of', or 'Photo showing'. Be specific and include relevant details like location or context if visible. Make no assumptions.
+      - A localized list of keywords that describe the content (e.g., ["Camel", "Palm trees", "Desert"]) as "keywords"
+    
+      If a context is provided, use it to enhance the alt text.
+      
+      Format your response as a JSON object with ${locales.join(', ')} keys, each containing "altText", "keywords" and "slug".
+    `
+            },
+            {
+                role: 'user',
+                content: [
+                    {
+                        type: 'image_url',
+                        image_url: {
+                            url: imageThumbnailUrl
+                        }
+                    },
+                    ...'filename' in imageDoc && imageDoc.filename ? [
+                        {
+                            type: 'text',
+                            text: imageDoc.filename
+                        }
+                    ] : []
+                ]
+            }
+        ],
+        max_completion_tokens: 300,
+        response_format: zodResponseFormat(modelResponseSchema, 'data')
+    });
+    console.log({
+        imageId: id,
+        ...getGenerationCost(response, pluginConfig.model)
+    });
+    const result = response.choices[0]?.message?.parsed;
+    if (!result) {
+        throw new Error('No result from OpenAI');
+    }
+    for (const locale of locales){
+        await payload.update({
+            collection: collection,
+            id: id,
+            locale: locale,
+            data: {
+                alt: result[locale]?.altText,
+                keywords: result[locale]?.keywords
+            }
+        });
+    }
+}
+
+//# sourceMappingURL=bulkGenerateAltTexts.js.map

package/dist/endpoints/bulkGenerateAltTexts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/endpoints/bulkGenerateAltTexts.ts"],"sourcesContent":["import OpenAI from 'openai'\nimport { ChatCompletionContentPartText } from 'openai/resources/chat/completions.mjs'\nimport pMap from 'p-map'\nimport type { BasePayload, CollectionSlug, PayloadHandler, PayloadRequest } from 'payload'\nimport { z } from 'zod'\nimport { getGenerationCost } from '../utilities/getGenerationCost.js'\nimport type { AltTextPluginConfig } from '../types/AltTextPluginConfig.js'\nimport { zodResponseFormat } from '../utilities/zodResponseFormat.js'\n\n/**\n * Generates and updates alt text for multiple images in all locales.\n */\nexport const bulkGenerateAltTextsEndpoint: PayloadHandler = async (req: PayloadRequest) => {\n  try {\n    if (!req.user) {\n      return Response.json({ error: 'Unauthorized' }, { status: 401 })\n    }\n\n    const data = 'json' in req && typeof req.json === 'function' ? await req.json() : null\n\n    const schema = z.object({\n      collection: z.string(),\n      ids: z.array(z.string()),\n    })\n\n    const { collection, ids } = schema.parse(data)\n\n    let updatedDocs = 0\n    const erroredDocs: string[] = []\n\n    // Get plugin config from payload config\n    const pluginConfig = req.payload.config.custom?.altTextPluginConfig as\n      | AltTextPluginConfig\n      | undefined\n\n    if (!pluginConfig?.openAIApiKey) {\n      return Response.json({ error: 'OpenAI API key not configured' }, { status: 500 })\n    }\n\n    // Use concurrency from config\n    const concurrency = pluginConfig.maxBulkGenerateConcurrency || 16\n\n    await pMap(\n      ids,\n      async (id) => {\n        try {\n          await generateAndUpdateAltText({\n            payload: req.payload,\n            id,\n            collection,\n            pluginConfig,\n            locales: pluginConfig.locales,\n          })\n          updatedDocs++\n          console.log(\n            `${updatedDocs}/${ids.length} updated (${Math.round((updatedDocs / ids.length) * 100)}%)`,\n          )\n        } catch (error) {\n          console.error(`Error generating alt text for ${id}:`, error)\n          erroredDocs.push(id)\n        }\n      },\n      { concurrency },\n    )\n\n    if (erroredDocs.length > 0) {\n      console.error(`Failed for: ${erroredDocs.join(', ')}`)\n    }\n\n    return Response.json({\n      updatedDocs,\n      totalDocs: ids.length,\n      erroredDocs,\n    })\n  } catch (error) {\n    console.error('Error in bulk generation:', error)\n    return Response.json(\n      {\n        error: `Error generating alt text: ${error instanceof Error ? error.message : 'Unknown error'}`,\n      },\n      { status: 500 },\n    )\n  }\n}\n\nasync function generateAndUpdateAltText({\n  payload,\n  id,\n  collection,\n  pluginConfig,\n  locales,\n}: {\n  payload: BasePayload\n  id: string\n  collection: CollectionSlug\n  pluginConfig: AltTextPluginConfig\n  locales: string[]\n}) {\n  const imageDoc = await payload.findByID({\n    collection: collection,\n    id: id as string,\n    depth: 0,\n  })\n\n  if (!imageDoc) {\n    throw new Error('Image not found')\n  }\n\n  const imageThumbnailUrl = pluginConfig.getImageThumbnail(imageDoc)\n\n  const openai = new OpenAI({\n    apiKey: pluginConfig.openAIApiKey,\n  })\n\n  const modelResponseSchema = z.object(\n    Object.fromEntries(\n      locales.map((locale) => [\n        locale,\n        z.object({\n          altText: z.string().describe('A concise, descriptive alt text for the image'),\n          keywords: z.array(z.string()).describe('Keywords that describe the content of the image'),\n        }),\n      ]),\n    ),\n  )\n\n  const response = await openai.chat.completions.parse({\n    model: pluginConfig.model,\n    messages: [\n      {\n        role: 'system',\n        content: `\n      You are an expert at analyzing images and creating descriptive image alt text. \n      \n      Please analyze the given image and provide the following in ${locales.join(', ')}:\n      - A concise, localized descriptive alt text (1-2 sentences) as \"altText\". Focus on the subject, action, and setting. Avoid phrases like 'Image of', 'A picture of', or 'Photo showing'. Be specific and include relevant details like location or context if visible. Make no assumptions.\n      - A localized list of keywords that describe the content (e.g., [\"Camel\", \"Palm trees\", \"Desert\"]) as \"keywords\"\n    \n      If a context is provided, use it to enhance the alt text.\n      \n      Format your response as a JSON object with ${locales.join(', ')} keys, each containing \"altText\", \"keywords\" and \"slug\".\n    `,\n      },\n      {\n        role: 'user',\n        content: [\n          {\n            type: 'image_url',\n            image_url: { url: imageThumbnailUrl },\n          },\n          ...('filename' in imageDoc && imageDoc.filename\n            ? [\n                {\n                  type: 'text',\n                  text: imageDoc.filename,\n                } satisfies ChatCompletionContentPartText,\n              ]\n            : []),\n        ],\n      },\n    ],\n    max_completion_tokens: 300,\n    response_format: zodResponseFormat(modelResponseSchema, 'data'),\n  })\n\n  console.log({ imageId: id, ...getGenerationCost(response, pluginConfig.model) })\n\n  const result = response.choices[0]?.message?.parsed\n\n  if (!result) {\n    throw new Error('No result from OpenAI')\n  }\n\n  for (const locale of locales) {\n    await payload.update({\n      collection: collection as CollectionSlug,\n      id: id as string,\n      locale: locale,\n      data: {\n        alt: (result as any)[locale]?.altText,\n        keywords: (result as any)[locale]?.keywords,\n      },\n    })\n  }\n}\n"],"names":["OpenAI","pMap","z","getGenerationCost","zodResponseFormat","bulkGenerateAltTextsEndpoint","req","user","Response","json","error","status","data","schema","object","collection","string","ids","array","parse","updatedDocs","erroredDocs","pluginConfig","payload","config","custom","altTextPluginConfig","openAIApiKey","concurrency","maxBulkGenerateConcurrency","id","generateAndUpdateAltText","locales","console","log","length","Math","round","push","join","totalDocs","Error","message","imageDoc","findByID","depth","imageThumbnailUrl","getImageThumbnail","openai","apiKey","modelResponseSchema","Object","fromEntries","map","locale","altText","describe","keywords","response","chat","completions","model","messages","role","content","type","image_url","url","filename","text","max_completion_tokens","response_format","imageId","result","choices","parsed","update","alt"],"mappings":"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"}

package/dist/endpoints/generateAltText.d.ts

@@ -0,0 +1,6 @@
+import type { PayloadHandler } from 'payload';
+/**
+ * Generates alt text for a single image using OpenAI Vision API.
+ * Returns result without updating the document.
+ */
+export declare const generateAltTextEndpoint: PayloadHandler;