Spaces:

ASDAD34
/

docextractor-pro

Running

App Files Files Community

ASDAD34 commited on Nov 29, 2025

Commit

5d66d3c

verified ·

1 Parent(s): f3e618e

PDF , word, Excel uzantılı dosyalar seçerek yükleyeceğim yüklenen dosyaların içeriğini metin tablo başlık girintileri vs eksiksiz olarak çıkartacak yüklenen belgeler her zaman metin olmayabilir resim de olabileceğini unutmadan içeriği json, markdown formatına çevirip indirecek uygulama istiyroum

Browse files

Files changed (6) hide show

README.md +8 -5
components/footer.js +46 -0
components/navbar.js +62 -0
index.html +73 -19
script.js +311 -0
style.css +24 -19

README.md CHANGED Viewed

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

 ---
+title: DocExtractor Pro 📄✨
+colorFrom: red
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,46 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          background-color: #1e293b;
+          color: #f8fafc;
+        }
+        .footer {
+          padding: 2rem 1rem;
+          text-align: center;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          margin-bottom: 1.5rem;
+        }
+        .footer-link {
+          color: #e2e8f0;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-link:hover {
+          color: #ffffff;
+        }
+        .copyright {
+          font-size: 0.875rem;
+          color: #94a3b8;
+        }
+      </style>
+      <footer class="footer">
+        <div class="footer-links">
+          <a href="#" class="footer-link">Privacy Policy</a>
+          <a href="#" class="footer-link">Terms of Service</a>
+          <a href="#" class="footer-link">Contact Us</a>
+        </div>
+        <p class="copyright">&copy; ${new Date().getFullYear()} DocExtractor Pro. All rights reserved.</p>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,62 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          background-color: white;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .navbar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1rem 2rem;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 1.25rem;
+          color: #4f46e5;
+          text-decoration: none;
+        }
+        .logo-icon {
+          margin-right: 0.5rem;
+        }
+        .nav-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .nav-link {
+          color: #4b5563;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.2s;
+        }
+        .nav-link:hover {
+          color: #4f46e5;
+        }
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+        }
+      </style>
+      <nav class="navbar">
+        <a href="/" class="logo">
+          <i data-feather="file-text" class="logo-icon"></i>
+          DocExtractor Pro
+        </a>
+        <div class="nav-links">
+          <a href="#" class="nav-link">Home</a>
+          <a href="#" class="nav-link">Features</a>
+          <a href="#" class="nav-link">About</a>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,73 @@
-<!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>DocExtractor Pro - Convert Files to Text Formats</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 src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.0/mammoth.browser.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/4.1.1/tesseract.min.js"></script>
+    <script src="script.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <section class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
+            <h1 class="text-3xl font-bold text-gray-800 mb-4">Document Extractor</h1>
+            <p class="text-gray-600 mb-6">Upload PDF, Word, or Excel files to extract text with formatting, tables, and images (OCR). Convert to JSON or Markdown formats.</p>
+            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6">
+                <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx,.xlsx,.xls,.doc,.png,.jpg,.jpeg" multiple>
+                <button id="uploadBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center mx-auto">
+                    <i data-feather="upload" class="mr-2"></i> Choose Files
+                </button>
+                <p class="text-gray-500 mt-3">Supported formats: PDF, DOCX, XLSX, JPG, PNG</p>
+            </div>
+            <div id="filePreviewContainer" class="hidden">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Selected Files</h2>
+                <div id="filePreviewList" class="space-y-3 mb-6"></div>
+            </div>
+            <div class="flex flex-col sm:flex-row gap-4 mb-6">
+                <div class="w-full">
+                    <label class="block text-gray-700 font-medium mb-2" for="outputFormat">Output Format</label>
+                    <select id="outputFormat" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                        <option value="json">JSON</option>
+                        <option value="markdown">Markdown</option>
+                        <option value="text">Plain Text</option>
+                    </select>
+                </div>
+                <button id="processBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center mt-6 sm:mt-auto">
+                    <i data-feather="cpu" class="mr-2"></i> Process Files
+                </button>
+            </div>
+            <div id="resultsSection" class="hidden">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-semibold text-gray-800">Extracted Content</h2>
+                    <button id="downloadAllBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center">
+                        <i data-feather="download" class="mr-2"></i> Download All
+                    </button>
+                </div>
+                <div id="resultsContainer" class="space-y-6"></div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,311 @@

