datocms-plugin-alt-text-ai 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-plugin-alt-text-ai",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "private": false,
   "homepage": "https://github.com/marcelofinamorvieira/datocms-plugin-alt-text-ai",
   "description": "Generate alt texts for your assets in a single click",

package/src/entrypoints/AltTextAIButton.tsx

@@ -1,5 +1,8 @@
 import { Client, buildClient } from '@datocms/cma-client-browser';
-import { RenderFieldExtensionCtx } from 'datocms-plugin-sdk';
+import {
+  type FileFieldValue,
+  RenderFieldExtensionCtx,
+} from "datocms-plugin-sdk";
 import { Button, Canvas, Spinner } from 'datocms-react-ui';
 import { isArray } from 'lodash';
 import get from 'lodash/get';
@@ -12,10 +15,16 @@ type PropTypes = {
 async function fetchAlt(
   apiKey: string,
   client: Client,
-  asset: Record<string, string>
+  asset: FileFieldValue
 ) {
   const { url } = await client.uploads.find(asset.upload_id);
 
+  // Instead of sending over files that are possibly too big or the wrong format, etc.,
+  // we'll use Imgix to pre-transform them into a valid format and smaller size
+  let transformedUrl = new URL(url);
+  transformedUrl.searchParams.set("fm", "jpeg");
+  transformedUrl.searchParams.set("w", "1024");
+
   const result = await (
     await fetch('https://alttext.ai/api/v1/images', {
       method: 'POST',
@@ -25,7 +34,7 @@ async function fetchAlt(
       },
       body: JSON.stringify({
         image: {
-          url,
+          url: transformedUrl.toString(),
         },
       }),
     })
@@ -39,25 +48,39 @@ async function generateAlts(
   ctx: RenderFieldExtensionCtx,
   setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
 ) {
+  if (!ctx.currentUserAccessToken) {
+    await ctx.alert('This plugin needs the currentUserAccessToken to function. Please give it that permission and try again.');
+    return
+  }
+
   setIsLoading(true);
   try {
     const client = buildClient({ apiToken: ctx.currentUserAccessToken || '' });
     const isGallery = isArray(currentFieldValue);
     if (isGallery) {
+      const existingAssets = currentFieldValue as FileFieldValue[]
       const newAssets = [];
-      for (const asset of currentFieldValue) {
+      for (const asset of existingAssets) {
+        console.log('asset', asset);
         const result = await fetchAlt(
           ctx.plugin.attributes.parameters.apiKey as string,
           client,
           asset
         );
 
+        if (result.error_code) {
+          ctx.alert(
+            `Alt text error for <a href="/media/assets/${asset.upload_id}" target="_blank">image ${asset.upload_id}</a>: <code>${result.error_code}: ${result.errors?.base?.[0] ?? ""}</code>`,
+          );
+        }
+
+
         asset.alt = result.alt_text;
         newAssets.push(asset);
       }
       ctx.setFieldValue(ctx.fieldPath, newAssets);
     } else {
-      const assetValue = currentFieldValue as Record<string, string>;
+      const assetValue = currentFieldValue as FileFieldValue;
 
       const result = await fetchAlt(
         ctx.plugin.attributes.parameters.apiKey as string,
@@ -65,14 +88,22 @@ async function generateAlts(
         assetValue
       );
 
+      if (result.error_code) {
+        await ctx.alert(
+          `Error fetching alt text: <code>${result.error_code}: ${result.errors?.base?.[0] ?? ""}</code>`,
+        );
+        return;
+      }
+
+
       assetValue.alt = result.alt_text;
       ctx.setFieldValue(ctx.fieldPath, assetValue);
     }
   } catch (error) {
     console.log(error);
+  } finally {
+    setIsLoading(false);
   }
-
-  setIsLoading(false);
 }
 
 const AltTextAIButton = ({ ctx }: PropTypes) => {