90 lines
2.8 KiB
HTML
90 lines
2.8 KiB
HTML
<html>
|
|
<header>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
|
|
<script>
|
|
function loadStream() {
|
|
http("GET", "/api/v0/chatbot", (body, status) => {
|
|
var data = JSON.parse(body)
|
|
document.getElementById("stream-log").innerHTML = data["Messages"]
|
|
document.getElementById("stream-prompt").innerHTML = data["Prompt"]
|
|
}, null)
|
|
}
|
|
|
|
function appendStreamLog(message) {
|
|
if (message)
|
|
document.getElementById("stream-log").innerHTML += "\n" + message
|
|
}
|
|
|
|
function startStream(newPrompt) {
|
|
body = new URLSearchParams(new FormData(newPrompt)).toString()
|
|
http("POST", "/api/v0/chatbot", (body, status) => {
|
|
if (status != 200) {
|
|
log(body)
|
|
return
|
|
}
|
|
}, body)
|
|
}
|
|
|
|
function pushStream(newMessage) {
|
|
body = new URLSearchParams(new FormData(newMessage)).toString()
|
|
for(var e of newMessage.elements)
|
|
if(!e.attributes.readonly)
|
|
e.disabled = true
|
|
appendStreamLog(document.getElementsByName("Message")[0].value)
|
|
http("PUT", "/api/v0/chatbot", (body, status) => {
|
|
for(var e of newMessage.elements)
|
|
e.disabled = false
|
|
if (status != 200) {
|
|
log(body)
|
|
return
|
|
}
|
|
appendStreamLog(body)
|
|
document.getElementsByName("Message")[0].value = ""
|
|
}, body)
|
|
}
|
|
|
|
function log() {
|
|
console.log(arguments)
|
|
document.getElementById("debug-log").innerHTML += "\n" + JSON.stringify(arguments)
|
|
}
|
|
|
|
function http(method, remote, callback, body) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
|
callback(xmlhttp.responseText, xmlhttp.status)
|
|
}
|
|
};
|
|
xmlhttp.open(method, remote, true);
|
|
if (typeof body == "undefined") {
|
|
body = null
|
|
}
|
|
xmlhttp.send(body);
|
|
}
|
|
</script>
|
|
</header>
|
|
<body onload="loadStream()">
|
|
<details>
|
|
<summary>Set up a new session</summary>
|
|
<form id="prompt" onsubmit="startStream(this); return false;">
|
|
<textarea id="stream-prompt" name="Prompt"></textarea>
|
|
<button type="submit">Start with prompt</button>
|
|
</form>
|
|
</details>
|
|
<details open=true>
|
|
<summary>Use your session</summary>
|
|
<form id="stream" onsubmit="pushStream(this); return false;">
|
|
<textarea id="stream-log" readonly=true></textarea>
|
|
<div style="display: flex; flex-direction: row;">
|
|
<input style="flex-grow: 1;" type="text" name="Message"/>
|
|
<button type="submit">Send</button>
|
|
</div>
|
|
</form>
|
|
</details>
|
|
<pre id="debug-log">
|
|
</pre>
|
|
</body>
|
|
<footer>
|
|
</footer>
|
|
</html>
|