ChatGPT Widget mit Javascript programmiert. Bei diesem kann mann Prompts eingeben welche von ChatGPT beantwortet werden,

ChatGPT ist ein großes Sprachmodell, das von OpenAI entwickelt wurde. Es ist eine künstliche Intelligenz, die auf der Basis von Deep Learning trainiert wurde und in der Lage ist, natürliche Sprache zu verstehen und zu generieren. ChatGPT ist darauf ausgelegt, menschenähnliche Konversationen zu führen und auf Fragen zu antworten, indem es das Wissen aus einer Vielzahl von Quellen und Erfahrungen verwendet, die ihm während des Trainings vermittelt wurden. Es kann in verschiedenen Anwendungen eingesetzt werden, wie zum Beispiel in Chatbots, virtuellen Assistenten und anderen intelligenten Systemen, die auf der Verarbeitung natürlicher Sprache basieren.

Ein Widget ist ein kleines Softwareprogramm oder eine Komponente, die eine spezielle Funktion oder eine Gruppe von Funktionen innerhalb einer Anwendung bereitstellt. Widgets werden oft in grafischen Benutzeroberflächen verwendet, um Benutzern eine schnelle und einfache Möglichkeit zu bieten, auf häufig verwendete Funktionen oder Informationen zuzugreifen.

Widgets können in einer Vielzahl von Anwendungen verwendet werden, einschließlich Desktop- und Mobilbetriebssystemen, Webanwendungen und anderen Softwareanwendungen. Beispiele für Widgets sind z.B. Wetteranwendungen, Uhrzeit- und Datumsanzeiger, Kalender, Musikplayer und soziale Medien-Feeds.

Widgets können in der Regel einfach in Anwendungen integriert werden und können oft auch an die spezifischen Anforderungen des Benutzers angepasst werden. Einige Widgets können auch von Drittanbietern erstellt werden und als Erweiterungen für bestimmte Anwendungen oder Betriebssysteme zur Verfügung gestellt werden.

JavaScript ist eine der weltweit am häufigsten verwendeten Programmiersprachen, die hauptsächlich für die Erstellung von interaktiven Webanwendungen und dynamischen Inhalten verwendet wird. Es ist eine clientseitige Skriptsprache, d.h. sie wird im Webbrowser des Benutzers ausgeführt und ermöglicht die Manipulation von HTML- und CSS-Elementen sowie die Interaktion mit dem Benutzer.

JavaScript wurde in den 1990er Jahren von Netscape entwickelt und hat sich seither ständig weiterentwickelt. Heutzutage wird JavaScript in vielen verschiedenen Anwendungsbereichen eingesetzt, darunter auch serverseitige Entwicklung mit Node.js.

Zu den Funktionen von JavaScript gehören die Möglichkeit, die Benutzeroberfläche von Webanwendungen dynamisch zu ändern, Ereignisse wie Mausklicks und Tastendrücke zu verarbeiten, Daten von Servern abzurufen und zu verarbeiten, Animationen und Effekte zu erstellen, Formularvalidierung durchzuführen und vieles mehr.

JavaScript ist eine Skriptsprache, was bedeutet, dass der Quellcode direkt in den Webbrowser geladen und ausgeführt wird. Dadurch wird die Notwendigkeit für den Benutzer eliminiert, zusätzliche Software zu installieren oder herunterzuladen, um die Anwendung auszuführen.

Unser ChatGPT Javascript WIdget. Das Bckend wird benötigt wekches sich mit der ChatGPT API verbindet. Du kannst nicht vonm Javascript Code direkt deine API aufrufen, da sonst andere Leute deinen API-Key hätten. Deswegen brauchst du einen Webserver welche Anfragen an die Open AI API sendet.

Der Code ist auf Github https://github.com/Softoft/Javascript-ChatGPT-Widget

Wir haben Bootstrap für das Styling verwendet, daher müssen folgende Eledmente im HTML head eingefügt werden:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

‍

In der HTML Datei muss folgender Code eingefügt werden:

    <div id="chatgptWidget"></div>
    <script src="chatgpt-widget.js"></script>
    <script>
        insertChatGPTWidget("chatgptWidget", "http://127.0.0.1:8000/")
    </script>

Die Funktion insertChatGPTWidget nimmt als Parameter die Id des Div Elements in welches das ChatWidget eingefügt wird. Als 2.Parameter muss eine URL angegeben welches die Backend Adresse ist, welche den CHatGPT Prompt zurückgibt. Das Script sendet einen Request an das Backend mit dem prompt Query Parameter und schreibt die Antwort des Backends in das ChatWidget.

‍

Der Inhalt der Datei chatgpt-widget.js ist:

    // noinspection HtmlUnknownTarget
const chatGPTWidgetHTMLRaw = `
<div class="mx-auto pt-5" style="width:400px">
    <div class="row g-3 align-items-center">
        <div class="col-auto">
            <input id="prompt" name="prompt" type="text" class="form-control" placeholder="Insert Prompt">
        </div>
        <div class="col-auto">
            <button id="submit" onclick="sendRequest('$$backendAddress$$')" class="btn btn-primary">Send</button>
        </div>
    </div>
    <div class="mt-3">
        ChatGPT Completion
        <p id="chatgpt-completion"></p>
    </div>
</div>
`

function sendRequest(backendAddress){
    let prompt = document.getElementById("prompt").value;
    let chatGptCompletion = document.getElementById("chatgpt-completion");
    let cleanPrompt = prompt.replace("<", "").replace(">", "")
    let xhr = new XMLHttpRequest();
    xhr.open("GET", backendAddress + "?prompt="+ cleanPrompt)
    xhr.onload = () =>{
        chatGptCompletion.innerText = xhr.responseText
    }
    xhr.send()
}
function getChatFormHTML(backendAddress) {
    return chatGPTWidgetHTMLRaw.replace("$$backendAddress$$", backendAddress)
}

function insertChatGPTWidget(idDivContainer, backendAddress) {
    if (document.getElementById(idDivContainer) == null) {
        throw Error("There is no element with id: " + idDivContainer);
    }
    const divContainer = document.getElementById(idDivContainer);
    divContainer.innerHTML = getChatFormHTML(backendAddress)
}

‍

Das ganze sieht folgendermaßen aus: