AI21 Labs Anleitung: Erstellung einer Textverbesserungsanwendung mit Next.js

Einführung in AI21 Studio

AI21 Studio ist eine innovative Plattform zur Entwicklung von KI, die darauf ausgelegt ist, die Kosten für Unternehmen, die Anwendungen zur Verarbeitung natürlicher Sprache (NLP) erstellen, trainieren und implementieren möchten, zu vereinfachen und zu senken. Das Studio bietet eine Reihe von Modellen und APIs, die Entwicklern helfen, maßgeschneiderte NLP-Lösungen zu erstellen, die ihren Bedürfnissen entsprechen.

So starten Sie mit AI21 Studio

Um mit AI21 Studio zu beginnen, müssen Sie einem einfachen Prozess folgen:

1. Erstellen Sie ein Konto auf der Website von AI21 Studio.
2. Melden Sie sich für eine kostenlose Testversion an, um Zugriff auf wichtige Funktionen zu erhalten.
3. Nach der Registrierung können Sie auf die Playground-Funktion zugreifen. Dieser interaktive Bereich ermöglicht es Ihnen, die verschiedenen Modelle und Funktionen der Plattform zu erkunden.
4. Während Sie im Playground experimentieren, machen Sie sich mit den Funktionen vertraut, bevor Sie in fortgeschrittene Projekte eintauchen.

Erhalt eines API-Schlüssels

Im Laufe der Nutzung benötigen Sie einen API-Schlüssel, den Sie auf der Plattform generieren können. Dieser Schlüssel ermöglicht es Ihnen, Anfragen an verschiedene API-Endpunkte zu stellen, einschließlich der Textverbesserungs-API.

Überblick über die Textverbesserungs-API

Die Textverbesserungs-API nutzt die hochmoderne Empfehlungs-Engine von AI21 Labs, die Anwendungen wie Wordtune antreibt. Diese API ist speziell optimiert, um effizient hochwertige Textverbesserungen zu generieren.

Um diese Funktion zu erkunden, können Sie die API über die AI21 Labs Dokumentation testen.

Erstellung Ihres Next.js-Projekts

Um Ihr Projekt zu starten, folgen Sie diesen Schritten:

npx create-next-app@latest text-improver --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Einrichtung der API-Route

Speichern Sie dann Ihren API-Schlüssel in einer .env.local-Datei im Stammverzeichnis Ihres Projekts mit dem Schlüssel API_KEY. Erstellen Sie einen neuen Ordner api im pages-Verzeichnis und fügen Sie eine Datei mit dem Namen improve.js hinzu. Diese Datei wird die Kommunikation zwischen dem Frontend und dem Backend regeln.

Ihr improve.js-Code verwendet die Fetch-Methode, um die API über eine POST-Anforderung aufzurufen, wobei der zu verbessernde Text zusammen mit einem Array gesendet wird, das die Arten von Verbesserungen identifiziert, die Sie wünschen.

Front-End erstellen

Erstellen Sie als Nächstes einen neuen Ordner namens components und darin eine Datei mit dem Namen TextImprovementInput.jsx.

• Verwenden Sie den useState-Hook, um den Standardtext, den zu verbessernden Text und die von der API zurückgegebenen Verbesserungen zu speichern.

Ihr Frontend wird ein gesteuertes Element mit einem Textfeld und einem Button enthalten. Wenn Sie auf den Button klicken, wird die API-Anfrage ausgelöst, um Verbesserungen abzurufen.

Implementierung des Button-Klickhandlers

Nachdem Sie Ihre Komponenten definiert haben, fügen Sie eine handleButtonClick-Funktion hinzu, um die API-Anfrage zu verarbeiten, wann immer der Button geklickt wird.

Anzeige von Verbesserungen

Mit den in einem Array erhaltenen Verbesserungen müssen Sie diese effektiv anzeigen. Verwenden Sie den useEffect-Hook, um Daten zu manipulieren und ein neues Array zu erstellen, das den Text und alle empfohlenen Änderungen speichert.

Durchlaufen Sie das Text-Array in Ihrer Rückgabemethode, um jedes Element entsprechend darzustellen.

Erstellung zusätzlicher Komponenten

Um die Interaktion mit dem Benutzer zu verbessern:

• Erstellen Sie eine Texts.jsx-Komponente, um den Text zusammen mit einem Index anzuzeigen, und integrieren Sie ein Modal, um Vorschläge anzuzeigen.
• Fügen Sie eine Callback-Funktion hinzu, um Textänderungen basierend auf Benutzerauswahlen zu verarbeiten.
• Entwickeln Sie eine Modal.jsx-Komponente, um vorgeschlagene Verbesserungen dynamisch anzuzeigen.

Fazit

Wenn Sie diese Schritte befolgen, werden Sie erfolgreich eine Textverbesserungsanwendung mit AI21 Studio erstellen. Sie werden praktische Erfahrungen mit der API-Integration sammeln und Ihr Verständnis von React und Next.js vertiefen.

Für weitere Entwicklungen erkunden Sie die umfassende Dokumentation von AI21 Studio.