server : allow continue edit on completion mode (#3950)

* server : allow continue edit on completion mode

* server : handle abort case in runCompletion

* server : style improvement
This commit is contained in:
Jhen-Jie Hong 2023-11-11 06:49:33 +08:00 committed by GitHub
parent df9d1293de
commit 4a4fd3eefa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 2468 additions and 2377 deletions

File diff suppressed because it is too large Load diff

View file

@ -160,6 +160,11 @@
height: 10em; height: 10em;
} }
[contenteditable] {
display: inline-block;
white-space: pre-wrap;
outline: 0px solid transparent;
}
@keyframes loading-bg-wipe { @keyframes loading-bg-wipe {
0% { 0% {
@ -462,18 +467,23 @@
}, "{{char}}"); }, "{{char}}");
} }
const runCompletion = async () => { const runCompletion = () => {
if (controller.value) { if (controller.value) {
console.log('already running...'); console.log('already running...');
return; return;
} }
const { prompt } = session.value; const { prompt } = session.value;
transcriptUpdate([...session.value.transcript, ["", prompt]]); transcriptUpdate([...session.value.transcript, ["", prompt]]);
await runLlama(prompt, { runLlama(prompt, {
...params.value, ...params.value,
slot_id: slot_id, slot_id: slot_id,
stop: [], stop: [],
}, ""); }, "").finally(() => {
session.value.prompt = session.value.transcript.map(([_, data]) =>
Array.isArray(data) ? data.map(msg => msg.content).join('') : data
).join('');
session.value.transcript = [];
})
} }
const stop = (e) => { const stop = (e) => {
@ -573,6 +583,7 @@
} }
}, [messages]) }, [messages])
const isCompletionMode = session.value.type === 'completion'
const chatLine = ([user, data], index) => { const chatLine = ([user, data], index) => {
let message let message
const isArrayMessage = Array.isArray(data) const isArrayMessage = Array.isArray(data)
@ -582,20 +593,31 @@
const text = isArrayMessage ? const text = isArrayMessage ?
data.map(msg => msg.content).join('').replace(/^\s+/, '') : data.map(msg => msg.content).join('').replace(/^\s+/, '') :
data; data;
message = html`<${Markdownish} text=${template(text)} />` message = isCompletionMode ?
text :
html`<${Markdownish} text=${template(text)} />`
} }
if (user) { if (user) {
return html`<p key=${index}><strong>${template(user)}:</strong> ${message}</p>` return html`<p key=${index}><strong>${template(user)}:</strong> ${message}</p>`
} else { } else {
return html`<p key=${index}>${message}</p>` return isCompletionMode ?
html`<span key=${index}>${message}</span>` :
html`<p key=${index}>${message}</p>`
} }
}; };
const handleCompletionEdit = (e) => {
session.value.prompt = e.target.innerText;
session.value.transcript = [];
}
return html` return html`
<section id="chat" ref=${container}> <div id="chat" ref=${container} key=${messages.length}>
<img style="width: 60%;${!session.value.image_selected ? `display: none;` : ``}" src="${session.value.image_selected}"/> <img style="width: 60%;${!session.value.image_selected ? `display: none;` : ``}" src="${session.value.image_selected}"/>
${messages.flatMap(chatLine)} <span contenteditable=${isCompletionMode} ref=${container} oninput=${handleCompletionEdit}>
</section>`; ${messages.flatMap(chatLine)}
</span>
</div>`;
}; };
const ConfigForm = (props) => { const ConfigForm = (props) => {