- Streamlitで何か作ってみたい方
- LLM APIを使ったWebアプリケーションを実装してみたい方
こんにちは、zawato（@zawato7）です！
今回は、Streamlitで画像にタイトルをつけるWebアプリケーションを実装してみたので、コードを解説したいと思います。
StreamlitでLLM APIを使ったWebアプリケーションを実装したいと考えている方は、是非参考にしてみてください。
Webアプリケーションの画面
今回、実装したWebアプリケーションのGUIは以下になります。
実装内容
GitHubにて、コードを公開してます。
環境
- Python 3.11.7
プログラムの全体像
今回、作成したコード（app.py）は以下になります。
import google.generativeai as genai
import requests
import streamlit as st
from PIL import Image
# Gemini APIを使用して画像のタイトルを取得する関数
def get_image_title(img):
"""
Gemini APIを使用して画像のタイトルを取得する関数
"""
try:
# Gemini APIの設定
genai.configure(api_key=API_KEY)
# モデルを選択
model = genai.GenerativeModel('gemini-1.5-flash')
# 画像を送信してタイトルを取得
response = model.generate_content([
"画像にふさわしいタイトルだけを出力してください。#出力例：画像のタイトル",
img
],
generation_config=genai.types.GenerationConfig(
# 温度パラメータの設定
temperature=temperature
),
stream=True)
response.resolve()
return response.text
except requests.exceptions.RequestException as e:
return f"エラーが発生しました: {e}"
# カスタムCSSを適用する関数
def load_css(file_name):
with open(file_name, "r") as f:
css = f.read()
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
st.markdown('<h1 style="color: #022563">画像タイトル生成アプリ</h1>', unsafe_allow_html=True)
st.write("Gemini APIを使用して、アップロードされた画像のタイトルを生成します。")
# CSSを読み込む
load_css("styles.css")
# サイドバー
with st.sidebar.container():
### Gemini APIキーの入力
API_KEY = st.text_input('APIキー', placeholder='APIキーを入力してください', type="password")
### Tempperature
temperature = st.slider('Temperature', 0.0, 2.0, 1.0)
st.divider()
# タイトル
st.title("画像をアップロードしてください")
# 画像アップロード
uploaded_file = st.file_uploader("", type=["jpg", "jpeg", "png"])
if uploaded_file is not None:
# アップロードされた画像を表示
image = Image.open(uploaded_file)
st.image(image, caption="アップロードされた画像", width=400)
# タイトルの初回生成（セッションに保存）
if st.button("タイトル生成"):
with st.spinner("タイトルを生成中..."):
st.session_state.title = get_image_title(image)
# タイトルを表示
st.subheader("生成されたタイトル")
st.success(st.session_state.title)プログラムの詳細
ここからは、プログラムの処理について詳しく紹介していきます。
今回は、Streamlitと呼ばれるPythonでWebアプリを簡単に作れるフレームワークを利用します。
また、今回は生成AIとして「Gemini」を利用します。こちら、無料でLLM APIを利用することができるので採用しました。
以下の記事にて、Geminiの概要とAPIの利用方法についてまとめていますので、APIキーを事前に取得しておいてください！
APIキーを取得できましたら、新規でpyファイルを作成します。
以下、コードの解説になります。
import google.generativeai as genai
import requests
import streamlit as st
from PIL import Imageまずは、必要なライブラリをインポートします。もし無い場合は、事前にインストールしてください。
# Gemini APIを使用して画像のタイトルを取得する関数
def get_image_title(img):
"""
Gemini APIを使用して画像のタイトルを取得する関数
"""
try:
# Gemini APIの設定
genai.configure(api_key=API_KEY)
# モデルを選択
model = genai.GenerativeModel('gemini-1.5-flash')
# 画像を送信してタイトルを取得
response = model.generate_content([
"画像にふさわしいタイトルだけを出力してください。#出力例：画像のタイトル",
img
],
generation_config=genai.types.GenerationConfig(
# 温度パラメータの設定
temperature=temperature
),
stream=True)
response.resolve()
return response.text
except requests.exceptions.RequestException as e:
return f"エラーが発生しました: {e}"こちらは、画像からタイトルを生成する関数です。
今回は画像を扱うため、マルチモーダルに対応した「Gemini-1.5-flash」モデルを採用しています。
Geminiのモデルについては以下の公式サイトを参照してみてください。
システムメッセージ（”画像にふさわしいタイトルだけを出力してください。#出力例：画像のタイトル”）は、目的に合わせて自由に変更してください。適切に設定することで回答精度を高めることができます。
※上記のコードは、GeminiのAPIとモデルを利用する想定のものですので、他の生成AIモデルやAPIを利用される方は適宜変更してください。おそらく、似たような書き方になるかと思います。
# サイドバー
with st.sidebar.container():
### Gemini APIキーの入力
API_KEY = st.text_input('APIキー', placeholder='APIキーを入力してください', type="password")
### Tempperature
temperature = st.slider('Temperature', 0.0, 2.0, 1.0)
st.divider()
# タイトル
st.title("画像をアップロードしてください")
# 画像アップロード
uploaded_file = st.file_uploader("", type=["jpg", "jpeg", "png"])Streamlitのサイドバーにて、APIキーを入力します。
type=”password”とすることで、入力ボックスがパスワードフィールドとなり、APIキーが隠れる仕様にしています。
また、Temperature（温度）と呼ばれる生成AIモデルの出力をコントロールするためのパラメータをスライドバーで設定します。温度が高いほどランダム性の高い出力結果が得られます。
そして、画像アップロード用のカスタムフィールドを配置します。
if uploaded_file is not None:
# アップロードされた画像を表示
image = Image.open(uploaded_file)
st.image(image, caption="アップロードされた画像", width=400)
# タイトルの初回生成（セッションに保存）
if st.button("タイトル生成"):
with st.spinner("タイトルを生成中..."):
st.session_state.title = get_image_title(image)
# タイトルを表示
st.subheader("生成されたタイトル")
st.success(st.session_state.title)こちらでは、画像がアップロードされると、画面に画像と「タイトル生成」ボタンを表示します。
ボタンが押されたら、実行メッセージを表示し、タイトルが生成されます。
もう一度ボタンを押すことで、再度タイトルを生成することができます。
動作確認
コンソール上で、streamlitを実行させます。
streamlit run app.pyすると、ブラウザに新しいタブが開かれ、Web画面が表示されます。
サイドバーに、APIキーを入力し、モデル・最大トークン数・Temperatureを設定しておきます。
次に、サイドバーのカスタムフィールドから、画像をアップロードしてします。
すると、メイン画面に画像とボタンが表示されます。
「タイトル生成」ボタンを押すと、
それっぽいタイトルが得られました。
何度か使ってみた感想ですが、画像によって回答精度は高かったり低かったりしました。
温度を変化させることで、バリエーションのあるタイトルが生成できるかなと思います。
無料で利用できますので、試しにアプリケーションを作る際には使い勝手が良いのではないかと思います。
おわりに
今回は、Streamlitで画像からタイトルを生成する簡易的なWebアプリケーションを実装してみました。
LLM APIは、他にもいろいろな使い方ができると思うので、ぜひ一度実装してみてください。
実装してみた感想や改善点などがありましたら、是非コメントしてください！
また、チャットツールを実装した記事もあわせてみてみてください。
お問い合わせは、こちら！
コメント