Spaces:

bep40
/

web-scraper-pro

Running

App Files Files Community

bep40 commited on 10 days ago

Commit

282fee0

verified ·

1 Parent(s): c2cd99f

Bạn có thể trích xuất dc nội dung và hình ảnh bài viết từ url không

Browse files

Files changed (7) hide show

README.md +8 -5
about.html +109 -0
components/footer.js +51 -0
components/navbar.js +73 -0
index.html +135 -19
script.js +128 -0
style.css +71 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Web Scraper Pro
-emoji: 📚
-colorFrom: indigo
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Web Scraper Pro 🕷️
+colorFrom: green
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

about.html ADDED Viewed

	@@ -0,0 +1,109 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Web Scraper Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-1 container mx-auto px-4 py-12">
+        <div class="max-w-4xl mx-auto">
+            <!-- Header -->
+            <div class="text-center mb-12">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+                About Web Scraper Pro
+                <span class="text-primary">🕷️</span>
+                </h1>
+                <p class="text-xl text-gray-600">
+                Powerful web content extraction made simple
+                </p>
+            </div>
+            <!-- Features Grid -->
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+                <div class="bg-white p-6 rounded-2xl shadow-lg text-center">
+                    <i data-feather="zap" class="w-12 h-12 text-primary mx-auto mb-4"></i>
+                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Fast Extraction</h3>
+                    <p class="text-gray-600">Quickly extract content and images from any web page</p>
+                </div>
+                <div class="bg-white p-6 rounded-2xl shadow-lg text-center">
+                    <i data-feather="shield" class="w-12 h-12 text-primary mx-auto mb-4"></i>
+                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Secure</h3>
+                    <p class="text-gray-600">Your data and privacy are our top priority</p>
+                </div>
+                <div class="bg-white p-6 rounded-2xl shadow-lg text-center">
+                    <i data-feather="code" class="w-12 h-12 text-primary mx-auto mb-4"></i>
+                    <h3 class="text-lg font-semibold text-gray-900 mb-2">Developer Friendly</h3>
+                    <p class="text-gray-600">Easy-to-use API for integration into your applications</p>
+                </div>
+            </div>
+            <!-- How It Works -->
+            <div class="bg-white rounded-2xl shadow-xl p-8">
+                <h2 class="text-3xl font-bold text-gray-900 mb-6">How It Works</h2>
+                <div class="space-y-6">
+                    <div class="flex items-start gap-4">
+                        <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
+                    <span class="font-semibold">1</span>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold text-gray-900 mb-2">Enter URL</h3>
+                            <p class="text-gray-600">Provide the web page URL you want to extract content from</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-4">
+                        <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
+                    <span class="font-semibold">2</span>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold text-gray-900 mb-2">Content Extraction</h3>
+                            <p class="text-gray-600">Our system analyzes the page and extracts relevant content and images</p>
+                        </div>
+                    </div>
+                    <div class="flex items-start gap-4">
+                        <div class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0">
+                    <span class="font-semibold">3</span>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-semibold text-gray-900 mb-2">View Results</h3>
+                            <p class="text-gray-600">Browse through the extracted text content and image gallery</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    <!-- Feather Icons -->
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,51 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1a202c;
+          color: white;
+          padding: 2rem;
+          text-align: center;
+          margin-top: auto;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 2rem;
+          margin-bottom: 1rem;
+        }
+        .footer-links a {
+          color: #cbd5e0;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-links a:hover {
+          color: white;
+        }
+        .copyright {
+          color: #718096;
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="/privacy.html">Privacy</a>
+            <a href="/terms.html">Terms</a>
+            <a href="/contact.html">Contact</a>
+          </div>
+          <div class="copyright">
+            &copy; 2024 Web Scraper Pro. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,73 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.5rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        ul {
+          display: flex;
+          gap: 2rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: white;
+          text-decoration: none;
+          font-weight: 500;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          transition: all 0.2s;
+        }
+        a:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+        .nav-container {
+          width: 100%;
+          max-width: 1200px;
+          margin: 0 auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        @media (max-width: 768px) {
+          nav {
+            padding: 1rem;
+          }
+          ul {
+            gap: 1rem;
+          }
+        }
+      </style>
+      <nav>
+        <div class="nav-container">
+          <div class="logo">
+            <i data-feather="globe"></i>
+            Web Scraper Pro
+          </div>
+          <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about.html">About</a></li>
+            <li><a href="/api.html">API</a></li>
+          </ul>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,135 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Scraper Pro - Extract Content from URLs</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-1 container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-4">
+                Web Scraper Pro
+                <span class="text-primary">🕷️</span>
+            </h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
+                Extract article content and images from any URL with our powerful web scraping tool
+            </p>
+        </section>
+        <!-- Main Scraper Interface -->
+        <section class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-8">
+            <div class="flex items-center gap-3 mb-6">
+                <i data-feather="link" class="text-primary"></i>
+                <h2 class="text-2xl font-bold text-gray-900">Enter URL to Scrape</h2>
+            </div>
+            <form id="scraperForm" class="space-y-6">
+                <div class="space-y-2">
+                    <label for="urlInput" class="block text-sm font-medium text-gray-700">
+                        Website URL
+                    </label>
+                    <input
+                        type="url"
+                        id="urlInput"
+                        placeholder="https://example.com/article"
+                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200"
+                        required
+                    >
+                </div>
+                <div class="flex gap-4">
+                    <button
+                        type="submit"
+                        class="flex-1 bg-primary hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 flex items-center justify-center gap-2"
+                    >
+                        <i data-feather="download" class="w-5 h-5"></i>
+                        Extract Content
+                    </button>
+                    <button
+                        type="button"
+                        onclick="clearResults()"
+                        class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-200"
+                    >
+                        Clear
+                    </button>
+                </div>
+            </form>
+        </section>
+        <!-- Loading State -->
+        <div id="loading" class="hidden max-w-4xl mx-auto text-center p-8">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
+            <p class="text-gray-600">Extracting content from website...</p>
+        </div>
+        <!-- Results Section -->
+        <section id="results" class="hidden max-w-4xl mx-auto">
+            <!-- Article Content -->
+            <div class="bg-white rounded-2xl shadow-xl p-8 mb-6">
+                <div class="flex items-center gap-3 mb-6">
+                    <i data-feather="file-text" class="text-primary"></i>
+                    <h2 class="text-2xl font-bold text-gray-900">Extracted Content</h2>
+                </div>
+                <div id="articleContent" class="prose max-w-none text-gray-700">
+                    <!-- Content will be inserted here -->
+                </div>
+            </div>
+            <!-- Images Gallery -->
+            <div class="bg-white rounded-2xl shadow-xl p-8">
+                <div class="flex items-center gap-3 mb-6">
+                    <i data-feather="image" class="text-primary"></i>
+                <h2 class="text-2xl font-bold text-gray-900">Extracted Images</h2>
+                </div>
+                <div id="imageGallery" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <!-- Images will be inserted here -->
+                </div>
+            </div>
+        </section>
+        <!-- Error Message -->
+        <div id="error" class="hidden max-w-4xl mx-auto bg-red-50 border border-red-200 rounded-2xl p-6 mb-6">
+            <div class="flex items-center gap-3 text-red-800">
+                <i data-feather="alert-triangle" class="w-6 h-6"></i>
+                <h3 class="font-semibold">Error</h3>
+            </div>
+            <p id="errorMessage" class="text-red-700 mt-2"></p>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <!-- Component Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    <!-- Feather Icons -->
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,128 @@

+// Shared JavaScript across all pages
+console.log('Web Scraper Pro loaded');
+// DOM Elements
+const scraperForm = document.getElementById('scraperForm');
+const urlInput = document.getElementById('urlInput');
+const loading = document.getElementById('loading');
+const results = document.getElementById('results');
+const error = document.getElementById('error');
+const errorMessage = document.getElementById('errorMessage');
+const articleContent = document.getElementById('articleContent');
+const imageGallery = document.getElementById('imageGallery');
+// Form submission handler
+scraperForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const url = urlInput.value.trim();
+    if (!url) return;
+    // Show loading state
+    showLoading();
+    hideResults();
+    hideError();
+    try {
+        // Note: In a real implementation, you would call a backend API
+        // For demo purposes, we'll simulate the scraping process
+        await simulateScraping(url);
+    } catch (err) {
+        showError('Failed to extract content. Please check the URL and try again.');
+    }
+});
+// Simulate scraping process (replace with actual API call)
+async function simulateScraping(url) {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    // Hide loading
+    hideLoading();
+    // For demo purposes, we'll show sample content
+    // In a real implementation, you would call your scraping API here
+    displaySampleResults();
+}
+// Display sample results for demo
+function displaySampleResults() {
+    // Sample article content
+    articleContent.innerHTML = `
+        <h1>Sample Article Title</h1>
+        <p class="text-gray-500 mb-6">Extracted from: ${urlInput.value}</p>
+        <h2>Introduction</h2>
+        <p>This is a sample demonstration of how extracted content would appear. In a real implementation, this would be the actual content from the provided URL.</p>
+        <h2>Main Content</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <ul>
+            <li>First extracted paragraph</li>
+            <li>Second extracted paragraph</li>
+            <li>Third extracted paragraph with more details</li>
+        </ul>
+        <h2>Conclusion</h2>
+        <p>This demonstrates the web scraping capability. The actual implementation would connect to a backend service that extracts real content.</p>
+    `;
+    // Sample images
+    imageGallery.innerHTML = `
+        <div class="gallery-image">
+            <img src="http://static.photos/technology/640x360/1" alt="Sample image 1" class="w-full h-48 object-cover">
+        </div>
+        <div class="gallery-image">
+            <img src="http://static.photos/office/640x360/2" alt="Sample image 2" class="w-full h-48 object-cover">
+        </div>
+        <div class="gallery-image">
+            <img src="http://static.photos/nature/640x360/3" alt="Sample image 3" class="w-full h-48 object-cover">
+        </div>
+    `;
+    // Show results with animation
+    showResults();
+}
+// UI Control Functions
+function showLoading() {
+    loading.classList.remove('hidden');
+}
+function hideLoading() {
+    loading.classList.add('hidden');
+}
+function showResults() {
+    results.classList.remove('hidden');
+    results.classList.add('fade-in');
+}
+function hideResults() {
+    results.classList.add('hidden');
+    results.classList.remove('fade-in');
+}
+function showError(message) {
+    errorMessage.textContent = message;
+    error.classList.remove('hidden');
+    hideLoading();
+}
+function hideError() {
+    error.classList.add('hidden');
+}
+function clearResults() {
+    urlInput.value = '';
+    hideResults();
+    hideError();
+    hideLoading();
+}
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Web Scraper Pro initialized');
+    feather.replace();
+});

style.css CHANGED Viewed

@@ -1,28 +1,81 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+/* Smooth transitions */
+* {
+    transition: all 0.2s ease-in-out;
+}
+/* Custom animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fade-in {
+    animation: fadeIn 0.5s ease-out;
 }
+/* Prose styles for extracted content */
+.prose {
+    line-height: 1.6;
 }
+.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
 }
+.prose p {
+    margin-bottom: 1em;
 }
+.prose ul, .prose ol {
+    margin-bottom: 1em;
+    padding-left: 1.5em;
 }
+.prose li {
+    margin-bottom: 0.5em;
+}
+/* Image gallery styles */
+.gallery-image {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+.gallery-image:hover {
+    transform: scale(1.05);
+}