Mirrors/llama.cpp
1
0
Fork 0
mirror of https://github.com/ggerganov/llama.cpp.git synced 2025-01-06 02:48:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

slightly nicer css

Browse Source
This commit is contained in:
Tobias Lütke 2023-07-02 17:46:00 -04:00
parent dd1df3f31c
commit 98e612cefd
No known key found for this signature in database
GPG Key ID: 1FC0DBB14164709A
1 changed files with 54 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
examples/server/public/index.html
View File

@ -2,29 +2,60 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>llama.cpp - chat</title> <title>llama.cpp - chat</title>
<style> <style>
body {
background-color: #fff;
color: #000;
font-family: system-ui;
font-size: 90%;
}
#container { #container {
max-width: 80rem; margin: 0em auto;
margin: 4em auto;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
header, footer {
text-align: center;
} }
main { main {
border: 1px solid #ddd; margin: 3px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1em;
flex-grow: 1;
border-style: outset;
padding: 1em; padding: 1em;
} }
#chat { main .content {
height: 50vh; flex-grow: 1;
}
main .content > * {
overflow-y: auto; overflow-y: auto;
} }
footer {
font-size: smaller;
color: #999;
}
body { body {
max-width: 650px; max-width: 600px;
min-width: 300px;
line-height: 1.2; line-height: 1.2;
font-size: 16px;
margin: 0 auto; margin: 0 auto;
} }
@ -52,6 +83,12 @@
flex-grow: 1; flex-grow: 1;
} }
form textarea {
flex-grow: 1;
min-height: 5em;
width: 100%;
}
fieldset { fieldset {
width: 100%; width: 100%;
padding: 1em; padding: 1em;
@ -194,7 +231,7 @@
<div> <div>
<label for="prompt">Prompt</label> <label for="prompt">Prompt</label>
<textarea type="text" id="prompt" value="${settings.value.prompt}" oninput=${(e) => settings.value.prompt = e.target.value} rows="3" cols="60" /> <textarea type="text" id="prompt" value="${settings.value.prompt}" oninput=${(e) => settings.value.prompt = e.target.value}/>
</div> </div>
<div> <div>
@ -209,7 +246,7 @@
<div> <div>
<label for="template">Prompt template</label> <label for="template">Prompt template</label>
<textarea id="template" value="${chatTemplate}" oninput=${(e) => chatTemplate.value = e.target.value} rows="8" cols="60" /> <textarea id="template" value="${chatTemplate}" oninput=${(e) => chatTemplate.value = e.target.value}/>
</div> </div>
<div> <div>
@ -223,8 +260,7 @@
<input type="range" id="nPredict" min="1" max="2048" step="1" value="${nPredict.value}" oninput=${(e) => nPredict.value = e.target.value} /> <input type="range" id="nPredict" min="1" max="2048" step="1" value="${nPredict.value}" oninput=${(e) => nPredict.value = e.target.value} />
<span>${nPredict}</span> <span>${nPredict}</span>
</div> </div>
</fieldset> </fieldset>
</form> </form>
` `
@ -239,16 +275,12 @@
</header> </header>
<main> <main>
<section class="chat"> <div id="content">
<${chatStarted.value ? ChatLog : ConfigForm <${chatStarted.value ? ChatLog : ConfigForm} />
} /> </div>
</section> <div>
<${MessageInput} />
<hr/> </div>
<section class="chat">
<${MessageInput} />
</section>
</main> </main>
<footer> <footer>