Skip to content

Commit

Permalink
doc ocr (#7101)
Browse files Browse the repository at this point in the history
* doc ocr

* update

* update

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

---------

Co-authored-by: zheng.shen <[email protected]>
Co-authored-by: 杨国璇 <[email protected]>
  • Loading branch information
3 people authored Dec 13, 2024
1 parent 36e8f64 commit 2470f6e
Show file tree
Hide file tree
Showing 25 changed files with 425 additions and 80 deletions.
24 changes: 22 additions & 2 deletions frontend/src/components/dialog/lib-settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
MetadataStatusManagementDialog as LibExtendedPropertiesSettingPanel,
MetadataFaceRecognitionDialog as LibFaceRecognitionSettingPanel,
MetadataTagsStatusDialog as LibMetadataTagsStatusSettingPanel,
MetadataOCRStatusManagementDialog as LibMetadataOCRStatusSettingPanel,
useMetadata
} from '../../metadata';
import { useMetadataStatus } from '../../hooks';
Expand All @@ -19,7 +20,8 @@ const TAB = {
AUTO_DEL_SETTING: 'auto_delete_setting',
EXTENDED_PROPERTIES_SETTING: 'extended_properties_setting',
FACE_RECOGNITION_SETTING: 'face_recognition_setting',
TAGS_SETTING: 'tags_setting'
TAGS_SETTING: 'tags_setting',
OCR_SETTING: 'ocr_setting',
};

