Pigeonport AI

Hintergrund

Alles hat damit angefangen, dass ich gerne mal ein paar Bilder generieren wollte, z.B. für Pigeonport oder für eine Präsentation in der Uni. Dabei habe ich einige kostenlose Möglichkeiten gefunden, die dann aber in der Quantität oder Qualität limitiert gewesen wären.

Ich wollte gerne nicht eingeschränkt sein und habe mich daher nach kostenpflichtigen Lösungen umgeschaut. Davon gibt es viele, aber eigentlich nur im Abo-Modell für ~20 € im Monat. Für gelegentliches Generieren von Bildern war mir das zu viel Geld.

Der nächste Schritt der Recherche war dann die API-Kosten von OpenAI, wo ich gesehen hatte, dass man ein Bild für 0,04 € generieren lassen kann. Das wären dann 500 Bilder, bis sich das Abo-Modell (nur für die Bildgenerierung) lohnen würde. Ich fand die Kosten auf jeden Fall sehr vertretbar und habe dann geschaut, wie ich Bilder mit DALL-E 3 generieren kann.

Leider gab es kein einfach zugängliches Interface, mit dem man sich die Bilder generieren lassen kann, und viel wichtiger, diese automatisch abspeichern kann, damit sie nicht verschwinden. Daher habe ich mich dazu entschlossen, einen kleinen Wrapper zu bauen, mit dem man einfach ein Bild generieren kann und dieses auch noch in der Zukunft herunterladen kann.

Funktionen

Der Funktionsumfang der Applikation sollte übersichtlich bleiben. Es sollte drei Kernfunktionen geben:

Die Schnittstelle zu OpenAI, um die Bilder zu generieren,
Eine User-Authentifizierung, damit der Zugang zur Seite limitiert wird und nicht jeder mit meinem API-Key Bilder generieren kann, und
eine Möglichkeit, die Bilder zu speichern, da OpenAI die generierten Bilder nach einer kurzen Zeitspanne löscht.

1. Schnittstelle zu Open AI

Die erste Funktion war sehr einfach zu implementieren, da die API-Dokumentation von OpenAI sehr verständlich ist. Es wird nur der API-Key benötigt und das Prompt, mit dem das Bild generiert werden soll. Hier gäbe es auch noch die Möglichkeit, mehrere Bilder auf einmal zu generieren (aus einem Prompt werden 4 Bilder), wie man es z.B. von Bing AI kennt. Aus Kostengründen habe ich mich in der aktuellen Version zunächst dagegen entschieden, frei nach dem Motto “Wenn das erste Bild nicht gefällt, generiert man noch eins”. Weiterhin kann man auch angeben, in welcher Auflösung das Bild generiert werden soll, wobei ich hier den Standardwert gut genug fand.

2. User Authentication

Die User-Authentifizierung soll in erster Linie als Zugangskontrolle dienen. Hier habe ich es so implementiert, dass man sich einen Account erstellen kann, wenn man einen Key von mir erhalten hat. Der Key wird in der URL als Parameter mitgegeben und Registrierungen ohne einen validen Key werden ignoriert. Ich hatte überlegt, ob ich auch unterstützen möchte, dass man sich z.B. mit GitHub oder Google anmelden kann, aber ich habe mich in dieser Version zunächst dagegen entschieden, da es die Implementierung etwas vereinfacht hat. Alle generierten Bilder werden dem User-Account zugewiesen, sodass ich zum einen tracken kann, welcher Account wie viele Bilder generiert, und dass alle generierten Bilder auch später für den Account zur Verfügung stehen.

3. Speicherung der Bilder

Ich fand es eine schöne Idee, dass die generierten Bilder nicht irgendwo verschwinden, wenn man sie nicht selbst speichert. Dazu speichere ich die Bilder aktuell direkt auf dem Server und per Bildname sind diese dann den verschiedenen Accounts zugewiesen. Aktuell werden auch schon die Prompts, mit denen die Bilder generiert werden, mitgespeichert, aber diese werden in der UI noch nicht angezeigt, da ich dafür noch keine schöne Lösung gefunden habe. Es gibt außerdem auch noch keine zweistufige Sicherung. Das heißt also, wenn ich die Daten auf dem Server verlieren sollte, sind auch alle generierten Bilder weg. Hier werde ich mir in einer nächsten Version von diesem Projekt noch eine bessere Lösung einfallen lassen.

Für die UI-Umsetzungen habe ich eine Art Galerie implementiert, wo man sich immer die letzten Bilder anzeigen und herunterladen kann. Dabei werden dann auch nicht alle Bilder gleichzeitig geladen, sondern es gibt einen Nachlade-Button, da sonst die Performance der Seite zu schlecht wäre.

