Zum Inhalt springen
Marketing Factory Digital GmbH
Kontakt
Ein humanoider Roboter sitzt an einem Schreibtisch und arbeitet an einem Computer. Der Bildschirm zeigt verschiedene technische Diagramme und Daten. Der Roboter scheint konzentriert zu sein und verwendet eine Tastatur. Die Umgebung ist dunkel und futuristisch.

Nutzung unserer Extension ai_filemetadata mit dem AI-Hosting von Mittwald

Bei der Entwicklung unserer Extension ai_filemetadata haben wir zunächst die OpenAI API verwendet, da diese Schnittstelle früh stabil verfügbar war.
Inzwischen bieten mehrere Anbieter gehostete Open-Source-LLM-Modelle an. Einer davon ist unser Partner Mittwald, der mit dem Projekt AI-Hosting eine eigene Plattform gestartet hat. Zum Zeitpunkt dieses Blogartikels befindet sich das Projekt noch in der Beta-Phase.

In diesem Artikel zeigen wir, wie sich unsere Extension mit dem AI-Hosting von Mittwald einsetzen lässt.

"API-Key anlegen: Name 'ai_fielmetadata', RateLimit 300 Anfragen pro Minute. Option zum Erstellen eines Containers für Open WebUI. Auswahl der Modelle mit Nutzungsbedingungen: gpt-oss-120b, Mistral-Small-3.2-24B-Instruct, Qwen3-Coder-30B-Instruct, Qwen3-Embedding-8B. Zustimmung zu den Nutzungsbedingungen erforderlich."

Voraussetzungen

Benötigt werden:

  • Eine TYPO3-Installation mindestens in der Version 12 mit der Extension ai_filemetadata (mindestens Version 1.3.5)
  • Ein mStudio-Account mit aktivem Projekt bei Mittwald

Falls noch kein Account vorhanden ist, kann man direkt hier einen neuen Account und ein Projekt anlegen.
Sobald das Projekt aktiv ist, kann das AI-Hosting eingerichtet werden.

Einrichtung des AI-Hostings

Im Projektbereich Komponenten wird das AI-Hosting über das Anlegen eines API-Keys aktiviert. Am besten geschieht dies direkt zusammen mit dem OpenWebUI-Container.

Das Bild zeigt eine Benutzeroberfläche für den Zugriff auf KI-Modelle über eine API. Es enthält eine Base-URL für die API, einen API-Key mit dem Namen "ai_fielmetadata" und einem RateLimit von 300 Anfragen pro Minute. Zudem wird auf eine Dokumentation im Developer-Portal verwiesen.

Nach der Bestätigung wird der API-Key automatisch erzeugt und angezeigt. Für die Einrichtung der Extension werden die folgenden Werte benötigt:

  • Base-URL
  • Key-Name (Project ID)
  • API-Key
"Bildschirm zur Erstellung eines Administrator-Accounts für Open WebUI. Eingabefelder für Name, E-Mail und Passwort. Hinweis: Keine externen Verbindungen, Daten bleiben lokal auf dem Server. Button zur Account-Erstellung vorhanden."

Der OpenWebUI-Container bietet eine Weboberfläche für das AI-Hosting. Beim ersten Aufruf der Frontend-URL müssen zunächst Benutzer angelegt werden, die anschließend Zugriff auf das Web-Interface erhalten.

Ein Bildschirmfoto eines OpenWebUI-Chatfensters mit einem Anfänger-Guide für die OpenWebUI. Der Guide erklärt die Voraussetzungen wie Betriebssystem, Docker und RAM sowie die Schnell-Installations-Optionen mit Docker-Compose. Es wird Schritt-für-Schritt-Anleitung zur Erstellung eines Projektordners und einer docker-compose.yml-Datei gegeben.

In der Anwendung kann dann ein Modell ausgewählt und direkt getestet werden. Die Vor- und Nachteile der verfügbaren Modelle sind in der Dokumentation beschrieben.

Konfiguration der Extension

Nun muss die Extension so konfiguriert werden, dass sie das Mittwald-Hosting verwendet.
Die entsprechenden Felder werden wie folgt befüllt:

Extension ParameterKonfigurations-Wert
apiBaseUriBase-URL aus mittwald Backend
apiKeyAPI-Key aus mittwald Backend
projectIdKey-Name aus mittwald Backend
modelMistral-Small-3.2-24B-Instruct

Bei unseren Tests traten gelegentlich Probleme mit sehr großen Bildern auf. Daher empfehlen wir, den Wert für imageResizing zu setzen. Wir verwenden 1024, damit TYPO3 die Bilder auf maximal 1024×1024 Pixel verkleinert, bevor sie an das LLM übergeben werden.

Test

Im TYPO3-Backend kann man die Einrichtung leicht prüfen. Bei einem vorhandenen Bild einfach auf den Zauberstab-Button klicken. Wenn alles korrekt eingerichtet ist, wird automatisch ein Alt-Text erzeugt.

Vergleich der Ergebnisse

For our test, we generated all alt-texts for the images on our website in both German and English using OpenAI (gpt-4o-mini) as well as Mittwald (Mistral-Small-3.2-24B-Instruct) and then compared the results qualitatively.

The test also served as a small benchmark for Mittwald’s AI hosting. A total of 649 images — each with two alt-texts — were processed in about two and a half hours, which is roughly the same time frame as with OpenAI.

As expected, the results differ. Even repeated requests using the same model produce slightly different descriptions — which is normal.

Conclusion

Both models deliver well-usable results for our purpose: descriptive alt-texts for people with visual impairments. None of the descriptions were completely incorrect or unusable. Therefore, there is no compelling reason to prefer one model over the other.

