乙Py先生のプログラミング教室

乙Py先生のプログラミング教室

乙Py先生のプログラミング教室
初学者のためのプログラミング学習サイト

UI作成

今回は最近注目度が上がってきている
簡単UI作成ツールStreamlitのお話です




解説動画はこちら




Streamlitについて


1. Streamlitとは？

一言で言うと…

Pythonコードだけでインタラクティブな
Webアプリを作れるツールです


何がすごいの？

以下のような特徴があります。


HTMLやJavaScriptの知識がほぼ不要で
めちゃくちゃ簡単にGUIが作れる



開発のホットリロード(即時反映)が可能で
主にデータ可視化や機械学習モデルのデモ
ダッシュボード作成に使われる

StreamlitはSnowflake傘下となり
クラウドデータ活用との親和性がより高くなっている
(Snowflakeはフルマネージドなデータウェアハウスサービス)


2. Streamlitの特徴

こんな特徴があります。

PythonだけでOK
WebフレームワークやHTML/CSS/JSを知らなくても作れる


インタラクティブUI
スライダー、チェックボックス
セレクトボックスなど簡単に追加できる


ライブ更新
コードを保存するだけで即座にアプリが更新される


グラフとの相性
matplotlib, plotly, seaborn, altairなどと簡単に連携


デプロイも簡単
streamlit.ioや他のクラウドでも簡単に公開できる


Snowflake統合
Snowflake上でStreamlitアプリをホスティング可能

最近ではSnowflake上で簡単に
Streamlitアプリを作って公開できるので
めちゃくちゃ便利で捗ります!!!!!!

これだけでも使う価値アリかなと思っています。





3. 基本的な使い方

インストール方法

ローカルで使用したい場合は以下のコマンドで
インストールできます。
pip install streamlit


インストールが終わったら
こんな簡単なコードを書いて
app.py で保存します。
import streamlit as st

st.title("こんにちは Streamlit!")
st.write("これは最初のアプリです")
x = st.slider("数字を選んでください", 0, 100, 25)
st.write("選んだ数字は", x)

アプリを起動するには
streamlit run app.py
で起動できます。
(ファイルが有るディレクトリで実行)

実行するとブラウザーが立ち上がり
そこにアプリが表示されます。

スクリーンショット 2025-04-19 15.42.00



4. 使えるウィジェットの例


ウィジェットの紹介
次のようなものが使えます。

    st.button()    ボタン    
    st.slider()    スライダー    
    st.selectbox()    プルダウン    
    st.checkbox()    チェックボックス    
    st.text_input()    テキスト入力    
    st.file_uploader()    ファイルアップロード    
    st.image()    画像表示    
    st.map()    地図表示（pandasの緯度・経度データ）    

以下のコードを書いて実行すると
サンプル的に試すことができます。

import streamlit as st
import pandas as pd
import numpy as np
from PIL import Image

st.title("Streamlit ウィジェットの紹介")

st.header("1. st.button() - ボタン")
if st.button("クリックしてね"):
    st.write("ボタンが押されました！")

st.header("2. st.slider() - スライダー")
slider_val = st.slider("数値を選んでください", 0, 100, 25)
st.write(f"現在の値: {slider_val}")

st.header("3. st.selectbox() - プルダウンメニュー")
option = st.selectbox("好きな果物を選んでください", ["りんご", "バナナ", "ぶどう"])
st.write(f"選択されたのは: {option}")

st.header("4. st.checkbox() - チェックボックス")
agree = st.checkbox("私は利用規約に同意します")
if agree:
    st.write("同意ありがとうございます！")

st.header("5. st.text_input() - テキスト入力")
name = st.text_input("あなたの名前は？")
if name:
    st.write(f"こんにちは、{name}さん！")

st.header("6. st.file_uploader() - ファイルアップロード")
uploaded_file = st.file_uploader("画像をアップロードしてください", type=["jpg", "png"])
if uploaded_file is not None:
    image = Image.open(uploaded_file)
    st.image(image, caption="アップロードされた画像", width=300)

st.header("7. st.image() - 画像表示（サンプル画像）")
st.image("https://cdn.pixabay.com/photo/2024/11/30/15/55/eiffel-tower-9235220_1280.jpg", caption="タワー", width=100)

st.header("8. st.map() - 地図表示")
st.write("ランダムな緯度・経度データを地図に表示します")
df_map = pd.DataFrame(
    np.random.randn(100, 2) / [50, 50] + [35.69, 139.70],  # 東京周辺
    columns=['lat', 'lon']
)
st.map(df_map)

