記事ディレクトリ
1 はじめに
読者の皆様、「最も完全な Streamlit チュートリアル」コラム シリーズへようこそ。インタラクティブなデータ アプリケーションを作成するためのシンプルかつ強力な方法を探している場合は、Streamlit が間違いなく最適な選択肢です。この分野で人気のフレームワークである Streamlit を使用すると、データ サイエンティスト、開発者、愛好家は魅力的なデータ視覚化ツールをこれまでよりも迅速に構築できます。
コラム名:最も完全な Streamlit チュートリアル
このコラムでは、基本から高度なテクニック、データ視覚化から対話型アプリケーションに至るまで、Streamlit のあらゆる側面を詳しく説明します。Streamlit の中心となる概念を徐々に習得し、それをプロジェクトに柔軟に適用する方法を学びます。
あなたがデータ アナリスト、機械学習エンジニア、またはデータとテクノロジーを組み合わせたい起業家であっても、このコラムは、上級 Streamlit ユーザーになるために必要な知識とスキルを提供します。
このブログでは、st.image、st.audio、st.video などの Streamlit のメディア要素機能に焦点を当てます。この記事では、これらの機能を使用して、画像、音声、ビデオ コンテンツをアプリに追加することでユーザー エクスペリエンスを向上させる方法を説明します。
2 番目の画像: 埋め込み画像コンテンツ
Streamlit アプリケーションでのグラフィック コンテンツの表示は、ユーザー エクスペリエンスを向上させるための重要な部分です。Streamlit の st.image 関数は、アプリケーションに画像を埋め込む便利な方法を提供します。この機能を使用すると、画像ファイルや URL をアプリケーションに簡単に統合して、さまざまな視覚要素をユーザーに提示できます。
2.1 画像の表示と説明
簡単な例から始めましょう。「sunrise.jpg」という名前の画像があるとします。次のコードを使用して、Streamlit アプリケーションでそれを表示できます。
import streamlit as st
from PIL import Image
# 打开图像文件
image = Image.open('sunrise.jpg')
# 使用st.image函数展示图像
st.image(image, caption='Sunrise by the mountains')
この例では、最初に PIL ライブラリの Image.open 関数を通じてイメージ ファイルを開きました。次に、st.image 関数を使用して、画像をアプリケーションに埋め込みます。caption パラメーターを使用すると、画像にキャプションを追加して、ユーザーに詳細な情報を提供できます。このタイトルは画像の下に表示されます。
2.2 画像サイズを調整する
st.image 関数は、単に画像を表示するだけでなく、画像のサイズ変更にも対応しています。width パラメーターを使用して画像の表示幅を設定することで、アプリケーションでの画像の表示サイズを制御できます。例えば：
st.image(image, caption='Sunrise by the mountains', width=300)
上記のコードでは、画像の幅は 300 ピクセルに設定されていますが、実際のニーズに応じて調整できます。
2.3 ローカル ファイルまたは URL の使用
ローカル ファイル パスまたは URL を介して画像をロードできることは注目に値します。Web から画像をロードする場合は、URL を Image.open 関数に渡すだけです。これにより、アプリケーションでオンライン画像アセットを簡単に紹介できるようになります。
url = 'https://example.com/sunrise.jpg'
image_url = Image.open(url)
st.image(image_url, caption='Sunrise by the mountains')
st.image 関数を使用すると、Streamlit アプリケーションで画像コンテンツを簡単に表示し、画像に説明と適切な寸法を追加できます。データの視覚化、画像操作、プレゼンテーション プロジェクトのいずれであっても、画像を埋め込むことでアプリに命が吹き込まれます。次のセクションでは、アプリのエクスペリエンスを豊かにするための他のメディア要素を引き続き検討していきます。
次の章では、st.audio 関数を使用してオーディオ コンテンツを埋め込む方法を詳しく見ていきます。
3 st.audio: 音声コンテンツを埋め込む
Streamlit アプリケーションにオーディオ コンテンツを埋め込むことは、ユーザー インタラクション エクスペリエンスを向上させるための鍵の 1 つです。Streamlit の st.audio 機能を使用すると、オーディオ ファイルやオーディオ データをアプリケーションに簡単に埋め込むことができます。この機能を使用してアプリでオーディオを再生する方法を詳しく見てみましょう。
3.1 オーディオファイルを再生する
まず、st.audio を使用してオーディオ ファイルを再生する方法を示すサンプル コードを見てみましょう。
import streamlit as st
# 打开音频文件
audio_file = open('myaudio.ogg', 'rb')
audio_bytes = audio_file.read()
# 使用st.audio函数播放音频
st.audio(audio_bytes, format='audio/ogg')
この例では、open 関数を使用して、「myaudio.ogg」という名前のオーディオ ファイルを開きます。次に、オーディオ ファイルのバイト コンテンツを st.audio 関数に渡し、format パラメーターを通じてオーディオ形式を指定します。これにより、アプリ内にオーディオ プレーヤーが表示され、ユーザーはオーディオ ファイルを再生できるようになります。
3.2 再生するオーディオデータを生成する
st.audio は、事前に録音されたオーディオ ファイルの再生に加えて、コードによって生成されたオーディオ データの再生もサポートしています。以下は、440Hz ノートを生成して再生する方法を示すサンプル コードです。
import streamlit as st
import numpy as np
sample_rate = 44100 # 44100 samples per second
seconds = 2 # 音符持续2秒钟
frequency_la = 440 # 音符的频率为440 Hz
# 生成时间数组
t = np.linspace(0, seconds, seconds * sample_rate, False)
# 生成440 Hz的正弦波音符
note_la = np.sin(frequency_la * t * 2 * np.pi)
# 使用st.audio播放生成的音频
st.audio(note_la, sample_rate=sample_rate)
上記のコードでは、NumPy ライブラリを使用して、2 秒間続く 440Hz の正弦波ノートを生成します。生成されたオーディオ データを st.audio 関数に渡すことで、アプリケーションでこのノートを再生できます。
st.audio を使用してオーディオ データを再生する場合は、正しいオーディオ形式とサンプル レートを指定していることを確認する必要があることに注意してください。また、オーディオ ファイルまたはデータのサイズは、アプリケーションの読み込み時間と応答時間に影響を与える可能性があります。最高のユーザー エクスペリエンスを提供するために、必ずオーディオ コンテンツを最適化してください。
st.audio 機能を使用すると、Streamlit アプリケーションでオーディオ ファイルまたは自動生成されたオーディオ データを再生できます。データ分析の視覚化に音響効果を追加する場合でも、教育アプリケーションやエンターテイメント アプリケーションに追加する場合でも、オーディオ コンテンツを埋め込むことでアプリの対話性を強化できます。次のセクションでは、st.video 関数について詳しく説明し、ビデオ コンテンツを埋め込む方法について説明します。
4 st.video: ビデオコンテンツを埋め込む
Streamlit アプリケーションにビデオ コンテンツを埋め込むことは、ユーザーの注意を引く効果的な方法の 1 つです。Streamlit の st.video 機能を使用すると、ビデオ ファイルやビデオ データをアプリケーションに簡単に埋め込むことができます。この機能を使用してアプリにビデオを表示する方法を詳しく見てみましょう。
4.1 ビデオファイルを再生する
まず、st.video を使用してビデオ ファイルを再生する方法を示すサンプル コードを見てみましょう。
import streamlit as st
# 打开视频文件
video_file = open('myvideo.mp4', 'rb')
video_bytes = video_file.read()
# 使用st.video函数播放视频
st.video(video_bytes)
この例では、open 関数を使用して「myvideo.mp4」という名前のビデオ ファイルを開きます。次に、ビデオ ファイルのバイト コンテンツを st.video 関数に渡します。これにより、アプリにビデオ プレーヤーが埋め込まれ、ユーザーはビデオ コンテンツを視聴できるようになります。
st.video 関数はさまざまなビデオ形式をサポートしていますが、ブラウザやオペレーティング システムの違いにより、一部の形式には互換性の問題が発生する可能性があることに注意してください。アプリがさまざまな環境で適切に再生できるように、広くサポートされているビデオ形式を選択してください。
4.2 オンラインビデオを埋め込む
st.video は、ローカル ビデオ ファイルの再生に加えて、URL を介したオンライン ビデオの埋め込みもサポートしています。URL で YouTube ビデオを再生する方法を示すサンプル コードは次のとおりです。
video_url = 'https://www.youtube.com/watch?v=your_video_id'
st.video(video_url)
上記のコードでは、YouTube ビデオの URL を st.video 関数に渡すだけで、アプリケーションにビデオを埋め込むことができます。これにより、アプリケーションでオンライン ビデオ アセットを簡単に紹介できるようになります。
st.video 機能を使用すると、ローカル ビデオ ファイルまたはオンライン ビデオを Streamlit アプリケーションに埋め込むことができます。データ視覚化に動的コンテンツを追加する場合でも、トレーニングやプレゼンテーションでビデオを使用する場合でも、ビデオ コンテンツを埋め込むことでアプリをより魅力的なものにすることができます。
5 結論: より高度な Streamlit アプリケーション開発に向けて
この技術ブログでは、st.image、st.audio、st.video など、Streamlit フレームワークのメディア要素の機能を詳しく調べます。これらの機能を使用すると、カラフルな画像、オーディオ、ビデオ コンテンツを Streamlit アプリケーションに簡単に埋め込むことができ、ユーザーに豊かなインタラクティブなエクスペリエンスをもたらします。
st.image 関数を通じて、画像コンテンツの表示、タイトルの追加、画像のサイズ変更の方法を学びました。これにより、データの視覚化およびプレゼンテーション プロジェクトが視覚的によりインパクトのあるものになり、ユーザーに優れた没入型エクスペリエンスをもたらします。
st.audio 機能を使用して、音声ファイルを埋め込む方法と自動生成される音声データを確認しました。データ分析の結果に音響効果を追加する場合でも、教育アプリでオーディオ キューを使用する場合でも、オーディオ コンテンツを埋め込むと、アプリにさらなる次元が追加されます。
最後に、st.video 関数を詳しく調べ、ローカル ビデオ ファイルとオンライン ビデオを埋め込む方法を確認しました。これにより、アプリケーションに動的コンテンツを表示する効果的な方法が提供され、アプリケーションがより活発で興味深いものになります。
つまり、Streamlit は、強力で使いやすいデータ アプリケーション開発フレームワークとして、インタラクティブなアプリケーションを迅速に構築するための豊富なツールと機能を提供します。メディア要素を巧みに使用することで、より多くのマルチメディア要素をアプリケーションに追加し、ユーザー エクスペリエンスをより豊かで魅力的なものにすることができます。
このブログのサンプル コードと説明に基づいて、ユーザー入力コントロール、データ対話、レイアウト調整などのより高度な機能をさらに調べることができます。継続的な練習と学習を通じて、より複雑で機能が豊富な Streamlit アプリケーションを作成できるようになります。
このブログを読んでいただきありがとうございます! ご質問、フィードバック、アイデアがございましたら、コメント欄でお気軽にお問い合わせください。将来のプロジェクトで、Streamlit を使用して作成した素晴らしいインタラクティブ アプリケーションを見ることを楽しみにしています。学習と革新をやめないでください。Streamlit の世界でのさらなる成果をお祈りしています。
