Gradioは、Webアプリケーションを簡単に作成するためのPythonライブラリです。知らない方は下記記事をご覧ください。

 <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> 
 
今回は、そんなGradioで文字列が使用できるTextboxコンポーネントの使い方を紹介します。
<h2 id="textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" data-line="7" class="code-line"><a class="header-anchor-link" href="#textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Textboxコンポーネントとは</h2>
Textboxコンポーネントは、文字列を入出力するためのコンポーネントです。例として名前を入力するためのTextboxコンポーネントを下記に示します。
<img src="https://i.gyazo.com/83649cacf69fc9fa7e81f7cc05d94ee6.png" alt="Image from Gyazo" /> 
Textコンポーネント
<h2 id="textbox%E3%81%A8textarea%E3%81%AE%E9%81%95%E3%81%84" data-line="14" class="code-line"><a class="header-anchor-link" href="#textbox%E3%81%A8textarea%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> TextboxとTextAreaの違い</h2>
Gradioには、gradio.Textboxとgradio.TextAreaの2種類のコンポーネントクラスおよび、"text"と"textbox"と"textarea"の3種類のショートカット文字列があります（※コンポーネントクラス「TextArea」のAreaは大文字のA）。
一応それぞれの違いとしては、下記になります。
TextboxとTextAreaの違い
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line">Textbox: 1行の文字列を入力するためのコンポーネント</li>
<li data-line="23" class="code-line">TextArea: 複数行の文字列を入力するためのコンポーネント</li>
</ul>
しかしながら、実際にはTextboxでも複数行にできますし、TextAreaも1行にできます。基本的にはデフォルトの設定が違うだけで、使い方は同じなので個人的にはTextboxだけ使えばいいと思います（いずれは統一される気がしています）。
<h3 id="%22text%22%E3%81%A8%22textbox%22%E3%81%A8%22textarea%22%E3%81%AE%E9%81%95%E3%81%84" data-line="27" class="code-line"><a class="header-anchor-link" href="#%22text%22%E3%81%A8%22textbox%22%E3%81%A8%22textarea%22%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> "text"と"textbox"と"textarea"の違い</h3>
ショートカット文字列（"text", "textbox", "textarea"）だと基本的にデフォルト設定になります。"text"と"textbox"は同じなので、基本は"text"を使ってコンポーネントを長くしたい場合は"textarea"を指定するのが良いでしょう。
"text"と"textbox"と"textarea"の違い
<ul data-line="33" class="code-line">
<li data-line="33" class="code-line">"text": 最小値が1行</li>
<li data-line="34" class="code-line">"textbox": 最小値が1行　（"text"と基本的に同じ）</li>
<li data-line="35" class="code-line">"texarea": 最小値が7行</li>
</ul>
<h2 id="textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" data-line="37" class="code-line"><a class="header-anchor-link" href="#textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> Textboxコンポーネントの使い方</h2>
<h3 id="%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%ABtextbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86" data-line="39" class="code-line"><a class="header-anchor-link" href="#%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%ABtextbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E3%81%86" aria-hidden="true"></a> シンプルにTextboxコンポーネントを使う</h3>
最もシンプルにTextboxコンポーネントを使うには、ショートカット文字列をinputsあるいはoutputsに指定します。
Textboxの場合は、ショートカット文字列として、"text"、"textbox"、"textarea"のいずれかを指定します。基本は"text"でいいと思いますが、テキスト領域を長くしたい場合は"textarea"を指定すると良いでしょう。
試しに入力に"text"、出力に"textarea"を指定したwebアプリを作ってみます。
<div class="code-block-container"><pre class="language-python"><code class="language-python code-line" data-line="47">import gradio as gr

def greet(name):
 return "Hello " + name

app = gr.Interface(fn=greet, inputs="text", outputs="textarea")
app.launch()
</code></pre></div>上記のコードを実行すると下記の画像のようになります。
<img src="https://i.gyazo.com/84b984d688b39c69e493473fe029b3b3.png" alt="Image from Gyazo" /> 
ショートカットで作成したTextboxコンポーネント
出力側は"textarea"を指定したので、テキスト領域が長くなっているのが分かります。
<h3 id="textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8B" data-line="64" class="code-line"><a class="header-anchor-link" href="#textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8B" aria-hidden="true"></a> Textboxコンポーネントを調節する</h3>
Textboxコンポーネントを調節するには、inputsあるいはouputsにTextboxオブジェクトを指定します。gradio.Textbox() または gradio.TextArea()を利用することで、Textboxオブジェクトを作成できます。
<div class="code-block-container"><pre class="language-python"><code class="language-python code-line" data-line="68">import gradio as gr

