【活動紹介 5】単語帳アプリ

こんにちは！東大人工知能開発学生団体のHAIT Labです。
この記事では、HAIT Labの活動の一環のチーム開発で作成した、あるプロダクトを紹介しようと思います。
今回は、Primaryコースで作成された「単語帳アプリ」というWebアプリケーションを紹介いたします！
▼HAIT Labのコース、活動に関する内容は以下の記事を参照してください！
https://note.com/hait_lab/n/n2fce80c7d36f

活動紹介 1で「自動単語帳生成アプリ」を紹介しましたが、今回紹介するプロダクトはそれとは別のものです。

単語帳アプリとは？

「活動紹介」において二度目の"単語帳"、ここから私たちにとって英単語の勉強がかかせないということがわかります。
この記事を読んでくださっている人の中にも、英単語の勉強で苦労した方は多くいるでしょう。
そして、英単語の勉強に関して以下の2点を大変だと思った人も多くいるのではないでしょうか？

・新しい単語に出会ったら自分で意味を調べる必要がある
・単語帳(ノート)に単語と和訳を書き込む(打ち込む)必要がある

この2点はかなり時間のかかるフェーズであり、これらを時短で行うことができればかなりの効率化になるでしょう。

上記の考えから「実際に使えること」を意識して作成されたのがこのアプリです。
アプリに登録されたユーザーごとに、アプリ内の写真撮影機能を利用した英単語の登録が可能です。また、英単語読み取り後に自動でサジェストされる選択肢から和訳を選択することができます。ユーザーごとに単語帳を複数作成可能であり、シャッフルされた選択形式問題にも取り組める等、単語学習を意識した機能も充実しています。

機能の実装　機械学習偏

・pyOCR, tesseract, 自然言語処理 ⇒ 英文の画像からの英単語抽出

・論文を参考に、入力画像(英文)の影を自然に削除するようにした
⇒さらに平滑化を行い、ノイズを削除

・翻訳については辞書データべースをメインで利用し、足りない部分はgoogle trans を利用した

用いた技術　Web偏

・Django、python
⇒データベースを用いたユーザー認証機能の実装
FlaskよりもDjangoのほうがデータベースの扱いにたけているため、Djangoを選択しました。

・Ajax
⇒クライアントとサーバでの頻繁なデータベース登録や、データのやり取り

・JavaScript
⇒非同期処理が必要な単語帳の諸機能の実装

・Dockerを用いたherokuへのデプロイ
⇒アプリとして機能しているのかのチェック

完成したプロダクト

こちらがログイン画面です！
上で述べたように、このアプリケーションではユーザーごとに英単語長が作成できるようになっています。そのためには、ユーザーの識別のためのログイン機能が必要となるため、このようなページが用意されています。

会員登録が済んでいない場合は会員登録画面に進みますが、そちらのページの紹介は省略させていただきます。
上記の画面にメールアドレスとパスワードを入力すると、次の画像にすすみます！こちらがトップページです。

少々ぼやけていて申し訳ありません。
トップページ左下の「単語帳へ」をクリックすると、次の画面(下の画像)に進みます。

「単語帳の編集」「写真の撮影」「新規単語帳作成」「その他」から好きなものを選択します。例えば「写真の撮影」を選択すると、次の画像のようにPCのカメラが起動し、写真撮影が行えます！
次の画像をご覧ください！
緑色の「TAKE A PICTURE」を押すことで撮影が行えます。
上はカメラにうつっているもの(動画)であり、下が撮影された画像です。

画像が用意できたらバックエンドでの英単語抽出処理が始まります。
処理が終わると抽出された英単語の一覧をみることができるようになります。英単語一覧では、単語1つ1つに対して登録したい和訳を選択することができます。

以下の画像のように、単語の上にカーソルを持っていくと和訳一覧が表示され、ユーザーは一覧から好きな和訳(もとの英文の文脈にあった和訳)を選択する、という流れです。

単語帳にいれたくない英単語がある場合は、和訳を「未入力」のままにするとその単語は登録されないようになっています。

和訳の選択が終わると、登録先の単語帳を選択する画面に進みます。
ユーザーごとに複数の単語帳を作成できるようになっているため、抽出した英単語をどこへ保存するかを選ぶ必要があるというわけです。

以上の作業が終わると、単語テストが行えるようになります！
単語テストを始めると、次のように画面上部に英単語、中央部に4つの和訳が表示されます。

選択肢から1つ正解だと思うものを選択すると、次のように結果が表示されます。「NEXT」をクリックすることで、次の単語に進みます。

一通りテストが終わると、次のようにトータルの結果が表示されます。

さらに、「DETAIL」をクリックすることで、結果の詳細をみられるようになっています。
単語数が多いテストだと、自分が何を覚えられていて何を間違えたのかを忘れてしまうと思ったため、それらをまとめて確認できるようにしています。

完成したプロダクトの説明は以上です！

作成途中の機能

単語の復習を行えるようにするためのアルゴリズムをアプリケーションに組み込む作業が途中でとまってしまっています。

そのアルゴリズムは、単語テストに対する回答から最適な復習の間隔を計算するものであり、この計算結果を利用することで効果的なタイミングで復習を促すことができます。
アルゴリズムの実装は完了しているのですが、Webアプリケーションに組み込むところまで進められませんでした。

おわりに

いかがでしたでしょうか？
"英単語を抽出しそれを登録する" という基本的な機能だけでなく、ユーザーごとに複数の英単語長が作成できたり、テスト機能がついていたり等、実際に使う人を意識したアプリケーションでしたね！
UIもとてもオシャレで使いやすく、ユーザビリティも優れており、すぐにでもリリースできてしまいそうですよね。

プロダクト開発に興味を持っていただけたり、HAIT Labに興味を持っていただけた場合は, 是非今後のメンバー募集時にご応募ください！
質問、気になることがありましたらHAIT LabのTwitter のDM / 質問箱へどうぞ！

これからもHAIT Labから生まれている成果の共有をしていこうと思います。
今後もよろしくお願いいたします！

活動紹介はここで一度終了いたします。
今まで読んでくださった方、ありがとうございました！！