Like/Dislike Button for Chatbot #5391

dawoodkhan82 · 2023-08-31T15:37:10Z

Description

Adds like/dislike events trigger and buttons for chatbot messages

Here's an example of how to use the "Like" event trigger:

def on_like(evt: gr.LikeData):
    if evt.liked:
        print(f"The chat message {evt.value} was liked at {evt.index} from {evt.target}")
    if evt.liked:
        print(f"The chat message {evt.value} was disliked at {evt.index} from {evt.target}")

with gr.Blocks() as demo:
    chatbot = gr.Chatbot([])
    chatbot.like(on_like, <input>, <output>)

Closes: #5250

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests

PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh
You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

gradio-pr-bot · 2023-08-31T15:37:27Z

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/af6314364b152c5594c83ef9f4ff9c4df358b460/gradio-3.41.2-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@af6314364b152c5594c83ef9f4ff9c4df358b460#subdirectory=client/python"

gradio-pr-bot · 2023-08-31T15:38:22Z

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
`@gradio/chatbot`	`minor`
`@gradio/icons`	`minor`
`@gradio/utils`	`minor`
`gradio`	`minor`

Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Like/Dislike Button for Chatbot

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

Maintainers can change the version label to modify the version bump.
If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

abidlabs · 2023-08-31T19:20:38Z

Works very nicely @dawoodkhan82!

In terms of the UI, are you thinking of putting the icons in the top right, similar to the copy button?

dawoodkhan82 · 2023-08-31T22:04:33Z

In terms of the UI, are you thinking of putting the icons in the top right, similar to the copy button?

Experimenting with a couple things to see what looks best. Probably just going to end up going with chatgpt UI

Shelliemayinforest · 2023-09-01T07:21:54Z

hi, is this a bug or is it my problem？
the like button is not on the top of the textbox.

when the answer is shorter, it is just ok.

dawoodkhan82 · 2023-09-01T14:33:19Z

@Shelliemayinforest Currently fixing the UI.

dawoodkhan82 · 2023-09-01T16:40:57Z

@abidlabs ready for re-review

abidlabs · 2023-09-01T17:07:34Z

Did something happen to the height of the chatbot bubbles @dawoodkhan82? I'm seeing this for a regular Chatbot:

And this is how the likable chatbot looks:

Test code:

import gradio as gr

def test(x: gr.LikeData):
    print(x.index, x.value, x.liked)

with gr.Blocks() as demo:
    c = gr.Chatbot([("abc", "def"), ("egh", "ijk")])
    c.like(test, None, None)
    
demo.launch()

abidlabs · 2023-09-01T17:13:20Z

Super nit: could we put the thumbs icon before the copy button, and align all of the copy buttons to be at the same x-coordinate? i.e. so that the copy buttons for the user message and bot message are horizontally aligned

abidlabs · 2023-09-01T17:14:22Z

Finally, it would be great to add an example of how to use the like() method in the docs.

Maybe we could add a section right after streaming in this Guide? https://www.gradio.app/guides/creating-a-custom-chatbot-with-blocks

dawoodkhan82 · 2023-09-01T17:15:19Z

Ah yeah I did mess up the height. Was testing with the copy button enabled. Will address in a bit

dawoodkhan82 · 2023-09-01T20:48:47Z

@abidlabs Ok the UI should be good now

dawoodkhan82 · 2023-09-01T21:01:20Z

@abidlabs Will update the guide in a separate PR

abidlabs · 2023-09-01T23:10:02Z

LGTM @dawoodkhan82! I added a small section in our Chatbot guide for now -- though feel free to edit or expand it.

jeffchy · 2023-09-20T06:48:02Z

How about adding a labeling field which accept comments similar to the like and dislike button?

abidlabs · 2023-09-20T15:18:16Z

Hi @jeffchy you could add a gr.Textbox underneath the gr.Chatbot -- and use that as input in the chatbot.like event.

PrashantSaikia · 2023-10-16T22:01:36Z

How do I store the like value in a json or yaml file? As of now, I think the like/unlike can only be clicked and it doesn't do anything else, am I right? What if I want to record the user preferences somewhere?

abidlabs · 2023-10-16T22:35:27Z

Hi @PrashantSaikia, you can run arbitrary code (such as logging to a csv) within the function that is attached to the .like() event, e.g. test() in the example below:

import gradio as gr

def test(x: gr.LikeData):
    print(x.index, x.value, x.liked)

with gr.Blocks() as demo:
    c = gr.Chatbot([("abc", "def"), ("egh", "ijk")])
    c.like(test, None, None)
    
demo.launch()

PrashantSaikia · 2023-10-17T09:18:17Z

Hi @abidlabs,

The problem with the .like() method is that it can only see the liked response, it does not see the query for whom the response is being given. Also, and perhaps this is outside the scope of my question strictly speaking, but as you can see my implementation of dumping the chat and upvote histories is real time. Ideally, I'd prefer to have a button that says "Download chat history", and upon clicking it, it would download the chat history including the upvoting history. Any pointers on how to do that?

abidlabs · 2023-10-17T18:06:55Z

Ideally, I'd like to have the upvote history as a column in the chat history dump.

If I understand correctly, you should be able to achieve this by also passing the chatbot as an input to your vote function. The chatbot input will pass in the history of messages:

import gradio as gr

def test(x: gr.LikeData, history):
    print(x.index, x.value, x.liked)
    print(history)

with gr.Blocks() as demo:
    c = gr.Chatbot([("abc", "def"), ("egh", "ijk")])
    c.like(test, c, None)
    
demo.launch()

abidlabs · 2023-10-17T18:08:43Z

