vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

webui: refactor split

Browse source
This commit is contained in:
Stéphane du Hamel 2025-01-23 19:31:25 +01:00
parent ada42ebda0
commit 2a7d711bc5
3 changed files with 21 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
examples/server/public/index.html.gz
View file

Binary file not shown.

8
examples/server/webui/index.html
View file

@ -261,11 +261,11 @@
<span v-if="msg.content === null" class="loading loading-dots loading-md"></span> <span v-if="msg.content === null" class="loading loading-dots loading-md"></span>
<!-- render message as markdown --> <!-- render message as markdown -->
<div v-else dir="auto"> <div v-else dir="auto">
<details v-if="msg.role === 'assistant' && msg.cot" class="collapse bg-base-200" :open="isGenerating"> <details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="isGenerating">
<summary class="collapse-title">Reasoning</summary> <summary class="collapse-title">Reasoning?</summary>
<vue-markdown :source="msg.cot" dir="auto" class="collapse-content"></vue-markdown> <vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown>
</details> </details>
<vue-markdown :source="msg.content"></vue-markdown> <vue-markdown :source="splitMsgContent.content"></vue-markdown>
</div> </div>
<!-- render timings if enabled --> <!-- render timings if enabled -->
<div class="dropdown dropdown-hover dropdown-top mt-2" v-if="timings && config.showTokensPerSecond"> <div class="dropdown dropdown-hover dropdown-top mt-2" v-if="timings && config.showTokensPerSecond">

28
examples/server/webui/src/main.js
View file

@ -188,7 +188,21 @@ const MessageBubble = defineComponent({
prompt_per_second: this.msg.timings.prompt_n / (this.msg.timings.prompt_ms / 1000), prompt_per_second: this.msg.timings.prompt_n / (this.msg.timings.prompt_ms / 1000),
predicted_per_second: this.msg.timings.predicted_n / (this.msg.timings.predicted_ms / 1000), predicted_per_second: this.msg.timings.predicted_n / (this.msg.timings.predicted_ms / 1000),
}; };
} },
splitMsgContent() {
// TODO: make it more efficient
const content = this.msg.content;
if (this.msg.role !== 'assistant'){
return {content};
}
const regex = /<think>(.*?)?(?=(<\/think>)|$)/gis;
const matches = [];
let match;
while ((match = regex.exec(content)) !== null) {
matches.push(match[1]);
}
return {content : content.replace(/<think>.*?(<\/think>|$)/gis, ''), cot : matches.join('<br/>') };
},
}, },
methods: { methods: {
copyMsg() { copyMsg() {
@ -468,22 +482,14 @@ const mainApp = createApp({
for await (const chunk of chunks) { for await (const chunk of chunks) {
const stop = chunk.stop; const stop = chunk.stop;
const addedContent = chunk.choices[0].delta.content; const addedContent = chunk.choices[0].delta.content;
const lastContent = this.pendingMsg.fullContent || ''; const lastContent = this.pendingMsg.content || '';
if (addedContent) { if (addedContent) {
this.pendingMsg = { this.pendingMsg = {
id: this.pendingMsg.id, id: this.pendingMsg.id,
role: 'assistant', role: 'assistant',
fullContent: lastContent + addedContent, content: lastContent + addedContent,
}; };
} }
const regex = /<think>(.*?)?(?=(<\/think>)|$)/gis;
const matches = [];
let match;
while ((match = regex.exec(this.pendingMsg.fullContent)) !== null) {
matches.push(match[1]);
}
this.pendingMsg.content = this.pendingMsg.fullContent.replace(/<think>.*?(<\/think>|$)/gis, '');
this.pendingMsg.cot = matches.join('<br/>');
const timings = chunk.timings; const timings = chunk.timings;
if (timings && this.config.showTokensPerSecond) { if (timings && this.config.showTokensPerSecond) {
// only extract what's really needed, to save some space // only extract what's really needed, to save some space