Alt Text Generator

Description

Vite + Svelte app that uses Azure OpenAI Service (GPT-4 Turbo with Vision) and a Vercel Serverless Function to analyse an image and provide you with a caption to use as alt text!

Demo Recording

Alt.Text.Generator.mp4

Steps to Run Locally

• Create a Microsoft Azure account, followed by a OpenAI resource with Vision preview
  • Make sure to choose one of the following Azure regions: Australia East, Japan East, Sweden Central, Switzerland North, and West US (since we're using the gpt-4, vision-preview model, which is in preview)
• Install Vercel CLI
• Clone this repository
• Run npm install
• Change the file .env.example to .env
• Add your Azure Computer Vision endpoint and API key to the .env file
• Add your environment variables to the Vercel project using vercel env add ENV_VAR command (replace ENV_VAR with your environment variables)
• Run vercel dev

Using REST API

POST /api/alttext

Parameters

Name	Description	Location	Type
Content-Type	The content type of the request body	Header	application/json
image	Image to get alt text for	Body	Base64 string

Request

{
  "image": "data:image/jpeg;base64,/9j/4f/+RXhpZgAASUkqAAgAAA..."
}

Response

Sample Response:

{
  "message": "A group of individuals focused on their laptops at a dimly-lit indoor event, with some engaging in discussion while others are intently viewing their screens. Visible stickers and branding on the laptops suggest a tech-oriented gathering."
}