function MainComponent() { const [response, setResponse] = React.useState(null); const [image, setImage] = React.useState(null); const [question, setQuestion] = React.useState(''); const handleImageChange = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImage(reader.result); }; if (file) { reader.readAsDataURL(file); } }; const handleSubmit = async (event)=>{ event.preventDefault(); const result = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'gpt-4-vision-preview', messages: [ { "role": "user", "content": [ { "type": "text", "text": question }, { "type": "image_url", "image_url": image } ] } ] }) }); const data = await result.json(); setResponse(data.choices[0].message.content); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Upload image:"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", id: "imageUpload", onChange: handleImageChange, className: "mt-2 block w-full text-[#121212] file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-[#f3f4f6] file:text-[#121212] hover:file:bg-[#e2e8f0]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "question", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Ask a question:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", id: "question", value: question, onChange: (e)=>setQuestion(e.target.value), className: "mt-2 block w-full p-2 border rounded text-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }))), response && /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 border rounded bg-[#f7fafc]", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, response))); }