Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add examples related to bbox #878

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+202 −0
Open

Add examples related to bbox #878

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee49b64
add example 1
Kishlay-notabot Jan 26, 2024
b2c6750
add default test file and edit previous file
Kishlay-notabot Jan 26, 2024
78ee24a
edits added
Kishlay-notabot Jan 26, 2024
e83698a
rename photo
Kishlay-notabot Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
edits added
  • Loading branch information
@Kishlay-notabot
Kishlay-notabot committed Jan 26, 2024
commit 78ee24a2da2ee198bb37a7cc59fb48bb1ccb828c
31 changes: 19 additions & 12 deletions examples/browser/bounding_box_examples/basic-bounding-box.html
View file
Open in desktop
Expand Up @@ -21,9 +21,13 @@
<span>This example uses Hindi language, but the function is universal<br>
Check console for various outputs and logger</span>

<p>
<label for="upload">Upload</label>
<input type="file" id="upload" accept="image/*" />
</p>
<div class="box-img" id="boxImg"></div>
<div class="box-p" id="boxText">result text will appear here</div>
<div class="box-p" id="bboxInfo"></div>
<div class="box-p" id="boxText">result text will appear here
</div>

<script>
var boundingBoxData = [];
Expand Down Expand Up @@ -52,21 +56,27 @@
document.getElementById('boxText').innerText = text;
}

function handleChange(e) {
const selectedImg = e.target.files[0];
if (selectedImg) {
displayImage(selectedImg);
performOCR(selectedImg);
}
}

function displayImage(selectedImg) {
const imgBox = document.getElementById('boxImg');
imgBox.innerHTML = '';

const img = document.createElement('img');
img.src = selectedImg.src;
img.src = URL.createObjectURL(selectedImg);
img.alt = 'thumb';
imgBox.appendChild(img);

performOCR(img);
}

function updateBoundingBoxDisplay() {
var boundingBoxInfoElement = document.getElementById('bboxInfo');
boundingBoxInfoElement.innerHTML = 'Bounding Box Data:<br>';
var boundingBoxInfoElement = document.getElementById('boxText');
boundingBoxInfoElement.innerHTML = '';

boundingBoxData.forEach(function(bbox, index) {
var boxInfo = document.createElement('div');
Expand All @@ -75,11 +85,8 @@
});
}

const selectedImg = new Image();
selectedImg.src = 'photo.jpg';

displayImage(selectedImg);
document.getElementById('upload').addEventListener('change', handleChange);
</script>
</div>
</body>
</html>
</html>
60 changes: 47 additions & 13 deletions examples/browser/bounding_box_examples/bbox_with_borders.html
View file
Open in desktop
Expand Up @@ -14,62 +14,96 @@
</head>
<body>
<div class="App">
<span>Hi<br>This example shows the confidence data, words and result with borders around the recognized image</span>
<span>Hi<br>This example shows the confidence data, words and result with borders around the recognized image<br>
Edit css of the canvas if facing alignment/ placement issues</span>
<p>
<label for="upload">Upload</label>
<input type="file" id="upload" accept="image/*" />
</p>
<div class="box-img" id="boxImg"></div>
<div class="box-p" id="boxText">result text will appear here</div>
<br>
<div class="box-p" id="bboxInfo"></div>

<script>
var wordData = [];

function performOCR(selectedImg) {
Tesseract.recognize(
selectedImg,
'hin',
{
logger: (e) => console.log(e),
}
).then((out) => {
console.log(out, 'confidence:', out.data.confidence);
setTextResult(out.data.text);
saveWordData(out.data.words);
renderBoundingBoxes(out.data.words);
}).catch((error) => console.error('Error during OCR:', error));
)
.then((out) => {
console.log(out, 'confidence:', out.data.confidence);
setTextResult(out.data.text);
saveWordData(out.data.words);
renderBoundingBoxes(out.data.words);
})
.catch((error) => console.error('Error during OCR:', error));
}

function setTextResult(text) {
document.getElementById('boxText').innerText = text;
}

function handleChange(e) {
const selectedImg = e.target.files[0];
if (selectedImg) {
displayImage(selectedImg);
performOCR(selectedImg);
}
}

function displayImage(selectedImg) {
const imgBox = document.getElementById('boxImg');
imgBox.innerHTML = '';

const img = document.createElement('img');
img.src = URL.createObjectURL(selectedImg);
img.alt = 'thumb';
imgBox.appendChild(img);
const canvas = document.createElement('canvas');
canvas.id = 'canvas';
imgBox.appendChild(canvas);
}

function saveWordData(words) {
wordData = words;
updateWordDisplay();
}

function updateWordDisplay() {
var wordInfoElement = document.getElementById('bboxInfo');
wordInfoElement.innerHTML = 'Word Data:<br>';

wordData.forEach(function (word, index) {
var wordInfo = document.createElement('div');
wordInfo.innerHTML = `Word ${index + 1}: Text - ${word.text}, Confidence - ${word.confidence}, Bounding Box - x0=${word.bbox.x0}, y0=${word.bbox.y0}, x1=${word.bbox.x1}, y1=${word.bbox.y1}`;
wordInfoElement.appendChild(wordInfo);
});
}

function renderBoundingBoxes(words) {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = document.querySelector('.box-img img');
canvas.width = img.width;
canvas.height = img.height;

words.forEach((word) => {
const { x0, y0, x1, y1 } = word.bbox;
ctx.beginPath();
ctx.rect(x0, y0, x1 - x0, y1 - y0);
ctx.lineWidth = 2;
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.stroke();
});
}
// Fixed image path to 'photo.jpg'
const selectedImg = new Image();
selectedImg.src = 'photo.jpg';
document.getElementById('boxImg').appendChild(selectedImg);
performOCR(selectedImg);

document.getElementById('upload').addEventListener('change', handleChange);
</script>
</div>
</body>
Expand Down