8000 webui : put DeepSeek R1 CoT in a collapsible <details> element by stduhpf · Pull Request #11364 · ggml-org/llama.cpp · GitHub
[go: up one dir, main page]
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Jan 24, 2025
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
ada42eb
webui : put DeepSeek R1 CoT in a collapsible <details> element
stduhpf Jan 23, 2025
2a7d711
webui: refactor split
stduhpf Jan 23, 2025
77c08a8
webui: don't use regex to split cot and response
stduhpf Jan 23, 2025
7402727
webui: format+qol
stduhpf Jan 23, 2025
620acbb
webui: no loading icon if the model isn't generating
stduhpf Jan 23, 2025
fa225a4
ui fix, add configs
ngxson Jan 23, 2025
7b3ac17
add jsdoc types
ngxson Jan 23, 2025
4395d70
only filter </think> for assistant msg
ngxson Jan 23, 2025
9c4962f
build
ngxson Jan 23, 2025
0f0482f
Merge branch 'master' into R1-ui
ngxson Jan 23, 2025
c815d53
update build
ngxson Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
ui fix, add configs
  • Loading branch information
@ngxson
ngxson committed Jan 23, 2025
commit fa225a423afcb476b5e51a4c1a29e1cb86b44302
26 changes: 22 additions & 4 deletions examples/server/webui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ <h2 class="font-bold ml-4">Conversations</h2>
:msg="pendingMsg"
:key="pendingMsg.id"
:is-generating="isGenerating"
:show-thought-in-progress="config.showThoughtInProgress"
:edit-user-msg-and-regenerate="() => {}"
:regenerate-msg="() => {}"></message-bubble>
</div>
Expand Down Expand Up @@ -202,6 +203,20 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
</template>
</div>
</details>
<!-- Section: Reasoning models -->
<details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
<summary class="collapse-title font-bold">Reasoning models</summary>
<div class="collapse-content">
<div class="flex flex-row items-center mb-2">
<input type="checkbox" class="checkbox" v-model="config.showThoughtInProgress" />
<span class="ml-4">Expand though process by default for generating message</span>
</div>
<div class="flex flex-row items-center mb-2">
<input type="checkbox" class="checkbox" v-model="config.excludeThoughtOnReq" />
<span class="ml-4">Exclude thought process when sending request to API (Recommended for DeepSeek-R1)</span>
</div>
</div>
</details>
<!-- Section: Advanced config -->
<details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
<summary class="collapse-title font-bold">Advanced config</summary>
Expand Down Expand Up @@ -261,10 +276,13 @@ <h3 class="text-lg font-bold mb-6">Settings</h3>
<span v-if="msg.content === null" class="loading loading-dots loading-md"></span>
<!-- render message as markdown -->
<div v-else dir="auto">
<details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200" :open="splitMsgContent.isThinking">
<summary class="collapse-title text-xl font-medium">
<span v-if="splitMsgContent.isThinking">Thinking<span v-if="isGenerating" class="loading loading-dots loading-md" style="vertical-align: middle;"></span></span>
<span v-else >Thought Process</span>
<details v-if="msg.role === 'assistant' && splitMsgContent.cot" class="collapse bg-base-200 collapse-arrow mb-4" :open="splitMsgContent.isThinking && showThoughtInProgress">
<summary class="collapse-title">
<span v-if="splitMsgContent.isThinking">
<span v-if="isGenerating" class="loading loading-spinner loading-md mr-2" style="vertical-align: middle;"></span>
<b>Thinking</b>
</span>
<b v-else>Thought Process</b>
</summary>
<vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown>
</details>
Expand Down
17 changes: 10 additions & 7 deletions examples/server/webui/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const CONFIG_DEFAULT = {
apiKey: '',
systemMessage: 'You are a helpful assistant.',
showTokensPerSecond: false,
showThoughtInProgress: false,
excludeThoughtOnReq: true,
// make sure these default values are in sync with `common.h`
samplers: 'edkypmxt',
temperature: 0.8,
Expand Down Expand Up @@ -172,6 +174,7 @@ const MessageBubble = defineComponent({
config: Object,
msg: Object,
isGenerating: Boolean,
showThoughtInProgress: Boolean,
editUserMsgAndRegenerate: Function,
regenerateMsg: Function,
},
Expand All @@ -191,27 +194,27 @@ const MessageBubble = defineComponent({
},
splitMsgContent() {
const content = this.msg.content;
if (this.msg.role !== "assistant") {
if (this.msg.role !== 'assistant') {
return { content };
}
let actualContent = "";
let cot = "";
let actualContent = '';
let cot = '';
let isThinking = false;
let thinkSplit = content.split("<think>", 2);
let thinkSplit = content.split('<think>', 2);
actualContent += thinkSplit[0];
while (thinkSplit[1] !== undefined) {
// <think> tag found
thinkSplit = thinkSplit[1].split("</think>", 2);
thinkSplit = thinkSplit[1].split('</think>', 2);
cot += thinkSplit[0];
isThinking = true;
if (thinkSplit[1] !== undefined) {
// </think> closing tag found
isThinking = false;
thinkSplit = thinkSplit[1].split("<think>", 2);
thinkSplit = thinkSplit[1].split('<think>', 2);
actualContent += thinkSplit[0];
}
}
return { content: actualContent, cot , isThinking};
return { content: actualContent, cot, isThinking };
},
},
methods: {
Expand Down
0