UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-25 05:18:15 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

enh: detailed 1-10 rating

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2024-11-19 20:12:22 -08:00
parent 7966367107
commit e54879aeb1
2 changed files with 97 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/lib/components/chat/Messages/RateComment.svelte
View File

@ -38,6 +38,7 @@
let selectedReason = null; let selectedReason = null;
let comment = ''; let comment = '';
let detailedRating = null;
let selectedModel = null; let selectedModel = null;
$: if (message?.annotation?.rating === 1) { $: if (message?.annotation?.rating === 1) {
@ -56,6 +57,7 @@
tags = (message?.annotation?.tags ?? []).map((tag) => ({ tags = (message?.annotation?.tags ?? []).map((tag) => ({
name: tag name: tag
})); }));
detailedRating = message?.annotation?.details?.rating ?? null;
}; };
onMount(() => { onMount(() => {
@ -79,7 +81,10 @@
dispatch('save', { dispatch('save', {
reason: selectedReason, reason: selectedReason,
comment: comment, comment: comment,
tags: tags.map((tag) => tag.name) tags: tags.map((tag) => tag.name),
details: {
rating: detailedRating
}
}); });
toast.success($i18n.t('Thanks for your feedback!')); toast.success($i18n.t('Thanks for your feedback!'));
@ -100,7 +105,9 @@
id="message-feedback-{message.id}" id="message-feedback-{message.id}"
> >
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class=" text-sm">{$i18n.t('Tell us more:')}</div> <div class="text-sm font-medium">{$i18n.t('How would you rate this response?')}</div>
<!-- <div class=" text-sm">{$i18n.t('Tell us more:')}</div> -->
<button <button
on:click={() => { on:click={() => {
@ -120,53 +127,89 @@
</button> </button>
</div> </div>
{#if reasons.length > 0} <div class="w-full flex justify-center">
<div class="flex flex-wrap gap-1.5 text-sm mt-2.5"> <div class=" relative w-fit">
{#each reasons as reason} <div class="mt-1.5 w-fit flex gap-1 pb-5">
<button <!-- 1-10 scale -->
class="px-3 py-0.5 border border-gray-50 dark:border-gray-850 hover:bg-gray-100 dark:hover:bg-gray-850 {selectedReason === {#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating}
reason <button
? 'bg-gray-200 dark:bg-gray-800' class="size-7 text-sm border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
: ''} transition rounded-lg" rating
on:click={() => { ? 'bg-gray-100 dark:bg-gray-800'
selectedReason = reason; : ''} transition rounded-full disabled:cursor-not-allowed disabled:bg-white disabled:dark:bg-gray-900"
}} on:click={() => {
> detailedRating = rating;
{#if reason === 'accurate_information'} }}
{$i18n.t('Accurate information')} disabled={message?.annotation?.rating === -1 ? rating > 5 : rating < 6}
{:else if reason === 'followed_instructions_perfectly'} >
{$i18n.t('Followed instructions perfectly')} {rating}
{:else if reason === 'showcased_creativity'} </button>
{$i18n.t('Showcased creativity')} {/each}
{:else if reason === 'positive_attitude'} </div>
{$i18n.t('Positive attitude')}
{:else if reason === 'attention_to_detail'} <div class="absolute bottom-0 left-0 right-0 flex justify-between text-xs">
{$i18n.t('Attention to detail')} <div>
{:else if reason === 'thorough_explanation'} 1 - {$i18n.t('Awful')}
{$i18n.t('Thorough explanation')} </div>
{:else if reason === 'dont_like_the_style'}
{$i18n.t("Don't like the style")} <div>
{:else if reason === 'too_verbose'} 10 - {$i18n.t('Amazing')}
{$i18n.t('Too verbose')} </div>
{:else if reason === 'not_helpful'} </div>
{$i18n.t('Not helpful')}
{:else if reason === 'not_factually_correct'}
{$i18n.t('Not factually correct')}
{:else if reason === 'didnt_fully_follow_instructions'}
{$i18n.t("Didn't fully follow instructions")}
{:else if reason === 'refused_when_it_shouldnt_have'}
{$i18n.t("Refused when it shouldn't have")}
{:else if reason === 'being_lazy'}
{$i18n.t('Being lazy')}
{:else if reason === 'other'}
{$i18n.t('Other')}
{:else}
{reason}
{/if}
</button>
{/each}
</div> </div>
{/if} </div>
<div>
{#if reasons.length > 0}
<div class="text-sm mt-1.5 font-medium">{$i18n.t('Why?')}</div>
<div class="flex flex-wrap gap-1.5 text-sm mt-1.5">
{#each reasons as reason}
<button
class="px-3 py-0.5 border border-gray-50 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedReason ===
reason
? 'bg-gray-100 dark:bg-gray-800'
: ''} transition rounded-xl"
on:click={() => {
selectedReason = reason;
}}
>
{#if reason === 'accurate_information'}
{$i18n.t('Accurate information')}
{:else if reason === 'followed_instructions_perfectly'}
{$i18n.t('Followed instructions perfectly')}
{:else if reason === 'showcased_creativity'}
{$i18n.t('Showcased creativity')}
{:else if reason === 'positive_attitude'}
{$i18n.t('Positive attitude')}
{:else if reason === 'attention_to_detail'}
{$i18n.t('Attention to detail')}
{:else if reason === 'thorough_explanation'}
{$i18n.t('Thorough explanation')}
{:else if reason === 'dont_like_the_style'}
{$i18n.t("Don't like the style")}
{:else if reason === 'too_verbose'}
{$i18n.t('Too verbose')}
{:else if reason === 'not_helpful'}
{$i18n.t('Not helpful')}
{:else if reason === 'not_factually_correct'}
{$i18n.t('Not factually correct')}
{:else if reason === 'didnt_fully_follow_instructions'}
{$i18n.t("Didn't fully follow instructions")}
{:else if reason === 'refused_when_it_shouldnt_have'}
{$i18n.t("Refused when it shouldn't have")}
{:else if reason === 'being_lazy'}
{$i18n.t('Being lazy')}
{:else if reason === 'other'}
{$i18n.t('Other')}
{:else}
{reason}
{/if}
</button>
{/each}
</div>
{/if}
</div>
<div class="mt-2"> <div class="mt-2">
<textarea <textarea
@ -195,7 +238,7 @@
</div> </div>
<button <button
class=" bg-emerald-700 hover:bg-emerald-800 transition text-white text-sm font-medium rounded-xl px-3.5 py-1.5" class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
on:click={() => { on:click={() => {
saveHandler(); saveHandler();
}} }}

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

@ -340,19 +340,16 @@
let feedbackLoading = false; let feedbackLoading = false;
const feedbackHandler = async ( const feedbackHandler = async (rating: number | null = null, details: object | null = null) => {
rating: number | null = null,
annotation: object | null = null
) => {
feedbackLoading = true; feedbackLoading = true;
console.log('Feedback', rating, annotation); console.log('Feedback', rating, details);
const updatedMessage = { const updatedMessage = {
...message, ...message,
annotation: { annotation: {
...(message?.annotation ?? {}), ...(message?.annotation ?? {}),
...(rating !== null ? { rating: rating } : {}), ...(rating !== null ? { rating: rating } : {}),
...(annotation ? annotation : {}) ...(details ? details : {})
} }
}; };
@ -429,7 +426,7 @@
await tick(); await tick();
if (!annotation) { if (!details) {
showRateComment = true; showRateComment = true;
if (!updatedMessage.annotation?.tags) { if (!updatedMessage.annotation?.tags) {
@ -1194,9 +1191,7 @@
bind:show={showRateComment} bind:show={showRateComment}
on:save={async (e) => { on:save={async (e) => {
await feedbackHandler(null, { await feedbackHandler(null, {
tags: e.detail.tags, ...e.detail
comment: e.detail.comment,
reason: e.detail.reason
}); });
}} }}
/> />