yikegaya’s blog

仕事関連(Webエンジニア)について書いてます

TypeScriptからGemini3 Previewで画像生成する

TypeScriptからGemini3 Previewで画像を生成するスクリプトを書いてみました。

@google/genaiライブラリを使いましたが割と簡単に実装できました。

github.com

import { GoogleGenAI } from '@google/genai';

const ai = new GoogleGenAI({
    vertexai: true,
    project:
      process.env.GCP_PROJECT_ID || '',
    location: 'global',
});

const pageUrl = 'https://example.com'

    const prompt = `
ポスターを作成してください。
要件:
- サイズ: 1200x628ピクセル
- テキスト: 日本語で
${pageUrl ? `\n- 参照URL: ${pageUrl}のページ内容を参考にして、その商品やサービスに適したポスターを作成してください。` : ''}
`;

const response = await ai.models.generateContent({
    model: 'gemini-3-pro-image-preview',
    contents: prompt.trim(),
});

上記コードを実行すると以下のような構造のresponseが得られます。

{
  "candidates": [
    {
      object (Candidate)
    }
  ],
  "modelVersion": string,
  "createTime": string,
  "responseId": string,
  "promptFeedback": {
    object (PromptFeedback)
  },
  "usageMetadata": {
    object (UsageMetadata)
  }
}

docs.cloud.google.com

responseの中に画像のバッファが含まれるので以下のように取得できます。(エラーハンドリングなどは略)

const candidate = candidates[0];
const parts = candidate.content?.parts;

const imagePart = parts.find((part): part is Part & { inlineData: { data: string; mimeType: string } } => 
  'inlineData' in part && 
  !!(part.inlineData as { data?: string }).data
);

const base64Data = imagePart.inlineData.data;

const imageBuffer = Buffer.from(base64Data, 'base64');

注意点としては

  • Gemini3はgemini apiを直接呼び出す方法とVertexAIを経由する方法がありますがセキュリティや課金対象の管理の観点でエンタープライズでの使用にはVertexAIの方が向いています。今回はvertexaiオプションをtrueにしてVertexAI経由で実行しています。
  • 現状まだpreview扱いでリージョンもグローバルしか指定できません。us-central1などを指定すると404になります。

Gemini2.5までは日本語がうまく描画できませんでしたがGemini3になってかなり正確に表示されるようになりました。

日本語精度が上がったことでポスターやバナー画像を作らせる用途は結構実用的になりそうです。