function MainComponent() { const [url, setUrl] = React.useState(''); const [data, setData] = React.useState({ title: '', companyName: '', description: '' }); const [loadingImage, setLoadingImage] = React.useState(false); const [image, setImage] = React.useState(''); const handleSubmit = async (e)=>{ e.preventDefault(); setLoadingImage(true); const scrapingResponse = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: url, return_text: false }) }); if (scrapingResponse.ok) { const text = await scrapingResponse.text(); const parser = new DOMParser(); const doc = parser.parseFromString(text, "text/html"); const title = doc.querySelector('title') ? doc.querySelector('title').innerText : ''; const h1s = doc.querySelectorAll('h1'); const h1 = h1s.length > 0 ? h1s[0].innerText : ''; const pTags = doc.querySelectorAll('p'); let description = ''; pTags.forEach((p)=>{ if (!description && p.innerText.split('.').length > 1) { description = p.innerText.split('.')[0] + '.'; } }); setData({ title, companyName: h1, description }); generateImage(description); } }; const generateImage = async (description)=>{ const imgResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(description)}&batch_size=1`, { method: 'GET' }); if (imgResponse.ok) { const imgData = await imgResponse.json(); setImage(imgData.data[0]); setLoadingImage(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F7F7]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-md p-8 space-y-8 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "url", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Enter URL"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "url", id: "url", value: url, onChange: (e)=>setUrl(e.target.value), className: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500", placeholder: "https://", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Scrape")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w-3xl", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-800", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Scraped Data"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 65, columnNumber: 48 }, __self: this }, "Title:"), " ", data.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 66, columnNumber: 48 }, __self: this }, "Company Name:"), " ", data.companyName), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 67, columnNumber: 48 }, __self: this }, "Description:"), " ", data.description)), loadingImage ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner animate-spin text-xl text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })) : image && /*#__PURE__*/ React.createElement("img", { src: image, alt: `Generated image for ${data.description}`, className: "mt-4 max-w-xs mx-auto", __source: { fileName: "", lineNumber: 74, columnNumber: 20 }, __self: this }))); }