Spaces:

Hood-CS
/

pdf-portrait-duplicator

Running

App Files Files Community

Hood-CS commited on Jan 22

Commit

0853b0a

verified ·

1 Parent(s): 9269625

You are an expert in image and PDF manipulation,

Browse files

Context

I have a portrait of a document. I want it to be 2 of them in a landscape (I want the 2 pages on the same landscape page)

Task

Write a webpage that can do such, with a given PDF, and give a new pdf.

Answer order:
Logic of the code
Tree structure of the file names.
The content of each file

Files changed (5) hide show

README.md +7 -4
components/pdf-preview.js +37 -0
index.html +91 -19
script.js +138 -0
style.css +15 -21

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Pdf Portrait Duplicator
-emoji: 🏆
 colorFrom: red
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PDF Portrait Duplicator 📄✨
 colorFrom: red
+colorTo: red
+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/pdf-preview.js ADDED Viewed

	@@ -0,0 +1,37 @@

+class PdfPreview extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .preview-container {
+                    border: 2px dashed #e2e8f0;
+                    border-radius: 0.5rem;
+                    padding: 1rem;
+                    background-color: #f8fafc;
+                    text-align: center;
+                    transition: all 0.2s;
+                }
+                .preview-container:hover {
+                    border-color: #818cf8;
+                }
+                .preview-text {
+                    color: #64748b;
+                    margin-bottom: 0.5rem;
+                }
+                .preview-image {
+                    max-width: 100%;
+                    max-height: 300px;
+                    margin-top: 1rem;
+                    border-radius: 0.25rem;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                }
+            </style>
+            <div class="preview-container">
+                <p class="preview-text">PDF preview will appear here</p>
+                <slot></slot>
+            </div>
+        `;
+    }
+}
+customElements.define('pdf-preview', PdfPreview);

index.html CHANGED Viewed

@@ -1,19 +1,91 @@
-<!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>PDF Portrait Duplicator</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/downloadjs@1.4.7"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-12">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">PDF Portrait Duplicator</h1>
+            <p class="text-gray-600">Convert single portrait pages into landscape with 2 pages side by side</p>
+        </header>
+        <main class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8">
+            <div class="mb-8">
+                <label class="block text-gray-700 text-sm font-bold mb-2" for="pdf-input">
+                    Upload PDF File
+                </label>
+                <div class="flex items-center justify-center w-full">
+                    <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition">
+                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                            <i data-feather="upload" class="w-8 h-8 text-gray-500 mb-3"></i>
+                            <p class="mb-2 text-sm text-gray-500">Click to upload or drag and drop</p>
+                            <p class="text-xs text-gray-500">PDF only</p>
+                        </div>
+                        <input id="pdf-input" type="file" class="hidden" accept=".pdf" />
+                    </label>
+                </div>
+            </div>
+            <div class="mb-8">
+                <label class="block text-gray-700 text-sm font-bold mb-2">
+                    Options
+                </label>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" id="reverse-order" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                            <span class="ml-2 text-gray-700">Reverse page order</span>
+                        </label>
+                    </div>
+                    <div>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" id="add-page-numbers" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                            <span class="ml-2 text-gray-700">Add page numbers</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center">
+                <button id="process-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition flex items-center">
+                    <i data-feather="repeat" class="mr-2"></i>
+                    Process PDF
+                </button>
+            </div>
+            <div id="preview-container" class="mt-8 hidden">
+                <h3 class="text-lg font-semibold text-gray-700 mb-4">Preview</h3>
+                <div id="preview" class="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                    <p class="text-gray-500 text-center">Preview will appear here</p>
+                </div>
+            </div>
+            <div id="download-container" class="mt-8 hidden">
+                <button id="download-btn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition flex items-center justify-center">
+                    <i data-feather="download" class="mr-2"></i>
+                    Download Processed PDF
+                </button>
+            </div>
+        </main>
+        <footer class="mt-12 text-center text-gray-500 text-sm">
+            <p>Created with PDF-lib.js - Simple PDF manipulation in the browser</p>
+        </footer>
+    </div>
+    <script src="script.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,138 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const pdfInput = document.getElementById('pdf-input');
+    const processBtn = document.getElementById('process-btn');
+    const downloadBtn = document.getElementById('download-btn');
+    const previewContainer = document.getElementById('preview-container');
+    const downloadContainer = document.getElementById('download-container');
+    const preview = document.getElementById('preview');
+    const reverseOrderCheckbox = document.getElementById('reverse-order');
+    const addPageNumbersCheckbox = document.getElementById('add-page-numbers');
+    let processedPdfBytes = null;
+    pdfInput.addEventListener('change', handleFileSelect);
+    processBtn.addEventListener('click', processPDF);
+    downloadBtn.addEventListener('click', downloadPDF);
+    async function handleFileSelect(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+        previewContainer.classList.remove('hidden');
+        preview.innerHTML = '<p class="text-gray-500 text-center">Loading preview...</p>';
+        try {
+            const arrayBuffer = await file.arrayBuffer();
+            const pdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
+            const firstPage = pdfDoc.getPages()[0];
+            // Create a simple preview
+            const { width, height } = firstPage.getSize();
+            preview.innerHTML = `
+                <div class="text-center">
+                    <p class="text-gray-700 mb-2"><strong>Original PDF Info</strong></p>
+                    <p class="text-gray-600">Pages: ${pdfDoc.getPageCount()}</p>
+                    <p class="text-gray-600">Dimensions: ${width.toFixed(0)} × ${height.toFixed(0)}</p>
+                    <p class="text-gray-600">Orientation: ${width > height ? 'Landscape' : 'Portrait'}</p>
+                </div>
+            `;
+        } catch (error) {
+            preview.innerHTML = '<p class="text-red-500 text-center">Error loading PDF. Please try another file.</p>';
+            console.error('Error loading PDF:', error);
+        }
+    }
+    async function processPDF() {
+        const file = pdfInput.files[0];
+        if (!file) {
+            alert('Please select a PDF file first');
+            return;
+        }
+        processBtn.disabled = true;
+        processBtn.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Processing...';
+        feather.replace();
+        try {
+            const arrayBuffer = await file.arrayBuffer();
+            const originalPdfDoc = await PDFLib.PDFDocument.load(arrayBuffer);
+            const newPdfDoc = await PDFLib.PDFDocument.create();
+            const originalPages = originalPdfDoc.getPages();
+            const pageCount = originalPages.length;
+            const reverseOrder = reverseOrderCheckbox.checked;
+            const addPageNumbers = addPageNumbersCheckbox.checked;
+            // Process pages in pairs
+            for (let i = 0; i < pageCount; i += 2) {
+                const page1Index = reverseOrder ? pageCount - 1 - i : i;
+                const page2Index = reverseOrder ? pageCount - 2 - i : i + 1;
+                const page1 = originalPages[page1Index];
+                const page2 = page2Index < pageCount ? originalPages[page2Index] : null;
+                // Create a new landscape page (double width)
+                const { width: pw, height: ph } = page1.getSize();
+                const newPage = newPdfDoc.addPage([pw * 2, ph]);
+                // Embed the first page
+                const embeddedPage1 = await newPdfDoc.embedPage(page1);
+                newPage.drawPage(embeddedPage1, {
+                    x: 0,
+                    y: 0,
+                    width: pw,
+                    height: ph,
+                });
+                // Embed the second page if it exists
+                if (page2) {
+                    const embeddedPage2 = await newPdfDoc.embedPage(page2);
+                    newPage.drawPage(embeddedPage2, {
+                        x: pw,
+                        y: 0,
+                        width: pw,
+                        height: ph,
+                    });
+                }
+                // Add page numbers if enabled
+                if (addPageNumbers) {
+                    const pageNumText = `Page ${page1Index + 1}${page2 ? `-${page2Index + 1}` : ''}`;
+                    newPage.drawText(pageNumText, {
+                        x: 10,
+                        y: 10,
+                        size: 12,
+                        color: PDFLib.rgb(0.5, 0.5, 0.5),
+                    });
+                }
+            }
+            // Save the processed PDF
+            processedPdfBytes = await newPdfDoc.save();
+            // Update UI
+            preview.innerHTML = `
+                <div class="text-center">
+                    <p class="text-green-600 mb-2"><strong>Processing Complete!</strong></p>
+                    <p class="text-gray-700">Original pages: ${pageCount}</p>
+                    <p class="text-gray-700">New pages: ${Math.ceil(pageCount / 2)}</p>
+                </div>
+            `;
+            downloadContainer.classList.remove('hidden');
+        } catch (error) {
+            console.error('Error processing PDF:', error);
+            preview.innerHTML = '<p class="text-red-500 text-center">Error processing PDF. Please try again.</p>';
+        } finally {
+            processBtn.disabled = false;
+            processBtn.innerHTML = '<i data-feather="repeat" class="mr-2"></i> Process PDF';
+            feather.replace();
+        }
+    }
+    function downloadPDF() {
+        if (!processedPdfBytes) return;
+        const fileName = pdfInput.files[0].name.replace('.pdf', '') + '_processed.pdf';
+        download(processedPdfBytes, fileName, 'application/pdf');
+    }
+});

style.css CHANGED Viewed

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

+/* Custom styles that can't be done with Tailwind */
+#pdf-input:hover + label {
+    border-color: #818cf8;
 }
+#process-btn:disabled {
+    background-color: #cbd5e1;
+    cursor: not-allowed;
 }
+#download-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
+/* Animation for processing */
+@keyframes spin {
+    to { transform: rotate(360deg); }
 }
+.animate-spin {
+    animation: spin 1s linear infinite;
+}