diff --git a/components/alttextlab/README.md b/components/alttextlab/README.md new file mode 100644 index 0000000000000..727b4536dd012 --- /dev/null +++ b/components/alttextlab/README.md @@ -0,0 +1,16 @@ +# Overview + +AltTextLab's API provides powerful AI-generated alternative text for images - enhancing SEO, accessibility, and automation workflows. With Pipedream, you can create workflows that generate alt text for images automatically, connect it with your CMS or e-commerce platform. Pipedream’s serverless architecture lets you trigger these workflows on events, schedules, or incoming webhooks without maintaining your own infrastructure. +# Example Use Cases + +- **Automated SEO Optimization for E-commerce**: Automatically generate alt text for new product images uploaded to a Shopify or WooCommerce store and save the metadata to your CMS or database. + +- **Content Publishing Pipelines**: When a new blog post with images is published in your CMS (e.g., Ghost, WordPress, Webflow), send the image URLs to AltTextLab, generate alt text, and attach it back to the post or send it via email for editorial review. + +- **Bulk Image Processing for Media Libraries**: Periodically scan a folder in Dropbox, S3, or Google Drive for new images and generate alt text descriptions for accessibility compliance and tagging. + +# Getting Started + +To get started, first log in to or create your [Pipedream account](https://pipedream.com) and start a new workflow. + +Go to [AltTextLab](https://www.alttextlab.com/) and create an account (or log in if you already have one). Then, in the Dashboard, navigate to the API Keys section, generate a new API key, and copy it — you’ll use this key to authenticate your requests. diff --git a/components/alttextlab/actions/generate-alt-text/generate-alt-text.mjs b/components/alttextlab/actions/generate-alt-text/generate-alt-text.mjs new file mode 100644 index 0000000000000..7c714e7941fda --- /dev/null +++ b/components/alttextlab/actions/generate-alt-text/generate-alt-text.mjs @@ -0,0 +1,89 @@ +import altTextLab from "../../alttextlab.app.mjs"; +import { AI_WRITING_STYLE } from "../../common/constants.mjs"; + +export default { + key: "alttextlab-generate-alt-text", + name: "Generate Alt Text", + description: "Generates alt text for images using AI. [See the documentation](https://www.alttextlab.com/docs/api)", + version: "0.1.0", + type: "action", + props: { + altTextLab, + alert: { + type: "alert", + alertType: "info", + content: "Supported formats: PNG, JPG, WebP, AVIF, SVG", + }, + imageUrl: { + type: "string", + label: "Image URL", + description: "Provide the direct URL to the image you want to generate alt text for. Make sure the link is publicly accessible (not behind a login or firewall).", + }, + + lang: { + type: "string", + label: "Language", + description: "Enter the language code for the alt text generation (e.g., \"en\" for English, \"fr\" for French). See the [full list of supported languages](https://www.alttextlab.com/docs/api#language)", + default: "en", + }, + style: { + type: "string", + label: "AI writing styles", + options: AI_WRITING_STYLE, + description: "Alt-text writing styles define the tone, structure, and level of detail used to describe an image. [Learn more](https://www.alttextlab.com/docs/writing-style)", + default: "neutral", + }, + keywords: { + type: "string[]", + label: "Keywords", + description: "Enter one or more keywords to alt text generation. Separate multiple keywords with commas. Example: cat, window, sunset.", + optional: true, + }, + ecommerceProduct: { + type: "string", + label: "Ecommerce Product Name", + description: "The name of the product.", + optional: true, + }, + ecommerceBrand: { + type: "string", + label: "Ecommerce Product Brand", + description: "The brand of the product.", + optional: true, + }, + ecommerceColor: { + type: "string", + label: "Ecommerce Product Color", + description: "The color of the product.", + optional: true, + }, + ecommerceMaterial: { + type: "string", + label: "Ecommerce Product Material", + description: "The material of the product.", + optional: true, + }, + }, + async run({ $ }) { + const response = await this.altTextLab.altTextGeneration({ + $, + data: { + source: 'pipedream', + imageUrl: this.imageUrl, + lang: this.lang, + style: this.style, + keywords: this.keywords, + ecommerce: { + product: this.ecommerceProduct, + brand: this.ecommerceBrand, + color: this.ecommerceColor, + material: this.ecommerceMaterial, + }, + }, + + }); + + $.export("$summary", `Alt text has been generated`); + return response; + }, +}; diff --git a/components/alttextlab/alttextlab.app.mjs b/components/alttextlab/alttextlab.app.mjs new file mode 100644 index 0000000000000..83cc1c1711ab7 --- /dev/null +++ b/components/alttextlab/alttextlab.app.mjs @@ -0,0 +1,32 @@ +import { axios } from "@pipedream/platform"; + +export default { + type: "app", + app: "alttext_ai", + propDefinitions: {}, + methods: { + _baseUrl() { + return "https://app.alttextlab.com/api/v1"; + }, + _headers(headers) { + return { + ...headers, + "x-api-key": `${this.$auth.api_key}`, + }; + }, + async _makeRequest({$ = this, path, headers, ...otherOptions}) { + return axios($, { + url: this._baseUrl() + path, + headers: this._headers(headers), + ...otherOptions, + }); + }, + async altTextGeneration(args) { + return this._makeRequest({ + path: "/alt-text/generate", + method: "POST", + ...args, + }); + }, + }, +}; diff --git a/components/alttextlab/common/constants.mjs b/components/alttextlab/common/constants.mjs new file mode 100644 index 0000000000000..d45ed132be731 --- /dev/null +++ b/components/alttextlab/common/constants.mjs @@ -0,0 +1,18 @@ +export const AI_WRITING_STYLE = [ + { + label: "Descriptive", + value: "descriptive", + }, + { + label: "Neutral", + value: "neutral", + }, + { + label: "Matter of fact", + value: "matter-of-fact", + }, + { + label: "Minimal", + value: "minimal", + }, +] \ No newline at end of file diff --git a/components/alttextlab/package.json b/components/alttextlab/package.json new file mode 100644 index 0000000000000..bfe4365c189c1 --- /dev/null +++ b/components/alttextlab/package.json @@ -0,0 +1,18 @@ +{ + "name": "@pipedream/alttextify", + "version": "0.1.0", + "description": "Pipedream AltTextLab Components", + "main": "alttextlab.app.mjs", + "keywords": [ + "pipedream", + "alttextlab" + ], + "homepage": "https://pipedream.com/apps/alttextlab", + "author": "Pipedream (https://pipedream.com/)", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@pipedream/platform": "^3.0.3" + } +}