function MainComponent() { const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(''); const [portfolio, setPortfolio] = React.useState(''); const [contactInfo, setContactInfo] = React.useState(''); const [portfolioImages, setPortfolioImages] = React.useState([]); const handleGenerate = async ()=>{ setLoading(true); setResponse(''); setPortfolio(''); setContactInfo(''); setPortfolioImages([]); const messages = [ { "role": "user", "content": "医療向けの似顔絵のサイトを作りたい" }, { "role": "user", "content": "私はイラストレーターです。サイトでお仕事を受注します。ポートフォリオとお問い合わせフォームが必要です" } ]; const system_prompt = "Please provide details on the illustrator site with portfolio and contact form"; try { const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt }) }); const data = await res.json(); const responses = data.choices[0].message.content.split('\n'); setResponse(responses[0]); setPortfolio(responses[1]); setContactInfo(responses[2]); setPortfolioImages([ '/path/to/image1.jpg', '/path/to/image2.jpg', '/path/to/image3.jpg' ]); } catch (error) { console.error("Fetch error:", error); setResponse("Sorry, an error occurred."); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 max-w-xl w-full m-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center text-[#333]", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "にすぎや"), /*#__PURE__*/ React.createElement("p", { className: "text-md text-center text-[#666] my-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "医療従事者向けのイラストレーションサービス"), /*#__PURE__*/ React.createElement("div", { className: "my-5", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "ポートフォリオアップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "imageUpload", id: "imageUpload", className: "mt-1 p-2 w-full border border-gray-300 rounded-md bg-white text-gray-700 cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-md file:bg-violet-50 file:text-violet-700 file:border-violet-300 file:text-sm hover:file:bg-violet-100", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 my-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, portfolioImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Portfolio image ${index + 1}`, className: "w-full h-auto rounded-md shadow-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }))), portfolio && /*#__PURE__*/ React.createElement("div", { className: "text-md text-center text-[#666] my-4", __source: { fileName: "", lineNumber: 57, columnNumber: 23 }, __self: this }, portfolio), contactInfo && /*#__PURE__*/ React.createElement("form", { className: "mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block mb-2 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "お名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-violet-500 focus:border-violet-500 block w-full p-2.5", placeholder: "山田太郎", required: true, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block mb-2 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-violet-500 focus:border-violet-500 block w-full p-2.5", placeholder: "name@example.com", required: true, __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block mb-2 text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-violet-500 focus:border-violet-500 block w-full p-2.5", placeholder: "お問い合わせ内容をご記入ください", required: true, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-violet-600 hover:bg-violet-700 focus:ring-4 focus:ring-violet-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-6", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: `${loading ? "bg-[#9e9e9e]" : "bg-[#4caf50]"} px-6 py-3 text-white rounded-md hover:bg-[#43a047]`, disabled: loading, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, loading ? '生成中...' : '生成する')))); }