<h2 id="gradio%E3%81%A8%E3%81%AF" data-line="1" class="code-line"><a class="header-anchor-link" href="#gradio%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Gradioとは</h2>
Gradioは機械学習モデルを簡単にデプロイできるライブラリです。 
機械学習モデルに関わらずpythonの関数をwebアプリとしてデプロイが可能です。
詳しくは下記の記事を参照してください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/google-colab-web-app-gradio" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
<h2 id="gradio%E3%81%AEchatbot%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B" data-line="9" class="code-line"><a class="header-anchor-link" href="#gradio%E3%81%AEchatbot%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> GradioのChatbotコンポーネントで簡単にチャットボットを作る</h2>
Gradioにはチャットボット用のChatInterfaceあるいはChatbotコンポーネントがあるので、簡単にチャットボットを作ることができます。
最も簡単にチャットボットを作る場合はChatInterfaceを使います。
ChatInterfaceの使い方については、下記の記事を参照してください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/gradio-chat-interface/" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
この記事では、Chatbotコンポーネントを使ってチャットボットを作る方法を紹介します。
<h3 id="chatbot%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E6%9C%80%E5%B0%8F%E6%A7%8B%E6%88%90%E3%81%AE%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B" data-line="20" class="code-line"><a class="header-anchor-link" href="#chatbot%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E6%9C%80%E5%B0%8F%E6%A7%8B%E6%88%90%E3%81%AE%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> Chatbotコンポーネントで最小構成のチャットボットを作る</h3>
Chatbotコンポーネントを使うには、下記のようにgr.Chatbot()を利用します。
本来は簡単に作りたい場合はChatInterfaceを使うのですが、使い方を理解するためにChatbotコンポーネントを使って最小構成のチャットボットを作ってみます。
<div class="code-block-container"><div class="code-block-filename-container">chatbot.py</div><pre class="language-python"><code class="language-python code-line" data-line="25">import gradio as gr

with gr.Blocks() as app:
 chatbot = gr.Chatbot()
 msg = gr.Textbox()

 def chatbot_response(message, history):
 bot_message = "いいえ"
 history.append((message, bot_message))
 return "", history

 msg.submit(chatbot_response, [msg, chatbot], [msg, chatbot])

