Sensei13k's picture
Create index.html
39e8e37 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FastAPI OCR Uploader</title>
</head>
<body style="font-family: Arial; text-align: center; margin-top: 50px;">
<h1>Upload an Image for OCR πŸ“„</h1>
<form id="uploadForm">
<input type="file" id="fileInput" accept="image/*" required><br><br>
<button type="submit">Upload & Detect Text</button>
</form>
<h2>Result:</h2>
<pre id="resultArea"></pre>
<script>
const form = document.getElementById('uploadForm');
const resultArea = document.getElementById('resultArea');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
const response = await fetch('/predict/', {
method: 'POST',
body: formData
});
const data = await response.json();
resultArea.textContent = JSON.stringify(data.result, null, 2);
});
</script>
</body>
</html>