function ClassifiedImagesHeader({ title }) { return /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function ClassifiedImagesHeaderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClassifiedImagesHeader, { title: "Classified Images", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const [classifiedImages, setClassifiedImages] = React.useState([]); const handleFileUpload = (event)=>{ event.preventDefault(); const fileInput = event.target.upload; const descriptionInput = event.target.description; if (fileInput.files.length > 0) { const newImage = { src: URL.createObjectURL(fileInput.files[0]), alt: descriptionInput.value || 'Uploaded image' }; setClassifiedImages([ ...classifiedImages, newImage ]); fileInput.value = ''; descriptionInput.value = ''; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center p-5", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#333333] mb-5", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "Image Classifier"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-5 w-[600px]", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFileUpload, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto mb-2", htmlFor: "upload", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "upload", id: "upload", className: "block w-full h-[40px] mb-4 border border-gray-300 rounded p-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-roboto mb-2", htmlFor: "description", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "description", id: "description", className: "block w-full mb-4 h-[40px] border border-gray-300 rounded p-2", placeholder: "Describe the image", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white font-roboto h-[40px] rounded", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Classify")), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Use this form to upload and classify images"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-5 w-[600px] mt-5", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ClassifiedImagesHeader, { title: "Classified Images", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, classifiedImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image.src, alt: image.alt, className: "w-full h-[200px] object-cover rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }))))); }