Skip to content

feat: Museum PDF Tool - 100% client-side WebAssembly version #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devonurefe wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Museum PDF Tool - 100% client-side WebAssembly version #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions wasm_dist/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/* style.css */
button[type="submit"] {
width: 100%; /* Tam genişlik */
background-color: #4a90e2; /* Modern mavi renk */
transition: background-color 0.3s ease, transform 0.3s ease; /* Geçiş efektleri */
}

button[type="submit"]:hover {
background-color: #357ab8; /* Hover rengi */
transform: scale(1.02); /* Hover'da büyütme efekti */
}

button[type="submit"].processing {
background-color: #000000; /* İşlem sırasında arka plan rengi */
}

.progress-bar {
height: 6px; /* Çubuğun yüksekliği */
background-color: #38a169; /* Modern yeşil renk */
transition: width 0.3s ease-in-out; /* Geçiş efekti */
}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #f3f4f6;
text-align: center;
padding: 10px 0;
z-index: 1000;
border-top: 1px solid #e5e7eb;
}

/* Animatie */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

.processing {
animation: pulse 2s infinite;
}

@media (max-width: 640px) { /* Mobil uyumlu stil */
button[type="submit"] {
padding: 12px; /* Mobilde buton içi boşluğu artır */
}
}
292 changes: 292 additions & 0 deletions wasm_dist/guide.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Museum PDF Tool — User Guide</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}

.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #4f46e5, #3b82f6);
color: white;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}

.info-box {
background: #eff6ff;
border-left: 4px solid #3b82f6;
}

.warn-box {
background: #fffbeb;
border-left: 4px solid #f59e0b;
}

.success-box {
background: #ecfdf5;
border-left: 4px solid #10b981;
}
</style>
</head>

<body class="bg-gray-50 text-gray-800">

<div class="max-w-3xl mx-auto py-12 px-6">

<!-- Header -->
<div class="text-center mb-12">
<h1 class="text-4xl font-extrabold text-gray-900 mb-2">Museum PDF Tool</h1>
<p class="text-lg text-gray-500">User Guide v2.0</p>
<div
class="mt-4 inline-flex items-center px-4 py-2 rounded-full bg-green-100 text-green-800 text-sm font-medium">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
100% Offline &amp; Secure — No server processing
</div>
</div>

<!-- What is this tool -->
<section class="mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">What is Museum PDF Tool?</h2>
<p class="text-gray-600 leading-relaxed">
Museum PDF Tool is a browser-based application designed for museum staff to process monthly magazine
PDFs.
It can <strong>split</strong> PDFs into individual articles, <strong>remove</strong> advertisement
pages,
<strong>merge</strong> article blocks, <strong>extract text</strong> (OCR), and generate
<strong>thumbnail images</strong> — all packaged into a downloadable ZIP file.
</p>
<div class="info-box p-4 rounded-r-lg mt-4">
<strong>Key Advantage:</strong> All processing happens entirely within your browser.
Your PDF files are <em>never</em> uploaded to any server. The tool works even without an internet
connection after the first visit.
</div>
</section>

<!-- Getting Started -->
<section class="mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Getting Started</h2>

