Spaces:

VolariGlobal
/

volaris-pdf-tool

Running

App Files Files Community

saifisvibin commited on Nov 20, 2025

Commit

e963d81

verified ·

1 Parent(s): 5ad1ee4

Delete example_client.html

Browse files

Files changed (1) hide show

example_client.html +0 -447

example_client.html DELETED Viewed

@@ -1,447 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PDF Extractor API - Client Example</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
-            padding: 30px;
-        }
-        h1 {
-            color: #333;
-            margin-bottom: 10px;
-        }
-        .subtitle {
-            color: #666;
-            margin-bottom: 30px;
-        }
-        .upload-section {
-            border: 2px dashed #667eea;
-            border-radius: 8px;
-            padding: 40px;
-            text-align: center;
-            margin-bottom: 30px;
-            background: #f8f9ff;
-        }
-        .file-input-wrapper {
-            position: relative;
-            display: inline-block;
-        }
-        input[type="file"] {
-            display: none;
-        }
-        .file-label {
-            display: inline-block;
-            padding: 12px 24px;
-            background: #667eea;
-            color: white;
-            border-radius: 6px;
-            cursor: pointer;
-            font-weight: 500;
-            transition: background 0.3s;
-        }
-        .file-label:hover {
-            background: #5568d3;
-        }
-        .selected-file {
-            margin-top: 15px;
-            color: #333;
-            font-weight: 500;
-        }
-        .mode-selection {
-            display: flex;
-            gap: 10px;
-            justify-content: center;
-            margin: 20px 0;
-        }
-        .mode-btn {
-            padding: 10px 20px;
-            border: 2px solid #667eea;
-            background: white;
-            color: #667eea;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-        .mode-btn.active {
-            background: #667eea;
-            color: white;
-        }
-        .submit-btn {
-            padding: 12px 30px;
-            background: #667eea;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: background 0.3s;
-            margin-top: 20px;
-        }
-        .submit-btn:hover:not(:disabled) {
-            background: #5568d3;
-        }
-        .submit-btn:disabled {
-            background: #ccc;
-            cursor: not-allowed;
-        }
-        .progress-section {
-            display: none;
-            margin: 30px 0;
-        }
-        .progress-bar-container {
-            background: #e0e0e0;
-            border-radius: 10px;
-            height: 30px;
-            overflow: hidden;
-            margin: 10px 0;
-        }
-        .progress-bar {
-            background: linear-gradient(90deg, #667eea, #764ba2);
-            height: 100%;
-            width: 0%;
-            transition: width 0.3s;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-weight: 600;
-            font-size: 14px;
-        }
-        .status-message {
-            text-align: center;
-            color: #666;
-            margin-top: 10px;
-        }
-        .results-section {
-            display: none;
-            margin-top: 30px;
-        }
-        .result-card {
-            background: #f8f9ff;
-            border-radius: 8px;
-            padding: 20px;
-            margin: 15px 0;
-        }
-        .result-card h3 {
-            color: #667eea;
-            margin-bottom: 15px;
-        }
-        .summary-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 15px;
-            margin: 20px 0;
-        }
-        .summary-item {
-            background: white;
-            padding: 15px;
-            border-radius: 6px;
-            text-align: center;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .summary-value {
-            font-size: 24px;
-            font-weight: 700;
-            color: #667eea;
-        }
-        .summary-label {
-            color: #666;
-            font-size: 14px;
-            margin-top: 5px;
-        }
-        .text-preview {
-            background: white;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            padding: 15px;
-            max-height: 300px;
-            overflow-y: auto;
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
-            white-space: pre-wrap;
-        }
-        .images-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 15px;
-            margin: 20px 0;
-        }
-        .image-item {
-            background: white;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            overflow: hidden;
-        }
-        .image-item img {
-            width: 100%;
-            height: auto;
-            display: block;
-        }
-        .image-caption {
-            padding: 10px;
-            font-size: 12px;
-            color: #666;
-        }
-        .error {
-            background: #fee;
-            color: #c33;
-            padding: 15px;
-            border-radius: 6px;
-            margin: 20px 0;
-            border-left: 4px solid #c33;
-        }
-        .api-info {
-            background: #e8f4f8;
-            border-left: 4px solid #2196F3;
-            padding: 15px;
-            border-radius: 6px;
-            margin-bottom: 20px;
-        }
-        .api-info code {
-            background: white;
-            padding: 2px 6px;
-            border-radius: 3px;
-            font-size: 13px;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>📄 PDF Layout Extractor - API Client</h1>
-        <p class="subtitle">Upload a PDF and extract text, tables, and figures using the REST API</p>
-        <div class="api-info">
-            <strong>API Endpoint:</strong> <code>https://saifisvibin-volaris-pdf-tool.hf.space/api/predict</code><br>
-            <strong>Method:</strong> <code>POST</code> | <strong>Content-Type:</strong> <code>multipart/form-data</code>
-        </div>
-        <div class="upload-section">
-            <h2>Upload PDF File</h2>
-            <div class="file-input-wrapper">
-                <input type="file" id="fileInput" accept=".pdf" />
-                <label for="fileInput" class="file-label">Choose PDF File</label>
-            </div>
-            <div class="selected-file" id="selectedFile"></div>
-            <div class="mode-selection">
-                <button class="mode-btn active" data-mode="both">Both (Images + Markdown)</button>
-                <button class="mode-btn" data-mode="images">Images Only</button>
-                <button class="mode-btn" data-mode="markdown">Markdown Only</button>
-            </div>
-            <button class="submit-btn" id="submitBtn" onclick="processPDF()">Process PDF</button>
-        </div>
-        <div class="progress-section" id="progressSection">
-            <h3>Processing...</h3>
-            <div class="progress-bar-container">
-                <div class="progress-bar" id="progressBar">0%</div>
-            </div>
-            <div class="status-message" id="statusMessage">Starting...</div>
-        </div>
-        <div class="error" id="errorMessage" style="display: none;"></div>
-        <div class="results-section" id="resultsSection">
-            <h2>Extraction Results</h2>
-            <div class="summary-grid" id="summaryGrid"></div>
-            <div class="result-card">
-                <h3>📝 Extracted Text</h3>
-                <div class="text-preview" id="textPreview"></div>
-            </div>
-            <div class="result-card" id="figuresCard" style="display: none;">
-                <h3>🖼️ Figures (<span id="figuresCount">0</span>)</h3>
-                <div class="images-grid" id="figuresGrid"></div>
-            </div>
-            <div class="result-card" id="tablesCard" style="display: none;">
-                <h3>📊 Tables (<span id="tablesCount">0</span>)</h3>
-                <div class="images-grid" id="tablesGrid"></div>
-            </div>
-        </div>
-    </div>
-    <script>
-        const API_URL = 'https://saifisvibin-volaris-pdf-tool.hf.space/api/predict';
-        let selectedMode = 'both';
-        // File input handler
-        document.getElementById('fileInput').addEventListener('change', function(e) {
-            const file = e.target.files[0];
-            if (file) {
-                document.getElementById('selectedFile').textContent = `Selected: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
-            }
-        });
-        // Mode selection
-        document.querySelectorAll('.mode-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
-                this.classList.add('active');
-                selectedMode = this.dataset.mode;
-            });
-        });
-        async function processPDF() {
-            const fileInput = document.getElementById('fileInput');
-            const file = fileInput.files[0];
-            if (!file) {
-                showError('Please select a PDF file');
-                return;
-            }
-            // Reset UI
-            document.getElementById('errorMessage').style.display = 'none';
-            document.getElementById('resultsSection').style.display = 'none';
-            document.getElementById('progressSection').style.display = 'block';
-            document.getElementById('progressBar').style.width = '0%';
-            document.getElementById('progressBar').textContent = '0%';
-            document.getElementById('statusMessage').textContent = 'Uploading and processing...';
-            document.getElementById('submitBtn').disabled = true;
-            try {
-                const formData = new FormData();
-                formData.append('file', file);
-                const response = await fetch(API_URL, {
-                    method: 'POST',
-                    body: formData
-                });
-                if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({ error: response.statusText }));
-                    throw new Error(errorData.error || `HTTP ${response.status}: ${response.statusText}`);
-                }
-                const result = await response.json();
-                if (result.status === 'error') {
-                    throw new Error(result.error);
-                }
-                // Update progress to 100%
-                document.getElementById('progressBar').style.width = '100%';
-                document.getElementById('progressBar').textContent = '100%';
-                document.getElementById('statusMessage').textContent = 'Processing complete!';
-                // Display results
-                displayResults(result);
-            } catch (error) {
-                console.error('Error:', error);
-                showError(error.message || 'An error occurred while processing the PDF');
-                document.getElementById('progressSection').style.display = 'none';
-            } finally {
-                document.getElementById('submitBtn').disabled = false;
-            }
-        }
-        function displayResults(result) {
-            // Hide progress, show results
-            document.getElementById('progressSection').style.display = 'none';
-            document.getElementById('resultsSection').style.display = 'block';
-            // Summary
-            const summary = result.summary || {};
-            document.getElementById('summaryGrid').innerHTML = `
-                <div class="summary-item">
-                    <div class="summary-value">${summary.total_pages || 0}</div>
-                    <div class="summary-label">Total Pages</div>
-                </div>
-                <div class="summary-item">
-                    <div class="summary-value">${summary.figures_count || 0}</div>
-                    <div class="summary-label">Figures</div>
-                </div>
-                <div class="summary-item">
-                    <div class="summary-value">${summary.tables_count || 0}</div>
-                    <div class="summary-label">Tables</div>
-                </div>
-                <div class="summary-item">
-                    <div class="summary-value">${summary.elements_count || 0}</div>
-                    <div class="summary-label">Total Elements</div>
-                </div>
-            `;
-            // Text
-            const textPreview = document.getElementById('textPreview');
-            if (result.text && result.text.trim()) {
-                textPreview.textContent = result.text;
-            } else {
-                textPreview.textContent = 'No text extracted.';
-            }
-            // Figures
-            const figuresCard = document.getElementById('figuresCard');
-            const figuresGrid = document.getElementById('figuresGrid');
-            const figuresCount = document.getElementById('figuresCount');
-            if (result.figures && result.figures.length > 0) {
-                figuresCard.style.display = 'block';
-                figuresCount.textContent = result.figures.length;
-                figuresGrid.innerHTML = result.figures.map((fig, idx) => `
-                    <div class="image-item">
-                        <img src="${fig.image_base64 || ''}" alt="Figure ${idx + 1}" />
-                        <div class="image-caption">
-                            <strong>Figure ${idx + 1}</strong><br>
-                            Page ${fig.page} | Confidence: ${(fig.confidence * 100).toFixed(1)}%
-                        </div>
-                    </div>
-                `).join('');
-            } else {
-                figuresCard.style.display = 'none';
-            }
-            // Tables
-            const tablesCard = document.getElementById('tablesCard');
-            const tablesGrid = document.getElementById('tablesGrid');
-            const tablesCount = document.getElementById('tablesCount');
-            if (result.tables && result.tables.length > 0) {
-                tablesCard.style.display = 'block';
-                tablesCount.textContent = result.tables.length;
-                tablesGrid.innerHTML = result.tables.map((tab, idx) => `
-                    <div class="image-item">
-                        <img src="${tab.image_base64 || ''}" alt="Table ${idx + 1}" />
-                        <div class="image-caption">
-                            <strong>Table ${idx + 1}</strong><br>
-                            Page ${tab.page} | Confidence: ${(tab.confidence * 100).toFixed(1)}%
-                        </div>
-                    </div>
-                `).join('');
-            } else {
-                tablesCard.style.display = 'none';
-            }
-        }
-        function showError(message) {
-            const errorDiv = document.getElementById('errorMessage');
-            errorDiv.textContent = `Error: ${message}`;
-            errorDiv.style.display = 'block';
-        }
-    </script>
-</body>
-</html>