---
presentation:
# プレゼンテーションのテーマ
# === 使用可能なテーマ ===
# "beige.css"
# "black.css"
# "blood.css"
# "league.css"
# "moon.css"
# "sky.css"
# "solarized.css"
# "white.css"
# "none.css"
# "night.css"
# "serif.css"
# "simple.css"
theme: night.css
# プレゼンテーションの「通常の」サイズ、アスペクト比は、
# プレゼンテーションが異なる解像度に合うように拡大縮小されたときに
# 保持されます。パーセント単位で指定できます。
width: 960
height: 700
# コンテンツの周りで空のままにしておくべきディスプレイサイズの係数
margin: 0.1
# コンテンツに適用できる最小/最大の拡大倍率
minScale: 0.2
maxScale: 1.5
# 右下隅にコントロールを表示
controls: true
# プレゼンテーションの進行状況バーを表示する
progress: true
# 現在のスライドのページ番号を表示
slideNumber: true
# スライドの各変更をブラウザの履歴にプッシュする
history: false
# ナビゲーションのキーボードショートカットを有効にする
keyboard: true
# スライド概要モードを有効にする
overview: true
# スライドの垂直方向の中央揃え
center: true
# タッチ入力を備えたデバイスでタッチナビゲーションを有効にする
touch: true
# プレゼンテーションをループする
loop: false
# 文字方向を右から左(RTL)に変更する
rtl: false
# プレゼンテーションが読み込まれるたびにスライドの順序をランダム化する
shuffle: false
# フラグメントをグローバルにオン/オフにします
fragments: true
# プレゼンテーションが埋め込みモードで実行する、
# 例: 画面の限られた部分に埋め込む
embedded: false
# ?キーが押されたときにヘルプオーバーレイを表示する
help: true
# スピーカーノートをすべての視聴者に表示するかどうか
showNotes: false
# 次のスライドに自動的に進むまでのミリ秒。
# 0に設定すると無効になります。
# この値はスライドのdata-autoslide属性を使用して上書きできます
autoSlide: 0
# ユーザー入力後に自動スライドを停止する
autoSlideStoppable: true
# マウスホイールによるスライドナビゲーションを有効にする
mouseWheel: false
# モバイルデバイスのアドレスバーを非表示にする
hideAddressBar: true
# iframeプレビューオーバーレイでリンクを開く
previewLinks: false
# 遷移スタイル
transition: "default" # none/fade/slide/convex/concave/zoom
# 遷移速度
transitionSpeed: "default" # default/fast/slow
# ページ全体のスライドの背景の遷移スタイル
backgroundTransition: "default" # none/fade/slide/convex/concave/zoom
# 現在のスライドから表示するスライドの数
viewDistance: 3
# 視差背景画像
parallaxBackgroundImage: "" # 例: "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
# 視差背景サイズ
parallaxBackgroundSize: "" # CSS構文, 例: "2100px 900px" - 現在のところ、Pixelのみサポートされています。(%とautoは使用しないでください)
# スライドごとに視差背景を移動するピクセル数
# - 指定されない限り自動的に計算されます
# - 軸に沿った移動を無効にするには0に設定します
parallaxBackgroundHorizontal: 200
parallaxBackgroundVertical: 50
# スピーカーノートを有効にする
enableSpeakerNotes: false
---
<!-- slide -->
## ML_SamplePy
"ML_SamplePy" is a tutorial of Deep Learning with Python.
<!-- slide -->
## Demo
You will develop image classification applications.
<!-- slide -->
## Features
You can develop web applications in `3 minutes` by using [Gradio](https://github.com/gradio-app/gradio).
<!-- slide -->
## Requirement
* python >= 3.7
* gradio
<!-- slide -->
## Installation
Install gradio with pip command.
```bash
pip install gradio
```
<!-- slide -->
## Create DL App -Step 1-
### Import
```python
import gradio as gr
import torch
from torchvision import transforms
import requests
from PIL import Image
```
### Ioad model
```python
model = torch.hub.load('zhanghang1989/ResNeSt', 'resnest50', pretrained=True)
model.eval()
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")
```
<!-- slide -->
## Create DL App -Step 2-
### Predict
```python
def predict(inp):
inp = Image.fromarray(inp.astype('uint8'), 'RGB')
inp = transforms.ToTensor()(inp).unsqueeze(0)
with torch.no_grad():
prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)
return {labels[i]: float(prediction[i]) for i in range(1000)}
```
### Make & Run UI
```python
inputs = gr.inputs.Image()
outputs = gr.outputs.Label(num_top_classes=5)
interface = gr.Interface(fn=predict, inputs=inputs, outputs=outputs)
interface.launch()
```
<!-- slide -->
## Usage
For more information, please visit [here](https://cpp-learning.com/gradio/).
<!-- slide -->
## Note
Sample code is tested in `jupyter notebook` (and google colab) .
<!-- slide -->
## Author
* Hayabusa
* R&D Center
* Twitter : https://twitter.com/Cpp_Learning
<!-- slide -->
## License
"ML_SamplePy" is under [MIT license](https://en.wikipedia.org/wiki/MIT_License).
