fbpx
  1. HOME
  2. ブログ
  3. IT技術
  4. 【前半】KerasとKivyを使って簡易手書き数字認識アプリを作ってみよう【機械学習】

【前半】KerasとKivyを使って簡易手書き数字認識アプリを作ってみよう【機械学習】

手書き数字認識アプリを作る〜前編〜

前回の 自作の誤差逆伝播学習法で手書き数字を認識させてみよう!【人工知能】 では自作プログラムで自分で書いた任意の手書き数字認識を試みました。

ほとんどの手書き数字では認識がうまくできていたものの、学習が遅く、あまり精度は良いとは言えませんでした。

そこで、本記事では既存の優秀な機械学習フレームワーク「Keras(ケラス)」を使って性能の良いネットワークを作成します。

さらに、もっと使いやすいように「Kivy(キビー)」というフレームワークを用いてGUIアプリケーション化しようと思います。

最終的に作れるアプリケーション

この記事を読んで最終的に完成するのは、「手書きで数字を書くと、その数字を認識するというアプリ」です。

【図 最終的に作れるアプリケーション】

それでは、作成していきましょう!

準備するもの

まずは、環境整備です。

今回使うフレームワーク

  1. Keras : 機械学習
  2. Kivy : GUI
  3. NumPy : 数値計算
  4. Pillow (PIL) : 画像処理

以上のフレームワークがまだインストールされていなければ、次に紹介する方法でインストールしてください。

もうインストール済みの方は、読み飛ばしてください。

インストールされているか確認する方法は、ご存知のコレですね。

Keras(ケラス)のインストール

Kerasは、機械学習の有名なフレームワークの一つで、「Tensorflow(テンソルフロー)」などの有名な機械学習フレームワークを扱いやすく、シンプルにコードが書けるようになっています。

インストール方法

Kerasは、Tensorflowに依存しているので、Tensorflowもインストールしておきましょう。

また、 pip がver. 9.x系だとエラーを吐くことがあるらしいので、ついでに pip も最新のものにしておきましょう。

Kivy(キビー)のインストール

Kivyは、GUIフレームワークの一つで、オープンソースで開発されています。

さらに扱いやすく、さまざまなOSで動作するためKivyを使うことにしました。

Kivyは、Pythonファイルの他に「*.kv」ファイルで簡単にGUIをデザインすることができます。

インストール方法

このモジュールも pip でインストールできます。

これで、もし動かなかったら、追加で以下のモジュールもインストールしてください。

Pillow(PIL)のインストール

Pillowは、とても使い勝手が良い画像処理系のモジュールです。

これも先のモジュールと同じようにインストールできます。

いざ開発!

それでは、お楽しみの開発に移ります。

開発の流れとしては、以下の通りです。

  1. Kivyで「キャンバス画面・ペイント機能 」を実装
  2. Kerasで「機械学習部 」を実装

コードとともに解説していきますが、冗長になるため一行ずつ全て解説することはせず、重要な部分を中心に解説をしていきますのでご了承ください。

Kivy (GUI)部分について

まずは、キャンバス機能ペイント機能を作ります。

main.py と MyPaint.kv という2つのファイルを作って、これらにKivyを用いたGUIを管理するコードを書いていきます。

ここで、「*.kv」の名前は重要になってくるので、必ず同じ名前にしてください。

コード

とりあえず、コードは以下のようになります。

上記のコードを $ python main.py と実行してみてください。

黒いキャンパスに白い線で文字や数字が書けると思います。

また「Clear」でキャンパスがリセットできることも確認できます。

しかし、まだこの時点で「Predict」は未実装なので押してもなにも起こりません

*.pyと*.kv

それでは、コードを簡単に解説していきます。

まずは「この2種類のファイルの関係」について説明します。

「MyPaint.kv」でボタンのデザインを作っていることは、コードを見るとなんとなく理解できると思います。

しかし、肝心の「main.py」では、「MyPaint.kv」を参照しているらしきコードは見つかりません。

これは、「main.py」のクラス名 “***App” の名前から勝手に参照してくれる機能があるからです。

つまり、今回の場合、「main.py」MyPaintApp というクラスが定義されているので、Kivyが勝手に「MyPaint.kv」を探し参照してくれています。

そのため、Kivyでは、「ファイル名が重要」なのです。

キャンバスレイアウト

ウィンドウとキャンバスのレイアウトは、主にKivy.ConfigというモジュールWindowモジュールで行われています。

ウィンドウサイズ

以下のコード冒頭で、ウィンドウサイズを決めています。

ウィンドウの背景色

以下コードのmain関数でコメントしてあるように、ウィンドウの背景色を指定してます。

キャンバス全体の管理

ちなみにキャンバス全体の管理は、以下コードで行なっており、ここではキャンバスを初期化する関数だけ定義しておきます。

キャンバス内のボタンは MyPaint.kv で定義していきます。

ペイント部分

大事なペイント機能は、 class MyPaintWidget というクラスが担っています。

持つべき機能としては「クリックしてドラッグしたら線を引く」ことです。

線の太さ

このクラスでは、それに必要な「線の色」「線の太さ」をメンバ変数として保持しています。

そして、マウスクリックダウン時とマウスドラッグ時の機能を以下の関数で実現しています。

やっていることは、取得した座標に線を追加しているだけです。

また、キャンバスをクリアした時に色情報を再度セットするための関数があって、ペイント機能は完成です。

ボタン類

ボタン類はすべて「MyPaint.kv」が担っています。

「*.kv」ファイルの書き方は、 < > でどのウィジェットに配置したいかを指定し、その中に(Pythonと同じようにインデントを下げて)ボタン類を記述していきます。

今回弄るのは、 MyCanvasWidget クラスですので、 <MyCanvasWidget> の中に記述していきます。

上下に分割

ペイント領域とボタン領域を上下に分割することにしましたが、 BoxLayout: でレイアウトの調整が可能です。

まずは、上下に分割したいので、以下のように記述します。

さらに今回は、ボタンを2つ配置するので、下部のブロックを左右に1:1で分割します。

左右の分割

左右の分割は、以下のように指定します。

しかし、このままでは、ペイント領域とボタン領域が1:1なので、 size_hint_y: で調整しています。

今回は、0.80.1にしました。

また、ボタンがクリックされたときの挙動は、 on_release: で関数を指定してあげます。

さいごに〜前編〜

少々長くなるため、前編は、Kivyで「キャンバス画面・ペイント機能 」を実装したところで終わりにしたいと思います。

後編では、Kerasで「機械学習部」を実装していき、アプリを完成させたいと思っております。

記事の後編はこちら

【後編】KerasとKivyを使って簡易手書き数字認識アプリを作ってみよう【機械学習】

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事