function MainComponent() { const [imageURL, setImageURL] = React.useState(''); const [imageAnalysis, setImageAnalysis] = React.useState(''); const [question, setQuestion] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); const formData = new FormData(e.target); const imageFile = formData.get('image'); const imageDataUrl = await readFileAsync(imageFile); setImageURL(imageDataUrl); const result = await fetch('/integrations/gpt-vision/', { method: 'POST', body: JSON.stringify({ model: 'gpt-4-vision-preview', messages: [ { "role": "user", "content": [ { "type": "image_url", "image_url": imageDataUrl, "question": question } ] } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await result.json(); setImageAnalysis(data.choices[0].message.content); setIsLoading(false); }; function readFileAsync(file) { return new Promise((resolve, reject)=>{ const reader = new FileReader(); reader.onload = ()=>resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); } function handleQuestionChange(e) { setQuestion(e.target.value); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white flex flex-col items-center justify-center p-4 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "Image Analysis"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-xl mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Upload an image to analyze:"), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:border-blue-500", type: "file", id: "image", name: "image", accept: "image/png, image/jpeg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "question", className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Ask a question about the image:"), /*#__PURE__*/ React.createElement("input", { className: "block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md shadow-sm focus:outline-none focus:border-blue-500", type: "text", id: "question", name: "question", value: question, onChange: handleQuestionChange, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, isLoading ? 'Analyzing...' : 'Submit')), imageURL && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "Uploaded analysis subject", className: "max-w-full h-auto rounded-md shadow-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this })), imageAnalysis && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-4 rounded-md shadow-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, imageAnalysis))); }