OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy J. Baek 2024-08-09 00:08:20 +02:00
parent 92e77d7b33
commit e9d14601a1
1 changed files with 67 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@ -81,7 +81,6 @@
import 'katex/dist/katex.min.css'; import 'katex/dist/katex.min.css';
import markedKatex from '$lib/utils/katex-extension'; import markedKatex from '$lib/utils/katex-extension';
const options = { const options = {
throwOnError: false throwOnError: false
}; };
@ -96,63 +95,9 @@
} }
})(); })();
const renderStyling = async () => { $: if (message?.done ?? false) {
await tick(); renderLatex();
}
if (tooltipInstance) {
tooltipInstance[0]?.destroy();
}
// renderLatex();
if (message.info) {
let tooltipContent = '';
if (message.info.openai) {
tooltipContent = `prompt_tokens: ${message.info.prompt_tokens ?? 'N/A'}<br/>
completion_tokens: ${message.info.completion_tokens ?? 'N/A'}<br/>
total_tokens: ${message.info.total_tokens ?? 'N/A'}`;
} else {
tooltipContent = `response_token/s: ${
`${
Math.round(
((message.info.eval_count ?? 0) / (message.info.eval_duration / 1000000000)) * 100
) / 100
} tokens` ?? 'N/A'
}<br/>
prompt_token/s: ${
Math.round(
((message.info.prompt_eval_count ?? 0) /
(message.info.prompt_eval_duration / 1000000000)) *
100
) / 100 ?? 'N/A'
} tokens<br/>
total_duration: ${
Math.round(((message.info.total_duration ?? 0) / 1000000) * 100) / 100 ??
'N/A'
}ms<br/>
load_duration: ${
Math.round(((message.info.load_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
}ms<br/>
prompt_eval_count: ${message.info.prompt_eval_count ?? 'N/A'}<br/>
prompt_eval_duration: ${
Math.round(((message.info.prompt_eval_duration ?? 0) / 1000000) * 100) /
100 ?? 'N/A'
}ms<br/>
eval_count: ${message.info.eval_count ?? 'N/A'}<br/>
eval_duration: ${
Math.round(((message.info.eval_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
}ms<br/>
approximate_total: ${approximateToHumanReadable(message.info.total_duration)}`;
}
tooltipInstance = tippy(`#info-${message.id}`, {
content: `<span class="text-xs" id="tooltip-${message.id}">${tooltipContent}</span>`,
allowHTML: true,
theme: 'dark',
arrow: false,
offset: [0, 4]
});
}
};
const renderLatex = () => { const renderLatex = () => {
let chatMessageElements = document let chatMessageElements = document
@ -845,31 +790,71 @@
{/if} {/if}
{#if message.info} {#if message.info}
<Tooltip content={$i18n.t('Generation Info')} placement="bottom"> <Tooltip
<button content={message.info.openai
class=" {isLastMessage ? `prompt_tokens: ${message.info.prompt_tokens ?? 'N/A'}<br/>
? 'visible' completion_tokens: ${message.info.completion_tokens ?? 'N/A'}<br/>
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap" total_tokens: ${message.info.total_tokens ?? 'N/A'}`
on:click={() => { : `response_token/s: ${
console.log(message); `${
}} Math.round(
id="info-{message.id}" ((message.info.eval_count ?? 0) /
> (message.info.eval_duration / 1000000000)) *
<svg 100
xmlns="http://www.w3.org/2000/svg" ) / 100
fill="none" } tokens` ?? 'N/A'
viewBox="0 0 24 24" }<br/>
stroke-width="2.3" prompt_token/s: ${
stroke="currentColor" Math.round(
class="w-4 h-4" ((message.info.prompt_eval_count ?? 0) /
(message.info.prompt_eval_duration / 1000000000)) *
100
) / 100 ?? 'N/A'
} tokens<br/>
total_duration: ${
Math.round(((message.info.total_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
}ms<br/>
load_duration: ${
Math.round(((message.info.load_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
}ms<br/>
prompt_eval_count: ${message.info.prompt_eval_count ?? 'N/A'}<br/>
prompt_eval_duration: ${
Math.round(((message.info.prompt_eval_duration ?? 0) / 1000000) * 100) / 100 ??
'N/A'
}ms<br/>
eval_count: ${message.info.eval_count ?? 'N/A'}<br/>
eval_duration: ${
Math.round(((message.info.eval_duration ?? 0) / 1000000) * 100) / 100 ?? 'N/A'
}ms<br/>
approximate_total: ${approximateToHumanReadable(message.info.total_duration)}`}
placement="top"
>
<Tooltip content={$i18n.t('Generation Info')} placement="bottom">
<button
class=" {isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition whitespace-pre-wrap"
on:click={() => {
console.log(message);
}}
id="info-{message.id}"
> >
<path <svg
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" viewBox="0 0 24 24"
/> stroke-width="2.3"
</svg> stroke="currentColor"
</button> class="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
/>
</svg>
</button>
</Tooltip>
</Tooltip> </Tooltip>
{/if} {/if}