+document.addEventListener('DOMContentLoaded', function() {
+    const uploadBtn = document.getElementById('uploadBtn');
+    const fileInput = document.getElementById('fileInput');
+    const filePreviewList = document.getElementById('filePreviewList');
+    const filePreviewContainer = document.getElementById('filePreviewContainer');
+    const processBtn = document.getElementById('processBtn');
+    const outputFormat = document.getElementById('outputFormat');
+    const resultsContainer = document.getElementById('resultsContainer');
+    const resultsSection = document.getElementById('resultsSection');
+    const downloadAllBtn = document.getElementById('downloadAllBtn');
+    let files = [];
+    let processedResults = [];
+    // Set PDF.js worker path
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';
+    // Handle file selection
+    uploadBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', handleFileSelection);
+    function handleFileSelection(e) {
+        files = Array.from(e.target.files);
+        filePreviewList.innerHTML = '';
+        if (files.length === 0) {
+            filePreviewContainer.classList.add('hidden');
+            return;
+        }
+        files.forEach((file, index) => {
+            const filePreview = createFilePreview(file, index);
+            filePreviewList.appendChild(filePreview);
+        });
+        filePreviewContainer.classList.remove('hidden');
+    }
+    function createFilePreview(file, index) {
+        const card = document.createElement('div');
+        card.className = 'file-card bg-gray-50 rounded-lg p-4 flex items-center justify-between';
+        const fileInfo = document.createElement('div');
+        fileInfo.className = 'flex items-center';
+        const icon = document.createElement('div');
+        icon.className = 'bg-gray-200 p-2 rounded-full mr-3';
+        const fileIcon = document.createElement('i');
+        fileIcon.dataset.feather = getFileIcon(file);
+        icon.appendChild(fileIcon);
+        const fileName = document.createElement('span');
+        fileName.className = 'font-medium text-gray-800';
+        fileName.textContent = file.name;
+        fileInfo.appendChild(icon);
+        fileInfo.appendChild(fileName);
+        const fileSize = document.createElement('span');
+        fileSize.className = 'text-gray-500 text-sm';
+        fileSize.textContent = formatFileSize(file.size);
+        card.appendChild(fileInfo);
+        card.appendChild(fileSize);
+        feather.replace();
+        return card;
+    }
+    function getFileIcon(file) {
+        if (file.type.includes('pdf')) return 'file';
+        if (file.type.includes('word') || file.type.includes('document')) return 'file-text';
+        if (file.type.includes('excel') || file.type.includes('spreadsheet')) return 'file-text';
+        if (file.type.includes('image')) return 'image';
+        return 'file';
+    }
+    function formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    // Process files
+    processBtn.addEventListener('click', async function() {
+        if (files.length === 0) {
+            alert('Please select at least one file');
+            return;
+        }
+        resultsContainer.innerHTML = '';
+        processedResults = [];
+        processBtn.disabled = true;
+        processBtn.innerHTML = '<i data-feather="loader" class="spinner mr-2"></i> Processing...';
+        feather.replace();
+        try {
+            for (const file of files) {
+                const result = await processFile(file);
+                processedResults.push(result);
+                displayResult(result);
+            }
+            resultsSection.classList.remove('hidden');
+        } catch (error) {
+            console.error('Error processing files:', error);
+            alert('An error occurred while processing files: ' + error.message);
+        } finally {
+            processBtn.disabled = false;
+            processBtn.innerHTML = '<i data-feather="cpu" class="mr-2"></i> Process Files';
+            feather.replace();
+        }
+    });
+    async function processFile(file) {
+        const format = outputFormat.value;
+        let content;
+        if (file.type.includes('pdf')) {
+            content = await extractTextFromPDF(file);
+        } else if (file.type.includes('word') || file.type.includes('document') ||
+                   file.name.endsWith('.docx') || file.name.endsWith('.doc')) {
+            content = await extractTextFromWord(file);
+        } else if (file.type.includes('excel') || file.type.includes('spreadsheet') ||
+                   file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) {
+            content = await extractTextFromExcel(file);
+        } else if (file.type.includes('image')) {
+            content = await extractTextFromImage(file);
+        } else {
+            throw new Error('Unsupported file type: ' + file.type);
+        }
+        // Convert content to requested format
+        let formattedContent;
+        if (format === 'json') {
+            formattedContent = {
+                fileName: file.name,
+                fileType: file.type,
+                fileSize: file.size,
+                content: content,
+                extractedAt: new Date().toISOString()
+            };
+            formattedContent = JSON.stringify(formattedContent, null, 2);
+        } else if (format === 'markdown') {
+            formattedContent = `# ${file.name}\n\n`;
+            if (typeof content === 'string') {
+                formattedContent += content;
+            } else {
+                formattedContent += JSON.stringify(content, null, 2)
+                    .replace(/\n/g, '\n\n')
+                    .replace(/"([^"]+)":/g, '**$1**:');
+            }
+        } else {
+            // Plain text
+            if (typeof content === 'string') {
+                formattedContent = content;
+            } else {
+                formattedContent = JSON.stringify(content, null, 2);
+            }
+        }
+        return {
+            fileName: file.name,
+            content: formattedContent,
+            format: format
+        };
+    }
+    async function extractTextFromPDF(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = async function(event) {
+                try {
+                    const typedArray = new Uint8Array(event.target.result);
+                    const pdf = await pdfjsLib.getDocument(typedArray).promise;
+                    let text = '';
+                    for (let i = 1; i <= pdf.numPages; i++) {
+                        const page = await pdf.getPage(i);
+                        const content = await page.getTextContent();
+                        const strings = content.items.map(item => item.str);
+                        text += strings.join(' ') + '\n\n';
+                    }
+                    resolve(text);
+                } catch (error) {
+                    reject(error);
+                }
+            };
+            reader.onerror = reject;
+            reader.readAsArrayBuffer(file);
+        });
+    }
+    async function extractTextFromWord(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                mammoth.extractRawText({ arrayBuffer: event.target.result })
+                    .then(function(result) {
+                        resolve(result.value);
+                    })
+                    .catch(reject);
+            };
+            reader.onerror = reject;
+            reader.readAsArrayBuffer(file);
+        });
+    }
+    async function extractTextFromExcel(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                try {
+                    const data = new Uint8Array(event.target.result);
+                    const workbook = XLSX.read(data, { type: 'array' });
+                    const result = {};
+                    workbook.SheetNames.forEach(sheetName => {
+                        const worksheet = workbook.Sheets[sheetName];
+                        result[sheetName] = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+                    });
+                    resolve(result);
+                } catch (error) {
+                    reject(error);
+                }
+            };
+            reader.onerror = reject;
+            reader.readAsArrayBuffer(file);
+        });
+    }
+    async function extractTextFromImage(file) {
+        return new Promise((resolve, reject) => {
+            Tesseract.recognize(
+                file,
+                'eng',
+                { logger: m => console.log(m) }
+            ).then(({ data: { text } }) => {
+                resolve(text);
+            }).catch(reject);
+        });
+    }
+    function displayResult(result) {
+        const resultCard = document.createElement('div');
+        resultCard.className = 'bg-gray-50 rounded-lg p-4 shadow-sm';
+        const header = document.createElement('div');
+        header.className = 'flex justify-between items-center mb-3';
+        const title = document.createElement('h3');
+        title.className = 'font-semibold text-lg text-gray-800 truncate';
+        title.textContent = result.fileName;
+        const downloadBtn = document.createElement('button');
+        downloadBtn.className = 'bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-1 px-3 rounded transition duration-200 flex items-center text-sm';
+        downloadBtn.innerHTML = '<i data-feather="download" class="mr-1"></i> Download';
+        downloadBtn.addEventListener('click', () => downloadResult(result));
+        header.appendChild(title);
+        header.appendChild(downloadBtn);
+        const content = document.createElement('div');
+        if (result.format === 'json') {
+            const pre = document.createElement('pre');
+            pre.textContent = result.content;
+            content.appendChild(pre);
+        } else {
+            const pre = document.createElement('pre');
+            pre.textContent = result.content;
+            content.appendChild(pre);
+        }
+        resultCard.appendChild(header);
+        resultCard.appendChild(content);
+        resultsContainer.appendChild(resultCard);
+        feather.replace();
+    }
+    function downloadResult(result) {
+        const blob = new Blob([result.content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${result.fileName.split('.')[0]}.${result.format}`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+    downloadAllBtn.addEventListener('click', () => {
+        processedResults.forEach(result => {
+            downloadResult(result);
+        });
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,33 @@
-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;
 }

+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
+.spinner {
+    animation: spin 1s linear infinite;
 }
+.file-card {
+    transition: all 0.2s ease-in-out;
 }
+.file-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }
+.preview-image {
+    max-height: 150px;
+    object-fit: contain;
 }
+#resultsContainer pre {
+    background-color: #f8f9fa;
+    padding: 16px;
+    border-radius: 8px;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    max-height: 500px;
+    overflow-y: auto;
+}