update detected words ui

src/components/MachineLearning/TextDetection.tsx

@@ -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} />;
-}

src/components/MachineLearning/WordList.tsx

@@ -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>
+    );
+}

src/components/PhotoSwipe/PhotoSwipe.tsx

@@ -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(() => {
+    // useEffect(() => {
-        if (photoSwipe) {
+    //     if (photoSwipe) {
-            photoSwipe.options.arrowKeys = !showInfo;
+    //         photoSwipe.options.arrowKeys = !showInfo;
-            photoSwipe.options.escKey = !showInfo;
+    //         photoSwipe.options.escKey = !showInfo;
-        }
+    //     }
-    }, [showInfo]);
+    // }, [showInfo]);
 
     function updateFavButton() {
         setIsFav(isInFav(this?.currItem));