const propTypes = {
Expand All @@ -44,7 +46,7 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
const { encrypted, is_admin } = currentRepoInfo;
const { enableMetadataManagement } = window.app.pageOptions;
const { enableFaceRecognition, updateEnableFaceRecognition } = useMetadata();
const { enableMetadata, updateEnableMetadata, enableTags, tagsLang, updateEnableTags } = useMetadataStatus();
const { enableMetadata, updateEnableMetadata, enableTags, tagsLang, updateEnableTags, enableOCR, updateEnableOCR } = useMetadataStatus();
const enableHistorySetting = is_admin; // repo owner, admin of the department which the repo belongs to, and ...
const enableAutoDelSetting = is_admin && enableRepoAutoDel;
const enableExtendedPropertiesSetting = !encrypted && is_admin && enableMetadataManagement;
Expand Down Expand Up @@ -95,6 +97,13 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
</NavLink>
</NavItem>
)}
{enableMetadataOtherSettings && (
<NavItem role="tab" aria-selected={activeTab === TAB.OCR_SETTING} aria-controls="ocr-setting-panel">
<NavLink className={activeTab === TAB.OCR_SETTING ? 'active' : ''} onClick={toggleTab.bind(this, TAB.OCR_SETTING)} tabIndex="0" onKeyDown={onTabKeyDown}>
{gettext('OCR')}
</NavLink>
</NavItem>
)}
</Nav>
</div>
<TabContent activeTab={activeTab} className="flex-fill">
Expand Down Expand Up @@ -145,6 +154,17 @@ const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
/>
</TabPane>
)}
{(enableMetadataOtherSettings && activeTab === TAB.OCR_SETTING) && (
<TabPane tabId={TAB.OCR_SETTING} role="tabpanel" id="ocr-setting-panel">
<LibMetadataOCRStatusSettingPanel
repoID={repoID}
value={enableOCR}
lang={tagsLang}
submit={updateEnableOCR}
toggleDialog={toggleDialog}
/>
</TabPane>
)}
</TabContent>
</Fragment>
</ModalBody>
Expand Down
17 changes: 16 additions & 1 deletion frontend/src/hooks/metadata-status.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const MetadataStatusProvider = ({ repoID, currentRepoInfo, hideMetadataVi
const [enableMetadata, setEnableMetadata] = useState(false);
const [enableTags, setEnableTags] = useState(false);
const [tagsLang, setTagsLang] = useState('en');
const [enableOCR, setEnableOCR] = useState(false);
const [detailsSettings, setDetailsSettings] = useState({});
const [isBeingBuilt, setIsBeingBuilt] = useState(false);

Expand All @@ -38,13 +39,20 @@ export const MetadataStatusProvider = ({ repoID, currentRepoInfo, hideMetadataVi
return;
}
metadataAPI.getMetadataStatus(repoID).then(res => {
const { enabled: enableMetadata, tags_enabled: enableTags, tags_lang: tagsLang, details_settings: detailsSettings } = res.data;
const {
enabled: enableMetadata,
tags_enabled: enableTags,
tags_lang: tagsLang,
details_settings: detailsSettings,
ocr_enabled: enableOCR
} = res.data;
if (!enableMetadata) {
cancelMetadataURL();
}
setEnableTags(enableTags);
setTagsLang(tagsLang || 'en');
setDetailsSettings(JSON.parse(detailsSettings));
setEnableOCR(enableOCR);
setEnableMetadata(enableMetadata);
setLoading(false);
}).catch(error => {
Expand Down Expand Up @@ -77,6 +85,11 @@ export const MetadataStatusProvider = ({ repoID, currentRepoInfo, hideMetadataVi
setTagsLang(lang);
}, [enableTags, tagsLang, cancelMetadataURL, hideMetadataView]);

const updateEnableOCR = useCallback((newValue) => {
if (newValue === enableOCR) return;
setEnableOCR(newValue);
}, [enableOCR]);

const modifyDetailsSettings = useCallback((update) => {
metadataAPI.modifyMetadataDetailsSettings(repoID, update).then(res => {
const newDetailsSettings = { ...detailsSettings, ...update };
Expand All @@ -100,6 +113,8 @@ export const MetadataStatusProvider = ({ repoID, currentRepoInfo, hideMetadataVi
updateEnableTags,
detailsSettings,
modifyDetailsSettings,
enableOCR,
updateEnableOCR,
}}
>
{!isLoading && children}
Expand Down
20 changes: 20 additions & 0 deletions frontend/src/metadata/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,26 @@ class MetadataManagerAPI {
return this.req.get(url);
};

// ocr
openOCR = (repoID) => {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/ocr/';
return this.req.put(url);
};

closeOCR = (repoID) => {
const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/ocr/';
return this.req.delete(url);
};

ocr = (repoID, filePath) => {
const url = this.server + '/api/v2.1/ai/ocr/';
const params = {
path: filePath,
repo_id: repoID,
};
return this.req.post(url, params);
};

}

const metadataAPI = new MetadataManagerAPI();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { gettext } from '../../../../utils/constants';
import metadataAPI from '../../../api';
import toaster from '../../../../components/toast';
import { Utils } from '../../../../utils/utils';
import TurnOffConfirmDialog from './turn-off-confirm';
import TurnOffConfirmDialog from '../turn-off-confirm-dialog';

import './index.css';

Expand Down Expand Up @@ -83,7 +83,9 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog:
</>
)}
{showTurnOffConfirmDialog && (
<TurnOffConfirmDialog toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit} />
<TurnOffConfirmDialog title={gettext('Turn off face recognition')} toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit}>
<p>{gettext('Do you really want to turn off face recognition? Existing results will all be deleted.')}</p>
</TurnOffConfirmDialog>
)}
</>
);
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ModalBody, ModalFooter, Button } from 'reactstrap';
import Switch from '../../../../components/common/switch';
import toaster from '../../../../components/toast';
import TurnOffConfirmDialog from '../turn-off-confirm-dialog';
import metadataAPI from '../../../api';
import { Utils } from '../../../../utils/utils';
import { gettext } from '../../../../utils/constants';

const MetadataOCRStatusManagementDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
const [value, setValue] = useState(oldValue);
const [submitting, setSubmitting] = useState(false);
const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);

const onToggle = useCallback(() => {
if (submitting) return;
toggle && toggle();
}, [submitting, toggle]);

const onSubmit = useCallback(() => {
if (!value) {
setShowTurnOffConfirmDialog(true);
return;
}
setSubmitting(true);
metadataAPI.openOCR(repoID).then(res => {
submit(true);
toggle();
}).catch(error => {
const errorMsg = Utils.getErrorMsg(error);
toaster.danger(errorMsg);
setSubmitting(false);
});
}, [repoID, value, submit, toggle]);

const turnOffConfirmToggle = useCallback(() => {
setShowTurnOffConfirmDialog(!showTurnOffConfirmDialog);
}, [showTurnOffConfirmDialog]);

const turnOffConfirmSubmit = useCallback(() => {
setShowTurnOffConfirmDialog(false);
setSubmitting(true);
metadataAPI.closeOCR(repoID).then(res => {
submit(false);
toggle();
}).catch(error => {
const errorMsg = Utils.getErrorMsg(error);
toaster.danger(errorMsg);
setSubmitting(false);
});
}, [repoID, submit, toggle]);

const onValueChange = useCallback(() => {
const nextValue = !value;
setValue(nextValue);
}, [value]);

return (
<>
{!showTurnOffConfirmDialog && (
<>
<ModalBody className="metadata-status-management-dialog">
<Switch
checked={value}
disabled={submitting}
size="large"
textPosition="right"
className={classnames('change-metadata-status-management w-100', { 'disabled': submitting })}
onChange={onValueChange}
placeholder={gettext('Enable OCR')}
/>
<p className="tip m-0">
{gettext('After enable OCR, you can extract text from images or scanned PDFs.')}
</p>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
<Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
</ModalFooter>
</>
)}
{showTurnOffConfirmDialog && (
<TurnOffConfirmDialog title={gettext('Turn off OCR')} toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit}>
<p>{gettext('Do you really want to turn off OCR? Existing OCR results will be deleted.')}</p>
</TurnOffConfirmDialog>
)}
</>
);
};

