function MainComponent() { const [question, setQuestion] = React.useState(''); const [image, setImage] = React.useState(null); const [response, setResponse] = React.useState(''); const handleQuestionChange = (event)=>{ setQuestion(event.target.value); }; const handleImageChange = (event)=>{ setImage(event.target.files[0]); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (!image || !question) { alert('Please provide an image and a question.'); return; } const formData = new FormData(); formData.append('image', image); formData.append('question', question); const base64Image = await new Promise((resolve)=>{ const reader = new FileReader(); reader.onload = ()=>resolve(reader.result); reader.readAsDataURL(image); }); const body = JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: question }, { type: 'image_url', image_url: { url: base64Image } } ] } ] }); try { const response = await fetch('/integrations/gpt-vision/', { method: 'POST', body: body }); const data = await response.json(); setResponse(data.choices[0].message.content); } catch (error) { alert('Failed to fetch response. Please try again.'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Ask GPT_VISION about your image"), response && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 border border-[#ddd] bg-white", __source: { fileName: "", lineNumber: 56, columnNumber: 20 }, __self: this }, response), /*#__PURE__*/ React.createElement("div", { className: "border border-[#ddd] bg-white p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "font-roboto text-sm text-[#666]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageQuestion", className: "block mb-2 text-lg font-roboto text-[#333]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Ask a question about your image:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "imageQuestion", name: "question", className: "border border-[#ccc] bg-[#eee] p-2 w-full mb-4", placeholder: "What happens when the glove drops?", value: question, onChange: handleQuestionChange, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "block mb-2 text-lg font-roboto text-[#333]", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Upload your image:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "imageUpload", name: "image", className: "border border-[#ccc] bg-[#eee] p-2 w-full mb-4", accept: ".png, .jpeg, .jpg, .webp, .gif", onChange: handleImageChange, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Submit")))); }