Zuletzt aktualisiert: 12. September

Alt-Texte für Bilder mit AWS Rekognition und Node.js entwerfen

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande ·

Beschreibende Alt-Texte für Bilder sind entscheidend für Barrierefreiheit und SEO. Alt-Texte für zahlreiche Bilder manuell zu schreiben, kostet jedoch viel Zeit. AWS Rekognition und Node.js können Bildlabels vorschlagen, die der Redaktion beim Verfassen einer Beschreibung helfen. Rekognition erkennt Objekte und Szenen; es erzeugt weder eine kontextbezogene Bildunterschrift, noch bestimmt es den Zweck des Bildes auf einer Seite.

Warum Alt-Texte automatisieren?

Alt-Texte helfen sehbehinderten Nutzerinnen und Nutzern, Bildinhalte über Screenreader zu erfassen, und liefern Suchmaschinen Kontext. Vorgeschlagene Labels können die Prüfung beschleunigen, dürfen aber nicht direkt in das Attribut alt eines Bildes eingefügt werden. Folgen Sie dem W3C-Entscheidungsbaum für Alt-Texte, um zu entscheiden, ob ein Bild eine Beschreibung benötigt, ob sein Zweck als Link oder Schaltfläche beschrieben werden muss oder ob für ein dekoratives Bild eine leere Alternative genügt. Eine Liste erkannter Objekte kann diese Entscheidungen nicht treffen.

Integration von AWS Rekognition und Node.js

AWS Rekognition ist ein leistungsfähiger Bildanalysedienst, der Objekte, Szenen und Aktivitäten in Bildern erkennen kann. Die Integration mit Node.js ermöglicht es Entwicklerinnen und Entwicklern, schnell skalierbare Anwendungen zu erstellen, die Vorschläge für einen Alt-Text-Workflow mit menschlicher Prüfung liefern.

Ihre Umgebung einrichten

Stellen Sie zunächst sicher, dass Sie über Folgendes verfügen:

Ein AWS-Konto und eine IAM-Identität, die rekognition:DetectLabels aufrufen darf
Installiertes Node.js 22.12 oder neuer
AWS SDK v3 für JavaScript

Installieren Sie das AWS SDK:

npm install @aws-sdk/client-rekognition@3 dotenv@17

Konfigurieren Sie ein lokales AWS-Profil oder eine IAM-Rolle über die Default Credential Provider Chain des SDK. Legen Sie die Region in einer lokalen Datei .env fest und schließen Sie diese Datei von der Versionskontrolle aus:

AWS_REGION=your-region

Wenn Sie Umgebungsvariablen für Zugangsdaten verwenden, benötigen temporäre Zugangsdaten zusätzlich AWS_SESSION_TOKEN neben AWS_ACCESS_KEY_ID und AWS_SECRET_ACCESS_KEY. Betten Sie Zugangsdaten nicht in den Quellcode ein.

Anforderungen an Bilder

Bevor Sie die Lösung umsetzen, sollten Sie die Bildanforderungen von AWS Rekognition kennen:

Unterstützte Formate: JPEG und PNG
Maximale Bildgröße: 5 MB beim direkten Upload von Bytes
Maximale Bildgröße: 15 MB bei Referenzierung als S3-Objekt
Für DetectLabels muss jede Dimension zwischen 80 und 10.000 Pixeln liegen

Die Rekognition-Kontingente nennen die Anforderungen der einzelnen Operationen.

Label-Vorschläge umsetzen

Das folgende Node.js-Skript liefert Label-Vorschläge für die redaktionelle Prüfung:

import { RekognitionClient, DetectLabelsCommand } from '@aws-sdk/client-rekognition'
import fs from 'fs'
import dotenv from 'dotenv'

dotenv.config({ quiet: true })

const client = new RekognitionClient({ region: process.env.AWS_REGION })

async function detectImageLabels(image, minConfidence = 75) {
  if (!Number.isFinite(minConfidence) || minConfidence < 0 || minConfidence > 100) {
    throw new Error('Confidence must be a number between 0 and 100.')
  }
  const command = new DetectLabelsCommand({
    Image: image,
    MaxLabels: 5,
    MinConfidence: minConfidence,
  })
  const response = await client.send(command)
  return (response.Labels ?? [])
    .map((label) => label.Name)
    .filter((name) => typeof name === 'string' && name.trim().length > 0)
}

async function suggestImageLabels(imagePath, minConfidence = 75) {
  const imageBytes = fs.readFileSync(imagePath)
  return detectImageLabels({ Bytes: imageBytes }, minConfidence)
}

// Example usage
suggestImageLabels('./example.jpg').then(console.log).catch(() => {
  console.error('Unable to retrieve image label suggestions.')
  process.exitCode = 1
})

Speichern Sie diesen Code mit der Erweiterung .mjs, um ES-Module zu verwenden, oder setzen Sie "type": "module" in package.json. Ein leeres Array bedeutet, dass keine brauchbaren Labels zurückgegeben wurden. Fehler bei der Anfrage und beim Lesen der Datei führen dazu, dass das Promise abgelehnt wird, damit die Anwendung sie von einer erfolgreichen Analyse unterscheiden kann.

Bilder aus S3 verarbeiten

