個人サイトに画像生成用のページをつくった

自分のサイト「裏庭」に、Draw Thingsを使うための入口を追加しました。そこから専用の作業室を開き、ブラウザーにプロンプトを入力すると、自宅のMac miniで画像を生成できます。これにより外出時でも画像生成を行えるようになります。

Draw Thingsは、手元の端末で画像生成を行えるアプリです。今回つくったのは、そのMac版をブラウザーから操作するための画面です。画像を生成する計算は、自宅のMac miniが担当します。

ただし、誰でも使える画像生成サービスとして公開したわけではありません。公開サイトには作業室への入口だけを置き、生成画面はTailscaleで接続した自分の端末から、パスキーでログインして使う構成にしました。

Draw Thingsの作業室。接続状態、プロンプト入力欄、資料画像の追加欄が並ぶ

ログイン後の実際の画面。掲載画像は、専用URLやブラウザーの周辺情報が写らない範囲に切り取っています。

ブラウザーで入力し、Mac miniで生成する

基本的な使い方はシンプルです。

  1. 使う端末のTailscaleを接続する。
  2. サイトの入口から作業室を開き、パスキーでログインする。
  3. プロンプトと必要な設定を入力する。
  4. 「Mac miniで生成する」を押す。
  5. 生成が終わったら、同じ画面の履歴で画像を確認する。

画面には、プロンプトとネガティブプロンプトに加え、画像サイズ、ステップ数、CFG、シードの設定を用意しました。一方、モデル・LoRA・サンプラーはMac側のDraw Thingsで選んでいる設定を使います。ブラウザーからすべてを変更する仕組みにはしていません。

変更の強さ、画像サイズ、ステップ数と「Mac miniで生成する」ボタン

生成設定と実行ボタン。CFGとシードは「詳細設定」から指定できます。

1回の依頼で生成する画像は1枚です。同時に生成するのも1件にして、処理中と待機中を合わせて最大5件まで受け付けます。ページを閉じても、受け付け済みの生成処理はMac側で続きます。

履歴には画像、プロンプト、サイズやシードなどが残り、「設定を再利用」から入力へ戻せます。条件を少し変えながら試す操作を、作業室の中で行えるようにしています。

実際の生成結果

次の画像は、作業室の履歴に保存されている日本庭園の生成例です。今回の記事のためにつくった画面イメージではなく、動いている画面を撮影しています。

日本庭園の生成結果。画像とプロンプト、生成条件、設定を再利用するボタンが表示される

日本庭園の生成例。512 × 512、20ステップ、CFG 7、シード123456。

この例では、次のプロンプトを使っています。

a small peaceful Japanese garden, watercolor landscape, trees and rocks, morning sunlight, no people

ブラウザーから依頼を送り、生成した画像を同じ場所で確認できることが、今回の機能の中心です。なお、生成結果はモデルやサンプラーなどにも左右されるため、このプロンプトと表示された数値だけで同じ画像を再現できるとは限りません。

資料画像からも描けるようにした

テキストだけでなく、PNG・JPEG・WebPの資料画像を追加して生成する機能も用意しました。複数の画像を選ぶと、ブラウザー内で1枚の「資料シート」に並べ、そのシートを生成元としてMac miniへ送ります。

送る前に「資料シートを確認」で配置を見ることができ、「変更の強さ」も調整できます。値が小さいほど元のシートを保ち、大きいほどプロンプトによる変更が強くなる設定です。

ここには制約もあります。複数の資料を「この画像は人物、この画像は服、この画像は背景」と個別に指定する仕組みではありません。1枚に並べた画像を元にするため、資料の配置が生成結果に残る場合があります。画像を増やすほど、それぞれの細部も小さくなります。

固定の枚数上限は設けていませんが、選択する元ファイルは合計20MiBまでで、画素数にも上限があります。資料付きの生成は2ステップ以上が必要です。画面の既定値は20ステップですが、モデルや変更の強さに応じて調整する必要があります。

元画像の個別ファイルやファイル名は送信せず、ブラウザーで描き直した資料シートだけを送ります。サーバー側でも画像を再処理して、EXIFなどのメタデータを落とすようにしています。

公開サイトと、個人用の作業室を分ける

今回の構成を簡単に書くと、次の流れになります。

公開サイト「裏庭」
  └ 作業室への入口

自分の端末のブラウザー
  ↓ Tailscale経由のHTTPS接続
Mac miniの専用サーバー
  ↓ ローカルHTTP API
Draw Things
  ↓
生成画像と履歴をMac miniに保存

公開サイトを経由してプロンプトや生成画像を中継する構成ではありません。作業室の画面と生成APIはMac mini側から提供し、この連携ではCloudflare Worker・D1・R2に画像やプロンプトを中継・保存しません。

接続にはTailscale Serveを使い、Tailscale内で開けるようにしています。インターネット全体へ公開するFunnelは使っていません。さらに、所有者の接続であることの確認と、パスキーによるログインを組み合わせています。

URLを知っているだけで、生成したり画像を見たりできる設計にはしていません。パスキーの秘密鍵や生体情報を、この作業室のサーバーに送ることもありません。

「Macに保存する」と「外へ何も出ない」は違う

画像と履歴の保存先をMac miniにしても、ブラウザーに表示するには、閲覧している端末へ画像を送る必要があります。

また、Tailscaleは接続管理のために端末やアカウントなどの情報を扱います。中継が必要な場合の通信も端末間で暗号化されますが、「外部との通信が一切ない」という意味ではありません。通信の暗号化については、Tailscaleの説明も参照しています。

作業室では、外部の広告・アクセス解析・フォント配信を使わず、画像などをキャッシュしないよう応答を設定しています。ログアウトやページ移動時には、画面上の画像や入力内容も消去します。ただし、ブラウザーやOSの一時データ、利用者による画面撮影まで防げるわけではありません。端末そのものを安全に管理することは引き続き必要です。

自宅のMacで動かすからこその制約

この構成では、Mac miniの電源が入り、Tailscaleと専用サーバー、Draw ThingsのHTTP APIが動いている必要があります。Macを再起動した後は、ユーザーのログインや各アプリの状態確認も必要です。端末から接続できても、生成を担当するMacが止まっていれば画像はつくれません。

また、完了した画像と履歴は最新50件まで保存し、それを超えると古いものから削除します。長く残したい画像は、Mac側で別途保存する運用です。

通信エラーやタイムアウトなどで処理の状態が分からなくなった場合は、次の生成を自動で進めず、一時停止するようにしています。Draw Things側の状態を確認してから、専用サーバーを再起動して再開します。

この連携では有料の画像生成APIを使っていませんが、Mac miniの電気代や通信費、既存のサイト維持費はかかります。「手元のMacで動かす」ことと「運用コストがゼロである」ことは分けて考えています。