function TextInputField({ value, onChange }) { return /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "item", name: "item", type: "text", placeholder: "Enter item", value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function TextInputFieldStory() { const [item, setItem] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TextInputField, { value: item, onChange: (e)=>setItem(e.target.value), __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function QuantityInputField({ id, name, value, onChange, placeholder }) { return /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#333] leading-tight focus:outline-none focus:shadow-outline", id: id, name: name, type: "number", placeholder: placeholder, value: value, onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function QuantityInputFieldStory() { const [quantity, setQuantity] = React.useState(0); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuantityInputField, { id: "quantity", name: "quantity", placeholder: "Enter quantity", value: quantity, onChange: (e)=>setQuantity(e.target.value), __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function ImageUploadField({ onImageUpload }) { return /*#__PURE__*/ React.createElement("input", { type: "file", onChange: onImageUpload, className: "mb-4", name: "imageUpload", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ImageUploadFieldStory() { const handleImageUpload = (event)=>{ const file = event.target.files[0]; console.log('Image uploaded:', file); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadField, { onImageUpload: handleImageUpload, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [items, setItems] = React.useState([ { item: 'Milk', quantity: 2 }, { item: 'Bread', quantity: 1 } ]); const [item, setItem] = React.useState(''); const [quantity, setQuantity] = React.useState(''); const [output, setOutput] = React.useState(''); const [image, setImage] = React.useState(null); const [visionOutput, setVisionOutput] = React.useState(''); const handleSubmit = (e)=>{ e.preventDefault(); setItems([ ...items, { item, quantity: parseInt(quantity) } ]); setItem(''); setQuantity(''); fetch('/integrations/code-runner/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: `items = ${JSON.stringify([ ...items, { item, quantity: parseInt(quantity) } ])} print(items)`, language: 'python' }) }).then((response)=>response.json()).then((data)=>setOutput(data.stdout)); }; const handleImageUpload = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ const base64data = reader.result; setImage(base64data); fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: 'Analyze this image for shopping.' }, { type: 'image_url', image_url: { url: base64data } } ] } ] }) }).then((response)=>response.json()).then((data)=>setVisionOutput(data.choices[0].message.content)); }; reader.readAsDataURL(file); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-[#f0f8ff] min-h-screen p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-4 text-[#FF6347]", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Shopping Assistant"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-[400px]", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "item", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Item"), /*#__PURE__*/ React.createElement(TextInputField, { value: item, onChange: (e)=>setItem(e.target.value), __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "quantity", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement(QuantityInputField, { id: "quantity", name: "quantity", placeholder: "Enter quantity", value: quantity, onChange: (e)=>setQuantity(e.target.value), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "imageUpload", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement(ImageUploadField, { onImageUpload: handleImageUpload, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF6347] hover:bg-[#FF4500] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", type: "submit", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Add to List")), /*#__PURE__*/ React.createElement("ul", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-[400px] text-[#FF6347]", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-gray-700 text-base font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "- ", item.item, " (", item.quantity, ")"))), /*#__PURE__*/ React.createElement("pre", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-[400px] text-[#FF6347]", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, output), /*#__PURE__*/ React.createElement("pre", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-[400px] text-[#FF6347]", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, visionOutput)); }