In Produktionsumgebungen müssen Sie häufig Bilder verarbeiten, die in Amazon S3 gespeichert sind. So erweitern Sie das obige Skript für die Arbeit mit S3. Der Bucket muss sich in der Region des Clients befinden, und die aufrufende Identität benötigt die Berechtigung s3:GetObject für das Bild:

async function suggestImageLabelsFromS3(bucket, key, minConfidence = 75) {
  return detectImageLabels({ S3Object: { Bucket: bucket, Name: key } }, minConfidence)
}

// Example usage
suggestImageLabelsFromS3('my-bucket', 'images/example.jpg').then(console.log).catch(() => {
  console.error('Unable to retrieve image label suggestions from S3.')
  process.exitCode = 1
})

Sonderfälle und Fehler behandeln

Behandeln Sie Fehler dort, wo Ihre Anwendung die Hilfsfunktion aufruft. Halten Sie Fehler von den Label-Daten getrennt; eine Fehlermeldung darf niemals zu einem Alt-Text oder zu einer zwischengespeicherten erfolgreichen Antwort werden:

try {
  const labels = await suggestImageLabels('./example.jpg')
  console.log('Labels for review:', labels)
} catch (error) {
  if (error.name === 'InvalidImageFormatException') {
    console.error('Invalid image format. Only JPEG and PNG are supported.')
  } else if (error.name === 'InvalidParameterException') {
    console.error('Invalid parameters provided to AWS Rekognition')
  } else if (error.name === 'ImageTooLargeException') {
    console.error('Image exceeds the input limit: 5MB for bytes, 15MB for S3 objects.')
  } else if (error.name === 'AccessDeniedException') {
    console.error('AWS credentials lack permission to use Rekognition')
  } else if (error.name === 'ThrottlingException') {
    console.error('AWS request rate exceeded limits')
  } else {
    console.error('Unable to retrieve image label suggestions.')
  }
  process.exitCode = 1
}

Funktionalität erweitern

So verbessern Sie Ihren Workflow für Label-Vorschläge weiter:

Caching umsetzen

Speichern Sie erfolgreiche Label-Vorschläge, um redundante API-Aufrufe zu vermeiden. Dieses optionale Beispiel benötigt einen laufenden Redis-Server und npm install redis@5. Hängen Sie es an das obige Skript an. Bilden Sie den Hash der tatsächlichen Bild-Bytes und analysieren Sie genau diesen Buffer, damit die Änderung einer Datei unter demselben Pfad ihren Cache ungültig macht:

import { createHash } from 'node:crypto'
import { createClient } from 'redis'

const redisClient = createClient()
redisClient.on('error', () => console.error('Redis connection error.'))
await redisClient.connect()

async function getCachedOrSuggestImageLabels(imagePath) {
  const imageBytes = fs.readFileSync(imagePath)
  const imageHash = createHash('sha256').update(imageBytes).digest('hex')
  // Change the version if label settings or the interpretation of the result changes.
  const cacheKey = `image_labels:v1:${process.env.AWS_REGION}:${imageHash}`

  const cachedLabels = await redisClient.get(cacheKey)
  if (cachedLabels !== null) return JSON.parse(cachedLabels)

  const labels = await detectImageLabels({ Bytes: imageBytes })

  await redisClient.set(cacheKey, JSON.stringify(labels), { EX: 60 * 60 * 24 * 30 })

  return labels
}

try {
  console.log(await getCachedOrSuggestImageLabels('./example.jpg'))
} catch {
  console.error('Unable to retrieve cached image label suggestions.')
  process.exitCode = 1
} finally {
  await redisClient.close()
}

Stapelverarbeitung

Bei einem kleinen Stapel können Sie mehrere Bilder gleichzeitig verarbeiten. Verwenden Sie für größere Listen eine begrenzte Queue und halten Sie die Parallelität innerhalb Ihres Rekognition-Kontingents:

async function batchProcessImages(imagePaths) {
  return Promise.all(imagePaths.map((path) => suggestImageLabels(path)))
}

// Example usage
try {
  const results = await batchProcessImages(['image1.jpg', 'image2.jpg', 'image3.jpg'])
  console.log(results)
} catch {
  console.error('Unable to retrieve suggestions for the complete batch.')
  process.exitCode = 1
}

Konfidenzschwelle anpassen

Passen Sie die Konfidenzschwelle an Ihre Anforderungen an:

suggestImageLabels('./example.jpg', 90)
  .then(console.log)
  .catch(() => {
    console.error('Unable to retrieve image label suggestions.')
    process.exitCode = 1
  })

Abschließende Gedanken

AWS Rekognition und Node.js können einen redaktionellen Workflow unterstützen, indem sie Labels vorschlagen und erfolgreiche Analysen wiederverwenden. Prüfen Sie diese Vorschläge anhand des tatsächlichen Bildes und seines Zwecks auf der Seite, bevor Sie den Alt-Text schreiben. Konfidenzwerte beschreiben Modellvorhersagen, nicht die Qualität der Barrierefreiheit.

Wenn Sie eine verwaltete Lösung suchen, werfen Sie einen Blick auf den 🤖 Service für Künstliche Intelligenz von Transloadit, der die Bildanalyse für diesen Workflow vereinfacht.