Zenn
🧠

gpt-image-1が無料で試せるアプリ作りました【画像生成AI ChatGPT】

に公開
AI
Midjourney
ChatGPT
生成 AI
Gemini
tech

https://gpt-image.dev/

概要

GPT-image.devは、複数のリファレンス画像とテキストプロンプトから一貫性のあるAIヘッドショットを生成できるWebアプリです。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)
ユーザーはAPIキーの設定、最大10枚までのリファレンス画像のアップロード、プロンプト入力を行い、生成された画像をブラウザで即時プレビューできます。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)
バックエンドはOpenAIのImages APIを直接呼び出すシンプルなHTML/JavaScript実装で、セルフホスティングが容易です。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)
使用するモデル「gpt-image-1」は高精度な指示理解、テキスト描画、画像入力対応など多彩な機能を備えており、教育資料の作成やデザインツールへの組み込みが進んでいます。 (Unveiling GPT-image-1: Rising to new heights with image generation in Azure AI Foundry)
AdobeやFigmaなど主要ツールへの統合事例も報告されており、今後さらに幅広いユースケースでの活用が期待されます。 (Adobe and Figma tools are getting ChatGPT's upgraded image generation model)

はじめに

2025年4月23日にOpenAIは画像生成モデル「gpt-image-1」をImages APIとして一般公開しました。 (Introducing our latest image generation model in the API - OpenAI)
このモデルは、複雑なプロンプトにも忠実に従い、テキスト要素を正確に描画できる点が大きな特徴です。 (Unveiling GPT-image-1: Rising to new heights with image generation in Azure AI Foundry)
また、ユーザー提供の画像をもとに新規画像を生成・編集できるため、ヘッドショット生成や背景の拡張など多彩なクリエイティブ作業が可能です。 (Unveiling GPT-image-1: Rising to new heights with image generation in Azure AI Foundry)

主な特徴

APIキー設定

ユーザーは画面上部の「Set api key」ボタンからOpenAIのAPIキーを設定できます。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)
設定したキーはローカルストレージに安全に保持され、ページリロード後も再入力不要です。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)

複数リファレンス画像対応

ヘッドショットの一貫性を高めるため、同一人物の写真を最大10枚までアップロード可能です。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)

カスタムテキストプロンプト

テキストエリアに自由なプロンプトを入力し、生成イメージのスタイルやディテールを指示できます。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)

ブラウザプレビュー

「Generate」ボタンをクリックすると、画像生成APIへのリクエストが実行され、その結果を即時にページ下部でプレビュー表示します。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)

技術構成

使い方

  1. ホスティング
    リポジトリから<code>index.html</code>を取得し、Webサーバーに配置します。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)
  2. APIキー設定
    アプリを開き、「Set api key」でAPIキーを登録。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)
  3. リファレンス写真のアップロード
    「Reference headshot photos」をクリックし、同一人物の写真を選択。
  4. プロンプト入力
    テキストエリアにスタイル指定を含むプロンプトを記述。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)
  5. 生成開始
    「Generate」を押下すると、生成結果が下部に表示されます。 (GitHub30/gpt-image.dev: FREE Generate consistent AI ... - GitHub)

今後の展望

  • モデルのアップデート対応
    GPT-4oを含むさらなる高精度モデル対応で、テキスト描画品質やスタイル再現性が向上する可能性があります。 (Introducing 4o Image Generation - OpenAI)
  • UI/UXの強化
    プリセットプロンプトやスタイル選択機能を追加し、ユーザーがより簡単に多彩なイメージを生成できるように改善。
  • サーバーレス化
    Cloudflare WorkersやAWS Lambdaを用いてバックエンドレスなアーキテクチャを検討。

まとめ

GPT-image.devは、最新のgpt-image-1モデルを手軽に試せるヘッドショット生成アプリです。
シンプルなUIと純粋なフロントエンド実装により、自分のWebサイトに簡単に組み込むことができ、クリエイティブな画像生成体験を提供します。
ぜひリポジトリをフォークして、自分だけのAIヘッドショットジェネレーターを作ってみてください。

参考リンク

  • GitHub リポジトリ: https://github.com/GitHub30/gpt-image.dev
  • OpenAI Images API ドキュメント
  • Azure AI Foundry ブログ: “Unveiling GPT-image-1”
  • The Verge 記事: Adobe・Figma統合ニュース

Discussion