function StrawberryRecipe({ title, children }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4 text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), children); } function StrawberryRecipeStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StrawberryRecipe, { title: "GPT-Vision Image Analyzer", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Tasty Strawberry Recipe"))); } function MainComponent() { const [imageURL, setImageURL] = React.useState(null); const [response, setResponse] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setImageURL(reader.result); }; reader.readAsDataURL(file); } }; const handleQuestionSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const questionText = formData.get('question'); if (imageURL && questionText) { const messages = [ { "role": "user", "content": [ { "type": "text", "text": questionText }, { "type": "image_url", "image_url": { "url": imageURL } } ] } ]; setIsLoading(true); try { const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages }) }); const data = await response.json(); setResponse(data.choices[0].message.content); } catch (error) { setResponse("An error occurred while processing your request."); } finally{ setIsLoading(false); } } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white rounded shadow p-6", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(StrawberryRecipe, { title: "GPT-Vision Image Analyzer", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleQuestionSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Upload an image"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "imageUpload", name: "imageUpload", accept: "image/*", onChange: handleImageUpload, className: "file:mr-4 file:rounded file:border-0 file:bg-violet-50 file:py-2 file:px-4 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "question", className: "mb-2 font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Ask a question about the image"), /*#__PURE__*/ React.createElement("textarea", { id: "question", name: "question", rows: "4", placeholder: "What happens when the glove drops?", className: "rounded border-gray-300 shadow-sm placeholder-gray-400 focus:border-violet-300 focus:ring focus:ring-violet-200 focus:ring-opacity-50", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: "w-full py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-violet-600 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 disabled:bg-violet-400", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, isLoading ? "Analyzing..." : "Submit")), response && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 102, columnNumber: 24 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Analysis Response:"), /*#__PURE__*/ React.createElement("p", { className: "text-[#333] font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, response))))); }