mirror/YuruToot
1
0
Fork 0
mirror of https://github.com/funamitech/mastodon synced 2024-12-03 17:28:35 +09:00
Code

[Glitch] Update Tesseract.js

Browse Source 
Port 5fc5a9f9f1 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2020-09-01 00:26:10 +02:00 committed by Thibaut Girka
parent a2d66a90e6
commit 787a629b8f
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 { Tesseract as fetchTesseract } from 'flavours/glitch/util/async-components';
import GIFV from 'flavours/glitch/components/gifv'; import GIFV from 'flavours/glitch/components/gifv';
import { me } from 'flavours/glitch/util/initial_state'; 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({ const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' }, close: { id: 'lightbox.close', defaultMessage: 'Close' },
@ -104,6 +106,7 @@ class FocalPointModal extends ImmutablePureComponent {
dirty: false, dirty: false,
progress: 0, progress: 0,
loading: true, loading: true,
ocrStatus: '',
}; };
componentWillMount () { componentWillMount () {
@ -219,11 +222,18 @@ class FocalPointModal extends ImmutablePureComponent {
this.setState({ detecting: true }); this.setState({ detecting: true });
fetchTesseract().then(({ TesseractWorker }) => { fetchTesseract().then(({ createWorker }) => {
const worker = new TesseractWorker({ const worker = createWorker({
workerPath: `${assetHost}/packs/ocr/worker.min.js`, workerPath: tesseractWorkerPath,
corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`, corePath: tesseractCorePath,
langPath: `${assetHost}/ocr/lang-data`, 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'); let media_url = media.get('url');
@ -236,12 +246,18 @@ class FocalPointModal extends ImmutablePureComponent {
} }
} }
worker.recognize(media_url) (async () => {
.progress(({ progress }) => this.setState({ progress })) await worker.load();
.finally(() => worker.terminate()) await worker.loadLanguage('eng');
.then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false })) await worker.initialize('eng');
.catch(() => this.setState({ detecting: false })); const { data: { text } } = await worker.recognize(media_url);
}).catch(() => this.setState({ detecting: false })); this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false });
await worker.terminate();
})();
}).catch((e) => {
console.error(e);
this.setState({ detecting: false });
});
} }
handleThumbnailChange = e => { handleThumbnailChange = e => {
@ -261,7 +277,7 @@ class FocalPointModal extends ImmutablePureComponent {
render () { render () {
const { media, intl, account, onClose, isUploadingThumbnail } = this.props; 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 width = media.getIn(['meta', 'original', 'width']) || null;
const height = media.getIn(['meta', 'original', 'height']) || 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' />; 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 ( return (
<div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}> <div className='modal-root__modal report-modal' style={{ maxWidth: 960 }}>
<div className='report-modal__target'> <div className='report-modal__target'>
@ -333,7 +356,7 @@ class FocalPointModal extends ImmutablePureComponent {
/> />
<div className='setting-text__modifiers'> <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>
</div> </div>