Streamlit 解説コラム (5): 強力かつ柔軟な st.write() 関数の探索

1 はじめに

このブログ投稿では、Streamlit の中核となる重要な関数である st.write() に焦点を当てます。これまでの3回の記事（「Streamlit 解説コラム(1)：インストールと初期アプリケーション」、「Streamlit 解説コラム(2)：初めてのアプリケーションの構築」、「
Streamlit 解説コラム(3)：複数ページを構築する2つの解決策」） 、Streamlit の基本的な知識とアプリケーション開発プロセスについては、すでにある程度の理解があります。

Streamlit との最初の接触の記事では、まず Streamlit のインストール手順と基本的な適用方法を紹介しました。st.write() 関数を使用してテキストとデータをすばやくレンダリングする方法を確認し、基礎を築く st.header() や st.code() などの他の一般的に使用されるコンポーネントをいくつか調べました。アプリケーションを構築します。

次に、2 番目の記事では、Streamlit を使用して簡単なアプリケーションを構築する方法を示しました。st.write() 関数を使用して、データ、チャート、およびマルチメディア コンテンツを表示しました。さらに、ボタンやスライダーなどの他のコンポーネントを st.write() 関数と組み合わせて、ユーザーがアプリケーションと対話できるようにする方法についても説明しました。

最後に、3 番目の記事では、Streamlit アプリケーションで複数のページを構築する方法を詳しく説明しました。2 つのソリューションを紹介しました。1 つは状態切り替えを使用してページ切り替えを実現する方法、もう 1 つは複数の .py ファイルを使用して複数のページをモジュール的に構築する方法です。これらのシナリオの各ページは、st.write() 関数を使用して、さまざまなコンテンツとインターフェイスを表示します。

このブログ投稿では、st.write() のさまざまな使用法とテクニックをさらに詳しく説明し、デモ例と詳細な説明を通じて、このコア関数をより深く理解し、適用できるように支援します。st.write() の柔軟性と機能を深く理解することで、テキスト、データ、グラフ、メディアなどのコンテンツをより自由に構築および表示できるようになり、Streamlit アプリケーションの豊かさと対話性を強化できるようになります。

Streamlit アプリケーションにさらに魅力を加えるための st.write() の素晴らしい使用法を詳しく掘り下げてみましょう。

2 HTMLの内容を表示する

st.write() 関数は、HTML マークアップ言語でのコンテンツの表示をサポートします。これは、HTML タグを含む文字列を渡すことで実現できます。サンプルコードは次のとおりです。

st.write("<h1 style='color: blue;'>这是HTML内容</h1>", unsafe_allow_html=True)

これにより、アプリケーション内で HTML スタイルのヘッダーを表示できるようになります。

3 Markdown コンテンツの表示

同様に、st.write() 関数は、Markdown 形式でのコンテンツの表示もサポートしています。これは、Markdown 構文を含む文字列を渡すことで実現できます。サンプルコードは次のとおりです。

st.write("这是一个列表：\n\n- 项目1\n- 项目2\n- 项目3")

これにより、アプリケーション内の項目のリストが表示されます。

4 コードブロックを表示

st.write() 関数はコード ブロックの表示をサポートし、コードを強調表示できます。サンプルコードは次のとおりです。

code = '''
def hello_world():
    print("Hello, World!")

hello_world()
'''

st.code(code, language='python')

これにより、アプリケーション内の Python コードのブロックが構文強調表示とともに表示されます。

5 DataFrame の対話型テーブルを表示する

st.write() 関数は、DataFrame を単に表示するだけでなく、DataFrame を対話型テーブルに変換することもサポートします。サンプルコードは次のとおりです。

import pandas as pd

data = {
    
    '姓名': ['张三', '李四', '王五'],
        '年龄': [25, 30, 28],
        '城市': ['北京', '上海', '广州']}

df = pd.DataFrame(data)

st.write(df)

