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

ui fix, add configs

Browse source
This commit is contained in:
Xuan Son Nguyen 2025-01-23 23:41:54 +01:00
parent 620acbb381
commit fa225a423a
2 changed files with 32 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -141,6 +141,7 @@
:msg="pendingMsg" :msg="pendingMsg"
:key="pendingMsg.id" :key="pendingMsg.id"
:is-generating="isGenerating" :is-generating="isGenerating"
:show-thought-in-progress="config.showThoughtInProgress"
:edit-user-msg-and-regenerate="() => {}" :edit-user-msg-and-regenerate="() => {}"
:regenerate-msg="() => {}"></message-bubble> :regenerate-msg="() => {}"></message-bubble>
</div> </div>
@ -202,6 +203,20 @@
</template> </template>
</div> </div>
</details> </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 --> <!-- Section: Advanced config -->
<details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible"> <details class="collapse collapse-arrow bg-base-200 mb-2 overflow-visible">
<summary class="collapse-title font-bold">Advanced config</summary> <summary class="collapse-title font-bold">Advanced config</summary>
@ -261,10 +276,13 @@
<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' && splitMsgContent.cot" class="collapse bg-base-200" :open="splitMsgContent.isThinking"> <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 text-xl font-medium"> <summary class="collapse-title">
<span v-if="splitMsgContent.isThinking">Thinking<span v-if="isGenerating" class="loading loading-dots loading-md" style="vertical-align: middle;"></span></span> <span v-if="splitMsgContent.isThinking">
<span v-else >Thought Process</span> <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> </summary>
<vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown> <vue-markdown :source="splitMsgContent.cot" dir="auto" class="collapse-content"></vue-markdown>
</details> </details>

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

@ -50,6 +50,8 @@ const CONFIG_DEFAULT = {
apiKey: '', apiKey: '',
systemMessage: 'You are a helpful assistant.', systemMessage: 'You are a helpful assistant.',
showTokensPerSecond: false, showTokensPerSecond: false,
showThoughtInProgress: false,
excludeThoughtOnReq: true,
// make sure these default values are in sync with `common.h` // make sure these default values are in sync with `common.h`
samplers: 'edkypmxt', samplers: 'edkypmxt',
temperature: 0.8, temperature: 0.8,
@ -172,6 +174,7 @@ const MessageBubble = defineComponent({
config: Object, config: Object,
msg: Object, msg: Object,
isGenerating: Boolean, isGenerating: Boolean,
showThoughtInProgress: Boolean,
editUserMsgAndRegenerate: Function, editUserMsgAndRegenerate: Function,
regenerateMsg: Function, regenerateMsg: Function,
}, },
@ -191,27 +194,27 @@ const MessageBubble = defineComponent({
}, },
splitMsgContent() { splitMsgContent() {
const content = this.msg.content; const content = this.msg.content;
if (this.msg.role !== "assistant") { if (this.msg.role !== 'assistant') {
return { content }; return { content };
} }
let actualContent = ""; let actualContent = '';
let cot = ""; let cot = '';
let isThinking = false; let isThinking = false;
let thinkSplit = content.split("<think>", 2); let thinkSplit = content.split('<think>', 2);
actualContent += thinkSplit[0]; actualContent += thinkSplit[0];
while (thinkSplit[1] !== undefined) { while (thinkSplit[1] !== undefined) {
// <think> tag found // <think> tag found
thinkSplit = thinkSplit[1].split("</think>", 2); thinkSplit = thinkSplit[1].split('</think>', 2);
cot += thinkSplit[0]; cot += thinkSplit[0];
isThinking = true; isThinking = true;
if (thinkSplit[1] !== undefined) { if (thinkSplit[1] !== undefined) {
// </think> closing tag found // </think> closing tag found
isThinking = false; isThinking = false;
thinkSplit = thinkSplit[1].split("<think>", 2); thinkSplit = thinkSplit[1].split('<think>', 2);
actualContent += thinkSplit[0]; actualContent += thinkSplit[0];
} }
} }
return { content: actualContent, cot , isThinking}; return { content: actualContent, cot, isThinking };
}, },
}, },
methods: { methods: {