\n \n \n Tip:\n \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
\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\n \n \n Tip:\n \n You can also access the content of the user message with `undo_data.value`\n
\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\n \n \n Tip:\n \n The Hugging Face inference API caches responses, so in this demo, the retry button will not generate a new response.\n
\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}}