code.ivysaur.me/llamacpphtmld
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

webui: new style

Browse Source
This commit is contained in:
mappu 2023-04-09 11:11:01 +12:00
parent 527fc92240
commit fac1a5b484
1 changed files with 86 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
webui.go
View File

@ -14,20 +14,75 @@ func (this *Application) GET_Root(w http.ResponseWriter, r *http.Request) {
w.Write([]byte(`<!DOCTYPE html> w.Write([]byte(`<!DOCTYPE html>
<html> <html>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#040c3a">
<title>` + html.EscapeString(AppTitle) + `</title> <title>` + html.EscapeString(AppTitle) + `</title>
<style type="text/css"> <style type="text/css">
html { html {
font-family: sans-serif; font-family: sans-serif;
} }
textarea { html, body {
border-radius: 4px; margin: 0;
display: block; padding: 0;
min-width: 100%; height: 100%;
width: 100%;
max-width: 100%;
min-height: 100px;
position: relative;
}
.banner {
height: 48px;
background: linear-gradient(#06638d, #040c3a);
color: white;
position: relative;
line-height: 48px;
vertical-align: middle;
}
.logo {
font-size: 18px;
padding-left: 8px;
}
.state-wrapper {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
text-align: center;
}
#state {
display: none; /* inline-block; */
background: white;
color: black;
border: 2px solid black;
margin: 0 auto;
padding: 2px 4px;
opacity: 0.75;
font-size: 12px;
line-height: 18px;
vertical-align: middle;
}
.banner button {
float: right;
height: 32px;
margin: 8px 8px 8px 0;
}
textarea {
position: absolute;
left: 0;
right: 0;
top: 48px;
bottom: 0;
resize: none;
outline: none;
box-shadow: none;
border: 0;
background: #fff; background: #fff;
transition: background-color 0.5s ease-out; transition: background-color 0.5s ease-out;
} }
@ -35,21 +90,31 @@ textarea.alert {
background: lightyellow; background: lightyellow;
transition: initial; transition: initial;
} }
button {
margin-top: 8px; @media screen and (max-width: 400px) {
padding: 4px 6px; .logo {
font-size: 0;
}
.state-wrapper {
text-align: left;
margin-left: 8px;
}
} }
</style> </style>
<body> <body>
<h2>🦙 ` + html.EscapeString(AppTitle) + `</h2> <div class="banner">
<span class="logo">🦙 ` + html.EscapeString(AppTitle) + `</span>
<div class="state-wrapper">
<span id="state"></span>
</div>
<button id="generate">▶️ Generate</button>
<button id="interrupt" disabled>⏸️ Interrupt</button>
</div>
<textarea id="main" autofocus>A chat between a curious human and an artificial intelligence assistant. <textarea id="main" autofocus>A chat between a curious human and an artificial intelligence assistant.
The assistant gives helpful, detailed, and polite answers to the human's questions. The assistant gives helpful, detailed, and polite answers to the human's questions.
### Human: What is the capital city of New Zealand? ### Human: What is the capital city of New Zealand?
### Assistant:</textarea> ### Assistant:</textarea>
<button id="generate">▶️ Generate</button>
<button id="interrupt" disabled>⏸️ Interrupt</button>
<span id="state"></span>
<script type="text/javascript"> <script type="text/javascript">
function main() { function main() {
@ -85,7 +150,8 @@ function main() {
}; };
$interrupt.addEventListener('click', doInterrupt); $interrupt.addEventListener('click', doInterrupt);
state.textContent = "Waiting in queue..." $state.style.display = "inline-block";
$state.textContent = "Waiting in queue..."
const response = await fetch("/api/v1/generate", { const response = await fetch("/api/v1/generate", {
method: "POST", method: "POST",
@ -100,7 +166,7 @@ function main() {
}) })
}); });
state.textContent = "The AI is reading your text so far..." $state.textContent = "The AI is reading your text so far..."
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder(); const decoder = new TextDecoder();
@ -121,11 +187,12 @@ function main() {
} }
state.textContent = "" $state.style.display = "none";
$state.textContent = ""
} catch (ex) { } catch (ex) {
state.textContent = "Error"; $state.textContent = "Error";
alert( alert(
"Error processing the request: " + "Error processing the request: " +
(ex instanceof Error ? ex.message : JSON.stringify(ex)) (ex instanceof Error ? ex.message : JSON.stringify(ex))