Hugging Face's logo

Spaces:
artglobal
/
got_ocr_test
Sleeping

App Files Community
acharyaaditya26 commited on
Commit
331dffc
·
verified ·
1 Parent(s): cbc88dd

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +114 -0
templates/index.html ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>API Response Display</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 20px;
11
+ }
12
+ .page {
13
+ margin-bottom: 40px;
14
+ }
15
+ .page-number {
16
+ font-weight: bold;
17
+ margin-bottom: 10px;
18
+ }
19
+ .iframe-container {
20
+ margin-bottom: 20px;
21
+ }
22
+ .download-link {
23
+ display: block;
24
+ margin-top: 10px;
25
+ }
26
+ .loading {
27
+ display: none;
28
+ font-weight: bold;
29
+ color: #333;
30
+ }
31
+ .error {
32
+ display: none;
33
+ color: red;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <h1>API Response Display</h1>
39
+ <div id="content"></div>
40
+ <div id="loading" class="loading">Loading...</div>
41
+ <div id="error" class="error"></div>
42
+ <input type="file" id="fileInput" style="display: none;">
43
+ <button id="uploadButton">Upload File</button>
44
+
45
+ <script>
46
+ document.getElementById('uploadButton').addEventListener('click', () => {
47
+ document.getElementById('fileInput').click();
48
+ });
49
+
50
+ document.getElementById('fileInput').addEventListener('change', async () => {
51
+ const file = document.getElementById('fileInput').files[0];
52
+ if (!file) return;
53
+
54
+ const formData = new FormData();
55
+ formData.append('file', file);
56
+
57
+ document.getElementById('loading').style.display = 'block';
58
+ document.getElementById('error').style.display = 'none';
59
+
60
+ try {
61
+ const response = await fetch('/uploadfile/', {
62
+ method: 'POST',
63
+ body: formData
64
+ });
65
+
66
+ if (!response.ok) {
67
+ throw new Error(`HTTP error! status: ${response.status}`);
68
+ }
69
+
70
+ const data = await response.json();
71
+ renderPages(data);
72
+ } catch (error) {
73
+ console.error('Error fetching API response:', error);
74
+ document.getElementById('error').textContent = 'An error occurred while fetching the data. Please try again.';
75
+ document.getElementById('error').style.display = 'block';
76
+ } finally {
77
+ document.getElementById('loading').style.display = 'none';
78
+ }
79
+ });
80
+
81
+ function renderPages(data) {
82
+ const contentDiv = document.getElementById('content');
83
+ contentDiv.innerHTML = ''; // Clear any existing content
84
+
85
+ data.forEach(page => {
86
+ const pageDiv = document.createElement('div');
87
+ pageDiv.className = 'page';
88
+
89
+ const pageNumberDiv = document.createElement('div');
90
+ pageNumberDiv.className = 'page-number';
91
+ pageNumberDiv.textContent = `Page ${page.page_number}`;
92
+
93
+ const iframeContainer = document.createElement('div');
94
+ iframeContainer.className = 'iframe-container';
95
+
96
+ const iframe = document.createElement('iframe');
97
+ iframe.src = page.html.match(/src="([^"]+)"/)[1];
98
+ iframe.width = '100%';
99
+ iframe.height = '600px';
100
+
101
+ const downloadLink = document.createElement('div');
102
+ downloadLink.className = 'download-link';
103
+ downloadLink.innerHTML = page.download_link;
104
+
105
+ iframeContainer.appendChild(iframe);
106
+ pageDiv.appendChild(pageNumberDiv);
107
+ pageDiv.appendChild(iframeContainer);
108
+ pageDiv.appendChild(downloadLink);
109
+ contentDiv.appendChild(pageDiv);
110
+ });
111
+ }
112
+ </script>
113
+ </body>
114
+ </html>