【個人開発 #1-4】レコメンドシステムを作ってみた vol.4　〜画面の実装〜

作りたいシステム

忙しい人のためのギフト提案型AI「AiSAP!(エイサップ)」

忙しい社会人のために、AIが可能な限り素早く（ASAP: As Soon As Possible）、最適なギフトを提案してくれるWebサービス。

今回は画面の実装について説明していきます。

Streamlitのインストール

まずはStreamlitをインストールしましょう。
ターミナルやコマンドプロンプトで下記コマンドを入力してください。
※pipのインストールは完了している前提で進めます。

pip install streamlit

フォルダ構成

任意のフォルダを作って、その中に必要なフォルダやファイルを配置していきます。

.
├── app.py
├── recommender.py
└── data
    ├── item.csv
    ├── rating.csv
    └── recipient.csv

各フォルダ、ファイルの説明は以下の通り。

• app.py：アプリの画面を表示する処理を実装するファイル
• recommender.py：レコメンド処理を実装するファイル
• dataフォルダ：データ（csvファイル）を保存するフォルダ

画面の実装（app.pyの実装）

作成したapp.pyの中身を書いて、画面を作っていきます。
まずはstreamlitをimportして、タイトルを設定してみましょう。

import streamlit as st

# タイトルを設定
st.write('忙しい人のためのギフト提案型AI')
st.title('AiSAP!')

Streamlitの良いところは動作確認が簡単なところです。
app.pyが置かれているディレクトリに移動して、下記コマンドを入力してください。

streamlit run app.py

すると、画像のようにブラウザで動作確認ができます。
コードに変更を加えて更新するとすぐ反映されるので、とてもスムーズに実装を進められます。

続いて、下記のコードを入力して画面を実装していきます。
ここでは、"searchReqlist"という、ユーザが選択した検索条件を保持するリストを用意して、ユーザがセレクトボックスで選択した値を順番に格納していきます。
（ちなみに、設計段階では「予算」も検索条件に含めるつもりでしたが、用意しないといけないデータの数が膨大になりそうなので、一旦なくすことにしました。）

# 説明文
st.write('ギフトを贈りたい相手のことを教えてください')

# 検索条件を保持するリスト
searchReqList = []

# 性別を選択
sex = st.selectbox('性別', ['男性', '女性'])
searchReqList.append(sex)

# 年齢を選択
age_group = st.selectbox('年齢', ['20代', '30代', '40代'])
searchReqList.append(age_group)

# 関係性を選択
relationship = st.selectbox('関係性', ['友達', '恋人', '上司'])
searchReqList.append(relationship)

# シーンを選択
scene = st.selectbox('シーン', ['誕生日', '記念日', 'お礼'])
searchReqList.append(scene)

# 検索ボタン
st.button("検索")

画面を更新するとこんな感じで表示されます。



次回はいよいよ処理の実装を行います！