Aus einem Bild-Interface eine interaktive Anwendung im AI Studio generieren
Das Google AI Studio eignet sich gut, um kostenlos interaktive Anwendungen im Vibe-Coding-Stil programmieren zu lassen. Hier kommt das Sprachmodell Gemini zum Einsatz. Im Beispiel wurde vorab über die Bild-KI Nano Banana 2 ein Interface für eine App generiert und über einen Upload in das AI Studio übertragen.
Die untere Abbildung zeigt das über Nano Banana erstellte Interface im Format 4:3. Es geht um die Darstellung der Lichtbrechung mithilfe eines Prismas, um zu zeigen, dass weißes (normales) Licht aus einem sehr breiten Spektrum an Farben besteht. Auf der rechten Seite sollen die zentralen Parameter wie „Brechungsindex“, „Prismenwinkel“ und „Eintrittswinkel“ manuell angepasst werden.
BILDPROMPT (Nano Banana 2): Erstelle ein Interface für eine interaktive Anwendung, die die Funktionsweise eines Prismas erläutert.
Wichtigste Funktionen:
1) Eintrittswinkel
2) Brechungsindex
3) Prismenwinkel
Format 4:3Die Bild-KI Nano Banana 2 wurde kostenlos im Gemini-Chat verwendet. Diese kann sehr zuverlässig solche Oberflächen für eine geplante App oder Ähnliches ausgeben. Je nach Use Case kann es sinnvoll sein, den Prompt weitaus präziser zu formulieren und ganz genau festzulegen, wo sich welcher Button oder Schieberegler befinden soll. Es gibt vielfältige Möglichkeiten der Visualisierung.
Um aus dem Bild eine Simulation zu entwickeln, klickt man auf der Startseite im AI Studio links in der Navigation auf „New app“ und anschließend wird die Promptleiste mit der Upload-Funktion angezeigt. Im folgenden Screenshot habe ich das Bild hochgeladen, den Prompt gesetzt und rechts unten über einen Klick auf den Button „Build“ bestätigt. Nun wird die Anwendung von Gemini programmiert.
PROMPT (AI Studio): Das Bild (Upload) zeigt das Interface einer Anwendung, um die Funktionsweise eines Prismas zu erläutern. Setze die Anwendung genauso um, aber ohne die Beschriftungen am Prisma. Achte darauf, dass das Farbspektrum hinten auf der Leinwand gleichmäßig dargestellt wird.Bevor die App programmiert wird, gibt es die Möglichkeit, aus unterschiedlichen Designs auszuwählen, um unter anderem festzulegen, wie die Anwendung hinsichtlich von Settings etc. aufgeteilt ist. Es lohnt sich, die einzelnen Vorschläge kurz durchzugehen und rechts oberhalb des Bildes über den Button „Select this Design“ dieses auszuwählen.
Während des Programmierens lässt sich oben in der Navigation über den Button „Code“ jederzeit der KI-generierte Programmiercode einsehen. Über einen Klick auf „Preview“ geht es wieder zurück zum Vorschaumodus, in dem ich dann die Simulation abspielen kann. Es lässt sich gut erkennen, dass Gemini nicht nur eine simple Datei ausgibt, sondern eine ganze Ordnerstruktur aufbaut.
Nach wenigen Minuten ist die App „Prismen-Simulation“ im AI Studio fertig erstellt und lässt sich im Split-Screen-Modus auf der rechten Seite testen. Oben rechts ist ein grüner Button dargestellt, über den der Lichtstrahl an- und auch ausgeschaltet werden kann. Darunter die vorab im Bild definierten Parameter, deren Werte sich über Schieberegler ändern lassen. Der Bild-Upload wurde designtechnisch und funktional insgesamt gut in das interaktive App-Interface transformiert.
Nun kann man mit den Schiebereglern bestimmte Szenarien im Rahmen der Lichtbrechung in einem Prisma und der auftretenden Farbfächerung durchspielen. Der untere Screenshot zeigt den maximalen Winkel mit bestmöglicher Darstellung der einzelnen Farben, die nach einer Brechung aus einem weißen Lichtstrahl entstehen. Sehr cool!
In der Sidebar wird rechts unten der Hinweis auf eine Totalreflexion eingeblendet, bei der Lichtstrahl an der Grenzfläche vollständig reflektiert; je nach Modell kann dadurch kein Austrittsspektrum mehr sichtbar sein Dies lässt sich alles mit der „Prisma-Simulation“ im Vibe-Coding-Stil Schritt für Schritt durchgehen. Viel Erfolg!
Autor
