Home

Awesome

aBBi – AI-generated image descriptions

aBBi (“AI-bildbeskrivningar”) is a web app for generating image descriptions (e.g. alt texts) using AI. It currently supports OpenAI models with vision capabilities. You need an OpenAI API key to use the tool. It is a frontend app without the need of a backend.

The app is built on Angular and uses Angular Material web components.

<p> <a href="https://github.com/angular/angular"><img alt="Angular version badge" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fslsfi%2Fabbi-ng-ai-image-descriptor%2Fmain%2Fpackage-lock.json&query=%24%5B'packages'%5D%5B'node_modules%2F%40angular%2Fcore'%5D%5B'version'%5D&prefix=v&logo=angular&logoColor=%23fff&label=Angular&color=%23dd0031"></a> </p>

Author: Sebastian Köhler (2024)

<hr>

Changelog

Learn about the latest improvements.

Development Setup

Prerequisites

  1. Install Node.js which includes npm. The app is compatible with Node ^18.19.1, ^20.11.1 and ^22.0.0 (based on Angular 18 compatibility). Check your Node version with:
Node --version
  1. Install the Angular CLI globally:
npm install -g @angular/cli

  1. Clone the repository locally and cd into the folder. On Windows you can use GitHub Desktop or Git Bash (see tutorial on Git Bash).

  2. Install dependencies:

npm install

Run local development server

To build and serve the application on a development server, run:

npm start

Open your browser on http://localhost:4200/. The app will automatically rebuild and reload if you change any of the source files.

Building and deployment

On each commit in the main branch a Docker image with the tag main is automatically built using GitHub Actions and stored in the GitHub Container Registry.

On each release a Docker image with the chosen release tag and the tag latest is automatically built using GitHub Actions and also stored in the GitHub Container Registry.

To deploy the latest image, you can clone the repository or just compose.yaml and run:

docker compose up -d

Keeping the app up-to-date

Dependencies

Most of the dependencies are part of the Angular framework (@angular/). These should be updated with the command:

ng update @angular/cli @angular/core @angular/cdk @angular/material

When updating to a new major version of Angular, check the update guide first: https://angular.dev/update-guide. Also update the Angular major version number specified in Dockerfile.

Other dependencies can be updated by bumping the version number in package.json and running:

npm install

Node.js and nginx Docker images

Node.js and nginx Docker images are used in the build process. To update these, change the tags specified in both Dockerfile and in docker-build-and-push.yml.

Modifying available AI-models, languages and prompt types

The available AI-models are defined in src/assets/config/models.ts. Currently, only OpenAI models are supported.

The available description languages and prompt types are defined in src/assets/config/prompts.ts. In the prompt templates, the strings {{FILENAME}} and {{DESC_LENGTH}} are replaced with the image filename and desired approximate description length, respectively.