Eigener KI-Bildgenerator mit Cursor und API erstellen

Moin und willkommen zu einem neuen Snip. Heute will ich dir einmal zeigen, wie du mit Cursor und einer API dir deinen eigenen KI-Bildgenerator bauen kannst, und das Ganze in nur wenigen Minuten, ohne Code wirklich anzufassen, mit ein bisschen Copy-Paste. Und wie das Ganze funktioniert und wie es dann im Endeffekt aussieht, das will ich dir heute einmal in diesem Beispiel zeigen. Wir springen direkt mal in mein Beispiel, was ich hier gebaut habe. Du siehst ein sehr, sehr einfach gehaltener, nicht gestylter Bildgenerator. Und wenn ich jetzt hier sage: ein sign that says 'Jens', dann kann ich hier innerhalb von zwei, drei Sekunden ein neues Bild generieren und wir bekommen dann hier gleich ein Update. Du siehst hier, je nach Modell ist das mit Schrift auch noch mal eine Herausforderung. Aber wenn ich jetzt hier sage 'a dog', dann wird das hier ein paar Sekunden dauern und ich bekomme hier ein Bild generiert. Das Ganze, wie gesagt, komplett selber gebaut, ohne Code anzufassen. Und wie das Ganze funktioniert, das will ich dir heute einmal kurz zeigen. Wir nutzen dafür Cursor. Cursor ist einer der wohl bekanntesten aktuell KI-Code-Editoren mit dem Vorteil, dass du hier, wie du siehst, links zwar den Code hast, aber rechts auch einen Chat. Und dieser Chat ist sehr, sehr mächtig, weil er Dinge erzeugen kann, Dateien erzeugen kann und entsprechend auch ausführen kann. Und damit sparst du dir sehr viel Zeit und kannst da auch Projekte und Ideen umsetzen, ohne Coding-Erfahrung zu haben, so wie bei mir. Zum Pricing von Cursor: Das kannst du herunterladen als Mac-App oder als Windows-App. Und es gibt hier ein Free-Paket, wo du auch eine zweiwöchige Pro-Trial, also Testversion, hast. Hast aber hier auch eine Möglichkeit oder eine Menge an Anfragen, die du im Cursor stellen kannst. Das heißt, du kannst hier auch kostenlos starten. Je mehr du machst, desto eher lohnt sich dann auch der Pro-Plan, auf dem bin ich gerade. Aber hier entsteht auch gerade ein ganz, ganz großer Markt mit ganz vielen Alternativen. Aber mit dem Free-Paket kannst du schon einiges machen. So, und wenn du das heruntergeladen hast, dann springe ich mal kurz rein. Das Ganze wie andere Apps auch zu installieren. Und dann hast du hier deine Arbeitsfläche. Und du siehst, ich bin jetzt hier in einem neuen Ordner, der nennt sich 'snip-tut', und hier habe ich erstmal nichts drin. Ich habe aber hier oben die Möglichkeit, über Toggle AI Pane hier diesen neuen Bereich auf der rechten Seite zu aktivieren. Du siehst, ich habe hier den Composer und ein Chatfenster. Und mit diesem Chatfenster kann ich jetzt mich unterhalten und mir Dinge wünschen. Und das probieren wir jetzt einfach mal. Ich sage jetzt, ich prompte übrigens in der Regel in Englisch, weil Englisch ist meistens ein bisschen kürzer und meistens hat man auch weniger Missverständnisse dazu. Also hier, wenn du dem Englischen mächtig bist, prompte gerne auf Englisch. Funktioniert in der Regel ein bisschen besser. Also hier sage ich zum Beispiel: Create a web app that generates images based on the user's prompt. Use HTML, JavaScript and CSS for that. Dann sage ich ihm nämlich jetzt nicht nur, wie das Ganze aufgebaut sein soll, sondern dass ich ihm auch gleich eine API, also eine Programmierschnittstelle, hinzufüge. Aber das kommt erst gleich. I will add an API endpoint in the next steps, please create the interface first. So, das schicke ich jetzt ab. Und du siehst hier, legt er auch schon los und hier wird nicht nur entsprechend der Code generiert, sondern hier links auf der Seite, siehst du hier, auch die Datei angelegt mit dem Code. Das heißt, wir haben hier jetzt nicht nur ein bisschen Code in einem Chatfenster wie bei ChatGPT, sondern auch direkt schon die Dateien. Und wenn ich jetzt hier mal das mal auf dem Finder mir anschaue und entsprechend mal öffne hier im Browser, wir machen das mal gerade. So, Sekunde. Und öffne jetzt quasi diese HTML-Datei, dann habe ich jetzt hier erstmal einen KI-Bildgenerator. Wenn ich jetzt sage 'a dog', dann wird hier wahrscheinlich erstmal nichts passieren, weil ich ja hier noch nichts bereitgestellt habe. Das heißt, wir brauchen ein Modell, einen Endpunkt, einen Anbieter, der für uns die Bilder generiert, mit dem wir sprechen können. Da gibt es ganz, ganz viele am Markt. Ich bin mittlerweile recht großer Fan von fal.ai, fal.ai. Hier steht's auch schon: Generative Media Platform for Developers. Und hier kann man alles Mögliche generieren, von Bildern über Videos bis Sound. Und hier das Ganze in seinen eigenen Tools auch entsprechend adaptieren. Wenn du in der fal-Oberfläche bist, dann hast du hier den Bereich Explore und hast hier ganz viele verschiedene APIs, also Dinge, die du erzeugen kannst, und musst dich hier einloggen. Das machen wir gerade mal ganz kurz. Und nachdem du dich hier eingeloggt hast, siehst du hier im Explore-Bereich auch die verschiedenen Modelle, die du nutzen kannst. Und hier ist so eine Auswahl, kannst du dir erstmal anschauen, was denn überhaupt so geht. Du siehst hier, gibt es auch verschiedene andere Modalitäten. Wir wollen uns aber heute mal auf den KI-Bildgenerator konzentrieren. Ganz, ganz wichtig: Hier kostet natürlich jede Generierung ein bisschen Geld. Das heißt, hier oben rechts hast du die Möglichkeit, auch ein wenig Geld hinzuzufügen. Das Ganze funktioniert mit der Kreditkarte. Die Kosten hierfür sind aber überschaubar. Das will ich dir einmal kurz hier auch demonstrieren. Das heißt, wir gehen jetzt einfach mal in ein FLUX-Modell hier, nehmen mal FLUX und gehen mal hier in das Schnell-Modell rein. Und bei jedem Modell hier bei fal haben wir die Möglichkeit, das Ganze auch mal zu testen. Das heißt, wir haben hier ein einfaches Input-Feld, können hier auf Run klicken und in wenigen Sekunden haben wir hier ein Bild. Und wir haben hier unten auch eine Angabe über das Pricing. Also hier steht: Your request took 0.35 seconds und hat hier 0,003 Cent gekostet. Also für 1 $, das steht hier unten, kann ich jetzt 333 Bilder generieren. Das ist erstmal recht fair, damit kann man arbeiten. Je nach Modell hast du hier verschiedene Preise. Wir machen das aber hier jetzt erstmal mit dem FLUX Schnell-Modell, weil es ist, wie gesagt, schnell und auch günstig, das heißt hier super zum Testen und mal zum Adaptieren. Ja, und dann brauchst du im nächsten Schritt eine einen API-Key. Das machst du hier, indem du auf Home gehst, auf dann API Keys. Dann fügst du hier einen hinzu, sagst auf Add Key, gibst hier einen beliebigen Namen, sagst Create Key und dann bekommst du einen Schlüssel. Den bitte abspeichern, den brauchst du gleich noch. Und dann gehen wir hier in den Explore-Bereich zurück. Nehmen hier mal unser FLUX Schnell-Modell, was wir haben, also um Bilder zu generieren. Und dann hat hier jedes Modell oder jeder Anbieter hier einen API-Reiter. Und hier findest du alle Möglichkeiten oder alle Informationen, die du als Entwickler brauchst, um die Dinge zu migrieren bzw. zu installieren und zu nutzen in deiner App. Wir sind aber jetzt keine Entwickler unbedingt, wir können aber trotzdem hiermit arbeiten. Und wählen mal hier, weil wir das Ganze auf HTTP bzw. als als normale HTTP-Seite und Applikation hier gebaut haben, mal das hier aus: HTTP cURL. Und dann markieren wir hier das Ganze. Bis zum Ende markieren wir hier alles. So, dann kopieren wir hier alles. Und gehen wieder zurück in Cursor. Und hier sagen wir jetzt hier unten unserem Composer: Here is the API documentation. Please add it to the web app. Das heißt, wir geben jetzt hier Cursor und auch der KI quasi die komplette Dokumentation, wie man denn mit diesem Skript hier Bilder generieren könnte. Ja, und das funktioniert schon ganz gut. Das heißt, wir bekommen hier schon in wenigen Sekunden entsprechende Updates unseres Skriptes und wir bekommen hier auch eine kurze Anleitung. Also zum Beispiel: Remember, replace your API key with your actual key. Wir sagen hier 'cancel', wir gehen hier nochmal auf Reapply above. So. Wir haben hier: Replace your API key. So, das ist erstmal wichtig. Und: In production, move API calls to the backend server to protect your API key. Da komme ich gleich noch mal am Schluss noch mal drauf. Aber wir müssen jetzt hier unseren API-Key hinzufügen. Und da gibt es jetzt verschiedene Möglichkeiten. Entweder wir suchen jetzt hier nach 'your API key', das heißt, das können wir hier mal über die Suche machen, bekommen hier dann entsprechend auch den Part. Und können dann hier auch entsprechend unseren API-Key austauschen. Alternativ kannst du auch einfach der KI sagen: Hier ist mein API-Key und bitte tausch ihn doch mal aus. Ich füge jetzt mal meinen hier hinzu. Und genau, du siehst hier auch schon, hier gibt es auch schon eine entsprechende Meldung: Bitte sowas nicht im Frontend nutzen. Komme ich aber gleich noch mal zu. Und damit haben wir jetzt erstmal die Funktion am Laufen. Und das probieren wir jetzt einfach mal aus, vielleicht klappt's ja schon out of the box. Das heißt, wir gehen hier wieder in unseren Image-Editor, aktualisieren hier mal die Seite, die wir haben, und sagen jetzt hier noch mal: a dog. Und gucken einfach mal, was passiert. Und du siehst, wir haben innerhalb von ein paar Sekunden, ein paar Minuten jetzt hier einen KI-Bildgenerator gebaut, den wir jetzt mit Cursor auch noch weiter ausarbeiten können. Da Cursor ja weiß, wie welche Möglichkeiten diese Abfrage auch hat, können wir hiermit auch arbeiten. Wir haben zum Beispiel bei fal gesehen in der API, wir gehen mal hier noch mal in den Explore-Bereich zurück, in FLUX und noch mal in den Schnell-Bereich. Dann hast du hier gesehen, hier gibt es auch die Möglichkeit, verschiedene Größen beispielsweise. Also wir haben hier Image Size, das heißt, hier gibt's so verschiedene auch Größen. Das siehst du auch ganz gut, wenn du hier im Bereich Playground bist und hier beispielsweise bei More gehst. Es gibt verschiedene Settings, verschiedene Größen, das heißt, damit kannst du wahrscheinlich arbeiten. Und das weiß jetzt Cursor bei uns und das können wir jetzt auch nutzen, um unseren ja KI-Editor hier oder unseren KI-Bildgenerator noch ein bisschen zu pimpen. Das heißt, wir gehen wieder hier in unseren entsprechenden Cursor-Element rein und gehen jetzt hier wieder auf den Pane. Du siehst hier aber auch, manchmal hat Cursor bei mir jedenfalls die Eigenschaft, dass hier nicht immer der der entsprechende Composer angezeigt wird. Chat ist nochmal was anderes. Chat kann dir helfen, aber nicht Dinge direkt speichern oder ausführen. Das heißt, hier drückst du einfach mal Command I oder Steuerung I, dann öffnet sich der Composer. Das als kleiner Hinweis, falls du mal das Problem hast. So, und jetzt sagen wir: Please add an option to the front end so the user can change the size of the image. Und jetzt wird verstanden, dass in der Dokumentation ja darüber gesprochen wurde, dass es verschiedene Formate gibt, die siehst du hier oben auch schon. Das heißt, das wurde auch schon übernommen. Der Style wurde entsprechend angepasst und hier auch entsprechend in wenigen Sekunden unsere JavaScript-Datei. Wir springen wieder zurück in den in den Editor rein, aktualisieren noch mal und haben jetzt hier, tada, eine Möglichkeit, auch diese verschiedenen Bildformate auszuwählen. Wir nehmen jetzt hier mal als Beispiel Landscape, sagen: a dog. Und bekommen dann in wenigen Sekunden im besten Falle ein 16:9-Bild mit diesem Hund. Wir können hier auch noch mal das Ganze als Square HD machen und bekommen dann auch ein quadratisches Bild in wenigen Sekunden ausgespuckt. Und von hier aus kannst du natürlich jetzt total weiterspinnen und das so bauen, wie du möchtest. Wir können jetzt zum Beispiel auch sagen, das probieren wir einfach mal: Create a few style templates that the user can choose in the front end to help creating a amazing image in various styles. Also mein Ziel ist jetzt, dass Cursor mir noch ein Dropdown erzeugt, indem ich verschiedene Styles habe, die ich auswählen kann, die aber dann in den Prompt mit einfließen. Und das probieren wir jetzt einfach mal, indem wir hier das Ziel eingeben, was denn passieren soll. Und probieren wir da auch mal, ob Cursor das direkt im ersten Schritt hinbekommt. Auch hier: Erwarte nicht, dass alles immer perfekt ist. Manchmal kommen Fehler und es passieren Fehler. Dann kannst du Cursor diese Fehler auch wieder eingeben und sagen: Guck mal hier, das funktioniert nicht, hilf mir mal das zu fixen. Und innerhalb von ein paar Iterationen hast du in der Regel die meisten Probleme auch gelöst. So, wir sehen, hier hat sich auch einiges getan im Code und wir bekommen auch hier noch mal eine entsprechende Übersicht, was gemacht wurde. Es wurde ein Style-Template-Dropdown hinzugefügt. Das klingt erstmal gut. Wir gehen wieder in unsere App rein, aktualisieren das und wir haben hier einen Style. Also, noch mal probieren: a dog in Pixel Art, Landscape 4:3. So, mal gucken. Ja, perfekt! Wir nehmen jetzt hier noch mal Fantasy Art. Ja, das passt doch ziemlich gut. Last but not least nehmen wir mal noch mal Oil Painting. Und du siehst, innerhalb von ja jetzt knapp 15 Minuten habe ich einen funktionierenden KI-Bildgenerator gebaut, der jetzt auch so funktioniert und den ich jetzt nach weiterhin mit Text nach meinen Wünschen anpassen kann. Und du siehst, ich habe jetzt hier in diesem Beispiel auch keine einzige Zeile Code generiert bzw. Code angefasst. Also ich habe jetzt nichts geschrieben, Copy-Paste gemacht, sondern wirklich nur gesagt: Hier ist die Schnittstelle und das ist mein Wunsch, so soll es aussehen. Hier kann ich jetzt natürlich noch viel, viel weitergehen. Ich kann das Styling beeinflussen, ich kann die Features beeinflussen, ich kann noch andere APIs von fal beispielsweise oder von anderen Anbietern mit integrieren. Das Ganze ist wirklich ein iterativer Prozess und maßgeblich ist hier deine Idee, die du hast, dein dein ja dein deine Kreativität auch schon fast im Bereich Bauen von solchen kleinen Applikationen. Und damit ist wirklich jetzt hier nur der Anfang gemacht. Mit diesem KI-Coding kannst du sehr, sehr viel mehr noch machen und es startet einfach mit einem einfachen, kleinen Projekt. Von daher meine Empfehlung: Probier es mal aus, bau es einfach mal und dann wirst du auch merken, wie einfach das ist oder wo du vielleicht auch noch mal Herausforderungen hast, mit denen du dann auch mit Cursor arbeiten kannst. Und ganz, ganz wichtig hier: Das könntest du jetzt auch auf deine Webseite packen. Ja, das funktioniert so. Diesen ganzen Code kannst du auf deine Webseite packen, aber wir haben jetzt hier in dieser ersten Version erstmal nur unseren API-Key, also diesen Schlüssel, den wir erzeugt haben, direkt in den Quelltext gepackt. Hat den Nachteil: Wenn ich das jetzt so auf die Webseite packe, dann könnte jemand anders diesen Key nehmen und in in meinem Namen quasi Bilder erzeugen und auch auf meine Kosten. Das wollen wir natürlich nicht. Deswegen ist das jetzt erstmal hier eine Demo für interne Zwecke, um dir zu zeigen, wie du auch APIs entsprechend verknüpfen und anwenden kannst. Das später würden wir dann auch noch mal in einer anderen Demo zeigen, wie dann das auch noch mal mit einem Server-API-Key funktioniert, um das Ganze ein bisschen sicherer zu machen. Hier aber erstmal die Demo, wie du überhaupt sowas erstmal aufbaust. Und ja, beim Testen und beim Erstellen deines ersten eigenen KI-Bildgenerators wünsche ich dir ganz viel Spaß und wir sehen uns beim nächsten Snip. Ciao!