Im Gemini-Chat eine spezialisierte Anwendung zur Textkorrektur mit „Hover-Tooltip“ entwickeln

 Freie Beitragsnutzung mit einem Unidigital-Zugang

Eine Textkorrektur lässt sich ganz normal in einem Chat vornehmen oder ich entwickle kurz meine eigene App, die mich bei der Fehlersuche unterstützt und dabei gezielt auf visuelle Elemente setzt. Beim Vibe Coding werden vorab im Prompt alle gewünschten Funktionen wie ein „Hover-Tooltip“ beschrieben.

Hier geht es zur App im Gemini-Chat

Als KI-Umgebung wird der Gemini-Chat von Google genutzt, der sich auch für komplexere Programmieraufgaben sehr gut kostenfrei verwenden lässt. Zuerst aktiviere ich in der Promptleiste über das Plus-Symbol die Canvas-Funktion. Anschließend gebe ich einen sehr detaillierten Prompt ein, der vorab mit einem Chatbot wie Gemini formuliert werden kann.

In der Anleitung wird alles ganz genau definiert, von den einzelnen Funktionen der App bis hin zum Design und der Anordnung der einzelnen Kategorien. So muss ich nachträglich weniger über Folgeprompts korrigieren. Hier eine kurze Zusammenfassung der zentralen Funktionen:

• Texteingabe – Text direkt eingeben, einfügen oder als TXT, DOCX oder PDF hochladen.
• Textprüfung – Prüfung auf Rechtschreibung, Grammatik, Zeichensetzung und Stil.
• Farbige Markierungen – Fehler werden je nach Kategorie farblich unterschiedlich markiert.
• Hover-Tooltip – Beim Darüberfahren und Antippen erscheint ein größeres Fenster mit Erklärung und Korrekturvorschlag. 
• Fehlerliste – Alle Fehler werden unter dem Text mit Erklärung & Verbesserung angezeigt.
• Korrigierter Text – Eine vollständig verbesserte Version des Textes wird separat angezeigt.
• Export – Korrigierten Text kopieren oder als TXT herunterladen.

Prompt: 

Erstelle eine moderne, responsive Webanwendung zur Korrektur deutscher Texte. Die Anwendung soll Rechtschreibung, Grammatik, Zeichensetzung und sprachlichen Stil überprüfen.

Funktionen:

Texteingabe

Im oberen Bereich befindet sich ein großer, übersichtlicher Texteditor.

Nutzer können Text einfügen, eintippen oder über eine Datei hochladen.

Unterstützte Dateiformate: TXT, DOCX und PDF.

Der aus einer Datei geladene Text soll vor der Analyse bearbeitet werden können.

Eine Schaltfläche „Text prüfen“ startet die Analyse.

Fehleranalyse und Markierungen

Zeige den Originaltext nach der Analyse weiterhin vollständig an.

Markiere fehlerhafte Wörter und Passagen mit dezenten Hintergrundfarben.

Verwende unterschiedliche Farben für die Fehlerkategorien:

Rot: Rechtschreibung

Orange: Grammatik

Blau: Zeichensetzung

Violett: Stil und Ausdruck

Ergänze eine gut sichtbare Legende für diese Farben.

Die Markierungen dürfen die Lesbarkeit des Textes nicht beeinträchtigen.

Fehlerdetails beim Überfahren

Wenn der Mauszeiger über einer markierten Passage liegt, öffnet sich vorübergehend ein kleines Pop-up-Fenster.

Das Pop-up zeigt:

Fehlerkategorie

kurze und verständliche Fehlererklärung

ursprüngliche Formulierung

vorgeschlagene Korrektur

optional eine bessere stilistische Alternative

Das Fenster verschwindet, sobald der Mauszeiger die Passage verlässt.

Ein Klick auf die Markierung hält das Fenster geöffnet.

Auf Smartphones und Tablets wird das Fenster durch Antippen geöffnet.

Fehlerliste

Unterhalb des analysierten Textes werden alle gefundenen Fehler übersichtlich aufgelistet.

Jeder Eintrag enthält:

Nummer des Fehlers

Fehlerkategorie

fehlerhafte Passage

Verbesserungsvorschlag

kurze Begründung

Beim Anklicken eines Eintrags soll die entsprechende Stelle im Originaltext hervorgehoben und in den sichtbaren Bereich gescrollt werden.

Die Fehlerliste soll nach Fehlerkategorie gefiltert werden können.