<div class="space-y-6">
<div class="flex items-start gap-4">
<span class="step-number">1</span>
<div>
<h3 class="font-semibold text-gray-900">Open the Tool</h3>
<p class="text-gray-600 text-sm">Open your web browser (Chrome, Edge, Firefox, or Safari) and
navigate to the Museum PDF Tool URL provided by your organization.</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="step-number">2</span>
<div>
<h3 class="font-semibold text-gray-900">Select Your PDF</h3>
<p class="text-gray-600 text-sm">Click <strong>"Choose File"</strong> and select the magazine
PDF you want to process. The tool will immediately display the total number of pages.</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="step-number">3</span>
<div>
<h3 class="font-semibold text-gray-900">Fill in Year &amp; Issue Number</h3>
<p class="text-gray-600 text-sm">Enter the publication year (e.g. <code>2024</code>) and issue
number (e.g. <code>05</code>). These are used to generate output filenames.</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="step-number">4</span>
<div>
<h3 class="font-semibold text-gray-900">Define Page Ranges (Articles)</h3>
<p class="text-gray-600 text-sm">
In the <strong>"Page Ranges to Process"</strong> field, specify which pages belong to each
article. Use commas to separate articles and dashes for page ranges.
</p>
<div class="bg-gray-100 rounded-lg p-3 mt-2 text-sm font-mono">
Example: <strong>1-3,4-6,7,8-10</strong><br>
→ Article 1: pages 1–3 | Article 2: pages 4–6 | Article 3: page 7 | Article 4: pages 8–10
</div>
<p class="text-gray-500 text-xs mt-1">Leave empty to process the entire PDF as one block.</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="step-number">5</span>
<div>
<h3 class="font-semibold text-gray-900">Exclude Pages (Remove Ads)</h3>
<p class="text-gray-600 text-sm">
In the <strong>"Exclude Pages"</strong> field, list the page numbers of advertisement or
unwanted pages. These will be permanently removed from the output.
</p>
<div class="bg-gray-100 rounded-lg p-3 mt-2 text-sm font-mono">
Example: <strong>5,10,12</strong> → Pages 5, 10, and 12 will be excluded from all outputs.
</div>
</div>
</div>

<div class="flex items-start gap-4">
<span class="step-number">6</span>
<div>
<h3 class="font-semibold text-gray-900">Merge Blocks (Optional)</h3>
<p class="text-gray-600 text-sm">
If two articles should be combined into one, enter their block numbers in <strong>"Merge
Blocks"</strong>.
</p>
<div class="bg-gray-100 rounded-lg p-3 mt-2 text-sm font-mono">
Example: <strong>1,3</strong> → Merges Article Block 1 and Article Block 3 into a single
PDF.
</div>
</div>
</div>

<div class="flex items-start gap-4">
<span class="step-number">7</span>
<div>
<h3 class="font-semibold text-gray-900">Click "Process PDF"</h3>
<p class="text-gray-600 text-sm">
Press the blue <strong>Process PDF</strong> button. A terminal log will appear showing
real-time progress. When complete, a notification sound plays and a download button appears.
</p>
</div>
</div>

<div class="flex items-start gap-4">
<span class="step-number">8</span>
<div>
<h3 class="font-semibold text-gray-900">Download Your Output</h3>
<p class="text-gray-600 text-sm">Click the <strong>Download</strong> button. A ZIP file will be
saved to your computer with the following folder structure:</p>
<div class="bg-gray-100 rounded-lg p-3 mt-2 text-sm font-mono">
output202405.zip/<br>
├── pdf/ → Split article PDFs<br>
├── ocr/ → Extracted text (.txt) files<br>
├── small/ → Small thumbnail images (500×700)<br>
└── large/ → Large cover images (1024×1280)
</div>
</div>
</div>
</div>
</section>

<!-- Install as Desktop App -->
<section class="mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">📱 Install as Desktop App (Recommended)</h2>
<p class="text-gray-600 leading-relaxed mb-4">
You can install Museum PDF Tool as a standalone desktop application. This gives you a dedicated app
window (without browser tabs) and <strong>guarantees offline access forever</strong>.
</p>

<div class="success-box p-4 rounded-r-lg mb-4">
<strong>After installing, you can use the tool even without any internet connection — just like a native
desktop program.</strong>
</div>

<h3 class="font-semibold text-gray-900 mb-2">Chrome / Edge:</h3>
<ol class="list-decimal list-inside text-gray-600 text-sm space-y-2 ml-2 mb-4">
<li>Open the Museum PDF Tool in your browser.</li>
<li>Look for the <strong>install icon</strong> (⊕ or a small monitor icon) in the right side of the
address bar.</li>
<li>Click it and select <strong>"Install"</strong>.</li>
<li>The app will appear on your desktop and in your Start Menu / Applications folder.</li>
<li>Open it anytime — it works without internet!</li>
</ol>

