-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (90 loc) · 4.78 KB
/
index.html
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
99
100
101
<!--
This HTML file represents the user interface for an Image OCR (Optical Character Recognition) tool.
It allows users to select multiple languages for OCR, upload images or drag and drop them, and process the images to extract text.
The extracted text is displayed in a table along with the corresponding file names.
The tool utilizes various libraries and plugins such as Tesseract.js, jQuery, DataTables, and FileSaver.js.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The meta tags and title for the HTML document -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCR Tool</title>
<!-- CSS stylesheets -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container py-5">
<!-- Heading for the OCR tool -->
<h1 class="mb-3">Image OCR Tool</h1>
<!-- Language selection section -->
<div class="mb-3">
<label class="form-label">Select Languages:</label>
<p class="text-muted">You may choose multiple languages, but the accuracy might decrease</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="eng" checked id="english">
<label class="form-check-label" for="english">English</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="chi_tra" id="traditional-chinese">
<label class="form-check-label" for="traditional-chinese">Traditional Chinese</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="chi_sim" id="simplified-chinese">
<label class="form-check-label" for="simplified-chinese">Simplified Chinese</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="jpn" id="japanese">
<label class="form-check-label" for="japanese">Japanese</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="kor" id="korean">
<label class="form-check-label" for="korean">Korean</label>
</div>
</div>
<!-- Image upload section -->
<div class="mb-3">
<label class="form-label">Upload Images or Drag and Drop:</label>
<div id="drop-area" class="border border-dashed p-5 text-center">
<p>Drag and drop files here</p>
<p>or</p>
<input type="file" id="image-input" class="form-control" multiple>
</div>
</div>
<!-- File list, process button, and status section -->
<div id="file-list" class="mb-3"></div>
<button id="process-images" class="btn btn-primary mb-3">Process Images</button>
<div id="file-status" class="mb-1">No file currently being processed</div>
<!-- Progress bar section -->
<div class="progress mb-3">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<!-- Results table section -->
<table id="results-table" class="table table-striped">
<thead>
<tr>
<th>File Name</th>
<th>Extracted Text</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- JavaScript libraries and scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/2.1.1/tesseract.min.js"
integrity="sha512-8AxQNImzeNj1VFSIPK9gYz9j/MzIfiHHRWtgdYLr1d+RNwczo+2CPoU5cxdUIt7A3HON6E7/9Y8mlWGeT6L+4g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script src="script.js"></script>
</body>
</html>