"use client"; function MainComponent() { const [loading, setLoading] = React.useState(false); const [loadingText, setLoadingText] = React.useState(""); const [inputText, setInputText] = React.useState(""); const [error, setError] = React.useState(null); const [errorDetails, setErrorDetails] = React.useState(""); const [generatedImage, setGeneratedImage] = React.useState(null); const [usedModel, setUsedModel] = React.useState(null); const [usedPrompt, setUsedPrompt] = React.useState(""); const [selectedSize, setSelectedSize] = React.useState("square"); const [showImage, setShowImage] = React.useState(false); const [status, setStatus] = React.useState(null); const handleGenerateImage = async ()=>{ if (inputText.trim() !== "") { const userPrompt = inputText.trim(); setError(null); setErrorDetails(""); setGeneratedImage(null); setUsedModel(null); setUsedPrompt(""); setShowImage(false); setStatus(null); setLoading(true); setLoadingText("画像作成中..."); const translatePrompt = async (prompt)=>{ try { const translateResponse = await fetch("/api/translate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }) }); if (!translateResponse.ok) { throw new Error(`APIResponseError: Google Translateからの翻訳に失敗しました (HTTP ${translateResponse.status})`); } const translateData = await translateResponse.json(); if (!translateData.data || !translateData.data.translations || translateData.data.translations.length === 0) { throw new Error("ResponseDataValidationError: Google Translateから翻訳が返されませんでした"); } return `masterpeace, high quality, 4K, HDR BREAK ${translateData.data.translations[0].translatedText}`; } catch (error) { console.error("TranslateError", error); throw new Error(`翻訳エラー: ${error.message}`); } }; const useModel = async (url, prompt)=>{ try { const response = await fetch("/api/generate-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url, prompt, selectedSize }) }); if (!response.ok) { if (response.status === 429) { throw new Error("APIのレート制限に達しました。しばらく待ってから再試行してください。"); } throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.output && Array.isArray(data.output) && data.output.length > 0) { setGeneratedImage(data.output[0]); setUsedPrompt(prompt); setStatus(data.status); setTimeout(()=>{ setShowImage(true); }, 3000); return true; } else { throw new Error("APIからの予期しないレスポンス形式"); } } catch (error) { console.error("ImageGenerationError", error); throw new Error(`画像生成エラー: ${error.message}`); } }; let stableDiffusionPrompt = null; let errorModels = []; try { stableDiffusionPrompt = await translatePrompt(userPrompt); const sdResponse = await useModel("https://api.sd-model.com", stableDiffusionPrompt); if (!sdResponse) throw new Error("Stable Diffusionでの画像生成に失敗しました"); setUsedModel("Stable Diffusion"); } catch (e) { console.error("StableDiffusionError", e); errorModels.push("Stable Diffusion"); try { const dalleResponse = await useModel("https://api.dalle3.com", userPrompt); if (!dalleResponse) throw new Error("DALL-E 3での画像生成に失敗しました"); setUsedModel("DALL-E 3"); } catch (e) { console.error("DALLEError", e); errorModels.push("DALL-E 3"); setError(`画像生成に失敗しました: ${e.message}`); setErrorDetails(`試行したモデル: ${errorModels.join(", ")}`); } } setLoading(false); setLoadingText(""); } }; const handleInputChange = (event)=>{ setInputText(event.target.value); }; const handleSizeChange = (event)=>{ setSelectedSize(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-start min-h-screen bg-gradient-to-r from-gray-800 via-gray-700 to-gray-600 font-noto-sans pt-20", __source: { fileName: "", lineNumber: 158, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "prompt", value: inputText, onChange: handleInputChange, placeholder: "生成したい画像の内容を入力...", className: "w-full px-4 py-3 mb-6 rounded border-2 border-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:border-transparent text-lg", rows: "5", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 169, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "size", className: "block mb-2 font-bold text-gray-700 text-lg", __source: { fileName: "", lineNumber: 170, columnNumber: 11 }, __self: this }, "画像サイズ:"), /*#__PURE__*/ React.createElement("select", { id: "size", name: "size", value: selectedSize, onChange: handleSizeChange, className: "w-full px-4 py-3 rounded border-2 border-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:border-transparent text-lg", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "square", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "正方形 (1024x1024)"), /*#__PURE__*/ React.createElement("option", { value: "landscape", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, "横長 (1024x576)"), /*#__PURE__*/ React.createElement("option", { value: "portrait", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, "縦長 (576x1024)"))), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateImage, className: "w-full bg-gradient-to-r from-gray-600 to-gray-800 hover:from-gray-700 hover:to-gray-900 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600 text-xl transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, "画像生成")), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-10 text-2xl font-bold text-white animate-pulse", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, loadingText), error && /*#__PURE__*/ React.createElement("div", { className: "mt-10 bg-red-100 text-red-800 p-4 rounded-lg text-lg", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, error, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, errorDetails)), generatedImage && showImage && /*#__PURE__*/ React.createElement("div", { className: "mt-10 flex flex-col items-center", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6 text-white", __source: { fileName: "", lineNumber: 213, columnNumber: 11 }, __self: this }, "生成された画像:"), /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "生成された画像", className: "max-w-full h-auto rounded-lg shadow-2xl mb-6", __source: { fileName: "", lineNumber: 216, columnNumber: 11 }, __self: this }), usedModel && /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-200 mb-2", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "使用したモデル: ", usedModel), usedPrompt && /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-200", __source: { fileName: "", lineNumber: 227, columnNumber: 13 }, __self: this }, "使用したプロンプト: ", usedPrompt), status && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-300", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "ステータス: ", status))); }