tesseract.js는 머신러닝 기반의 이미지(동영상) - 텍스트 검출 라이브러리다. 위의 예제파일에서 언어를 선택한 뒤에 이미지 파일을 올려보자. 만일 '한글'을 선택했다면, 이미지에서 한글만 찾아서 텍스트 파일로 반환한다. Tesseract.js 깃허브에는 관련 예제파일이 올려져 있는데(https://github.com/naptha/tesseract.js/tree/master/examples/browser), 한글에 대한 인식도는 80%전후 정확도를 보여줬다. 이미지나 영상에 한글만 있는 경우에는 정확도가 올라가지만, 숫자 혹은 영어 조합일 경우에는 폰트깨짐 현상이 발생했다.
tesseract.js는 CDN, Node.js를 지원한다.
그러나 위의 CDN방식으로 예제를 실행한다면 에러가 발생한다. 그 이유는 corePath, workerPath값의 경로가 다르기 때문이다. 브라우저 예제파일은 로컬 서버의 방식으로 구현되기 때문에 아래 local Installation에서 제시한 경로값과 CDN방식을 조합해야 한다.
tesseract.js를 이용해서 이미지에서 한글 텍스트를 검출하는 가장 간단한 코드는 아래와 같다. 아래 코드를 참고한다면, tesseract.js 깃허브에 올려진 예제파일을 CDN방식으로 구현할 수 있다.
|
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module">
const recognize = async ({ target: { files } }) => {
const { data: { text } } = await Tesseract.recognize(files[0], 'kor', {
logger: m => console.log(m),
});
console.log(text);
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', recognize);
</script>
</head>
<body>
<input type="file" id="uploader">
</body>
</html>
|
[ tesseract.js CDN방식구현 ]
tesseract.js의 사용처는 무궁무진하다. 이미지에서 텍스트를 분석하는 것 뿐만 아니라 영상에서 자막추출과 관련된 반응형 어플도 제작할 수 있다. svg 콘텐츠와 결합했을 때 효과도 기대할 수 있으며, 반대로 텍스트에서 이미지를 조합하는 것도 생각해 볼 수 있다.
'라이브러리 창고 > 인공지능' 카테고리의 다른 글
| 「Dann.js」신경망 구현 JS라이브러리 (0) | 2022.01.21 |
|---|---|
| 『coPilot』AI프로그래밍 협업API(by codex) (0) | 2021.07.11 |
| handtracking.js 인공지능 손 추적 JS라이브러리 (0) | 2021.01.18 |
| 테이블 JS 라이브러리 『Danfo.js』 (0) | 2020.11.06 |
댓글