basic response formatting

This commit is contained in:
Tobias Lütke 2023-07-03 15:53:01 -04:00
parent eee6d69e39
commit c19daa4eb5
No known key found for this signature in database
GPG Key ID: 1FC0DBB14164709A
2 changed files with 816 additions and 538 deletions

File diff suppressed because it is too large Load Diff

View File

@ -79,10 +79,22 @@
} }
textarea { textarea {
padding: 5px;
flex-grow: 1; flex-grow: 1;
width: 100%; width: 100%;
} }
pre code {
display: block;
background-color: #222;
color: #ddd;
}
code {
font-family: monospace;
padding: 0.1em 0.3em;
border-radius: 3px;
}
fieldset label { fieldset label {
margin: 0.5em 0; margin: 0.5em 0;
display: block; display: block;
@ -97,7 +109,7 @@
import { llamaComplete } from '/completion.js'; import { llamaComplete } from '/completion.js';
const session = signal({ const session = signal({
prompt: "This is a conversation between user and llama, a friendly chatbot.", prompt: "This is a conversation between user and llama, a friendly chatbot. respond in markdown.",
template: "{{prompt}}\n\n{{history}}\n{{char}}:", template: "{{prompt}}\n\n{{history}}\n{{char}}:",
historyTemplate: "{{name}}: {{message}}", historyTemplate: "{{name}}: {{message}}",
transcript: [], transcript: [],
@ -116,7 +128,7 @@
const chatStarted = computed(() => session.value.transcript.length > 0) const chatStarted = computed(() => session.value.transcript.length > 0)
const params = signal({ const params = signal({
n_predict: 200, n_predict: 400,
temperature: 0.7, temperature: 0.7,
repeat_last_n: 256, repeat_last_n: 256,
repeat_penalty: 1.18, repeat_penalty: 1.18,
@ -207,7 +219,7 @@
return html` return html`
<form onsubmit=${submit}> <form onsubmit=${submit}>
<div> <div>
<textarea type="text" rows=2 onkeypress=${enterSubmits} value="${message}" oninput=${(e) => message.value = e.target.value} placeholder="Start here..."/> <textarea type="text" rows=2 onkeypress=${enterSubmits} value="${message}" oninput=${(e) => message.value = e.target.value} placeholder="Say something..."/>
</div> </div>
<div class="right"> <div class="right">
@ -225,13 +237,13 @@
useEffect(() => { useEffect(() => {
// scroll to bottom (if needed) // scroll to bottom (if needed)
if (container.current && container.current.scrollHeight <= container.current.scrollTop + container.current.offsetHeight + 100) { if (container.current && container.current.scrollHeight <= container.current.scrollTop + container.current.offsetHeight + 300) {
container.current.scrollTo(0, container.current.scrollHeight) container.current.scrollTo(0, container.current.scrollHeight)
} }
}, [messages]) }, [messages])
const chatLine = ([user, msg]) => { const chatLine = ([user, msg]) => {
return html`<p key=${msg}><strong>${template(user)}:</strong> ${template(msg)}</p>` return html`<p key=${msg}><strong>${template(user)}:</strong> <${Markdown} text=${template(msg)} /></p>`
}; };
return html` return html`
@ -300,8 +312,19 @@
</fieldset> </fieldset>
</form> </form>
` `
} }
const Markdown = (params) => {
const md = params.text
.replace(/^#{1,6} (.*)$/gim, '<h3>$1</h3>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/__(.*?)__/g, '<strong>$1</strong>')
.replace(/\*(.*?)\*/g, '<em>$1</em>')
.replace(/_(.*?)_/g, '<em>$1</em>')
.replace(/```.*?\n([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
.replace(/`(.*?)`/g, '<code>$1</code>')
.replace(/\n/gim, '<br />');
return html`<span dangerouslySetInnerHTML=${{ __html: md }} />`;
};
function App(props) { function App(props) {