datocms-plugin-alt-text-ai 0.5.0 → 0.5.2

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "datocms-plugin-alt-text-ai",
-  "version": "0.5.0",
-  "private": false,
-  "homepage": "https://github.com/marcelofinamorvieira/datocms-plugin-alt-text-ai",
+  "homepage": "https://github.com/datocms/plugins/blob/addMarceloPlugins/alt-text-ai/README.md",
+  "version": "0.5.2",
+  "author": "DatoCMS <support@datocms.com>",
   "description": "Generate alt texts for your assets in a single click",
   "keywords": [
     "datocms",

package/src/entrypoints/AltTextAIButton.tsx

@@ -1,31 +1,36 @@
-import { Client, buildClient } from '@datocms/cma-client-browser';
-import { RenderFieldExtensionCtx } from 'datocms-plugin-sdk';
-import { Button, Canvas, Spinner } from 'datocms-react-ui';
-import { isArray } from 'lodash';
-import get from 'lodash/get';
-import { useState } from 'react';
+import { Client, buildClient } from "@datocms/cma-client-browser";
+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";
+import { useState } from "react";
 
 type PropTypes = {
   ctx: RenderFieldExtensionCtx;
 };
 
-async function fetchAlt(
-  apiKey: string,
-  client: Client,
-  asset: Record<string, string>
-) {
+async function fetchAlt(apiKey: string, client: Client, 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',
+    await fetch("https://alttext.ai/api/v1/images", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
-        'X-API-Key': apiKey ?? '',
+        "Content-Type": "application/json",
+        "X-API-Key": apiKey ?? "",
       },
       body: JSON.stringify({
         image: {
-          url,
+          url: transformedUrl.toString(),
         },
       }),
     })
@@ -37,42 +42,64 @@ async function fetchAlt(
 async function generateAlts(
   currentFieldValue: unknown,
   ctx: RenderFieldExtensionCtx,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
+  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 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
+          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,
         client,
-        assetValue
+        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) => {