nextira css
This commit is contained in:
nathan-sixnines
parent
c2504b16d2
commit
0359428ccc
1 changed files with 169 additions and 122 deletions
|
|
@ -7,172 +7,193 @@
|
||||||
<title>llama.cpp - chat</title>
|
<title>llama.cpp - chat</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
/* Global styling */
|
||||||
body {
|
body {
|
||||||
font-family: system-ui;
|
font-family: 'Poppins', sans-serif;
|
||||||
font-size: 90%;
|
font-size: 16px;
|
||||||
|
max-width: 600px;
|
||||||
|
min-width: 300px;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1em;
|
||||||
|
background-color: #333333;
|
||||||
|
color: #F4F4F4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Container stylings */
|
||||||
#container {
|
#container {
|
||||||
margin: 0em auto;
|
margin: 1em auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Main content area */
|
||||||
main {
|
main {
|
||||||
margin: 3px;
|
margin: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
|
flex-grow: 1;
|
||||||
flex-grow: 1;
|
overflow-y: auto;
|
||||||
overflow-y: auto;
|
border: 1px solid #4716C8;
|
||||||
|
border-radius: 8px;
|
||||||
border: 1px solid #ccc;
|
padding: 1em;
|
||||||
border-radius: 5px;
|
background-color: #333333;
|
||||||
padding: 0.5em;
|
box-shadow: 0px 3px 15px rgba(0, 255, 171, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
/* Paragraph styles */
|
||||||
max-width: 600px;
|
|
||||||
min-width: 300px;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
margin-top: 0.5em;
|
margin: 1em 0;
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Writing area */
|
||||||
#write form {
|
#write form {
|
||||||
margin: 1em 0 0 0;
|
margin-top: 1em;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fieldset configurations */
|
||||||
fieldset {
|
fieldset {
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset.two {
|
fieldset.two {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template: "a a";
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset.three {
|
fieldset.three {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template: "a a a";
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 1em;
|
gap: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Interactive details section */
|
||||||
details {
|
details {
|
||||||
border: 1px solid #aaa;
|
border: 1px solid #4716C8;
|
||||||
border-radius: 4px;
|
border-radius: 8px;
|
||||||
padding: 0.5em 0.5em 0;
|
padding: 0.5em;
|
||||||
margin-top: 0.5em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
summary {
|
summary {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: -0.5em -0.5em 0;
|
cursor: pointer;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
cursor: pointer;
|
background-color: #4716C8;
|
||||||
|
color: #F4F4F4;
|
||||||
}
|
}
|
||||||
|
|
||||||
details[open] {
|
details[open] {
|
||||||
padding: 0.5em;
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc stylings */
|
||||||
|
.prob-set, .popover-content {
|
||||||
|
padding: 0.5em;
|
||||||
|
border-bottom: 1px solid #4716C8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prob-set {
|
h1 {
|
||||||
padding: 0.3em;
|
color: #00FFAB;
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-content {
|
|
||||||
position: absolute;
|
|
||||||
background-color: white;
|
|
||||||
padding: 0.2em;
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
padding: 5px;
|
padding: 0.5em;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #4716C8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Code stylings */
|
||||||
pre code {
|
pre code {
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #222;
|
background-color: #00FFAB;
|
||||||
color: #ddd;
|
color: #333333;
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
padding: 0.1em 0.3em;
|
padding: 0.2em 0.4em;
|
||||||
border-radius: 3px;
|
background-color: #00FFAB;
|
||||||
|
color: #333333;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Label styling */
|
||||||
fieldset label {
|
fieldset label {
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
display: block;
|
display: block;
|
||||||
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Header and footer */
|
||||||
header, footer {
|
header, footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
color: #4716C8;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
color: #888;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes loading-bg-wipe {
|
@keyframes loading-bg-wipe {
|
||||||
0% {
|
0% {
|
||||||
background-position: 0%;
|
background-position: 0%;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
background-position: 100%;
|
background-position: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
--loading-color-1: #eeeeee00;
|
--loading-color-1: #333333;
|
||||||
--loading-color-2: #eeeeeeff;
|
--loading-color-2: #00FFAB;
|
||||||
background-size: 50% 100%;
|
background-size: 50% 100%;
|
||||||
background-image: linear-gradient(90deg, var(--loading-color-1), var(--loading-color-2), var(--loading-color-1));
|
background-image: linear-gradient(90deg, var(--loading-color-1), var(--loading-color-2), var(--loading-color-1));
|
||||||
animation: loading-bg-wipe 2s linear infinite;
|
animation: loading-bg-wipe 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.loading {
|
.loading {
|
||||||
--loading-color-1: #22222200;
|
--loading-color-1: #00FFAB;
|
||||||
--loading-color-2: #222222ff;
|
--loading-color-2: #333333;
|
||||||
}
|
}
|
||||||
.popover-content {
|
.popover-content {
|
||||||
background-color: black;
|
background-color: #4716C8;
|
||||||
}
|
color: #F4F4F4;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import {
|
import {
|
||||||
|
|
@ -410,6 +431,8 @@
|
||||||
currentMessages.pop();
|
currentMessages.pop();
|
||||||
}
|
}
|
||||||
transcriptUpdate([...history, ["{{char}}", currentMessages]])
|
transcriptUpdate([...history, ["{{char}}", currentMessages]])
|
||||||
|
// Add the syntax highlighting
|
||||||
|
highlightCodeBlocks();
|
||||||
console.log("Completion finished: '", currentMessages.map(msg => msg.content).join(''), "', summary: ", data);
|
console.log("Completion finished: '", currentMessages.map(msg => msg.content).join(''), "', summary: ", data);
|
||||||
} else {
|
} else {
|
||||||
currentMessages.push(data);
|
currentMessages.push(data);
|
||||||
|
|
@ -474,6 +497,15 @@
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const highlightCodeBlocks = () => {
|
||||||
|
document.querySelectorAll('pre code:not(.highlighted)').forEach((block) => {
|
||||||
|
hljs.highlightElement(block);
|
||||||
|
block.classList.add('highlighted'); // Add 'highlighted' class
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const ChatLog = (props) => {
|
const ChatLog = (props) => {
|
||||||
const messages = session.value.transcript;
|
const messages = session.value.transcript;
|
||||||
const container = useRef(null)
|
const container = useRef(null)
|
||||||
|
|
@ -497,7 +529,9 @@
|
||||||
data;
|
data;
|
||||||
message = html`<${Markdownish} text=${template(text)} />`
|
message = html`<${Markdownish} text=${template(text)} />`
|
||||||
}
|
}
|
||||||
return html`<p key=${index}><strong>${template(user)}:</strong> ${message}</p>`
|
const renderedMessage = html`<p key=${index}><strong>${template(user)}:</strong> ${message}</p>`;
|
||||||
|
|
||||||
|
return renderedMessage;
|
||||||
};
|
};
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
|
|
@ -711,6 +745,7 @@
|
||||||
|
|
||||||
// poor mans markdown replacement
|
// poor mans markdown replacement
|
||||||
const Markdownish = (params) => {
|
const Markdownish = (params) => {
|
||||||
|
|
||||||
const chunks = params.text.split('```');
|
const chunks = params.text.split('```');
|
||||||
|
|
||||||
for (let i = 0; i < chunks.length; i++) {
|
for (let i = 0; i < chunks.length; i++) {
|
||||||
|
|
@ -736,6 +771,17 @@
|
||||||
return html`<span dangerouslySetInnerHTML=${{ __html: restoredText }} />`;
|
return html`<span dangerouslySetInnerHTML=${{ __html: restoredText }} />`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ModelGenerationInfo = (params) => {
|
||||||
|
if (!llamaStats.value) {
|
||||||
|
return html`<span/>`
|
||||||
|
}
|
||||||
|
return html`
|
||||||
|
<span>
|
||||||
|
${llamaStats.value.predicted_per_token_ms.toFixed()}ms per token, ${llamaStats.value.predicted_per_second.toFixed(2)} tokens per second
|
||||||
|
</span>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// simple popover impl
|
// simple popover impl
|
||||||
const Popover = (props) => {
|
const Popover = (props) => {
|
||||||
|
|
@ -873,6 +919,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
render(h(App), document.querySelector('#container'));
|
render(h(App), document.querySelector('#container'));
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue