Eine maßgeschneiderte App zur Analyse von Dokumenten einsetzen
Freie Nutzung von Text & Abbildungen & Audio & Video mit einem Unidigital-Zugang
Vibe Coding bietet vielfältige Möglichkeiten, über Plattformen wie dem AI Studio, den Gemini-Chat, ChatGPT und Claude ganz eigene Anwendungen zu entwickeln. Im folgenden Beitrag wird im AI Studio demonstriert, wie ich nach einem Upload ein Dokument (PDF) auf unterschiedliche Weise analysieren und verstehen kann. Das funktioniert in einem bestimmten Umfang auch gut kostenfrei.
Text-2-Speech mit EleveneLabs in „ElevenCreative“ generiert. Audio-Skript vorab nach Video-Upload mit ChatGPT erstellt.
Der anfängliche Prompt, auf dem die App-Erstellung basiert, wurde sehr detailliert mithilfe von ChatGPT formuliert. Diesen Prompt habe ich eins zu eins in die Promptleiste vom AI Studios eingefügt. Zusätzlich wird ein beispielhaftes Dokument hochgeladen, in dem es um die Unterscheidung zwischen allgemeiner künstlicher Intelligenz (AGI) und generativer künstlichen Intelligenz (GenAI) geht.
PROMPT:
Entwickle eine moderne, responsive Webanwendung, die eine hochgeladene Datei automatisch analysiert und deren Inhalte in vier interaktive Lernbereiche umwandelt.
Grundfunktion
Der Nutzer kann zu Beginn eine Datei hochladen, zum Beispiel ein PDF, eine Präsentation oder ein Textdokument. Nach dem Upload soll die Anwendung den Inhalt automatisch auslesen, das zentrale Thema erkennen, relevante Texte und Abbildungen extrahieren und daraus interaktive Lerninhalte erzeugen.
Nach der Verarbeitung wird der Bildschirm in vier gleich große Bereiche aufgeteilt. Jeder Bereich nimmt ein Viertel des Bildschirms ein und enthält ein gut erkennbares Icon sowie eine kurze Beschriftung.
1. Bereich oben links: Chat
Im oberen linken Viertel befindet sich ein Sprachblasen-Icon mit der Beschriftung „Chat“.
Beim Anklicken öffnet sich ein Chatfenster. Der Nutzer kann dort Fragen zum hochgeladenen Inhalt stellen oder sich das Thema erklären lassen.
Der Chat soll ausschließlich auf Grundlage des hochgeladenen Dokuments antworten. Mögliche Funktionen:
* Thema einfach erklären
* Begriffe definieren
* Inhalte zusammenfassen
* Beispiele geben
* Rückfragen beantworten
* Antworten an das gewünschte Wissensniveau anpassen
2. Bereich oben rechts: Quiz
Im oberen rechten Viertel befindet sich ein Fragezeichen-Icon mit der Beschriftung „Quiz“.
Beim Anklicken öffnet sich ein Multiple-Choice-Quiz zum Thema des Uploads.
Das Quiz soll folgende Eigenschaften haben:
* Pro Quizrunde werden immer vier Fragen angezeigt.
* Jede Frage besitzt vier Antwortmöglichkeiten.
* Es gibt mindestens eine richtige Antwort pro Frage.
* Nach der Auswahl erhält der Nutzer sofort eine Rückmeldung.
* Die richtige Lösung wird erklärt.
* Am Ende wird die erreichte Punktzahl angezeigt.
* Der Nutzer kann anschließend vier neue Fragen generieren lassen.
* Die Fragen sollen automatisch aus dem Inhalt des hochgeladenen Dokuments erstellt werden.
3. Bereich unten links: Abbildungen
Im unteren linken Viertel befindet sich ein Bild-Icon mit der Beschriftung „Abbildungen“.
Beim Anklicken öffnet sich eine Galerie. In dieser Galerie werden alle Bilder, Grafiken, Tabellen, Diagramme und sonstigen Abbildungen angezeigt, die aus dem hochgeladenen Dokument extrahiert wurden.
Die Galerie soll folgende Funktionen enthalten:
* Vorschaubilder aller Abbildungen
* Vergrößerte Einzelansicht
* Vor- und Zurücknavigation
* Bildunterschriften, sofern vorhanden
* Angabe der ursprünglichen Seite oder Position im Dokument
* Automatisch generierte Beschreibung der Abbildung
* Möglichkeit, Fragen zu einer ausgewählten Abbildung zu stellen
4. Bereich unten rechts: Simulation
Im unteren rechten Viertel befindet sich ein Play-Icon mit der Beschriftung „Simulation“.
Beim Anklicken öffnet sich eine interaktive, erklärende Simulation zum Thema des hochgeladenen Dokuments.
Die Simulation soll zentrale Abläufe, Zusammenhänge oder Prozesse aus dem Dokument visuell darstellen. Sie kann beispielsweise Animationen, beschriftete Elemente, Prozessschritte, Regler, Schaltflächen oder interaktive Szenarien enthalten.
Die Simulation soll:
* schrittweise durch das Thema führen,
* wichtige Zusammenhänge verständlich darstellen,
* kurze Erklärtexte einblenden,
* eine Start-, Pause- und Neustartfunktion besitzen,
* an das jeweilige Thema des Uploads angepasst werden,
* auch dann eine passende interaktive Darstellung erzeugen, wenn das Dokument keinen konkreten Prozess enthält.
Falls keine echte Simulation sinnvoll ist, soll stattdessen eine animierte Schritt-für-Schritt-Erklärung oder eine interaktive Concept-Map erstellt werden.
Benutzeroberfläche
Die Startansicht soll übersichtlich, modern und intuitiv gestaltet sein.
Anforderungen an das Design:
* vier gleich große Kacheln in einem 2×2-Raster,
* große, leicht verständliche Icons,
* kurze Beschriftungen,
* dezente Animationen beim Überfahren und Anklicken,
* responsive Darstellung für Desktop, Tablet und Smartphone,
* gut lesbare Schrift,
* klare Kontraste,
* barrierearme Bedienung,
* Möglichkeit, jederzeit zur Vier-Kachel-Übersicht zurückzukehren.
Auf Smartphones dürfen die vier Bereiche untereinander angeordnet werden.
Verarbeitung des Uploads
Nach dem Datei-Upload soll ein sichtbarer Verarbeitungsstatus angezeigt werden, zum Beispiel:
* Datei wird hochgeladen.
* Text wird analysiert.
* Abbildungen werden extrahiert.
* Quizfragen werden erstellt.
* Simulation wird vorbereitet.
* Lernumgebung ist fertig.
Die Anwendung soll automatisch folgende Informationen erzeugen:
* Titel des Themas
* kurze Zusammenfassung
* zentrale Begriffe
* mögliche Fragen und Antworten
* Multiple-Choice-Fragen
* Liste aller Abbildungen
* Beschreibungen der Abbildungen
* geeignete Inhalte für die Simulation
Technische Anforderungen
Erstelle eine vollständige, funktionsfähige Anwendung mit Frontend und Backend.
Achte auf:
* saubere und modulare Architektur,
* sichere Verarbeitung von Uploads,
* verständliche Fehlermeldungen,
* Ladeanzeigen während der Verarbeitung,
* Unterstützung gängiger Dateiformate,
* Speicherung des Bearbeitungsstatus,
* Trennung zwischen Dokumentanalyse, Chat, Quiz, Galerie und Simulation,
* Schutz vor nicht unterstützten oder beschädigten Dateien,
* gute Erweiterbarkeit für zukünftige Funktionen.
Die Anwendung soll zunächst mit Beispieldaten funktionieren können, aber so aufgebaut sein, dass später eine KI-Schnittstelle zur Dokumentanalyse und Inhaltserstellung angebunden werden kann.
Erstelle außerdem eine beispielhafte Ansicht mit einem bereits verarbeiteten Upload, damit alle vier Bereiche direkt getestet werden können.
Nachdem die App im AI Studio nach wenigen Minuten fertig generiert wurde, kann ich auf der linken Seite den Chat für Folgeprompts und gezielte Anpassungen verwenden. Mit einem Klick auf den grünen Button „Beispieldokument laden“ starte ich die Anwendung. Oberhalb der App ist ein kleines Symbol mit der Bezeichnung „Fullscreen“ verfügbar, um in den Vollbildmodus zu wechseln.
Dies sind die vier wesentlichen Funktionen der App „Lernplattform für Dokumente“ :
1) Mit dem Dokumenteninhalt chatten, um diesen besser zu verstehen
2) Ein Quiz mit Multiple-Choice-Fragen starten, um den Wissensstand zu prüfen
3) Abbildungen im Dokument einsehen und gezielt mit diesen chatten
4) Eine Simulation starten, um Zusammenhänge interaktiv zu veranschaulichen
Zuerst klicke ich auf die Kachel oben links mit der allgemeinen Chat-Funktion. Hier kommt das Sprachmodell Gemini zum Einsatz. Oben rechts lassen sich die Schwierigkeitsgrade „Einsteiger“, „Standard“ und „Experte“ auswählen und jederzeit wechseln, je nachdem wie gut ein Thema verstanden wird. Ich gebe den Prompt ***Erkläre kurz den Unterschied in Stichpunkten*** ein und erhalte direkt eine geeignete Übersicht.
Um mein Wissen zu dem Thema „AGI & GenAI“ zu testen, starte ich anschließend ein Multiple-Choice-Quiz mit vier Auswahlmöglichkeiten. Unten über die Schaltfläche „Nächste Frage“ lassen sich weitere Fragen generieren, deren Anzahl ich beliebig festlegen kann. Zum Beispiel ein Quiz mit 10, 50 oder genau 100 Fragen. Dies ließe sich so präzise vorab im Ausgangsprompt formulieren.
Das KI-generierte PDF (Upload) enthält neben Text auch diverse Abbildungen, die die Unterschiede der beiden KI-Technologien verdeutlichen sollen. Um die Grafiken einzusehen, verwende ich in der App die Kachel unten links. Über eine Navigation lassen sich alle Infografiken durchklicken. Auf der rechten Seite befindet sich zusätzlich ein Chat, um mit einer Abbildung chatten zu können und sich diese mithilfe von Gemini genauer erklären zu lassen.
Zum Schluss teste ich im AI Studio die vierte Funktion der Anwendung „Lernplattform für Dokumente“ und möchte jetzt die gesamte Thematik im Rahmen einer Prozesssimulation interaktiv verfolgen, um bestimmte Zusammenhänge besser erkennen zu können. Die Simulation startet bei generativer KI und demonstriert Schritt für Schritt, welche Aufgaben bis hin zur allgemeinen Intelligenz (AGI) ausgeführt werden können. Über den Button unten lässt sich das Szenario stoppen und wieder starten.
Es gibt insgesamt viele Möglichkeiten, eine App zu entwickeln, die auf die eigenen Bedürfnisse optimal zugeschnitten ist. Lerne ich lieber mit interaktiven Elementen, einem Quiz oder sehr gezielt über Abbildungen? All dies kann ich selbst über ein individuelles Vibe-Coding und eine hochwertige KI-Umgebung mit einem Sprachmodell wie Gemini festlegen und jederzeit über Folgeprompt und in mehreren Versionen anpassen. Gerne testen 😉
Autor
