streamlit で画像アノテーション

前提

こういうことをしてくれる機械学習モデルをつくってた。

別でつくっているアプリケーションの一貫で、値段の OCR の精度を上げたかったので、値段の画像からどこで「¥」マークを切り落とせばいいかというモデルを作りたかった。ちょうど streamlit をやっていたので、画像のアノテーションも streamlit でやってみた

アプリケーションは切り抜きをするページと、アノテーションをするページの2ページ構成で、両方が終わったらスクリプトでファイルを整理して、Google Drive にアップロードした dataset から Google Colab でモデルをつくった。

切り抜きパート

こういう感じで、画像の中の行列の数とデフォルトの幅や高さを指定すると、設定に応じたグリッドを画像の中に描画 & 表示する。

四角の描画などは cv2 を使った。地味な工夫ポイントとしては、 cv2.rectangle だと線の外側が切り抜かれる範囲になる。今回は微妙な1-2px の差で、画像に余計な線が入る作業だったので、 cv2.rectangle の座標を (x - stroke_width, y - stroke_width), (x + w + stroke_width, y + h + stroke_width) にして、四角の内側が切り抜かれるようにした。あとは、画像によっては行/列の大きさが微妙に揃ってなかったりしたので、行列ごとの細かい数値を左のサイドバーでできるようにした。

アノテーションパート

ディレクトリを選ぶと、画像が表示されて個々のアノテーションができるようになってる。ここでも、デフォルトの値を設定して個別に設定できようにしてある。

一番下の保存ボタンを押すと、ファイル名とx座標が保存された CSV ができる。