AI画像量産で技術ブログ運用を効率化する

# Linux/macOS
git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui
cd stable-diffusion-webui
# webui.sh 起動時に --api フラグを付けて REST API を有効化
./webui.sh --api --nowebui

# generate_thumbnails.py
import requests
import base64
import json
from pathlib import Path

API_URL = "http://localhost:7860"

def generate_image(prompt: str, output_path: Path) -> None:
    payload = {
        "prompt": prompt,
        "negative_prompt": "text, watermark, blurry, low quality",
        "steps": 20,
        "width": 1200,
        "height": 630,
        "cfg_scale": 7,
        "sampler_name": "DPM++ 2M Karras",
    }
    response = requests.post(f"{API_URL}/sdapi/v1/txt2img", json=payload)
    response.raise_for_status()

    image_data = response.json()["images"][0]
    image_bytes = base64.b64decode(image_data)
    output_path.write_bytes(image_bytes)
    print(f"Generated: {output_path}")

# 記事スラッグとプロンプトのマッピング
articles = [
    {
        "slug": "ai-image-generation-blog",
        "prompt": (
            "futuristic tech blog header, neural network visualization, "
            "blue purple gradient, minimalist, high quality"
        ),
    },
    # ... 追加記事
]

for article in articles:
    out_dir = Path(f"content/posts/{article['slug']}")
    out_dir.mkdir(parents=True, exist_ok=True)
    generate_image(article["prompt"], out_dir / "thumbnail.png")

# 依存パッケージ
pip install requests
# AUTOMATIC1111 が起動した状態で実行
python generate_thumbnails.py

# CPU only 起動（CUDA不要、公式値）
./webui.sh --api --nowebui --use-cpu all --precision full --no-half

git clone https://github.com/comfyanonymous/ComfyUI
cd ComfyUI
pip install -r requirements.txt
# GPU あり
python main.py
# CPU only
python main.py --cpu

# comfyui_batch.py
import websocket
import json
import uuid
import urllib.request

SERVER = "127.0.0.1:8188"
CLIENT_ID = str(uuid.uuid4())

def queue_prompt(workflow: dict) -> dict:
    payload = json.dumps({"prompt": workflow, "client_id": CLIENT_ID}).encode()
    req = urllib.request.Request(
        f"http://{SERVER}/prompt",
        data=payload,
        headers={"Content-Type": "application/json"},
    )
    return json.loads(urllib.request.urlopen(req).read())

# workflow.json は ComfyUI の "Save (API Format)" で書き出したもの
with open("workflow.json") as f:
    workflow = json.load(f)

# プロンプトノードのテキストを動的に差し替える
# ノードIDは workflow.json を確認して適宜変更
workflow["6"]["inputs"]["text"] = "tech blog diagram, clean minimal, white background"

result = queue_prompt(workflow)
print(f"Queued: {result}")

# 既存プロジェクトへの追加
pnpm add remotion @remotion/bundler @remotion/renderer

// remotion/compositions/OgpImage.tsx
import { AbsoluteFill } from "remotion";
import React from "react";

interface OgpProps {
  title: string;
  category: string;
  slug: string;
}

export const OgpImage: React.FC<OgpProps> = ({ title, category }) => {
  return (
    <AbsoluteFill
      style={{
        background: "linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%)",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        padding: "60px 80px",
        fontFamily: "'Noto Sans JP', sans-serif",
      }}
    >
      <p>
        {category}
      </p>
      <h1
        style={{
          color: "#ffffff",
          fontSize: 64,
          fontWeight: 700,
          lineHeight: 1.3,
          margin: 0,
        }}
      >
        {title}
      </h1>
    </AbsoluteFill>
  );
};

// remotion/Root.tsx
import { Composition } from "remotion";
import { OgpImage } from "./compositions/OgpImage";

export const RemotionRoot: React.FC = () => (
  <Composition
    id="OgpImage"
    component={OgpImage}
    durationInFrames={1}
    fps={1}
    width={1200}
    height={630}
    defaultProps={{ title: "記事タイトル", category: "AI", slug: "example" }}
  />
);

// scripts/render-ogp.ts
import { bundle } from "@remotion/bundler";
import { renderStill } from "@remotion/renderer";
import path from "path";
import { readdirSync, readFileSync } from "fs";
import matter from "gray-matter";

async function renderOgpImages() {
  const bundled = await bundle({
    entryPoint: path.resolve("remotion/index.ts"),
    webpackOverride: (config) => config,
  });

  const postsDir = path.resolve("content/posts");
  const slugs = readdirSync(postsDir);

  for (const slug of slugs) {
    const mdPath = path.join(postsDir, slug, "index.md");
    const raw = readFileSync(mdPath, "utf8");
    const { data } = matter(raw);

    const outputPath = path.join(postsDir, slug, "ogp-main.png");

    await renderStill({
      composition: {
        id: "OgpImage",
        width: 1200,
        height: 630,
        fps: 1,
        durationInFrames: 1,
        defaultProps: {},
      },
      serveUrl: bundled,
      output: outputPath,
      inputProps: {
        title: data.title ?? slug,
        category: data.category ?? "",
        slug,
      },
    });
    console.log(`Rendered: ${outputPath}`);
  }
}

renderOgpImages().catch(console.error);

# 実行（Node.js 20以上）
pnpm tsx scripts/render-ogp.ts

記事執筆完了
  ↓
[OGP画像] Remotion スクリプトを実行（pnpm render:article-images <slug>）
  ↓
[アイキャッチ・本文挿入用イラスト] AUTOMATIC1111 API でバッチ生成
  ↓
[図解・フロー図] ComfyUI ワークフローで生成（必要な記事のみ）
  ↓
WebP 変換（cwebp コマンドまたは sharp）
  ↓
記事ファイルに画像パスを記載 → PR 作成 → 公開

# cwebp（Google製、無料）を使う場合
find content/posts -name "*.png" -exec cwebp {} -o {}.webp \;

// scripts/convert-to-webp.ts（sharp を使う場合）
import sharp from "sharp";
import { glob } from "glob";

const files = await glob("content/posts/**/*.png");
for (const file of files) {
  await sharp(file)
    .webp({ quality: 85 })
    .toFile(file.replace(".png", ".webp"));
  console.log(`Converted: ${file}`);
}

pnpm add sharp
pnpm tsx scripts/convert-to-webp.ts