function MainComponent() { const [userMessage, setUserMessage] = React.useState(''); const [responseMessage, setResponseMessage] = React.useState(''); const [loading, setLoading] = React.useState(false); const [targetFiles, setTargetFiles] = React.useState([]); const [nonTargetFiles, setNonTargetFiles] = React.useState([]); const [targetInputValue, setTargetInputValue] = React.useState(0); const [nonTargetInputValue, setNonTargetInputValue] = React.useState(0); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userMessage } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); setResponseMessage(data.choices[0]?.message.content || 'No response'); setLoading(false); }; const handleTargetFilesChange = (e)=>{ setTargetFiles(e.target.files); }; const handleNonTargetFilesChange = (e)=>{ setNonTargetFiles(e.target.files); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "targetFiles", multiple: true, onChange: handleTargetFilesChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "選択されたターゲット画像の枚数: ", targetFiles.length), /*#__PURE__*/ React.createElement("input", { type: "number", name: "targetInputValue", value: targetInputValue, onChange: (e)=>setTargetInputValue(e.target.value), className: "w-full p-2 mt-2 border border-gray-300 rounded", placeholder: "Enter a number...", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "nonTargetFiles", multiple: true, onChange: handleNonTargetFilesChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "選択されたノンターゲット画像の枚数: ", nonTargetFiles.length), /*#__PURE__*/ React.createElement("input", { type: "number", name: "nonTargetInputValue", value: nonTargetInputValue, onChange: (e)=>setNonTargetInputValue(e.target.value), className: "w-full p-2 mt-2 border border-gray-300 rounded", placeholder: "Enter a number...", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>document.documentElement.requestFullscreen(), className: "w-full py-2 mt-4 bg-green-500 text-white font-roboto font-bold rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "全画面表示")), responseMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-white border border-gray-300 rounded w-full max-w-[400px]", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Response:"), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, responseMessage))); }