llamacpphtmld/webui.go

128 lines
2.9 KiB
Go

package main
import (
"fmt"
"html"
"net/http"
"github.com/google/uuid"
)
func (this *Application) GET_Root(w http.ResponseWriter, r *http.Request) {
w.Header().Set(`Content-Type`, `text/html;charset=UTF-8`)
w.WriteHeader(200)
w.Write([]byte(`<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>` + html.EscapeString(AppTitle) + `</title>
<style type="text/css">
html {
font-family: sans-serif;
}
textarea {
border-radius: 4px;
display: block;
width: 100%;
min-height: 100px;
background: #fff;
transition: background-color 0.5s ease-out;
}
textarea.alert {
background: lightyellow;
transition: initial;
}
button {
margin-top: 8px;
padding: 4px 6px;
}
</style>
<body>
<h2>🦙 ` + html.EscapeString(AppTitle) + `</h2>
<textarea id="main" autofocus></textarea>
<button id="generate">▶️ Generate</button>
<button id="interrupt" disabled>⏸️ Interrupt</button>
<script type="text/javascript">
function main() {
const conversationID = "` + uuid.New().String() + `";
const contextSize = ` + fmt.Sprintf("%d", ParamContextSize) + `;
const apiKey = "public-web-interface";
const $generate = document.getElementById("generate");
const $interrupt = document.getElementById("interrupt");
const $main = document.getElementById("main");
$generate.addEventListener('click', async function() {
const content = $main.value;
if (content.split(" ").length >= (contextSize-4)) {
if (! confirm("Warning: high prompt length, the model will forget part of the content. Are you sure you want to continue?")) {
return;
}
}
$main.readOnly = true;
$generate.disabled = true;
try {
const controller = new AbortController();
const response = await fetch("/api/v1/generate", {
method: "POST",
signal: controller.signal,
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"ConversationID": conversationID,
"APIKey": apiKey,
"Content": content
})
});
$interrupt.disabled = false;
const doInterrupt = () => {
controller.abort();
$interrupt.removeEventListener('click', doInterrupt);
};
$interrupt.addEventListener('click', doInterrupt);
const reader = response.body.getReader();
const decoder = new TextDecoder();
for(;;) {
const singleReadResult = await reader.read();
if (singleReadResult.done) {
break;
}
$main.value += decoder.decode(singleReadResult.value);
$main.scrollTop = $main.scrollHeight;
$main.className = 'alert';
setTimeout(() => { $main.className = ''; }, 1);
}
} catch (ex) {
alert(
"Error processing the request: " +
(ex instanceof Error ? ex.message : JSON.stringify(ex))
);
return;
} finally {
$main.readOnly = false;
$generate.disabled = false;
$interrupt.disabled = true;
}
});
}
main();
</script>
</body>
</html>
`))
}