diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
index c8b0e4bd78..b790b29a07 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js
@@ -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 =