CompareTexte und Quellcode direkt im Browser vergleichen

Ausgangslage

KI-gestützte Werkzeuge haben die Geschwindigkeit deutlich erhöht, mit der Texte, Konfigurationen und insbesondere Quellcode verändert werden können. Bestehender Code kann innerhalb weniger Sekunden erweitert, refaktoriert, korrigiert oder an neue Anforderungen angepasst werden.

Damit entsteht jedoch ein neues Problem: Die erzeugte Version sieht auf den ersten Blick häufig sehr ähnlich zur Ausgangsversion aus. Um tatsächlich nachvollziehen zu können, was ein KI-System verändert hat, müssen beide Versionen im Detail miteinander verglichen werden.

Bei längeren Texten oder Codeabschnitten ist ein manueller Vergleich schnell aufwendig. Einzelne Änderungen können zwischen vielen unveränderten Zeilen leicht übersehen werden. Besonders bei Quellcode können bereits minimale Unterschiede erhebliche Auswirkungen haben. Ein veränderter Parameter, eine zusätzliche Bedingung, ein entferntes Zeichen oder eine leicht angepasste Funktion kann das Verhalten einer Anwendung grundlegend verändern.

Versionsverwaltungssysteme wie Git bieten umfangreiche Möglichkeiten zur Darstellung solcher Änderungen. Sie setzen jedoch häufig voraus, dass sich die Inhalte bereits innerhalb eines Repositorys oder eines bestehenden Entwicklungsprozesses befinden.

Gerade beim schnellen Arbeiten mit KI ist dies nicht immer der Fall. Häufig besteht lediglich eine Ausgangsversion und eine von einem KI-System bearbeitete Version, die kurzfristig miteinander verglichen werden sollen.

Ein weiteres Thema ist der Umgang mit den zu vergleichenden Inhalten. Bei internem Quellcode, Konfigurationen oder projektbezogenen Texten soll vermieden werden, dass die Daten für einen einfachen Vergleich erneut an einen externen Dienst übertragen werden.

Benötigt wurde daher ein möglichst direktes Werkzeug: Ausgangsversion einfügen, bearbeitete Version einfügen und unmittelbar erkennen, was sich tatsächlich verändert hat.

Definierte Lösung

Mit Compare wurde eine statische Webanwendung entwickelt, in die zwei unterschiedliche Versionen eines Textes oder Quellcodes direkt eingefügt werden können. Die Anwendung vergleicht beide Inhalte automatisch und stellt die Unterschiede ähnlich zu einem klassischen Code-Diff dar. Hinzugefügte, entfernte und unveränderte Zeilen werden voneinander unterschieden und mit den jeweiligen Zeilennummern angezeigt. Dadurch eignet sich Compare beispielsweise für einen einfachen Arbeitsablauf mit KI-generiertem Code.

Ein bestehender Codeabschnitt wird zunächst in das erste Eingabefeld übernommen. Anschließend wird die durch ein KI-System bearbeitete Version in das zweite Feld eingefügt. Compare zeigt unmittelbar, welche Bereiche verändert, ergänzt oder entfernt wurden.

Der Vergleich endet dabei nicht auf Ebene vollständiger Zeilen. Wenn innerhalb einer Zeile lediglich einzelne Wörter, Parameter oder Codebestandteile verändert wurden, werden auch diese Unterschiede gezielt hervorgehoben.

Gerade bei Code ist dies relevant. Statt lediglich zu erkennen, dass sich eine Zeile verändert hat, lässt sich nachvollziehen, welcher Bestandteil innerhalb dieser Zeile angepasst wurde.

Für die Darstellung stehen zwei unterschiedliche Ansichten zur Verfügung.

In der geteilten Ansicht werden Ausgangsversion und neue Version direkt nebeneinander dargestellt. Dadurch lässt sich der ursprüngliche Inhalt unmittelbar mit der bearbeiteten Variante vergleichen.

Alternativ kann eine vereinte Ansicht verwendet werden. Dabei werden entfernte und hinzugefügte Inhalte innerhalb eines gemeinsamen Verlaufs angezeigt, ähnlich der Darstellung eines klassischen Git-Diffs.

Auf kleineren Bildschirmen wechselt Compare automatisch in die vereinte Darstellung.

Die Vergleichsrichtung kann jederzeit umgekehrt werden. Dadurch lässt sich schnell überprüfen, welche Änderungen für den Weg von Version A zu Version B beziehungsweise von Version B zu Version A relevant sind. Zusätzlich können die Inhalte beider Eingabefelder vollständig miteinander getauscht werden.

Eine Zusammenfassung zeigt die Anzahl der hinzugefügten, entfernten und unveränderten Zeilen. Der erzeugte Diff kann anschließend als Text in die Zwischenablage übernommen und beispielsweise für Dokumentationen, Tickets oder Entwicklungsnotizen verwendet werden.

Weitere Funktionen umfassen einen Beispielvergleich, optionalen Zeilenumbruch, die Anzeige der Anzahl von Zeilen und Zeichen sowie eine deutsche und englische Benutzeroberfläche. Zusätzlich stehen ein helles und ein dunkles Farbschema zur Verfügung.

Ergebnis & Mehrwert

Compare schafft eine einfache Möglichkeit, Änderungen nachvollziehbar zu machen, bevor eine neue Version eines Textes oder Codes übernommen wird. Gerade bei der Arbeit mit KI reduziert dies den Aufwand deutlich. Statt den vollständigen erzeugten Inhalt erneut Zeile für Zeile überprüfen zu müssen, werden die tatsächlich veränderten Bereiche direkt sichtbar.

Dadurch lässt sich beispielsweise schnell feststellen:

• welche Funktionen durch ein KI-System verändert wurden,

• ob neben der gewünschten Anpassung weitere Codebereiche verändert wurden,

