README

Funktion

Es soll eine TYPO3 Extension für TYPO3 Version 10 entstehen, die durch alle Bilder in der Tabelle sys_file iteritert. Bei allen Bildern, die noch keinen ALT- oder title-Text haben, soll ein Request an die ChatGPT-Api gesendet werden und die Texte automatisch über einen Bilderkennung generiert werden. Die Texte sollen dabei extrem kurz sein und für eine Optimierung der Barrierefreiheit (a11y) genutzt werden.

Die Extension verwendet die TYPO3 Core Tabellen (sys_file und sys_file_metadata) Die Texte werden in der Tabelle sys_file_metadata von TYPO3 gespeichert.

Die Extension soll nnaitools heißen. Der Vendor der Extension ist Nng. Der Namespace für alle Classes soll \Nng\Nnaitools\ heißen.

Allgemeine Funktionen

Extension-Configuration Manager

In der ext_conf_template.txt kann man einen ChatGPT Api-Key angeben, die API-Url zu ChatGPT angebenen und das Modell wählen.

Backend-Module mit Listenansicht

Es soll ein TYPO3 Backend-Module entstehen. In dem Modul gibt es eine Liste mit einer Übersicht aller Bilder in TYPO3, die in der Tabelle sys_file registriert sind. Die Tabelle dient zur Übersicht der generierten bzw. noch nicht beschriebenen Bilder im Backend.
In der Liste soll es eine Spalte mit einem Preview des Bildes geben, das Bild sollte dabei verkleinert dargestellt werden (maxWidth=300)
Neben dem Bild gibt es eine Spalte mit dem ALT-Text (sys_file_metadata.alternative) und eine Spalte mit dem title-Text (sys_file_metadata.title).
Ein Button neben den Bildern erlaubt das automatische Generieren der Texte per AI. Wir möchten dazu die API von ChatGPT nutzen. Dazu wird die absolute URL des verkleinerten Bildes zusammen mit einem Prompt an die ChatGPT APi gesendet
Ein zweiter Button erlaubt es, die Einträge für die Alt-Texte und Title-Texte manuell zu bearbeiten. Dabei soll sich die Default-View zum Bearbeiten des Datensatzes öffnen (z.B. /typo3/index.php?route=%2Fmodule%2Ffile%2FFilelistList&token=c96ad9feec874e6a55aaf61fa33926cfa87a2637&id=1%3A%2Fstockmaterial%2F&)

Button über Listenansicht

Über der Liste gibt es einen Button, der die ALT und title-Texte für ALLE Bilder automatisch generiert, bei denen der Text noch fehlt.
Beim Klick auf den Button wird ein JavaScript aufgerufen
Das JavaScript geht iterativ, nacheinander Bild-für-Bild durch die Liste im Backend. Bei allen Bildern, bei denen der alt oder title-Text noch nicht gesetzt ist, ruft es eine Backend-Action auf und übergibt die sys_file.uid des Bildes.
Die Backend-Action ruft die ChatGPT-Api auf, übergibt die absoulte Bild-URL zusammen mit einem Prompt zum Generieren des ALT und title textes in der jeweiligen Sprache
Die Backend-Action speichert dann die Texte in der Tabelle sys_file_metadata
Das Backend gibt ein JSON an das JavaScript zurück
Das JavaScript aktualisiert die Texte in der Liste im Backend-Modul
Erst nachdem die Texte für ein Bild fertig bearbeitet wurden wird das nächste Bild an ChatGPT geschickt

Datenbank-Struktur in TYPO3

Die Tabelle sys_file speichert alle Bilder, die in TYPO3 verwendet werden
Für jeden Eintrag in sys_file gibt es eine Relation zu sys_file_metadata. Die Spalte sys_file_metadata.file enthält dabei die sys_file.uid um auf den Datensatz in sys_file zu referenzieren.
Die Tabelle sys_file_metadata speichert die ALT-Texte (in sys_file_metadata.alternative) und title-Texte (in sys_file_metadata.title) für die Bilder.
Für jede Sprache gibt es einen eigenen Eintrag in sys_file_metadata. Das Feld sys_file_metadata.sys_language_uid enthält dabei die TYPO3-Sprach-ID (z.B. 0 für die Default-Sprache Deutsch, 1 für English etc.)

Helpers

Es gibt verschiedene Helper aus der EXT:nnhelper die für die Extension hilfreich sein könnten:

Um ALLE sys_file-Einträge aus der Datenbank zu lesen: \nn\t3::Db()->findAll('sys_file')
Um einen Eintrag aus der Tabelle sys_file_metadata zu lesen: \nn\t3::Db()->findByValues('sys_file', ['file'=>$sysFileUid])
Um einen Eintrag in die Tabelle sys_file_metadata zu schreiben \nn\t3::Db()->insert('sys_file_metadata', ['file'=>$sysFileUid, 'sys_language_uid'=>0, 'alternative'=>'Der ALT Text', 'title'=>'Der Title des Bildes'])
Um einen bereits existierenden Eintrag in der Tabelle sys_file_metadata zu aktualisieren: \nn\t3::Db()->update('sys_file_metadata', ['alternate'=>'ALT-Text', 'title'=>'Title Text'], $sysFileMetaDataUid) – wobei sysFileMetaDataUid der Spalte sys_file_metadata.uid entspricht, die per \nn\t3::Db()->findByValues() ausgelesen wurde

nng / nnaitools

Maintainers

Details