Easy-alt is a VS Code extension that enables inline AI-generated alt text suggestions for your img tags. This extension was originally a submission for Hashnode's AI-for-Tomorrow hackathon.
Generates alt text for images in HTML, JSX, and TSX files.
Uses the HuggingFace API to generate accurate and descriptive alt text.
Works with both local and remote images.
Provides real-time feedback through the VS Code status bar.
Requirements
VS Code version 1.60.0 or higher
A HuggingFace account and API token
Extension Settings
This extension contributes the following settings:
easyAlt.hfToken: Your HuggingFace API token for generating alt text.
How to Configure
To set your HuggingFace API token:
Open the Settings JSON:
Press Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS) to open the Command Palette.
Type Preferences: User Settings and select it.
Edit the settings.json File:
Add the following line to the JSON object:
"easyAlt.hfToken": "your_huggingface_token"
Replace "your_huggingface_token" with your actual HuggingFace API token.
Save the File and Restart VSCode.
When in an Image alt tag, press Ctrl + E (Windows/Linux) or Cmd + E (macOS) to generate alt text
Known Issues
Large images or slow internet connections may cause delays in alt text generation.
Release Notes
1.0.0
Initial release of easy-alt:
Automatic alt text generation for img tags
Support for HTML, JSX, and TSX files
Integration with HuggingFace API
How to Use
Install the extension from the VS Code Marketplace.
Set your HuggingFace API token:
Option 1: In VS Code settings, search for "Easy Alt" and enter your token in the "Hf Token" field.
Option 2: Set an environment variable named HF_TOKEN with your API token.
Open an HTML, JSX, or TSX file containing Image tags.
When in an Image alt tag, press Ctrl + E (Windows/Linux) or Cmd + E (macOS) to generate alt text.
The generated alt text will show up in a dropdown along with a preview of the image.
Press enter to accept the generated alt text or press escape to cancel.
A status bar item will show when the extension is processing images.
Privacy and Security
This extension sends image data to the HuggingFace API for processing. Please ensure you have the rights to use and process any images in your project.
Feedback and Contributions
We welcome feedback and contributions! Please file issues and pull requests on our GitHub repository.
Following extension guidelines
This extension follows the VS Code extension guidelines:
