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 = "❌ 場面画像の生成に失敗しました。";
            }
        })();