Similar Images Cleanup for Desktop/Web

.gitignore

@@ -5,5 +5,3 @@
 # macOS
 .DS_Store
 
-# Ignore CLAUDE.local.md files anywhere in the repository
-CLAUDE.local.md

desktop/package.json

@@ -15,7 +15,9 @@
         "build:quick": "yarn build-renderer && yarn build-main:quick",
         "dev": "concurrently --kill-others --success first --names 'main,rndr' \"yarn dev-main\" \"yarn dev-renderer\"",
         "dev-main": "tsc && electron .",
+        "dev-main:sandbox": "tsc && electron . --user-data-dir=./.sandbox-data",
         "dev-renderer": "cross-env-shell _ENTE_IS_DESKTOP=1 \"cd ../web && yarn install && yarn workspace photos next dev -p 3008\"",
+        "dev:sandbox": "concurrently --kill-others --success first --names 'main,rndr' \"yarn dev-main:sandbox\" \"yarn dev-renderer\"",
         "postinstall": "electron-builder install-app-deps",
         "lint": "yarn prettier --check --log-level warn . && yarn eslint && yarn tsc",
         "lint-fix": "yarn prettier --write --log-level warn . && yarn eslint && yarn tsc",
@@ -57,4 +59,4 @@
     },
     "packageManager": "[email protected]",
     "productName": "ente"
-}
+}

desktop/src/main/menu.ts

@@ -109,7 +109,12 @@ export const createApplicationMenu = (mainWindow: BrowserWindow) => {
                 ]),
             ],
         },
-        { label: "Help", submenu: [{ label: "Ente Help", click: handleHelp }] },
+        {
+            label: "Help",
+            submenu: [
+                { label: "Ente Help", click: handleHelp },
+            ],
+        },
     ]);
 };
 

web/apps/photos/src/components/Sidebar.tsx

@@ -290,6 +290,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
                 onShowExport,
                 onLogout: handleLogout,
                 onRouteToDeduplicate: () => router.push("/duplicates"),
+                onRouteToSimilarImages: () => router.push("/similar-images"),
                 onShowWatchFolder: handleOpenWatchFolder,
                 pseudoIDs: {
                     uncategorized: uncategorizedCollectionSummaryID,
@@ -380,6 +381,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
                         onRouteToDeduplicate: () => {
                             void router.push("/duplicates");
                         },
+                        onRouteToSimilarImages: () => {
+                            void router.push("/similar-images");
+                        },
                     }}
                 />
                 <Divider sx={{ my: "2px" }} />
@@ -768,6 +772,7 @@ type UtilitySectionProps = SectionProps &
         pendingHelpAction?: HelpAction;
         onHelpActionHandled: (action?: HelpAction) => void;
         onRouteToDeduplicate: () => void;
+        onRouteToSimilarImages: () => void;
     };
 
 const UtilitySection: React.FC<UtilitySectionProps> = ({
@@ -790,6 +795,7 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({
     pendingHelpAction,
     onHelpActionHandled,
     onRouteToDeduplicate,
+    onRouteToSimilarImages,
 }) => {
     const { showMiniDialog } = useBaseContext();
 
@@ -817,6 +823,11 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({
                 label={t("deduplicate_files")}
                 onClick={onRouteToDeduplicate}
             />
+            <RowButton
+                variant="secondary"
+                label={t("similar_images")}
+                onClick={onRouteToSimilarImages}
+            />
             <RowButton
                 variant="secondary"
                 label={t("preferences")}

web/apps/photos/src/pages/similar-images.tsx

@@ -0,0 +1 @@
+export { default } from "ente-new/photos/pages/similar-images";

web/packages/base/locales/en-US/translation.json

@@ -727,5 +727,26 @@
     "continuous": "Continuous",
     "trip": "Trip",
     "album_layout": "Album layout",
-    "maps_privacy_notice": "Approximate coordinates will be sent to privacy conscious third parties like OpenStreetMap to show the map and location."
+    "maps_privacy_notice": "Approximate coordinates will be sent to privacy conscious third parties like OpenStreetMap to show the map and location.",
+    "similar_images": "Similar images",
+    "find_similar_images": "Find similar images",
+    "no_similar_images_found": "No similar images found",
+    "your_photos_look_unique": "Your photos look unique",
+    "similar_groups_found": "{{count, number}} groups found",
+    "review_and_remove_similar_images": "Review and remove similar images",
+    "delete_photos_with_size": "Delete {{count, number}} photos ({{size}})",
+    "similar_images_count": "{{count, number}} similar images",
+    "similarity": "Similarity",
+    "analyzing_photos_locally": "Analyzing your photos locally...",
+    "close_by": "Close by",
+    "similar": "Similar",
+    "related": "Related",
+    "similarity_threshold": "Similarity threshold",
+    "photos": "photos",
+    "more": "more",
+    "remove": "Remove",
+    "keep": "Keep",
+    "deleting": "Deleting...",
+    "select_all_in_groups": "Select all",
+    "deselect_all_groups": "Deselect all"
 }

web/packages/new/package.json

@@ -10,6 +10,7 @@
         "ente-base": "*",
         "ente-gallery": "*",
         "ente-utils": "*",
+        "hnswlib-wasm": "^0.8.2",
         "react": "^19.2.0",
         "react-dom": "^19.2.0"
     },

web/packages/new/photos/components/Tiles.tsx

@@ -1,5 +1,11 @@
 import AddIcon from "@mui/icons-material/Add";
-import { Stack, styled, Typography } from "@mui/material";
+import {
+    Stack,
+    styled,
+    Typography,
+    type SxProps,
+    type Theme,
+} from "@mui/material";
 import { CenteredFill, Overlay } from "ente-base/components/containers";
 import type { ButtonishProps } from "ente-base/components/mui";
 import log from "ente-base/log";
@@ -39,6 +45,10 @@ interface ItemCardProps {
      * Optional click handler.
      */
     onClick?: () => void;
+    /**
+     * Optional styling overrides.
+     */
+    sx?: SxProps<Theme>;
 }
 
 /**
@@ -61,6 +71,7 @@ export const ItemCard: React.FC<React.PropsWithChildren<ItemCardProps>> = ({
     coverFaceID,
     isScrolling,
     onClick,
+    sx,
     children,
 }) => {
     const [coverImageURL, setCoverImageURL] = useState<string | undefined>();
@@ -89,7 +100,7 @@ export const ItemCard: React.FC<React.PropsWithChildren<ItemCardProps>> = ({
     }, [coverFile, coverFaceID, isScrolling]);
 
     return (
-        <TileComponent {...{ onClick }}>
+        <TileComponent {...{ onClick, sx }}>
             {coverFile?.metadata.hasStaticThumbnail ? (
                 <StaticThumbnail fileType={coverFile.metadata.fileType} />
             ) : coverImageURL ? (