Technische Details

In dieser Sektion wird es jetzt ein wenig technischer. Wenn du dich also nicht für die technische Umsetzung, genutzte Technologien und das Deployment interessierst, kannst du diese Sektion gerne überspringen.

Tech-Stack

Der Web-Wrapper an sich ist in Nuxt gebaut, was ein SSR-Framework für Vue.js ist. Meiner Meinung nach macht es das Erstellen von Prototypen und simplen Webprojekten sehr einfach, da es mit vielen Funktionen wie z.B. App-Routing sowie API-Möglichkeiten ausgestattet ist. Dazu kommt, dass mit Node als Basis die Erweiterungsmöglichkeiten nahezu unendlich sind.

Für das Design nutze ich die Component-Library NuxtUI, welche schon viele Elemente vorgestylt bereitstellt und außerdem Tailwind nutzt, um das Design der Seite zu machen. Es ist für mich als Entwickler und als nicht so begabter Designer auch möglich, halbwegs vernünftig aussehende Seiten zu erstellen.

Die User-Authentifizierung sowie die Datenbank für Speicherung von Bilder-User-Relation wird über Firebase realisiert. Die einfache Initialisierung und Integration in Node-Projekte macht es sehr einfach, in kurzer Zeit ein laufendes System zu haben. Die User-Authentifizierung in Nuxt zu implementieren war zwar etwas tricky, da es zahllose Möglichkeiten gibt, das zu machen, alle mit ihren eigenen Vor- und Nachteilen, aber unterm Strich ging es auf jeden Fall schneller als ein eigenes Authentifizierungssystem aufzusetzen. Was auch noch ein kleiner Vorteil ist, dass die Datenbank ein Document Store ist, in dem man eigentlich direkt JSON-Objekte speichern kann, ohne vorher eine feste Struktur zu definieren, was zwar etwas mehr Verantwortung im Handling der Daten fordert, aber das initiale Setup deutlich einfacher und schneller macht.

Architektur

Zur Architektur gibt es bei einem so “kleinen” Projekt eigentlich nicht viel zu sagen. Die Applikation liegt in einem eigenen Docker-Container hinter einem Proxy auf meinem V-Server bei Netcup. Die Seite wird auf dem Server gerendert und dem Client übergeben. Die User-Authentifizierung läuft zunächst über eine Schnittstelle zu meinem Server und wird dann über Firebase geregelt. Weiterhin wird jeder Request mit von Bildern oder die Erstellung der Prompts auch über den Server geregelt, um Manipulation zu verhindern. Alle Bilder werden auch aktuell noch direkt auf dem Webserver der Application gespeichert und bei Bedarf geladen.

Fazit

Ungefähr drei Abende war ich mit der Entwicklung beschäftigt und im Großen und Ganzen bin ich mit dem Ergebnis sehr zufrieden. Aktuell nutze ich die Applikation noch relativ regelmäßig und ich freue mich jedes Mal darüber, dass wenn ich mal ein Bild brauche, ich direkt weiß, wo ich eins herkriegen kann.

Weiterhin habe ich noch ein paar mehr Keys generiert, um meinen Freunden und Familie Zugang zum Tool zu geben. Das geht zwar alles auf meine Kosten, aber was sind schon ein paar Cent. Und sollte jemand es übermäßig nutzen, kann man immer darüber reden. Auf jeden Fall würde ich empfehlen, bei OpenAI ein Limit einzustellen, um eventuelle Übernutzung zu stoppen. So habe ich nur 10€ aufgeladen und wenn die weg sind, funktioniert das Tool nicht mehr. Nach ein paar Monaten kann ich aber sagen, dass das Limit wohl noch das ganze Jahr reichen wird.

Schön zu sehen war es, dass Freunde und Familie, die noch keinen so großen Bezug zu AI hatten, mit der Applikation rumgespielt haben und einige Bilder generiert haben. Das war den Zeitaufwand und das bisschen Geld auf jeden Fall wert.

Weitere Entwicklung

Es kann sehr gut sein, dass ich weiter an diesem Projekt arbeiten werde, da es noch einige Pain Points gibt, die mir noch nicht so gefallen. So hätte ich gerne noch mehr Einstellungsmöglichkeiten für die Generierung der Bilder sowie eine bessere Lösung zur Speicherung der Bilder. Sollte ein Update kommen, werde ich hier darauf verlinken.

Ich hoffe, du fandest die Idee und Umsetzung spannend. Hast du Anmerkungen oder Fragen? Nimm gerne mit mir Kontakt auf. Ich freue mich, dir weiterzuhelfen!