Scribble at 2024-10-10 12:15:23 Last modified: 2024-10-10 12:29:53
先日、Stable Diffusion のモデルを比較する良いサイトが無いと書いたのだが、モデルごとに全く同じプロンプトやサンプリングなどの設定で生成した画像の比較をする参考に、ヒストグラムくらい掲載したらいいのにと言っておいた。そのときは、Photoshop で画像を開いたときに編集用のヒストグラムをキャプチャーしてみたらどうかと提案したのだけど、それではいかにもエンジニアとしては芸が無いし、だいいち Photoshop を持ってない人が馬耳東風ということではよくない。ということで、なるべく技術的な負荷が高くない方法でヒストグラムを得るにはどうするかを 0.5 秒ほど考えて、ひとまず PHP で解析してみればよかろうということになった。それが上のようなヒストグラムだ。
暇があったら解説ページを掲載するから、ひとまずここでは概略だけを説明しておくと、まずフォームからファイルをアップロードして、move_uploaded_file() で所定の場所に保存する。それを再び imagecreatefrompng() でリソースのストリームに開き、imagecolorat() で色情報を得る。ご承知のように、これは R-G-B の順番で三色の色情報が連結された二進数であるから、個々の色情報を取り出すときはビットシフトして R なら >> 16 とか G なら >> 8 などと桁を動かしてから、上位の桁をキレイにするために 0xFF(8桁すべて1だが上の桁はすべて0となっている数値)との AND 演算を実行して、正しく扱える RGB 値を取り出す。これを使って棒グラフを書けばいいだけだ。
棒グラフは、原則として Y 軸の上辺を最大値として描画するので、色情報の 0~255 で最もたくさん使われている数の値を最大値としてから、各色情報の値を最大値に対する相対的な値として計算し直して、グラフの高さの値に設定する。ちなみに、グラフは D3.js などを使ってみたのだが、どうも直感的な使い方がしにくいので、JavaScript のチャート・ライブラリの類はいっさい使っていない。こんなものは CSS だけでキレイに作れる。
なお、テストとして、30 x 30 ピクセルの白一色と黒一色の PNG 画像を解析してみたが、どちらもグラフは右端だけ(白だけだから)と左端だけ(黒だけだから)となっていて、正しく解析していることを確認している。