aBBi (“AI-bildbeskrivningar”) is a web app for generating alt texts for images and transcribing text in images using AI. It can also TEI (Text Encoding Initiative) XML encode the transcriptions. It currently supports OpenAI and Google models with vision capabilities. You need an OpenAI or Google 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.
Author: Sebastian Köhler (2024)
Images in the screenshot: Library of Congress public domain.
Learn about the latest improvements.
- Install Node.js which includes npm. The app requires Node
^24.15.0and npm>=11.16.0; Docker and CI are configured to use Node24. Check both versions with:
node --version
npm --version
- Install the Angular CLI globally:
npm install -g @angular/cli
-
Clone the repository locally and
cdinto the folder. On Windows you can use GitHub Desktop or Git Bash (see tutorial on Git Bash). -
Install dependencies:
npm install
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.
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
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: https://angular.dev/update-guide.
Other dependencies can be updated by bumping the version number in package.json and running:
npm install
Keep package-lock.json when updating transitive dependencies so that the changes remain reproducible and reviewable. Update all dependencies to the newest versions permitted by their existing semver ranges with:
npm update
Some dependencies run lifecycle scripts during installation. The approved package versions are pinned in the allowScripts section of package.json. After updating, list packages whose scripts are not covered by an existing approval:
npm approve-scripts --allow-scripts-pending
Review each reported package and its changes before approving it. Approve packages individually, or list several package names in the same command:
npm approve-scripts <package> [<package> ...]
This updates the package's version-pinned entry in allowScripts. Do not replace it with an unversioned approval unless future versions of that package should be allowed to run install scripts without another review.
Finally, perform a clean installation from the updated lockfile and verify the app:
npm ci
npm test -- --watch=false
npm run build
npm ci removes the existing node_modules directory automatically. Commit the reviewed package-lock.json changes and, when approvals changed, the corresponding package.json changes. Deleting and regenerating the lockfile should only be necessary when repairing a broken dependency tree.
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.
The available AI-models are defined in src/assets/config/models.ts. Currently, OpenAI and Google (Gemini) models are supported.
The prompts for the various tasks supported by the app are defined in separate plain text files in src/assets/prompts/. The prompts are imported by src/assets/config/prompts.ts In the prompts, there are some hard-coded strings like {{FILENAME}} and {{DESC_LENGTH}} which are replaced by UI settings on runtime.