st.markdown("---")
st.write("以上、Streamlitの基本ウィジェットの紹介でした ")


5. どんな人におすすめ？


以下のような悩みを持っている人ならオススメです！！

PythonでGUIを作りたい人
データ可視化を誰かにシェアしたい人
機械学習モデルを他人に使わせたい人
Snowflakeを使おうとしている人
簡単な社内ツールを作りたい人


6. よくある使い道

こんな使われ方が多いです。

データの可視化アプリ
機械学習モデルのデモ用UI
社内ツールや分析ダッシュボード
ちょっとしたプロトタイプ作成


7.社内ツールデモ

デモは動画をご覧ください。


今回は
最近のStreamlitの使われかた等について
解説させていただきました。

ユーザーが増えると
すんごく捗ると思うので
これからも大注目です

今日はここまでです
それでは。




タグ ：
#Python
#プログラミング
#Streamlit
#UI作成

今回はPython言語で機械学習用のUIが
サクサク作れるGradioについてです


解説動画はこちら






Gradioについて

機械学習用のモデルを一般の人が使うには
いちいちHTMLやJavascriptとかを書いて
適切なUIを実装しないと使えません


Gradio を使用すると
すべてPythonでデモを構築して
共有するところまでできちゃいます



導入方法

コマンドラインで
インストールコマンドを実行するだけです
pip install gradio



主なGradio操作方法

1.どこか作業用のディレクトリを用意する
2.ディレクトリ内にGradioのコードを書いた
　Pythonファイルを作る(app.py)
3.ターミナルなどからコマンドで実行する
　gradio ファイル名



サンプル起動用のファイル

デモサイトのソースです
sample.py

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")

ファイルを作成したらターミナルを起動して
ファイルの有る場所に移動し
次のコマンドを実行します

gradio sample.py



アプリケーションが起動したら
以下のURLにアクセスすると見る事ができます

http://127.0.0.1:7860 or 7861
http://localhost:7860 or 7861

ポート番号は起動時にターミナルに表示されるので
それを入力しましょう

スクリーンショット 2023-07-08 16.57.27

こんな感じの画面が出たら成功です



Gradioの仕組み

デモソース
import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
gradioをimportして
gr.Interface でインターフェイスを作成します


画面に表示されるのがインターフェイスです
スクリーンショット 2023-07-08 16.57.27


インターフェイスは3つの必須パラメータで
初期化を行います

1 . fn: UIをラップする関数

2 . inputs: 入力に使用するコンポーネント
(例"text": 、"image"または"audio")

3 . outputs: 出力に使用するコンポーネント
(例"text"、"image"、 または"label")

関数の引数や戻り値は
対応する入力ソースの数や
出力するソースの数に合わせる必要があります

入力と出力、そして何をするかを関数で定義して
gr.Interfaceの引数に指定して実行するだけ
という非常にシンプルな作りになっています



コンポーネントについて

GradioではUI変更用にさまざまな部品が用意されていて
これを使用してさまざまなUIを作成することができます

部品のサンプルソースです
import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)
demo.launch()
スクリーンショット 2023-07-08 17.01.22

入力として
・テキスト
・チェックボタン
・スライダー
が配置されています

部品を配置してUIをサクサク作る事ができます

これらを簡単に作成出来るのも
Gradioの強みですね




サンプルアプリ

huggingfaceの画像判別モデルを使用して
画像判別を行うUIサンプルアプリです

今回は
huggingface/google/vit-base-patch16-224
というモデルを使用する事にします

サンプルアプリのソース
import gradio as gr

demo = gr.Interface.load(
    "huggingface/google/vit-base-patch16-224",
    examples=[
    "./images/ファイル名",
    "./images/ファイル名",
    ])
    
demo.launch()

事前に画像ファイルを用意しておき
imagesというディレクトリ の中に配置しておきます

examples の部分のファイル名を
正しく指定しておきましょう

こんな感じの画面が出ます


スクリーンショット 2023-07-08 17.05.54

画像ファイルをクリックして「送信」をクリックすると
画像の判別結果が右側に出る仕組みです

このように判別モデルなんかも
数行のコードで使う事ができてしまうUIが
簡単に作成できてしまうので
非常に便利です

作ったコードを
Google colabなどで配布すれば
簡単に共有も出来てしまいます


huggingfaceにモデルを置いておけば
どこでも使う事ができるので
オープンソースで公開を検討している場合は
非常にお手軽に使う事ができます



今回は機械学習用のUIが
サクサク作れてしまう
Gradio をご紹介しました

それでは

タグ ：
#プログラミング
#Python
#機械学習
#Gradio
#UI作成

このページのトップヘ