AI Alt Tag Generator for Webflow

This project provides an automated solution for generating, translating, and managing alt text for images in Webflow projects. It combines a Cloudflare Worker for AI-powered image description generation with Google Apps Script for asset management and translation capabilities.

Components

1. Cloudflare Worker (cf-worker/)

• Handles image processing and AI-powered description generation
• Uses Meta's Llama model for generating image descriptions
• Includes authentication for secure access
• Optimized for generating concise, SEO-friendly alt text descriptions

2. Google Apps Script (google-app-script/)

The Google Apps Script component consists of several modules:

• UI.gs: Creates a custom menu in Google Sheets with all available functions
• listAssets.gs: Fetches and manages Webflow assets
• imageDescription.gs: Communicates with the Cloudflare Worker to get AI-generated descriptions
• translate.gs: Handles translation of alt text using DeepL API
• sendNewAlt.gs: Updates alt text in Webflow via the API

Setup Requirements

1. Cloudflare Worker Setup

   • Deploy the worker code to Cloudflare
   • Create a custom API token (can be any random string you choose)
   • Set up this token as environment variable API_TOKEN in Cloudflare
   • Make sure to save this token as you'll need to use the exact same value in the Apps Script code
   • Configure the Meta Llama model access, YOU NEED TO ACCEPT META's LICENSE Cloudflare giude

2. Google Apps Script Setup

   • Create a new Google Sheet
   • Set up the script in Google Apps Script editor
   • Configure the following API keys/tokens:
     • Webflow API token
     • DeepL API key
     • Cloudflare Worker API token

3. Webflow Configuration

   • Obtain Webflow API access token
   • Configure your site ID in the scripts

Usage

1. Open your Google Sheet
2. Use the "Alt Text Updater" menu for the following operations:
   • List assets: Fetches all assets from your Webflow site
   • Describe selected: Generates AI descriptions for selected images
   • Translate: Translates English descriptions to Polish
   • Upload new ALT: Updates Webflow assets with new alt text

Process Flow

1. Assets are fetched from Webflow and listed in the Google Sheet
2. Select images for AI description generation
3. The system generates English descriptions using the AI model
4. Descriptions can be automatically translated to Polish
5. Review and edit descriptions as needed
6. Upload approved descriptions back to Webflow

Rate Limiting

• The system includes built-in delays to respect API rate limits
• Webflow API requests are managed to avoid exceeding quotas
• Translation requests are handled with appropriate timing

Security

• API tokens are required for all components
• Cloudflare Worker includes authentication checks using a custom API token
• The same API token must be used in both the Cloudflare Worker environment variable and the imageDescription.gs script
• The token can be any random string but must match exactly between both components
• Sensitive tokens should be stored securely and never committed to version control

Notes

• Keep API tokens and keys confidential
• Review AI-generated descriptions before uploading
• Regular backups of existing alt text are recommended
• Monitor API usage to stay within service limits