<!DOCTYPE html>
<html>
<head>
<title>OCR</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Optic Character Recognition OCR in your webbrowser">
<script src="https://cdn.counter.dev/script.js" data-id="d5378282-a7bf-4de1-b215-693a25f3b961" data-utcoffset="2"></script>
<link rel="icon" type="image/x-icon" href="/images/ocr.jpeg">
<script src="font.js" crossorigin="anonymous"></script>
<script src="pdf.js"></script>
<script src="docx.js"></script>
</head>
<body>
<div class="container">
<div class="left-box">
<label for="fileInput" class="upload-button">
<input type="file" id="fileInput" accept="image/*" capture="camera">
<i class="fa-solid fa-camera"></i>
Take a Picture |
<i class="fa-solid fa-upload"></i> Upload File
</label>
<hr><hr>
<img id="previewImage" alt="Preview Image" class="preview-image">
<pre id="consoleLog" class="console-log"></pre>
<hr><hr>
<button class="upload-button" id="exportPdf">Export to PDF</button>
<button class="upload-button" id="exportDoc">Export to Docx</button>
<button class="upload-button" id="exportTxt">Export to TXT</button>
<button class="upload-button" id="exportCsv">Export to CSV</button>
</div>
<div class="right-box">
<button id="copyButton"><i class="fa fa-clipboard"></i></button>
<pre id="ocrOutput" class="ocr-output"></pre>
</div>
</div>
<script src="tesseract.js"></script>
<script src="script.js"></script>
</body>
</html>