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

webui: new style

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>
<html>
<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>
<style type="text/css">
html {
font-family: sans-serif;
}
textarea {
border-radius: 4px;
display: block;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100px;
html, body {
margin: 0;
padding: 0;
height: 100%;
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;
transition: background-color 0.5s ease-out;
}
@ -35,21 +90,31 @@ textarea.alert {
background: lightyellow;
transition: initial;
}
button {
margin-top: 8px;
padding: 4px 6px;
@media screen and (max-width: 400px) {
.logo {
font-size: 0;
}
.state-wrapper {
text-align: left;
margin-left: 8px;
}
}
</style>
<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.
The assistant gives helpful, detailed, and polite answers to the human's questions.
### Human: What is the capital city of New Zealand?
### Assistant:</textarea>
<button id="generate">▶️ Generate</button>
<button id="interrupt" disabled>⏸️ Interrupt</button>
<span id="state"></span>
<script type="text/javascript">
function main() {
@ -85,7 +150,8 @@ function main() {
};
$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", {
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 decoder = new TextDecoder();
@ -121,11 +187,12 @@ function main() {
}
state.textContent = ""
$state.style.display = "none";
$state.textContent = ""
} catch (ex) {
state.textContent = "Error";
$state.textContent = "Error";
alert(
"Error processing the request: " +
(ex instanceof Error ? ex.message : JSON.stringify(ex))