lovstudio-image-creator

Image Creator — マルチメカニズムフレームワーク

メカニズムの選択

ユーザーの意図に基づいてメカニズムを選択します。

メカニズム	使用する場面	出力
end-to-end	AI 生成のアート、写真、イラストを求めている場合	PNG 画像
code	編集可能なコンテンツを含むデザイン済みのレイアウト（ポスター、カード、バナー）を求めている場合	HTML ファイル + PNG
prompt	外部モデル（Midjourney、nano-banana-pro など）向けのプロンプトを求めている場合	テキストプロンプト

ユーザーが指定していない場合は、文脈から推測します。

• 「生成一张猫的图片」→ end-to-end
• 「做一张活动海报」→ code
• 「帮我写一个 Midjourney prompt」→ prompt

メカニズム 1：エンドツーエンド（Gemini）

python3 gen_image.py "PROMPT" [-o output.png] [-q low|medium|high] [--ascii]

• Gemini 3 Pro（ZenMux 経由）で画像を直接生成します
• ZENMUX_API_KEY 環境変数が必要です
• 初回実行時に pip --user 経由で google-genai と Pillow を自動インストールします（手動設定は不要です）
• 生成後、Read ツールで結果を表示します

メカニズム 2：コードベースのレンダリング

ステップ 1：HTML を生成する

すべてのスタイルをインラインに含む、自己完結型の HTML ファイルを 1 つ作成します。以下を使用します。

• CDN 経由の React 19（https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js）
• CDN 経由の ReactDOM 19
• CDN 経由の Tailwind CSS（https://cdn.tailwindcss.com）
• CJK 向けの Google Fonts（<link> 経由）：Noto Sans SC、Noto Serif SC

テンプレートの構成：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@19/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: { extend: { /* custom theme */ } }
    }
  </script>
  <style>
    /* Reset & base styles */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { width: {{WIDTH}}px; height: {{HEIGHT}}px; overflow: hidden; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel" data-type="module">
    // React component here
    function Poster() {
      return (/* JSX */);
    }
    ReactDOM.createRoot(document.getElementById('root')).render(<Poster />);
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
</body>
</html>

重要：Babel standalone スクリプトは、必ず text/babel スクリプトブロックの後に配置してください。

ステップ 2：PNG にレンダリングする

python3 scripts/render_to_png.py \
  /path/to/poster.html \
  -o output.png \
  -W 1200 -H 630 \
  --scale 2

一般的なアスペクト比：

比率	寸法	用途
16:9	1200×675	ソーシャルメディアのバナー
4:3	1200×900	プレゼンテーション
1:1	1080×1080	Instagram の投稿
9:16	1080×1920	ストーリー／モバイル向けポスター
3:4	900×1200	縦型ポスター
A4	794×1123	印刷用ポスター（210mm×297mm @96dpi）

ステップ 3：表示して調整する

• Read を使用して PNG を表示します
• macOS では open output.png で開きます
• ユーザーから編集の依頼があれば、HTML を変更して再レンダリングします

メカニズム 3：プロンプトエンジニアリング

外部モデル向けに最適化されたプロンプトを生成します。以下を含めます。

• ポジティブプロンプト：被写体、スタイル、照明、品質タグ
• ネガティブプロンプト：避けるべき一般的な欠陥

コピー可能なコードブロック形式で出力します。

参照画像のサポート

ユーザーから参照画像が提供された場合：

• エンドツーエンド：プロンプトでスタイルや構図を説明します
• コード：レイアウト、色、タイポグラフィを分析し、HTML/CSS で再現します
• プロンプト：外部モデル向けにスタイルキーワードを抽出します

アスペクト比

希望するアスペクト比を必ず確認するか、推測します。上の表を使ってピクセル寸法に対応させます。