【python】streamlitで文字を上書きして表示する方法

　streamlitは、HTMLやCSSを用いなくても、pythonのみでブラウザー上で起動するアプリケーションを作ることができます。しかし、少しクセがあり、例えば文字を入力する場合、st.write(“”)で簡単に文字を挿入できますが、この挿入を繰り返すと、文字が下方向に表示され続けます。

　そこで、同じ場所で文字を上書きするにはどうすればよいか、紹介したいと思います。

streamlitの使い方

　まず初めに、簡単にstreamlitの使い方をご説明します。

• Anaconda、パワーシェル、ターミナルなどでインストールする。

• ターミナル等でstreamlitを起動する。(pythonファイル名の前にstreamlit run を記述する)

• ターミナル等でstreamlitを停止する。

上書き失敗例

　下記プログラムでは、5回文字を入力します。その文字が5回下方向に表示されます。

import time
import streamlit as st

def main():
    st.markdown("# 上書きテスト")
    
    for i in range(5):
        time.sleep(1)
        st.write(i, "です")
    
if __name__ == '__main__':
    main() 

上書き成功例

　emptyを使用することで、文字を上書きして入力することができます。

import time
import streamlit as st

def main():
    st.markdown("# 上書きテスト")
    overWrite = st.empty()
    
    for i in range(5):
        time.sleep(1)
        
        with overWrite.container():
            st.write(i, "です")
        
if __name__ == '__main__':
    main() 

使用用途例（色検知の表示）

　赤色を検知すると、Streamlitで「NGです」と判定結果を表示するように作成してみました。openCVを使い、色を判別するプログラムを作成しています。

　リアルタイム画像での判定のため、文字の上書きがない場合、永遠と文字が下方向に表示され続けます。st.empty()があることで、判定結果を上書きし、期待したような色検出のアプリケーションを作成することができます。

永遠と文字が流れ続けます。