mcpField
C
codex-image-gallery

codex-image-gallery

github.com/daymadeクリエイティブ・メディア1.5k333 回インストール今日更新
リポジトリ

codex-image-gallery について

Codex Image Galleryは、Codexの画像出力をローカルブラウザーで閲覧するためのスキルです。画像フォルダーを指定でき、既定ポートが使用中の場合は別のポートを試します。

主な機能

  1. 01Codex画像のローカルブラウザー表示
  2. 02画像フォルダーの指定
  3. 03既定ポート使用中の別ポート試行
  4. 04画像一覧APIの提供

活用シーン

  1. 01Codex生成画像の閲覧
  2. 02別フォルダーの画像表示
  3. 03起動済みローカルギャラリーの再利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/daymade/claude-code-skills --skill codex-image-gallery

インストール後、Claude Code で/codex-image-galleryを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
index.html
scripts/
server.mjs

詳細

Codex Image Gallery

Codex の画像出力を表示するローカルブラウザーギャラリーを起動します。このスキルは単体で動作します。サーバーは scripts/server.mjs に、UI テンプレートは assets/index.html にあります。

クイックスタート

このスキルのディレクトリ、つまりこの SKILL.md を含むディレクトリからコマンドを実行します。

node scripts/server.mjs

サーバーは実際の URL を出力します。http://127.0.0.1:8765/ で起動し、デフォルトのポートが使用中の場合は後続のポートを試します。

ワークフロー

  1. まずデフォルトの URL を確認します。

    node -e 'fetch("http://127.0.0.1:8765/api/images").then(r => r.json()).then(j => console.log(j.rootPath, j.items.length)).catch(() => process.exit(1))'

    成功した場合は、実行中のサーバー http://127.0.0.1:8765/ を再利用します。

  2. API の確認に失敗した場合は、実行中のサーバープロセスを確認します。

    pgrep -fl 'node .*server\.mjs' || true

    プロセスが存在するのにデフォルトの URL にアクセスできない場合は、標準出力を確認するか、ポートが使用中の場合にサーバーが自動で次のポートに切り替えるため、後続のポートを試します。

  3. 再利用する URL を成功として報告する前に、確認します。

    node -e 'fetch("http://127.0.0.1:8765/api/images").then(r => r.json()).then(j => console.log(j.rootPath, j.items.length))'

    サーバーが別のポートを選択した場合は、そのポートを使用します。

  4. 実行中のサーバーがない場合は、サーバーを起動します。

    node scripts/server.mjs

    ユーザーのためにプロセスを実行したままにし、標準出力で URL を確認します。

  5. ユーザーが URL のみを求めている場合を除き、ブラウザーを開きます。

    open http://127.0.0.1:8765/

画像ルート

デフォルトの画像ルート：

~/.codex/generated_images

別のフォルダーを使用するには：

GALLERY_ROOT=/path/to/images node scripts/server.mjs

検証

編集後にこのスキルが正常に動作することを宣言する前に、次を実行します。

node --check scripts/server.mjs

次に、サーバーを起動して以下を確認します。

  • GET /api/images が rootPath と items を含む JSON を返す
  • /images/<relative-path> が、一覧にある項目の少なくとも 1 つについて画像コンテンツを返す
  • ページがバンドルされた assets/index.html から読み込まれる

回答

URL、画像ルート、サーバーを再利用したか新たに起動したか、および検証に失敗した項目を報告します。回答は簡潔にしてください。

コメント

Markdown 対応