function MainComponent() { const [promptText, setPromptText] = React.useState(""); const [completedPrompt, setCompletedPrompt] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [isGeneratingPrompt, setIsGeneratingPrompt] = React.useState(false); const generatePrompt = async ()=>{ if (!promptText.trim()) return; setIsLoading(true); setIsGeneratingPrompt(true); const chatGPTResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": promptText } ], system_prompt: 'Generate a creative prompt based on the following description' }) }).then((res)=>res.json()); setCompletedPrompt(chatGPTResponse.choices[0].message.content); setIsGeneratingPrompt(false); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F2F5] p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto text-[#121212] my-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "チャット形式でイメージを伝えるシステム"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-md rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "完璧なプロンプトを生成しよう"), /*#__PURE__*/ React.createElement("textarea", { name: "imageIdea", className: "w-full p-3 border border-[#D0D5DD] rounded-md resize-none h-[150px] font-roboto text-[#121212]", placeholder: "例：古代の遺跡を探検する冒険者...", value: promptText, onChange: (e)=>setPromptText(e.target.value), __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full mt-4 p-3 bg-[#2563EB] text-white font-roboto rounded-md hover:bg-[#1D4ED8] transition-colors", onClick: generatePrompt, disabled: isLoading, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, isGeneratingPrompt ? 'プロンプト生成中...' : 'プロンプト生成')), isGeneratingPrompt && /*#__PURE__*/ React.createElement("div", { className: "text-center p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "プロンプト生成中..."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }))), !isLoading && completedPrompt && /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "生成されたプロンプト:"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212] mt-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, completedPrompt)))); }