ComfyUIのプロンプト、見づらくない？

前置き

SDXL1.0が使えるようになってから、Stable Diffusion WebUIだと拡張機能がまだ未対応だったりなんだりで他のツールを使う機会が増えている。
中でもノードベースで使い勝手が異なり、まだ使いこなせていないところはあるもののComfyUIでの生成結果がクオリティ高めなのが出る印象があって気に入っている（一方でControlNetとかアップスケーラーとか上手く使えてないので思ったような構図にできなかったりなんだりしている部分もまぁある。

その一方で気に入らないこともまぁある。一番はプロンプト入力のテキストエリアのフォントがなんかキモくて困るということだ。なんかキモくない？見づらいし。なのでcss書ける人ならわかると思うけどわからん人の為にちょっと書いておく。

修正箇所と内容

ComfyUIのフォルダの直下に "web" ディレクトリがある。この中に "user.css" が存在する。ユーザー個人が使いやすいようにカスタマイズできるcssファイルが専用に作られている。親切だ。
"comfyUI/web/user.css" になっているはず。まずこのcssをテキストエディタかなんかで開く。

次にcssにフォントを指定する。当然ながら使っているPCにインストール済みのフォントしか使えないので注意して欲しい。ここではプログラミング用でよく使われるフリーフォントのFira CodeかSource Code Proをおすすめするけど、まぁ好きなの選んで。等幅がいいと思います。Google Fontsとかで選んでもいいんじゃないかな。フィルターでSans Serif, Monospaceにチェックを入れれば見やすいフォントが選べると思います。

インストールされてなければリンクからダウンロードしてTTFファイルを実行し、良さそうなのをインストールして下さい。下は指定方法。

/* Put custom styles here */
.comfy-multiline-input {
  font-family: "Fira Code";
  font-size: 12px;
}

一番最初の行はデフォルトで入っているテキスト。コメントアウト文なので消してもいいです。必要なのは2行目以降。
フォントサイズも微妙に小さいのでちょっと大きくしました。12～14pxがよく使われるフォントサイズとして適切だと思う。これを保存したらComfyUIをハードリロード（Crtl+Shift+R）でキャッシュ無視リロードして終わりです。

このままだとComfyUIのアップデート時にリセットされます。
ComfyUIのディレクトリでプロンプトを開き、次のGitコマンドを入れておくと、user.cssがgitの監視対象から外れるので幸せになれます。

git update-index --assume-unchanged ./web/user.css

今日はこれだけどす。
プロンプトのテキストエリア以外のフォントの変更方法は気が向いたら追加で書きます。

おまけ（フリーフォントリンク）

Fira Code

Source Code Pro

Google Fonts (Sans serif, Monospace)

Browse Fonts - Google Fonts