app.launch()
</code></pre></div>上記のコードを実行すると、下記のような画面が表示されます。
<img src="https://i.gyazo.com/7ba89cd460cf54db8aa395ce692e2c07.png" alt="Image from Gyazo" />
簡単にコードを解説すると、下記のようになります。
<ul data-line="48" class="code-line">
<li data-line="48" class="code-line">gr.Blocks()でコンテナを作成</li>
<li data-line="49" class="code-line">gr.Chatbot()でチャットボットを作成</li>
<li data-line="50" class="code-line">gr.Textbox()でテキストボックスを作成</li>
<li data-line="51" class="code-line">submit()でチャットボットの応答を定義
<ul data-line="52" class="code-line">
<li data-line="52" class="code-line">submit()の引数
<ul data-line="53" class="code-line">
<li data-line="53" class="code-line">chatbot_response: チャットボットの応答を定義する関数</li>
<li data-line="54" class="code-line"></li>
<li data-line="55" class="code-line"></li>
</ul>
</li>
</ul>
</li>
<li data-line="56" class="code-line">app.launch()でコンテナを表示</li>
</ul>
カスタマイズするためには、gr.Chatbot()の引数を指定しましょう。
また、Chatbotコンポーネントを使うことで他のコンポーネントを組み合わせてチャットボットを作ることもできます。
<h3 id="chatbot%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%BC%95%E6%95%B0" data-line="62" class="code-line"><a class="header-anchor-link" href="#chatbot%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%BC%95%E6%95%B0" aria-hidden="true"></a> Chatbotコンポーネントの引数</h3>
Chatbotコンポーネントの引数は下記のようになっています。
<table data-line="65" class="code-line">
<thead data-line="65" class="code-line">
<tr data-line="65" class="code-line">
<th>引数</th>
<th>型</th>
<th>デフォルト値</th>
<th>説明</th>
</tr>
</thead>
<tbody data-line="67" class="code-line">
<tr data-line="67" class="code-line">
<td>value</td>
<td>str | Callable</td>
<td>"Run"</td>
<td>ボタンに表示するデフォルトのテキスト。Callableの場合、アプリが読み込まれるたびにこの関数が呼び出され、コンポーネントの初期値を設定します。</td>
</tr>
<tr data-line="68" class="code-line">
<td>every</td>
<td>float | None</td>
<td>None</td>
<td>valueがCallableの場合、クライアント接続が開いている間に'every'秒ごとに関数を実行します。それ以外の場合は何も影響がありません。キューが有効である必要があります。このコンポーネントの.load_event属性を介してイベントにアクセスできます（例: キャンセル）。</td>
</tr>
<tr data-line="69" class="code-line">
<td>variant</td>
<td>Literal['primary', 'secondary', 'stop']</td>
<td>"secondary"</td>
<td>ボタンのバリエーション。'primary'は主要な呼びかけ、'secondary'は控えめなスタイル、'stop'は停止ボタンです。</td>
</tr>
<tr data-line="70" class="code-line">
<td>size</td>
<td>Literal['sm', 'lg'] | None</td>
<td>None</td>
<td>ボタンのサイズ。"sm"または"lg"になります。</td>
</tr>
<tr data-line="71" class="code-line">
<td>icon</td>
<td>str | None</td>
<td>None</td>
<td>ボタン内に表示するアイコンファイルのURLまたはパス。Noneの場合、アイコンは表示されません。Gradioアプリの作業ディレクトリまたは外部URL内にある必要があります。</td>
</tr>
<tr data-line="72" class="code-line">
<td>link</td>
<td>str | None</td>
<td>None</td>
<td>ボタンがクリックされたときに開くURL。Noneの場合、リンクは使用されません。</td>
</tr>
<tr data-line="73" class="code-line">
<td>visible</td>
<td>bool</td>
<td>True</td>
<td>Falseの場合、コンポーネントは非表示になります。</td>
</tr>
<tr data-line="74" class="code-line">
<td>interactive</td>
<td>bool</td>
<td>True</td>
<td>Falseの場合、ボタンは無効な状態になります。</td>
</tr>
<tr data-line="75" class="code-line">
<td>elem_id</td>
<td>str | None</td>
<td>None</td>
<td>このコンポーネントのHTML DOM内でのIDとして割り当てられるオプションの文字列。CSSスタイルを対象にするために使用できます。</td>
</tr>
<tr data-line="76" class="code-line">
<td>elem_classes</td>
<td>list[str] | str | None</td>
<td>None</td>
<td>このコンポーネントのHTML DOM内でクラスとして割り当てられるオプションの文字列のリスト。CSSスタイルを対象にするために使用できます。</td>
</tr>
<tr data-line="77" class="code-line">
<td>render</td>
<td>bool</td>
<td>True</td>
<td>Falseの場合、コンポーネントはBlocksコンテキスト内でレンダリングされません。イベントリスナを割り当てるが、コンポーネントを後でレンダリングする場合に使用する必要があります。</td>
</tr>
<tr data-line="78" class="code-line">
<td>scale</td>
<td>int | None</td>
<td>None</td>
<td>行内の隣接するコンポーネントと比較しての相対幅。たとえば、コンポーネントAがscale=2で、コンポーネントBがscale=1の場合、AはBの2倍の幅になります。整数である必要があります。</td>
</tr>
<tr data-line="79" class="code-line">
<td>min_width</td>
<td>int | None</td>
<td>None</td>
<td>最小のピクセル幅。この値を満たすための十分なスクリーンスペースがない場合は折り返します。特定のscale値によってこのコンポーネントがmin_widthよりも狭くなる場合、最初にmin_widthパラメータが尊重されます。</td>
</tr>
</tbody>
</table>
<h2 id="%E5%8F%82%E8%80%83" data-line="81" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<ul data-line="82" class="code-line">
<li data-line="82" class="code-line"><a href="https://www.gradio.app/docs/chatbot" target="_blank" rel="nofollow noopener noreferrer">https://www.gradio.app/docs/chatbot</a></li>
</ul>