AIチュートリアル

拍片哥のレディースファッション教程：バイリンガルAI服装画像ライブラリとバーチャル試着サービスの構築

本チュートリアルでは、拍片哥のレディースファッション画像ライブラリの運用方法、カテゴリー分類、バイリンガル検索、コーディネート台、画像ダウンロード機能の使い方を紹介します。さらに、Docker、クラウドモデル、またはローカルのComfyUIを利用して、オプションのAIバーチャル着せ替えバックエンドに接続する方法も説明します。

2026年10月30日約15分で読了

拍片哥のレディースファッション教程：バイリンガルAI服装画像ライブラリとバーチャル試着サービスの構築

プロジェクト概要

拍片哥女装（COSTUME-DB-01）は、ダークテーマを採用したオープンソースの AI 衣装リファレンスギャラリーです。人物を含まず、アスペクト比 2:3 の AI 生成衣装画像を 1407 枚収録しています。フロントエンドはビルド不要の純粋な静的サイトで、直接閲覧、検索、絞り込みができます。バーチャル試着を利用する場合は、backend/ にある GoFrame v2 バックエンドもデプロイできます。

まずオンライン版を開いて無料ギャラリーを体験できます。また、GitHub リポジトリからソースコードを取得し、ローカルで実行したり二次開発したりすることもできます。

主な機能

1407 セットの衣装：春、夏、秋、冬、インナー、パーティー、水着、セクシーの 8 カテゴリに分類されています。
中国語・英語対応：初期表示は中国語で、ページ右上から English に切り替えられます。
双方向キーワード検索：「白」「レース」「ワンピース」などの中国語に加え、white、lace、dress などの英語にも対応しています。
画像閲覧：無限スクロール、大画像表示、左右矢印キーによる切り替え、Esc による閉じる操作、原寸 PNG のダウンロードに対応しています。
試着コーディネート：人物画像をアップロードし、衣装を選択して、プレビュー、ドラッグ、拡大縮小、切り抜き合成ができます。
AI バーチャル着せ替え：オプションのバックエンドを通じて、Gemini、豆包、GPT Image、OpenAI Images 互換モデル、またはローカル ComfyUI を呼び出せます。
ローカルでのプライバシー保存：モデル設定は現在のブラウザに保存され、生成に成功した履歴は IndexedDB に保存されます。デバイス間では同期されません。
画像から同じ商品を検索：大画像の詳細画面と試着エリアから、淘宝の画像検索を起動できます。

ステップ 1：静的フロントエンドを実行する

フロントエンドは主に index.html、data.js、assets/ で構成され、依存関係のインストールやビルドは不要です。リポジトリを取得したら、プロジェクトのルートディレクトリで任意の静的ファイルサーバーを起動します。

Python を使用する場合

python3 -m http.server 3000

Node.js を使用する場合

npx serve -l 3000 .

その後、http://localhost:3000 にアクセスします。index.html を最新のブラウザで直接開くこともできますが、完全なインタラクションをテストするには、通常はローカル HTTP サービスで実行する方が適しています。

ギャラリーの閲覧、カテゴリ絞り込み、二言語検索、大画像表示、基本的なコーディネート機能には API Key は不要で、バックエンドのデプロイも必要ありません。原寸 PNG の合計容量は約 1GB 以上のためリポジトリには含まれておらず、ダウンロードボタンは元サイトのリソースを指します。

ステップ 2：衣装を閲覧・検索する

カテゴリを選択：春、夏、秋、冬などのカテゴリから閲覧範囲を絞り込みます。
キーワードを入力：検索ボックスに中国語または英語の衣装属性を入力すると、結果がリアルタイムで更新されます。
言語を切り替え：右上の言語ボタンで中国語と英語のインターフェースを切り替えます。
大画像を表示：衣装の詳細を開くと、キーボードの左右矢印キーで隣接画像を閲覧でき、Esc で閉じられます。
ダウンロードまたは同じ商品を検索：必要に応じて原寸ダウンロードを利用するか、淘宝の画像検索を開きます。

URL パラメータを使って、指定した言語や検索状態を共有することもできます。

?lang=en
?q=lace
?lang=en&q=white

