function MainComponent() { const [result, setResult] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const file = formData.get('imageUpload'); const question = formData.get('question'); if (file && question) { const reader = new FileReader(); reader.onloadend = async ()=>{ const base64Image = reader.result; const visionResponse = 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: base64Image } } ] } ] }) }); const visionData = await visionResponse.json(); const groqResponse = await fetch('/integrations/groq/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: visionData.choices[0].message.content } ] }) }); const groqData = await groqResponse.json(); setResult(groqData.choices[0].message.content); }; reader.readAsDataURL(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "Image Analysis and Query"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Use the form below to upload an image and ask a question about it. Our AI will do its best to provide an accurate answer."), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center space-y-3", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "cursor-pointer text-white bg-[#007bff] py-2 px-4 rounded hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-upload", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), " Upload Image", /*#__PURE__*/ React.createElement("input", { id: "imageUpload", name: "imageUpload", type: "file", className: "hidden", accept: ".png, .jpg, .jpeg, .gif, .webp", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", placeholder: "Ask a question about the image...", className: "border px-4 py-2 rounded w-full", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-green-500 py-2 px-4 rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Analyze")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, result || 'Your query results will appear here...'))); }