3 |
4 |
5 | # Alt Text Generator
6 | [](https://repo-rater.eddiehub.io/rate?owner=adityaoberai&name=Alt-Text-Generator)
7 |
8 | ## Description
9 |
10 | **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!
11 |
12 | ## Demo Recording
13 |
14 | https://github.com/adityaoberai/Alt-Text-Generator/assets/31401437/cdf2ce3c-0c72-47e0-bab2-8bac8e0cd4cc
15 |
16 | ## Steps to Run Locally
17 |
18 | - Create a [Microsoft Azure account](https://azure.microsoft.com/free/), followed by a [OpenAI resource with Vision preview](https://learn.microsoft.com/en-us/azure/ai-services/openai/gpt-v-quickstart?source=recommendations&tabs=image%2Ccommand-line&pivots=rest-api)
19 | - 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)
20 | - Install [Vercel CLI](https://vercel.com/docs/cli)
21 | - Clone this repository
22 | - Run `npm install`
23 | - Change the file `.env.example` to `.env`
24 | - Add your Azure Computer Vision endpoint and API key to the .env file
25 | - Add your environment variables to the Vercel project using `vercel env add ENV_VAR` command (replace `ENV_VAR` with your environment variables)
26 | - Run `vercel dev`
27 |
28 | ## Using REST API
29 |
30 | ### POST `/api/alttext`
31 |
32 | **Parameters**
33 |
34 | | Name | Description | Location | Type |
35 | | ----------------- | ------------------------------------ | -------- | ------------------ |
36 | | Content-Type | The content type of the request body | Header | `application/json` |
37 | | image | Image to get alt text for | Body | Base64 string |
38 |
39 | **Request**
40 |
41 | ```json
42 | {
43 | "image": "data:image/jpeg;base64,/9j/4f/+RXhpZgAASUkqAAgAAA..."
44 | }
45 | ```
46 |
47 | **Response**
48 |
49 | Sample Response:
50 |
51 | ```json
52 | {
53 | "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."
54 | }
55 | ```
56 |
--------------------------------------------------------------------------------
/api/alttext.js:
--------------------------------------------------------------------------------
1 | import { OpenAIClient, AzureKeyCredential, OpenAIKeyCredential } from "@azure/openai";
2 |
3 | export default async function alttext (request, response) {
4 | try {
5 | let client;
6 | let deploymentName;
7 |
8 | switch(process.env.USE_METHOD){
9 | case 'azureopenai': {
10 | deploymentName = process.env.AZUREOPENAI_DEPLOYMENTNAME;
11 | const endpoint = process.env.AZUREOPENAI_ENDPOINT;
12 | const apiKey = process.env.AZUREOPENAI_APIKEY;
13 | client= new OpenAIClient(endpoint, new AzureKeyCredential(apiKey));
14 | break;
15 | }
16 | case 'openai': {
17 | deploymentName = 'gpt-4-turbo';
18 | const apiKey = process.env.OPENAI_APIKEY;
19 | client= new OpenAIClient(new OpenAIKeyCredential(apiKey));
20 | break;
21 | }
22 | }
23 |
24 | const image = request.body.image;
25 |
26 | const messages = [{ role: "user", content: [
27 | {
28 | type: "text",
29 | text: "Generate alt text for the following image (do not add any extra text at the start or the end of the alt text):"
30 | },
31 | {
32 | type: "image_url",
33 | imageUrl: {
34 | url: image,
35 | detail: "auto"
36 | }
37 | }]}];
38 |
39 | const result = await client.getChatCompletions(deploymentName, messages, { maxTokens: 100 });
40 | console.log(result.choices[0].message?.content);
41 |
42 | let alttext = result.choices[0].message?.content;
43 |
44 | response.status(200).json({
45 | message: alttext
46 | });
47 | } catch(error) {
48 | console.error(error)
49 | response.status(500).json({
50 | message: error.message
51 | });
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 
14 |
15 | Generate alt text for your images and help make the internet more accessible!
22 | 23 |97 | {altText} 98 |
99 |{note}
6 | 7 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app'), 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | ///