Zu den Hauptmerkmalen einer Webanwendung gehört die Interaktivität, d.h. die Fähigkeit zur Reaktion auf Nutzereingaben. Interaktives Verhalten setzt in der Regel die Kommunikation mit ein oder mehreren Servern voraus, von denen zur Laufzeit der Anwendung dynamisch die benötigten Daten abgerufen werden können (wie z.B. Suchergebnisse, aktuelle Mitteilungen, Resultate von Auswertungen, …). Für spezielle Aufgaben können Webentwickler:innen auf die Dienste öffentlicher Server zurückgreifen, die eine öffentliche Anwendungsprogrammierschnittstelle (API) zum Zugriff auf spezielle Daten (z.B. Wetterdaten) oder Funktionen zur Datenauswertung (z.B. Textanalyse) bereitstellen.
In diesem Beitrag soll gezeigt werden, wie Entwickler:innen durch die Einbindung einer öffentlichen API komplexe Verfahren der Künstlichen Intelligenz mit wenig Aufwand in ihrer Webanwendung nutzen können. Als Fallbeispiel dient eine sehr einfache Anwendung mit einem Bewertungsformular zu einem fiktiven Produkt oder einer Dienstleistung, welches vom Nutzer ausgefüllt und abgeschickt werden kann. Mit Hilfe einer API zur KI-basierten Stimmungsanalyse (= Sentiment Analyse) von TEXT2DATA soll ermittelt werden, ob es sich um eine positive oder negative Bewertung handelt.
TEXT2DATA (text2data.com) ist ein Anbieter von Software zur Textanalyse. Das Angebot umfasst u.a. Stimmungserkennung, Textklassifikation, Entitätenextraktion und Schlüsselwortanalyse für Texte in englischer Sprache. Für alle Verfahren stehen vortrainierte Modelle bereit, sodass sie sofort auf eigene Texte angewendet werden können. Des Weiteren unterstützt TEXT2DATA das Trainieren anwendungsspezifischer Modelle mit eigenen Beispieldaten, um die Verfahren besser an die eigenen Bedürfnisse anzupassen.
Im Folgenden soll die Funktion zur Stimmungserkennung bzw. Sentimentanalyse im Vordergrund stehen. Dabei wird für Texte oder einzelne Stichwörter ein Sentiment-Wert zwischen -1 und 1 berechnet, wobei
hindeuten. Für Texte werden automatisch die wichtigsten Schlüsselwörter identifiziert. Aus den Sentiment-Werten der einzelnen Schlüsselwörter wird dann ein Sentiment-Wert für die Gesamtstimmung des Textes berechnet.
Der Service kann über eine öffentliche API genutzt werden. Voraussetzung ist eine Registrierung auf der Webseite. Dabei wird ein individueller API-Schlüssel generiert, der bei allen Anfragen an die API mit angegeben werden muss. Für einen begrenzten Zeitraum kann die API kostenlos getestet werden.
Zur Analyse von Texten stellt TEXT2DATA eine öffentliche REST-API zur Verfügung. Mit dem HTTP POST-Request http://api.text2data.com/v3/analyze kann die Sentiment-Analyse für einen gegebenen Text angefordert werden. Der Text sowie weitere Angaben, wie z.B. der API-Schlüssel, müssen dem POST-Request als Parameter beigefügt werden. Als Response sendet der Server eine Reihe von Daten im JSON-Format zurück, die das Ergebnis der Analyse repräsentieren. Dazu gehören der "DocSentimentResultString“ und der "DocSentimentValue", die den Sentiment-Wert in Textform („negative“, „neutral“, „positive“) bzw. in numerischer Form (Wert zwischen -1 und 1) abbilden. Außerdem enthält die Antwort eine Liste mit Schlüsselwörtern und deren individuelle Sentiment-Auswertung sowie zahlreiche weitere Angaben.
Die folgende Abbildung zeigt die Architektur unserer Beispielanwendung. Auf der Client-Seite liegt eine einfache Webseite mit einem Bewertungsformular vor. Die Beispielanwendung beinhaltet außerdem einen eigenen Node.js-Server mit einer Route /feedback für GET-Anfragen zur Stimmungsanalyse. Beim Absenden des Formulars wird eine Anfrage an diese Route mit dem eingegebenen Text als Parameter erzeugt. Die Verarbeitung der Anfrage auf der Server-Seite löst wiederum eine entsprechende POST-Anfrage an TEXT2DATA aus, um die Sentiment-Auswertung zu erhalten. Von den Daten der Sentiment-Auswertung wird in unserem Beispiel lediglich der „DocSentimentResultString“ verwendet. In eine kurze JSON-Antwort verpackt, wird er von der feedback-Methode an den Client zurückgesendet. Dort kann daraus eine geeignete Meldung für den Nutzer generiert werden, wie z.B. „Thank you for your kind review!“ bei einem positiven Resultat.
Um die Server-Seite der Anwendung in der Umgebung Node.js zu programmieren, verwende ich das Framework express.js. Einen guten Ausgangspunkt bietet das „Hello World“-Beispiel auf der Website von express.js. Nachdem Sie die Anweisungen zum Anlegen des Projektes befolgt haben, können Sie den folgenden Code in eine Datei mit dem Namen „app.js“ einfügen:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello World!');
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
})Anschließend werden an dem Beispiel einige Ergänzungen vorgenommen:
Mit der Anweisung const axios = require('axios'); importieren wir die Bibliothek Axios. Sie enthält einfache JavaScript-Methoden, mit denen HTTP-Anfragen ausgelöst werden können. Auf der Client-Seite nutzen wir dafür die Methode fetch, die allerdings bei Node.js (noch) nicht zur Verfügung steht.
Mit der Anweisung app.use(express.static('public')); legen wir fest, dass der Ordner „public“ zur Bereitstellung statischer Dateien (z.B. HTML- und CSS-Dateien, Bilder,…) genutzt wird. Diese können auf der Client-Seite im Browser unter der Adresse des Servers abgerufen werden. Wir werden in diesem Ordner die Client-Webseite mit dem Feedbackformular ablegen.
Wir erweitern das Grundgerüst der Methode „app.get“. Über die Route /feedback soll das Ergebnis der Sentiment-Analyse für einen gegebenen Text abgerufen werden können. Der Text wird vom Client im Query-String der GET-Anfrage mitgesendet und ist über req.query.text abrufbar. Mit Hilfe der Axios-Bibliothek lösen wir eine POST-Anfrage an die TEXT2DATA-API aus. Als POST-Parameter senden wir dabei den Text und den API-Schlüssel (XXX muss entsprechend ersetzt werden) mit.
Das vollständige von der TEXT2DATA-API gesendete Antwort-Objekt ist über response.data erreichbar. In unserem Beispiel verwenden wir jedoch nur den „DocSentimentResultString“. Er wird mit der Anweisung res.json({result : response.data.DocSentimentResultString}); im JSON-Format als Antwort auf die GET-Anfrage zum Client zurückgesendet.
Das erweiterte Beispiel sieht dann wie folgt aus:
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('/feedback', (req, res) => {
axios.post('http://api.text2data.com/v3/analyze',
{
DocumentText: req.query.text,
PrivateKey: "XXX"
})
.then(response => {
res.json({result : response.data.DocSentimentResultString});
})
.catch(error => {
console.log(error);
});
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
});Sie können den Server mit der Anweisung node app.js aus dem Projektverzeichnis heraus in der Konsole starten. Der Server ist dann unter der Adresse http://localhost:3000 im Browser erreichbar. Um die Feedback-Methode zu testen, können Sie z.B. die Anfrage http://localhost:3000/feedback?text=super eingeben. In diesem Fall sollte die JSON-Antwort {"result":"positive"} zurückgegeben werden.
Für die Webseite kann das im folgenden Listing gezeigte Grundgerüst verwendet werden. Sie können den Code in eine Datei mit dem Namen „formular.html“ kopieren und im Ordner „public“ des Webservers abspeichern. Nach dem Starten des Webservers ist die Seite unter der Adresse http://localhost:3000/formular.html erreichbar.
<!DOCTYPE html>
<html>
<head>
<title>Sentiment API Test</title>
<style>
body{
margin: 20px;
}
#page_container{
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
textarea{
width: 95%;
height: 150px;
padding: 2.5%;
}
@media screen and (min-width: 600px) {
#page_container{
width:50%;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div id="page_container">
<h1>How did you like our service?</h1>
<p>We do our best every day and hope that you are satisfied with our products and services. So that we can continuously improve our services, we would like to ask you for a little feedback:</p>
<textarea id="feedback"></textarea>
<button id="submit_feedback">Submit</button>
<p id="output"></p>
</div>
<script></script>
</body>
</html>Der Nutzer kann seine Bewertung in die Textarea auf der Webseite eingeben. Das Verhalten beim Anklicken des „Submit“-Buttons muss noch implementiert werden. Dazu können Sie folgenden Code zwischen den script-Tags ergänzen:
function checkFeedback(){
var text = document.querySelector("#feedback").value;
if(text != ""){
fetch('http://localhost:3000/feedback?text='+text)
.then(response => response.json())
.then(data => {
document.querySelector("#output").innerHTML = data.result;
})
.catch(error => {
console.log(error);
});
}
}
document.querySelector("#submit_feedback").addEventListener("click", checkFeedback); Mit der Anweisung document.querySelector("#submit_feedback").addEventListener("click", checkFeedback); wird dafür gesorgt, dass beim Anklicken des Buttons die Funktion „checkFeedback“ aufgerufen wird. Die Eingabe des Nutzers wird dann mit document.querySelector("#feedback").value; aus der Textarea ausgelesen und in der Variable „text“ gespeichert. Im nächsten Schritt wird mit Hilfe der fetch-Methode eine GET-Anfrage an die Route /feedback des Node.js-Servers gesendet. Das vom Server zurückgesendete Antwortobjekt ist bei einer erfolgreich verlaufenden Anfrage in der Variable „data“ enthalten.
Das Resultat der Stimmungsanalyse, in unserem Fall die Ausgabe „positive“, „neutral“ oder „negative“ kann nun in die Webseite eingebettet werden. Im oberen Beispiel wird die Ausgabe ohne weitere Modifikationen direkt unter dem Formular eingeblendet. Noch sinnvoller ist es, einen geeigneten Auswertungstext für den Nutzer zu erzeugen. Dies kann z.B. wie folgt aussehen:
...
.then(data => {
var auswertung = " Thank you for your review!";
if(data.result == "positive"){
auswertung = " Thank you for your kind review!";
}else if(data.result == "negative"){
auswertung = " Thank you very much, we take your criticism seriously and are trying to improve our service!";
}
document.querySelector("#output").innerHTML = auswertung;
});
... Die vorliegende Beispielanwendung zeigt die grundlegenden Schritte beim Einbinden einer öffentlichen API in die eigene Webanwendung. Während es mittlerweile APIs für jeden erdenklichen Anwendungsfall gibt (vgl. https://rapidapi.com/ ), lohnt es sich insbesondere mitzuverfolgen, welche APIs im Bereich der Künstlichen Intelligenz auf den Markt gebracht werden. Mit KI-APIs kann eine Anwendung sehr schnell um sinnvolle Verfahren zur Daten- und Textauswertung ergänzt werden, die andernfalls nur mit großem Aufwand selbst implementiert werden könnten.
