Eine Abbildung in eine interaktive Anwendung übertragen und als HTML-Datei im Browser öffnen
Freie Nutzung von Text & Abbildungen & Video mit einem Unidigital-Zugang
Es kann vorkommen, dass gut gestaltete Infografiken mit zu viel Text versehen sind und dadurch etwas unübersichtlich wahrgenommen werden. Dies lässt sich über einen kleinen „Umweg“ wie den Gemini-Chat ändern, um die Abbildung anschließend als HTML-Datei in einem Browser interaktiv ausführen zu können. Als Orientierung für die KI dienen hierbei die in der Grafik enthaltenen Icons.
Wie in der Bildüberschrift erkennbar, thematisiert die KI-generierten Infografik Hochrisiko-KIs im Rahmen des europäischen KI-Regelwerks EU AI Act. Die Abbildung ist hochwertig, aber durch die Masse an Text auch schwerer zu erfassen. Für mehr Übersichtlichkeit und ein gezieltes Aufrufen des Textes soll dieser nach einem Icon-Klick vorübergehend in einem kleinen Fenster geöffnet und wieder geschlossen werden.
Die Grafik habe ich im Gemini-Chat über das Plus-Symbol und die Upload-Funktion hochgeladen und in die Promptleiste eine passende Anweisung eingefügt. Zusätzlich muss über das Plus-Symbol die Canvas-Funktion aktiviert werden. Erst dann beginnt der Entwicklungsprozess, den das Sprachmodell Gemini ausführt.
Prompt (Gemini):
Übertrage den Upload in eine interaktive Grafik mit klickbaren Elementen. Ich möchte, dass ausschließlich das Icon und daneben immer nur eine Bezeichnung angezeigt werden. Klicke ich auf ein Icon, so öffnet sich der gesamte Text, wie im Upload dargestellt. Füge sonst nichts hinzu und fokussiere dich nur auf das Bild (Upload) und die Umwandlung in eine interaktive Darstellung. Nach wenigen Minuten ist der Programmiervorgang im Vibe-Coding-Stil beendet. Auf der rechten Seite ist direkt erkennbar, dass die Abbildung mit wesentlich weniger Text erfolgreich übertragen wurde. Auf der linken Seite kann ich Folgeprompts setzen, falls ein Button nicht funktioniert.
Klicke ich auf eines der Icons, öffnet sich ein neues Fenster und ich kann den beschreibenden Text jederzeit eins zu eins nachlesen. Die Aufteilung der drei Themenbereiche, die in der Grafik auf der linken Seite, in der Mitte und rechts dargestellt werden, ist ungefähr gleich geblieben. Dies hilft bei der ersten Orientierung.
Oben rechts im Gemini-Chat ist ein kleines Download-Symbol verfügbar, über das ich die interaktive Anwendung als HTML-Datei auf meinen Rechner herunterladen kann. Öffne ich die Datei, wird sie im Browserfenster angezeigt und lässt sich dort ebenfalls problemlos durchklicken.
Insgesamt war die Übertragung der KI-generierten Abbildung in eine interaktive Anwendung mit anschließendem HTML-Download und einem Öffnen im Internetbrowser erfolgreich. Dies ist ein toller Workflow, um Grafiken mal ganz anders zu visualisieren. Gerne kurz testen! Viel Erfolg!
Autor
