Python>Flask:YOLOV5を活用した物体検出アプリの作成 (2)Local環境でのwebアプリ立ち上げ

# <a id ="1">1.概要</a>
FlaskとYOLOV5を使って、物体検出を行うwebアプリを作成しました。
(1)「ファイル選択」でjpgまたはmp4ファイルを選択して「送信」)
(2) 物探検出結果をグラフとgifで出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/ea242b60-82cb-38b8-d4a4-93aefd21c130.png)


以下3つの環境での立ち上げを紹介します。

* [Google Colaboratory環境でのWebアプリの立ち上げ](https://qiita.com/k_koba619/items/5f10d2e56035a059d9ae)
* **Local環境でのwebアプリの立ち上げ【今回紹介】**
* herokuへのWebアプリのデプロイ(作成中)

# <a id ="2">2.Local環境でのWebアプリの立ち上げ</a>
※今回ご紹介するのはWindows10環境になります。Mac等の他環境では手順が異なるところ複数あるかもしれません。

## <a id ="2.1">2.1.Anacondaのインストール</a>

1. 以下のサイトからAnacondaのインストールします。
　https://www.anaconda.com/products/individual<br>
　詳細なインストール手順は以下のサイトの最初からページ真ん中までが参考になるかなと思います。
　https://tech-diary.net/anaconda-install-windows/

1. Anaconda Navigatorを開いてライブラリをインストールします(以下、キャプチャ画像とともに説明)<br>
 [1] Annaconda Navigatorを立ち上げる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/7bc21ccb-67f4-c64e-8b31-6a95c85be913.png)
 [2] 左メニューの「Environments」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/aa230a49-d458-bf11-8723-59f4dc1cb315.png)
 [3,4] 「Unpdate index...」をクリックして更新が終わったら「Create」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/3a5cb39b-ad7a-fbb8-0590-35cd106e69eb.png)
 [5,6]あたらしく表示されたWindow内の「Name」を書いて(好きな名前をつけてください)、Pythonにチェックを入れてバージョンを選択。(今回紹介するアプリの動作確認できている3.7を推奨)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/ae30c5c3-efc6-0a10-b5cd-7a5a4ed1fa30.png)
 [7,8] 「All」を選択して、「anaconda」で検索。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/d3b39e80-8645-5bfa-61f5-d854a5507e86.png)
 [9,10] 検索ででてきた「anaconda」にチェックを入れて、「Apply」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/2c4de888-cb6a-fb8c-d457-477a99667f19.png)
 [11] 新たに表示されたWindow内の「Apply」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/db369506-177c-2d5a-8f79-6e9dc57aeea7.png)
 [12] [8]で「anaconda」で検索したものを「opencv」に置き換えて[9]~[11]の処理を同様に実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/502dc521-ed8f-3834-dc0d-d6a8e4eac33f.png)
 [13] 再生ボタンぽいボタンをクリックして「Open Terminal」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/9c98473a-3efe-5d00-6281-f62b8db51139.png)
 [14,15] 「conda install -c plotly plotly」と入力し、Enterで実行。Proceed([y]/n)? と表示が出たら「y」をタイプしてEnterで実行。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/6a45849f-0dfa-f9f3-41ce-43b1531c75c2.png)
 [16] 同様にTerminal上で「conda install pytorch torchvision -c pytorch」も実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/e68ac730-9db8-d581-af57-131a74e06453.png)


## <a id ="2.2">2.2.ファイルの準備</a>
準備するファイルは以下で紹介したものと同様。
https://qiita.com/k_koba619/items/5f10d2e56035a059d9ae#21%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E6%BA%96%E5%82%99

## <a id ="2.3">2.3.ファイルの実行</a>
①　cdコマンドで、準備したファイルのあるディレクトリまで移動。
②　「python app.py」を実行
③ 　「http://~」が表示されたらをブラウザのURLバーに以下のどちらかを入力
http://127.0.0.1:5000/
http://localhost:5000/
　　※初回は警告が出るが「アクセスを許可する(A)」をクリック
　　(操作方法は「1.概要」(1),(2)ご参考)
④動作は停止はTerminal上「Ctr+C」で可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/7fce03d1-7b5f-2a6f-20a5-ad3f70fe879e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613560/2558e29d-76fd-6497-ea10-30756e5bee35.png)



以上