function ImageFileUploader({ onFileChange }) { return /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", className: "w-full px-3 py-2 border rounded-md text-sm text-[#333]", onChange: onFileChange, accept: "image/*", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ImageFileUploaderStory() { const handleImageUpload = (event)=>{ console.log(event.target.files); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageFileUploader, { onFileChange: handleImageUpload, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [imageData, setImageData] = React.useState(''); const [generatedText, setGeneratedText] = React.useState({ combinationOne: '', combinationTwo: '' }); const [headline, setHeadline] = React.useState(''); const [longHeadline, setLongHeadline] = React.useState(''); const [description, setDescription] = React.useState(''); const handleImageUpload = (event)=>{ const reader = new FileReader(); reader.onloadend = ()=>{ setImageData(reader.result); }; reader.readAsDataURL(event.target.files[0]); }; const generateTextForAd = ()=>{ const aiGeneratedParts = { effectiveText: "Boost your sales today!", callToAction: "Don't miss out on this opportunity!" }; const imageInformation = imageData ? ` (Info from image: ${imageData.substring(0, 20)}...)` : ''; return { combinationOne: `${headline} + ${longHeadline} + ${aiGeneratedParts.effectiveText} ${aiGeneratedParts.callToAction} ${imageInformation}`, combinationTwo: `${longHeadline} + ${description} + ${aiGeneratedParts.effectiveText} ${aiGeneratedParts.callToAction} ${imageInformation}` }; }; const handleSubmit = (e)=>{ e.preventDefault(); const { combinationOne, combinationTwo } = generateTextForAd(); setGeneratedText({ combinationOne, combinationTwo }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-6 text-2xl font-bold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "Generate Ad Text"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow rounded-lg p-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "headline", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Headline (30 characters)"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "headline", name: "headline", maxLength: "30", className: "w-full px-3 py-2 border rounded-md text-sm text-[#333]", placeholder: "Enter the headline", value: headline, onChange: (e)=>setHeadline(e.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "longHeadline", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Long Headline (90 characters)"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "longHeadline", name: "longHeadline", maxLength: "90", className: "w-full px-3 py-2 border rounded-md text-sm text-[#333]", placeholder: "Enter the long headline", value: longHeadline, onChange: (e)=>setLongHeadline(e.target.value), __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Description (90 characters)"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "description", name: "description", maxLength: "90", className: "w-full px-3 py-2 border rounded-md text-sm text-[#333]", placeholder: "Enter the description", value: description, onChange: (e)=>setDescription(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Upload Banner Image"), /*#__PURE__*/ React.createElement(ImageFileUploader, { onFileChange: handleImageUpload, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 mt-4 text-sm font-bold text-white bg-blue-500 rounded-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Generate Text"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Generated Text Combinations"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-[#333]", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 59, columnNumber: 53 }, __self: this }, "Combination 1:"), " ", generatedText.combinationOne), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-[#333]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 60, columnNumber: 53 }, __self: this }, "Combination 2:"), " ", generatedText.combinationTwo))))); }