Image Alt Text Generator

Image alternative text generator, uses C# .NET 8 with Semantic Kernel along with Open AI's o4-mini model for the backend and Next with Chakra UI for the frontend.

Installation setup

1. Install software

1. Git
2. .NET 8 SDK
3. NodeJS 22
4. VS Code (recommended for working with TypeScript and Next)
5. Visual Studio (recommended for working with C#)

2. Clone the repository

git clone https://github.com/dorian-cg/image-alt-text-generator.git

3. Install npm dependencies

cd ./image-alt-text-generator/src/web
npm install

4. Update appsettings.json

# open appsettings.json with VS Code
code ./image-alt-text-generator/src/api/appsettings.json

// appsettings.json
{
  "AzureOpenAIChatCompletion": {
    "DeploymentName": "o4-mini",    
    "ApiKey": "<YOUR_API_KEY>", // replace <YOUR_API_KEY> with your own key
    "Endpoint": "https://<YOUR_SERVICE_NAME>.openai.azure.com" // replace <YOUR_SERVICE_NAME> with your own service name
  }
}

Running the project

1. Open /image-alt-text-generator/src/api/ImageAltTextService.sln using Visual Studio.
2. Wait for NuGet packages to restore.
3. Run using https profile using play button at the top.
4. Open a terminal.
5. Change to src/web directory using cd /image-alt-text-generator/src/web
6. Start frontend project using npm run dev.
7. Open browser at http://localhost:3000

Demo screenshots

Default look of the app.

After adding images.

Generation Examples

1. Camera image from Unsplash

Original image

Generated result

2. Cup image from Unsplash

Original image

Generated result

3. House image from Unsplash

Original image

Generated result

4. Pizza image from Unsplash

Original image

Generated result