function MainComponent() { const [url, setUrl] = useState(""); const [scrapingType, setScrapingType] = useState(""); const [includeImages, setIncludeImages] = useState(true); const [results, setResults] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [selectedImages, setSelectedImages] = useState(new Set()); const handleScrape = async ()=>{ if (!url) { setError("Please enter a URL"); return; } setLoading(true); setError(null); setSelectedImages(new Set()); try { const response = await fetch("/api/scrape", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url, type: scrapingType, includeImages: scrapingType === "products" ? includeImages : true }) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); setResults(data.result || data); } catch (err) { setError("Failed to scrape the website. Please try again."); console.error(err); } finally{ setLoading(false); } }; const toggleImageSelection = (imageUrl)=>{ const newSelected = new Set(selectedImages); if (newSelected.has(imageUrl)) { newSelected.delete(imageUrl); } else { newSelected.add(imageUrl); } setSelectedImages(newSelected); }; const downloadSingleImage = async (imageUrl, suggestedName)=>{ try { const response = await fetch(imageUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = suggestedName || "image.jpg"; a.click(); window.URL.revokeObjectURL(url); } catch (error) { console.error(`Failed to download image: ${imageUrl}`, error); } }; const downloadSelectedImages = async ()=>{ if (selectedImages.size === 0) return; Array.from(selectedImages).forEach(async (imageUrl, index)=>{ try { setTimeout(()=>{ downloadSingleImage(imageUrl, `image-${index + 1}.jpg`); }, index * 500); } catch (error) { console.error(`Failed to download image: ${imageUrl}`, error); } }); }; const downloadResults = (format)=>{ if (!results) return; let content; let type; let filename; if (format === "json") { content = JSON.stringify(results, null, 2); type = "application/json"; filename = "scraping-results.json"; } else if (format === "txt") { content = typeof results === "string" ? results : JSON.stringify(results, null, 2); type = "text/plain"; filename = "scraping-results.txt"; } else if (format === "csv" && scrapingType === "products") { const headers = [ "Product Name", "Regular Price (MRP)", "Sale Price", "Description", "Categories", "Tags", "Product Images" ]; let csvContent = headers.join(",") + "\n"; results.forEach((product)=>{ const row = [ `"${(product.name || "").replace(/"/g, '""')}"`, `"${(product.mrp || "").replace(/"/g, '""')}"`, `"${(product.salePrice || "").replace(/"/g, '""')}"`, `"${(product.description || "").replace(/"/g, '""')}"`, `"${(product.categories || []).join(" | ").replace(/"/g, '""')}"`, `"${(product.tags || []).join(" | ").replace(/"/g, '""')}"`, `"${(product.images || []).map((img)=>img.url).join(" | ").replace(/"/g, '""')}"` ]; csvContent += row.join(",") + "\n"; }); content = csvContent; type = "text/csv"; filename = "products.csv"; } const blob = new Blob([ content ], { type }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 141, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 mb-8", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "Web Scraping Portal")), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-6 mb-6", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "url", name: "url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "Enter website URL", className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScrapingType("text"), className: `px-4 py-2 rounded-lg ${scrapingType === "text" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-text-height mr-2", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }), "Extract Text"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScrapingType("html"), className: `px-4 py-2 rounded-lg ${scrapingType === "html" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-code mr-2", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }), "Extract HTML"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScrapingType("images"), className: `px-4 py-2 rounded-lg ${scrapingType === "images" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-images mr-2", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }), "Extract Images"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setScrapingType("products"), className: `px-4 py-2 rounded-lg ${scrapingType === "products" ? "bg-blue-500 text-white" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-cart mr-2", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }), "Extract Products")), scrapingType === "products" && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2 cursor-pointer", __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: includeImages, onChange: (e)=>setIncludeImages(e.target.checked), className: "form-checkbox h-5 w-5 text-blue-600 rounded", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, "Include product images"))), /*#__PURE__*/ React.createElement("button", { onClick: handleScrape, disabled: loading || !url || !scrapingType, className: "w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 disabled:bg-gray-400", __source: { fileName: "", lineNumber: 222, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 229, columnNumber: 17 }, __self: this }), "Scraping...") : /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 233, columnNumber: 17 }, __self: this }), "Start Scraping"))), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6", __source: { fileName: "", lineNumber: 240, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }), error), results && /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-6", __source: { fileName: "", lineNumber: 247, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg max-h-[600px] overflow-auto", __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, scrapingType === "images" ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 253, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 254, columnNumber: 23 }, __self: this }, "Select images to download (", selectedImages.size, " ", "selected)"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 258, columnNumber: 23 }, __self: this }, selectedImages.size > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: downloadSelectedImages, className: "bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700", __source: { fileName: "", lineNumber: 261, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 265, columnNumber: 31 }, __self: this }), "Download Selected Images"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedImages(new Set()), className: "bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600", __source: { fileName: "", lineNumber: 268, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times mr-2", __source: { fileName: "", lineNumber: 272, columnNumber: 31 }, __self: this }), "Clear Selection")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 279, columnNumber: 21 }, __self: this }, results.map((img, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative rounded-lg overflow-hidden border border-gray-200 bg-white", __source: { fileName: "", lineNumber: 281, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `cursor-pointer group ${selectedImages.has(img.url) ? "ring-2 ring-blue-500" : ""}`, onClick: ()=>toggleImageSelection(img.url), __source: { fileName: "", lineNumber: 285, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img.url, alt: img.alt || `Scraped image ${index + 1}`, className: "w-full h-48 object-cover", __source: { fileName: "", lineNumber: 293, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 ${selectedImages.has(img.url) ? "bg-opacity-20" : ""}`, __source: { fileName: "", lineNumber: 298, columnNumber: 29 }, __self: this }, selectedImages.has(img.url) && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 right-2 bg-blue-500 text-white rounded-full p-1", __source: { fileName: "", lineNumber: 306, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 307, columnNumber: 35 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-white border-t border-gray-200", __source: { fileName: "", lineNumber: 312, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadSingleImage(img.url, `image-${index + 1}.jpg`), className: "w-full text-sm bg-blue-500 text-white py-1 px-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 313, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-1", __source: { fileName: "", lineNumber: 322, columnNumber: 31 }, __self: this }), "Download")))))) : scrapingType === "products" ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 331, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-blue-50 rounded-lg", __source: { fileName: "", lineNumber: 332, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-blue-800", __source: { fileName: "", lineNumber: 333, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2", __source: { fileName: "", lineNumber: 334, columnNumber: 25 }, __self: this }), "Found ", results.length, " products")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 339, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full divide-y divide-gray-200", __source: { fileName: "", lineNumber: 340, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 341, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 342, columnNumber: 27 }, __self: this }, includeImages && /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 344, columnNumber: 31 }, __self: this }, "Image"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 348, columnNumber: 29 }, __self: this }, "Product Name"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 351, columnNumber: 29 }, __self: this }, "Pricing"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 354, columnNumber: 29 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 357, columnNumber: 29 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", __source: { fileName: "", lineNumber: 360, columnNumber: 29 }, __self: this }, "Tags"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white divide-y divide-gray-200", __source: { fileName: "", lineNumber: 365, columnNumber: 25 }, __self: this }, results.map((product, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "hover:bg-gray-50", __source: { fileName: "", lineNumber: 367, columnNumber: 29 }, __self: this }, includeImages && /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 whitespace-nowrap", __source: { fileName: "", lineNumber: 369, columnNumber: 33 }, __self: this }, product.images && product.images.length > 0 && /*#__PURE__*/ React.createElement("img", { src: product.images[0].url, alt: product.name || "Product", className: "h-20 w-20 object-cover rounded", __source: { fileName: "", lineNumber: 372, columnNumber: 39 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 380, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-900", __source: { fileName: "", lineNumber: 381, columnNumber: 33 }, __self: this }, product.name || "N/A")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 385, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 386, columnNumber: 33 }, __self: this }, product.mrp && /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 line-through", __source: { fileName: "", lineNumber: 388, columnNumber: 37 }, __self: this }, "MRP: ", product.mrp), product.salePrice && /*#__PURE__*/ React.createElement("div", { className: "text-green-600 font-semibold", __source: { fileName: "", lineNumber: 393, columnNumber: 37 }, __self: this }, "Sale: ", product.salePrice))), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 399, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-900 max-w-xs", __source: { fileName: "", lineNumber: 400, columnNumber: 33 }, __self: this }, product.description ? /*#__PURE__*/ React.createElement("div", { className: "truncate", title: product.description, __source: { fileName: "", lineNumber: 402, columnNumber: 37 }, __self: this }, product.description) : "N/A")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 413, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-1", __source: { fileName: "", lineNumber: 414, columnNumber: 33 }, __self: this }, product.categories && product.categories.length > 0 ? product.categories.map((category, idx)=>/*#__PURE__*/ React.createElement("span", { key: idx, className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800", __source: { fileName: "", lineNumber: 419, columnNumber: 43 }, __self: this }, category)) : "N/A")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 430, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-1", __source: { fileName: "", lineNumber: 431, columnNumber: 33 }, __self: this }, product.tags && product.tags.length > 0 ? product.tags.map((tag, idx)=>/*#__PURE__*/ React.createElement("span", { key: idx, className: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800", __source: { fileName: "", lineNumber: 434, columnNumber: 41 }, __self: this }, "#", tag)) : "N/A")))))))) : /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap break-words", __source: { fileName: "", lineNumber: 451, columnNumber: 19 }, __self: this }, typeof results === "string" ? results : JSON.stringify(results, null, 2)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 460, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadResults("json"), className: "flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700", __source: { fileName: "", lineNumber: 461, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 465, columnNumber: 17 }, __self: this }), "Download JSON"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadResults("txt"), className: "flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700", __source: { fileName: "", lineNumber: 468, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt mr-2", __source: { fileName: "", lineNumber: 472, columnNumber: 17 }, __self: this }), "Download TXT"), scrapingType === "products" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadResults("csv"), className: "flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700", __source: { fileName: "", lineNumber: 476, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-csv mr-2", __source: { fileName: "", lineNumber: 480, columnNumber: 19 }, __self: this }), "Download CSV"))))); }