Spaces:

joermd
/

translate

Running

App Files Files Community

joermd commited on Mar 2, 2025

Commit

91e5a7d

verified ·

1 Parent(s): 211964f

Update ocr.html

Browse files

Files changed (1) hide show

ocr.html +514 -0

ocr.html CHANGED Viewed

	@@ -0,0 +1,514 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>UFastPro OCR Technology</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+  <!-- PDF.js library -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
+  <style>
+    :root {
+      --primary: #4361ee;
+      --primary-hover: #3a56d4;
+      --secondary: #4cc9f0;
+      --secondary-hover: #3db8dd;
+    }
+    body {
+      background-color: #f8f9fa;
+    }
+    .container {
+      max-width: 900px;
+    }
+    header {
+      margin-bottom: 2rem;
+      padding: 1rem 0;
+      background: linear-gradient(135deg, var(--primary), var(--secondary));
+      color: white;
+      border-radius: 0 0 10px 10px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    header h1 {
+      margin: 0;
+      font-weight: bold;
+    }
+    header p {
+      margin: 0.5rem 0 0 0;
+      opacity: 0.9;
+    }
+    article {
+      margin: 2rem 0;
+      padding: 2rem;
+      background-color: white;
+      border-radius: 10px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+    .progress-container {
+      width: 100%;
+      margin: 20px 0;
+    }
+    .progress-bar {
+      height: 20px;
+      background: linear-gradient(to right, var(--primary), var(--secondary));
+      width: 0%;
+      border-radius: 5px;
+      transition: width 0.3s;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .page-result {
+      margin-bottom: 20px;
+      border: 1px solid #e9ecef;
+      padding: 20px;
+      border-radius: 8px;
+      background-color: white;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+      transition: transform 0.2s;
+    }
+    .page-result:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    .page-result h4 {
+      margin-top: 0;
+      color: var(--primary);
+      border-bottom: 2px solid #f1f3f5;
+      padding-bottom: 0.5rem;
+    }
+    #resultsContainer {
+      max-height: 600px;
+      overflow-y: auto;
+      margin-top: 20px;
+      padding-right: 10px;
+    }
+    .status-text {
+      text-align: center;
+      margin: 10px 0;
+      font-weight: 500;
+      color: #495057;
+    }
+    button {
+      background-color: var(--primary);
+      transition: all 0.2s;
+    }
+    button:hover {
+      background-color: var(--primary-hover);
+      transform: translateY(-2px);
+    }
+    #cancelProcessingBtn {
+      background-color: #e63946;
+    }
+    #cancelProcessingBtn:hover {
+      background-color: #d62828;
+    }
+    pre {
+      background-color: #f8f9fa;
+      border-radius: 5px;
+      padding: 10px;
+      font-size: 0.9rem;
+    }
+    details summary {
+      cursor: pointer;
+      color: var(--primary);
+      font-weight: 500;
+    }
+    footer {
+      text-align: center;
+      margin-top: 2rem;
+      padding: 1rem 0;
+      color: #6c757d;
+      font-size: 0.9rem;
+    }
+    .logo {
+      font-weight: bold;
+      font-size: 1.2rem;
+      color: white;
+      text-decoration: none;
+    }
+    .logo span {
+      color: var(--secondary);
+    }
+    .upload-container {
+      border: 2px dashed #ced4da;
+      border-radius: 8px;
+      padding: 2rem;
+      text-align: center;
+      transition: all 0.2s;
+      cursor: pointer;
+      margin-bottom: 1rem;
+    }
+    .upload-container:hover {
+      border-color: var(--primary);
+      background-color: rgba(67, 97, 238, 0.05);
+    }
+    .upload-icon {
+      font-size: 2rem;
+      color: var(--primary);
+      margin-bottom: 1rem;
+    }
+    .export-button {
+      display: none;
+      margin-top: 20px;
+    }
+    @media (max-width: 768px) {
+      article {
+        padding: 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="container">
+    <div style="text-align: center;">
+      <a href="#" class="logo">UFast<span>Pro</span> OCR Technology</a>
+      <p>Advanced PDF Text Recognition System</p>
+    </div>
+  </header>
+  <main class="container">
+    <article>
+      <h3 style="text-align: center; margin-top: 0;">PDF Text Extraction</h3>
+      <p style="text-align: center;">Upload any PDF document to extract text from all pages using our advanced OCR technology.</p>
+      <div class="upload-container" id="uploadContainer">
+        <div class="upload-icon">📄</div>
+        <p>Drag & drop your PDF here or click to browse</p>
+        <input type="file" id="pdfFile" name="pdfFile" accept=".pdf" style="display: none;">
+      </div>
+      <div class="progress-container" id="progressContainer" hidden>
+        <div class="progress-bar" id="progressBar"></div>
+        <p class="status-text" id="statusText">Ready to process</p>
+      </div>
+      <div style="display: flex; gap: 10px; justify-content: center;">
+        <button id="startProcessingBtn" disabled>Start Processing</button>
+        <button id="cancelProcessingBtn" hidden>Cancel Processing</button>
+      </div>
+      <button id="exportAllTextBtn" class="export-button">Export All Text</button>
+    </article>
+    <div id="resultsContainer"></div>
+  </main>
+  <footer class="container">
+    <p>&copy; 2025 UFastPro OCR Technology. All rights reserved.</p>
+  </footer>
+  <script>
+    // Set up PDF.js worker
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
+    // API keys pool
+    const API_KEYS = [
+      '32769fb369mshfdf6f5e28e26674p1f3764jsn2a31085a1fc7',
+      '091dbfbf0emsh6606eb2165cfd97p191257jsnd017aa229e09',
+      '2175cafd75msh4465ea00b022145p1e062ajsn05e78cebc495',
+      'eb11693cddmshb8bd157e05b74acp1f6aa4jsn4369fa546e55',
+      'e9c1cd0db3mshb54648cf3400243p1d0a2bjsnf0d54e43fca2',
+      'fdb95540bamsh786e3ec8083bb22p1b4c1ajsn44fecbb812bb'
+    ];
+    // Get random API key from the pool
+    function getRandomApiKey() {
+      const randomIndex = Math.floor(Math.random() * API_KEYS.length);
+      return API_KEYS[randomIndex];
+    }
+    const RAPIDAPI_HOST = 'ocr43.p.rapidapi.com';
+    const API_URL = 'https://ocr43.p.rapidapi.com/v1/results';
+    document.addEventListener('DOMContentLoaded', function() {
+      const pdfFileInput = document.getElementById('pdfFile');
+      const uploadContainer = document.getElementById('uploadContainer');
+      const startProcessingBtn = document.getElementById('startProcessingBtn');
+      const cancelProcessingBtn = document.getElementById('cancelProcessingBtn');
+      const progressContainer = document.getElementById('progressContainer');
+      const progressBar = document.getElementById('progressBar');
+      const statusText = document.getElementById('statusText');
+      const resultsContainer = document.getElementById('resultsContainer');
+      const exportAllTextBtn = document.getElementById('exportAllTextBtn');
+      let pdfDocument = null;
+      let isProcessing = false;
+      let shouldCancel = false;
+      let allExtractedText = [];
+      // Event listeners
+      pdfFileInput.addEventListener('change', handlePdfSelection);
+      uploadContainer.addEventListener('click', () => pdfFileInput.click());
+      uploadContainer.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadContainer.style.borderColor = 'var(--primary)';
+        uploadContainer.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
+      });
+      uploadContainer.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        uploadContainer.style.borderColor = '#ced4da';
+        uploadContainer.style.backgroundColor = '';
+      });
+      uploadContainer.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadContainer.style.borderColor = '#ced4da';
+        uploadContainer.style.backgroundColor = '';
+        if (e.dataTransfer.files.length) {
+          pdfFileInput.files = e.dataTransfer.files;
+          handlePdfSelection({ target: { files: e.dataTransfer.files } });
+        }
+      });
+      startProcessingBtn.addEventListener('click', startProcessing);
+      cancelProcessingBtn.addEventListener('click', cancelProcessing);
+      exportAllTextBtn.addEventListener('click', exportAllText);
+      // Handle PDF file selection
+      async function handlePdfSelection(event) {
+        const file = event.target.files[0];
+        if (!file || file.type !== 'application/pdf') {
+          alert('Please select a valid PDF file.');
+          return;
+        }
+        try {
+          // Update UI to show loading
+          statusText.textContent = 'Loading PDF...';
+          progressContainer.hidden = false;
+          progressBar.style.width = '10%';
+          // Load the PDF file
+          const arrayBuffer = await file.arrayBuffer();
+          pdfDocument = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+          // Enable the start button and update status
+          startProcessingBtn.disabled = false;
+          statusText.textContent = `PDF loaded with ${pdfDocument.numPages} pages. Click "Start Processing" to begin.`;
+          progressBar.style.width = '20%';
+        } catch (error) {
+          console.error('Error loading PDF:', error);
+          alert('Error loading PDF file. Please try again.');
+          progressContainer.hidden = true;
+        }
+      }
+      // Start processing the PDF
+      async function startProcessing() {
+        if (!pdfDocument || isProcessing) return;
+        isProcessing = true;
+        shouldCancel = false;
+        startProcessingBtn.hidden = true;
+        cancelProcessingBtn.hidden = false;
+        resultsContainer.innerHTML = '';
+        allExtractedText = [];
+        exportAllTextBtn.style.display = 'none';
+        const totalPages = pdfDocument.numPages;
+        for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
+          if (shouldCancel) {
+            statusText.textContent = 'Processing cancelled.';
+            break;
+          }
+          // Update progress
+          updateProgress(pageNum, totalPages);
+          try {
+            // Process the current page
+            await processPage(pageNum, totalPages);
+          } catch (error) {
+            console.error(`Error processing page ${pageNum}:`, error);
+            addPageResult(pageNum, `Error: ${error.message}`, null);
+            allExtractedText.push(`[PAGE ${pageNum}]\nError: ${error.message}\n`);
+          }
+        }
+        // Reset UI after processing
+        if (!shouldCancel) {
+          statusText.textContent = 'Processing complete!';
+          progressBar.style.width = '100%';
+          exportAllTextBtn.style.display = 'block';
+        }
+        isProcessing = false;
+        startProcessingBtn.hidden = false;
+        cancelProcessingBtn.hidden = true;
+      }
+      // Cancel the processing
+      function cancelProcessing() {
+        shouldCancel = true;
+        statusText.textContent = 'Cancelling...';
+      }
+      // Update progress bar and status text
+      function updateProgress(current, total) {
+        const percentage = 20 + ((current / total) * 80); // Start at 20% (after loading)
+        progressBar.style.width = `${percentage}%`;
+        statusText.textContent = `Processing page ${current} of ${total}`;
+      }
+      // Export all extracted text
+      function exportAllText() {
+        if (allExtractedText.length === 0) return;
+        const combinedText = allExtractedText.join('\n\n');
+        const blob = new Blob([combinedText], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'extracted_text.txt';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      }
+      // Process a single page
+      async function processPage(pageNum, totalPages) {
+        // Get the page
+        const page = await pdfDocument.getPage(pageNum);
+        // Create a canvas for the page (not displayed but needed for processing)
+        const viewport = page.getViewport({ scale: 1.5 });
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+        // Render the page to the canvas
+        await page.render({
+          canvasContext: context,
+          viewport: viewport
+        }).promise;
+        // Convert canvas to blob
+        const blob = await new Promise(resolve => {
+          canvas.toBlob(resolve, 'image/png');
+        });
+        // Get a random API key for this request
+        const randomApiKey = getRandomApiKey();
+        // Send the image to OCR API
+        const formData = new FormData();
+        formData.append('image', blob, `page-${pageNum}.png`);
+        const response = await fetch(API_URL, {
+          method: 'POST',
+          headers: {
+            'X-RapidAPI-Key': randomApiKey,
+            'X-RapidAPI-Host': RAPIDAPI_HOST
+          },
+          body: formData
+        });
+        const data = await response.json();
+        // Extract text from the response
+        let extractedText = '';
+        try {
+          extractedText = data.results[0].entities[0].objects[0].entities[0].text;
+        } catch (error) {
+          extractedText = 'No text could be extracted from this page.';
+        }
+        // Store the extracted text
+        allExtractedText.push(`[PAGE ${pageNum}]\n${extractedText}`);
+        // Add the result to the UI
+        addPageResult(pageNum, extractedText, data);
+      }
+      // Add a page result to the UI
+      function addPageResult(pageNum, text, rawData) {
+        const pageResult = document.createElement('div');
+        pageResult.className = 'page-result';
+        // Add page header
+        const header = document.createElement('h4');
+        header.textContent = `Page ${pageNum}`;
+        pageResult.appendChild(header);
+        // Add extracted text
+        const textHeader = document.createElement('h5');
+        textHeader.textContent = 'Extracted Text:';
+        pageResult.appendChild(textHeader);
+        const textContent = document.createElement('pre');
+        textContent.style.whiteSpace = 'pre-wrap';
+        textContent.textContent = text || 'No text extracted';
+        pageResult.appendChild(textContent);
+        // Add copy button
+        const copyButton = document.createElement('button');
+        copyButton.textContent = 'Copy Text';
+        copyButton.setAttribute('aria-label', 'Copy text to clipboard');
+        copyButton.style.marginBottom = '10px';
+        copyButton.addEventListener('click', () => {
+          navigator.clipboard.writeText(text || '')
+            .then(() => {
+              const originalText = copyButton.textContent;
+              copyButton.textContent = 'Copied!';
+              setTimeout(() => {
+                copyButton.textContent = originalText;
+              }, 2000);
+            })
+            .catch(err => console.error('Failed to copy text:', err));
+        });
+        pageResult.appendChild(copyButton);
+        // Add raw data toggle (optional, can be removed if not needed)
+        if (rawData) {
+          const rawToggle = document.createElement('details');
+          const rawSummary = document.createElement('summary');
+          rawSummary.textContent = 'Show Raw API Response';
+          rawToggle.appendChild(rawSummary);
+          const rawContent = document.createElement('pre');
+          rawContent.style.maxHeight = '200px';
+          rawContent.style.overflow = 'auto';
+          rawContent.textContent = JSON.stringify(rawData, null, 2);
+          rawToggle.appendChild(rawContent);
+          pageResult.appendChild(rawToggle);
+        }
+        // Add to results container
+        resultsContainer.appendChild(pageResult);
+        // Scroll to the new result
+        pageResult.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      }
+    });
+  </script>
+</body>
+</html>