lang は zh または en に設定でき、q は初期検索語を指定します。

英語モード

ステップ 3：基本試着コーディネートを使用する

フロントエンドで試着機能を開いたら、まずギャラリーから参考衣装を選び、人物写真を 1 枚アップロードします。基本コーディネート機能では、オンラインプレビュー、ドラッグ、拡大縮小、切り抜き合成に対応しており、大規模モデルは使用しません。衣装をより自然に人体へ合わせるには、AI 着せ替えバックエンドを追加でデプロイする必要があります。

写真をアップロードすると、フロントエンドは長辺を自動的に 2048 ピクセルまで縮小し、優先的に WebP へ変換したうえで、0.90 から 0.75 の品質段階で圧縮します。

ステップ 4：Docker で AI 着せ替えバックエンドをデプロイする

バックエンドは backend/ にあり、ホストマシンに Go のコンパイル環境をインストールせずに済むため、Docker Compose の使用を推奨します。

cp backend/.env.example backend/.env
docker compose up -d

backend/.env を編集し、使用するモデルのキーを入力します。サービス起動後は、デフォルトで http://localhost:8000 をリッスンします。フロントエンドも localhost または 127.0.0.1 で開いている場合、自動的に http://127.0.0.1:8000 への接続を試みます。

Docker Run を使用する場合

cd backend
docker build -f manifest/docker/Dockerfile -t costume-tryon .
docker run -d --name costume-tryon -p 8000:8000 -e ARK_API_KEY="あなたの豆包ArkKey" -e OPENAI_API_KEY="sk-あなたのOpenAIKey" costume-tryon

Docker を使用しない場合

Windows ユーザーは backend/restart.bat を実行できます。Go がインストール済みの場合は、直接起動することもできます。

cd backend
export ARK_API_KEY="あなたのKey"
go run main.go

Windows PowerShell では、環境変数を $env:ARK_API_KEY="あなたのKey" と記述します。

ステップ 5：着せ替えモデルを設定する

モデル設定ファイルは backend/manifest/config/config.yaml にあり、テンプレートは config.example.yaml です。各モデルには、プロトコル、API Key、環境変数名、Base URL、実際のモデル名を個別に指定できます。

llm:
  models:
    gpt-image:
      provider: openai
      envKey: "OPENAI_API_KEY"
      baseURL: "https://api.openai.com/v1"
      model: "gpt-image-2"

    doubao:
      provider: doubao
      envKey: "ARK_API_KEY"
      baseURL: "https://ark.cn-beijing.volces.com/api/v3"
      model: "doubao-seedream-3-0-t2i-250415"

    gemini:
      provider: gemini
      envKey: "GEMINI_API_KEY"
      baseURL: "https://generativelanguage.googleapis.com/v1beta"
      model: "gemini-3.1-flash-image"

環境変数は設定内の apiKey より優先されます。通義万相、智譜 CogView、硅基流動など、OpenAI Images プロトコル互換サービスを接続する場合は、provider: openai のモデルセクションを追加し、対応する Base URL とモデル名を入力するだけで利用できます。アダプターコードを変更する必要はありません。

ステップ 6：フロントエンドをバックエンドに接続する

フロントエンドは、次の優先順位で AI 着せ替えサービスを検索します。

設定センターに保存された「バックエンド API アドレス」。
ページの読み込み前に設定されたグローバル変数 window.AI_API_URL。
URL の tryon パラメータ。
フロントエンドにローカルアクセスしている場合は、http://127.0.0.1:8000 にフォールバック。

最も簡単な方法は、ページ右上の設定センターを開き、http://localhost:8000 を入力することです。次の共有 URL も使用できます。

https://あなたのフロントエンドアドレス/?tryon=http://localhost:8000

設定センターでは、プロトコル、モデル名、Base URL、API Key、独立したバックエンドアクセス Token も保存できます。個人のモデル設定は現在のブラウザにのみ保存され、生成時に 1 回のリクエストとして一時的にバックエンドへ送信されます。バックエンドのデータベース、設定ファイル、業務ログには書き込まれません。共有デバイスの使用後は、ローカル設定を自分で消去してください。

