npm - datocms-plugin-alt-text-ai - Versions diffs - 0.5.2 → 0.5.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +12 -1
package/dist/assets/index-B_BYnrd4.css +1 -0
package/dist/assets/index-RZCW53qo.js +16 -0
package/dist/index.html +13 -0
package/package.json +26 -36
package/build/asset-manifest.json +0 -13
package/build/index.html +0 -1
package/build/static/css/main.8467dedd.css +0 -2
package/build/static/css/main.8467dedd.css.map +0 -1
package/build/static/js/main.d6fa325c.js +0 -3
package/build/static/js/main.d6fa325c.js.LICENSE.txt +0 -56
package/build/static/js/main.d6fa325c.js.map +0 -1
package/public/index.html +0 -11
package/public/robots.txt +0 -3
package/src/entrypoints/AltTextAIButton.tsx +0 -129
package/src/entrypoints/ConfigScreen.tsx +0 -66
package/src/entrypoints/styles.module.css +0 -7
package/src/index.tsx +0 -27
package/src/react-app-env.d.ts +0 -1
package/src/utils/render.tsx +0 -9
package/tsconfig.json +0 -26
/package/{build → dist}/robots.txt +0 -0

package/public/index.html DELETED Viewed

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

package/public/robots.txt DELETED Viewed

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/entrypoints/AltTextAIButton.tsx DELETED Viewed

@@ -1,129 +0,0 @@
-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: 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",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-Key": apiKey ?? "",
-      },
-      body: JSON.stringify({
-        image: {
-          url: transformedUrl.toString(),
-        },
-      }),
-    })
-  ).json();
-  return result;
-}
-async function generateAlts(
-  currentFieldValue: unknown,
-  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 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 FileFieldValue;
-      const result = await fetchAlt(
-        ctx.plugin.attributes.parameters.apiKey as string,
-        client,
-        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);
-  }
-}
-const AltTextAIButton = ({ ctx }: PropTypes) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const currentFieldValue = get(ctx.formValues, ctx.fieldPath);
-  const isGallery = isArray(currentFieldValue);
-  const isGalleryWithItems =
-    isArray(currentFieldValue) && currentFieldValue.length;
-  return (
-    <Canvas ctx={ctx}>
-      {(isGalleryWithItems || (!isGallery && !!currentFieldValue)) && (
-        <Button
-          fullWidth
-          disabled={isLoading}
-          onClick={() => {
-            generateAlts(currentFieldValue, ctx, setIsLoading);
-          }}
-        >
-          Generate Alt Text {isLoading && <Spinner size={24} />}
-        </Button>
-      )}
-    </Canvas>
-  );
-};
-export default AltTextAIButton;

package/src/entrypoints/ConfigScreen.tsx DELETED Viewed

@@ -1,66 +0,0 @@
-import { RenderConfigScreenCtx } from 'datocms-plugin-sdk';
-import {
-  Button,
-  Canvas,
-  ContextInspector,
-  Spinner,
-  TextField,
-} from 'datocms-react-ui';
-import s from './styles.module.css';
-import { useState } from 'react';
-type Props = {
-  ctx: RenderConfigScreenCtx;
-};
-async function saveApiKey(
-  ctx: RenderConfigScreenCtx,
-  apiKey: string,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>
-) {
-  setIsLoading(true);
-  await ctx.updatePluginParameters({ apiKey });
-  setIsLoading(false);
-  ctx.customToast({
-    type: 'notice',
-    message: 'API Key Saved!',
-    dismissOnPageChange: true,
-    dismissAfterTimeout: 5000,
-  });
-}
-export default function ConfigScreen({ ctx }: Props) {
-  const [apiKey, setApiKey] = useState(
-    (ctx.plugin.attributes.parameters.apiKey as string) ?? ''
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  return (
-    <Canvas ctx={ctx}>
-      <div className={s.form}>
-        <TextField
-          required
-          name="altTextAPIKey"
-          id="altTextAPIKey"
-          label="Alt Text API Key"
-          value={apiKey}
-          onChange={(newValue) => setApiKey(newValue)}
-        />
-        <p>
-          You can get your API key by going to{' '}
-          <a href="https://alttext.ai/account/api_keys" target="_blank">
-            https://alttext.ai/account/api_keys
-          </a>
-        </p>
-      </div>
-      <Button
-        disabled={isLoading}
-        fullWidth
-        onClick={() => saveApiKey(ctx, apiKey, setIsLoading)}
-      >
-        Save {isLoading && <Spinner size={24} />}
-      </Button>
-    </Canvas>
-  );
-}

package/src/entrypoints/styles.module.css DELETED Viewed

@@ -1,7 +0,0 @@
-.inspector {
-  margin-top: var(--spacing-l);
-}
-.form {
-  margin-bottom: 1rem;
-}

package/src/index.tsx DELETED Viewed

@@ -1,27 +0,0 @@
-import { render } from './utils/render';
-import ConfigScreen from './entrypoints/ConfigScreen';
-import 'datocms-react-ui/styles.css';
-import { connect, Field, RenderFieldExtensionCtx } from 'datocms-plugin-sdk';
-import AltTextAIButton from './entrypoints/AltTextAIButton';
-connect({
-  renderConfigScreen(ctx) {
-    return render(<ConfigScreen ctx={ctx} />);
-  },
-  overrideFieldExtensions(field: Field) {
-    if (
-      field.attributes.field_type === 'gallery' ||
-      field.attributes.field_type === 'file'
-    ) {
-      return {
-        addons: [{ id: 'altTextAI' }],
-      };
-    }
-  },
-  renderFieldExtension(fieldExtensionId: string, ctx: RenderFieldExtensionCtx) {
-    switch (fieldExtensionId) {
-      case 'altTextAI':
-        return render(<AltTextAIButton ctx={ctx} />);
-    }
-  },
-});

package/src/react-app-env.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- /// <reference types="react-scripts" />

package/src/utils/render.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import React, { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-const container = document.getElementById('root');
-const root = createRoot(container!);
-export function render(component: React.ReactNode): void {
-  root.render(<StrictMode>{component}</StrictMode>);
-}

package/tsconfig.json DELETED Viewed

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}

/package/{build → dist}/robots.txt RENAMED Viewed

File without changes