def greet(name):
 return "Hello" + name

app = gr.Interface(
 fn=greet, 
 inputs=gr.Textbox(
 lines=2,
 placeholder="名前を入力してください",
 label="名前",
 ),
 outputs="text",
 )
app.launch()
</code></pre></div>上記のコードを実行したのが下記の画像です。
<img src="https://i.gyazo.com/a94d007e80ed1d5b45fd74f6afb1d70d.png" alt="Image from Gyazo" /> 
コンポーネントクラスを使ったTextboxコンポーネント
少し分かりにくいですが、入力コンポーネントの行数が2行になっていることがわかります。またラベルが「名前」で、何も入力しない場合は薄い文字で「名前を入力してください」と表示されています。
このようにコンポーネントクラスを使用すると、パラメータを指定することでコンポーネントを調節することができます。
<h2 id="textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF" data-line="95" class="code-line"><a class="header-anchor-link" href="#textbox%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF" aria-hidden="true"></a> Textboxコンポーネントのパラメータ</h2>
Textboxコンポーネントのパラメータは、下記の通りです。ちなみにTextAreaコンポーネントの場合はlinesの初期値が7になります。
<table data-line="99" class="code-line">
<thead data-line="99" class="code-line">
<tr data-line="99" class="code-line">
<th>パラメータ</th>
<th>初期値</th>
<th>説明</th>
</tr>
</thead>
<tbody data-line="101" class="code-line">
<tr data-line="101" class="code-line">
<td>value</td>
<td>""</td>
<td>初期値として入力しておくテキスト。callableの場合、アプリがロードされるたびにこの関数が呼び出され、コンポーネントの初期値が設定されます。</td>
</tr>
<tr data-line="102" class="code-line">
<td>lines</td>
<td>1</td>
<td>textareaに提供する最小の行数。</td>
</tr>
<tr data-line="103" class="code-line">
<td>max_lines</td>
<td>20</td>
<td>textareaで提供する行の最大数。</td>
</tr>
<tr data-line="104" class="code-line">
<td>placeholder</td>
<td>None</td>
<td>textarea の背後に提供するプレースホルダヒント</td>
</tr>
<tr data-line="105" class="code-line">
<td>label</td>
<td>None</td>
<td>コンポーネント名をinterfaceで指定します。</td>
</tr>
<tr data-line="106" class="code-line">
<td>every</td>
<td>None</td>
<td>もし <code>value</code> が callable ならば、クライアントコネクションが開いている間、 '毎秒' 回関数を実行します。それ以外の場合は、何の効果もありません。キューを有効にする必要があります。このイベントは、このコンポーネントの .load_event 属性を介してアクセスすることができます (例: イベントのキャンセル)。</td>
</tr>
<tr data-line="107" class="code-line">
<td>show_label</td>
<td>False</td>
<td>True の場合、ラベルを表示します。</td>
</tr>
<tr data-line="108" class="code-line">
<td>interactive</td>
<td>False</td>
<td>True の場合、編集可能なテキストボックスとしてレンダリングされ、False の場合、編集は無効となる。Falseの場合、編集は無効となる。提供されない場合、コンポーネントが入力または出力のどちらとして使用されるかに基づいて、これは推論される。</td>
</tr>
<tr data-line="109" class="code-line">
<td>visible</td>
<td>True</td>
<td>Falseの場合、コンポーネントは非表示になります。</td>
</tr>
<tr data-line="110" class="code-line">
<td>elem_id</td>
<td>None</td>
<td>HTML DOM 内でこのコンポーネントの ID として割り当てられるオプションの文字列。CSS スタイルをターゲットとするために使用することができます。</td>
</tr>
<tr data-line="111" class="code-line">
<td>type</td>
<td>"text"</td>
<td>'text', 'password', 'email'のいずれかをテキストボックスの種類として指定します。</td>
</tr>
</tbody>
</table>
Textboxコンポーネントのパラメータ
<h2 id="textbox%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%AF%BE%E5%BF%9C%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88(%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)" data-line="115" class="code-line"><a class="header-anchor-link" href="#textbox%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%AF%BE%E5%BF%9C%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88(%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)" aria-hidden="true"></a> Textboxコンポーネントの対応イベント(メソッド)</h2>
Textboxコンポーネントの対応イベント（メソッド）は、下記の通りです。
<ul data-line="119" class="code-line">
<li data-line="119" class="code-line">change</li>
<li data-line="120" class="code-line">submit</li>
<li data-line="121" class="code-line">blur</li>
</ul>