From 02fb8f5a1f64aa9f370efe66d672c40732505926 Mon Sep 17 00:00:00 2001 From: aliabid94 Date: Fri, 3 Mar 2023 18:17:48 -0800 Subject: [PATCH] Updated chat ui (#3370) * test * changes * chagnes * changes * changes * changes * changes * Update CHANGELOG.md * changes * Update demo/chatbot_multimodal/run.py Co-authored-by: Abubakar Abid * Update demo/chatbot_simple_demo/run.py Co-authored-by: Abubakar Abid * changes * changes * changes --------- Co-authored-by: Abubakar Abid --- CHANGELOG.md | 3 +- demo/chatbot_multimodal/run.ipynb | 2 +- demo/chatbot_multimodal/run.py | 20 +-- demo/chatbot_simple_demo/run.ipynb | 1 + demo/chatbot_simple_demo/run.py | 17 +++ gradio/components.py | 10 +- gradio/utils.py | 1 + .../06_other-tutorials/creating-a-chatbot.md | 13 +- .../app/src/components/Chatbot/Chatbot.svelte | 3 +- .../src/components/Chatbot/Chatbot.test.ts | 6 +- ui/packages/chatbot/src/ChatBot.svelte | 118 +++++++++--------- ui/packages/theme/src/generate_theme.cjs | 24 +--- ui/pnpm-lock.yaml | 93 +++++++------- website/homepage/README.md | 2 +- 14 files changed, 163 insertions(+), 150 deletions(-) create mode 100644 demo/chatbot_simple_demo/run.ipynb create mode 100644 demo/chatbot_simple_demo/run.py diff --git a/CHANGELOG.md b/CHANGELOG.md index 38c4e8d43a..2c6cda6910 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -76,10 +76,11 @@ component by [@abidlabs](https://github.com/abidlabs) in [PR 3275](https://githu - Flaky python tests no longer cancel non-flaky tests by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3344](https://github.com/gradio-app/gradio/pull/3344) ## Breaking Changes: -No changes to highlight. +- Chatbot bubble colors can no longer be set by `chatbot.style(color_map=)` by [@aliabid94] in [PR 3370](https://github.com/gradio-app/gradio/pull/3370) ## Full Changelog: - Fixed comment typo in components.py by [@eltociear](https://github.com/eltociear) in [PR 3235](https://github.com/gradio-app/gradio/pull/3235) +- Cleaned up chatbot ui look and feel by [@aliabid94] in [PR 3370](https://github.com/gradio-app/gradio/pull/3370) ## Contributors Shoutout: No changes to highlight. diff --git a/demo/chatbot_multimodal/run.ipynb b/demo/chatbot_multimodal/run.ipynb index 751ad31a3d..efe0ebfcab 100644 --- a/demo/chatbot_multimodal/run.ipynb +++ b/demo/chatbot_multimodal/run.ipynb @@ -1 +1 @@ -{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def add_text(state, text):\n", " state = state + [(text, text + \"?\")]\n", " return state, state\n", "\n", "def add_image(state, image):\n", " state = state + [(f\"![](/file={image.name})\", \"Cool pic!\")]\n", " return state, state\n", "\n", "\n", "with gr.Blocks(css=\"#chatbot .overflow-y-auto{height:500px}\") as demo:\n", " chatbot = gr.Chatbot(elem_id=\"chatbot\")\n", " state = gr.State([])\n", " \n", " with gr.Row():\n", " with gr.Column(scale=0.85):\n", " txt = gr.Textbox(show_label=False, placeholder=\"Enter text and press enter, or upload an image\").style(container=False)\n", " with gr.Column(scale=0.15, min_width=0):\n", " btn = gr.UploadButton(\"\ud83d\uddbc\ufe0f\", file_types=[\"image\"])\n", " \n", " txt.submit(add_text, [state, txt], [state, chatbot])\n", " txt.submit(lambda :\"\", None, txt)\n", " btn.upload(add_image, [state, btn], [state, chatbot])\n", " \n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file +{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_multimodal"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from urllib.parse import quote\n", "\n", "def add_text(history, text):\n", " history = history + [(text, text + \"?\")]\n", " return history\n", "\n", "def add_image(history, image):\n", " history = history + [(f\"![](/file={quote(image.name)})\", \"Cool pic!\")]\n", " return history\n", "\n", "\n", "with gr.Blocks(css=\"#chatbot .overflow-y-auto{height:500px}\") as demo:\n", " chatbot = gr.Chatbot(elem_id=\"chatbot\")\n", " \n", " with gr.Row():\n", " with gr.Column(scale=0.85):\n", " txt = gr.Textbox(show_label=False, placeholder=\"Enter text and press enter, or upload an image\").style(container=False)\n", " with gr.Column(scale=0.15, min_width=0):\n", " btn = gr.UploadButton(\"\ud83d\uddbc\ufe0f\", file_types=[\"image\"])\n", " \n", " txt.submit(add_text, [chatbot, txt], [chatbot])\n", " txt.submit(lambda :\"\", None, txt, queue=False)\n", " btn.upload(add_image, [chatbot, btn], [chatbot])\n", " \n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file diff --git a/demo/chatbot_multimodal/run.py b/demo/chatbot_multimodal/run.py index cf144ee70d..dc080f3294 100644 --- a/demo/chatbot_multimodal/run.py +++ b/demo/chatbot_multimodal/run.py @@ -1,17 +1,17 @@ import gradio as gr +from urllib.parse import quote -def add_text(state, text): - state = state + [(text, text + "?")] - return state, state +def add_text(history, text): + history = history + [(text, text + "?")] + return history -def add_image(state, image): - state = state + [(f"![](/file={image.name})", "Cool pic!")] - return state, state +def add_image(history, image): + history = history + [(f"![](/file={quote(image.name)})", "Cool pic!")] + return history with gr.Blocks(css="#chatbot .overflow-y-auto{height:500px}") as demo: chatbot = gr.Chatbot(elem_id="chatbot") - state = gr.State([]) with gr.Row(): with gr.Column(scale=0.85): @@ -19,9 +19,9 @@ with gr.Blocks(css="#chatbot .overflow-y-auto{height:500px}") as demo: with gr.Column(scale=0.15, min_width=0): btn = gr.UploadButton("🖼️", file_types=["image"]) - txt.submit(add_text, [state, txt], [state, chatbot]) - txt.submit(lambda :"", None, txt) - btn.upload(add_image, [state, btn], [state, chatbot]) + txt.submit(add_text, [chatbot, txt], [chatbot]) + txt.submit(lambda :"", None, txt, queue=False) + btn.upload(add_image, [chatbot, btn], [chatbot]) if __name__ == "__main__": demo.launch() \ No newline at end of file diff --git a/demo/chatbot_simple_demo/run.ipynb b/demo/chatbot_simple_demo/run.ipynb new file mode 100644 index 0000000000..c513e277c8 --- /dev/null +++ b/demo/chatbot_simple_demo/run.ipynb @@ -0,0 +1 @@ +{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_simple_demo"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "\n", "def respond(chat_history, message):\n", " response = random.choice([\"Yes\", \"No\"])\n", " return chat_history + [[message, response]]\n", "\n", "with gr.Blocks() as demo:\n", " chatbot = gr.Chatbot()\n", " msg = gr.Textbox()\n", " clear = gr.Button(\"Clear\")\n", "\n", " msg.submit(respond, [chatbot, msg], chatbot)\n", " clear.click(lambda: None, None, chatbot, queue=False)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file diff --git a/demo/chatbot_simple_demo/run.py b/demo/chatbot_simple_demo/run.py new file mode 100644 index 0000000000..6a572eee1d --- /dev/null +++ b/demo/chatbot_simple_demo/run.py @@ -0,0 +1,17 @@ +import gradio as gr +import random + +def respond(chat_history, message): + response = random.choice(["Yes", "No"]) + return chat_history + [[message, response]] + +with gr.Blocks() as demo: + chatbot = gr.Chatbot() + msg = gr.Textbox() + clear = gr.Button("Clear") + + msg.submit(respond, [chatbot, msg], chatbot) + clear.click(lambda: None, None, chatbot, queue=False) + +if __name__ == "__main__": + demo.launch() \ No newline at end of file diff --git a/gradio/components.py b/gradio/components.py index 71ef07760d..6304fb8c16 100644 --- a/gradio/components.py +++ b/gradio/components.py @@ -4004,16 +4004,12 @@ class Chatbot(Changeable, IOComponent, JSONSerializable): ) return y - def style(self, *, color_map: Tuple[str, str] | None = None, **kwargs): + def style(self, **kwargs): """ This method can be used to change the appearance of the Chatbot component. - Parameters: - color_map: Tuple containing colors to apply to user and response chat bubbles. - Returns: - """ - if color_map is not None: - self._style["color_map"] = color_map + if kwargs.get("color_map") is not None: + warnings.warn("The 'color_map' parameter has been deprecated.") return Component.style( self, diff --git a/gradio/utils.py b/gradio/utils.py index 705b6d12e3..f9c0366015 100644 --- a/gradio/utils.py +++ b/gradio/utils.py @@ -912,6 +912,7 @@ def get_markdown_parser() -> MarkdownIt: "linkify": True, "typographer": True, "html": True, + "breaks": True, }, ) .use(dollarmath_plugin, renderer=tex2svg, allow_digits=False) diff --git a/guides/06_other-tutorials/creating-a-chatbot.md b/guides/06_other-tutorials/creating-a-chatbot.md index d57ec80e13..0f41bac039 100644 --- a/guides/06_other-tutorials/creating-a-chatbot.md +++ b/guides/06_other-tutorials/creating-a-chatbot.md @@ -13,7 +13,18 @@ This tutorial will show how to take a pretrained chatbot model and deploy it wit -Chatbots are *stateful*, meaning that the model's prediction can change depending on how the user has previously interacted with the model. So, in this tutorial, we will also cover how to use **state** with Gradio demos. +## A Simple Chatbot Demo + +Let's start with a simple demo, with no actual model. Our bot will randomly respond "yes" or "no" to any input. + +$code_chatbot_simple_demo +$demo_chatbot_simple_demo + +The chatbot value stores the entire history of the conversation, as a list of response pairs between the user and bot. We pass the entire history of the chatbot to the function and back to the component. To clear the chatbot, we pass it `None`. + +### Using a Model + +Chatbots are *stateful*, meaning we need to track how the user has previously interacted with the model. So, in this tutorial, we will also cover how to use **state** with Gradio demos. ### Prerequisites diff --git a/ui/packages/app/src/components/Chatbot/Chatbot.svelte b/ui/packages/app/src/components/Chatbot/Chatbot.svelte index ddad43a61c..63b0bf4589 100644 --- a/ui/packages/app/src/components/Chatbot/Chatbot.svelte +++ b/ui/packages/app/src/components/Chatbot/Chatbot.svelte @@ -12,6 +12,7 @@ export let label: string; export let show_label: boolean = true; export let color_map: Record = {}; + export let root: string; $: if (!style.color_map && Object.keys(color_map).length) { style.color_map = color_map; @@ -30,7 +31,7 @@ /> {/if} { const { getAllByTestId } = render(Chatbot, { loading_status, label: "hello", - value: [["user message one", "bot message one"]] + value: [["user message one", "bot message one"]], + root: "" }); const bot = getAllByTestId("user")[0]; @@ -35,7 +36,8 @@ describe("Chatbot", () => { const { component, getAllByTestId } = render(Chatbot, { loading_status, label: "hello", - value: [["user message one", "bot message one"]] + value: [["user message one", "bot message one"]], + root: "" }); const bot = getAllByTestId("user"); diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte index eef200a6c4..f0a4bf9460 100644 --- a/ui/packages/chatbot/src/ChatBot.svelte +++ b/ui/packages/chatbot/src/ChatBot.svelte @@ -1,19 +1,25 @@
@@ -64,7 +52,6 @@ class:latest={i === _value.length - 1} class="message user" class:hide={message[0] === null} - style={"background-color:" + _colors[0]} > {@html message[0]}
@@ -73,17 +60,12 @@ class:latest={i === _value.length - 1} class="message bot" class:hide={message[1] === null} - style={"background-color:" + _colors[1]} > {@html message[1]} {/each} {#if pending_message} -
+
 
@@ -96,61 +78,58 @@