Zeige außerdem eine Zusammenfassung mit der Gesamtzahl der Fehler sowie der Anzahl pro Kategorie an.

Korrigierter Text

Ganz unten befindet sich ein eigener Bereich mit der Überschrift „Korrigierter Text“.

Dort wird der vollständig korrigierte Text angezeigt.

Formatierung, Absätze und Zeilenumbrüche des Originals sollen möglichst erhalten bleiben.

Neben dem Text befinden sich folgende Schaltflächen:

„Text kopieren“

„Als TXT herunterladen“

„Neue Prüfung“

Nach dem Kopieren erscheint kurz die Bestätigung „Text wurde kopiert“.

Bedienung und Design

Verwende ein ruhiges, professionelles und minimalistisches Design.

Gestalte die Anwendung barrierearm, mit gutem Farbkontrast, Tastaturbedienung und ergänzenden Symbolen, damit Fehlerkategorien nicht nur durch Farben unterschieden werden.

Die Benutzeroberfläche soll vollständig auf Deutsch sein.

Zeige während der Analyse eine Ladeanzeige mit dem Text „Text wird analysiert …“.

Berücksichtige außerdem leere Eingaben, nicht unterstützte Dateien, fehlgeschlagene Uploads und Analysefehler mit verständlichen Fehlermeldungen.

Ergänze eine Schaltfläche zum Löschen des eingegebenen Textes.

Verarbeite hochgeladene und eingefügte Texte vertraulich und speichere sie nicht dauerhaft.

Die Korrektur soll die ursprüngliche Aussage und den persönlichen Schreibstil möglichst bewahren. Inhaltliche Änderungen dürfen nur vorgenommen werden, wenn sie für eine sprachlich korrekte und verständliche Formulierung notwendig sind. Stilvorschläge müssen klar von objektiven Rechtschreib-, Grammatik- und Zeichensetzungsfehlern unterschieden werden. 

Nach wenigen Minuten hat das Sprachmodell Gemini die App mit dem Titel „LinguoKorrekt“ erstellt, die sich auf die Korrektur deutscher Texte fokussiert. Der nachfolgende Screenshot zeigt den Splitscreenmodus innerhalb des Gemini-Chats. Auf der linken Seite kann ich den Ausgangsprompt, die weitere Kommunikation mit Gemini sowie nachträgliche Anpassungen einsehen. Auf der rechten Seite ist die fertige App dargestellt.

Um in den übersichtlichen Vollbildmodus zu wechseln, kann ich oben rechts über das „Teilen-Icon“ einen „Share-Link“ generieren und diesen anschließend in einem neuen Fenster öffnen. Die App „LinguoKorrekt“ bietet die Möglichkeit, Text in ein Feld zu kopieren oder auch Dokumente wie DOCX- oder PDF-Dateien hochzuladen, die nach dem Upload hinsichtlich Rechtschreibung, Grammatik, Zeichensetzung und Stil korrigiert werden.

Über Gemini wurde ein fehlerhafter Beispieltext generiert und per Copy & Paste in das zentrale Feld mit dem Titel „Text zur Überprüfung eingeben“ eingefügt. Der Text enthält diverse Fehler, die sich verschiedenen Fehlerkategorien zuordnen lassen. Der Korrekturvorgang startet nach einem Klick auf den Button „Text überprüfen“ unten links..

Der Korrekturvorgang des Textes dauert nur wenige Momente. Anschließend werden die erfassten Fehler mit unterschiedlichen Farbmarkierungen angezeigt. So kann ich direkt erkennen, ob es sich zum Beispiel um einen Rechtschreib- oder Grammatikfehler handelt. „Parke“ ich die Maus auf einer Fehlerquelle oder klicke darauf, so öffnet sich über einen Hover-Tooltip vorübergehend ein kleines Fenster, in dem geeignete Korrekturvorschläge präsentiert werden.

Unterhalb des farblich markierten Textes sind zusätzlich alle Fehler einzeln aufgelistet. Ein tolles Feature ist die automatische Verlinkung zur jeweiligen Textpassage. Ich könnte mir auch zuerst ganz unten die einzelnen Fehler anschauen und direkt zur entsprechenden Stelle im Text springen, um geeignete Korrekturvorschläge einzusehen. Gerade solche Kleinigkeiten sind in einem normalen Chat technisch häufig nicht möglich. Ein Vibe Coding mit spezialisierten Apps wie „LinguoKorrekt“ ändert diesen Zustand und ermöglicht ein individuelleres Design. Super!