On closer inspection, gpt-4o-mini appears to draw on a broader knowledge base. For example, it correctly recognizes our new office building as the “Arkadengebäude,” while Mistral simply describes it as a “modern office building.”

OpenAI occasionally adds fine-grained details, such as noting that an image is a screenshot. However, such additions are not essential for accessibility.

Exemplarischer Vergleich der Ergebnisse

gpt-4o-miniMistral-Small-3.2-24B-Instruct
Eine Lupe liegt auf einer hellen Oberfläche neben einem Laptop. Die Lupe hat einen schwarzen Griff und eine runde Linse, die das Licht reflektiert.Ein schwarzer Lupenvergrößerungsglas liegt auf einer hellen, marmorfarbenen Oberfläche neben einem geschlossenen, silberfarbenen Laptop. Das Bild symbolisiert Recherche oder Untersuchung.
Ein Diagramm zeigt die Anzahl von URLs auf Mobilgeräten: 570 gute URLs (grün), 217 URLs, die verbessert werden müssen (orange), und eine geringe Anzahl schlechter URLs (rot). Die Daten variieren über einen Zeitraum vom 8. Juli bis zum 30. September 2025.Das Bild zeigt einen Graphen zur mobilen Website-Analyse vom 08.07.2025 bis 30.09.2025. Es werden drei Kategorien dargestellt: 0 schlechte URLs (rot), 217 URLs, die Verbesserung benötigen (orange), und 570 gute URLs (grün). Die Anzahl der guten URLs steigt im Laufe der Zeit an.
Das Arkadengebäude auf dem Factory Campus in Düsseldorf mit großen Fensterfronten und einem Eingangsbereich. Vor dem Gebäude erstreckt sich eine gepflegte Grünfläche mit kleinen Bäumen und einem Weg aus grauen Platten. Ein Sitzbank ist ebenfalls sichtbar. Der Himmel ist teils bewölkt.Moderne Bürogebäude mit großen Glasfenstern und weißen Säulen. Vor dem Gebäude befindet sich ein gepflegter Garten mit Bäumen, Sträuchern und einem Weg. Das Gebäude hat einen markanten Eingang mit einem Logo. Der Himmel ist blau mit einigen Wolken.
Ein einfaches, schwarzes Logo mit der Aufschrift "aws" in Großbuchstaben. Unter dem Text verläuft ein geschwungener Halbkreis, der an ein Lächeln erinnert. Das Design ist minimalistisch und modern.AWS-Logo mit einem Lächeln darunter. AWS steht für Amazon Web Services, ein Cloud-Computing-Anbieter von Amazon.
Eine Betrachterin steht vor einem großen Wandgemälde, das als Collage aus vielen einzelnen Bildern in lebhaften Farben und kräftigen Pinselstrichen gestaltet ist. Das Kunstwerk zeigt dramatische Elemente wie Feuer und Rauch sowie verschiedene kleinere Bilder, die thematisch integriert sind.Eine Person steht vor einer großen, mehrteiligen Kunstinstallation. Das Werk zeigt eine düstere, chaotische Szene mit Explosionen, Gebäuden und verschiedenen kleinen Bildern, die in die Komposition integriert sind. Die Atmosphäre wirkt dramatisch und intensiv.
Eine massive Holzttür mit einem kunstvollen schmiedeeisernen Gitter und Fensteröffnungen. Durch die Fenster sind unscharfe grüne und gelbe Farben zu sehen, die auf die Außenumgebung hinweisen. Die Tür ist originell gestaltet mit dekorativen Details und einem runden Türgriff.Ein altmodisches Holztor mit verziertem Metallgitter und einem kunstvoll gestalteten Türklopfer. Das Tor hat eine vertikale Rillenstruktur und ist teilweise geöffnet, sodass man durch das Gitter hindurchsehen kann.
Ein Monitor zeigt die Webseite von pfm medical UK an, die Informationen über das Unternehmen und seine Produkte enthält. Im Vordergrund befinden sich einige dekorative Pflanzen und Büroartikel auf einem Tisch.Ein Bildschirm zeigt eine Website mit dem Namen "pfm medical" und einem Foto eines Gebäudes. Die Website enthält Text und Bilder, die sich auf medizinische Geräte und Dienstleistungen beziehen. Der Bildschirm steht auf einem Schreibtisch mit Pflanzen und Büromaterialien.
Screenshot einer Liste von Bildnachweisen. Jedes Bild besitzt einen verlinkten Bildtitel, Autoren sowie die jeweilige Lizenz bzw. Anbieternamen (Vendor).Bildnachweise: 1. Maßgeschneiderte Entwicklung: Pexels, Pixabay-Lizenz (CC0 1.0). 2. Cybersicherheit: TheDigitalArtist, Pixabay-Lizenz (CC0 1.0). 3. Schlüsselloch: qimono, Pixabay-Lizenz (CC0 1.0). 4. Server-Racks: Taylor Vick, Unsplash-Lizenz. 5. Sterne für Produktbewertung: PatternPictures, Pixabay-Lizenz (CC0 1.0). 6. Digitales Marketing: PhotoMIX-Company, Pixabay-Lizenz (CC0 1.0).

Abschluss

Da beide Systeme für unseren Anwendungsfall sehr gute Ergebnisse liefern, haben wir die Alt-Text-Erzeugunginzwischen vollständig auf den Mittwald-KI-Service umgestellt, da wir jetzt ein europäisches Modell und einen deutschen Anbieter nutzen. 

Habt ihr Vorschläge für weitere Modelle, die wir testen sollen?
Hinterlasst einfach einen Kommentar. Wir freuen uns über Feedback!

Wir freuen uns, wenn Ihr diesen Beitrag teilt.

Kommentare

Keine Kommentare gefunden.