Hugging Face's logo

Spaces:
The-Ultimate-RAG-HF
/
test
Sleeping

App Files Community
test
File size: 3,820 Bytes 
e53c2d7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
{% extends "base.html" %}

{% block title %}
    <title>PDF Viewer</title>
{% endblock %}

{% block head_scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
{% endblock %}

{% block content %}
    <div class="pagination-container">
        <div class="pagination">
            <button id="prev" class="pagination-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
                </svg>
                Previous
            </button>
            
            <div class="page-input-container">
                <input type="number" id="pageNum" value="{{ page }}" class="page-input" style="padding-right: 30px;">
                <span class="page-input-label">of {{ total_pages }}</span>
            </div>
            
            <button id="next" class="pagination-button">
                Next
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                </svg>
            </button>
        </div>
    </div>
    
    <div id="pdf-container">
        <canvas id="pdf-canvas"></canvas>
    </div>
{% endblock %}

{% block body_scripts %}
    <script>
        pdfjsLib = window['pdfjs-dist/build/pdf'];
        pdfjsLib.GlobalWorkerOptions.workerSrc = 
            'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
        
        let pdfDoc = null;
        let currentPage = {{ page }};
        const urlPath = "{{ url_path }}";
        
        pdfjsLib.getDocument(urlPath).promise.then(function(pdf) {
            pdfDoc = pdf;
            document.getElementById('pageNum').max = pdf.numPages;
            document.querySelector('.page-input-label').textContent = `of ${pdf.numPages}`;
            renderPage(currentPage);
        });
        
        function renderPage(num) {
            pdfDoc.getPage(num).then(function(page) {
                const scale = 1.5;
                const viewport = page.getViewport({ scale });
                const canvas = document.getElementById('pdf-canvas');
                const ctx = canvas.getContext('2d');
                
                // Set canvas dimensions
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                
                // Render PDF page
                page.render({
                    canvasContext: ctx,
                    viewport: viewport
                });
            });
        }
        
        // Navigation controls
        document.getElementById('prev').addEventListener('click', function() {
            if (currentPage <= 1) return;
            currentPage--;
            document.getElementById('pageNum').value = currentPage;
            renderPage(currentPage);
        });
        
        document.getElementById('next').addEventListener('click', function() {
            if (currentPage >= pdfDoc.numPages) return;
            currentPage++;
            document.getElementById('pageNum').value = currentPage;
            renderPage(currentPage);
        });
        
        document.getElementById('pageNum').addEventListener('change', function() {
            const newPage = Math.min(Math.max(1, parseInt(this.value)), pdfDoc.numPages);
            currentPage = newPage;
            this.value = currentPage;
            renderPage(currentPage);
        });
    </script>
{% endblock %}