treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Update Tesseract.js 

Port 6cb7f10134 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
lolsob-rspec
ThibG 2020-09-01 00:26:10 +02:00 committed by Thibaut Girka
parent 7ffdd23c46
commit 6a6739feb2
1 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
View File

@ -18,6 +18,8 @@ import { length } from 'stringz';
import { Tesseract as fetchTesseract } from 'flavours/glitch/util/async-components';
import GIFV from 'flavours/glitch/components/gifv';
import { me } from 'flavours/glitch/util/initial_state';
import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js';
import tesseractWorkerPath from 'tesseract.js/dist/worker.min.js';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
@ -104,6 +106,7 @@ class FocalPointModal extends ImmutablePureComponent {
dirty: false,
progress: 0,
loading: true,
ocrStatus: '',
};
componentWillMount () {
@ -219,11 +222,18 @@ class FocalPointModal extends ImmutablePureComponent {
this.setState({ detecting: true });
fetchTesseract().then(({ TesseractWorker }) => {
const worker = new TesseractWorker({
workerPath: `${assetHost}/packs/ocr/worker.min.js`,
corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`,
langPath: `${assetHost}/ocr/lang-data`,
fetchTesseract().then(({ createWorker }) => {
const worker = createWorker({
workerPath: tesseractWorkerPath,
corePath: tesseractCorePath,
langPath: assetHost,
logger: ({ status, progress }) => {
if (status === 'recognizing text') {
this.setState({ ocrStatus: 'detecting', progress });
} else {
this.setState({ ocrStatus: 'preparing', progress });
}
},
});
let media_url = media.get('url');
@ -236,12 +246,18 @@ class FocalPointModal extends ImmutablePureComponent {
}
}
worker.recognize(media_url)
.progress(({ progress }) => this.setState({ progress }))
.finally(() => worker.terminate())
.then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false }))
.catch(() => this.setState({ detecting: false }));
}).catch(() => this.setState({ detecting: false }));
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize(media_url);
this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false });
await worker.terminate();
})();
}).catch((e) => {
console.error(e);
this.setState({ detecting: false });
});
}
handleThumbnailChange = e => {
@ -261,7 +277,7 @@ class FocalPointModal extends ImmutablePureComponent {
render () {
const { media, intl, account, onClose, isUploadingThumbnail } = this.props;
const { x, y, dragging, description, dirty, detecting, progress } = this.state;
const { x, y, dragging, description, dirty, detecting, progress, ocrStatus } = this.state;
const width = media.getIn(['meta', 'original', 'width']) || null;
const height = media.getIn(['meta', 'original', 'height']) || null;
@ -282,6 +298,13 @@ class FocalPointModal extends ImmutablePureComponent {
descriptionLabel = <FormattedMessage id='upload_form.description' defaultMessage='Describe for the visually impaired' />;
}
let ocrMessage = '';
if (ocrStatus === 'detecting') {
ocrMessage = <FormattedMessage id='upload_modal.analyzing_picture' defaultMessage='Analyzing picture…' />;
} else {
ocrMessage = <FormattedMessage id='upload_modal.preparing_ocr' defaultMessage='Preparing OCR…' />;
}
return (
<div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}>
<div className='report-modal__target'>
@ -333,7 +356,7 @@ class FocalPointModal extends ImmutablePureComponent {
/>
<div className='setting-text__modifiers'>
<UploadProgress progress={progress * 100} active={detecting} icon='file-text-o' message={<FormattedMessage id='upload_modal.analyzing_picture' defaultMessage='Analyzing picture…' />} />
<UploadProgress progress={progress * 100} active={detecting} icon='file-text-o' message={ocrMessage} />
</div>
</div>