This commit is contained in:
tobi lutke 2023-06-25 21:19:03 -04:00 committed by Tobias Lütke
parent 627d3ba8b5
commit b07b271358
No known key found for this signature in database
GPG Key ID: 1FC0DBB14164709A

View File

@ -34,21 +34,19 @@
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
hyphens: auto; hyphens: auto;
text-align: justify;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
form { form {
margin: 1em 0; margin: 1em 0 0 0;
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
form>* { form > * {
padding: 4px; padding: 4px;
} }
@ -87,9 +85,8 @@
const temperature = signal(0.2) const temperature = signal(0.2)
const nPredict = signal(80) const nPredict = signal(80)
const controller = signal(null)
const generating = computed(() => controller.value == null )
let controller;
// simple template replace // simple template replace
const template = (str, map) => { const template = (str, map) => {
@ -97,57 +94,55 @@
if (map) { if (map) {
params = { ...params, ...map }; params = { ...params, ...map };
} }
const result = String(str).replaceAll(/\{\{(.*?)\}\}/g, (_, key) => template(params[key])); return String(str).replaceAll(/\{\{(.*?)\}\}/g, (_, key) => template(params[key]));
console.log("template", str, params, "=>", result);
return result;
} }
// send message to server // send message to server
const chat = async (msg) => { const chat = async (msg) => {
if (controller) { if (controller.value) {
console.log('already running...'); console.log('already running...');
return; return;
} }
controller = new AbortController(); controller.value = new AbortController();
const history = [...transcript.value, ['{{user}}', msg]]; const history = [...transcript.value, ['{{user}}', msg]];
transcript.value = history; transcript.value = history;
let additionalParams = { let additionalParams = {
message: msg,
history: history.flatMap(([name, msg]) => `${name}: ${msg}`).join("\n"), history: history.flatMap(([name, msg]) => `${name}: ${msg}`).join("\n"),
} }
const payload = template(chatTemplate.value, additionalParams) const payload = template(chatTemplate.value, additionalParams)
console.log("payload", payload)
let currentMessage = ""; let currentMessage = "";
await fetchEventSource('/completion', { await fetchEventSource('/completion', {
method: 'POST', method: 'POST',
signal: controller.signal, signal: controller.value.signal,
body: JSON.stringify({ body: JSON.stringify({
stream: true, stream: true,
prompt: payload, prompt: payload,
n_predict: parseInt(nPredict.value), n_predict: parseInt(nPredict.value),
temperature: parseFloat(temperature.value), temperature: parseFloat(temperature.value),
stop: ["</s>", template("{{bot}}"), template("{{user}}")] stop: ["</s>", template("{{bot}}:"), template("{{user}}:")]
}), }),
onmessage(e) { onmessage(e) {
const data = JSON.parse(e.data); const data = JSON.parse(e.data);
currentMessage += data.content; currentMessage += data.content;
if (data.stop) { if (data.stop) {
console.log("done:", data); console.log("-->", data, ' response was:', currentMessage, 'transcript state:', transcript.value);
} }
transcript.value = [...history, ['{{bot}}', currentMessage]] transcript.value = [...history, ['{{bot}}', currentMessage]]
return true; return true;
}, },
onclose(e) {
controller.value = null;
return false;
},
}); });
console.log("transcript", transcript.value);
controller = null;
} }
function MessageInput() { function MessageInput() {
@ -155,9 +150,9 @@
const stop = (e) => { const stop = (e) => {
e.preventDefault(); e.preventDefault();
if (controller) { if (controller.value) {
controller.abort(); controller.value.abort();
controller = null; controller.value = null;
} }
} }
@ -174,9 +169,9 @@
return html` return html`
<form onsubmit=${submit}> <form onsubmit=${submit}>
<input type="text" value="${message.value}" oninput=${(e) => message.value = e.target.value} autofocus placeholder="start chat here..."/> <input type="text" value="${message}" oninput=${(e) => message.value = e.target.value} autofocus placeholder="Chat here..."/>
<button type="submit">Send</button> <button type="submit" disabled=${!generating.value} >Send</button>
<button onclick=${(e) => stop(e)}>Stop</button> <button onclick=${(e) => stop(e)} disabled=${generating.value}>Stop</button>
<button onclick=${(e) => reset(e)}>Reset</button> <button onclick=${(e) => reset(e)}>Reset</button>
</form> </form>
` `
@ -205,8 +200,6 @@
const ConfigForm = (props) => { const ConfigForm = (props) => {
return html` return html`
<form> <form>
<fieldset> <fieldset>
@ -264,6 +257,8 @@
} /> } />
</section > </section >
<hr/>
<section class="chat"> <section class="chat">
<${MessageInput} /> <${MessageInput} />
</section> </section>