Ideally, I'd prefer to have a button that says "Download chat history", and upon clicking it, it would download the chat history including the upvoting history. Any pointers on how to do that?

You could save the chatbot history to a file every time the chatbot runs, and then create a gr.Button() whose link parameter points to downloading that file. Haven't tested but I think it should work

PrashantSaikia · 2023-10-23T10:17:07Z

import gradio as gr

def test(x: gr.LikeData, history):
    print(x.index, x.value, x.liked)
    print(history)

with gr.Blocks() as demo:
    c = gr.Chatbot([("abc", "def"), ("egh", "ijk")])
    c.like(test, c, None)
    
demo.launch()

With this, there is no way to know what was the query whose response was being upvoted or downvoted, right? That's what I want to be added, I guess some kind of handle would need to be there that shows which user query precedes the chatbot response. Am I correct or is it already there?

abidlabs · 2023-10-23T19:05:41Z

Hi @PrashantSaikia you can get the query by looking at the index -- x.index will be something like [3, 1], which means the bot response (1) to the 4th message (since 0-indexed). If you look at the history[3][0], that will be the user query

PrashantSaikia · 2023-10-24T10:50:38Z

Ah, ok, got it now. So its these then:

query = history[x.index[0]][x.index[1]-1]
response = x.value
upvote = x.liked # true or false

abidlabs · 2023-10-24T18:38:36Z

Yes that looks right

dawoodkhan82 added 2 commits August 30, 2023 18:38

like

f2ad193

like button

92bcd63

dawoodkhan82 and others added 2 commits August 31, 2023 11:37

Merge branch 'main' into like-chatbot

bf3a43c

add changeset

33b593a

dawoodkhan82 added 2 commits September 1, 2023 10:33

Merge branch 'main' into like-chatbot

70fba4a

ui fixes

32f066c

Merge branch 'main' into like-chatbot

e65f479

dawoodkhan82 and others added 3 commits September 1, 2023 16:32

fixes

19a3cf3

format

c3810cb

add changeset

d4b2c33

dawoodkhan82 added the t: highlight A change that we wish to highlight label Sep 1, 2023

gradio-pr-bot and others added 3 commits September 1, 2023 20:39

add changeset

89cb901

fix test

c08447f

format

7beca96

test fix

33d4566

dawoodkhan82 and others added 2 commits September 1, 2023 17:17

chatbot test fix

8254578

update guide

3b30b1f

abidlabs approved these changes Sep 1, 2023

View reviewed changes

dawoodkhan82 merged commit abf1c57 into main Sep 1, 2023
16 checks passed

dawoodkhan82 deleted the like-chatbot branch September 1, 2023 23:20

pngwn mentioned this pull request Sep 1, 2023

chore: update versions #5361

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Like/Dislike Button for Chatbot #5391

Like/Dislike Button for Chatbot #5391

dawoodkhan82 commented Aug 31, 2023 •

edited

gradio-pr-bot commented Aug 31, 2023 •

edited

gradio-pr-bot commented Aug 31, 2023 •

edited

Something isn't right?

abidlabs commented Aug 31, 2023

dawoodkhan82 commented Aug 31, 2023

Shelliemayinforest commented Sep 1, 2023 •

edited

dawoodkhan82 commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

abidlabs commented Sep 1, 2023

abidlabs commented Sep 1, 2023 •

edited

abidlabs commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

abidlabs commented Sep 1, 2023

jeffchy commented Sep 20, 2023

abidlabs commented Sep 20, 2023

PrashantSaikia commented Oct 16, 2023

abidlabs commented Oct 16, 2023

PrashantSaikia commented Oct 17, 2023 •

edited

abidlabs commented Oct 17, 2023

abidlabs commented Oct 17, 2023

PrashantSaikia commented Oct 23, 2023 •

edited

abidlabs commented Oct 23, 2023

PrashantSaikia commented Oct 24, 2023

abidlabs commented Oct 24, 2023

Like/Dislike Button for Chatbot #5391

Like/Dislike Button for Chatbot #5391

Conversation

dawoodkhan82 commented Aug 31, 2023 • edited

Description

🎯 PRs Should Target Issues

Tests

gradio-pr-bot commented Aug 31, 2023 • edited

🪼 branch checks and previews

gradio-pr-bot commented Aug 31, 2023 • edited

🦄 change detected

This Pull Request includes changes to the following packages.

With the following changelog entry.

Something isn't right?

abidlabs commented Aug 31, 2023

dawoodkhan82 commented Aug 31, 2023

Shelliemayinforest commented Sep 1, 2023 • edited

dawoodkhan82 commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

abidlabs commented Sep 1, 2023

abidlabs commented Sep 1, 2023 • edited

abidlabs commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

dawoodkhan82 commented Sep 1, 2023

abidlabs commented Sep 1, 2023

jeffchy commented Sep 20, 2023

abidlabs commented Sep 20, 2023

PrashantSaikia commented Oct 16, 2023

abidlabs commented Oct 16, 2023

PrashantSaikia commented Oct 17, 2023 • edited

abidlabs commented Oct 17, 2023

abidlabs commented Oct 17, 2023

PrashantSaikia commented Oct 23, 2023 • edited

abidlabs commented Oct 23, 2023

PrashantSaikia commented Oct 24, 2023

abidlabs commented Oct 24, 2023

dawoodkhan82 commented Aug 31, 2023 •

edited

gradio-pr-bot commented Aug 31, 2023 •

edited

gradio-pr-bot commented Aug 31, 2023 •

edited

Shelliemayinforest commented Sep 1, 2023 •

edited

abidlabs commented Sep 1, 2023 •

edited

PrashantSaikia commented Oct 17, 2023 •

edited

PrashantSaikia commented Oct 23, 2023 •

edited