|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>OCR App</title> |
|
|
</head> |
|
|
<body> |
|
|
<h1>OCR App</h1> |
|
|
<form id="ocr-form"> |
|
|
<input type="file" id="image" name="image"> |
|
|
<button type="submit">Submit</button> |
|
|
</form> |
|
|
<div id="result"></div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script> |
|
|
<script> |
|
|
const form = document.getElementById('ocr-form'); |
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
const image = document.getElementById('image').files[0]; |
|
|
const formData = new FormData(); |
|
|
formData.append('image', image); |
|
|
axios.post('/ocr', formData) |
|
|
.then(response => { |
|
|
document.getElementById('result').innerHTML = `OCR result: ${response.data.message}`; |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error(error); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
