<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で作成したAIモデルをWebアプリとして公開するためのライブラリです。
Gradioの使い方については、下記の記事を参考にしてください。

 <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%AEexamples%E3%81%A8%E3%81%AF" data-line="8" class="code-line"><a class="header-anchor-link" href="#gradio%E3%81%AEexamples%E3%81%A8%E3%81%AF" aria-hidden="true"></a> GradioのExamplesとは</h2>
GradioのExamplesとは、Gradioアプリの入力（または出力）の例を表示する機能です。
GradioのExamplesを使うと、ユーザがGradioアプリを使う際に使い方をわかりやすくできます。
<h2 id="examples%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" data-line="13" class="code-line"><a class="header-anchor-link" href="#examples%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> Examplesを追加する方法</h2>
GradioのExamplesを追加するには、Gradio.Examples()を使います。
Gradio.Examples()の引数には、入力の例をリストで渡します。
<div class="code-block-container"><pre class="language-python"><code class="language-python code-line" data-line="18">examples = [
 ["Hello world!"],
 ["こんにちは世界！"],
 ["你好，世界！"],
]
</code></pre></div><h2 id="examples%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E4%BE%8B" data-line="26" class="code-line"><a class="header-anchor-link" href="#examples%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E4%BE%8B" aria-hidden="true"></a> Examplesを使った例</h2>
GradioのExamplesを使った例を紹介します。
GradioのExamplesを使って、入力の例を表示するGradioアプリを作ります。
<div class="code-block-container"><pre class="language-python"><code class="language-python code-line" data-line="31">import gradio as gr

def hello_world(text):
 return "Hello world!"

examples = [
 ["Hello world!"],
 ["こんにちは世界！"],
 ["你好，世界！"],
]

app = gr.Interface(
 hello_world,
 gr.inputs.Textbox(lines=2, placeholder="Enter text here..."),
 gr.outputs.Textbox(label="Output"),
 examples=examples,
 title="Hello world!",
 description="This is a simple Gradio app.",
 allow_flagging=False,
)

app.launch()
</code></pre></div><h2 id="gradio%E3%81%AEexamples%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B" data-line="56" class="code-line"><a class="header-anchor-link" href="#gradio%E3%81%AEexamples%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B" aria-hidden="true"></a> GradioのExamplesを理解する</h2>
GradioのExamplesを理解するために、GradioのExamplesのパラメータを見てみます。
このクラスは Dataset コンポーネントのラッパーで、 ブロックやインターフェイスのサンプルを作成するために使用します。Dataset コンポーネントにサンプルを投入し、イベントリスナーを割り当てて、サンプルをクリックすると入出力コンポーネントへの入力が行われるようにします。オプションで、高速な推論を行うためのExampleのキャッシュを処理します。
Examplesに必須なパラメータはexamplesとinputsのみです。それ以外はoptionalです。
<h3 id="examples%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF" data-line="63" class="code-line"><a class="header-anchor-link" href="#examples%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF" aria-hidden="true"></a> Examplesのパラメータ</h3>
<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>
</tr>
</thead>
<tbody data-line="67" class="code-line">
<tr data-line="67" class="code-line">
<td>examples</td>
<td>クリックすることで、特定のコンポーネントに入力することができる入力の例。外側のリストがサンプルで、内側のリストが各入力コンポーネントに対応する入力で構成されるネストされたリストであるべきです。サンプルのディレクトリへのパスも指定できますが、gradioアプリを実行しているPythonファイルがあるディレクトリ内にあるべきです。複数の入力コンポーネントがあり、ディレクトリが提供される場合、対応する入力をリンクするための log.csv ファイルがディレクトリ内に存在する必要があります。</td>
</tr>
<tr data-line="68" class="code-line">
<td>inputs</td>
<td>例に対応するコンポーネントまたはコンポーネントのリスト</td>
</tr>
<tr data-line="69" class="code-line">
<td>outputs</td>
<td>オプションで、例の出力に対応するコンポーネントまたはコンポーネントのリストを指定します。cache` が True の場合は必須である。</td>
</tr>
<tr data-line="70" class="code-line">
<td>fn</td>
<td>オプションで、サンプルに対応する出力を生成するために実行する関数を指定します。cache` が True の場合は必須である。</td>
</tr>
<tr data-line="71" class="code-line">
<td>cache_examples</td>
<td>True の場合、高速に実行するためにサンプルをキャッシュする。True の場合、 <code>fn</code> と <code>outputs</code> を指定する必要がある。</td>
</tr>
<tr data-line="72" class="code-line">
<td>example_per_page</td>
<td>1ページにいくつの例を表示するか。</td>
</tr>
<tr data-line="73" class="code-line">
<td>label</td>
<td>examples コンポーネントに使用するラベル (デフォルトは "Examples")</td>
</tr>
<tr data-line="74" class="code-line">
<td>elem_id</td>
<td>HTML DOM 内でこのコンポーネントの ID として割り当てられるオプションの文字列。</td>
</tr>
<tr data-line="75" class="code-line">
<td>run_on_click</td>
<td>cache_examples が False の場合、例がクリックされても、関数は実行されません。これを True に設定すると、例がクリックされたときに関数が実行されます。cache_examples が True の場合は、何の効果もありません。</td>
</tr>
<tr data-line="76" class="code-line">
<td>preprocess</td>
<td>True の場合、予測関数を実行し、出力をキャッシュする前に、サンプルの入力の前処理を行います。cache_examples が True の場合のみ適用されます。</td>
</tr>
<tr data-line="77" class="code-line">
<td>postprocess</td>
<td>True の場合、予測関数を実行した後、キャッシュする前にサンプル出力を後処理します。cache_examples が True の場合のみ適用されます。</td>
</tr>
<tr data-line="78" class="code-line">
<td>batch</td>
<td>True の場合、この関数は入力のバッチを処理する必要があります。つまり、各パラメータの入力値のリストを受け入れる必要があります。cache_examples が True の場合のみ使用されます。</td>
</tr>
</tbody>
</table>

GradioアプリにExamplesで入力と出力の例を追加する