vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add translation for interpretation log

Browse Source
This commit is contained in:
RohitR311
2024-12-21 12:32:08 +05:30
parent 2d35f29aea
commit c367af3bc4
1 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/molecules/InterpretationLog.tsx
View File

@@ -17,6 +17,7 @@ import StorageIcon from '@mui/icons-material/Storage';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'; import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import { SidePanelHeader } from './SidePanelHeader'; import { SidePanelHeader } from './SidePanelHeader';
import { useGlobalInfoStore } from '../../context/globalInfo'; import { useGlobalInfoStore } from '../../context/globalInfo';
import { useTranslation } from 'react-i18next';
interface InterpretationLogProps { interface InterpretationLogProps {
isOpen: boolean; isOpen: boolean;
@@ -24,6 +25,7 @@ interface InterpretationLogProps {
} }
export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, setIsOpen }) => { export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, setIsOpen }) => {
const { t } = useTranslation();
const [log, setLog] = useState<string>(''); const [log, setLog] = useState<string>('');
const [customValue, setCustomValue] = useState(''); const [customValue, setCustomValue] = useState('');
const [tableData, setTableData] = useState<any[]>([]); const [tableData, setTableData] = useState<any[]>([]);
@@ -63,28 +65,29 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const handleSerializableCallback = useCallback((data: any) => { const handleSerializableCallback = useCallback((data: any) => {
setLog((prevState) => setLog((prevState) =>
prevState + '\n' + '---------- Serializable output data received ----------' + '\n' prevState + '\n' + t('interpretation_log.data_sections.serializable_received') + '\n'
+ JSON.stringify(data, null, 2) + '\n' + '--------------------------------------------------'); + JSON.stringify(data, null, 2) + '\n' + t('interpretation_log.data_sections.separator'));
if (Array.isArray(data)) { if (Array.isArray(data)) {
setTableData(data); setTableData(data);
} }
scrollLogToBottom(); scrollLogToBottom();
}, [log, scrollLogToBottom]); }, [log, scrollLogToBottom, t]);
const handleBinaryCallback = useCallback(({ data, mimetype }: any) => { const handleBinaryCallback = useCallback(({ data, mimetype }: any) => {
const base64String = Buffer.from(data).toString('base64'); const base64String = Buffer.from(data).toString('base64');
const imageSrc = `data:${mimetype};base64,${base64String}`; const imageSrc = `data:${mimetype};base64,${base64String}`;
setLog((prevState) => setLog((prevState) =>
prevState + '\n' + '---------- Binary output data received ----------' + '\n' prevState + '\n' + t('interpretation_log.data_sections.binary_received') + '\n'
+ `mimetype: ${mimetype}` + '\n' + 'Image is rendered below:' + '\n' + t('interpretation_log.data_sections.mimetype') + mimetype + '\n'
+ '------------------------------------------------'); + t('interpretation_log.data_sections.image_below') + '\n'
+ t('interpretation_log.data_sections.separator'));
setBinaryData(imageSrc); setBinaryData(imageSrc);
scrollLogToBottom(); scrollLogToBottom();
}, [log, scrollLogToBottom]); }, [log, scrollLogToBottom, t]);
const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -136,7 +139,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}, },
}} }}
> >
<ArrowUpwardIcon fontSize="inherit" sx={{ marginRight: '10px'}} /> Output Data Preview <ArrowUpwardIcon fontSize="inherit" sx={{ marginRight: '10px'}} />
{t('interpretation_log.titles.output_preview')}
</Button> </Button>
<SwipeableDrawer <SwipeableDrawer
anchor="bottom" anchor="bottom"
@@ -155,9 +159,10 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}, },
}} }}
> >
<Typography variant="h6" gutterBottom style={{ display: 'flex', alignItems: 'center' }}> <Typography variant="h6" gutterBottom style={{ display: 'flex', alignItems: 'center' }}>
<StorageIcon style={{ marginRight: '8px' }} /> Output Data Preview <StorageIcon style={{ marginRight: '8px' }} />
</Typography> {t('interpretation_log.titles.output_preview')}
</Typography>
<div <div
style={{ style={{
height: '50vh', height: '50vh',
@@ -168,8 +173,10 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
{ {
binaryData ? ( binaryData ? (
<div style={{ marginBottom: '20px' }}> <div style={{ marginBottom: '20px' }}>
<Typography variant="body1" gutterBottom>Screenshot</Typography> <Typography variant="body1" gutterBottom>
<img src={binaryData} alt="Binary Output" style={{ maxWidth: '100%' }} /> {t('interpretation_log.titles.screenshot')}
</Typography>
<img src={binaryData} alt={t('interpretation_log.titles.screenshot')} style={{ maxWidth: '100%' }} />
</div> </div>
) : tableData.length > 0 ? ( ) : tableData.length > 0 ? (
<> <>
@@ -193,7 +200,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px' }}>Additional rows of data will be extracted once you finish recording. </span> <span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px' }}>
{t('interpretation_log.messages.additional_rows')}
</span>
</> </>
) : ( ) : (
<Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}> <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
@@ -201,13 +210,13 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
{hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? ( {hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
<> <>
<Typography variant="h6" gutterBottom align="left"> <Typography variant="h6" gutterBottom align="left">
You've successfully trained the robot to perform actions! Click on the button below to get a preview of the data your robot will extract. {t('interpretation_log.messages.successful_training')}
</Typography> </Typography>
<SidePanelHeader /> <SidePanelHeader />
</> </>
) : ( ) : (
<Typography variant="h6" gutterBottom align="left"> <Typography variant="h6" gutterBottom align="left">
It looks like you have not selected anything for extraction yet. Once you do, the robot will show a preview of your selections here. {t('interpretation_log.messages.no_selection')}
</Typography> </Typography>
)} )}
</Grid> </Grid>
@@ -219,4 +228,4 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</Grid> </Grid>
</Grid> </Grid>
); );
} };