| {"guide": {"name": "chatbot-specific-events", "category": "chatbots", "pretty_category": "Chatbots", "guide_index": 4, "absolute_index": 28, "pretty_name": "Chatbot Specific Events", "content": "# Liking, Retrying and Undoing Messages\n\n\n\nUsers expect modern chatbot UIs to let them easily interact with individual chat messages: for example, users might want to retry message generations, undo messages, or click on a like/dislike button to upvote or downvote a generated message.\n\nThankfully, the Gradio Chatbot exposes three events, `.retry`, `.undo`, and `like`, to let you build this functionality into your application. As an application developer, you can attach functions to any of these event, allowing you to run arbitrary Python functions e.g. when a user interacts with a message.\n\nIn this demo, we'll build a UI that implements these events. You can see our finished demo deployed on Hugging Face spaces here:\n\n<gradio-app space='gradio/chatbot_retry_undo_like'></gradio-app>\n <p class='tip'>\n <span class=\"inline-flex\" style=\"align-items: baseline\">\n <svg class=\"self-center w-5 h-5 mx-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.25 18.7089C9.25 18.2894 9.58579 17.9494 10 17.9494H14C14.4142 17.9494 14.75 18.2894 14.75 18.7089C14.75 19.1283 14.4142 19.4684 14 19.4684H10C9.58579 19.4684 9.25 19.1283 9.25 18.7089ZM9.91667 21.2405C9.91667 20.821 10.2525 20.481 10.6667 20.481H13.3333C13.7475 20.481 14.0833 20.821 14.0833 21.2405C14.0833 21.66 13.7475 22 13.3333 22H10.6667C10.2525 22 9.91667 21.66 9.91667 21.2405Z\"/>\n <path d=\"M7.41058 13.8283L8.51463 14.8807C8.82437 15.1759 9 15.5875 9 16.0182C9 16.6653 9.518 17.1899 10.157 17.1899H13.843C14.482 17.1899 15 16.6653 15 16.0182C15 15.5875 15.1756 15.1759 15.4854 14.8807L16.5894 13.8283C18.1306 12.3481 18.9912 10.4034 18.9999 8.3817L19 8.29678C19 4.84243 15.866 2 12 2C8.13401 2 5 4.84243 5 8.29678L5.00007 8.3817C5.00875 10.4034 5.86939 12.3481 7.41058 13.8283Z\"/>\n </svg>\n <span><strong>Tip:</strong></span>\n </span>\n `gr.ChatInterface` automatically uses the `retry` and `.undo` events so it's best to start there in order get a fully working application quickly.\n </p>\n \n\n\n## The UI\n\nFirst, we'll build the UI without handling these events and build from there. \nWe'll use the Hugging Face InferenceClient in order to get started without setting up\nany API keys.\n\nThis is what the first draft of our application looks like:\n\n```python\nfrom huggingface_hub import InferenceClient\nimport gradio as gr\n\nclient = InferenceClient()\n\ndef respond(\n prompt: str,\n history,\n):\n if not history:\n history = [{\"role\": \"system\", \"content\": \"You are a friendly chatbot\"}]\n history.append({\"role\": \"user\", \"content\": prompt})\n\n yield history\n\n response = {\"role\": \"assistant\", \"content\": \"\"}\n for message in client.chat_completion(\n history,\n temperature=0.95,\n top_p=0.9,\n max_tokens=512,\n stream=True,\n model=\"HuggingFaceH4/zephyr-7b-beta\"\n ):\n response[\"content\"] += message.choices[0].delta.content or \"\"\n\n yield history + [response]\n\n\nwith gr.Blocks() as demo:\n gr.Markdown(\"# Chat with Hugging Face Zephyr 7b \ud83e\udd17\")\n chatbot = gr.Chatbot(\n label=\"Agent\",\n type=\"messages\",\n avatar_images=(\n None,\n \"https://em-content.zobj.net/source/twitter/376/hugging-face_1f917.png\",\n ),\n )\n prompt = gr.Textbox(max_lines=1, label=\"Chat Message\")\n prompt.submit(respond, [prompt, chatbot], [chatbot])\n prompt.submit(lambda: \"\", None, [prompt])\n\n\nif __name__ == \"__main__\":\n demo.launch()\n```\n\n## The Undo Event\n\nOur undo event will populate the textbox with the previous user message and also remove all subsequent assistant responses.\n\nIn order to know the index of the last user message, we can pass `gr.UndoData` to our event handler function like so:\n\n``python\ndef handle_undo(history, undo_data: gr.UndoData):\n return history[:undo_data.index], history[undo_data.index]['content']\n```\n\nWe then pass this function to the `undo` event!\n\n```python\n chatbot.undo(handle_undo, chatbot, [chatbot, prompt])\n```\n\nYou'll notice that every bot response will now have an \"undo icon\" you can use to undo the response - \n\n\n <p class='tip'>\n <span class=\"inline-flex\" style=\"align-items: baseline\">\n <svg class=\"self-center w-5 h-5 mx-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.25 18.7089C9.25 18.2894 9.58579 17.9494 10 17.9494H14C14.4142 17.9494 14.75 18.2894 14.75 18.7089C14.75 19.1283 14.4142 19.4684 14 19.4684H10C9.58579 19.4684 9.25 19.1283 9.25 18.7089ZM9.91667 21.2405C9.91667 20.821 10.2525 20.481 10.6667 20.481H13.3333C13.7475 20.481 14.0833 20.821 14.0833 21.2405C14.0833 21.66 13.7475 22 13.3333 22H10.6667C10.2525 22 9.91667 21.66 9.91667 21.2405Z\"/>\n <path d=\"M7.41058 13.8283L8.51463 14.8807C8.82437 15.1759 9 15.5875 9 16.0182C9 16.6653 9.518 17.1899 10.157 17.1899H13.843C14.482 17.1899 15 16.6653 15 16.0182C15 15.5875 15.1756 15.1759 15.4854 14.8807L16.5894 13.8283C18.1306 12.3481 18.9912 10.4034 18.9999 8.3817L19 8.29678C19 4.84243 15.866 2 12 2C8.13401 2 5 4.84243 5 8.29678L5.00007 8.3817C5.00875 10.4034 5.86939 12.3481 7.41058 13.8283Z\"/>\n </svg>\n <span><strong>Tip:</strong></span>\n </span>\n You can also access the content of the user message with `undo_data.value`\n </p>\n \n\n## The Retry Event\n\nThe retry event will work similarly. We'll use `gr.RetryData` to get the index of the previous user message and remove all the subsequent messages from the history. Then we'll use the `respond` function to generate a new response. We could also get the previous prompt via the `value` property of `gr.RetryData`.\n\n```python\ndef handle_retry(history, retry_data: gr.RetryData):\n new_history = history[:retry_data.index]\n previous_prompt = history[retry_data.index]['content']\n yield from respond(previous_prompt, new_history)\n\n...\n\nchatbot.retry(handle_retry, chatbot, [chatbot])\n```\n\nYou'll see that the bot messages have a \"retry\" icon now -\n\n\n <p class='tip'>\n <span class=\"inline-flex\" style=\"align-items: baseline\">\n <svg class=\"self-center w-5 h-5 mx-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.25 18.7089C9.25 18.2894 9.58579 17.9494 10 17.9494H14C14.4142 17.9494 14.75 18.2894 14.75 18.7089C14.75 19.1283 14.4142 19.4684 14 19.4684H10C9.58579 19.4684 9.25 19.1283 9.25 18.7089ZM9.91667 21.2405C9.91667 20.821 10.2525 20.481 10.6667 20.481H13.3333C13.7475 20.481 14.0833 20.821 14.0833 21.2405C14.0833 21.66 13.7475 22 13.3333 22H10.6667C10.2525 22 9.91667 21.66 9.91667 21.2405Z\"/>\n <path d=\"M7.41058 13.8283L8.51463 14.8807C8.82437 15.1759 9 15.5875 9 16.0182C9 16.6653 9.518 17.1899 10.157 17.1899H13.843C14.482 17.1899 15 16.6653 15 16.0182C15 15.5875 15.1756 15.1759 15.4854 14.8807L16.5894 13.8283C18.1306 12.3481 18.9912 10.4034 18.9999 8.3817L19 8.29678C19 4.84243 15.866 2 12 2C8.13401 2 5 4.84243 5 8.29678L5.00007 8.3817C5.00875 10.4034 5.86939 12.3481 7.41058 13.8283Z\"/>\n </svg>\n <span><strong>Tip:</strong></span>\n </span>\n The Hugging Face inference API caches responses, so in this demo, the retry button will not generate a new response.\n </p>\n \n\n## The Like Event\n\nBy now you should hopefully be seeing the pattern!\nTo let users like a message, we'll add a `.like` event to our chatbot.\nWe'll pass it a function that accepts a `gr.LikeData` object.\nIn this case, we'll just print the message that was either liked or disliked.\n\n```python\ndef handle_like(data: gr.LikeData):\n if data.liked:\n print(\"You upvoted this response: \", data.value)\n else:\n print(\"You downvoted this response: \", data.value)\n\n...\n\nchatbot.like(vote, None, None)\n```\n\n\n## Conclusion\n\nThat's it! You now know how you can implement the retry, undo, and like events for the Chatbot.\n\n\n\n", "tags": ["LLM", "CHAT"], "spaces": [], "url": "/guides/chatbot-specific-events/", "contributor": null}} |