function MainComponent() { const [image, setImage] = useState(null); const [loading, setLoading] = useState(false); const [prompt, setPrompt] = useState(""); const [model, setModel] = useState(""); const [aiModel, setAiModel] = useState(""); const [userInput, setUserInput] = useState(""); const [imageStyle, setImageStyle] = useState("photo"); const [countdown, setCountdown] = useState(0); const [currentAdIndex, setCurrentAdIndex] = useState(0); const [selectedSize, setSelectedSize] = useState("1:1 正方形画像"); const sizeOptions = { "1:1 正方形画像": { width: 1024, height: 1024 }, "9:16 縦長画像": { width: 768, height: 1344 }, "16:9 横長画像": { width: 1344, height: 768 }, "21:9 シネマティック画像": { width: 1536, height: 640 }, "3:2 風景画像": { width: 1216, height: 832 }, "2:3 ポートレート画像": { width: 832, height: 1216 }, "5:4 風景画像（レトロ）": { width: 1088, height: 896 }, "4:5 ポートレート画像（レトロ）": { width: 896, height: 1088 }, "9:21 超縦長画像": { width: 640, height: 1536 } }; const adLink = "https://generativeinfo365.com/?page_id=4719"; const ads = [ "https://generativeinfo365.com/wp-content/uploads/2024/07/18.png", "https://generativeinfo365.com/wp-content/uploads/2024/07/19.png", "https://generativeinfo365.com/wp-content/uploads/2024/07/20.png", "https://generativeinfo365.com/wp-content/uploads/2024/07/21.png" ]; useEffect(()=>{ if (loading) { const interval = setInterval(()=>{ setCurrentAdIndex((prevIndex)=>(prevIndex + 1) % ads.length); }, 3000); return ()=>clearInterval(interval); } }, [ loading ]); const generateImage = async ()=>{ setLoading(true); setCountdown(20); const countdownInterval = setInterval(()=>{ setCountdown((prevCountdown)=>{ if (prevCountdown <= 1) { clearInterval(countdownInterval); return 0; } return prevCountdown - 1; }); }, 1000); await new Promise((resolve)=>setTimeout(resolve, 10000)); const promptInput = userInput; const modelEndpoints = [ "/integrations/anthropic-claude/", "/integrations/anthropic-claude-sonnet-3-5/", "/integrations/chat-gpt/conversationgpt4", "/integrations/anthropic-claude-sonnet/", "/integrations/google-gemini-1-5-flash/", "/integrations/google-gemini-1-5/", "/integrations/google-gemini/", "/integrations/anthropic-claude-haiku/" ]; let generatedPrompt = ""; let usedAiModel = ""; for (const endpoint of modelEndpoints){ try { const response = await fetch(endpoint, { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: `You are an AI assistant that creates high-quality and simple prompts in English for Stable Diffusion based on the user's input. Follow these guidelines: Output ONLY the English prompt, no other text. Make reasonable assumptions for unclear input. Output format: Stable Diffusion prompt Generate the prompt based on the user's input without confirmation or acknowledgment: ${promptInput}` } ] }) }); const data = await response.json(); generatedPrompt = data.choices[0].message.content; usedAiModel = endpoint.split("/")[2]; break; } catch (error) { continue; } } if (!generatedPrompt) { alert("プロンプト生成に失敗しました。"); setLoading(false); return; } let stylePrefix = ""; switch(imageStyle){ case "photo": stylePrefix = "realistic,photo "; break; case "anime": stylePrefix = "(((((((anime))))))), ((kawaii)),Create a high-resolution,vibrant, high quality"; break; case "aiBeauty": stylePrefix = "realistic, natural light, photo, portrait, asian girl, beautiful model, adult, kawaii,beautiful"; break; } const finalPrompt = `${stylePrefix} ${generatedPrompt}`; setPrompt(finalPrompt); setAiModel(usedAiModel); const size = sizeOptions[selectedSize]; const generationStartTime = Date.now(); try { const stableDiffusionResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(finalPrompt)}&width=${size.width}&height=${size.height}`, { method: "GET" }); const stableDiffusionData = await stableDiffusionResponse.json(); const generationEndTime = Date.now(); const generationTime = (generationEndTime - generationStartTime) / 1000; if (stableDiffusionData.data?.[0]) { setImage(stableDiffusionData.data[0]); setModel("Stable Diffusion V3"); } else { const dallEResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(finalPrompt)}`, { method: "GET" }); const dallEData = await dallEResponse.json(); if (dallEData.data?.[0]) { setImage(dallEData.data[0]); setModel("DALL·E 3"); } else { alert("画像生成に失敗しました。"); } } const userAgent = navigator.userAgent; const userIPResponse = await fetch("https://api.ipify.org?format=json"); const userIPData = await userIPResponse.json(); const ipAddress = userIPData.ip; fetch("/api/db/ai-image0707new", { method: "POST", body: JSON.stringify({ query: `INSERT INTO \`image_generation_log\` (\`user_id\`, \`prompt\`, \`generated_prompt\`, \`image_size\`, \`image_style\`, \`language_model\`, \`ai_model\`, \`generation_time\`, \`ip_address\`, \`user_agent\`, \`image_url\`, \`created_at\`) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, values: [ "1", `"${promptInput}"`, `"${generatedPrompt}"`, `${size.width}x${size.height}`, imageStyle, usedAiModel, "StableDiffusion", generationTime, ipAddress, `"${userAgent}"`, stableDiffusionData.data?.[0], new Date().toISOString() ] }) }); } catch (error) { console.error("Error generating image:", error); } finally{ setLoading(false); setCountdown(0); } }; const downloadImage = async ()=>{ if (image) { try { const response = await fetch(image); const blob = await response.blob(); const objectUrl = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = objectUrl; link.download = "generated_image.png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(objectUrl); } catch (error) { console.error("画像のダウンロードに失敗しました:", error); alert("画像のダウンロードに失敗しました。"); } } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-gray-900 flex flex-col items-center justify-start p-4 font-roboto", __source: { fileName: "", lineNumber: 215, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-6xl bg-white rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 216, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row", __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-6", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "prompt", placeholder: "生成したい画像の内容を入力...", className: "w-full h-40 p-4 border border-gray-300 rounded-lg focus:outline-none mb-4 resize-none", value: userInput, onChange: (e)=>setUserInput(e.target.value), __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageStyle", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 227, columnNumber: 15 }, __self: this }, "画像スタイル"), /*#__PURE__*/ React.createElement("select", { id: "imageStyle", value: imageStyle, onChange: (e)=>setImageStyle(e.target.value), className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "photo", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, "写真"), /*#__PURE__*/ React.createElement("option", { value: "anime", __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, "アニメ風"), /*#__PURE__*/ React.createElement("option", { value: "aiBeauty", __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, "AI美女"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageSize", className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this }, "画像サイズ"), /*#__PURE__*/ React.createElement("select", { id: "imageSize", value: selectedSize, onChange: (e)=>setSelectedSize(e.target.value), className: "w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 251, columnNumber: 15 }, __self: this }, Object.keys(sizeOptions).map((key)=>/*#__PURE__*/ React.createElement("option", { key: key, value: key, __source: { fileName: "", lineNumber: 258, columnNumber: 19 }, __self: this }, key)))), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, className: "w-full mt-6 p-3 bg-[#121212] text-white text-lg font-medium rounded-lg", disabled: loading, __source: { fileName: "", lineNumber: 264, columnNumber: 13 }, __self: this }, loading ? `画像生成中... ${countdown}秒` : "画像生成")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-6 bg-gray-100", __source: { fileName: "", lineNumber: 272, columnNumber: 11 }, __self: this }, loading && /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[400px] overflow-hidden rounded-xl", __source: { fileName: "", lineNumber: 274, columnNumber: 15 }, __self: this }, ads.map((adImage, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: adLink, target: "_blank", rel: "noopener noreferrer", className: `absolute top-0 left-0 w-full h-full transition-opacity duration-500 ${index === currentAdIndex ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 276, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: adImage, alt: `広告 ${index + 1}`, className: "w-full h-full object-contain object-center", __source: { fileName: "", lineNumber: 285, columnNumber: 21 }, __self: this })))), image && !loading && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "生成された画像", className: "w-full rounded-lg shadow-md", __source: { fileName: "", lineNumber: 296, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: downloadImage, className: "w-full mt-4 p-3 bg-green-500 text-white text-lg font-medium rounded-lg hover:bg-green-600 transition-colors", __source: { fileName: "", lineNumber: 301, columnNumber: 17 }, __self: this }, "画像をダウンロード")))), (image || loading) && /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-200", __source: { fileName: "", lineNumber: 312, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-medium", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, "使用したプロンプト: ", prompt), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-gray-600", __source: { fileName: "", lineNumber: 316, columnNumber: 13 }, __self: this }, "使用した言語モデル: ", aiModel), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-gray-600", __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this }, "使用した画像生成AIモデル: ", model))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 323, columnNumber: 7 }, __self: this }, ` .loader { border-top-color: #3498db; animation: spin 1.5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }