はじめに
↓のようにスライドバーを動かして画像を比較したい。
Knightlab の JuxtaposeJSを使用して、Streamlit アプリのスライダーで画像を比較するためのシンプルな Streamlit コンポーネントを作成します。
以下のサイトを参考にしました。ありがとうございます。
環境
- windows10 home
- python 3.10
リポジトリのClone
ソースコードは以下になります。
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だったと思う)。シンプルなデザインで手軽にお試しできました。