• welche Parameter oder Bedingungen angepasst wurden,

• welche Inhalte entfernt oder ergänzt wurden,

• und ob eine Änderung tatsächlich so klein ist, wie sie zunächst erscheint.

Compare bewertet dabei nicht, ob eine Änderung fachlich oder technisch korrekt ist. Die Anwendung macht jedoch transparent, wo eine Änderung stattgefunden hat. Die anschließende Prüfung kann dadurch gezielt auf die relevanten Stellen konzentriert werden. Dies ist insbesondere bei Quellcode hilfreich, da kleine Veränderungen potenziell große Auswirkungen auf die Funktion einer Anwendung haben können. Neben KI-generiertem Code kann das Werkzeug auch für Konfigurationsdateien, SQL-Abfragen, Markdown-Dokumente, Prompts, technische Dokumentationen oder beliebige andere Textstände verwendet werden.

Ein weiterer wesentlicher Vorteil ist die vollständig lokale Verarbeitung. Die eingefügten Inhalte werden ausschließlich innerhalb des Browsers verarbeitet. Compare überträgt die beiden Versionen nicht an einen Backend-, Analyse- oder Datenbankserver. Der Webserver stellt lediglich die statischen Dateien der Anwendung bereit. Nach dem Laden der Webseite findet der eigentliche Vergleich auf dem Gerät des Nutzers statt. Die eingegebenen Daten verlassen den Browser nicht und werden durch Compare nicht serverseitig gespeichert oder verarbeitet.

Damit können auch interne oder sensible Inhalte miteinander verglichen werden, ohne für den Vergleich eine zusätzliche Kopie dieser Daten an einen externen Vergleichsdienst übertragen zu müssen. Das Ergebnis ist ein bewusst einfaches Werkzeug für einen sehr konkreten Anwendungsfall: zwei Versionen einfügen, Unterschiede erkennen und anschließend gezielt entscheiden, welche Änderungen übernommen werden sollen.

Technische Ausgestaltung

Compare wurde als vollständig clientseitige Webanwendung mit HTML, CSS und JavaScript entwickelt. Die Anwendung selbst wird als statische Webseite bereitgestellt und benötigt für die Verarbeitung der Vergleichsinhalte weder ein serverseitiges Backend noch eine Datenbank.

Der Server liefert ausschließlich die für die Anwendung benötigten statischen Dateien wie HTML, CSS und JavaScript aus. Sobald diese geladen wurden, laufen sämtliche Vergleichsoperationen lokal innerhalb des Browsers.

Die in Compare eingefügten Texte, Quellcodes und Konfigurationen werden nicht an den Server übertragen. Sie werden weder von der Hosting-Infrastruktur verarbeitet noch in einer Datenbank gespeichert oder serverseitig protokolliert. Die eigentlichen Vergleichsdaten verbleiben während der Nutzung auf dem Gerät des Nutzers. Die Vergleichslogik zerlegt beide Inhalte zunächst in einzelne Zeilen und ermittelt daraus unveränderte, hinzugefügte und entfernte Bereiche.

Zusammengehörende entfernte und hinzugefügte Zeilen werden anschließend für die geteilte Darstellung gegenübergestellt. Bei veränderten Zeilen erfolgt zusätzlich ein Vergleich innerhalb des jeweiligen Inhalts. Dadurch können nicht nur vollständig veränderte Zeilen, sondern auch einzelne geänderte Bestandteile innerhalb einer Zeile hervorgehoben werden. Unterschiedliche Zeilenumbrüche verschiedener Betriebssysteme werden vor dem Vergleich normalisiert. Dadurch werden beispielsweise Windows- und Unix-Zeilenumbrüche nicht fälschlicherweise als inhaltliche Veränderung interpretiert.

Die Berechnung wird, sofern vom Browser unterstützt, innerhalb eines Web Workers ausgeführt. Dadurch wird die Vergleichslogik von der Benutzeroberfläche getrennt ausgeführt. Insbesondere bei größeren Texten kann die Anwendung weiterhin auf Eingaben reagieren, während der Vergleich berechnet wird. Während der Eingabe wird der Vergleich mit einer kurzen Verzögerung neu ausgeführt. Dadurch aktualisiert sich die Darstellung automatisch, ohne bei jedem einzelnen Tastaturereignis unnötig mehrere Berechnungen gleichzeitig auszuführen.

Die eigentlichen Vergleichsinhalte werden bewusst nicht dauerhaft im Browser gespeichert. Lokal hinterlegt werden lediglich Einstellungen wie die gewählte Sprache und das bevorzugte Farbschema. Die eingefügten Texte oder Codeinhalte werden beim Schließen beziehungsweise Neuladen der Anwendung verworfen. Durch diese Architektur findet keine zusätzliche serverseitige Verarbeitung der zu vergleichenden Inhalte statt. Datenschutzrelevante Inhalte müssen für die Nutzung des Tools nicht an einen externen Vergleichsserver übertragen werden.

Für zentrale Bestandteile der Vergleichslogik bestehen automatisierte Tests. Dabei werden unter anderem identische Inhalte, hinzugefügte und entfernte Zeilen, Änderungen innerhalb einzelner Zeilen, unterschiedliche Zeilenumbrüche, die umgekehrte Vergleichsrichtung sowie größere Eingaben überprüft.

Die Veröffentlichung erfolgt automatisiert über GitHub Actions. Änderungen werden vor der Bereitstellung geprüft und die statischen Dateien anschließend veröffentlicht. Da Compare vollständig statisch betrieben werden kann, ist keine dauerhaft laufende Anwendungs- oder Datenbankinfrastruktur erforderlich. Zusätzlich kann die Anwendung containerisiert über Docker und einen Nginx-Webserver bereitgestellt werden.