Hugging Face's logo

Spaces:
Gagandeep12
/
extopen-src
Sleeping

App Files Community
Gagandeep12 commited on
Commit
a4b4e95
·
verified ·
1 Parent(s): 6fe93b3

Delete templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +0 -190
templates/index.html DELETED
@@ -1,190 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Text Extraction Tool</title>
6
- <style>
7
- body {
8
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
- padding: 40px;
10
- background-color: #eef2f5;
11
- color: #2c3e50;
12
- max-width: 800px;
13
- margin: auto;
14
- }
15
-
16
- h1 {
17
- text-align: center;
18
- color: #34495e;
19
- margin-bottom: 30px;
20
- }
21
-
22
- #upload-section {
23
- background-color: #ffffff;
24
- padding: 30px;
25
- border-radius: 12px;
26
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
27
- text-align: center;
28
- }
29
-
30
- #fileInput,
31
- #ocrMethod {
32
- display: block;
33
- margin: 15px auto;
34
- padding: 10px 12px;
35
- font-size: 16px;
36
- border: 1px solid #ccc;
37
- border-radius: 8px;
38
- width: 70%;
39
- box-sizing: border-box;
40
- background-color: #fafafa;
41
- }
42
-
43
- label[for="ocrMethod"] {
44
- font-weight: 600;
45
- display: block;
46
- margin-top: 10px;
47
- color: #555;
48
- }
49
-
50
- button {
51
- margin-top: 20px;
52
- padding: 12px 28px;
53
- font-size: 16px;
54
- background-color: #3498db;
55
- color: white;
56
- border: none;
57
- border-radius: 8px;
58
- cursor: pointer;
59
- transition: background-color 0.3s ease;
60
- }
61
-
62
- button:hover {
63
- background-color: #2c80b4;
64
- }
65
-
66
- #upload-status {
67
- margin-top: 15px;
68
- font-style: italic;
69
- color: #7f8c8d;
70
- }
71
-
72
- #output-section {
73
- margin-top: 40px;
74
- background-color: #ffffff;
75
- padding: 25px;
76
- border-radius: 12px;
77
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
78
- }
79
-
80
- #output-section h2 {
81
- color: #2c3e50;
82
- margin-bottom: 15px;
83
- text-align: center;
84
- }
85
-
86
- pre {
87
- background-color: #f5f7f9;
88
- padding: 20px;
89
- border-radius: 8px;
90
- font-family: 'Courier New', Courier, monospace;
91
- white-space: pre-wrap;
92
- word-wrap: break-word;
93
- border: 1px solid #dcdde1;
94
- max-height: 400px;
95
- overflow-y: auto;
96
- }
97
-
98
- /* Loader bar styling */
99
- #loader {
100
- width: 100%;
101
- height: 8px;
102
- background: #d0dbe5;
103
- margin-top: 20px;
104
- border-radius: 10px;
105
- overflow: hidden;
106
- display: none;
107
- }
108
-
109
- #loader .bar {
110
- width: 0%;
111
- height: 100%;
112
- background: #3498db;
113
- animation: loading 2s infinite linear;
114
- }
115
-
116
- @keyframes loading {
117
- 0% { width: 0%; }
118
- 50% { width: 80%; }
119
- 100% { width: 0%; }
120
- }
121
- </style>
122
- </head>
123
- <body>
124
- <h1>PDF and Image Text Extractor</h1>
125
-
126
- <div id="upload-section">
127
- <input type="file" id="fileInput" accept=".pdf,.png,.jpg,.jpeg">
128
-
129
- <label for="ocrMethod">Choose OCR Method:</label>
130
- <select id="ocrMethod">
131
- <option value="tesseract">Tesseract (for printed text)</option>
132
- <option value="easyocr">EasyOCR (for handwriting)</option>
133
- </select>
134
-
135
- <button onclick="uploadFile()">Extract Text</button>
136
- <div id="loader"><div class="bar"></div></div>
137
- <p id="upload-status"></p>
138
- </div>
139
-
140
- <div id="output-section">
141
- <h2>Extracted Text:</h2>
142
- <pre id="extractedText"></pre>
143
- </div>
144
-
145
- <script>
146
- async function uploadFile() {
147
- const fileInput = document.getElementById('fileInput');
148
- const method = document.getElementById('ocrMethod').value;
149
- const status = document.getElementById('upload-status');
150
- const output = document.getElementById('extractedText');
151
- const loader = document.getElementById('loader');
152
-
153
- if (!fileInput.files[0]) {
154
- status.innerText = "Please select a file.";
155
- return;
156
- }
157
-
158
- const formData = new FormData();
159
- formData.append("file", fileInput.files[0]);
160
- formData.append("method", method);
161
-
162
- status.innerText = "Extracting text...";
163
- output.innerText = "";
164
- loader.style.display = "block";
165
-
166
- try {
167
- const response = await fetch("/extract", {
168
- method: "POST",
169
- body: formData,
170
- });
171
-
172
- const result = await response.json();
173
- loader.style.display = "none";
174
-
175
- if (result.text) {
176
- output.innerText = result.text;
177
- status.innerText = "Extraction successful!";
178
- } else {
179
- output.innerText = "";
180
- status.innerText = "Error: " + result.error;
181
- }
182
- } catch (error) {
183
- loader.style.display = "none";
184
- status.innerText = "Error occurred.";
185
- output.innerText = error.message;
186
- }
187
- }
188
- </script>
189
- </body>
190
- </html>