LoginSignup
3
2

More than 1 year has passed since last update.

スライドバーを動かすタイプのImage Comparison

Last updated at Posted at 2022-12-09

はじめに

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

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

キャプチャ.JPG

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

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

おわりに

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2