lgtm

LGTM画像を生成して共有します。https://l.doany.io

xool から分離したもので、ポスト通信簿は https://github.com/danything/xool にあります。

何をするか

画像をアップロードすると LGTM を重ねて webp で保存します。長辺 960px に収め、 アニメーション(GIF・WebP)はそのまま残ります。EXIF の向きも反映します。

変換はブラウザの中でやります。Web Worker を 2 つ並べたパイプラインで、片方が画像を 読み込んで(GIF は giflib、アニメーション WebP は libwebp、それ以外はブラウザ自身) Canvas で縮小と LGTM の合成をし、できたフレームから順にもう片方へ渡して libwebp で WebP にします。読み込みとエンコードが同時に進むので、長いアニメーションでも速く 終わります。giflib と libwebp は wasm/lgtm.cpp のバインディングと一緒に SIMD 有効で wasm にしたもので、イメージのビルド (Dockerfile の wasm ステージ) で作ります。 サーバーは届いた ファイルが WebP であること・長辺 960px 以内・30MB 以内であることだけを確かめて そのまま保存します。LGTM が載っているかまでは確かめられないので、素の画像を上げる アカウントは削除で対処します。

追加する方法はふたつあり、ヘッダーの「画像を追加」から選ぶか、ページのどこにでも 画像をドラッグ&ドロップします。Tenor 等のサイトから直接放り込めるのはこちらです。 ファイルを掴んだ瞬間に画面全体が受け取り先だと分かるようになっています。 生成が終わると、貼り付け用の <img> タグ(width="100%")がそのままクリップボードに入ります。

一覧はタイルをクリックすると <img> タグをコピー、右上のボタンで拡大表示します。 自分が上げたものだけ削除でき、取り消せないので一度目のクリックでは確定待ちになります。 最初に12件だけ表示し、あとは画面が埋まるまで、スクロールに合わせて30件ずつ読み込みます。

/ が新着、/mine が自分の分です。

ログイン

GitHub のみです。𝕏 でのログインは xool から分離したときに廃止しました。 それ以前に 𝕏 だけで上げた画像はそのまま残っていて、管理画面では「ログインなし」と 表示されます。

管理画面

/admin で画像数・アップロード者・日別の推移と、ユーザーの権限が見られます。 開けるのは ADMIN_GH_LOGINS に載っている人と、そこから権限を渡された人だけで、 それ以外には 403 ではなく 404 を返します。ADMIN_GH_LOGINS の管理者は画面からは 剥がせないので、渡した相手が間違いだったときの戻り道になります。

開発環境

リバースプロキシ (genkan) を先に立ち上げておく
https://github.com/danything/genkan
下記コマンドで立ち上げ

./s.sh i

./s.sh i は最初にブラウザ用の wasm (src/lib/lgtm/vendor/lgtm-wasm.{js,wasm}) も 作ります。生成物なのでコミットしていません。wasm/ か Dockerfile の wasm ステージを 変えたら作り直します。中身はイメージと同じステージをビルドして取り出すだけで、変わって いなければキャッシュで一瞬です。

./scripts/build-wasm.sh        # docker
./scripts/build-wasm.sh wslc   # docker の代わりに wslc

CI (Docker Build Check) はイメージをビルドしたあと起動し、Chromium で PNG と GIF を 実際に WebP へ変換できるか確かめます (tests/wasm.spec.ts)。emsdk の更新は自動で マージされるので、ビルドが通るだけでなく wasm が動くことまでここで見ます。手元では ビルドしたイメージを起動して、それに対して流せます (BASE_URL で向き先を変えられます)。

bunx playwright test  # http://localhost:3000

各自の設定

compose.yml は全員共通で、直接編集しません。手元だけの設定は compose.override.yml に書きます。Docker Compose が自動で読み込んで compose.yml に重ねるため、起動コマンドは変わりません。このファイルは gitignore してあります。

# compose.override.yml
services:
  lgtm:
    environment:
      # GitHub OAuth アプリ。コールバックは https://l.localhost/api/gh/cb
      - GITHUB_CLIENT_ID=xxxxx
      - GITHUB_CLIENT_SECRET=xxxxx
      # OAuth の state に使う任意の文字列
      - HASH=xxxxx
      # /admin を開ける人。空なら誰も開けません
      - ADMIN_GH_LOGINS=xxxxx

重ねた結果は下記で確認できます。

docker compose config