Repository: gradio-app/gradio
Pull request: Chatbot Guide Update
# Description
Update chatbot guide to use blocks instead of interface. Also updated demo
 + Includes a quick chatbot component fix (set max height of messages + allow word wrap)
Please include: 
* relevant motivation
* a summary of the change 
* which issue is fixed. 
* any additional dependencies that are required for this change.

Closes: #3000 

# Checklist:

- [ ] I have performed a self-review of my own code
- [ ] I have added a short summary of my change to the CHANGELOG.md
- [ ] My code follows the style guidelines of this project
- [ ] I have commented my code in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes


# A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by `[@myusername](link-to-your-github-profile)` in `[PR 11111](https://github.com/gradio-app/gradio/pull/11111)`".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the 
GitHub web UI since that lets you upload files directly via drag-and-drop.

Problem statement:
Update Chatbot Guide
- [ ] I have searched to see if a similar issue already exists.


**Is your feature request related to a problem? Please describe.**  
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

**Describe the solution you'd like**  
Update Chatbot Guide to include a blocks version. Also include markdown support examples.

**Additional context**  
Add any other context or screenshots about the feature request here.

Hints from issue discussion:

Commit message: Merge branch 'main' into chatbot-guide

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4995d8218e..fa24f479fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,7 +17,7 @@ Previously photos uploaded via iOS would be rotated after processing. This has b
 No changes to highlight.
 
 ## Documentation Changes:
-No changes to highlight.
+* Update chatbot guide to include blocks demo and markdown support section by [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3023](https://github.com/gradio-app/gradio/pull/3023)
 
 ## Testing and Infrastructure Changes:
 No changes to highlight.
diff --git a/demo/chatbot_demo/run.ipynb b/demo/chatbot_demo/run.ipynb
index 9f5a9662d6..141649782f 100644
--- a/demo/chatbot_demo/run.ipynb
+++ b/demo/chatbot_demo/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_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 random\n", "import gradio as gr\n", "\n", "def chat(message, history):\n", "    history = history or []\n", "    message = message.lower()\n", "    if message.startswith(\"how many\"):\n", "        response = str(random.randint(1, 10))\n", "    elif message.startswith(\"how\"):\n", "        response = random.choice([\"Great\", \"Good\", \"Okay\", \"Bad\"])\n", "    elif message.startswith(\"where\"):\n", "        response = random.choice([\"Here\", \"There\", \"Somewhere\"])\n", "    else:\n", "        response = \"I don't know\"\n", "    history.append((message, response))\n", "    return history, history\n", "\n", "chatbot = gr.Chatbot().style(color_map=(\"green\", \"pink\"))\n", "demo = gr.Interface(\n", "    chat,\n", "    [\"text\", \"state\"],\n", "    [chatbot, \"state\"],\n", "    allow_flagging=\"never\",\n", ")\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_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", "from transformers import AutoModelForCausalLM, AutoTokenizer\n", "import torch\n", "\n", "tokenizer = AutoTokenizer.from_pretrained(\"microsoft/DialoGPT-medium\")\n", "model = AutoModelForCausalLM.from_pretrained(\"microsoft/DialoGPT-medium\")\n", "\n", "def predict(input, history=[]):\n", "    # tokenize the new input sentence\n", "    new_user_input_ids = tokenizer.encode(input + tokenizer.eos_token, return_tensors='pt')\n", "\n", "    # append the new user input tokens to the chat history\n", "    bot_input_ids = torch.cat([torch.LongTensor(history), new_user_input_ids], dim=-1)\n", "\n", "    # generate a response \n", "    history = model.generate(bot_input_ids, max_length=1000, pad_token_id=tokenizer.eos_token_id).tolist()\n", "\n", "    # convert the tokens to text, and then split the responses into lines\n", "    response = tokenizer.decode(history[0]).split(\"
\")\n", "    response = [(response[i], response[i+1]) for i in range(0, len(response)-1, 2)]  # convert to tuples of list\n", "    return response, history\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot()\n", "    state = gr.State([])\n", "\n", "    with gr.Row():\n", "        txt = gr.Textbox(show_label=False, placeholder=\"Enter text and press enter\").style(container=False)\n", "            \n", "    txt.submit(predict, [txt, state], [chatbot, state])\n", "            \n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/chatbot_demo/run.py b/demo/chatbot_demo/run.py
index fb72ff7734..a742c925ee 100644
--- a/demo/chatbot_demo/run.py
+++ b/demo/chatbot_demo/run.py
@@ -1,26 +1,33 @@
-import random
 import gradio as gr
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import torch
 
-def chat(message, history):
-    history = history or []
-    message = message.lower()
-    if message.startswith("how many"):
-        response = str(random.randint(1, 10))
-    elif message.startswith("how"):
-        response = random.choice(["Great", "Good", "Okay", "Bad"])
-    elif message.startswith("where"):
-        response = random.choice(["Here", "There", "Somewhere"])
-    else:
-        response = "I don't know"
-    history.append((message, response))
-    return history, history
+tokenizer = AutoTokenizer.from_pretrained("microsoft/DialoGPT-medium")
+model = AutoModelForCausalLM.from_pretrained("microsoft/DialoGPT-medium")
 
-chatbot = gr.Chatbot().style(color_map=("green", "pink"))
-demo = gr.Interface(
-    chat,
-    ["text", "state"],
-    [chatbot, "state"],
-    allow_flagging="never",
-)
+def predict(input, history=[]):
+    # tokenize the new input sentence
+    new_user_input_ids = tokenizer.encode(input + tokenizer.eos_token, return_tensors='pt')
+
+    # append the new user input tokens to the chat history
+    bot_input_ids = torch.cat([torch.LongTensor(history), new_user_input_ids], dim=-1)
+
+    # generate a response 
+    history = model.generate(bot_input_ids, max_length=1000, pad_token_id=tokenizer.eos_token_id).tolist()
+
+    # convert the tokens to text, and then split the responses into lines
+    response = tokenizer.decode(history[0]).split("
")
+    response = [(response[i], response[i+1]) for i in range(0, len(response)-1, 2)]  # convert to tuples of list
+    return response, history
+
+with gr.Blocks() as demo:
+    chatbot = gr.Chatbot()
+    state = gr.State([])
+
+    with gr.Row():
+        txt = gr.Textbox(show_label=False, placeholder="Enter text and press enter").style(container=False)
+            
+    txt.submit(predict, [txt, state], [chatbot, state])
+            
 if __name__ == "__main__":
     demo.launch()
diff --git a/guides/06_other-tutorials/creating-a-chatbot.md b/guides/06_other-tutorials/creating-a-chatbot.md
index a5aac334f9..a042c0edd0 100644
--- a/guides/06_other-tutorials/creating-a-chatbot.md
+++ b/guides/06_other-tutorials/creating-a-chatbot.md
@@ -1,6 +1,6 @@
 # How to Create a Chatbot
 
-Related spaces: https://huggingface.co/spaces/abidlabs/chatbot-minimal, https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/gorkemgoknar/moviechatbot, https://huggingface.co/spaces/Kirili4ik/chat-with-Kirill
+Related spaces: https://huggingface.co/spaces/dawood/chatbot-guide, https://huggingface.co/spaces/dawood/chatbot-guide-multimodal, https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/gorkemgoknar/moviechatbot, https://huggingface.co/spaces/Kirili4ik/chat-with-Kirill
 Tags: NLP, TEXT, HTML
 
 ## Introduction
@@ -11,7 +11,7 @@ Using `gradio`, you can easily build a demo of your chatbot model and share that
 
 This tutorial will show how to take a pretrained chatbot model and deploy it with a Gradio interface in 4 steps. The live chatbot interface that we create will look something like this (try it!):
 
-<iframe src="https://abidlabs-chatbot-stylized.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+<iframe src="https://dawood-chatbot-guide.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
 
 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. 
 
@@ -21,9 +21,13 @@ Make sure you have the `gradio` Python package already [installed](/quickstart).
 
 Let's get started! Here's how to build your own chatbot: 
 
-1. [Set up the Chatbot Model](#1-set-up-the-chatbot-model)
-2. [Define a `predict` function](#2-define-a-predict-function)
-3. [Create a Gradio Interface](#3-create-a-gradio-interface)
+- [How to Create a Chatbot](#how-to-create-a-chatbot)
+  - [Introduction](#introduction)
+    - [Prerequisites](#prerequisites)
+  - [1. Set up the Chatbot Model](#1-set-up-the-chatbot-model)
+  - [2. Define a `predict` function](#2-define-a-predict-function)
+  - [3. Create a Gradio Demo using Blocks](#3-create-a-gradio-demo-using-blocks)
+  - [4. Chatbot Markdown Support](#4-chatbot-markdown-support)
 
 ## 1. Set up the Chatbot Model
 
@@ -72,9 +76,9 @@ Then, the function tokenizes the input and concatenates it with the tokens corre
 * `response`: which is a list of tuples of strings corresponding to all of the user and bot responses. This will be rendered as the output in the Gradio demo.
 * `history` variable, which is the token representation of all of the user and bot responses. In stateful Gradio demos, we *must* return the updated state at the end of the function. 
 
-## 3. Create a Gradio Interface
+## 3. Create a Gradio Demo using Blocks
 
-Now that we have our predictive function set up, we can create a Gradio Interface around it. 
+Now that we have our predictive function set up, we can create a Gradio demo around it. 
 
 In this case, our function takes in two values, a text input and a state input. The corresponding input components in `gradio` are `"text"` and `"state"`. 
 
@@ -83,23 +87,77 @@ The function also returns two values. We will display the list of responses usin
 Note that the `"state"` input and output components are not displayed. 
 
 ```python
-import gradio as gr
-
-gr.Interface(fn=predict,
-             inputs=["text", "state"],
-             outputs=["chatbot", "state"]).launch()
+with gr.Blocks() as demo:
+    chatbot = gr.Chatbot()
+    state = gr.State([])
+    
+    with gr.Row():
+        txt = gr.Textbox(show_label=False, placeholder="Enter text and press enter").style(container=False)
+            
+    txt.submit(predict, [txt, state], [chatbot, state])
+            
+demo.launch()
 ```
 
-This produces the following interface, which you can try right here in your browser (try typing in some simple greetings like "Hi!" to get started):
+This produces the following demo, which you can try right here in your browser (try typing in some simple greetings like "Hi!" to get started):
 
-<iframe src="https://abidlabs-chatbot-stylized.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+<iframe src="https://dawood-chatbot-guide.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
 
 
 ----------
 
-And you're done! That's all the code you need to build an interface for your chatbot model. Here are some references that you may find useful:
+## 4. Chatbot Markdown Support
 
-* Gradio's [Quickstart guide](https://gradio.app/quickstart/)
-* The final [chatbot demo](https://huggingface.co/spaces/abidlabs/chatbot-stylized) and [complete code](https://huggingface.co/spaces/abidlabs/chatbot-stylized/tree/main) (on Hugging Face Spaces)
 
+The `gr.Chatbot` also supports a subset of markdown including bold, italics, code, and images. Let's take a look at how we can use the markdown support to allow a user to submit images to the chatbot component.
 
+```python
+def add_image(state, image):
+    state = state + [(f"![](/file={image.name})", "Cool pic!")]
+    return state, state
+```
+
+
+Notice the `add_image` function takes in both the `state` and `image` and appends the user submitted image to `state` by using markdown. 
+
+
+```python
+import gradio as gr
+
+def add_text(state, text):
+    state = state + [(text, text + "?")]
+    return state, state
+
+def add_image(state, image):
+    state = state + [(f"![](/file={image.name})", "Cool pic!")]
+    return state, state
+
+
+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):
+            txt = gr.Textbox(show_label=False, placeholder="Enter text and press enter, or upload an image").style(container=False)
+        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])
+            
+demo.launch()
+```
+
+This is the code for a chatbot with a textbox for a user to submit text and an image upload button to submit images. The rest of the demo code is creating an interface using blocks; basically adding a couple more components compared to section 3.
+
+This code will produce a demo like the one below:
+
+<iframe src="https://dawood-chatbot-guide-multimodal.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+
+And you're done! That's all the code you need to build an interface for your chatbot model. Here are some references that you may find useful:
+
+* Gradio's [Quickstart guide](https://gradio.app/quickstart/)
+* The first chatbot demo [chatbot demo](https://huggingface.co/spaces/dawood/chatbot-guide) and [complete code](https://huggingface.co/spaces/dawood/chatbot-guide/blob/main/app.py) (on Hugging Face Spaces)
+* The final chatbot with markdown support [chatbot demo](https://huggingface.co/spaces/dawood/chatbot-guide-multimodal) and [complete code](https://huggingface.co/spaces/dawood/chatbot-guide-multimodal/blob/main/app.py) (on Hugging Face Spaces)
diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte
index 51fe843959..56e88d6510 100644
--- a/ui/packages/chatbot/src/ChatBot.svelte
+++ b/ui/packages/chatbot/src/ChatBot.svelte
@@ -112,8 +112,10 @@
 		border-style: solid;
 		border-radius: var(--chatbot-border-radius);
 		padding: var(--size-2) var(--size-3);
+		max-width: 75%;
 		font-size: var(--scale-00);
 		line-height: var(--line-xs);
+		overflow-wrap: break-word;
 	}
 
 	.user {


Code review comments:
diff_hunk: @@ -21,9 +21,13 @@ Make sure you have the `gradio` Python package already [installed](/quickstart).
 
 Let's get started! Here's how to build your own chatbot: 
 
-1. [Set up the Chatbot Model](#1-set-up-the-chatbot-model)
-2. [Define a `predict` function](#2-define-a-predict-function)
-3. [Create a Gradio Interface](#3-create-a-gradio-interface)
+- [How to Create a Chatbot](#how-to-create-a-chatbot)
path: guides/06_other-tutorials/creating-a-chatbot.md
text: @user1:
@author can you keep just the numbered bullets in here? Had it this way for SEO, to try and rank higher on the "How to build a chatbot" Query. Besides, doesn't really make sense to include the title, intro and prerequisites under "how to build your own chatbot" especially since this list is after the user has read them.

diff_hunk: @@ -83,23 +87,77 @@ The function also returns two values. We will display the list of responses usin
 Note that the `"state"` input and output components are not displayed. 
 
 ```python
-import gradio as gr
-
-gr.Interface(fn=predict,
-             inputs=["text", "state"],
-             outputs=["chatbot", "state"]).launch()
+with gr.Blocks() as demo:
+    chatbot = gr.Chatbot()
+    state = gr.State([])
+    
+    with gr.Row():
+        txt = gr.Textbox(show_label=False, placeholder="Enter text and press enter").style(container=False)
+            
+    txt.submit(predict, [txt, state], [chatbot, state])
+            
+demo.launch()
 ```
 
-This produces the following interface, which you can try right here in your browser (try typing in some simple greetings like "Hi!" to get started):
+This produces the following demo, which you can try right here in your browser (try typing in some simple greetings like "Hi!" to get started):
 
-<iframe src="https://abidlabs-chatbot-stylized.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+<iframe src="https://dawood-chatbot-guide.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
 
 
 ----------
 
-And you're done! That's all the code you need to build an interface for your chatbot model. Here are some references that you may find useful:
+## 4. Chatbot Markdown Support
 
-* Gradio's [Quickstart guide](https://gradio.app/quickstart/)
-* The final [chatbot demo](https://huggingface.co/spaces/abidlabs/chatbot-stylized) and [complete code](https://huggingface.co/spaces/abidlabs/chatbot-stylized/tree/main) (on Hugging Face Spaces)
 
+The `gr.Chatbot` also supports a subset of markdown including bold, italics, code, and images. Let's take a look at how we can use the markdown support to allow a user to submit images to the chatbot component.
 
+```python
+def add_image(state, image):
+    state = state + [(f"![](/file={image.name})", "Cool pic!")]
+    return state, state
+```
+
+
+Notice the `add_image` function takes in both the `state` and `image` and appends the user submitted image to `state` by using markdown. 
+
+
+```python
+import gradio as gr
+
+def add_text(state, text):
+    state = state + [(text, text + "?")]
+    return state, state
+
+def add_image(state, image):
+    state = state + [(f"![](/file={image.name})", "Cool pic!")]
+    return state, state
+
+
+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):
+            txt = gr.Textbox(show_label=False, placeholder="Enter text and press enter, or upload an image").style(container=False)
+        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])
+            
+demo.launch()
+```
+
+This is the code for a chatbot with a textbox for a user to submit text and an image upload button to submit images. The rest of the demo code is creating an interface using blocks; basically adding a couple more components compared to section 3.
+
+This code will produce a demo like the one below:
+
+<iframe src="https://dawood-chatbot-guide-multimodal.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
path: guides/06_other-tutorials/creating-a-chatbot.md
text: @user1:
If you want to avoid a scrolling iframe (kind of annoying) increase height="350" to height="650"