function MainComponent() { const [imageBase64, setImageBase64] = React.useState(null); function handleImageChange(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ setImageBase64(reader.result); }; reader.readAsDataURL(file); } async function handleSubmit(event) { event.preventDefault(); const question = event.target.elements.question.value; const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: question }, { type: 'image_url', image_url: { url: imageBase64 } } ] } ] }) }); const result = await response.json(); alert(result.choices[0].message.content); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "GPT Vision Integration"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded-lg shadow-md w-[400px]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", accept: "image/png, image/jpeg, image/jpg, image/webp, image/gif", className: "mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer focus:outline-none", onChange: handleImageChange, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "block mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Your Question"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", className: "mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg focus:ring focus:ring-blue-500 focus:outline-none", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-roboto py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Submit"))); }