function MainComponent() { const [selectedImage, setSelectedImage] = React.useState(null); const [focusAreas, setFocusAreas] = React.useState([ "" ]); const [requiredInfo, setRequiredInfo] = React.useState([ "" ]); const [howTo, setHowTo] = React.useState([ "" ]); const handleImageChange = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = ()=>{ setSelectedImage(reader.result); }; reader.readAsDataURL(file); } }; const handleChange = (setter, index)=>(event)=>{ const newValues = [ ...setter ]; newValues[index] = event.target.value; setter(newValues); }; const addInput = (setter)=>()=>{ setter((prev)=>[ ...prev, "" ]); }; const removeInput = (setter)=>(index)=>()=>{ setter((prev)=>prev.filter((_, i)=>i !== index)); }; const handleSubmit = ()=>{ const messages = [ { role: "user", content: [ { type: "text", text: `どこに注目するか: ${focusAreas.join(", ")}` }, { type: "text", text: `要求する情報: ${requiredInfo.join(", ")}` }, { type: "text", text: `どのように: ${howTo.join(", ")}` }, { type: "image_url", image_url: { url: selectedImage } } ] } ]; fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] h-[400px] bg-gray-300 flex items-center justify-center relative", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, selectedImage ? /*#__PURE__*/ React.createElement("img", { src: selectedImage, alt: "Selected for analysis", className: "max-w-full max-h-full", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "No image selected"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", name: "imageUpload", onChange: handleImageChange, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute bottom-2 right-2 p-2 bg-blue-500 text-white font-roboto rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "画像を選択")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mt-4 p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "どこに注目するか"), focusAreas.map((focus, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: `focusArea${index}`, value: focus, onChange: handleChange(setFocusAreas, index), className: "w-full p-2 mt-2 mb-2 border rounded", placeholder: "注目するポイントを入力", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: removeInput(setFocusAreas)(index), className: "ml-2 p-2 mt-2 mb-2 text-red-500", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-minus-circle", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: addInput(setFocusAreas), className: "w-full p-2 mt-2 font-roboto bg-gray-300 hover:bg-gray-400 rounded", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "入力欄を追加")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "要求する情報"), requiredInfo.map((info, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: `requiredInfo${index}`, value: info, onChange: handleChange(setRequiredInfo, index), className: "w-full p-2 mt-2 mb-2 border rounded", placeholder: "要求する情報を入力", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: removeInput(setRequiredInfo)(index), className: "ml-2 p-2 mt-2 mb-2 text-red-500", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-minus-circle", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: addInput(setRequiredInfo), className: "w-full p-2 mt-2 font-roboto bg-gray-300 hover:bg-gray-400 rounded", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "入力欄を追加")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "どのように"), howTo.map((how, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: `howTo${index}`, value: how, onChange: handleChange(setHowTo, index), className: "w-full p-2 mt-2 mb-2 border rounded", placeholder: "どのようにを入力", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: removeInput(setHowTo)(index), className: "ml-2 p-2 mt-2 mb-2 text-red-500", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-minus-circle", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: addInput(setHowTo), className: "w-full p-2 mt-2 font-roboto bg-gray-300 hover:bg-gray-400 rounded", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "入力欄を追加")), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "w-full p-2 mt-4 bg-blue-500 text-white font-roboto rounded", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, "送信"))); }