これにより、データの並べ替えやフィルター処理などができる対話型のテーブルがアプリケーションに表示されます。

6 音声とビデオを表示する

st.write() 関数は、オーディオ ファイルとビデオ ファイルの表示もサポートしています。サンプルコードは次のとおりです。

audio_file = open('audio.mp3', 'rb')
st.write("这是一段音频：")
st.audio(audio_file, format='audio/mp3')

video_file = open('video.mp4', 'rb')
st.write("这是一段视频：")
st.video(video_file, format='video/mp4')

これにより、アプリケーションにオーディオとビデオが表示されます。

7 グラフの表示

st.write() 関数を使用すると、折れ線グラフ、ヒストグラム、散布図など、さまざまな種類のグラフを表示できます。サンプルコードは次のとおりです。

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
y = np.sin(x)

fig, ax = plt.subplots()
ax.plot(x, y)

st.write(fig)

これにより、アプリケーションに正弦波の折れ線グラフが表示されます。

上記のサンプル コードでは、正弦波データを含む折れ線グラフを作成し、それを st.write() 関数に渡しました。この関数は、渡された Matplotlib Figure を自動的に認識して表示します。

さらに、Seaborn、Plotly、Bokeh などの他の一般的なグラフ作成ライブラリの場合は、st.write() 関数も適用できます。生成されたチャート オブジェクトを st.write() 関数に渡すだけで、Streamlit アプリケーションに表示されます。

8枚の表示画像

画像ファイルまたは URL リンク内の画像を表示するには、st.write() 関数を使用します。両方の方法で画像を表示する例を次に示します。

1. ローカル画像ファイルを表示します。

from PIL import Image
import streamlit as st

# 加载本地图片文件
image = Image.open("image.jpg")

# 使用st.write()函数显示图片
st.write("显示本地图片文件")
st.write(image)

2. URL リンク内の画像を表示します。

import streamlit as st

# 图片URL链接
image_url = "https://example.com/image.jpg"

# 使用st.write()函数显示图片
st.write("显示URL链接中的图片")
st.write(f"![Image]({
      
      image_url})")

どちらの例でも、st.write() 関数を介して画像を表示します。ローカル イメージ ファイルを表示する場合は、PIL ライブラリを使用してイメージをロードし、イメージ オブジェクトを st.write() 関数に渡すことができます。URL リンクに画像を表示したい場合は、Markdown 構文を使用し、st.write() で [外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。保存することをお勧めします。画像を直接アップロードして (img-MxVKelbh- 1691231122939)({image_url})] URL リンクを挿入します。

Streamlit アプリケーションで st.write() を使用して大きな画像ファイルを表示すると、読み込み時間が長くなる可能性があることに注意してください。より良いパフォーマンスとユーザー エクスペリエンスが必要な場合は、ローカル画像ファイルと URL リンクをサポートする st.image() 関数を使用して画像を表示することをお勧めします。

9 地図を表示

地理的位置と地図の表示は、st.write() 関数を使用すると比較的簡単です。st.write() 関数を使用してマップを表示する例を次に示します。

import streamlit as st

# 获取地理位置的纬度和经度
latitude = 40.7128
longitude = -74.0060

# 使用 st.write() 函数显示地图
st.write(f"纬度：{
      
      latitude}, 经度：{
      
      longitude}")
st.write(f"![Map](https://maps.googleapis.com/maps/api/staticmap?center={
      
      latitude},{
      
      longitude}&zoom=13&size=300x300&markers=color:red%7Clabel:C%7C{
      
      latitude},{
      
      longitude}&key=YOUR_API_KEY)")

この例では、まず地理的位置の緯度と経度を指定します。次に、st.write() 関数を使用して、地理的位置の緯度と経度を表示します。最後に、Markdown 構文を使用して、マップの静的画像 URL リンクを st.write() に挿入します。この例では、Google Maps API を使用して静的な地図画像リンクを生成します。

