update detected words ui
This commit is contained in:
parent
4d6d441798
commit
dece1c5ff2
|
@ -1,23 +0,0 @@
|
|||
import { CodeBlock } from 'components/CodeBlock';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { EnteFile } from 'types/file';
|
||||
import mlIDbStorage from 'utils/storage/mlIDbStorage';
|
||||
|
||||
export function TextDetection(props: { file: EnteFile }) {
|
||||
const [text, setText] = useState<string>(null);
|
||||
useEffect(() => {
|
||||
let didCancel = false;
|
||||
const main = async () => {
|
||||
const text = await mlIDbStorage.getAllTextMap();
|
||||
const detectedWords = text.get(props.file.id)?.detection.data.text;
|
||||
|
||||
!didCancel && setText(detectedWords);
|
||||
};
|
||||
main();
|
||||
return () => {
|
||||
didCancel = true;
|
||||
};
|
||||
}, [props.file]);
|
||||
|
||||
return <CodeBlock code={text} />;
|
||||
}
|
44
src/components/MachineLearning/WordList.tsx
Normal file
44
src/components/MachineLearning/WordList.tsx
Normal file
|
@ -0,0 +1,44 @@
|
|||
import { Chip } from 'components/pages/gallery/Collections';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { EnteFile } from 'types/file';
|
||||
import mlIDbStorage from 'utils/storage/mlIDbStorage';
|
||||
|
||||
export function WordList(props: { file: EnteFile }) {
|
||||
const [words, setWords] = useState<string[]>([]);
|
||||
useEffect(() => {
|
||||
let didCancel = false;
|
||||
const main = async () => {
|
||||
const texts = await mlIDbStorage.getAllTextMap();
|
||||
const uniqueDetectedWords = [
|
||||
...new Set(
|
||||
(texts.get(props.file.id) ?? []).map(
|
||||
(text) => text.detection.word
|
||||
)
|
||||
),
|
||||
];
|
||||
|
||||
!didCancel && setWords(uniqueDetectedWords);
|
||||
};
|
||||
main();
|
||||
return () => {
|
||||
didCancel = true;
|
||||
};
|
||||
}, [props.file]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{words.map((object) => (
|
||||
<Chip
|
||||
active={true}
|
||||
style={{
|
||||
paddingLeft: 0,
|
||||
padding: '5px 10px',
|
||||
cursor: 'default',
|
||||
}}
|
||||
key={object}>
|
||||
{object}
|
||||
</Chip>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -53,7 +53,7 @@ import { sleep } from 'utils/common';
|
|||
import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
|
||||
import { GalleryContext } from 'pages/gallery';
|
||||
import { ObjectLabelList } from 'components/MachineLearning/ObjectList';
|
||||
import { TextDetection } from 'components/MachineLearning/TextDetection';
|
||||
import { WordList } from 'components/MachineLearning/WordList';
|
||||
|
||||
const SmallLoadingSpinner = () => (
|
||||
<EnteSpinner
|
||||
|
@ -490,7 +490,7 @@ function InfoModal({
|
|||
</div>
|
||||
<div>
|
||||
<Legend>{constants.TEXT}</Legend>
|
||||
<TextDetection
|
||||
<WordList
|
||||
file={items[photoSwipe?.getCurrentIndex()]}
|
||||
/>
|
||||
</div>
|
||||
|
@ -543,12 +543,12 @@ function PhotoSwipe(props: Iprops) {
|
|||
updateItems(items);
|
||||
}, [items]);
|
||||
|
||||
useEffect(() => {
|
||||
if (photoSwipe) {
|
||||
photoSwipe.options.arrowKeys = !showInfo;
|
||||
photoSwipe.options.escKey = !showInfo;
|
||||
}
|
||||
}, [showInfo]);
|
||||
// useEffect(() => {
|
||||
// if (photoSwipe) {
|
||||
// photoSwipe.options.arrowKeys = !showInfo;
|
||||
// photoSwipe.options.escKey = !showInfo;
|
||||
// }
|
||||
// }, [showInfo]);
|
||||
|
||||
function updateFavButton() {
|
||||
setIsFav(isInFav(this?.currItem));
|
||||
|
|
Loading…
Reference in a new issue