AIブログ自動生成ツール開発シリーズ
この連載では、AIを使ったブログ自動生成ツールをゼロから作ります。
AI画像生成機能の実装
前章では
記事生成パイプライン
を実装しました。
この記事では
AIによる画像生成機能
を追加します。
ここを実装すると
- アイキャッチ画像
- 記事中の図解
- 補助ビジュアル
を
自動生成
できるようになります。
この章のゴール
この章では
記事本文に合わせて
画像を自動生成し
適切な位置に差し込む
仕組みを作ります。
完成すると
AIブログツールの完成度が一気に上がります。
なぜ画像生成は後段なのか
画像生成は
- コストが高い
- 再生成が重い
という特徴があります。
そのため
本文確定後に生成します。
生成フロー
本文生成
↓
画像計画
↓
画像プロンプト生成
↓
画像生成
↓
本文差し込み
この順序にすると
無駄な生成を防げます。
画像モードの設計
画像生成は
InputPayloadに
imageMode
を持たせます。
モード
none
4
custom
意味
none = 画像なし
4 = 4枚生成
custom = 3〜5枚指定
これにより
コスト制御
が可能になります。
画像計画JSONを生成
画像生成では
まず
画像計画
を作ります。
ステージ
image_plan
各画像の情報
役割
挿入位置
プロンプト
タイトル
ALT
ファイル名
キャプション
このJSONがあると
WordPress投稿処理が
非常に整理されます。
画像計画の正規化
AI出力は
そのまま使いません。
処理
hardenImagePlans()
補正内容
役割名正規化
ALT補完
タイトル補完
ファイル名slug化
AI出力は
揺れる前提
で実装するのが重要です。
画像プロンプト補強
画像生成前に
共通条件を追加します。
禁止条件
文字禁止
数字禁止
ロゴ禁止
ウォーターマーク禁止
UIスクリーンショット禁止
これにより
ブログ用途で使いやすい画像
になります。
OpenAI画像APIで生成
画像生成は
gpt-image-1
を使います。
生成処理
generateImages()
実装ポイント
1枚目 大サイズ
2枚目以降 中サイズ
品質調整
base64保存
usage記録
例
1536x1024
1024x1024
本文への画像差し込み
本文へは
マーカー
を入れます。
<!--IMG:1-->
<!--IMG:2-->
処理
injectImagePlaceholders()
挿入ルール
見出し付近
見つからなければ末尾
この方式は
生成揺れに強い
です。
画像のみ再生成
実運用では
次がよくあります。
本文OK
画像NG
そこで
/api/image-only
を作ります。
関数
regenerateImagesOnly()
これにより
画像だけ再生成
できます。
UI表示設計
生成結果UIでは
次を表示します。
画像サムネイル
画像プロンプト
ALT
ファイル名
コピー機能
これにより
AI生成の内容が
ブラックボックス化しません。
画像生成の注意点
AI画像は
次の問題があります。
文字生成ミス
崩れ画像
サイズ大
対策
再生成導線
画像モード制御
投稿前確認
まとめ
AI画像生成で重要なのは
計画→生成
の設計です。
重要ポイント
画像計画JSON
正規化処理
禁止条件
差し込みマーカー
この4つを入れると
安定した画像生成フロー
になります。
次の記事では
WordPress自動投稿
を実装します。
前の記事
記事生成パイプライン
次の記事
WordPress自動投稿