<h3 class="font-semibold text-gray-900 mb-2">Firefox / Safari:</h3>
<p class="text-gray-600 text-sm">
These browsers do not support PWA app installation, but you can still use the tool normally in the
browser tab. It will still work offline after the first visit as long as you don't clear your browser
cache.
</p>
</section>

<!-- Offline Usage -->
<section class="mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">🔌 Offline Usage</h2>
<div class="info-box p-4 rounded-r-lg">
<p class="text-sm text-gray-700">
After visiting the tool once, all required libraries are cached in your browser. You can then:
</p>
<ul class="list-disc list-inside text-sm text-gray-700 mt-2 space-y-1">
<li>Disconnect from the internet</li>
<li>Open the tool URL (or the installed desktop app)</li>
<li>Process PDFs of <em>any size</em> — entirely on your own computer</li>
<li>Download results directly to your machine</li>
</ul>
</div>
<div class="warn-box p-4 rounded-r-lg mt-4">
<strong>⚠️ Note:</strong> If you manually clear all browser data ("Clear cache and cookies"), the
offline files will be removed. Simply revisit the URL once with internet to restore offline capability.
</div>
</section>

<!-- Supported Browsers -->
<section class="mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">🌐 Supported Browsers</h2>
<div class="grid grid-cols-2 gap-3 text-sm">
<div class="bg-white p-3 rounded-lg border border-gray-200 flex items-center gap-2">✅ Google Chrome
</div>
<div class="bg-white p-3 rounded-lg border border-gray-200 flex items-center gap-2">✅ Microsoft Edge
</div>
<div class="bg-white p-3 rounded-lg border border-gray-200 flex items-center gap-2">✅ Mozilla Firefox
</div>
<div class="bg-white p-3 rounded-lg border border-gray-200 flex items-center gap-2">✅ Safari (macOS/iOS)
</div>
<div class="bg-white p-3 rounded-lg border border-gray-200 flex items-center gap-2">✅ Opera / Brave
</div>
<div class="bg-white p-3 rounded-lg border border-gray-200 flex items-center gap-2">✅ Samsung Internet
</div>
</div>
</section>

<!-- FAQ -->
<section class="mb-10">
<h2 class="text-2xl font-bold text-gray-900 mb-4">❓ FAQ</h2>
<div class="space-y-4">
<details class="bg-white rounded-lg border border-gray-200 p-4 cursor-pointer">
<summary class="font-semibold text-gray-900">Is my PDF data safe?</summary>
<p class="text-gray-600 text-sm mt-2">Yes. Your files never leave your computer. All processing is
done locally in your browser's memory. No data is sent to any server.</p>
</details>
<details class="bg-white rounded-lg border border-gray-200 p-4 cursor-pointer">
<summary class="font-semibold text-gray-900">Is there a file size limit?</summary>
<p class="text-gray-600 text-sm mt-2">There is no server-imposed limit. The only limit is your
computer's available RAM. Most modern computers can handle PDFs up to 500MB+ without issues.</p>
</details>
<details class="bg-white rounded-lg border border-gray-200 p-4 cursor-pointer">
<summary class="font-semibold text-gray-900">Do I need to install any software?</summary>
<p class="text-gray-600 text-sm mt-2">No. You only need a modern web browser. No Python, Tesseract,
or any other software is required.</p>
</details>
<details class="bg-white rounded-lg border border-gray-200 p-4 cursor-pointer">
<summary class="font-semibold text-gray-900">Can I use this on multiple computers?</summary>
<p class="text-gray-600 text-sm mt-2">Yes. Simply open the URL on each computer once. The tool will
cache itself automatically for offline use on every device.</p>
</details>
</div>
</section>

<!-- Footer -->
<footer class="text-center text-gray-400 text-xs pt-8 border-t border-gray-200">
<p>Museum PDF Tool v2.0 — Powered by <strong>h2O</strong></p>
</footer>

</div>
</body>

</html>
Binary file added wasm_dist/icons/icon-192.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added wasm_dist/icons/icon-512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading