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

webui : put DeepSeek R1 CoT in a collapsible <details> element

Browse source
This commit is contained in:
Stéphane du Hamel 2025-01-23 03:26:51 +01:00
parent 6152129d05
commit ada42ebda0
3 changed files with 14 additions and 2 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.

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

@ -261,6 +261,10 @@
<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">
<summary class="collapse-title">Reasoning</summary>
<vue-markdown :source="msg.cot" dir="auto" class="collapse-content"></vue-markdown>
</details>
<vue-markdown :source="msg.content"></vue-markdown> <vue-markdown :source="msg.content"></vue-markdown>
</div> </div>
<!-- render timings if enabled --> <!-- render timings if enabled -->

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

@ -468,14 +468,22 @@ 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.content || ''; const lastContent = this.pendingMsg.fullContent || '';
if (addedContent) { if (addedContent) {
this.pendingMsg = { this.pendingMsg = {
id: this.pendingMsg.id, id: this.pendingMsg.id,
role: 'assistant', role: 'assistant',
content: lastContent + addedContent, fullContent: 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