diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/focal_point_modal.js | 49 |
1 files changed, 36 insertions, 13 deletions
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 c8b0e4bd7..b790b29a0 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 = <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> |