👗

画像生成AIで生成した画像をCaddyで管理する

2022/12/13に公開

HTML

Caddy

Stable Diffusion

tech

Intro

Stable DiffusionやNovelAIのような画像生成AIを使っていると、ものすごい数の画像が生成されて取捨選択するのが億劫になり、いつの間にか.pngファイルが数百枚数千枚と増えていき困ってしまいます。

Google Colabから直接Google DriveやGoogle Photosに保存できるようにすると誤検知でアカウント凍結にあいそうで怖いですし、WindowsやLinuxのエクスプローラーで管理するのも面倒ですよね。

最終的にはセルフホストしたウェブサイトで公開したいところですがindex.htmlでこのためだけにCSSやJavaScriptを書くのはちょっと……と悩んでいたところ、サーバーとして使う予定だったCaddyがめちゃくちゃ便利で、これだけで今まで挙げてきた悩み全部解決しそうな勢いでしたのでちょこっと紹介します。

Caddy

https://caddyserver.com/

CaddyはGo言語で作られたオープンソースのWebサーバーです。
ApacheやNginxと同じように使えますが何と言ってもバイナリ1つあるだけでどんな環境でも動く素晴らしい特徴を持っています。
HTTP/1.1やHTTP/2だけではなくHTTP/3に対応しておりhttps化も非常に簡単に出来たり本当に様々な機能を持っていますが今回紹介するのはGo言語の標準ライブラリとして有名なTemplateです。

Template

https://golang.org/pkg/text/template/
https://masterminds.github.io/sprig/

このTemplateはJavaScriptやVue.jsをはじめとした様々なプログラミング言語、Webアプリケーションフレームワークで使われているMustacheやPythonのJinja2に似たHTMLを出力するDSLです。
CaddyはGo言語標準ライブラリのTemplateのほか、更に便利にしたTemplate関数を提供するSprig、そしてCaddy内で使える変数を呼び出せる独自のTemplateを用意しており、組み合わせるだけでWebアプリケーションフレームワークにも負けず劣らずの動的コンテンツを生成できます。

それでは実際にやってみましょう。

File Server

> caddy version
v2.6.2 h1:wKoFIxpmOJLGl3QXoo6PNbYvGW4xLEgo32GPBEjWL8o=

今回は試しにWindows上でやってみたいと思います。
公式ウェブサイトからダウンロードするなりGitHubからcurlやwgetでGETするなりしてcaddyファイルを取ってきます。
途中「このアプリの機能のいくつかがWindows Defenderファイアウォールでブロックされています」と表示されることがありますがうまいことアクセスを許可しておいてください。

> caddy file-server --root "%HOMEPATH%\Pictures\sd\00" --listen :8080 --browse

まずこうコマンドを書いて動かすとファイルサーバーが動きます。
ものすごく簡単ですね！
localhost:8080を確認してみましょう。

file

ダークモード対応していてめちゃくちゃかっこいいですね。
でもそうじゃないんだよな。
こう、画像を一覧で表示させたいのです。

どうやらCaddyバイナリ内に組み込まれたbrowse.htmlを呼び出しているようです。
これをカスタマイズするにはどうすればいいのでしょうか。

Caddyfile

CaddyはCaddyfileというコンフィグファイルを書くことができ、カレントディレクトリに置くだけで簡単に設定を読み込むことができます。
このように書けば別途カスタマイズしたbrowse.htmlを呼び出せるようです。

:8080
root * {$HOMEPATH}\Pictures\sd
file_server {
	browse browse.html
}

それでは次に先程確認したbrowse.htmlをダウンロードしてカスタマイズしてみましょう。

browse.html

<!DOCTYPE html>
<html>
	<head>
		<title>{{html .Host}}</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="color-scheme" content="light dark">
	</head>
	<body>
		<header>
			<a href="/">{{html .Host}}</a>
		</header>
		<main>
			{{- if eq "/" html .Name}}
			<ul>
				{{- range .Items}}
				<li>
					<a href="{{html .URL}}">/{{html .Name}}</a>
				</li>
				{{- end}}
			</ul>
			{{- else}}
			<div>
				{{- range .Items}}
				<a href="{{html .URL}}">
					<img src="{{html .URL}}">
				</a>
				{{- end}}
			</div>
			{{- end}}
		</main>
		<footer>
			Served with <a rel="noopener noreferrer" href="https://caddyserver.com">Caddy</a>
		</footer>
	</body>
</html>

browse.htmlを参考にしてTemplateを使いだいぶやっつけで書きましたが、とりあえず今回はディレクトリ内の画像一覧を表示したいのでヨシ！
{{- if eq "/" html .Name}}, {{- else}}, {{- end}}Templateを使いルートディレクトリと他ディレクトリで条件分岐し表示するコンテンツを変え、{{- range .Items}}, {{- end}}Templateを使いループしコンテンツ一覧を表示しています。
完全に構造化プログラミングですね。

> dir
...
2022/12/13  21:25    <DIR>          .
2022/12/13  21:25    <DIR>          ..
2022/12/13  21:25               733 browse.html
2022/12/13  21:25        41,055,744 caddy.exe
2022/12/13  21:25                73 Caddyfile
...

> caddy run

あとはこんな感じのカレントディレクトリで起動するだけです。

server

localhost:8080のルートディレクトリはこんな感じで、

caddy

ひとつ上のディレクトリへ移動すると画像一覧が表示されます。
いや～。
すごい！！

Outro

駆け足で紹介してみましたがいかがでしょうか。

今回はJavaScriptはおろかCSSも使っていないため本当に画像を一覧で表示させるだけになってしまいましたが、もっともっとカスタマイズできますし様々な用途で使うことができるため可能性は無限大です。

VPSで動かすもよし。Raspberry Pi Zeroで動かすもよし。NASのDocker機能で動かすもよし。
VPNでアクセスするもよし。Tailscaleでスマホからアクセスするもよし。DDNSで全世界に公開するもよし。

CaddyありがとーWebサーバー最高！！

Intro

Caddy

Template

File Server

Caddyfile

browse.html

Outro

Discussion