コード内の URL リンクで、YOUR_API_KEY を Google Maps API キーに置き換え、API への有効なアクセス権があることを確認する必要があることに注意してください。

インタラクティブ マップやマップ ツールバー コントロールなどのより高度なマップ機能については、Folium や Plotly などの特殊なマップ視覚化ライブラリを使用することをお勧めします。ただし、単純な静的マップ表示の場合は、Markdown 構文で st.write() 関数を使用すると、基本的なニーズを満たすことができます。

10 PDFファイルを表示する

PDF ファイルの埋め込みと表示は、st.write() 関数を使用すると比較的簡単です。次に、st.write() 関数を使用して PDF ファイルを表示する例を示します。

import streamlit as st

# 读取 PDF 文件的二进制数据
with open("document.pdf", "rb") as f:
    pdf_bytes = f.read()

# 使用 st.write() 函数显示 PDF 文件
st.write(pdf_bytes, format="pdf")

この例では、まず open() 関数を使用してバイナリ モードで PDF ファイルを読み取り、それを pdf_bytes 変数に保存します。次に、引数として pdf_bytes 変数を渡し、format="pdf" を指定する st.write() 関数を使用して、Streamlit に PDF ファイルを表示するように指示します。

コード内の open() 関数で正しい PDF ファイル パスを指定する必要があることに注意してください。指定した PDF ファイルがアプリケーション ディレクトリに存在することを確認してください。

この方法は、小さい PDF ファイルを表示するのに適しています。より大きな PDF ファイルを処理する必要がある場合、またはより高度な PDF レンダリングやインタラクティブ機能が必要な場合は、PyMuPDF や pdf2image などの専用の PDF 処理ライブラリを使用することをお勧めします。

11 ファイルのダウンロードリンクを表示します

ユーザーがファイルを簡単にダウンロードできるように st.write() にファイルのダウンロード リンクを追加するには、Markdown 構文を使用してダウンロード リンクを含むテキストを作成します。以下に例を示します。

import streamlit as st

# 文件下载链接
file_url = "http://www.example.com/example_file.csv"

# 在 st.write() 中添加文件下载链接
st.write(f"点击[此处]({
      
      file_url})下载文件")

上記の例では、st.write() で Markdown 構文を使用して、ダウンロード リンクを含むテキストを作成しました。クリック ユーザーがブラウザでリンクをクリックすると、指定したファイルがダウンロードされます。

コード例の file_url では、リンク http://www.example.com/example_file.csv を、ユーザーにダウンロードさせるファイルへの実際のリンクに置き換える必要があることに注意してください。

この方法は、Markdown コンテンツにダウンロード リンクを追加するのに適していますが、ユーザーがリンクをクリックした後、ファイルはブラウザで開かれます。ファイルを開かずにブラウザに強制的にダウンロードさせたい場合は、リンクのタグ タイプを application/octet-stream に変更するか、ファイルをダウンロードするための別の手法を使用できます。

st.write() 関数を使用してダウンロード リンクを作成するのは 1 つの方法ですが、Streamlit はファイルのダウンロードのニーズを処理するための st.download_button() や st.file_downloader() などの特定の関数も提供します。これらの関数は、より高い柔軟性と機能性を提供し、複雑なファイルのダウンロード ニーズの処理に適しています。

12 エピローグ

このブログ投稿を通じて、Streamlit の st.write() 関数のさまざまな使用法を詳しく紹介しました。st.write() を使用すると、HTML および Markdown コンテンツを簡単に表示したり、インタラクティブな表、グラフ、オーディオ、ビデオを表示したり、PDF ファイルを埋め込んで表示したりすることもできます。また、ユーザーが必要なファイルを入手できるように、ファイルのダウンロード リンクを追加する方法も学びました。st.write() は、データの表示と共有に非常に便利な、非常に実用的で柔軟かつ強力な関数です。このブログ投稿が、Streamlit アプリケーションでのコンテンツの表示に役立つことを願っています。