ローカル ComfyUI オフライン着せ替え

パソコンに独立 GPU がある場合、または LAN 内に ComfyUI ホストがある場合は、API Key 不要のローカル方式を利用できます。プロジェクトは Qwen-Image-Edit-2511 Int8、4 ステップ Lightning LoRA、MiniMax H3 ワークフローに対応しており、優先ワークフローが準備できていない場合は H3 にフォールバックできます。

ComfyUI を起動します。デフォルトアドレスは http://127.0.0.1:8188 です。
backend/README.MD に従って、Qwen-Image-Edit-2511 モデルと Lightning LoRA を配置します。
ComfyUI のモデルセクションとワークフローファイルを設定します。
ウェブ設定センターで「ComfyUI ローカル」を選択し、接続テストに成功したら保存します。

comfyui:
  provider: comfyui
  baseURL: "http://127.0.0.1:8188"
  model: "qwen-image-edit-2511"
  workflowPath: "workflows/comfyui_qwen_image_edit_2511_api.json"

応用テクニックと本番環境へのデプロイに関する提案

適切なモデル方式を選ぶ

ComfyUI：ローカル GPU を持ち、プライバシーを重視し、API 費用をかけたくないユーザーに適しています。
Gemini：README では Nano Banana 2、つまり gemini-3.1-flash-image をクラウド向けの推奨デフォルト方式として掲載しています。
豆包 Seedream：中国国内のネットワークで利用できる方式が必要なユーザーに適しています。
GPT Image 2：OpenAI Images プロトコルを使用し、互換性のあるサードパーティ中継アドレスも設定できます。

公開ネットワーク向けのセキュリティ制限を有効にする

バックエンドを公開ネットワークに公開する場合、デフォルトサービスをそのまま公開すべきではありません。プロジェクトでは Bearer Token 認証、厳密な CORS ホワイトリスト、トークンバケット方式のレート制限、日次利用上限、全体および主体ごとの同時実行数制御を提供しています。README に記載されたデフォルト値は、毎分 10 回、1 日 100 回、全体 2 並列、主体ごと 1 並列です。具体的な本番環境の設定については backend/DEPLOY.md を参照してください。

バックエンドは、JPEG、PNG、WebP の実画像コンテンツのみ受け付けます。1枚あたりの上限は 8 MiB、2枚合計の上限は 16 MiB です。画像の各辺は 256～8192 ピクセルの範囲内で、総ピクセル数は 2000 万を超えてはなりません。これらの制限は、偽装ファイル、コードインジェクション、ピクセル爆弾による解凍攻撃のリスクを低減するために設けられています。

ローカルデータとプライバシーの境界を理解する

成功した AI 着せ替え結果は、現在のブラウザーの IndexedDB に保存され、確認、ダウンロード、個別削除、または一括消去ができます。記録がアップロードされたり、他のデバイスに自動同期されたりすることはありません。個人用 Base URL は、公開バックエンドが内部ネットワークへのリクエストプロキシとして悪用されるのを防ぐため、デフォルトでは localhost、内部ネットワーク、予約済みアドレスを指定できません。

服装データを拡張する

ギャラリーデータは data.js に保存されています。各レコードには id、カテゴリ、キーワード、サムネ、画像、原寸 が含まれます。これらの日本語フィールド名は、元データとの互換性を保つために維持されています。フロントエンドは分類とキーワードを中国語または英語に自動的にローカライズします。データを追加する際は、既存のフィールド構造と画像パスの規則に従ってください。

まとめ

拍片哥女装は、すぐに使えるバイリンガル AI 服装リファレンスギャラリーとしても、マルチモデル仮想試着プロジェクトのフロントエンドとバックエンドの基盤としても利用できます。初回利用時は静的フロントエンドを起動するだけで十分です。実際に AI 着せ替えを行う場合は、必要に応じて Docker のクラウドモデルまたは ComfyUI のローカル構成を選択してください。プロジェクトは MIT License を採用しており、商用利用、変更、統合、配布が認められています。ただし、必要なライセンス表示を保持し、ギャラリー内のすべての画像は AI が生成したコンセプト衣装デザインであり、実在ブランドの商品写真ではないことに注意してください。