let verlauf, buttons, verlaufLoeschen, verlaufKopieren, input, result, error; let prompt = ""; let letzteAntwort = ""; let chatMessages = []; window.onload = function () { verlauf = document.querySelector(".openai #verlauf"); buttons = document.querySelector(".openai #buttons"); verlaufLoeschen = document.querySelector(".openai #buttons #verlaufLoeschen"); verlaufKopieren = document.querySelector(".openai #buttons #verlaufKopieren"); input = document.querySelector(".openai #frage"); result = document.querySelector(".openai #result"); error = document.querySelector(".openai #error"); if(getQueryVariable("frage")!=false){ let query = decodeURIComponent(getQueryVariable("frage")); document.querySelector(".openai #frage").value = query; askChatGpt(); } input.addEventListener("keypress", function (event) { if (event.key === "Enter" && input.value && input.value.trim().length > 0) { event.preventDefault(); askChatGpt(); } }); verlaufLoeschen.addEventListener("click", function () { letzteAntwort = ""; chatMessages = []; verlauf.innerHTML = ""; result.innerHTML = ""; error.innerHTML = ""; buttons.style.display = "none"; }); verlaufKopieren.addEventListener("click", function () { copyToClipboard(); }); }; async function askChatGpt() { result.innerHTML = "Anfrage läuft ..."; error.innerText = ""; try { const query = input.value; let queryForSearch = query; getNewContentDiv('ich', query); input.value = ""; const rootPath = "https://formupedia-chatgpt.azurewebsites.net/"; if (chatMessages.length > 0) { prompt = `Formuliere folgende Frage als eigenständige Frage für einen neuen Chat: "${query}"`; console.log(prompt); const reformulatedQuestionResponse = await fetch(rootPath + "api/answer-as-string", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: prompt, chatMessages: chatMessages }) }); if (!reformulatedQuestionResponse.ok) { displayError(reformulatedQuestionResponse.url + " " + reformulatedQuestionResponse.statusText); return; } const reformulatedQuestionResponseMessage = await reformulatedQuestionResponse.json(); queryForSearch = reformulatedQuestionResponseMessage.content.replaceAll("\"", ""); console.log(queryForSearch); } const searchResponse = await fetch(rootPath + "api/search", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: queryForSearch, matches: 5 }) }); if (!searchResponse.ok) { displayError(searchResponse.url + " " + searchResponse.statusText); return; } const chunks = await searchResponse.json(); prompt = `Nutze folgende Textpassagen, um diese Frage zu beantworten: "${queryForSearch}"\n\n${chunks?.map(d => d.content).join("\n\n")}`; const answerResponse = await fetch(rootPath + "api/answer", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: prompt, chatMessages: chatMessages }) }); if (!answerResponse.ok) { displayError(answerResponse.url + " " + answerResponse.statusText); return; } const reader = answerResponse.body.getReader(); const decoder = new TextDecoder(); let done = false; result.innerHTML = ""; const answerDiv = getNewContentDiv('KI', ''); let index = 0; while (!done) { index += 1; const { value, done: doneReading } = await reader.read(); done = doneReading; let word = decoder.decode(value); word = formatiereText(word); answerDiv.innerHTML += word; } letzteAntwort = answerDiv.innerHTML; chatMessages.push( { 'role': 'user', 'content': query }, { 'role': 'assistant', 'content': letzteAntwort }); //Doppelte Trefferseiten entfernen const distinctChunks = []; for (let i = 0; i < chunks.length; i++) { const treffer = chunks[i]; if (!distinctChunks.find(uniqueTreffer => uniqueTreffer.page_url == treffer.page_url)) { distinctChunks.push(treffer); } } if (distinctChunks.length > 0) { result.innerHTML += `Weitere Informationen gibt es hier:`; distinctChunks.forEach(treffer => { const trefferDiv = document.createElement("div"); trefferDiv.classList.add("treffer"); const trefferHeader = document.createElement("span"); const trefferLink = document.createElement("a"); trefferLink.setAttribute("href", treffer.page_url); trefferLink.setAttribute("target", "_blank"); trefferLink.innerHTML = treffer.page_title; trefferHeader.appendChild(trefferLink); const trefferBemerkung = document.createElement("span"); trefferBemerkung.classList.add("bemerkung"); trefferBemerkung.innerText = treffer.page_date; trefferHeader.appendChild(trefferBemerkung); trefferDiv.appendChild(trefferHeader); const trefferInhalt = document.createElement("div"); trefferInhalt.classList.add("inhalt"); trefferInhalt.innerText = treffer.page_description; // trefferInhalt.innerText = treffer.content; trefferDiv.appendChild(trefferInhalt); result.append(trefferDiv); }); } } catch (error) { displayError(error); } } function copyToClipboard() { const element = document.getElementById("verlauf"); const range = document.createRange(); range.selectNode(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); try { document.execCommand('copy'); alert('Chatverlauf in Zwischenablage kopiert :-)'); } catch (err) { console.error('Fehler beim Kopieren in die Zwischenablage: ', err); } selection.removeAllRanges(); } function formatiereText(text) { // Zeilenumbrüche in html umwandeln let formatierterText = text.replaceAll('\n', '
'); return formatierterText; } function getNewContentDiv(role, content) { const messageDiv = document.createElement("div"); messageDiv.classList.add("message"); const roleDiv = document.createElement("div"); roleDiv.classList.add(role); //ich oder KI const roleDivText = document.createElement("div"); roleDivText.classList.add("center"); roleDivText.innerHTML = role; roleDiv.appendChild(roleDivText); const contentDiv = document.createElement("div"); contentDiv.classList.add("content"); contentDiv.innerHTML = content; messageDiv.appendChild(roleDiv); messageDiv.appendChild(contentDiv); verlauf.appendChild(messageDiv); buttons.style.display = "block"; return contentDiv; } function displayError(message) { result.innerHTML = ""; error.innerText = message; } function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i