MetadataOCRStatusManagementDialog.propTypes = {
value: PropTypes.bool,
repoID: PropTypes.string.isRequired,
toggleDialog: PropTypes.func.isRequired,
submit: PropTypes.func.isRequired,
};

export default MetadataOCRStatusManagementDialog;
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import classnames from 'classnames';
import { ModalBody, ModalFooter, Button } from 'reactstrap';
import Switch from '../../../../components/common/switch';
import toaster from '../../../../components/toast';
import TurnOffConfirmDialog from './turn-off-confirm';
import TurnOffConfirmDialog from '../turn-off-confirm-dialog';
import metadataAPI from '../../../api';
import { Utils } from '../../../../utils/utils';
import { gettext } from '../../../../utils/constants';
Expand Down Expand Up @@ -84,7 +84,9 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggleDialog:
</>
)}
{showTurnOffConfirmDialog && (
<TurnOffConfirmDialog toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit} />
<TurnOffConfirmDialog title={gettext('Turn off extended properties')} toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit}>
<p>{gettext('Do you really want to turn off extended properties? Existing properties will all be deleted.')}</p>
</TurnOffConfirmDialog>
)}
</>
);
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { gettext } from '../../../../utils/constants';
import tagsAPI from '../../../../tag/api';
import toaster from '../../../../components/toast';
import { Utils } from '../../../../utils/utils';
import TurnOffConfirmDialog from './turn-off-confirm';
import TurnOffConfirmDialog from '../turn-off-confirm-dialog';
import { SeahubSelect } from '../../../../components/common/select';

import './index.css';
Expand All @@ -16,8 +16,7 @@ const langOptions = [
{
value: 'zh-cn',
label: '简体中文'
},
{
}, {
value: 'en',
label: 'English'
}
Expand Down Expand Up @@ -113,7 +112,9 @@ const MetadataTagsStatusDialog = ({ value: oldValue, lang: oldLang, repoID, togg
</>
)}
{showTurnOffConfirmDialog && (
<TurnOffConfirmDialog toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit} />
<TurnOffConfirmDialog title={gettext('Turn off tags')} toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit}>
<p>{gettext('Do you really want to turn off tags? Existing tags will all be deleted.')}</p>
</TurnOffConfirmDialog>
)}
</>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
import { gettext } from '../../../../utils/constants';
import { gettext } from '../../../utils/constants';

const TurnOffConfirmDialog = ({ toggle, submit }) => {
const TurnOffConfirmDialog = ({ title, children, toggle, submit }) => {
return (
<Modal isOpen={true} toggle={toggle}>
<ModalHeader toggle={toggle}>{gettext('Turn off tags')}</ModalHeader>
<ModalHeader toggle={toggle}>{title}</ModalHeader>
<ModalBody>
<p>{gettext('Do you really want to turn off tags? Existing tags will all be deleted.')}</p>
{children}
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={toggle}>{gettext('Cancel')}</Button>
Expand All @@ -19,6 +19,8 @@ const TurnOffConfirmDialog = ({ toggle, submit }) => {
};

TurnOffConfirmDialog.propTypes = {
title: PropTypes.string,
children: PropTypes.any,
toggle: PropTypes.func.isRequired,
submit: PropTypes.func.isRequired
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
PRIVATE_COLUMN_KEY.LOCATION,
PRIVATE_COLUMN_KEY.FACE_LINKS,
PRIVATE_COLUMN_KEY.FACE_VECTORS,
PRIVATE_COLUMN_KEY.OCR,
];

export {
Expand Down
Loading

0 comments on commit 2470f6e

Please sign in to comment.