gemini apiを使用したjavascript でのシステム開発
解決したいこと
現在、gemini api の無料枠を使用し、javascriptで画像生成システムを作ろうとしています。
ですがうまく画像が生成できないです。
発生している問題・エラー
該当するソースコード
// 🖼️ 場面画像の自動生成スタート
sceneImageStatus.innerText = "⏳ 場面のイラストを作成中...";
sceneImage.style.display = "none";
(async () => {
try {
const genAIInstance = new GoogleGenerativeAI(API_KEY);
const imageModel = genAIInstance.getGenerativeModel({ model: "gemini-3.1-flash-image-preview" });
const scenePrompt = `
Create a clear, helpful illustration for a Japanese language learner.
Situation: A customer is at a Japanese shop counter for "${scenario}".
Bright, welcoming anime style, easy to understand. No text inside the image.
`;
const imgResult = await imageModel.generateContent(scenePrompt);
const imgResponse = await imgResult.response;
const candidate = imgResponse.candidates?.[0];
const part = candidate?.content?.parts?.[0];
if (part && part.inlineData) {
const base64Data = part.inlineData.data;
sceneImage.src = `data:image/png;base64,${base64Data}`;
sceneImage.style.display = "block";
sceneImageStatus.style.display = "none";
} else {
sceneImageStatus.innerText = "💡 画像データの取得形式が異なりました。";
}
} catch (err) {
console.error("場面画像生成エラー詳細:", err);
sceneImageStatus.innerText = "❌ 場面画像の生成に失敗しました。";
}
})();
自分で試したこと
モデルを何度か変えるなどして試したのですが、生成できません。
0 likes
