はじめに

↓のようにスライドバーを動かして画像を比較したい。

Knightlab の JuxtaposeJSを使用して、Streamlit アプリのスライダーで画像を比較するためのシンプルな Streamlit コンポーネントを作成します。

以下のサイトを参考にしました。ありがとうございます。

環境

ソースコードは以下になります。

git clone https://github.com/youichi-io/image-comparison.git
cd image-comparison

必要なモジュールをインストールしてアプリを立ち上げます。

python3 -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt

streamlit run comparison.py

左のサイドバーにて対象となる画像2枚をアップロードします。画像をドラッグ&ドロップしてもいいですし、パスを指定することもできます。
サンプルとしてサイゼリヤの間違い探しの画像を使用しています。samples フォルダに画像をあらかじめ用意しています。

アップロードが終わったら右下の Update Render ボタンを押してください。スライドバーを動かして画像の比較が可能になります。

どこかのサイトで見たような画像比較の仕組み(たしかAI-OCRだったと思う)。シンプルなデザインで手軽にお試しできました。