はじめに
Streamlitの勉強も兼ねて、子ども向けのアプリを作ってみました。
コンセプト
とにかく子どもは飽きやすいので以下のことを意識しました。
- いろんなミニアプリを作って切り替えられるようにする
- 内容も差し替えや追加を簡単にできるようにする
- イラストや効果音、アニメーションを多用する
一方で子ども向けなので、手の込んだ内容にする必要はなく、以下のような簡単な機能でとりあえずスタートさせてみます。
- 写真が撮れてアルバムのように見れる
- 音声を録音して再生できる
- お絵描きができる
- ちょっとしたクイズ
画像や音声ファイルの配置
- 方法1
GoogleDriveに配置して共有リンクを指定(アドレスを修正する必要あり)
- 方法2
Streamlit Cloudに直接配置して指定(今回はこちらにしました。)
以下のように配置して相対パス(./assets/image.jpgなど)で指定可能です。
ディレクトリ構成
.
|_assets
| |_image.jpg
| |_audio.mp3
|_app.py
写真を撮ってアルバムのように表示
カメラ機能はst.camera_inputで実装可能です。
python
import streamlit as st
picture = st.camera_input("Take a picture")
if picture:
st.image(picture)
アルバム表示については当初、st.columnsを利用してページ下部にグリッド配置するようにしていましたが、サイドバーにすぐ出てくるのがウケたので変更しました)
python
def photo():
# 各種メニューの非表示設定
hide_menu_style = """
<style>
#MainMenu {visibility: hidden; }
footer {visibility: hidden;}
</style>
"""
st.markdown(hide_menu_style, unsafe_allow_html=True)
# 初期化
if "pictures" not in st.session_state:
st.session_state.pictures = []
picture = False
picture = st.camera_input(" ")
if picture:
st.session_state.pictures.append(picture)
with st.sidebar:
st.write("# 📸撮った写真")
if st.session_state.pictures:
for picture in st.session_state.pictures:
st.image(picture)
音声を録音して再生
audio_recorder_streamlitを利用します。
bash
pip install audio_recorder_streamlit
audio_recorder.py
import streamlit as st
from audio_recorder_streamlit import audio_recorder
def audio_recorder():
# 初期化
if "audio_list" not in st.session_state:
st.session_state.audio_list = []
audio_bytes = False
audio_bytes = audio_recorder()
if audio_bytes:
st.session_state.audio_list.append(audio_bytes)
with st.sidebar:
st.write("# 🎙️録った音")
if st.session_state.audio_list:
for audio_bytes in st.session_state.audio_list:
st.audio(audio_bytes, format="audio/wav")
一覧の表示は写真と同じにしています。
お絵描き
streamlit-drawable-canvasを使います。
bash
pip install streamlit-drawable-canvas
python
def paint():
def save_paint():
st.session_state.paint_list.append(canvas_result.image_data)
# 各種メニューの非表示設定
hide_menu_style = """
<style>
#MainMenu {visibility: hidden; }
footer {visibility: hidden;}
</style>
"""
st.markdown(hide_menu_style, unsafe_allow_html=True)
# 初期化
if "paint_list" not in st.session_state:
st.session_state.paint_list = []
# Specify canvas parameters in application
drawing_mode = st.sidebar.selectbox("Drawing tool:", ("freedraw", "transform"))
stroke_width = st.sidebar.slider("Stroke width: ", 1, 25, 3)
if drawing_mode == "point":
point_display_radius = st.sidebar.slider("Point display radius: ", 1, 25, 3)
stroke_color = st.sidebar.color_picker("Stroke color hex: ")
bg_color = st.sidebar.color_picker("Background color hex: ", "#eee")
bg_image = st.sidebar.file_uploader("Background image:", type=["png", "jpg"])
realtime_update = st.sidebar.checkbox("Update in realtime", True)
canvas_result = st_canvas(
fill_color="rgba(255, 165, 0, 0.3)", # Fixed fill color with some opacity
stroke_width=stroke_width,
stroke_color=stroke_color,
background_color=bg_color,
background_image=Image.open(bg_image) if bg_image else None,
update_streamlit=realtime_update,
height=400,
drawing_mode=drawing_mode,
point_display_radius=point_display_radius if drawing_mode == "point" else 0,
key="canvas",
)
st.button("保存", on_click=save_paint)
with st.sidebar:
st.write("# 🎨描いた絵")
for paint in st.session_state.paint_list:
st.image(paint)
ちょっとしたクイズ
2人子どもがいるのですが、お互いの小さい頃(1ヶ月〜6ヶ月ぐらい)の写真を表示してどちらが自分(姉)かを選択するものにしました。
※サンプルではどっちがにゃんこでしょう。に差し替えています。
python
import base64
import glob
import random
import time
import streamlit as st
from st_clickable_images import clickable_images
def quiz():
container = st.empty()
def judge(clicked, correct, page_id):
if clicked == correct:
time.sleep(0.5)
st.markdown(st.session_state.correct_sound_html, unsafe_allow_html=True)
st.balloons()
st.session_state.correct_num += 1
else:
time.sleep(0.5)
st.markdown(st.session_state.failed_sound_html, unsafe_allow_html=True)
st.session_state.page_id = page_id
st.session_state.first = True
def quest(no):
st.markdown(
f"<h1 style='text-align: center;'>第{no}問</h1>",
unsafe_allow_html=True,
)
if st.session_state.first:
st.session_state.questions = [0] * 2
st.session_state.correct, st.session_state.failed = random.sample([0, 1], 2)
st.session_state.questions[st.session_state.correct] = random.choice(
st.session_state.siz_images
)
st.session_state.questions[st.session_state.failed] = random.choice(
st.session_state.ao_images
)
st.session_state.first = False
clicked = clickable_images(
st.session_state.questions,
titles=[f"Image#{str(i)}" for i in range(2)],
div_style={
"display": "flex",
"justify-content": "center",
"flex-wrap": "wrap",
},
img_style={"margin": "5px", "height": "400px"},
key=no,
)
if clicked > -1:
if no != st.session_state.quest_num:
judge(clicked, st.session_state.correct, f"page{no+1}")
else:
judge(clicked, st.session_state.correct, "final")
else:
st.stop()
if "page_id" not in st.session_state:
siz_files = glob.glob("./assets/image/siz/*")
ao_files = glob.glob("./assets/image/ao/*")
start_image = "./assets/image/start.png"
again_image = "./assets/image/again.jpg"
st.session_state.sounds = {
"correct": "./assets/audio/correct.mp3",
"failed": "./assets/audio/failed.mp3",
}
with open(st.session_state.sounds["correct"], "rb") as file1:
audio_str = "data:audio/ogg;base64,%s" % (
base64.b64encode(file1.read()).decode()
)
st.session_state.correct_sound_html = (
"""
<audio autoplay=True>
<source src="%s" type="audio/ogg" autoplay=True>
Your browser does not support the audio element.
</audio>
"""
% audio_str
)
with open(st.session_state.sounds["failed"], "rb") as file2:
audio_str = "data:audio/ogg;base64,%s" % (
base64.b64encode(file2.read()).decode()
)
st.session_state.failed_sound_html = (
"""
<audio autoplay=True>
<source src="%s" type="audio/ogg" autoplay=True>
Your browser does not support the audio element.
</audio>
"""
% audio_str
)
st.session_state.siz_images = []
for file1 in siz_files:
with open(file1, "rb") as image1:
encoded = base64.b64encode(image1.read()).decode()
st.session_state.siz_images.append(f"data:image/jpeg;base64,{encoded}")
st.session_state.ao_images = []
for file2 in ao_files:
with open(file2, "rb") as image2:
encoded = base64.b64encode(image2.read()).decode()
st.session_state.ao_images.append(f"data:image/jpeg;base64,{encoded}")
with open(start_image, "rb") as image3:
encoded = base64.b64encode(image3.read()).decode()
st.session_state.start_logo = f"data:image/jpeg;base64,{encoded}"
with open(again_image, "rb") as image4:
encoded = base64.b64encode(image4.read()).decode()
st.session_state.again_logo = f"data:image/jpeg;base64,{encoded}"
st.session_state.correct_num = 0
st.session_state.first = True
st.session_state.page_id = "main"
if st.session_state.page_id == "main":
with container.container():
st.markdown(
"<h1 style='text-align: center;'>どっちがにゃんこでしょう？？</h1>",
unsafe_allow_html=True,
)
st.markdown(
"<h3 style='text-align: center;'>問題数</h3>",
unsafe_allow_html=True,
)
_, _, center, _, _ = st.columns(5)
with center:
st.session_state.quest_num = int(
st.radio(" ", ("3", "5", "10"), horizontal=True)
)
clicked = clickable_images(
[st.session_state.start_logo],
titles=[f"Image#{str(i)}" for i in range(1)],
div_style={
"display": "flex",
"justify-content": "center",
"flex-wrap": "wrap",
},
img_style={"margin": "5px", "height": "200px"},
key="top",
)
if clicked == 0:
st.session_state.page_id = "page1"
st.experimental_rerun()
for num in range(st.session_state.quest_num):
if st.session_state.page_id == f"page{num+1}":
with container.container():
quest(num + 1)
if st.session_state.page_id == "final":
with container.container():
st.markdown(
"<h1 style='text-align: center;'>結果</h1>",
unsafe_allow_html=True,
)
time.sleep(1)
st.markdown(
f"<h1 style='text-align: center;'>{st.session_state.correct_num}問正解！！</h1>",
unsafe_allow_html=True,
)
clicked = clickable_images(
[st.session_state.again_logo],
titles=[f"Image#{str(i)}" for i in range(1)],
div_style={
"display": "flex",
"justify-content": "center",
"flex-wrap": "wrap",
},
img_style={"margin": "5px", "height": "200px"},
key="final",
)
if clicked == 0:
st.session_state.pop("page_id")
st.experimental_rerun()
メニューバーをつける
サイドバーよりページ上部にメニューがあるほうが選びやすいと思ったので、streamlit-option-menuを使います。
bash
pip install streamlit-option-menu
画像のボタンを作る
標準のボタンだと味気ないので画像をボタンにします。
st-clickable-imagesを使います。
bash
pip install st-clickable-images
app.py
各アプリをメニューバーをもちいて切り替えるメインの画面です。
app.py
import streamlit as st
from audio import audio
from paint import paint
from photo import photo
from quiz import quiz
from streamlit_option_menu import option_menu
st.set_page_config(
page_title="KidsApps",
layout="wide",
initial_sidebar_state="expanded",
)
# 各種メニューの非表示設定
hide_menu_style = """
<style>
#MainMenu {visibility: hidden; }
footer {visibility: hidden;}
</style>
"""
st.markdown(hide_menu_style, unsafe_allow_html=True)
selected = option_menu(
None,
["写真", "録音", "お絵描き", "クイズ"],
icons=["camera", "mic", "palette", "question-circle"],
menu_icon="cast",
default_index=0,
orientation="horizontal",
)
if selected == "写真":
photo()
if selected == "録音":
audio()
if selected == "お絵描き":
paint()
if selected == "クイズ":
quiz()
Streamlit Cloudへ公開する
おおまかな流れは以下記事と同じなので省略します。
requirements.txtの作成
追加でインストールしたライブラリ等はrequirements.txtにまとめておくことでインストールしてくれます。
bash
pip freeze > requirements.txt
タブレットからアクセスする
普段Fire HD8 Plusでしま〇じろうを嗜んでおられるので、ホーム画面にアプリのブックマークを配置したかったのですが、どうやらできない模様。。
しかたなく、シルクブラウザのお気に入りに登録して初期画面に表示するという方法をとりました。
感想
StreamlitはAIや機械学習を活用したWebアプリ作成で人気があると思いますが、簡易なフロントエンド作成にとても便利なのでオススメです。