Erstellen eines eigenen Moodboard-Generators mit Lovable

Hello! Es gibt Dinge, die ich mit KI kann, die ich vorher nicht konnte, wie zum Beispiel programmieren. Ich schaue mir heute das Tool Lovable an und probiere, mir so kleine eigene Tools zu basteln, wie zum Beispiel einen eigenen Moodboard-Generator. Wie das funktioniert, möchte ich dir jetzt zeigen. Und so sieht Lovable aus. Lovable ist wirklich einfach zu bedienen. Man hat grundlegend ein Chatfenster, in dem man seine Wünsche eingibt und auf Create klickt, und dann kommt man auch schon in den Entwicklungsbereich. Im Vergleich zu Replit ist es sehr überschaubar mit den Einstellungen und mit den Dingen, die man da tun kann. Es ist für so einen ersten Einstieg, um mal diese Programmierungs-Tools auszuprobieren, eine wirklich gute Idee. Dahinter steht ein Startup, das ist letztes Jahr auch aufgefallen mit dem Produkt. Man kriegt so ein bisschen mit, für wen das gedacht ist, was die Software kann, was man gerne damit erreichen möchte. Auch was so die Entwickler so anstreben, was so deren Glaubenssätze sind. Man sieht ein paar Beispiele, bekommt ein paar Stimmen mit und hat am Ende das Pricing. Und da sind die obligatorischen 20 Dollar. Um das erstmal auszuprobieren, lohnt sich das, um so ein Gefühl dafür zu bekommen, weil es wirklich sehr einfach zu bedienen ist und ganz offen auch ziemlich gute Ergebnisse liefert. Bei meinen allerersten Tools habe ich ehrlich gesagt alles per Hand geschrieben und bin wirklich im Chat nach und nach durchgegangen, um alles zusammenzuführen. Für mein Briefing nutze ich jetzt einfach ChatGPT, habe den Canvas aufgerufen, habe mir die wichtigsten Informationen zusammengeschrieben: Dass es ein Moodboard-Generator für Bilder werden soll und dass die Bilder, die dort abgebildet werden, generiert sind und dass ich diese Bilder via API erstellen lasse. Ich brauche dafür natürlich ein Chatfenster, um den Prompt einzugeben, und ich brauche die APIs. Und dafür brauche ich einen Settings-Bereich, in dem unterschiedliche APIs eingesetzt werden können. Heißt also: Ich kann den Prompt losschicken, ich kann Leonardo anfunken und Leonardo schickt mir dann das Bild zurück, was eben auf dem Moodboard dargestellt werden soll. Für heute nutze ich nur DALL-E, also OpenAI. Weil erstens würde das den Rahmen sprengen und zweitens: Ich glaube, wenn man einmal verstanden hat, wie man es macht, dann kann man das auch sehr gut alleine tun. Ansonsten ist noch wichtig, dass man immer sagt, dass die gesichert sein sollen, die APIs, damit niemand von außen Zugriff hat. Also das heißt, sie werden verschlüsselt mit Sternchen. Und da es ja ein Moodboard sein soll, möchte ich auch gerne die generierten Bilder in der Form, also in der Größe, und auch in der Position verändern, damit ich eben hier so eine Anordnung machen kann. Die Bilder sollen am Ende downloadbar sein, am besten alle auf einmal. Und ich möchte ganz gerne die Funktion haben, dass ich daraus auch ein PDF erstelle, um eben das ganze Moodboard sehen zu können. Expertentipp – weil da bin ich selber schon drüber gestolpert: ist ein Stop-Button für die Generierung einzufügen. Weil wenn man nicht aufpasst und es gibt irgendeinen Fehler im Code, dann werden endlos die APIs aufgerufen mit dem gleichen Prompt und dann geht ganz schnell das Budget weg. Und das wollen wir natürlich nicht. Deswegen würde ich immer gucken: erstens sichern, APIs nicht sichtbar haben, und zweitens immer diesen Stop-Button reinsetzen. Und am Ende gebe ich noch ein paar Informationen zum Interface und bitte darum, dass dieses Interface halt im Dark Mode ist und mit Türkis- und Blautönen aufgebaut wird. Jetzt sage ich ChatGPT: Bitte überarbeite den Text und schreibe ein Entwickler-Briefing. Das hat ChatGPT getan. Den Text habe ich mir rausgezogen und erstmal noch mal ein bisschen strukturiert. Der Grund ist: Wenn ich zu viel von dem Text auf einmal reinsetze bei Lovable, dann werden am Anfang meistens Fehler produziert, weil so viele Sachen auf einmal umgesetzt werden sollen. Deswegen am besten immer gucken: Okay, womit starte ich? Und dann nach und nach alle Features reingeben. Das werde ich auch gleich machen, aber das ist wirklich noch mal so das Learning: nicht zu viel auf einmal wollen, sondern wirklich iterativ vorgehen. So, jetzt gehen wir auf Lovable rauf. Ich habe ja hier die Möglichkeit, das in ein Chatfenster reinzugeben. Ich kopiere mir mal den ersten Part, nämlich das, was ich ganz gerne machen möchte, und setze das jetzt einfach mal in das Chatfenster und lasse es loslaufen. Was jetzt auch schon beginnt. Das ist wirklich so die Hauptumgebung, in der Lovable einfach arbeitet. Jetzt sieht man, wie viel Code hier nach und nach geschrieben wird. Und wir warten kurz, bis er einmal durchgelaufen ist, und dann haben wir nämlich direkt auch unsere erste Preview. So, da haben wir unseren ersten Anblick für das Moodboard. Jetzt wollen wir einen Schritt weitergehen. Jetzt geht es nämlich darum, die Documentation reinzusetzen von OpenAI, weil ich möchte ja gerne über API arbeiten. Dafür gebe ich einfach ein, dass ich eben die API-Documentation haben möchte. Und dann sieht man auch schon, gibt's hier den Bereich Image Generation. Das kopiere ich mir mal eben. Hier oben ist ein kleiner Copy-Button. Und setze das in Lovable rein und sage: Lovable, bitte lerne von dem jetzt nun folgenden Text und erstelle eine API-Connection. Jetzt wird das reinkopiert und dann wird es wieder abgeschickt. Das ist so quasi der Hauptprozess, den man die ganze Zeit macht. Man ist immer so im Zwiegespräch mit Lovable oder mit dem Chatfenster oder mit dem Chatbot und kriegt hier nach und nach seine Sachen aufgesetzt. Jetzt sehen wir hier schon: Hier passiert jetzt was, hier wird nämlich gerade live der Code geschrieben. Und wir sehen: Die Preview ist geladen. Und ich gucke jetzt mal, was hier drin steht. Was hat er denn da jetzt genau gemacht? Aha, der hat die Integration für die Funktionalität reingesetzt. Der Key kann jetzt gesaved werden und man kann jetzt DALL-E nutzen, um Bilder zu generieren. Das ist super. Ich gehe mal hier oben auf das Symbol, weil da wollte ich ja gerne API-Codes reinsetzen. Wunderbar, ich habe jetzt hier verschiedene Möglichkeiten, meine APIs reinzupacken. Das werde ich gleich machen, aber ich möchte erstmal alle Funktionen reinsetzen, die ich mir so vorgestellt hatte. Also gehe ich zum nächsten Part. Diesmal eine Drag-and-Drop-Funktionalität der Bilder und gleichzeitig auch eine Download-Möglichkeit. Setze ich rein und schicke das wieder ab. Jetzt ist Lovable wieder fertig. Die Preview wurde wieder neu geladen. Jetzt gehe ich zum nächsten Aspekt: Diesmal möchte ich gerne eine PDF-Export-Funktion drin haben. Jetzt sehen wir hier schon so einen ersten Fehler. Wenn das auftaucht, einfach immer 'trying to fix'. Und auf der anderen Seite: Wenn irgendwas mal wirklich überhaupt nicht mehr geht oder irgendwie abgeschossen ist, dann gibt's hier oben immer noch die History, die Versionshistorie, und dann kann man das zurückstellen. So, es ist wieder neu geladen. Was kriege ich als Feedback? Okay, das wurde eingesetzt. Und das Image Grid goes to long. Das ist auch immer so ein Hinweis, was häufiger von Lovable kommt. Da sagt man einfach: Yes, please do it. Dann brauchen wir eine Optimierungs-Option. Lassen wir auch einmal durchlaufen. So, der ist jetzt auch durch. Und jetzt machen wir den letzten Step: Ich möchte ganz gerne einen Button reinsetzen, um die Generierung zu stoppen. Das hat einen Grund, weil mir das auch schon mal passiert ist, dass Lovable tatsächlich immer wieder aufgerufen hat und mein Budget fast aufgefressen hat. Deswegen setze ich jetzt immer einen Stop-Button rein, damit ich wirklich die Generierung abbrechen kann, wenn ich das Gefühl habe, da läuft irgendwas schief. Please add the following functionality. Was ich jetzt an der Stelle auch noch hinzugegeben habe: Ich habe ein paar Designvorgaben reingesetzt, also ich möchte gerne Dark Mode haben und eine gewisse Farbpalette, die da reingesetzt wird. Werden wir gleich sehen, ob das übernommen wird. Lassen wir ihn erstmal arbeiten. Also wie gesagt, der Bot zeigt mir halt immer wieder auch hier den Code an, der live hier generiert wird, das sieht man hier unten. In den Code kann man auch rein, wenn man halt irgendwelche Fehler selber raussuchen kann, wenn man denn codet. Funktioniert. Ich habe einen Dark Mode bekommen, ich habe eine blaue Palette gekriegt. Hervorragend, das ging. So, jetzt haben wir eigentlich alle Funktionalitäten drin und jetzt werde ich mir mal den API-Key von OpenAI holen. Um den API-Key zu erstellen, muss man sich einloggen in platform.openai.com. Da kann man sich einloggen mit dem üblichen Login, den man auch hat. Und da gibt es oben den Bereich Dashboard. Wenn man da draufgeht, dann sieht man hier unten schon die API-Keys und dann kann man diese anlegen. Hier oben ist auch noch mal die API-Referenz, die ich gerade hatte, wo ich die Image Generation rausgezogen hatte. Wichtig ist, wenn man mit dem API-Key arbeitet, dass man auch ein bisschen Budget hochlädt. Den Key werde ich jetzt einfügen, das war hier oben. Hier setze ich jetzt bei DALL-E ... Wie man sieht, ich habe ein paar mehr Fenster vorbereitet, weil es funktioniert tatsächlich ebenso, wenn man sich vorher die Documentation von der jeweiligen Plattform zieht, dass man hier auch die Connection zu den jeweiligen Tools bekommt und damit wirklich alle quasi hätte, um sein Moodboard zu vervollständigen. Ich mache heute aber nur die DALL-E Connection, weil das sonst das Zeitfenster sprengen würde. Aber das Prinzip, das, was ich jetzt gerade gemacht habe, funktioniert eben auch mit den anderen Plattformen, nur da sind die Documentations der APIs ein wenig anders. Gut, jetzt haben wir das drin. Jetzt mache ich mal unseren ersten Prompt. Muss vielleicht noch mal ein bisschen an der Darstellung arbeiten, weil es ein wenig dunkel ist. Ich habe jetzt 'Ocean' eingegeben. Jetzt wollen wir mal gucken, ob da wirklich was kommt. Aha. 'The key is not found'. Muss ich den noch mal reinsetzen? Ich habe den nicht gesaved. Jetzt ist er gesaved. Das Gleiche machen wir noch mal. Ich gebe einfach nur 'Ocean' ein. Okay, da ist ein Problem. Also bitte ich Lovable darum: Please check the functionality to save the API key. Und jetzt versuche ich das mal mit dem ersten Bild, ob es denn diesmal klappt. Schauen wir mal nach. So, Generierung startet. Wie ich eben mal gesagt habe: Ich habe diesen Stop-Button. Wenn ich jetzt hier draufdrücken würde, wäre es wirklich so, dass die Generierung stoppen würde. In dem Fall lasse ich sie einfach mal durchlaufen. Was auch noch vielleicht relevant ist neben der Meldung, die hier unten automatisch von Lovable kommt, ist es, dass ich in den Entwickler-Tools Teile der Aktionen, die Lovable mit dem Server aufnimmt, auch wirklich beobachten kann. Das heißt, wenn hier wirklich mal in irgendeiner Form ein gravierender Fehler passiert oder man einfach die ganzen Funktionen und die ganzen Vorgänge überprüfen möchte, dann lohnt es sich wirklich, hier die Entwickler-Tools einmal anzuschalten. Die finde ich unter Anzeigen, Entwickler und zum Beispiel ja die JavaScript-Konsole. Und unter dieser Konsole werden eigentlich alle Schritte mitgezeichnet, die Lovable an der Stelle halt tut. Gut, das hat schon mal funktioniert. Dann versuchen wir es halt noch mal mit irgendeinem einfachen Prompt. Ich will einfach schauen, ob die Connection und die API, wie ich sie mit DALL-E halt eingerichtet habe, wirklich funktioniert. Und jetzt schauen wir mal. Das nächste Bild kommt. Gut, ich nehme mein erstes Bild. Okay, das wird so vergrößert in der Lightbox, aber das ist nicht das, was ich haben wollte. Bei diesem Schritt habe ich noch mal drum gebeten, dass die Positionierungsfunktion überprüft werden soll, also wirklich: Da, wo die Maus sich hinbewegt, soll das Bild auch abgelegt werden. Plus, ich habe jetzt um Handler gebeten, die an den Ecken der Bilder angebracht werden sollen, damit ich die Bilder wirklich an der Stelle auch vergrößern kann. Schauen wir mal, ob es funktioniert. Ja, jetzt geht's. Hervorragend. Er verändert die Größe. Ich habe immer noch diese Lightbox, die ich eigentlich gar nicht brauche, aber ich habe wirklich jetzt die Möglichkeit, die Größe dieses Bildes zu verändern und ich kann es so positionieren, wie ich es haben möchte. Bedeutet: Ich kann jetzt wirklich eine Reihe von verschiedenen Bildern kreieren und versuchen, diese Bilder dann in ein Moodboard zu generieren. Es sind noch ein paar Bugs drin, wie ich sehe. Also zum Beispiel diese Lightbox, das brauche ich ehrlich gesagt gar nicht, das werde ich jetzt noch mal rausbriefen. Bis gleich. So, mir ist gerade noch aufgefallen, das sehen wir gerade auch an dem Bild, das hat sich jetzt ... Also immer, wenn ich auf den Settings-Button komme, ist es so, dass ich ja alle Inhalte hier gelöscht habe, so wie das Bild jetzt hier, das hat sich auf einmal verabschiedet. Und ich habe jetzt Lovable gefragt: Hast du eine Idee, wie ich diese Bilder speichern kann, so dass, wenn es wirklich darauf hinkommt, dass ich die Settings erweitern möchte, weil ich eine neue API hinterlegen will, dass diese Images nicht verschwinden. Warten wir mal kurz ab, bis er durch ist. Scheinbar hat er alle Lightboxen alle gelöscht und jetzt schaue ich mal. Ich muss wieder ein neues Bild generieren. So, es hat sich hier ein Bild herausgebildet und jetzt will ich mal gucken, ob das, was ich jetzt gebrieft habe mit der Positionierung und mit der Skalierung, auch so funktioniert. Ja, die Lightboxen kommen schon mal nicht mehr, wenn ich klicke, und ich kann de facto auch das Bild vergrößern und auch die Position ein wenig verändern. Sehr gut. Jetzt gehe ich mal auf die APIs, sage 'Save Settings' und voilà, es funktioniert! Das Bild bleibt, das heißt, auch diese Funktion mit der Speicherung hat geklappt und das ist hier auch noch mal gesagt. Also es gibt eine Lightbox, die entfernt worden ist, und es gibt ein Local Storage, wo die Bilder hinterlegt werden. Mega, das hat schon mal geklappt. So, ich habe den Kampf ein wenig aufgegeben, die Download-Funktion zu optimieren. Es funktioniert mit dem Download, werde ich gleich zeigen, allerdings nicht so ganz, wie ich das gerne hätte. Aber dennoch: Würde man jetzt noch ein bisschen Arbeit reininvestieren, könnte man das Thema hier auch noch lösen. Aber das, was ich machen wollte, ist ein Moodboard-Ersteller und das habe ich hinbekommen. Also ich habe hingekriegt, dass ich die Bilder über DALL-E, über die API generieren kann, weil ich die API connected habe mit dem Lovable, hier mit dem Tool, was ich mir gebaut habe. Also ich kann die Bilder in der Größe verändern, ich kann sie hin und her schieben, das hat auf jeden Fall funktioniert. Wenn man runterscrollt, sieht man auch, okay, das wird endlos weitergehen, also ich könnte mir wirklich hier verschiedene Bildwelten zusammenstellen, wenn ich das denn wollen würde. Und auch wenn es ein bisschen buggy ist mit dem Verschieben der Bilder, wie man sieht, dennoch kann ich die Anordnung da auch ein bisschen verändern und ja, für mich eine Reihenfolge definieren. Das hat also geklappt mit der API-Schnittstelle, also wunderbar. Damit habe ich meinen Moodboard-Generator gebaut. Auch wenn jetzt noch nicht alles so perfekt ist, würde ich noch ein bisschen Arbeit investieren, dann könnte ich das alles noch optimieren. Was ich gerne noch mal zeigen möchte: Ich habe auch zwischendurch mal oder letzten Monat ein bisschen mehr Zeit investiert und habe den Moodboard-Generator so weit getrieben, dass ich damit auch wirklich als Tool arbeiten kann. Das sind jetzt Bilder, die ich damals mal generiert habe, das übliche Bild eines Ozeans. Ich kann diese Bilder auch löschen, wenn sie mir nicht gefallen, dann kann ich sie einfach rausschmeißen. Ich kann auch neue generieren und das ist jetzt etwas, was ich wirklich hinbekommen habe durch das Herunterladen der Dokumentation, Hinterlegen der Dokumentation und sehr viel Prompten, dass ich de facto von fal das Flux-Modell ansteuern kann, in Fast und in Ultra. Das mache ich jetzt mal eben, damit man sieht, dass es wirklich funktioniert. Ich habe die Möglichkeit, auch mehrere Images auf einmal zu generieren. Bedeutet, dann würde die API mehrfach aufgerufen werden. Auch das funktioniert, das zeige ich gleich mit Leonardo. Also hier ein üblich gutes Bild aus der Ultra-Version von Flux und das wird sehr hochauflösend sein, das funktioniert. Ich habe Recraft mit drin, da kann ich jetzt mal zwei Images generieren. Da sind die beiden Recraft-Bilder. Jetzt werde ich auch noch mal Leonardo bitten. Da kann ich mal die hohe Version nehmen, ich nehme das Kino XL-Modell und lasse mir direkt mal drei Images generieren. Ich mache das in Cinematic. Auch das liegt in der API drin, also diese Information, wie man diese einzelnen Einstellungen ansteuert. Das heißt, ich habe so ein bisschen wirklich Leonardo 'light light' jetzt hier in diesem Moodboard-Generator reingebaut. So, jetzt warte ich, bis die drei Generierungen durch sind. Da haben wir sie. Wie man sieht, der Moodboard-Generator oder das Moodboard generell ist unendlich, also ich kann wirklich runterscrollen und kann mir damit ein sehr langes Moodboard erstellen. Und jetzt noch zu guter Letzt die ChatGPT-Integration, das haben wir gerade schon gesehen, generiere ich auch noch mal ein Bild. Und ja, wie man sieht, ich habe wirklich die Funktion, dass ich skalieren kann, ich kann es positionieren, das geht auch relativ flüssig. Wenn ich das Bild nicht haben will, kann ich dieses Bild auch löschen mit dem X. Und was auch noch spannend ist: Ich kann diese Bilder auch herunterladen. Nämlich habe ich hier oben einen Button, ich kann jetzt sagen 'Download All', dann werden alle Bilder, sieht man auch an der MB-Zahl, auch wirklich runtergeladen. Und ich kann mir auch ein Moodboard generieren lassen, das wird jetzt auch parallel runtergeladen. Ich gehe jetzt erstmal in den Ordner: Das hat er mir gerade gezippt, hat einen Ordner erstellt und hier sieht man wirklich die Bilder, die da jetzt hinterlegt sind. Also das finde ich unglaublich nützlich, wenn man ja wirklich eine Moodboard-Generierung macht. Und jetzt gucken wir mal, ob das auch mit dem Moodboard an sich funktioniert hat. So, auch das Moodboard hat er runtergeladen, das hat also auch funktioniert. Also jetzt auch noch mal in der großen Ansicht: Man kann sich wirklich sehr praktische Tools schon allein mit Lovable bauen. In dem Fall brauche ich keine Bildrecherche mehr machen, wie ich es eingangs gesagt habe, ich kann mir jetzt selber meine Bilder generieren. Muss natürlich noch ein bisschen Prompt-Technik berücksichtigen, das habe ich jetzt in dem Fall nicht drauf geachtet, ich habe es sehr einfach gehalten. Aber ich glaube, man merkt schon, wie viel Spaß das machen kann, sich seine eigene Welt zu bauen. Ich hoffe, das Snip hat dir Ideen gebracht. Teste es einfach mal selbst aus. Es ist gerade sehr viel möglich geworden und es tun sich Welten auf, von denen man vorher nichts wusste. Ich für meinen Teil werde das noch weiter ausreizen und mir noch weitere kleine Tools basteln. Ich wünsche dir viel Spaß und ich sage mal: Bis zum nächsten Mal!